/* Identidade visual (SPEC §4 e GUIA_VISUAL) */ /* Cores: só tokens de temas.css (carregado antes deste arquivo; proposta 4 §4). Aqui, só medidas e fonte. */ /* Fonte Inter servida pelo próprio sistema (27/09/2026 — nada de Google Fonts: a primeira abertura não espera outro servidor, e funciona sem internet). Subconjunto latino (o do português), pesos 400/500/600/700, `woff2`, copiados do pacote @fontsource/inter 5.3.0; licença SIL Open Font License 1.1 em public/fonts/LICENSE-Inter.txt. O que ficar fora do subconjunto usa o fallback de --fonte. O 400 é pré-carregado no de index.html e login.html. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --raio: 12px; --raio-sm: 8px; --sidebar-w: 240px; --topbar-h: 60px; --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color-scheme: light; accent-color: var(--acento); /* medidas do modal (proposta 5 §0.2): topo do modal ancorado e altura do modal fixo (com abas ou passos) */ --modal-topo: clamp(24px, 8vh, 72px); --modal-fixo-h: 820px; } /* controles nativos (data, barra de rolagem, select) acompanham o modo */ :root[data-modo="escuro"] { color-scheme: dark; } * { box-sizing: border-box; } html, body { height: 100%; } /* a barra de rolagem da página está sempre presente: trocar de tela curta para longa não empurra o layout (proposta 5 §0.4-R3). `overflow-y: scroll`, não `scrollbar-gutter: stable`: a sarjeta vazia do `html` fica fora do `.modal-fundo` (fixed, inset 0) e deixava uma faixa sem sombreamento ao lado do modal nas telas que não rolam */ html { overflow-y: scroll; } body { margin: 0; font-family: var(--fonte); font-size: 14px; line-height: 1.45; color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; } a { color: var(--acento); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; } h1 { font-size: 20px; } h2 { font-size: 16px; } h3 { font-size: 14px; } p { margin: 0; } button { font-family: inherit; font-size: inherit; } input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } .oculto { display: none !important; } .mudo { color: var(--texto-2); } .mudo-3 { color: var(--texto-3); } .pequeno { font-size: 12px; } .mono { font-variant-numeric: tabular-nums; } .negrito { font-weight: 600; } .linha { display: flex; align-items: center; gap: 8px; } .linha-entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .coluna { display: flex; flex-direction: column; gap: 8px; } .cresce { flex: 1; min-width: 0; } .truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .vazio { padding: 32px; text-align: center; color: var(--texto-3); } /* A faixa de falha da abertura (30/09/2026 — o arranque embutido no public/index.html): no lugar do conteúdo quando o sistema não abriu (rede recusada num reinício do servidor, um módulo que não carregou, uma requisição pendente para sempre), com a frase, a dica (só quando a nova tentativa sozinha parou) e "Tentar agora". Só tokens; nada da faixa muda de lugar entre as tentativas (a dica escondida não ocupa espaço só depois de parar — e aí fica). */ .abertura-falha { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 640px; padding: 20px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--texto); } .abertura-falha-texto { margin: 0; font-size: 15px; font-weight: 600; } .abertura-falha-dica { margin: 0; font-size: 13px; color: var(--texto-2); } /* ---------- layout ---------- */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } /* a barra lateral só lê os tokens do menu (`--menu-*` de temas.css): nas paletas de menu colorido (Cobalto, Flamengo, Clube do Remo) ela muda de cor sozinha — nunca `--superficie`/`--texto` direto aqui (teste em contraste.test.js) */ .sidebar { background: var(--menu-fundo); color: var(--menu-forte); border-right: 1px solid var(--menu-borda); /* nas paletas de menu colorido, a cor do próprio menu: sem filete */ padding: 16px 12px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; } .marca { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; } /* Proposta 9 (itens 2a e 2b): na barra lateral a marca tem ALTURA FIXA (64px) com e sem logotipo e com o menu aberto ou recolhido — o primeiro item do menu fica sempre no mesmo lugar. O logotipo da empresa (a versão para o fundo do menu, menuLateral.js) entra no lugar do quadrado e dos nomes; a seta de recolher fica à direita. */ .sidebar .marca { height: 64px; padding: 4px 0 12px 8px; gap: 8px; flex: none; min-width: 0; } .marca-textos { min-width: 0; flex: 1 1 auto; overflow: hidden; } .sidebar .marca-nome, .sidebar .marca-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .marca-logo { flex: none; } .marca-imagem { display: block; flex: 1 1 auto; min-width: 0; height: 48px; object-fit: contain; object-position: left center; } .marca-imagem[hidden], .marca.com-imagem .marca-logo, .marca.com-imagem .marca-textos { display: none; } .sidebar .recolher-menu { flex: none; width: 28px; height: 28px; margin-left: auto; } .sidebar .recolher-menu svg { width: 16px; height: 16px; } .marca-logo { width: 32px; height: 32px; border-radius: 8px; background: var(--marca); color: var(--sobre-marca); font-weight: 700; font-size: 15px; display: grid; place-items: center; letter-spacing: -.02em; } .marca-nome { font-weight: 700; font-size: 14px; line-height: 1.1; } .marca-sub { font-size: 11px; color: var(--texto-3); } /* a marca dentro do menu (e na prévia dela em Configurações do sistema) usa as cores do menu */ .sidebar .marca-logo, .marca-previa .marca-logo { background: var(--menu-marca); color: var(--menu-sobre-marca); } .sidebar .marca-sub, .marca-previa .marca-sub { color: var(--menu-texto-3); } .nav-grupo { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--menu-texto-3); padding: 14px 10px 6px; } /* GUIA §1.4 regra 15 — itens da sidebar são guias do mesmo tamanho: TODOS com 36px e o rótulo numa linha só, em toda tela e com qualquer contador. Antes o contador ficava à direita, no fluxo: "Central de Pendências" e "Agenda de Reuniões" quebravam em duas linhas (56,6px, as outras 36,3) e o contador de Tarefas, ao aparecer ou sumir (`.oculto`), mudava a quebra — todos os itens de baixo pulavam 20px a cada atualização dos contadores. Agora o contador fica por cima do canto do ícone (regra 9: não ocupa espaço) e o rótulo tem a largura inteira: o mais longo, "Central de Pendências", mede 150,8px de 167 (medido; reticências são só a rede de segurança). */ .nav-item { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 8px 10px; border-radius: var(--raio-sm); white-space: nowrap; color: var(--menu-texto); font-weight: 500; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; } .nav-item > .cresce { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nav-item:hover { background: var(--menu-hover); color: var(--menu-forte); text-decoration: none; } .nav-item.ativo { background: var(--menu-ativo); color: var(--menu-sobre-ativo); } .nav-item svg { width: 18px; height: 18px; flex: none; } /* o contador: pill no canto superior direito do ícone (a borda direita dele fica a 6px da borda direita do ícone e ele cresce para a esquerda, por cima do ícone — "99+" nunca invade o rótulo) */ .nav-item .contador { position: absolute; top: 2px; left: 34px; transform: translateX(-100%); pointer-events: none; min-width: 18px; height: 16px; padding: 0 4px; border: 1px solid var(--menu-contador-borda); border-radius: 999px; font-size: 11px; line-height: 14px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; background: var(--menu-contador); color: var(--menu-sobre-contador); } .nav-item.ativo .contador { background: var(--menu-contador-ativo); color: var(--menu-sobre-contador-ativo); } .sidebar-rodape { margin-top: auto; border-top: 1px solid var(--menu-linha); padding-top: 12px; } .sidebar .avatar { background: var(--menu-avatar); color: var(--menu-sobre-avatar); } .sidebar .btn-fantasma { color: var(--menu-texto); } .sidebar .btn-fantasma:hover { background: var(--menu-hover); color: var(--menu-forte); } /* bloqueado (aria-disabled) na sidebar: sem esta regra (0,4,0), `.btn-fantasma[aria-disabled="true"]:hover`, declarada depois com a mesma especificidade da de cima (0,3,0), pintaria `--texto-2` sobre o menu colorido (no Flamengo claro, ≈ 2,9:1). Hoje nenhum botão da sidebar nasce desabilitado; o teste de contraste confere que toda regra `.btn-fantasma…` do app.css tem a sua `.sidebar .btn-fantasma…`. */ .sidebar .btn-fantasma[aria-disabled="true"]:hover { background: transparent; color: var(--menu-texto); } /* Proposta 8 (item 3): a engrenagem do rodapé — com a janela de configurações aberta, o fundo do hover; numa seção das Configurações do sistema, acesa como o item ativo do menu (os dois pares já estão no teste de contraste) */ .sidebar .btn-fantasma.ativo { background: var(--menu-hover); color: var(--menu-forte); } .sidebar .btn-fantasma.na-secao { background: var(--menu-ativo); color: var(--menu-sobre-ativo); } /* Proposta 8 (item 5): a versão do sistema no pé da barra lateral (uma linha, dígitos tabulares) */ .sidebar .versao-sistema { height: 16px; padding: 0 10px; font-size: 11px; line-height: 16px; color: var(--menu-texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* o número curto (aria-hidden) só aparece no menu recolhido; o texto longo é o do leitor de tela nos dois estados */ .sidebar .versao-curta { display: none; } .usuario-chip { display: flex; align-items: center; gap: 10px; padding: 6px 10px; } .avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--acento-suave); color: var(--acento-forte); font-weight: 600; font-size: 12px; display: grid; place-items: center; } .usuario-nome { font-weight: 600; font-size: 13px; } .usuario-papel { font-size: 11px; color: var(--menu-texto-3); text-transform: capitalize; } .principal { display: flex; flex-direction: column; min-width: 0; } /* Proposta 9 (item 1a): o fundo, a borda e o realce da barra do título são tokens próprios (na base, a superfície, a borda e o --fundo de sempre; nas paletas do Gestor Pro, o papel da página com o realce branco): o realce vale para o hover, o ativo e o campo de busca de dentro dela, redefinindo o --fundo só aqui dentro */ .topbar { height: var(--topbar-h); background: var(--fundo-topbar); border-bottom: 1px solid var(--borda-topbar); --fundo: var(--realce-topbar); display: flex; align-items: center; gap: 16px; padding: 0 24px; position: sticky; top: 0; z-index: 20; } .topbar h1 { font-size: 17px; } .busca { position: relative; flex: 1; max-width: 460px; margin-left: auto; } .busca input { width: 100%; height: 36px; padding: 0 12px 0 36px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--fundo); outline: none; } .busca input:focus { border-color: var(--acento); background: var(--superficie); box-shadow: 0 0 0 3px var(--acento-suave); } .busca-campo { position: relative; } .busca-campo > svg { position: absolute; left: 11px; top: 10px; width: 16px; height: 16px; color: var(--texto-3); } .conteudo { padding: 24px; flex: 1; min-width: 0; } .tela { min-width: 0; } /* contêiner de uma renderização de tela (app.js › renderizar) */ /* Proposta 5 §0.4-R12 (GUIA §1.4 regra 13 e §2.3): o cabeçalho de tela é uma pilha de faixas, na mesma ordem em toda tela (`cabecalhoTela` de ui.js): (1) `.cabecalho-resumo`, 36px FIXOS — o h2 numa linha só e as ações à direita; (2) `.filtros`, com as abas-filtro na frente; (3) o `p` de apoio; (4) `.filtros-chips`, a faixa dos chips, sempre presente nas telas que têm chip. Antes das abas só vem a faixa (1): o topo delas é o mesmo em toda tela numa mesma largura (a ajuda, que tem uma, duas ou três linhas conforme a tela, vem depois), e nada que muda com um clique — os números do resumo, um chip que some — muda a altura de uma faixa. */ .conteudo-cabecalho { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; min-width: 0; } .cabecalho-resumo { display: flex; align-items: center; gap: 16px; height: 36px; min-width: 0; } .cabecalho-acoes { display: flex; align-items: center; gap: 8px; flex: none; } .cabecalho-acoes:empty { display: none; } .conteudo-cabecalho p { color: var(--texto-2); margin: 0; } /* o resumo muda com os números: dígitos tabulares (R4) e UMA linha (R12) — o resumo que cresce ganha reticências, nunca uma segunda linha que empurraria as abas (a 414px, "14 abertas · …" quebrava e "0 abertas · …" não); completo no `title` */ .conteudo-cabecalho h2 { font-variant-numeric: tabular-nums; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* proposta 11, Parte 4: com ajuda, o h2 e o "?" (botaoAjuda) juntos — o "?" logo depois do texto, o resumo com as reticências; o bloco ocupa o que sobra antes das ações */ .cabecalho-titulo { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; } .cabecalho-titulo > h2 { flex: 0 1 auto; } /* a barra de filtros: abas e selects, todos com 34px de altura e alinhados pelo topo — uma linha a mais ou a menos nunca desloca as abas nem 1px (chip e botão primário não entram aqui: R12) */ .conteudo-cabecalho > .filtros { align-items: flex-start; } /* a faixa dos chips fica reservada (R7): o chip aparecer ou sumir não empurra a lista */ /* e tem UMA linha de altura fixa (rev. 4): com dois chips numa tela estreita ("Só vencidas" + "Obra: …"), o chip da obra encolhe e o texto dela ganha reticências (completo no `title` do `.chip-texto`; o "limpar" fica sempre à vista) — nunca uma segunda linha que sumiria ao limpar um chip. A rolagem lateral (barra escondida) é só a rede de segurança. */ .filtros-chips { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; height: 34px; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .filtros-chips::-webkit-scrollbar { display: none; } .filtros-chips .chip-filtro { flex: none; max-width: 100%; white-space: nowrap; } .filtros-chips .chip-filtro:has(> .chip-texto) { flex: 0 1 auto; min-width: 0; } .chip-filtro .chip-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--raio-sm); border: 1px solid transparent; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .12s, box-shadow .12s; background: var(--superficie); color: var(--texto); border-color: var(--borda); } .btn:hover { background: var(--fundo); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .btn svg { width: 16px; height: 16px; } .btn-primario { background: var(--destaque); color: var(--sobre-destaque); border-color: var(--destaque); } .btn-primario:hover { background: var(--destaque-forte); } .btn-azul { background: var(--acento-suave); color: var(--acento-forte); border-color: transparent; } .btn-azul:hover { background: var(--acento-suave-hover); } /* só com texto --acento-forte (par proibido: §4.5) */ .btn-verde { background: var(--verde); color: var(--sobre-semantica); border-color: var(--verde); } /* Proposta 9 (item 1b): o Capturar da barra do topo — azul-petróleo em toda paleta (--captura, na base de cada modo; o Alto contraste reforça o tom), nunca a cor da Nova Demanda (.btn-primario, --destaque) */ .btn-captura { background: var(--captura); color: var(--sobre-captura); border-color: var(--captura); } .btn-captura:hover { background: var(--captura-forte); border-color: var(--captura-forte); } .btn-verde:hover { background: var(--verde-forte); } /* bloqueado por aria-disabled (o clique ainda chega, ex.: Encerrar da Sala): o hover não reage como se estivesse ativo */ .btn[aria-disabled="true"]:hover { background: var(--superficie); } .btn-primario[aria-disabled="true"]:hover { background: var(--destaque); } .btn-azul[aria-disabled="true"]:hover { background: var(--acento-suave); } .btn-verde[aria-disabled="true"]:hover { background: var(--verde); } .btn-perigo { color: var(--vermelho); } .btn-perigo:hover { background: var(--vermelho-suave); } .btn-fantasma { border-color: transparent; background: transparent; color: var(--texto-2); } .btn-fantasma:hover { background: var(--fundo); color: var(--texto); } .btn-fantasma[aria-disabled="true"]:hover { background: transparent; color: var(--texto-2); } .btn-sm { height: 30px; padding: 0 10px; font-size: 13px; } .btn-xs { height: 26px; padding: 0 8px; font-size: 12px; } .btn-icone { width: 30px; padding: 0; } .btn-link { background: none; border: 0; color: var(--acento); cursor: pointer; padding: 0; font-weight: 500; } .btn-link:hover { text-decoration: underline; } /* ---------- cards / badges ---------- */ .card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); } .card-corpo { padding: 16px 18px; } .badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--fundo); color: var(--texto-2); } .badge-azul { background: var(--acento-suave); color: var(--acento-forte); } .badge-verde { background: var(--verde-suave); color: var(--verde); } /* proposta 11 (D2): .badge-vermelho é SÓ atraso (o badge de atraso, "com atraso", a data vencida); o grau "Crítica" e os níveis 3–4 do gestor são o âmbar CHEIO (.badge-amarelo-forte) — a matiz da atenção, mais forte que o suave */ .badge-vermelho { background: var(--vermelho-suave); color: var(--vermelho); } .badge-amarelo { background: var(--amarelo-suave); color: var(--amarelo); } .badge-amarelo-forte { background: var(--amarelo); color: var(--sobre-semantica); } .badge-laranja { background: var(--destaque-suave); color: var(--destaque-texto); } .ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* ---------- formulários ---------- */ .campo { display: flex; flex-direction: column; gap: 5px; } .campo label { font-size: 12px; font-weight: 600; color: var(--texto-2); } /* Proposta 12, Parte A (D2): o tipo do pedido em quatro botões grandes com ícone (Material · Ferramenta · Equipamento · EPI), como no formulário da solicitação do Gestor Pro: células iguais de 64px (4 numa linha; 2×2 quando o formulário tem menos de 440px — container query, nunca a largura da tela), o ícone e o nome numa linha (reticências; o nome por extenso no title). O escolhido muda só a cor, a borda e um anel de 1px por sombra — nada muda de tamanho (GUIA §1.4). */ .campo-rotulo-grupo { font-size: 12px; font-weight: 600; color: var(--texto-2); } /* Solicitações › Material: o selo do tipo e o local numa linha (o local com reticências) */ .linha-tipo-pedido { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; } .linha-tipo-pedido .badge { flex: none; } .linha-tipo-pedido > span.mudo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .campo-tipos { container-type: inline-size; } .tipos-botoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } @container (max-width: 440px) { .tipos-botoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tipo-botao { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 64px; min-width: 0; padding: 0 8px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); color: var(--texto); font: inherit; cursor: pointer; transition: border-color .12s, background-color .12s; } .tipo-botao:hover { border-color: var(--acento); } .tipo-botao:focus-visible { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); } .tipo-botao.ativo { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-forte); box-shadow: 0 0 0 1px var(--acento); } .tipo-botao:disabled { cursor: not-allowed; opacity: .7; } .tipo-botao-icone { display: flex; flex: none; } .tipo-botao-nome { max-width: 100%; font-size: 12.5px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .campo input, .campo select, .campo textarea { height: 36px; padding: 0 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); outline: none; } .campo textarea { height: auto; min-height: 80px; padding: 8px 10px; resize: vertical; } .campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); } .campo .dica { font-size: 11px; color: var(--texto-3); } /* Proposta 12, Parte D: campo desabilitado com fundo acinzentado (--fundo-coluna, o texto em --texto-2 — par do teste de contraste) e o cursor de proibido — nunca parecer editável (o prazo travado, o tipo de quem não edita, os selects do item com tarefa, os filtros parados por `?tarefaId=`) */ input:disabled:not([type="checkbox"]):not([type="radio"]), select:disabled, textarea:disabled { background: var(--fundo-coluna); color: var(--texto-2); cursor: not-allowed; } .grade { display: grid; gap: 14px; } .grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grade-auto { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); } .campo-cheio { grid-column: 1 / -1; } .erro-form { color: var(--vermelho); font-size: 13px; background: var(--vermelho-suave); padding: 8px 12px; border-radius: var(--raio-sm); } .aviso-amarelo { background: var(--amarelo-suave); color: var(--amarelo); padding: 8px 12px; border-radius: var(--raio-sm); font-size: 12px; } .check { display: flex; align-items: center; gap: 8px; cursor: pointer; } .check input { width: 16px; height: 16px; accent-color: var(--acento); margin: 0; } /* ---------- tabelas ---------- */ .tabela-wrap { overflow-x: auto; } table.tabela { width: 100%; border-collapse: collapse; } .tabela th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); padding: 10px 14px; border-bottom: 1px solid var(--borda); white-space: nowrap; } .tabela td { padding: 12px 14px; border-bottom: 1px solid var(--borda); vertical-align: middle; } .tabela tr:last-child td { border-bottom: 0; } .tabela tr.vencida td { background: var(--linha-vencida); } /* Proposta 2 §5.2: linha que vence hoje — um tom abaixo de --amarelo-suave, análogo ao da vencida (valores em temas.css). */ .tabela tr.vence-hoje td { background: var(--linha-vence-hoje); } .tabela tr.concluida td { color: var(--texto-3); } /* Configurações do sistema › Centros de custo (proposta 9, Parte H): o código numa peça só (nunca quebra no hífen) e as ações da linha numa linha; a lista rola por dentro, com o cabeçalho fixo (como a matriz de Perfis e permissões) — a seção cabe em 1366×768 com qualquer número de acionamentos (a tabela começa a ~290px; 24px embaixo) */ .lista-centros td:first-child, .lista-centros td:last-child { white-space: nowrap; } .centros-rolagem { overflow: auto; max-height: calc(100vh - 320px); min-height: 240px; scrollbar-gutter: stable; } .centros-rolagem thead th { position: sticky; top: 0; z-index: 1; background: var(--superficie); } /* o código do centro a que a solicitação serve (Solicitações), numa peça só */ .serve-a-codigo { white-space: nowrap; font-variant-numeric: tabular-nums; } .tabela tr.clicavel { cursor: pointer; } .tabela tr.clicavel:hover td { background: var(--fundo); } .filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .filtros select, .filtros input { height: 34px; padding: 0 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); } /* Proposta 5 §0.4-R11 (GUIA §1.4 regras 11 e 12): abas-filtro são barra de abas — uma linha de células IGUAIS, em toda largura; nunca quebram. Regra geral (vale para todo grupo de abas-filtro novo): NUMA MESMA LARGURA DE VIEWPORT, TODA BARRA (telas, sino, Aparência) TEM CÉLULAS DA MESMA LARGURA — a célula depende só da viewport, nunca de quantas abas a barra tem nem de onde ela está. Aqui, 104px (Abertas/Concluídas/Todas, Aberta/Concluída/Todas, Pendentes/Todas, os períodos da Agenda, Não lidas/Todas e Claro/Escuro/Automático cabem; o mais longo, "Automático", pede 101 — medido); até 600px, a largura do bloco de 600px do fim do arquivo. O `minmax(0, …)` e o `max-width: 100%` são só a rede de segurança (a página nunca passa da tela): o texto encolhe (reticências; o rótulo completo fica no `title` do botão), nunca a página. Botão com `padding: 5px 4px` (4px de respiro lateral: rótulos de até ~94px, como "Configuração" do gestor automático, inteiros na célula de 104px — GUIA §7). */ .tabs-filtro { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 104px); max-width: 100%; height: 34px; flex: none; background: var(--fundo); border-radius: var(--raio-sm); padding: 3px; gap: 2px; } .tabs-filtro button { border: 0; background: none; padding: 5px 4px; border-radius: 6px; cursor: pointer; color: var(--texto-2); font-weight: 500; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; } .tabs-filtro button.ativo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); } .tabs-filtro button:disabled { cursor: not-allowed; opacity: .6; } /* `?tarefaId=`/`?decisaoId=`: no lugar, sem uso (R12) */ /* ---------- kanban ---------- */ /* proposta 12, Parte E (D23): as 5 colunas cabem a 1366px — a área útil do quadro ali é 1063px (1366 − 17 da barra − 240 do menu − 48 de margem − 1 de arredondamento): 5 × 196 + 4 × 10 = 1020px; cada coluna fica com ~205px e o cartão com ~165px úteis, onde o "Concluir Demanda" (≈ 143px com o respiro) cabe inteiro. Abaixo disso, o quadro rola por dentro, como antes. */ .kanban { display: grid; grid-template-columns: repeat(5, minmax(196px, 1fr)); gap: 10px; align-items: start; overflow-x: auto; padding-bottom: 8px; } .coluna-kanban { background: var(--fundo-quadro); box-shadow: var(--sombra-quadro); border-radius: var(--raio); padding: 10px 8px; min-height: 200px; display: flex; flex-direction: column; gap: 10px; } .coluna-kanban.sobre { outline: 2px dashed var(--acento); outline-offset: -2px; background: var(--acento-suave); } /* GUIA §1.4 regra 15 — o cabeçalho da coluna tem a mesma altura nas cinco colunas e com qualquer número: numa linha só, 24px. Antes, a 1366px (colunas de 216px), "PLANEJAMENTO DA OBRA" + o total quebrava em duas linhas (40,8px, as outras 23,9): os cartões dessa coluna começavam 17px abaixo dos outros, e um total que passasse de 9 fazia "RECEPÇÃO DA DEMANDA" quebrar também. Com 2px de respiro lateral e o total em pill de 5px, os cinco nomes cabem inteiros a 216px com total de até dois dígitos (medido); se um dia não couber, reticências (o nome completo no `title`). */ /* proposta 12, Parte E: o nome mais longo ("Planejamento da Obra", 164px a 12px/700 com .03em) inteiro na coluna de 205px de 1366 — o respiro lateral do cabeçalho saiu e a coluna tem 8px de respiro dos lados (eram 2 + 10) */ .coluna-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 24px; padding: 3px 0 1px; min-width: 0; } .coluna-titulo { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--texto-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .coluna-total { flex: none; min-width: 20px; text-align: center; font-size: 11px; background: var(--realce-quadro); color: var(--texto-2); border-radius: 999px; padding: 1px 5px; font-weight: 600; font-variant-numeric: tabular-nums; } .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 12px; box-shadow: var(--sombra); cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .12s, transform .12s; } .cartao:hover { box-shadow: var(--sombra-md); } .cartao[draggable="true"] { cursor: grab; } .cartao.arrastando { opacity: .5; transform: rotate(1deg); } .cartao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .cartao-obra { font-weight: 600; font-size: 13px; line-height: 1.3; } /* o ⋯ do cartão (proposta 11, Parte 2: "Abrir a demanda" · "Avançar para {fase}"): no canto de cima, por cima do respiro do cartão (fora do fluxo — não muda a altura de nada); a linha do título cede só 16px a ele, e o nome da obra continua quebrando entre palavras na coluna de 196px de 1366px; o ⋯ nunca cobre a criticidade */ .cartao { position: relative; } .cartao.tem-mais .cartao-topo { padding-right: 16px; } .cartao > .btn-mais-acoes { position: absolute; top: 9px; right: 2px; width: 24px; height: 24px; color: var(--texto-2); } /* Proposta 9, Parte C: o código da demanda (`codigoDemanda` de ui.js) — antes da obra, numa peça só (nunca quebra), números tabulares e o acento forte (par acento-forte × superficie/fundo do teste de contraste). */ .codigo-demanda { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--acento-forte); } .negrito > .codigo-demanda, .modal-titulo .codigo-demanda { margin-right: 8px; } /* A primeira linha da meta do cartão (código · tipo · nº do cliente) quebra no cartão estreito, em vez de sair dele. */ .cartao-ids { flex-wrap: wrap; row-gap: 4px; min-width: 0; } .cartao-ids > .truncar { min-width: 0; max-width: 100%; } .modal-titulo .codigo-demanda { font-size: 14px; } .cartao-meta { font-size: 12px; color: var(--texto-2); display: flex; flex-direction: column; gap: 3px; } .cartao-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--texto-3); } .cartao-prazo.atrasado { color: var(--vermelho); font-weight: 600; } .cartao-prazo.proximo { color: var(--amarelo); font-weight: 600; } .barra-progresso { height: 4px; background: var(--fundo); border-radius: 2px; overflow: hidden; } .barra-progresso > div { height: 100%; background: var(--acento); border-radius: 2px; } .cartao .btn-verde { width: 100%; height: 30px; font-size: 13px; } /* Proposta 13, Parte B — o Painel em LISTA no celular (a avaliação G: "uma coluna e meia, com rolagem lateral"). Até 600px o `.kanban` vira `.kanban-lista` (o front escolhe por matchMedia e refaz ao cruzar a faixa): as 5 fases empilhadas, cada uma um grupo recolhível — o cabeçalho é um BOTÃO de 56px fixos (o nome por extenso numa linha de 20px, o contador na de 16px, o chevron à direita; aberto, recolhido ou com qualquer número, a altura é a mesma: nada dança) e o corpo guarda os cartões de largura inteira, sem arrastar. Sem rolagem lateral: nada tem largura fixa (min-width: 0 em tudo que cede). O vermelho é só do atraso (o contador "atrasadas" e o badge do cartão, pelo número do servidor). */ .kanban.kanban-lista { display: flex; flex-direction: column; align-items: stretch; gap: 10px; overflow: visible; padding-bottom: 0; } .kanban-lista .coluna-kanban { padding: 0; min-height: 0; gap: 0; min-width: 0; } .kanban-lista .coluna-alternar { display: grid; grid-template-columns: minmax(0, 1fr) 18px; grid-template-rows: 20px 16px; column-gap: 8px; align-content: center; width: 100%; height: 56px; padding: 0 12px; border: 0; border-radius: var(--raio); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .kanban-lista .coluna-alternar:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; } .kanban-lista .coluna-alternar .coluna-titulo { grid-column: 1; grid-row: 1; line-height: 20px; } .fase-contador { grid-column: 1; grid-row: 2; min-width: 0; font-size: 12px; line-height: 16px; color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .coluna-chevron { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; color: var(--texto-2); transition: transform .12s; } .kanban-lista .recolhida .coluna-chevron { transform: rotate(-90deg); } .coluna-corpo { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 8px; min-width: 0; } .kanban-lista .recolhida .coluna-corpo { display: none; } .coluna-corpo > .vazio { padding: 12px 8px; } /* o cartão da lista: largura inteira; o ⋯ e o "Concluir Demanda" com alvo de toque */ .cartao-lista { min-width: 0; } .cartao-lista.tem-mais .cartao-topo { padding-right: 36px; } .cartao-lista > .btn-mais-acoes { top: 6px; right: 4px; width: 32px; height: 32px; } .cartao-lista .btn-verde { height: 40px; } .cartao-lista .cartao-rodape { flex-wrap: wrap; row-gap: 6px; } .cartao-lista .cartao-rodape > .linha { min-width: 0; max-width: 100%; flex: 0 1 auto; } .cartao-resp { min-width: 0; max-width: 140px; font-size: 12px; color: var(--texto-2); } .cartao-proxima { display: flex; align-items: flex-start; gap: 6px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--texto-2); } .cartao-proxima-icone { flex: none; display: inline-flex; height: 16px; align-items: center; color: var(--texto-3); } .cartao-proxima.sem-proxima .cartao-proxima-icone { color: var(--amarelo); } .cartao-proxima-texto { flex: 1 1 0; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .cartao-proxima-prefixo { font-weight: 600; } /* o atraso da própria próxima ação: o badge compacto ("12d", "Hoje"), que não encolhe; o texto longo continua para o leitor de tela */ .cartao-proxima > .badge { flex: none; } .cartao-proxima .badge-texto-longo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .cartao-proxima .badge-texto-curto { display: inline; } /* ---------- modal ---------- */ /* Proposta 5 §0.2 — ancorado no topo (cresce só para baixo); o modal com abas ou passos tem altura fixa */ .modal-fundo { position: fixed; inset: 0; background: var(--sobreposicao); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: var(--modal-topo) 24px 24px; animation: aparecer .12s ease-out; } @keyframes aparecer { from { opacity: 0 } to { opacity: 1 } } .modal { background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-md); width: 100%; max-width: 920px; max-height: calc(100vh - var(--modal-topo) - 24px); max-height: calc(100dvh - var(--modal-topo) - 24px); display: flex; flex-direction: column; overflow: hidden; animation: subir .15s ease-out; } @keyframes subir { from { transform: translateY(8px); opacity: .6 } to { transform: none; opacity: 1 } } /* modal de tamanho fixo: com abas (automático em abrirModal) ou `fixo: true` (Nova Demanda) */ .modal-fixo { height: min(var(--modal-fixo-h), calc(100vh - var(--modal-topo) - 24px)); height: min(var(--modal-fixo-h), calc(100dvh - var(--modal-topo) - 24px)); } .modal-sm { max-width: 520px; } .modal-md { max-width: 700px; } .modal-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px 0; } .modal-titulo { font-size: 18px; font-weight: 600; } .modal-sub { color: var(--texto-2); font-size: 13px; margin-top: 2px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* GUIA §1.4 regra 14 — TUDO ACIMA DAS ABAS TEM ALTURA FIXA: no modal fixo com subtítulo, o cabeçalho é uma grade de 68px (18px de padding + título 26px + 2px + subtítulo 22px) e a linha do subtítulo ocupa a LARGURA INTEIRA, embaixo do título e das ações (`.cresce` com `display: contents`). Uma fileira visível só, na ordem de importância do subtítulo (fase ou "Concluída em …" primeiro — `modalDemanda.js`): cada item sai inteiro ou não sai (nunca corte seco), tipo e número encolhem com reticências antes, e o texto completo fica no `title`. Assim o cabeçalho tem a mesma altura em toda demanda, depois de cada Salvar e do passo 1 (subtítulo vazio) ao passo 2 (categoria + "‹ trocar") do Nova Demanda: as abas não dançam. Modal fixo SEM subtítulo (ex.: "Pré-visualizar" do gestor) fica com o cabeçalho só do título — sem linha vazia. */ .modal-fixo .modal-cabecalho:has(.modal-sub) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 26px 22px; row-gap: 2px; height: 68px; } .modal-fixo .modal-cabecalho:has(.modal-sub) > .cresce { display: contents; } .modal-fixo .modal-cabecalho:has(.modal-sub) .modal-titulo { grid-column: 1; grid-row: 1; min-width: 0; } /* as ações centradas na linha do título: os botões de 30–36px transbordam 2–5px para cima (padding) e para baixo (o espaço de 2px antes do subtítulo) — nunca sobre o subtítulo */ .modal-fixo .modal-cabecalho:has(.modal-sub) > .modal-acoes { grid-column: 2; grid-row: 1; height: 26px; align-self: center; } .modal-fixo .modal-cabecalho:has(.modal-sub) .modal-sub { grid-column: 1 / -1; grid-row: 2; margin-top: 0; min-width: 0; } .modal-fixo .modal-sub { flex-wrap: nowrap; height: 22px; min-height: 22px; overflow: hidden; } /* A linha tem UMA fileira visível de 22px: o item que não cabe inteiro (e não é dos que encolhem) passa para a fileira seguinte, que fica escondida — sai inteiro, nunca cortado no meio; o texto completo está no `title` */ .modal-fixo .modal-sub > .linha { flex: 0 1 auto; flex-wrap: wrap; align-content: flex-start; height: 22px; padding-top: 1px; min-width: 0; max-width: 100%; overflow: hidden; position: relative; } /* cada item, sozinho mais largo que a linha, encolhe com reticências; o badge vira bloco (não há reticência dentro de um flex container) */ .modal-fixo .modal-sub .linha > * { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modal-fixo .modal-sub .linha > .badge { display: block; line-height: 20px; } /* os menos importantes (tipo e número da demanda, local da reunião) ficam na fileira com o que sobrar: base 7ch presa por max-width: max-content — a largura com que a fileira decide a quebra é o MENOR entre 7ch e o próprio texto (um local curto como "Sala 2" que cabe nunca sai por causa dos 7ch) —, crescem até o tamanho do texto e mostram reticências no meio-termo; min-width: 0 (nunca um mínimo maior que o texto) */ .modal-fixo .modal-sub .linha > .encolhe-primeiro { flex: 1 1 7ch; min-width: 0; max-width: max-content; } /* local da reunião: um "·" desenhado DENTRO do vão de 8px antes dele (sem custar largura — a 375 "Sala de reuniões" usa 102,0 dos 102,2px livres), para "25/09 às 09:00" e o local não se lerem como uma frase só. Absoluto sem deslocamento = posição estática, fora do overflow do local (a .linha é o bloco de contenção e o corta junto com a fileira escondida — `position: relative` na regra da .linha); o "·" não é lido (texto alternativo vazio) */ .modal-fixo .modal-sub .linha > .quando-local::before { content: '·'; content: '·' / ''; position: absolute; width: 8px; margin-left: -8px; text-align: center; color: var(--texto-2); } .modal-acoes { display: flex; gap: 8px; align-items: center; flex: none; } .modal-cabecalho, .modal-abas, .modal-rodape { flex: none; } /* título do modal fixo numa linha só (o completo no `title`): recarregar não muda a altura do cabeçalho */ .modal-fixo .modal-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* título do modal fixo com 26px de linha (a primeira linha da grade do cabeçalho) */ .modal-fixo .modal-titulo { line-height: 26px; height: 26px; } /* as abas numa grade de células iguais (8 abas: 4×2), em TODA largura; a barra nunca rola (proposta 5 §0.3) */ .modal-abas { display: grid; grid-template-columns: repeat(var(--abas-colunas, 4), minmax(0, 1fr)); grid-auto-rows: 1fr; padding: 10px 22px 0; border-bottom: 1px solid var(--borda); } .modal-abas button { border: 0; background: none; padding: 8px 10px 10px; cursor: pointer; color: var(--texto-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; min-width: 0; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; } .modal-abas button:hover { color: var(--texto); } .modal-abas button.ativa { color: var(--acento-forte); border-bottom-color: var(--acento); } /* só cor: a largura não muda */ /* rótulo nunca quebra: se um dia não couber, reticências (a célula não cresce) */ .modal-abas .aba-mini, .modal-abas .aba-rotulo, .modal-abas .aba-curto { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .modal-abas .aba-curto { display: none; } /* proposta 6 §5 m3 — rótulo mínimo (só `Pend/Dec`), mostrado só até 359px (a regra de 359px fica no fim do arquivo) */ .modal-abas .aba-mini { display: none; } /* 36px: o "99+" mede 33,4px em Inter 11px (medido); 0, 12 e 99+ ocupam a mesma largura */ .modal-abas .contador { flex: none; min-width: 36px; padding: 0 6px; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; background: var(--fundo); border-radius: 999px; } /* Barra de seções das Configurações do sistema (26/09/2026; GUIA §1.4 regras 11 e 15 e §3.27): desenhada pelo shell (app.js › barraDeSecoes) acima da tela, a MESMA nas cinco seções (proposta 9, Parte H: Centros de custo) — só a `ativa` muda. É barra de abas: grade numa linha de células IGUAIS que nunca rola nem quebra — cada célula até 192px ("Configurações do sistema" mede 175,1px em Inter 14px/500 + 2 × 8px de respiro, medido) e, sem espaço, todas encolhem juntas (`minmax(0, …)`: a página nunca passa da tela); o rótulo que não coubesse ganharia reticências (completo no `title`). Ativa só por cor e sublinhado, como as abas do modal: a largura não muda. A linha de base é uma sombra interna da barra, sob o sublinhado da ativa. */ .abas-secoes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 192px); justify-content: start; height: 40px; min-width: 0; margin-bottom: 20px; box-shadow: inset 0 -1px 0 var(--borda); } .abas-secoes a { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 8px; color: var(--texto-2); font-weight: 500; white-space: nowrap; text-align: center; border-bottom: 2px solid transparent; text-decoration: none; } .abas-secoes a:hover { color: var(--texto); text-decoration: none; } .abas-secoes a.ativa { color: var(--acento-forte); border-bottom-color: var(--acento); } /* só cor: a largura não muda */ .abas-secoes .aba-rotulo, .abas-secoes .aba-curto { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .abas-secoes .aba-curto { display: none; } /* o corpo rola por dentro; a sarjeta da barra fica reservada; o min-height de 340px saiu (proposta 5 §0.2) */ .modal-corpo { padding: 20px 22px; overflow-y: auto; flex: 1 1 auto; min-height: 0; scrollbar-gutter: stable; } .modal-rodape { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--borda); background: var(--superficie-alt); } .modal-rodape .esquerda { margin-right: auto; } /* rodapé com altura fixa (botão 36 + 2×14 de padding + 1 de borda) */ .modal-fixo .modal-rodape { min-height: 65px; } /* R6 — botão cujo rótulo troca ("Ativar" → "Ativado"; "Adicionar 1 item" → "Adicionar 12 itens"): largura do rótulo mais longo; dígitos tabulares. `.largo` cabe "Adicionar 99 itens" (18 caracteres + padding de 28px) */ .btn-estavel { min-width: 12ch; font-variant-numeric: tabular-nums; } .btn-estavel.largo { min-width: 20ch; } /* ---------- cartões de categoria — "O que você quer abrir?" (GUIA §3.16, proposta 2 §6b.6) ---------- */ .categorias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .cartao-categoria { display: block; width: 100%; text-align: left; cursor: pointer; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 16px; color: var(--texto); font: inherit; transition: box-shadow .12s, border-color .12s; } .cartao-categoria:hover { box-shadow: var(--sombra-md); border-color: var(--acento); } .cartao-categoria:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acento-suave); border-color: var(--acento); } .cartao-categoria-titulo { font-size: 14px; font-weight: 600; } .cartao-categoria-apoio { font-size: 12px; color: var(--texto-2); margin-top: 4px; } /* Proposta 12, Parte A (D3): a porta do passo 1 da Nova Demanda — o ícone grande (36px, o mesmo quadrado da janela do topo) e os textos ao lado; o nome curto e o apoio como antes. */ .cartao-porta { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: 12px; } .cartao-porta-textos { display: flex; flex-direction: column; min-width: 0; } .cartao-porta .cartao-categoria-titulo, .cartao-porta .cartao-categoria-apoio { display: block; } /* ---------- listas internas (tarefas, compras, etc.) ---------- */ .lista-itens { display: flex; flex-direction: column; gap: 6px; } .item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); } .item.feito .item-texto { text-decoration: line-through; color: var(--texto-3); } /* checklist padrão (proposta 2 §6.5): item ainda não disparado — texto em --texto-2; controles inline compactos */ .item.a-disparar .item-texto { color: var(--texto-2); } .item.a-disparar select, .item.a-disparar input[type="date"] { height: 30px; padding: 0 8px; border: 1px solid var(--borda); border-radius: var(--raio-sm); font-size: 12px; background: var(--superficie); max-width: 240px; } /* v2 §10.3 — a linha do item a disparar também quebra ACIMA de 960px: check + "a disparar" + select + data + "prazo no disparo" + ✎★× somam ~630px e, em `nowrap`, sobrava ~110px para o texto (cinco linhas no modal de 920px). O texto nunca cai abaixo de 260px e o select de responsável cede primeiro. */ .item.a-disparar { flex-wrap: wrap; } .item.a-disparar .item-texto { flex: 1 1 260px; } .item.a-disparar select { max-width: 170px; } /* barra de seleção em lote — fixa acima da lista enquanto o corpo do modal rola */ .checklist-lote { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: var(--fundo); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; } /* contador da seleção com largura reservada: cabe "99 selecionados" (proposta 5 §0.2) */ .checklist-lote .contador-lote { min-width: 15ch; font-variant-numeric: tabular-nums; } /* proposta 11, Parte 5: o botão principal ("Criar tarefas dos selecionados") nunca passa da barra — na tela estreita (320px) o rótulo quebra em duas linhas dentro dele, em vez de estourar a borda */ .checklist-lote .btn-criar-tarefas { max-width: 100%; min-width: 0; height: auto; min-height: 30px; white-space: normal; text-align: left; } .checklist-lote select, .checklist-lote input[type="date"] { height: 30px; padding: 0 8px; border: 1px solid var(--borda); border-radius: var(--raio-sm); font-size: 12px; background: var(--superficie); max-width: 100%; min-width: 0; } /* itens do modelo (Central › Configuração › Checklists padrão): texto e dica editáveis inline */ .checklist-modelo-itens .item input[type="text"], .checklist-modelo-itens .item input:not([type]) { flex: 1; min-width: 120px; height: 30px; padding: 0 8px; border: 1px solid var(--borda); border-radius: var(--raio-sm); font-size: 13px; } .checklist-modelo-itens .item .btn-xs { flex: none; } /* modal "Aplicar checklist padrão": o summary é flex com marcador próprio (▸/▾) — com o marcador nativo (list-item, position inside) um resumo maior que a linha caía inteiro para baixo e o ▸ ficava sozinho na primeira linha */ details.card > summary { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; list-style: none; } details.card > summary::-webkit-details-marker { display: none; } details.card > summary::before { content: '▸'; flex: none; color: var(--texto-3); } details.card[open] > summary::before { content: '▾'; } .checklist-modelo-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; } .adicionar-item .check { flex: none; white-space: nowrap; } /* min-width: 0 — senão `.adicionar-item input { min-width: 140px }` (≤ 960px) estica o checkbox "obrigatório" */ .adicionar-item .check input { width: 16px; min-width: 0; height: 16px; flex: none; padding: 0; border: 0; } .item-texto { flex: 1; min-width: 0; } .item-meta { font-size: 12px; color: var(--texto-3); white-space: nowrap; flex: none; } /* Linhas das listas do modal da demanda (Tarefas, Pendências e Decisões — `.lista-quebra`): muitos filhos inquebráveis (responsável, badges de atraso e status, link Tarefa, botões de prazo, andamento, editar) — em `nowrap` o texto encolhia até quase zero e o resto transbordava (o corpo do modal rolava de lado a 375 e a 700 px; GUIA §1.4 regra 12). A linha quebra: o texto nunca cai abaixo da base e o que não cabe desce para a linha de baixo, nada se sobrepõe nem é cortado; nenhum filho passa da largura da linha (o meta longo ganha reticências, com o completo no title). */ .lista-quebra > .item { flex-wrap: wrap; row-gap: 6px; } /* Proposta 11, Parte 2: a tarefa aberta pelo cartão da Minha Página, marcada na aba Tarefas (como o pedido da URL no bloco Prazos); a cabeça da aba com "Ver na Central de Tarefas" e "+ Nova tarefa", que descem juntos à direita quando a linha não cabe e quebram entre si a 320px (nunca estouram a largura do modal — medido: 228/228 a 320px). */ .item.item-destacado { background: var(--acento-suave); border-color: var(--acento); } .cabeca-tarefas { flex-wrap: wrap; row-gap: 6px; } .cabeca-tarefas-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; margin-left: auto; min-width: 0; } .lista-quebra > .item > .item-texto { flex: 1 1 260px; overflow-wrap: anywhere; } .lista-quebra > .item > * { max-width: 100%; } .lista-quebra > .item > .item-meta { overflow: hidden; text-overflow: ellipsis; } /* Os botões da linha (`.item-botoes`) descem JUNTOS, à direita — antes, a 375 px, o × de remover caía sozinho numa terceira linha do cartão da tarefa. Na tarefa, o fim da linha (`.item-fim`) é o responsável + os botões: sem lugar para os dois, o nome fica numa linha (reticências se não couber) e os botões na de baixo. A cauda (`.item-cauda`: andamento, editar, remover — na pendência, andamento, Concluir, editar) nunca se separa: na linha mais estreita (320 px), só o botão do prazo desce sozinho, à direita. */ .lista-quebra > .item > .item-fim { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; flex: 0 1 auto; min-width: 0; margin-left: auto; } .lista-quebra .item-fim > .item-meta { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .lista-quebra .item-botoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; flex: 0 1 auto; min-width: 0; max-width: 100%; margin-left: auto; } .lista-quebra .item-botoes > * { flex: none; } .lista-quebra .item-botoes:empty, .lista-quebra .item-cauda:empty { display: none; } .lista-quebra .item-cauda { display: flex; align-items: center; gap: 4px; } .item .btn-icone { opacity: 0; } .item:hover .btn-icone { opacity: 1; } /* Proposta 12, Parte D: o ⋯ das linhas de tarefa, pendência e decisão da janela da demanda fica SEMPRE visível (as ações moram nele — nunca só ao passar o mouse) e tem o alvo dos botões da linha (28px); numa tela sem mouse (`hover: none`), todo ícone de linha fica à vista — o toque nunca acerta um botão invisível (a regra `hover: none` fica no fim do arquivo) */ .item .btn-mais-acoes { opacity: 1; width: 28px; height: 28px; } .adicionar-item { display: flex; gap: 8px; margin-top: 10px; } .adicionar-item input, .adicionar-item select { height: 34px; padding: 0 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm); } .adicionar-item input { flex: 1; } /* o select nunca passa da linha: "Herdar responsável da demanda" (257 px) estourava o corpo do modal a 320 px */ .adicionar-item select { min-width: 0; max-width: 100%; } .secao-titulo { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 10px; } /* O bloco Prazos da Visão Geral (proposta 9 §8.2, Parte D, C9 (B)): o prazo principal numa linha, as datas importantes e os pedidos de prazo da demanda — os abertos em cartões com os botões de decidir, os decididos recolhidos (`details`), a frase de quem não é parte com o caminho do Histórico. O pedido que veio na URL (`pedidoId`) fica marcado com o fundo --acento-suave (o texto --texto sobre ele já está no teste de contraste). Só tokens. */ .prazo-principal-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; margin-bottom: 14px; } .prazo-principal-rotulo { color: var(--texto-2); } .subtitulo-prazos { margin: 14px 0 8px; font-size: 13px; font-weight: 600; color: var(--texto-2); } /* As datas importantes (proposta 9, Parte F): o checkbox "Cumprida" no lugar do ícone (16px, nunca encolhe), o título, o tipo, o badge "Crítica" e a data — a linha quebra (o título com base de 180px; o que não cabe desce inteiro, nunca cortado), e marcar como cumprida só troca o texto da data no lugar e risca o título (`.feito`). O "Nova data importante" fica numa linha própria, sempre no mesmo lugar. O formulário: tipo e data lado a lado, empilhados até 600px. Só tokens. */ .marco-item { flex-wrap: wrap; row-gap: 6px; } .marco-item .item-texto { flex-basis: 180px; overflow-wrap: anywhere; } .marco-item .marco-check { flex: none; display: inline-flex; align-items: center; } .marco-item .marco-check input { width: 16px; height: 16px; margin: 0; } .marco-item > .badge { flex: none; } .marcos-acoes { display: flex; margin-top: 8px; } .form-marco-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .form-marco .param-numero { width: 96px; } .lista-pedidos { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .pedido-demanda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; padding: 8px 10px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-sm); } .pedido-demanda.pedido-destacado { background: var(--acento-suave); border-color: var(--acento); } .pedido-demanda-corpo { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; } .pedido-demanda-item { display: flex; align-items: center; gap: 6px; min-width: 0; } .pedido-demanda-texto, .pedido-demanda-quem, .pedido-demanda-motivo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pedido-demanda-texto { font-weight: 600; } .pedido-demanda-quem { font-size: 12px; color: var(--texto-2); } .pedido-demanda-motivo { font-size: 12px; color: var(--texto-3); } .pedido-demanda .acoes-pedido { flex: none; max-width: 100%; } .pedidos-decididos { margin-top: 8px; } .pedidos-decididos > summary { cursor: pointer; font-size: 13px; color: var(--texto-2); padding: 4px 0; } .pedidos-decididos > .lista-pedidos { margin-top: 6px; } .pedidos-ocultos { margin-top: 8px; } /* Checklist padrão — um card por checklist (proposta checklists v2 §10) */ .card-checklist { padding: 14px 16px; } .card-checklist + .card-checklist { margin-top: 12px; } .card-checklist-cabecalho { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .card-checklist-cabecalho .titulo { font-size: 14px; font-weight: 600; color: var(--texto); } .card-checklist-cabecalho .cresce { flex: 1; min-width: 0; } .card-checklist-progresso { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .card-checklist-progresso .barra-progresso { flex: 1; } .card-checklist-progresso .rotulo { font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; } /* v2 §10.6 (supervisão c2) — a base do texto vale para TODA linha do card, não só a `.a-disparar`: a linha do item já disparado também quebra (`flexWrap` inline em modalDemanda.js) e, com o `.item-texto { flex: 1 }` genérico (base 0%), a caixa data+badge (180px) e o responsável tomavam a faixa e o link sobrava com ~11px em telefone — uma palavra por linha, por cima da data. Com base 260px o texto pega a faixa inteira. */ .card-checklist .lista-itens > .item .item-texto { flex: 1 1 260px; } .item.escolher-responsavel { border-left: 3px solid var(--amarelo); background: var(--amarelo-suave); } /* A mecânica de esconder/mostrar no hover é a que JÁ EXISTE nas linhas 297-298 do app.css (`.item .btn-icone { opacity: 0 }` / `.item:hover .btn-icone { opacity: 1 }`) e continua valendo para TODOS os itens. `.item-acoes` é só o agrupador: NÃO tem opacidade própria. */ .item .item-acoes { display: flex; gap: 2px; flex: none; } .item:focus-within .btn-icone { opacity: 1; } .item .item-acoes .btn[disabled] { opacity: .35; } .adicionar-item-checklist { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--borda); } .historico { display: flex; flex-direction: column; gap: 10px; } /* Proposta 12, Parte D — o registro do Histórico em texto normal (nunca itálico cinza): a cabeça com o NOME DA PESSOA primeiro (negrito), o automático com a engrenagem e "Sistema", e a data; o texto embaixo, na largura inteira (quebra a palavra longa — "Cobrar/destravar" estourava o corpo do modal a 320 px), e o Remover do manual à direita. O automático se distingue pelo fundo --fundo e pelo selo, não pela letra. */ .registro { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: var(--raio-sm); border: 1px solid var(--borda); } .registro.sistema { background: var(--fundo); } .registro-corpo { flex: 1 1 auto; min-width: 0; } .registro-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-bottom: 2px; font-size: 12px; } .registro-autor { font-weight: 600; color: var(--texto); } .registro-sistema { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-2); } .registro-sistema > span { display: inline-flex; } .registro-data { font-size: 12px; color: var(--texto-3); white-space: nowrap; } .registro-texto { color: var(--texto); overflow-wrap: anywhere; } /* ---------- KPIs ---------- */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; } .kpi { padding: 16px 18px; } /* proposta 12, Parte E (D24): o cartão que abre uma lista se mostra como link — o cursor, a borda --acento ao passar o mouse (só a cor: nada muda de tamanho), o anel de foco do teclado e a seta "abrir" no canto (fora do fluxo) */ .kpi-link { position: relative; display: block; color: inherit; text-decoration: none; cursor: pointer; padding-right: 34px; } .kpi-link:hover { border-color: var(--acento); text-decoration: none; } .kpi-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acento-suave); border-color: var(--acento); } .kpi-ir { position: absolute; top: 14px; right: 14px; display: inline-flex; color: var(--texto-3); } .kpi-link:hover .kpi-ir, .kpi-link:focus-visible .kpi-ir { color: var(--acento-forte); } .kpi-rotulo { font-size: 12px; color: var(--texto-2); font-weight: 500; } .kpi-valor { font-size: 28px; font-weight: 700; margin-top: 4px; letter-spacing: -.02em; } .kpi-valor.vermelho { color: var(--vermelho); } .kpi-valor.amarelo { color: var(--amarelo); } .kpi-valor.verde { color: var(--verde); } .graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; } .grafico { padding: 16px 18px; } .grafico h3 { margin-bottom: 14px; } .barras { display: flex; flex-direction: column; gap: 10px; } .barra-linha { display: grid; grid-template-columns: 150px 1fr 32px; align-items: center; gap: 10px; font-size: 13px; } .barra-linha .trilho { height: 10px; background: var(--fundo); border-radius: 5px; overflow: hidden; } .barra-linha .trilho > div { height: 100%; border-radius: 5px; background: var(--acento); } .barra-linha .valor { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } /* ---------- fluxo de decisão técnica ---------- */ .fluxo { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .fluxo-etapa { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--fundo); color: var(--texto-3); white-space: nowrap; } .fluxo-etapa.feita { background: var(--verde-suave); color: var(--verde); } .fluxo-etapa.atual { background: var(--acento-suave); color: var(--acento-forte); font-weight: 600; } .fluxo-seta { color: var(--texto-3); font-size: 11px; } /* ---------- Central de Tarefas / helpers das tarefas ---------- */ a.badge, button.badge { text-decoration: none; } a.badge:hover { text-decoration: none; filter: brightness(.95); } button.badge { border: 0; font-family: inherit; } .badge.clicavel { cursor: pointer; } a.btn:hover { text-decoration: none; } .chip-filtro { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border: 1px dashed var(--borda); border-radius: var(--raio-sm); background: var(--superficie); font-size: 13px; font-weight: 500; } .chip-filtro .btn-link { font-size: 12px; font-weight: 500; } .tabela-compacta td { padding: 8px 10px; } .tabela-compacta tr:first-child td { border-top: 0; } details.recolhido > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--texto-2); } details.recolhido > summary:hover { color: var(--texto); } .conteudo-cabecalho p { max-width: 720px; } /* ---------- toast / confirmação ---------- */ .toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 200; } .toast { background: var(--toast); color: var(--sobre-toast); padding: 10px 14px; border-radius: var(--raio-sm); box-shadow: var(--sombra-md); font-size: 13px; animation: subir .15s ease-out; max-width: 380px; } .toast.erro { background: var(--vermelho); color: var(--sobre-semantica); } .toast.sucesso { background: var(--verde); color: var(--sobre-semantica); } /* ---------- responsivo ---------- */ .btn-menu { display: none; flex: none; } @media (max-width: 960px) { .app { grid-template-columns: 1fr; } .sidebar { position: fixed; z-index: 50; transform: translateX(-100%); transition: transform .15s; width: var(--sidebar-w); } .sidebar.aberta { transform: none; box-shadow: var(--sombra-md); } .sidebar .recolher-menu { display: none; } /* proposta 9: a gaveta do ☰ não recolhe */ .btn-menu { display: inline-flex; } .topbar { padding: 0 16px; } .conteudo { padding: 16px; } /* `minmax(0, 1fr)`, nunca `1fr`: `1fr` é `minmax(auto, 1fr)` e a coluna cresce até o min-content do campo mais largo — o select de categoria ("Material · Ferramenta · Equipamento · EPI") esticava a coluna para 315px numa área útil de 283 no modal `md` a 375px, e o `overflow: hidden` do `.modal` comia 10px de seta e borda direita dos campos. É o mesmo valor que as três regras já usam fora deste `@media`. */ .grade-2, .grade-3, .grade-4 { grid-template-columns: minmax(0, 1fr); } .categorias { grid-template-columns: 1fr; } .kanban { grid-template-columns: repeat(5, 260px); } .barra-linha { grid-template-columns: 110px 1fr 32px; } .adicionar-item { flex-wrap: wrap; } .adicionar-item input { min-width: 140px; } /* aba Checklist (item a disparar) e itens do modelo: os controles quebram para a linha de baixo; o texto não colapsa */ .item.a-disparar, .checklist-modelo-itens .item { flex-wrap: wrap; } .item.a-disparar .item-texto { flex: 1 1 200px; } .lista-quebra > .item > .item-texto { flex-basis: 140px; } .checklist-lote select { flex: 1 1 140px; } .checklist-modelo-itens .item input[type="text"], .checklist-modelo-itens .item input:not([type]) { flex: 1 1 140px; } /* Cards do checklist padrão (v2 §10.6) */ .card-checklist .lista-itens > .item .item-texto { flex: 1 1 200px; } .card-checklist-cabecalho { align-items: flex-start; } .adicionar-item-checklist { flex-wrap: wrap; } .item .btn-icone { opacity: 1; } /* sem hover no toque — desfaz a regra da linha 297 */ /* A barra de filtros é item flex do cabeçalho: sem min-width:0 ela cresce até a largura intrínseca do select "Obra" (opções longas) e estoura a tela em 360px. */ .conteudo-cabecalho > .filtros { min-width: 0; max-width: 100%; } .filtros select { max-width: 100%; flex: 1 1 140px; min-width: 0; } /* proposta 12, Parte E: no Painel, os dois selects (responsável e prazo) lado a lado até 320px (2 × 120 + 10 ≤ 288) */ .filtros-painel > select { flex-basis: 120px; } .grade-auto { grid-template-columns: 1fr; } } /* Proposta 9 (item 2a) — o MENU RECOLHIDO (``, menuLateral.js; só acima de 960px — até lá o menu é a gaveta do ☰ e a seta some): 76px, como no Gestor Pro. Só os ícones: o rótulo sai da vista mas fica para o leitor de tela (recorte, não `display: none`) e o nome vai no `title` do item; o contador continua no canto do ícone. Os grupos (VOCÊ, OPERAÇÃO) guardam a altura como um filete, e a marca os mesmos 64px (só as iniciais, com a seta embaixo) — nenhum item muda de altura nem de lugar na vertical. No rodapé, avatar, engrenagem e Sair em coluna, e a versão só com o número (`.versao-curta`, `aria-hidden`; o texto longo recortado da vista, para o leitor de tela). */ @media (min-width: 961px) { :root[data-menu="recolhido"] { --sidebar-w: 76px; } :root[data-menu="recolhido"] .sidebar { padding-left: 10px; padding-right: 10px; } :root[data-menu="recolhido"] .sidebar .marca { flex-direction: column; justify-content: center; gap: 4px; padding: 0; } :root[data-menu="recolhido"] .sidebar .marca-textos, :root[data-menu="recolhido"] .sidebar .marca-imagem { display: none; } :root[data-menu="recolhido"] .sidebar .marca.com-imagem .marca-logo { display: grid; } :root[data-menu="recolhido"] .sidebar .recolher-menu { margin-left: 0; width: 24px; height: 24px; } :root[data-menu="recolhido"] .sidebar .recolher-menu svg { transform: rotate(180deg); } :root[data-menu="recolhido"] .nav-grupo { position: relative; overflow: hidden; white-space: nowrap; color: transparent; } :root[data-menu="recolhido"] .nav-grupo::after { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; border-top: 1px solid var(--menu-linha); } :root[data-menu="recolhido"] .nav-item { justify-content: center; padding: 8px 0; } :root[data-menu="recolhido"] .nav-item > .cresce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } :root[data-menu="recolhido"] .nav-item .contador { left: calc(50% + 15px); } :root[data-menu="recolhido"] .usuario-chip { flex-direction: column; gap: 6px; padding: 6px 0; } :root[data-menu="recolhido"] .usuario-chip > .cresce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } :root[data-menu="recolhido"] .sidebar .versao-sistema { position: relative; padding: 0; text-align: center; font-size: 10px; } :root[data-menu="recolhido"] .sidebar .versao-longa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } :root[data-menu="recolhido"] .sidebar .versao-curta { display: inline; } } /* ---------- tela de entrada (proposta 9, item 3 — o desenho do Gestor Pro; GUIA §4) ---------- A foto à esquerda (a "Imagem da tela de entrada" da empresa, `style.backgroundImage` por js/entrada.js; sem ela, o degradê da paleta: --entrada-fundo → --entrada-veu) com a legenda sobre um VÉU que existe para o texto: transparente no alto e 84% do --entrada-veu a partir de 65% da altura (o contraste da legenda sobre uma foto branca, no pior caso, é teste). O cartão à direita, de 440px: o logotipo (a versão para o fundo do cartão) ou a marca com as iniciais numa faixa de 76px FIXOS, "Bem-vindo ao {produto}!" numa linha, os campos de sempre, a linha de erro reservada, Entrar, "Esqueceu a senha?" (aviso flutuante) e o rodapé. Até 880px a foto sai e o cartão ocupa a tela. Nada muda de altura quando a aparência chega: só textos no lugar e a imagem na faixa reservada. */ .entrada { min-height: 100vh; display: flex; background: var(--superficie); } .entrada-foto { position: relative; flex: 1.15 1 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background-color: var(--entrada-veu); background-image: linear-gradient(160deg, var(--entrada-fundo) 0%, var(--entrada-veu) 100%); background-size: cover; background-position: center; background-repeat: no-repeat; } .entrada-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--entrada-veu) 84%, transparent) 65%, color-mix(in srgb, var(--entrada-veu) 84%, transparent) 100%); } .entrada-legenda { position: relative; z-index: 1; max-width: 640px; padding: 40px 44px; color: var(--sobre-entrada); } .entrada-legenda h2 { margin: 0 0 10px; font-size: 27px; line-height: 1.25; font-weight: 700; color: var(--sobre-entrada); } .entrada-legenda p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--sobre-entrada-2); } .entrada-legenda small { display: block; min-height: 18px; font-size: 12px; letter-spacing: .04em; color: var(--sobre-entrada-2); } .entrada-cartao { position: relative; z-index: 1; flex: 0 0 auto; width: min(440px, 100%); display: flex; flex-direction: column; justify-content: center; padding: 44px; background: var(--superficie); box-shadow: var(--sombra-md); } .login-card { width: 100%; } .entrada-logo { display: flex; align-items: center; height: 76px; margin-bottom: 22px; min-width: 0; } .entrada-logotipo { display: block; max-width: 230px; max-height: 76px; object-fit: contain; object-position: left center; } .entrada-logotipo[hidden], .entrada-logo.com-imagem .marca { display: none; } .login-card .marca { padding: 0; min-width: 0; } .entrada-titulo { margin: 0 0 4px; height: 28px; font-size: 21px; line-height: 28px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entrada-sub { margin: 0 0 20px; font-size: 13px; color: var(--texto-3); } .senha-com-olho { position: relative; } .senha-com-olho input { width: 100%; padding-right: 40px; } .olho-senha { position: absolute; top: 3px; right: 3px; height: 30px; } .olho-senha .olho-fechado, .olho-senha[aria-pressed="true"] .olho-aberto { display: none; } .olho-senha[aria-pressed="true"] .olho-fechado { display: block; } .entrada-esqueci { align-self: flex-start; font-size: 12.5px; } /* Proposta 12, Parte E (D27 — a avaliação: "um vão grande entre a senha e Entrar"): na tela de entrada a linha de erro continua RESERVADA (a senha errada não move o Entrar — GUIA §1.4 regra 14), mas com a medida da entrada: 34px fixos (uma linha de 12,5px em 18px + 8px de respiro; "Usuário ou senha inválidos" cabe numa linha no cartão de 440px e no celular) e 8px de vão em cima e embaixo (a margem de −6px tira 6 dos 14px da coluna) — de 82px entre a senha e o Entrar para 50px. A mensagem que não couber rola dentro da linha, com o completo no `title` e a pista que esmaece (a mesma). */ .login-card .erro-form.erro-reservado { height: 34px; margin: -6px 0; padding: 8px 10px; font-size: 12.5px; line-height: 18px; } .entrada-rodape { margin-top: 26px; height: 16px; font-size: 11.5px; line-height: 16px; letter-spacing: .04em; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 880px) { .entrada-foto { display: none; } .entrada-cartao { width: 100%; padding: 32px 24px; box-shadow: none; } } /* no celular o "Bem-vindo ao {produto}!" ganha DUAS linhas reservadas (50px fixos, reticências na segunda): o nome inteiro cabe e a altura não depende dele */ @media (max-width: 600px) { .entrada-titulo { height: 50px; font-size: 19px; line-height: 25px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } /* Checklists v2 §11.1 (supervisão c1) — a segunda linha do item do modelo (dias · referência · setor · [↑][↓][×], e o "+ item" no rodapé) não cabe numa faixa só em tela de telefone, e a quebra caía onde desse: com `flex-wrap: wrap` quem decide a quebra é a BASE dos itens (96px dos dias + 140px de cada select + 93px do grupo de botões + 3×6px de gap = 487px), e eles só encolhem DEPOIS, dentro de cada faixa já formada. Medido no navegador, numa reprodução deste `.modal-md` com este mesmo CSS: a largura útil da `.linha` é a do viewport menos 114px (24+24 do `.modal-fundo`, 22+22 do `.modal-corpo`, 10+10+2 do `.item`), de modo que a faixa única só fecha sozinha a partir de 602px de viewport. Abaixo disso ela é geometricamente IMPOSSÍVEL — a 360px a `.linha` mede 246px e os três controles com a base natural já pedem 388px —, então aqui a quebra é DELIBERADA e sempre no mesmo lugar: base menor põe os três controles juntos na primeira faixa (ainda cabem a 320px, onde a `.linha` mede 237px e 96 + 2×56 + 2×6 = 220px) e `flex-basis: 100%` dá ao grupo `[↑][↓][×]` / "+ item" uma faixa só sua, à direita. Sem isso a quebra caía onde desse: a 375px, com a base de 96px, a segunda linha saía em TRÊS faixas — "dias + referência", depois "setor" sozinho, depois os botões. O limiar é de VIEWPORT (é o que a media query mede, não a largura útil da `.linha`) e encosta nos 602px em que a faixa única volta por conta própria: a 601px o desenho já é este mesmo (controles numa faixa, ações na outra), então não há degrau em que a tela larga fique pior que a estreita. O `!important` vence o `flex` inline de `camposSugestao` (checklists.js), onde nasce a métrica dos controles; `.sugestao-acoes` é a classe que aquele arquivo põe nos dois grupos de ação. */ @media (max-width: 600px) { .checklist-modelo-itens .item .linha select, .adicionar-item .linha select { flex-basis: 56px !important; } .sugestao-acoes { flex-basis: 100% !important; justify-content: flex-end; text-align: right; } } /* Proposta 4 §3.8 — tela Perfis e permissões: a matriz rola dentro do card com o cabeçalho fixo (sticky), e o rodapé das alterações não salvas fica colado ao pé da tela. */ /* Proposta 12, Parte E (D26): a matriz tem ALTURA FIXA (não máxima) — procurar e recolher mudam o que está dentro dela, nunca o tamanho do card nem o lugar do rodapé; os 378px são o que vem acima e abaixo dela a 1366×768 (o topo, as seções, o resumo, a fileira do "Procurar permissão", o apoio e o rodapé fixo) — medido: a página não rola. */ .matriz-permissoes { overflow: auto; height: calc(100vh - 378px); min-height: 240px; scrollbar-gutter: stable; } .matriz-permissoes thead th { position: sticky; top: 0; z-index: 2; background: var(--superficie); } /* Cabeçalho de linha (a permissão): `th scope="row"` para o leitor de tela, com a aparência de célula comum. */ .matriz-permissoes tbody th { text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 400; color: var(--texto); padding: 12px 14px; white-space: normal; } .matriz-permissoes td input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } .matriz-permissoes td input[type="checkbox"]:disabled { cursor: not-allowed; } /* Proposta 12, Parte E (D26): o cabeçalho de cada área é um botão de toda a largura — a seta (gira ao recolher), o nome e o número de permissões (procurando, "{achadas} de {total}"); ao passar o mouse, só a cor. O campo "Procurar permissão" na fileira dos filtros, de até 280px, e o "Recolher todas" ao lado (numa linha também a 320px). */ .matriz-permissoes tbody tr.area-permissoes th { padding: 12px 8px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); } .area-alternar { display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; } .area-alternar:hover { color: var(--texto); background: var(--fundo); } .area-alternar:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acento-suave); } .area-alternar:disabled { cursor: default; background: none; color: inherit; } .area-seta { flex: none; display: inline-flex; transform: rotate(90deg); } .area-alternar[aria-expanded="false"] .area-seta { transform: none; } .area-permissoes-n { flex: none; min-width: 28px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--fundo); color: var(--texto-2); font-size: 11px; line-height: 18px; font-weight: 600; text-align: center; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; } .filtros .procurar-permissao { flex: 1 1 120px; max-width: 280px; min-width: 0; } /* "Recolher todas" (130px medidos) e "Abrir todas" na mesma largura: trocar o rótulo não move nada */ .btn.alternar-areas { flex: none; min-width: 132px; } .rodape-alteracoes { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; /* §3.8: fundo --superficie-alt (texto-3 e acento sobre ele estão nos pares de test/public/contraste.test.js) */ margin: 16px -24px -24px; padding: 12px 24px; background: var(--superficie-alt); border-top: 1px solid var(--borda); } /* Proposta 5 §0.5 (R7) — os avisos amarelos ficam no rodapé fixo, numa faixa própria: a matriz não se move */ .rodape-alteracoes .rodape-avisos { flex-basis: 100%; } .rodape-alteracoes .rodape-avisos:empty { display: none; } /* Proposta 4 §5.3 — pré-visualização da marca em Configurações do sistema (a mesma .marca da barra lateral). */ .marca-previa { padding: 12px; border: 1px dashed var(--menu-linha); border-radius: var(--raio-sm); align-self: flex-start; background: var(--menu-fundo); color: var(--menu-forte); } @media (max-width: 960px) { /* mesmo limiar do padding de .conteudo */ .rodape-alteracoes { margin: 16px -16px -16px; padding: 12px 16px; } } /* Proposta 4 §4.7 — Aparência (modal do usuário e card de Configurações do sistema): grade de paletas com os cartões de categoria reaproveitados e o selecionado com borda --acento. Cada cartão tem a PRÉVIA da paleta no modo escolhido (28/09/2026, como os cartões de tema do Gestor Pro): o menu à esquerda com o item ativo, a página com um card e o botão principal. Cartões COMPACTOS (proposta 8, item 7): prévia de 36px, o nome e a descrição numa linha cada (os dois completos no title) — 94px de cartão em toda paleta e em qualquer largura. As cores vêm de temas.css, lidas em tempo de execução (tema.js). */ .controles-aparencia { gap: 10px; } .grade-paletas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .grade-paletas .cartao-categoria { padding: 8px 10px; border-radius: 10px; } .cartao-categoria[aria-pressed="true"] { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); } .cartao-categoria:disabled { cursor: not-allowed; opacity: .7; } .cartao-categoria:disabled:hover { box-shadow: none; border-color: var(--borda); } .grade-paletas .cartao-categoria-titulo { font-size: 13px; line-height: 18px; height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .grade-paletas .cartao-categoria-apoio { margin-top: 0; font-size: 11.5px; line-height: 16px; height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .previa-paleta { display: grid; grid-template-columns: 34% minmax(0, 1fr); height: 36px; margin-bottom: 6px; border: 1px solid var(--borda); border-radius: 6px; overflow: hidden; } .previa-menu { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 4px; border-right: 1px solid; } .previa-pagina { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 6px; min-width: 0; } .previa-barra { display: block; height: 5px; border-radius: 3px; } .previa-menu > .previa-barra { margin: 0 3px; } .previa-item-ativo { display: flex; align-items: center; height: 11px; padding: 0 3px; border-radius: 3px; } .previa-item-ativo > .previa-barra { width: 70%; height: 4px; } .previa-barra.texto { width: 55%; } .previa-cartao { display: flex; align-items: center; height: 13px; padding: 0 4px; border: 1px solid; border-radius: 4px; } .previa-barra.acento { width: 45%; height: 4px; } .previa-botao { display: block; width: 40%; height: 7px; border-radius: 99px; margin-left: auto; } .tabs-filtro button:disabled { cursor: not-allowed; } @media (max-width: 960px) { .grade-paletas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Configurações do sistema (proposta 8, item 7; GUIA §3.27) ---------- Cabe numa tela de 1366×768 sem rolagem: acima de 1200px, duas colunas (Empresa · Aparência padrão, 1fr : 2fr, as duas do alto da grade — nenhuma estica a outra); até 1200px, empilhadas. Na Empresa, nome e iniciais numa linha (a coluna das iniciais com 96px), a dica embaixo, a prévia da marca e o Sistema no pé (borda superior); na Aparência, as 9 paletas em 3 colunas (3 × 3 — com 5 por linha, a 1366px, cinco descrições saíam cortadas; com 4 também seriam três fileiras, com cartões mais estreitos) e 2 até 420px. Sem cor nova: --texto-2/--texto-3 sobre --superficie. */ .config-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; } .config-corpo { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px; min-width: 0; } .config-corpo .secao-titulo { margin-bottom: 0; } .config-campos { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; min-width: 0; } .config-dica { margin-top: -6px; font-size: 11px; line-height: 16px; color: var(--texto-3); } .config-sistema { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--borda); font-size: 13px; color: var(--texto-2); } .config-sistema-linha { min-width: 0; } /* Proposta 9 (V1): os logotipos e a imagem da entrada — uma grade de três amostras (duas por linha no celular), cada uma com 40px FIXOS (com ou sem imagem: a imagem entra por cima, `object-fit`), o rótulo e a situação numa linha cada e os botões Enviar/Trocar (.btn-estavel) e Remover. A amostra do logotipo claro é branca e a do escuro, escura, nos dois modos (--amostra-clara/--amostra-escura, sem texto sobre elas); a da entrada mostra o degradê que vale sem a foto. */ .config-imagens { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .config-imagens-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; color: var(--texto-2); } .config-imagens-titulo .mudo-3 { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .imagens-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; min-width: 0; } .imagem-bloco { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .imagem-amostra { position: relative; height: 40px; border: 1px solid var(--borda); border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 3px 6px; } .imagem-amostra.clara { background: var(--amostra-clara); } .imagem-amostra.escura { background: var(--amostra-escura); } .imagem-amostra.foto { padding: 0; background-image: linear-gradient(160deg, var(--entrada-fundo) 0%, var(--entrada-veu) 100%); } .imagem-amostra img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } .imagem-amostra.foto img { width: 100%; height: 100%; max-height: none; object-fit: cover; } .imagem-amostra img[hidden] { display: none; } .imagem-rotulo, .imagem-situacao { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .imagem-rotulo { font-size: 12px; font-weight: 600; line-height: 16px; } .imagem-situacao { font-size: 11px; line-height: 15px; color: var(--texto-3); } .imagem-acoes { display: flex; align-items: center; gap: 4px; } .imagem-acoes .imagem-enviar { flex: 1 1 auto; min-width: 0; padding: 0 6px; } .config-apoio { margin: 2px 0 0; font-size: 13px; line-height: 18px; } .config-aparencia .grade-paletas { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (min-width: 1201px) { .config-grade { grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); } } @media (max-width: 420px) { .config-aparencia .grade-paletas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Agenda de Reuniões, aba Reuniões e Sala de Reunião (proposta 4 §1.9–§1.11) ---------- */ .texto-pre { white-space: pre-wrap; overflow-wrap: anywhere; } .ata-texto { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 13px; line-height: 1.5; margin: 0; background: var(--superficie-alt); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 12px 14px; } .ata-edicao { min-height: 360px !important; } /* ata: ver (pre), ver vazia e corrigir (textarea 360px) ocupam o mesmo espaço (reunioes.js › abrirAta) */ .modal .ata-texto { min-height: 360px; } .ata-texto.ata-vazia { color: var(--texto-3); font-style: italic; } /* item em bloco (aba Reuniões, detalhe da reunião, modal Agendar): conteúdo em coluna, não em linha */ .item.item-bloco { flex-direction: column; align-items: stretch; gap: 6px; } .item.pauta-linha { align-items: flex-start; flex-wrap: wrap; } .item.pauta-linha .pauta-obra { flex: 0 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 6px; } .item.pauta-linha textarea { flex: 1 1 260px; min-height: 56px; padding: 6px 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); resize: vertical; } .item.pauta-linha .item-acoes .btn-icone { opacity: 1; } /* Sala: grid de três painéis; nenhum botão laranja (a ação principal é o estado da reunião, em verde). */ .sala-cabecalho { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 14px; } .sala-cabecalho h2 { font-size: 16px; } /* base > 0: no celular o grupo da direita (badge e botão) quebra para baixo em vez de espremer o título */ .sala-cabecalho > .cresce { flex: 1 1 240px; } .sala { display: grid; grid-template-columns: 260px minmax(0, 1fr) 240px; gap: 14px; align-items: start; } .sala-pauta, .sala-centro, .sala-presenca, .sala-ata { padding: 14px 16px; } .sala-pauta { display: flex; flex-direction: column; gap: 4px; } .sala-pauta-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: var(--raio-sm); background: none; color: var(--texto); cursor: pointer; font: inherit; } /* §4.5 (c): o contador `{n} tarefa(s)` é --texto-3 — no hover o item não ativo usa --superficie-alt e o ativo NÃO muda de fundo (o fundo de hover do acento é par proibido com --texto-3 e não é usado em nenhuma regra da Sala). */ .sala-pauta-item:hover { background: var(--superficie-alt); } .sala-pauta-item.ativo, .sala-pauta-item.ativo:hover { background: var(--acento-suave); color: var(--acento-forte); } .sala-pauta-obra { font-weight: 500; overflow-wrap: anywhere; } .sala-pauta-contador { font-size: 12px; color: var(--texto-3); } /* Proposta 5 §0.5 (R9) — contador e selo `não salvo` numa segunda linha de altura fixa: o selo não empurra a pauta */ .sala-pauta-linha2 { display: flex; gap: 6px; align-items: center; min-height: 20px; } .sala-texto-nao-salvo pre { margin: 8px 0 0; font: inherit; max-height: 200px; overflow: auto; } .sala-pauta select, .sala-presenca-conteudo select { margin-top: 8px; width: 100%; height: 32px; padding: 0 8px; border: 1px dashed var(--borda); border-radius: var(--raio-sm); background: var(--superficie); color: var(--texto-2); } .sala-centro { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .sala-centro-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sala-centro-titulo .sala-obra { font-size: 15px; font-weight: 600; text-align: left; } .sala-anotacoes { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .sala-anotacoes .secao-titulo { margin-bottom: 0; } .sala-anotacoes textarea { width: 100%; min-height: 280px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); line-height: 1.5; resize: vertical; outline: none; } .sala-anotacoes textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); } .sala-anotacoes textarea[readonly] { background: var(--superficie-alt); } .salvamento { font-size: 12px; color: var(--texto-3); } /* Proposta 5 §0.5 (R4, R6): "Salvando…" / "Salvo às HH:MM" / vazio com a mesma largura */ .salvamento { min-width: 14ch; text-align: right; font-variant-numeric: tabular-nums; } .salvamento.erro { color: var(--vermelho); } /* linha de lançamento: quebra como .adicionar-item */ .sala-lancar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .sala-lancar input, .sala-lancar select { height: 34px; padding: 0 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); min-width: 0; } .sala-lancar .sala-lancar-texto { flex: 1 1 260px; } /* o responsável mostra o nome herdado inteiro (§1.11, Anexo A-47); a criticidade fica do tamanho do texto */ .sala-lancar select { flex: 0 0 auto; } .sala-lancar .sala-lancar-responsavel { flex: 1 1 300px; } /* lançadas: o texto da tarefa numa linha própria e os metadados (criticidade, responsável, prazo, atraso) embaixo — só a base muda (`flex-basis`); crescer/encolher continuam os do `.item-texto` genérico */ .sala-lancadas .item { flex-wrap: wrap; row-gap: 4px; } .sala-lancadas .item-texto { flex-basis: 100%; overflow-wrap: anywhere; } .sala-presenca-conteudo { display: flex; flex-direction: column; gap: 4px; } .lista-presenca { display: flex; flex-direction: column; gap: 2px; } .sala-presenca-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: var(--raio-sm); background: none; color: var(--texto); font: inherit; } button.sala-presenca-item { cursor: pointer; } button.sala-presenca-item:hover { background: var(--superficie-alt); } .sala-presenca-simbolo { width: 16px; flex: none; text-align: center; color: var(--texto-2); } .sala-presenca-item.presente .sala-presenca-simbolo { color: var(--verde); } .sala-presenca-item.ausente .sala-presenca-nome { text-decoration: line-through; color: var(--texto-3); } .sala-presenca-item.nao-registrado .sala-presenca-nome { color: var(--texto-2); } .sala-presenca-recolhida { display: none; } @media (max-width: 960px) { .sala { grid-template-columns: minmax(0, 1fr); } /* a pauta vira uma faixa horizontal de chips roláveis no topo */ .sala-pauta { flex-direction: row; align-items: center; overflow-x: auto; padding: 8px; } .sala-pauta > .secao-titulo { display: none; } /* GUIA §1.4 regra 15: os chips da pauta são guias do mesmo grupo — todos com a mesma largura (antes 129/286/219px, conforme o nome da obra, e o "{n} tarefas" que crescia empurrava os chips seguintes); o nome da obra ganha reticências e fica completo no `title` */ .sala-pauta-item { flex: none; width: 200px; white-space: nowrap; border: 1px solid var(--borda); position: relative; } .sala-pauta-item > .sala-pauta-obra { max-width: 100%; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; } /* R9: nos chips, o selo `não salvo` fica por cima do canto — não alarga o chip nem empurra os seguintes */ .sala-pauta-item .sala-nao-salvo { position: absolute; top: -8px; right: -4px; } .sala-pauta select { margin-top: 0; width: auto; flex: none; } /* presença vai para um bloco recolhido abaixo do lançamento */ .sala-presenca { display: none; } .sala-presenca-recolhida { display: block; margin-top: 8px; } .item.pauta-linha .pauta-obra { flex-basis: 100%; padding-top: 0; } } /* Barra de seções das Configurações do sistema (proposta 7 §A.6; proposta 9, Parte H — cinco seções): rótulo curto (Sistema, Usuários, Perfis, Auditoria, Custos) até 1260px — acima disso as cinco células de 192px cabem inteiras. A conta das cinco (a célula precisa de 175,1 + 16 = 191,1px, o maior rótulo, "Configurações do sistema", medido): sem a sidebar (até 960px), 5 × 191,1 + 2 × 16 + 17 da barra de rolagem = 1004,5px; com ela (acima de 960px), 5 × 191,1 + 240 + 2 × 24 + 17 = 1260,5px — o corte vai ao maior (entre os dois, "Perfis e permissões" sairia com reticências). Com o menu recolhido (76px) caberiam desde 1096,5px: o curto aparece de sobra, nunca cortado. O rótulo completo continua no DOM para o leitor de tela (e no `title`); o curto é só visual. */ @media (max-width: 1260px) { .abas-secoes a.tem-curto .aba-rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .abas-secoes a.tem-curto .aba-curto { display: block; } } /* Proposta 5 §0.3 — abas do modal em tela estreita: a mesma grade, rótulos curtos; nunca rolagem horizontal. 1000px: abaixo disso a célula tem menos que os 218px que "Pendências & Decisões" + contador pedem (medido). */ @media (max-width: 1000px) { .modal-abas button { padding: 8px 6px 10px; } /* o rótulo completo continua no DOM para o leitor de tela (e no `title`); o curto é só visual (aria-hidden) */ .modal-abas button.tem-curto .aba-rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .modal-abas button.tem-curto .aba-curto { display: block; } /* proposta 11, Parte 2: "Avançar para {fase}" do cabeçalho vira "Avançar" (o nome inteiro no aria-label e no title), para o título da demanda não encolher; até 600px, só a seta (a regra de .modal-acoes .rotulo-acao) */ .modal-acoes .btn-avancar-fase .rotulo-acao { display: none; } .modal-acoes .btn-avancar-fase::after { content: attr(data-curto); } } /* até 600px: contador sob o rótulo, 12px — oito células de 76px a 375px */ @media (max-width: 600px) { .modal-abas { padding: 6px 12px 0; } .modal-abas button { flex-direction: column; gap: 2px; padding: 6px 2px 8px; font-size: 12px; } /* barra de seções: 12px e 1px de respiro — o maior curto, "Auditoria" (52 + 2px), inteiro nas cinco células até 320px, mesmo com os 17px da barra de rolagem ((320 − 17 − 32) / 5 = 54,2px) */ .abas-secoes a { padding: 0 1px; font-size: 12px; } /* ações do cabeçalho do modal (botaoCabecalho) só com o ícone — nome no aria-label/title — para o título da demanda não encolher a poucas letras (GUIA §1.4 regra 14) */ .modal-cabecalho { gap: 8px; } .modal-acoes { gap: 4px; } .modal-acoes .rotulo-acao { display: none; } .modal-acoes .btn.acao-so-icone { padding: 0 7px; } .modal-acoes .btn-avancar-fase::after { content: none; } /* proposta 9 (Parte C): o título tem ~120px aqui — o código tomaria a linha e a obra sumiria. Ele sai da vista (continua para o leitor de tela e no `title`, "{código} · {obra}"); fica no cartão e nas listas de onde se abriu. */ .modal-titulo .codigo-demanda { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* detalhe da reunião: a fileira do subtítulo fica com status · dd/mm às hora · registro antigo · local (cada item inteiro ou na fileira escondida); o ano só para o leitor de tela (a 375px "23/09/2026 às 09:00" pedia 132px e tinha 103 — a hora saía cortada). Nunca display: none — o local (e o ano) não somem de quem cabe/ouve */ .modal-sub .quando-ano { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } } /* Proposta 5 §0.4-R2 — esqueleto de carregamento (sem cor nova: --fundo sobre --superficie no card/modal; na tela, --superficie com borda sobre --fundo — ver .esqueleto-tela abaixo) */ .esqueleto-lista { display: flex; flex-direction: column; gap: 6px; } .esqueleto { height: 56px; border-radius: var(--raio-sm); background: var(--fundo); } .esqueleto-tela .esqueleto:first-child { height: 56px; max-width: 420px; margin-bottom: 20px; } .esqueleto-tela .esqueleto:last-child { height: 240px; } @media (prefers-reduced-motion: no-preference) { .esqueleto { animation: pulsar 1.2s ease-in-out infinite; } } @keyframes pulsar { 50% { opacity: .55; } } /* na tela o .tela fica sobre --fundo (o .conteudo é transparente): as faixas viram cards vazios, senão seriam invisíveis */ .esqueleto-tela .esqueleto { background: var(--superficie); border: 1px solid var(--borda); } /* ---------- Chat interno e sino (proposta 5 §1.8) ---------- */ /* Proposta 5 §1.8 — ícones da topbar: sempre na borda direita, em toda tela (com ou sem busca). Proposta 7 §A.5: o ✓ entrou em #topbar-icones, antes do sino. A "Nova Demanda" é a da topbar desde a proposta 8 (D1 — a porta única, em toda tela; revogou a R1 da proposta 7, que a tinha levado ao cabeçalho da Central) */ .topbar-icones { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; } .busca:not(.oculto) ~ .topbar-icones { margin-left: 0; } .topbar-icone { position: relative; } .topbar-contador { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--destaque); color: var(--sobre-destaque); pointer-events: none; } /* os dois botões fantasma da topbar têm 36px (o .btn-icone comum tem 30); o ativo (painel aberto) só troca o fundo */ .topbar-icones .btn-icone { width: 36px; } .topbar-icones .btn-icone svg { width: 18px; height: 18px; } .topbar-icones .btn-icone.ativo { background: var(--fundo); color: var(--texto); } /* busca recolhida (só até 600px — ver o @media do fim): fora dele os dois botões não existem; com um termo digitado, a lupa fica em --acento (a lista está filtrada mesmo com o campo fechado) */ .busca .busca-abrir, .busca .busca-fechar { display: none; width: 36px; flex: none; } .busca .busca-abrir svg, .busca .busca-fechar svg { width: 18px; height: 18px; } .busca.com-termo .busca-abrir { color: var(--acento); } /* ---------- A barra do topo e as janelas drop (proposta 8, itens 1, 2, 4, 9, 11 e 12; GUIA §3.31) ---------- Ordem fixa em toda tela (D2; proposta 12, Parte B): ☰ (até 960px) · ‹ Voltar · título · busca · Ferramentas (até 800px no ⋯) · ⋯ Mais (o olho e o claro/escuro, em toda largura) · sino · mensagens · Capturar · Nova Demanda. O título encolhe com reticências (completo no `title`) e a busca não fica menor que 140px: quem cede espaço é o título, nunca os ícones (o `right` deles é o mesmo em toda tela). Capturar e Nova Demanda nunca ficam só com o ícone: acima de 1200px o ícone e o nome inteiro; até 1200px o "+" e o nome curto ("+ Capturar", "+ Demanda"); até 600px o "+" em cima e a palavra embaixo (os @media do fim do arquivo). */ .titulo-tela { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .busca:not(.oculto) { min-width: 140px; } .topbar-voltar { flex: none; width: 36px; } .topbar-voltar svg { width: 20px; height: 20px; } /* o olho fechado (proposta 12, Parte B: o olho mora no ⋯): o ⋯ em --acento — os valores estão escondidos nesta tela */ .topbar-icones .topbar-mais.com-olho-fechado { color: var(--acento); } .topbar-acoes { display: flex; align-items: center; gap: 8px; margin-left: 8px; flex: none; } .topbar-acao { flex: none; } .topbar-acao svg { width: 18px; height: 18px; } .topbar-acao .acao-icone-longo, .topbar-acao .acao-icone-curto { display: inline-flex; flex: none; } .topbar-acao .acao-icone-curto svg { width: 16px; height: 16px; } .topbar-acao .acao-icone-curto, .topbar-acao .acao-curta { display: none; } .topbar-acao.ativo { box-shadow: 0 0 0 3px var(--acento-suave); } /* Proposta 12, Parte B (item 1): o balão com o nome do ícone (dica.js) — na hora, ao parar o mouse ou chegar pelo teclado; fixo no body (não move nada), escondido sem `.visivel`. As cores do toast (o par --sobre-toast sobre --toast está no teste de contraste): um balão escuro, como o aviso. */ .dica { position: fixed; left: 0; top: 0; z-index: 190; display: none; max-width: min(320px, calc(100vw - 16px)); padding: 5px 9px; border-radius: var(--raio-sm); background: var(--toast); color: var(--sobre-toast); font-size: 12px; line-height: 16px; font-weight: 500; box-shadow: var(--sombra-md); overflow-wrap: anywhere; } .dica.visivel { display: block; } /* As janelas drop (drop.js): flutuantes (fixed, no body), ancoradas no botão — não empurram nada; uma de cada vez. O tamanho vem da classe: Capturar e Nova Demanda com o MESMO (.drop-acao, do mesmo grupo — item 12); o ⋯ (.drop-menu) e a janela de configurações (.drop-config) com a altura do conteúdo, que é fixo para cada usuário. */ .drop { position: fixed; left: 0; top: 0; z-index: 165; display: flex; flex-direction: column; overflow: hidden; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-md); } .drop:focus { outline: none; } .drop-cabecalho { flex: none; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 16px; border-bottom: 1px solid var(--borda); } .drop-titulo { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .drop-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px; } .drop-acao { width: min(380px, calc(100vw - 16px)); height: min(414px, calc(100vh - var(--topbar-h) - 16px)); } /* proposta 12, Parte B (item 5): a janela Capturar com a altura do próprio conteúdo (a mesma largura da Nova Demanda) */ .drop-janela-captura { width: min(380px, calc(100vw - 16px)); max-height: calc(100vh - var(--topbar-h) - 16px); } .drop-menu { width: min(260px, calc(100vw - 16px)); } /* o ⋯ de um registro (proposta 11, Parte 2 — `botaoMaisAcoes`): "Avançar para Planejamento da Obra" sempre inteiro — quando não cabe numa linha (a tela estreita), o rótulo quebra e o item cresce para baixo; nunca reticências */ .drop-menu-acoes { width: min(320px, calc(100vw - 16px)); } .drop-menu-acoes .drop-item { height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; } .drop-menu-acoes .drop-item-rotulo { white-space: normal; overflow-wrap: anywhere; } /* proposta 11, Parte 3: a linha do ⋯ que diz por que uma ação não está ali (o Eliminar da captura que não é sua) — texto, não botão; inteiro (quebra linha), 12px --texto-2, separado das ações por um filete */ .drop-nota { margin: 4px 0 0; padding: 8px 10px 2px; border-top: 1px solid var(--borda); font-size: 12px; line-height: 16px; color: var(--texto-2); overflow-wrap: anywhere; } .drop-nota:first-child { margin-top: 0; padding-top: 2px; border-top: 0; } .drop-config { width: min(272px, calc(100vw - 16px)); } .drop-pergunta { margin: 0 0 8px; font-weight: 500; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .drop-dica { margin: 0; font-size: 12px; color: var(--texto-3); } /* Nova Demanda: as 4 portas com o nome INTEIRO (quebra linha — o do material é longo) e o apoio em até 2 linhas (reticências na 2ª; o completo no `title`) — nota da supervisão de 29/09/2026 (antes, nome e apoio numa linha só saíam cortados). O conteúdo é fixo (as 4 categorias): a altura de cada porta vem dele e a janela (.drop-acao) tem a altura do conteúdo a 380px de largura. */ /* Proposta 12, Parte A (D3): o ícone grande à esquerda, num quadrado de 36px no acento suave (a mesma coluna em toda porta), e os textos ao lado — o nome curto da porta e o apoio. */ .drop-portas { display: grid; gap: 6px; } .drop-porta { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: 10px; min-width: 0; padding: 8px 12px 8px 8px; text-align: left; cursor: pointer; font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-sm); transition: border-color .12s; } .drop-porta-icone, .cartao-categoria-icone { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--acento-suave); color: var(--acento-forte); } .drop-porta-textos { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; } .drop-porta:hover { border-color: var(--acento); } .drop-porta:focus-visible { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); } .drop-porta-nome { flex: none; max-width: 100%; font-size: 13px; line-height: 18px; font-weight: 600; overflow-wrap: anywhere; } .drop-porta-apoio { min-width: 0; max-width: 100%; font-size: 12px; line-height: 16px; color: var(--texto-2); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } /* Capturar: o texto, a linha do dia com o botão, a dica e a linha de erro reservada (54px — nada se move). Proposta 12, Parte B: "Marcar dia" e o campo do dia (com o X) se revezam no mesmo lugar da linha de 36px — a janela não cresce */ .drop-captura { display: flex; flex-direction: column; gap: 8px; } .drop-captura .drop-pergunta { margin: 0; } .drop-captura input { height: 36px; padding: 0 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); outline: none; } .drop-captura input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); } .drop-captura-texto { width: 100%; } .drop-captura-linha { display: flex; gap: 8px; min-width: 0; height: 36px; } .drop-captura-linha .btn { flex: none; } .drop-captura-linha .drop-captura-marcar { flex: 1 1 auto; min-width: 0; justify-content: flex-start; padding: 0 12px; color: var(--texto-2); } .drop-captura-marcar svg { flex: none; width: 16px; height: 16px; } .drop-captura-dia { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; } .drop-captura-data { flex: 1; min-width: 0; } .drop-captura-dia .drop-captura-tirar { width: 32px; } .drop-captura .drop-dica { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } /* listas do ⋯ e da janela de configurações */ .drop-lista { display: flex; flex-direction: column; gap: 2px; } .drop-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; min-width: 0; padding: 0 10px; border: 0; border-radius: var(--raio-sm); background: transparent; color: var(--texto); font: inherit; text-align: left; cursor: pointer; } .drop-item:hover { background: var(--fundo); color: var(--texto); text-decoration: none; } .drop-item.ativo { background: var(--acento-suave); color: var(--acento-forte); } .drop-item svg { flex: none; width: 16px; height: 16px; } .drop-item-rotulo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .drop-item-detalhe { flex: none; font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; } /* a janela de configurações (pedido do dono, 01/10/2026): DOIS itens — o rótulo e, logo abaixo, o apoio visível (o title não aparece no toque), em até 2 linhas (o completo no title); o ícone alinhado ao rótulo */ .drop-item-apoiado { height: auto; min-height: 36px; align-items: flex-start; padding-top: 8px; padding-bottom: 8px; } .drop-item-apoiado svg { margin-top: 2px; } .drop-item-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .drop-item-apoiado .drop-item-rotulo { flex: none; } .drop-item-apoio { font-size: 12px; line-height: 16px; color: var(--texto-2); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .drop-item-apoiado.ativo .drop-item-apoio { color: var(--acento-forte); } .drop-rodape { margin-top: 8px; padding: 8px 10px 0; border-top: 1px solid var(--borda); font-size: 11px; color: var(--texto-3); font-variant-numeric: tabular-nums; } /* Proposta 9 §7.1 (Parte E): a lista de críticos (a janela drop da faixa de alerta da Central): tamanho fixo (não muda com o "Só os meus" nem com os números — GUIA §1.4 regra 9), a barra do filtro em cima e a lista rolando por dentro, com a barra de rolagem reservada; `position: relative` para o grupo pedido ser achado pelo `offsetTop` (a lista rola até ele, nunca `scrollIntoView`). Até 600px a janela ocupa a largura útil (o `min` da largura). */ .drop-alertas { width: min(560px, calc(100vw - 16px)); height: min(520px, calc(100vh - var(--topbar-h) - 16px)); } .drop-alertas .drop-corpo { display: flex; flex-direction: column; gap: 8px; overflow: hidden; padding: 10px 0 0; } .alertas-barra { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 28px; padding: 0 16px; } .alertas-lista { position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 0 12px 12px 16px; } .alertas-grupo { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); } .alertas-grupo:first-child { margin-top: 0; } .alertas-grupo.critico { color: var(--amarelo); } .alertas-grupo-n { min-width: 24px; font-variant-numeric: tabular-nums; } .alertas-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .alerta-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); } /* proposta 11 (D5): o filete vermelho só no item de atraso (`atraso` do servidor); o crítico sem atraso, âmbar */ .alerta-item.critico { border-left: 3px solid var(--amarelo); } .alerta-item.critico.atraso { border-left-color: var(--vermelho); } .alerta-item-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .alerta-item-textos > div { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .alerta-item-onde .badge { margin-right: 6px; vertical-align: 1px; } .alerta-item-texto { font-weight: 500; color: var(--texto); } .alerta-item-que { color: var(--texto-2); } .alerta-abrir { flex: none; } .alertas-ocultos, .alertas-itens > .vazio { padding: 4px 2px; } .alertas-vazio { padding: 24px 16px; } .alertas-vazio a { display: inline-block; margin-top: 8px; } /* a configuração dos alertas (Central › Regras da Central › Alertas): cards como os do gestor; cada alerta uma linha em grade (ligado · alerta · gravidade · parâmetros), empilhada até 760px */ .alertas-card + .alertas-card { margin-top: 16px; } .alertas-linhas { display: flex; flex-wrap: wrap; gap: 8px 20px; } .alertas-texto-verde { width: 100%; max-width: 640px; } .alertas-conta { font-weight: 400; } .alertas-config-cabeca, .alertas-config-linha { display: grid; grid-template-columns: 56px minmax(0, 1fr) 150px minmax(0, 260px); gap: 12px; align-items: start; } .alertas-config-cabeca { padding: 0 0 6px; border-bottom: 1px solid var(--borda); text-transform: uppercase; letter-spacing: .04em; } .alertas-config-linha { padding: 10px 0; border-bottom: 1px solid var(--borda); } .alertas-config-linha:last-child { border-bottom: 0; } .alertas-config-gravidade select { width: 100%; height: 32px; } .alertas-config-parametros { display: flex; flex-direction: column; gap: 6px; min-width: 0; } @media (max-width: 760px) { .alertas-config-cabeca { display: none; } .alertas-config-linha { grid-template-columns: 32px minmax(0, 1fr); } .alertas-config-gravidade, .alertas-config-parametros { grid-column: 2; } } /* Com modal aberto e tela ≥ 1300px, a coluna das janelas fica reservada à direita (chat.js grava --chat-reserva); `body >` porque a regra de base do .modal-fundo é única (teste da Parte A) — o modal é sempre filho do body */ body > .modal-fundo { padding-right: max(24px, var(--chat-reserva, 0px)); } /* os toasts sobem acima das janelas (452px com uma aberta, 56px só com minimizadas — chat.js) */ .toasts { bottom: calc(20px + var(--chat-ocupado, 0px)); } .toast-persistente { display: flex; align-items: center; gap: 10px; } /* Painel de conversas e painel do sino: 360 × min(560px, 100dvh − 96px) fixos, ancorados sob os ícones (R10) */ .chat-painel { position: fixed; top: calc(var(--topbar-h) + 4px); right: 16px; z-index: 160; width: 360px; height: min(560px, calc(100vh - 96px)); height: min(560px, calc(100dvh - 96px)); display: flex; flex-direction: column; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-md); overflow: hidden; } .chat-painel-cabecalho { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px 6px; } /* faixa de estado sempre presente (R7): vazia, ou "Reconectando…" — nunca muda a altura */ .chat-painel-estado { flex: none; padding: 0 14px; font-size: 12px; color: var(--texto-3); } .chat-estado-texto { display: block; height: 24px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* proposta 11, Parte 5: o gestor automático pausado, no topo da lista do sino (chega junto com a lista — nada empurra) */ .notif-pausado { display: flex; align-items: flex-start; gap: 8px; margin: 8px 10px 4px; padding: 8px 10px; border-radius: var(--raio-sm); background: var(--amarelo-suave); color: var(--texto); font-size: 12px; line-height: 16px; font-weight: 500; } .notif-pausado svg { flex: none; margin-top: 0; color: var(--amarelo); } /* proposta 6 §5 m1 — a oferta do aviso do navegador no sino: substitui o texto de estado, mesma altura (24px) */ .aviso-navegador-oferta { display: flex; align-items: center; gap: 8px; height: 24px; line-height: 24px; white-space: nowrap; overflow: hidden; } .aviso-navegador-texto { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .aviso-navegador-oferta .btn-link { flex: none; height: 24px; line-height: 24px; padding: 0; font-size: 12px; } /* o painel recebe o foco ao abrir (Esc fica contido nele — não fecha o modal de baixo); sem anel no próprio painel */ .chat-painel:focus { outline: none; } .chat-aviso-navegador { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 0 0 8px; color: var(--texto-2); } .chat-aviso-navegador .btn-link { font-size: 12px; } .chat-painel-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; } .chat-painel-busca { flex: none; padding: 0 14px 8px; } .chat-busca { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--fundo); outline: none; } .chat-busca:focus { border-color: var(--acento); background: var(--superficie); box-shadow: 0 0 0 3px var(--acento-suave); } .chat-painel-lista { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; } .chat-painel-esqueleto { padding: 6px 14px; } .chat-conversa-linha { display: flex; align-items: center; gap: 10px; width: 100%; height: 56px; padding: 0 14px; border: 0; background: none; text-align: left; color: var(--texto); font: inherit; cursor: pointer; } .chat-conversa-linha:hover { background: var(--fundo); } .chat-conversa-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; } .chat-conversa-titulo { font-size: 13px; font-weight: 600; } .chat-conversa-trecho { font-size: 12px; color: var(--texto-2); min-height: 17px; } .chat-conversa-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .chat-conversa-hora { font-size: 11px; color: var(--texto-3); font-variant-numeric: tabular-nums; min-height: 16px; } .chat-conversa-marcas { display: flex; align-items: center; gap: 4px; min-height: 18px; } .chat-pill { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--acento-suave); color: var(--acento-forte); flex: none; } .chat-arroba { font-weight: 700; color: var(--acento-forte); } .chat-grupo-pessoa { padding: 6px 14px; } .chat-grupo-rodape { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--borda); } .chat-grupo-erro { flex: 1; min-width: 0; font-size: 12px; color: var(--vermelho); } .chat-menu { position: absolute; top: 44px; right: 8px; z-index: 5; min-width: 200px; max-height: 320px; overflow-y: auto; padding: 4px 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-sm); box-shadow: var(--sombra-md); } .chat-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; border: 0; background: none; text-align: left; color: var(--texto); font: inherit; font-size: 13px; cursor: pointer; } .chat-menu-item:hover { background: var(--fundo); } .chat-menu-dica { padding: 7px 12px; font-size: 12px; color: var(--texto-2); } /* avatar das conversas: iniciais (ou ícone do grupo/demanda) com o ponto de presença */ .chat-avatar { position: relative; } .chat-avatar svg { width: 14px; height: 14px; } .presenca { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; } .presenca.online { background: var(--verde); box-shadow: 0 0 0 2px var(--superficie); } .presenca.ausente { background: var(--superficie); box-shadow: inset 0 0 0 2px var(--texto-3); } /* Janelas flutuantes: acima do .modal-fundo (100), abaixo dos toasts (200); a mais recente à direita */ .chat-janelas { position: fixed; right: 16px; bottom: 0; z-index: 150; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 12px; pointer-events: none; } .chat-janelas > * { pointer-events: auto; } /* modal aberto a partir de 1300px: uma janela só, com o chip +{n} acima dela, na coluna reservada */ .chat-janelas.coluna { flex-direction: column-reverse; } /* R10 — tamanho fixo; a lista rola por dentro e o campo cresce dentro da janela */ .chat-janela { position: relative; width: 328px; height: 440px; display: flex; flex-direction: column; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: var(--sombra-md); overflow: hidden; } /* minimizada: só o cabeçalho (pedido do usuário — a janela continua ancorada no pé e na mesma coluna) */ .chat-janela.minimizada { height: 44px; } .chat-janela-cabecalho { flex: none; height: 43px; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 10px; background: var(--superficie-alt); border-bottom: 1px solid var(--borda); } .chat-janela.minimizada .chat-janela-cabecalho { cursor: pointer; } .chat-janela-cabecalho .btn-icone { flex: none; } .chat-janela-titulo { flex: 1; min-width: 0; line-height: 1.2; } .chat-janela-nome { font-size: 13px; font-weight: 600; } .chat-janela-sub { font-size: 12px; color: var(--texto-3); height: 15px; } .chat-voltar { display: none; } .chat-voltar svg { transform: scaleX(-1); } .chat-mensagens { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; } .chat-janela.minimizada .chat-mensagens, .chat-janela.minimizada .chat-rodape, .chat-janela.minimizada .chat-janela-menu { display: none; } .chat-esqueleto .esqueleto { height: 36px; width: 70%; border-radius: 12px; } .chat-esqueleto .esqueleto.meu { align-self: flex-end; width: 55%; } .chat-vazio { padding: 24px 12px; } .chat-anteriores { align-self: center; font-size: 12px; } .chat-dia { align-self: center; font-size: 11px; color: var(--texto-3); padding: 4px 0; } .chat-msg { display: flex; flex-direction: column; align-items: flex-start; } .chat-msg.meu { align-items: flex-end; } .chat-msg.gestor { align-items: stretch; } .chat-balao { max-width: 85%; padding: 6px 10px; border-radius: 12px; background: var(--fundo); color: var(--texto); font-size: 13px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; } .chat-balao.meu { background: var(--acento-suave); color: var(--texto); } .chat-balao.gestor { max-width: none; background: var(--superficie-alt); border-left: 3px solid var(--acento); border-radius: 0; } .chat-balao.enviando { opacity: .6; } .chat-balao-autor { font-size: 12px; font-weight: 600; } .chat-balao-hora { font-size: 11px; color: var(--texto-3); margin-top: 2px; text-align: right; font-variant-numeric: tabular-nums; } .chat-balao.meu .chat-balao-hora { color: var(--texto-2); } .chat-balao-apagada { font-style: italic; color: var(--texto-3); } .chat-balao-link { display: inline-block; margin-top: 4px; } .chat-falhou { font-size: 12px; margin-top: 2px; } .chat-falhou .btn-link { color: var(--vermelho); font-size: 12px; } .chat-mencao { font-weight: 600; color: var(--acento-forte); } .chat-mencao.eu { background: var(--acento-suave); border-radius: 4px; padding: 0 2px; } .chat-balao.gestor .chat-mencao:not(.eu) { color: var(--texto); } .chat-ref { font-weight: 500; } .chat-balao.meu .chat-ref { color: var(--acento-forte); } .chat-ref-removida { color: var(--texto-3); } .chat-rodape { flex: none; } .chat-composer { position: relative; display: flex; align-items: flex-end; gap: 6px; padding: 8px 8px 8px 10px; border-top: 1px solid var(--borda); } /* 1 a 5 linhas (38 a 120px): quem encolhe é a lista de mensagens, nunca a janela */ .chat-composer textarea { flex: 1; min-width: 0; height: 38px; min-height: 38px; max-height: 120px; padding: 8px 10px; resize: none; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); line-height: 20px; outline: none; } .chat-composer textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); } .chat-composer .chat-enviar { width: 36px; height: 38px; flex: none; } .chat-somente-leitura { padding: 10px 12px; border-top: 1px solid var(--borda); background: var(--superficie-alt); font-size: 12px; color: var(--texto-2); } .chat-autocomplete { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 4px); z-index: 4; max-height: 240px; overflow-y: auto; padding: 4px 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-sm); box-shadow: var(--sombra-md); } .chat-autocomplete button { display: block; width: 100%; padding: 6px 10px; border: 0; background: none; text-align: left; color: var(--texto); font: inherit; font-size: 13px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-autocomplete button.ativo, .chat-autocomplete button:hover { background: var(--fundo); } /* chip das janelas que não cabem: 32px de altura — com modal aberto (601–1299px), nunca alcança os botões do rodapé */ .chat-janelas-mais-caixa { position: relative; } .chat-janelas-mais { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid var(--borda); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-md); font: inherit; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; } .chat-janelas-mais:hover { background: var(--fundo); } .chat-janelas-lista { position: absolute; right: 0; bottom: calc(100% + 4px); min-width: 220px; max-width: 300px; padding: 4px 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-sm); box-shadow: var(--sombra-md); } /* Sino: linha do aviso (ponto de não lida com espaço reservado — a linha não muda ao ser lida) */ .notif-abas { flex: none; padding: 0 14px 8px; } .notif-linha { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--borda); background: none; text-align: left; color: var(--texto); font: inherit; cursor: pointer; } .notif-linha:hover { background: var(--fundo); } .notif-ponto { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--acento); visibility: hidden; } .notif-linha.nao-lida .notif-ponto { visibility: visible; } .notif-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .notif-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; } .notif-titulo { font-size: 13px; font-weight: 600; } .notif-texto { font-size: 12px; color: var(--texto-2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } /* Celular: uma janela por vez, tela cheia (por cima do modal); o painel também ocupa a tela inteira. Topbar (GUIA §1.4 regra 12 — a página nunca passa da largura da tela): o título encolhe com reticências (completo no `title`) e os ícones ficam sempre na borda direita; nunca `overflow: hidden` na topbar ("Nova Demanda" saiu dela na proposta 7 — R1). A mesma regra vale para o resto da tela: as abas-filtro continuam numa grade de células iguais que NUNCA quebra (R11), e a célula é UMA SÓ por largura de viewport — a que faz caber o maior grupo (os 4 períodos da Agenda): `(largura útil − 32px do gutter − 6px do padding − 3 × 2px dos vãos) / 4`, no máximo 104px (82,75px a 375, 69px a 320). `--largura-util` é o `clientWidth` da página (app.js — sem a barra de rolagem que o `100vw` inclui), com `100vw` de reserva. Tarefas (3 abas), Pendências, Decisões, sino e Aparência têm a mesma célula da Agenda. No cabeçalho de tela (R12), o botão primário fica com o ícone e o rótulo curto (`data-curto`: "+ Nova", "+ Agendar" — nunca só o "+") e a ação secundária com ícone fica só com ele (nome completo no `aria-label`/`title`, `botaoCabecalho` de ui.js); o resumo com `data-curto` (Tarefas) mostra a forma curta. A busca vira um botão de 36×36 só com a lupa (`aria-label="Buscar"`); o clique abre o campo POR CIMA da topbar inteira (`.busca.aberta .busca-campo`, absoluto — R9: não ocupa espaço e nada na topbar se move), com um botão de fechar e Esc (app.js). A 50px entre o título e o "+", o campo era inalcançável: encolhe o texto, nunca o alcance. */ @media (max-width: 600px) { .titulo-tela { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabs-filtro { grid-auto-columns: minmax(0, min(104px, calc((var(--largura-util, 100vw) - 32px - 6px - 3 * 2px) / 4))); } .tabs-filtro button { padding: 5px 1px; font-size: 12px; } .cabecalho-acoes .rotulo-acao { display: none; } .cabecalho-acoes .btn[data-curto]::after { content: attr(data-curto); } .cabecalho-resumo { gap: 8px; } .cabecalho-acoes .btn.acao-so-icone, .cabecalho-acoes .btn[data-curto] { padding: 0 10px; } .conteudo-cabecalho h2[data-curto] > .resumo-completo { display: none; } .conteudo-cabecalho h2[data-curto]::after { content: attr(data-curto); } .busca { position: static; flex: none; max-width: none; } .busca:not(.oculto) { min-width: 0; } .busca .busca-abrir { display: inline-flex; } .busca-campo { display: none; } .busca.aberta .busca-campo { display: flex; align-items: center; gap: 4px; position: absolute; inset: 0 12px; z-index: 1; background: var(--fundo-topbar); } .busca.aberta .busca-campo > svg { top: calc(50% - 8px); } .busca-campo input { flex: 1; min-width: 0; } .busca .busca-fechar { display: inline-flex; } /* proposta 8 (D2): a barra do topo cabe a partir de 320px — respiros menores e botões de 32px; o título é quem encolhe (reticências). Nunca overflow na topbar */ .topbar { gap: 4px; padding: 0 8px; } .topbar .topbar-icones { gap: 2px; } .topbar-icones .btn-icone, .topbar-voltar, .btn-menu, .busca .busca-abrir { width: 32px; } .topbar-acoes { gap: 2px; margin-left: 2px; } /* proposta 12, Parte B (item 4): Capturar e Nova Demanda com o rótulo curto em duas linhas — o "+" em cima e a palavra embaixo (10px/600, a largura da palavra); quem cede espaço é o título */ .topbar .topbar-acoes .topbar-acao { flex-direction: column; gap: 1px; width: auto; height: 38px; padding: 0 4px; font-size: 10px; line-height: 12px; font-weight: 600; } .topbar .topbar-acoes .topbar-acao .acao-icone-curto svg { width: 14px; height: 14px; } .chat-painel { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: 100vh; height: 100dvh; border-radius: 0; z-index: 170; } .chat-janela:not(.minimizada) { position: fixed; inset: 0; width: auto; height: 100vh; height: 100dvh; border-radius: 0; border: 0; z-index: 170; } .chat-voltar { display: inline-flex; } /* filtros da Atividade do gestor: um select por linha, todos com a largura da barra (nunca tamanhos diferentes nem "Todos os destinatá" cortado); a barra tem a mesma altura no esqueleto e carregada */ .gestor-filtros select { flex: 1 1 100%; min-width: 0; } /* bloco "Próxima ação" da Visão Geral (GUIA §1.4 regra 14 — o texto tem a prioridade): o prefixo dá lugar ao ícone, o badge de atraso fica compacto ("12d") e os links só com o ícone. Fora da vista, não do leitor de tela: "Próxima ação: " e "12 dias em atraso" continuam sendo lidos */ .proxima-acao .proxima-acao-icone { display: inline-flex; flex: none; } .proxima-acao .proxima-acao-prefixo, .proxima-acao .badge-texto-longo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .proxima-acao .badge-texto-curto { display: inline; } .proxima-acao .rotulo-acao { display: none; } /* o badge compacto ("12d", "Hoje", "2d" — no máximo ~40px) não encolhe mais: a 320px, com o texto a 16ch, ele virava uma mancha vermelha sem texto (atraso sempre com texto, GUIA §3.3). O texto desce a 10ch e o ícone do badge sai (o texto do badge basta); `span.badge` vence a regra-base, que vem depois */ .proxima-acao .proxima-acao-texto { min-width: 10ch; } .proxima-acao > span.badge { flex: none; } .proxima-acao > .badge > svg { display: none; } /* os links só com o ícone continuam um alvo de toque de 30×30 (como .acao-so-icone), dentro da linha de 36px */ .proxima-acao > .btn-link { min-width: 30px; min-height: 30px; justify-content: center; } /* a linha "Material" (proposta 9, C19): o atalho só com o ícone, num alvo de 30×30 */ .linha-material .rotulo-acao { display: none; } .linha-material > .btn-link, .linha-material > a { min-width: 30px; min-height: 30px; justify-content: center; } /* o formulário da data importante (proposta 9, Parte F): tipo e data empilhados */ .form-marco-linha { grid-template-columns: minmax(0, 1fr); } /* o item de compra: o botão "Não comprado/entregue" desce para a linha de baixo, inteiro (nunca cortado) */ .item-compra { flex-wrap: wrap; row-gap: 6px; } .item-compra .item-texto { flex-basis: calc(100% - 80px); } /* a grade do saldo (proposta 9, Parte I2) empilha — nunca rola de lado: o item numa linha; a quantidade, a observação e o tirar embaixo */ .grade-saldo thead { display: none; } .grade-saldo tr { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borda); } .grade-saldo td { display: block; width: auto; padding: 0; border: 0; } .grade-saldo tr > td:nth-child(2), .grade-saldo tr > td:last-child { width: auto; } .grade-saldo td:first-child { grid-column: 1 / -1; } /* linha de erro reservada: 12px — cabe mais da mensagem nos mesmos 54px */ .erro-form.erro-reservado { font-size: 12px; } /* Central (proposta 7 §A.2, R5): o seletor "Guia: …" no lugar do trilho, com a altura dele (42px); a sub-barra como toda abas-filtro (12px, 1px de respiro) */ .central-topo .central-guias { display: none; } .central-topo .central-seletor { display: flex; } .central-topo .central-cabecalho { gap: 6px; } .central-topo .central-cabecalho > .cabecalho-acoes { margin-left: 0; } /* proposta 11, Parte 4: a faixa de alerta mantém os 36px e só encurta o "para acompanhar" ("{m} acomp."); no Painel, o seletor "Linha: …" (a largura da linha inteira) no lugar das abas-filtro das linhas (5 células não cabem na célula única de até 600px — a barra passaria da tela); em Solicitações, o seletor "Tipo: …" no lugar dos dois cartões */ .central-alerta .alerta-porta { font-size: 13px; } .central-alerta .alerta-acompanhar .acompanhar-completo { display: none; } .central-alerta .alerta-acompanhar .acompanhar-curto { display: inline; } /* proposta 12, Parte E: nos seus, "3 seus · 18 na equipe" (a mensagem curta, a do dono) */ .central-alerta .alerta-msg .msg-completa { display: none; } .central-alerta .alerta-msg .msg-curta { display: inline; } /* e, com o número do outro lado, o "Ver" sai como com o acompanhar (medido a 320px: "8 seus · 18 na equipe" inteiro) */ .central-alerta .alerta-outro:not(:empty) ~ .alerta-ver { display: none; } /* com o acompanhar, o "Ver" sai (a faixa inteira continua o botão, o nome no aria-label): medido a 320px, sem isso "17 críticos" ganhava reticências na faixa de 210px */ .central-alerta .alerta-acompanhar:not(:empty) ~ .alerta-ver { display: none; } .filtros-painel .linhas-painel { display: none; } .filtros-painel .linhas-seletor { display: flex; flex: 1 1 100%; } .solicitacoes-topo .solicitacoes-tipos { display: none; } .solicitacoes-topo .central-seletor { display: flex; } .conteudo .central-secoes a { padding: 5px 1px; font-size: 12px; } /* Minha Página (proposta 7 §B e proposta 8; as regras-base vêm depois, no bloco dela — por isso aqui um seletor a mais, como no topo da Central): o seletor no lugar do trilho (R5); a barra organizacional sem o ícone, com as duas linhas menores (reticências, o completo no `title` da barra), `Seu dia` só com o ícone (alvo de 30×30) e o botão `Organizar` (os completos no aria-label/title); as colunas empilhadas (420px cada) e as portas 2×3, com a altura de sempre (84px: tecla, rótulo e as DUAS linhas da explicação — 29/09/2026: a 76px a segunda linha saía cortada ao meio, a 320px) */ .pagina-topo .central-guias { display: none; } .pagina-topo .central-seletor { display: flex; } .pagina-topo .pagina-saudacao { gap: 8px; padding: 0 10px 0 12px; } .pagina-topo .saudacao-icone { display: none; } .pagina-topo .saudacao-oi { font-size: 15px; } .pagina-topo .saudacao-texto { font-size: 12px; } .pagina-topo .pagina-saudacao .saudacao-organizar { padding: 0 12px; } .pagina-topo .pagina-saudacao .saudacao-seu-dia { width: 30px; height: 30px; padding: 0; justify-content: center; } .pagina-topo .saudacao-seu-dia .rotulo-acao { display: none; } .pagina-topo .saudacao-organizar .org-longo { display: none; } .pagina-topo .saudacao-organizar .org-curto { display: inline; } .conteudo .meu-dia { flex-direction: column; flex-wrap: nowrap; } .conteudo .coluna-dia { flex: none; height: auto; } .conteudo .coluna-dia-lista { overflow: visible; } .conteudo .coluna-dia.recolhida { padding: 8px; } .conteudo .coluna-dia.recolhida .coluna-dia-alternar { flex-direction: row; justify-content: flex-start; padding: 0; } .conteudo .coluna-dia.recolhida .coluna-dia-rotulo { writing-mode: horizontal-tb; } .conteudo .coluna-dia.recolhida .coluna-dia-seta { margin-left: auto; } /* proposta 12, Parte C: as boas-vindas da altura do conteúdo, em cima das cinco faixas */ .conteudo .boas-vindas { flex: none; height: auto; padding: 20px 16px; } .conteudo .guia-explica .explica-longo { display: none; } .conteudo .guia-explica .explica-curto { display: inline; } .modal-organizar .organizar-portas { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 84px; } /* o rodapé dos atalhos em até duas linhas, numa altura fixa (34px): inteiro a 320px, e a troca de item não o mexe */ .modal-organizar .organizar-atalhos { height: 34px; line-height: 17px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Concluídas (proposta 10, D5): a busca na largura inteira, mês e ano lado a lado; a linha em duas faixas (quando e resultado em cima, o corpo embaixo) */ .conteudo .concluidas-filtros { flex-wrap: wrap; } .conteudo .concluidas-filtros .concluidas-busca { flex: 1 1 100%; max-width: none; } .conteudo .concluidas-filtros select { flex: 1 1 0; } .conteudo article.concluida { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 10px 12px; } .conteudo .concluida-quando { flex-direction: row; gap: 6px; align-items: baseline; grid-column: 1; grid-row: 1; } .conteudo .concluida-resultado { grid-column: 2; grid-row: 1; max-width: 150px; } .conteudo .concluida-corpo { grid-column: 1 / -1; grid-row: 2; } .conteudo .concluidas-paginas { gap: 6px; padding: 0 8px; } .conteudo .concluidas-posicao { min-width: 0; font-size: 12px; } .conteudo .concluidas-paginas .btn-estavel { min-width: 0; } /* Lembretes (proposta 10, D6): o dia e as ações na primeira faixa, o corpo embaixo */ .conteudo .lembrete-linha { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 10px 8px 10px 12px; } .conteudo .lembrete-quando { flex-direction: row; gap: 6px; align-items: baseline; grid-column: 1; grid-row: 1; } .conteudo .lembrete-acoes { grid-column: 2; grid-row: 1; } .conteudo .lembrete-corpo { grid-column: 1 / -1; grid-row: 2; } /* Rotinas (proposta 10, D8): o quando e as ações na primeira faixa, o corpo embaixo */ .conteudo .rotina-linha { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 10px 8px 10px 12px; } .conteudo .rotina-quando { flex-direction: row; flex-wrap: wrap; gap: 0 6px; align-items: baseline; grid-column: 1; grid-row: 1; } .conteudo .rotina-acoes { grid-column: 2; grid-row: 1; } .conteudo .rotina-corpo { grid-column: 1 / -1; grid-row: 2; } /* no diálogo, a frequência e o dia um embaixo do outro (lado a lado, "Segunda-feira" não cabe inteiro) */ .rotina-form .rotina-agenda { grid-template-columns: minmax(0, 1fr); } /* proposta 9 §4.3 (Parte I1b): o aviso do Pedido de material, com o diálogo estreito, em quatro linhas fixas */ .rotina-form .rotina-aviso-pedido { height: calc(4 * 1.4em); } .conteudo .escore-celula { padding: 0 10px; } /* proposta 9 §9 (Parte G): a barra do lote só com os ícones (o nome no aria-label/title) e a faixa do pedido sem recuo — com um seletor de classe a mais, para vencer as regras-base da Central de Tarefas (que vêm depois, no arquivo) */ .card > .barra-lote { padding: 0 8px; gap: 6px; } .barra-lote > .lote-contador { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .barra-lote .barra-lote-acoes { gap: 4px; } .lote-contador > .lote-longo { display: none; } /* proposta 11, Parte 4: o Exportar no painel "Mais filtros" e o Selecionar na fileira dos filtros (só o ícone) */ .cabecalho-acoes > .exportar-cabecalho, .cabecalho-acoes > .selecionar-cabecalho { display: none; } .conteudo-cabecalho .filtros-mais .exportar-painel { display: inline-flex; } .conteudo-cabecalho > .filtros > .selecionar-filtros { display: inline-flex; flex: none; width: 34px; height: 34px; padding: 0; } .filtros > .selecionar-filtros .rotulo-acao { display: none; } .conteudo-cabecalho > .filtros > .btn-mais-filtros { flex: none; } .conteudo-cabecalho .btn-mais-filtros .rotulo-mais-filtros { display: none; } .conteudo-cabecalho .btn-mais-filtros .rotulo-mais-curto { display: inline; } /* duas por linha a 320px (288px úteis): Situação | Responsável; Área | Filtros | Selecionar */ .conteudo .conteudo-cabecalho > .filtros:has(> .btn-mais-filtros) > select { flex-basis: 110px; } .lote-contador > .lote-curto { display: inline; } .barra-lote-acoes .btn .rotulo-acao { display: none; } .barra-lote .barra-lote-acoes .btn { padding: 0 8px; } .tabela.tabela-equipe tr.faixa-pedido td { padding-left: 10px; } } /* ---------- Adiar, próxima ação, gestor automático e relatório semanal (proposta 5 §2.5–§2.8 e §4.3–§4.5, Parte F) ---------- Sem cor literal e sem par novo de contraste: texto sobre --superficie-alt/--amarelo-suave e --amarelo sobre --superficie já estão em test/public/contraste.test.js. Sem @media novo: as regras de até 600px do bloco "Próxima ação" moram no @media (max-width: 600px) do cabeçalho de tela, com dois seletores de classe (vencem as regras-base daqui). */ /* "Adiar prazo": o contador {n}/500 não muda de largura enquanto se digita (R4) */ .contador-texto { flex: none; min-width: 7ch; text-align: right; font-variant-numeric: tabular-nums; } /* Visão Geral — bloco "Próxima ação": UMA linha de altura fixa, com ou sem próxima ação (R7); o texto encolhe com reticências (completo no `title`), nunca a linha. Economizar espaço nunca esconde o mais importante (GUIA §1.4 regra 14): o TEXTO (tarefa · responsável · data) tem a prioridade — ocupa o que sobra e nunca fica abaixo de 16ch; o badge de atraso encolhe antes dele e, até 600px, fica compacto ("12d", completo no `title`); o prefixo "Próxima ação: " dá lugar a um ícone e "Ver tarefas"/"Criar tarefa" ficam só com o ícone (nome no `aria-label`/`title`) */ .proxima-acao { display: flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box; padding: 0 12px; margin-bottom: 16px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie-alt); color: var(--texto); font-size: 13px; white-space: nowrap; overflow: hidden; } .proxima-acao.aviso-amarelo { border-color: transparent; background: var(--amarelo-suave); color: var(--amarelo); font-size: 12px; padding: 0 12px; } /* base 0: o texto não disputa a redução com o badge — cresce até ocupar o que sobra e, abaixo de 16ch, quem encolhe é o badge (a medição com base `auto` mostrou o "12d" cortado a 33px enquanto o texto tinha 172px) */ .proxima-acao-texto { flex: 1 1 0; min-width: 16ch; overflow: hidden; text-overflow: ellipsis; } .proxima-acao-icone { display: none; } .proxima-acao > .badge { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .proxima-acao > .badge > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .badge-texto-curto { display: none; } .proxima-acao > .btn-link { flex: none; display: inline-flex; align-items: center; gap: 4px; } /* até 600px: as regras do bloco estão no @media (max-width: 600px) do cabeçalho de tela (acima) */ /* o link dentro do aviso amarelo em --texto (o par --acento/--amarelo-suave não existe) */ .proxima-acao.aviso-amarelo .btn-link { color: var(--texto); text-decoration: underline; } /* Proposta 9 §4.5.5 (C19, Parte I1a) — a linha "Material" da Visão Geral de um acionamento: só de leitura, UMA linha de altura fixa (a mesma do bloco "Próxima ação"), com e sem pedidos; o texto encolhe com reticências (completo no `title`); "Ver pedidos" e o atalho "＋ Pedido de material" não encolhem (até 600px, o atalho só com o ícone) */ .linha-material { display: flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box; padding: 0 12px; margin-bottom: 16px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); color: var(--texto-2); font-size: 13px; white-space: nowrap; overflow: hidden; } .linha-material-icone { display: inline-flex; flex: none; color: var(--texto-3); } .linha-material-texto { flex: 1 1 0; min-width: 10ch; overflow: hidden; text-overflow: ellipsis; color: var(--texto); } .linha-material > a, .linha-material > .btn-link { flex: none; display: inline-flex; align-items: center; gap: 4px; } /* Proposta 9 §4.5.3 (C17) — o item de compra com TRÊS posições: o checkbox (comprado/entregue) e o botão "Não comprado/entregue" (aria-pressed), de largura fixa — marcar não move a linha; o não comprado mostra o motivo abaixo do texto, em --amarelo (estado de atenção, com texto: nunca só a cor; proposta 11, D7 — o vermelho é só atraso) */ .item-compra .btn-nao-comprado { flex: none; white-space: nowrap; } .item-compra .btn-nao-comprado[aria-pressed="true"] { background: var(--amarelo-suave); color: var(--amarelo); border-color: transparent; } .item-compra.nao-comprado .item-texto { color: var(--texto-2); } .item-compra .item-motivo { color: var(--amarelo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Proposta 9 §4.5.3a (C23 (iii-a), Parte I1b) — o pedido atendido na aba Itens: o badge "Atendido" e a frase (quando se conclui sozinho, ou o que o prende) ao lado; a frase quebra linha dentro da aba (nunca estoura a 320 px), e a inteira com a data e a hora fica no title */ .fim-pedido { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13px; color: var(--texto-2); } .fim-pedido .badge { flex: none; } .fim-pedido-texto { min-width: 0; overflow-wrap: anywhere; } /* Proposta 9 §4.5.4 (C18, Parte I2) — o saldo pendente na aba Itens: o botão "Gerar do saldo pendente ({n})" sempre no lugar, à direita do título (desce para a linha de baixo quando não cabe — nunca estoura a 320 px); os badges do item ("saldo na lista {n}", "da lista {n}", "dispensado") não encolhem; a grade do saldo com as entradas na largura da célula */ .itens-cabecalho { flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .itens-cabecalho .secao-titulo { margin-bottom: 0; } .item-compra > .badge { flex: none; } .grade-saldo td { vertical-align: middle; } .grade-saldo td:nth-child(2) { width: 120px; } .grade-saldo td:last-child { width: 40px; } .grade-saldo input { width: 100%; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); color: var(--texto); } /* Proposta 9 §4.3 (Parte I2) — Solicitações › Material: a situação do pedido (o badge) e, no Atendido, a frase numa segunda linha com reticências (a inteira no title); o texto da tarefa aberta numa linha com reticências */ .situacao-pedido { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; max-width: 220px; } .situacao-pedido .badge { flex: none; } .situacao-pedido-frase, .celula-tarefa-texto { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .celula-tarefa-texto { max-width: 260px; } /* elemento com o lugar reservado: some sem mover o que vem depois (R9) */ .reservado-oculto { visibility: hidden; } /* linha de erro com o lugar reservado (`linhaErro()` de ui.js, em todo formulário que a alterna): ALTURA FIXA de 54px (duas linhas de 13px + padding), nunca mínima — o erro aparecer, sumir ou ter 3–4 linhas (mensagem longa do servidor num modal sm a 375px) não move o rodapé; a mensagem longa rola dentro da própria linha e fica completa no `title` (`mostrarErroEm`). Com `.reservado-oculto`, nunca `.oculto` */ .erro-form.erro-reservado { height: 54px; overflow-y: auto; } /* a mensagem continua abaixo da parte visível (`marcarTransbordo` de ui.js): a última linha esmaece — na tela de toque, sem barra de rolagem visível nem `title` no hover, é a pista de que há mais texto; some ao rolar até o fim */ .erro-form.erro-reservado.erro-transborda { -webkit-mask-image: linear-gradient(to bottom, var(--texto) calc(100% - 18px), transparent); mask-image: linear-gradient(to bottom, var(--texto) calc(100% - 18px), transparent); } /* Gestor automático */ .gestor-conteudo { min-width: 0; } /* os filtros da Atividade: no topo da área de conteúdo (o cabeçalho é o mesmo nas duas abas — GUIA §1.4 regra 13) */ .gestor-filtros { align-items: flex-start; min-width: 0; max-width: 100%; margin-bottom: 16px; } .gestor-card + .gestor-card { margin-top: 16px; } .gestor-horarios { display: flex; flex-direction: column; gap: 12px; } .gestor-linha { flex-wrap: wrap; gap: 8px; } .gestor-linha input[type="time"], .gestor-linha select, .param-numero { height: 32px; padding: 0 8px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); } .param-numero { width: 64px; font-variant-numeric: tabular-nums; } .gestor-parametros { display: flex; flex-wrap: wrap; gap: 8px 12px; } .param { display: inline-flex; align-items: center; gap: 6px; } .gestor-regras td { vertical-align: top; } .gestor-regras td:first-child .check { padding-top: 2px; } .gestor-previa { display: flex; flex-direction: column; gap: 12px; } .previa-item + .previa-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borda); } .previa-item .pequeno { margin-top: 4px; } .previa-resumo { margin: 6px 0 0; white-space: pre-wrap; font-family: inherit; font-size: 12px; color: var(--texto-2); } /* Relatório semanal: seções em cards, uma embaixo da outra; rodapé fixo em texto secundário */ .relatorio-secao + .relatorio-secao { margin-top: 16px; } .relatorio-rodape { margin: 16px 0 0; font-size: 12px; color: var(--texto-3); } /* ---------- Proposta 6 (Parte G): prazos, sequência e conclusão ---------- Sem cor literal e sem par novo de contraste (--texto-2/--texto-3 sobre --superficie e o toast de sempre); sem @media novo. Nada dança: a segunda linha do prazo (`orig.`) e o `Resultado:` são dado da linha, não alternância. */ /* Sequência (§2.9): a tarefa em espera aparece apagada — o texto em --texto-2, a cor de "apagado" que já existe */ .tabela tr.em-espera td, .item.em-espera .item-texto { color: var(--texto-2); } /* `Aguarda: {A}` com reticências até 24ch (o completo no `title`) e o `+{n}` sempre inteiro */ .badge-aguarda { max-width: 24ch; min-width: 0; } .badge-aguarda-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-anterior { height: 30px; max-width: 100%; } /* a linha do tempo (`Sequência — {texto}`) e o histórico do prazo: lista vertical, a tarefa atual em negrito */ .linha-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .linha-tempo li { line-height: 20px; overflow-wrap: anywhere; } .linha-tempo li.atual { font-weight: 600; } /* célula do prazo: a data e, embaixo, `orig. {dd/mm}` (§1.11) */ .celula-prazo { display: inline-flex; flex-direction: column; line-height: 1.3; } .orig-prazo { font-size: 11px; color: var(--texto-3); font-family: inherit; white-space: nowrap; } /* `Resultado: {resultado}` da tarefa concluída (§3.4): uma linha, reticências, completo no `title` */ .linha-resultado { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Proposta 9 §9 (C12, Parte G) — a Central de Tarefas da equipe. A barra do lote fica SEMPRE no lugar, com altura fixa (44px), no topo do card da lista: marcar uma linha só muda o contador (`tabular-nums`, largura fixa) e o estado dos botões — nada se move (GUIA §1.4). Até 1120px os botões ficam só com o ícone (o nome no `aria-label`/`title`); até 600px o contador fica curto e o "Exportar" do cabeçalho passa para ela. A coluna da seleção tem 36px; o cabeçalho do bloco de cada pessoa (visão Por pessoa) é uma linha da própria tabela, com a carga em badges (o vermelho das vencidas só com o número do servidor); a faixa do pedido de prazo que quem lê decide é outra linha, sob a da tarefa, com os botões de `acoesDoPedido`. As regras de até 600px moram no @media de até 600px do cabeçalho de tela (acima). */ .barra-lote { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--borda); background: var(--superficie-alt); overflow: hidden; } .lote-contador { flex: none; min-width: 15ch; font-size: 13px; font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .lote-curto { display: none; } .barra-lote-acoes { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; } .barra-lote-acoes .btn { flex: none; } .tabela .col-selecao { width: 36px; padding-right: 0; } /* a tabela da equipe tem duas colunas a mais (a seleção e as ações da linha): vãos de 10px e as ações quebrando em até 176px (duas fileiras na linha que tem prazo, andamento, cobrar, editar e remover) — cabe a 1366px sem rolar */ .tabela-equipe th, .tabela-equipe td { padding-left: 10px; padding-right: 10px; } .tabela-equipe td:last-child > .linha { flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 176px; margin-left: auto; } .tabela tr.grupo-pessoa td { background: var(--fundo); padding: 8px 14px; } .grupo-pessoa-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; } .grupo-pessoa-nome { font-weight: 600; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .carga { display: flex; flex-wrap: wrap; gap: 4px; } .carga-item { font-size: 12px; font-variant-numeric: tabular-nums; } .carga-item b { font-weight: 700; } .tabela tr.faixa-pedido td { background: var(--fundo); padding: 6px 14px 10px 64px; border-top: 0; } .faixa-pedido-conteudo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; } .faixa-pedido-texto { min-width: 0; flex: 0 1 auto; max-width: 72ch; overflow-wrap: anywhere; } .faixa-pedido-texto > svg { vertical-align: -2px; } /* até 1120px (medido: com rótulos a barra pede ~660px — cabe a partir de ~1030px com o menu lateral) os botões do lote ficam só com o ícone, o nome no aria-label/title */ @media (max-width: 1120px) { .barra-lote .barra-lote-acoes .btn .rotulo-acao { display: none; } .barra-lote .barra-lote-acoes .btn { padding: 0 8px; } } /* Proposta 11, Parte 4 (D14) — a Central de Tarefas mais clara. A barra do lote só existe no modo "Selecionar" (no topo do card; marcar uma linha só muda o contador e os botões). O concluir da linha é o botão REDONDO "✓" (`.btn-concluir-linha`, 28px, a borda e o ✓ em --texto-3; ao passar o mouse só a cor — --verde; feito, cheio de --verde com o ✓ em --sobre-semantica), na sua coluna de 44px — nunca parecido com o quadradinho da seleção, que fica na primeira coluna e só no modo "Selecionar". "Andamento" (`.btn-andamento`) com o lápis e o balão e, acima de 1000px, a palavra. "Mais filtros (n)" (`.btn-mais-filtros`, aceso — `.com-ativos` — com algum filtro recolhido fora do padrão) abre o painel `.filtros-mais` na linha de baixo da fileira (o último item, 100% da largura: só o clique o abre — nada pula ao carregar nem ao passar o mouse). "Selecionar" mora no resumo acima de 600px e na fileira dos filtros até 600px; o "Exportar", no resumo acima de 600px e no painel até 600px (o CSS mostra um ou outro). Pares de contraste que já estão no teste: --texto-3/--texto-2 sobre --superficie, --sobre-semantica sobre --verde, --acento-forte sobre --acento-suave. */ .so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; } .tabela-equipe .col-concluir { width: 44px; padding-right: 0; } /* o nome da coluna só para o leitor de tela: a célula é o bloco de referência (o texto recortado nunca sai da tabela que rola) */ .tabela-equipe th:has(> .so-leitor) { position: relative; } .btn-concluir-linha { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; flex: none; border: 2px solid var(--texto-3); border-radius: 50%; background: var(--superficie); color: var(--texto-3); cursor: pointer; } .btn-concluir-linha:hover:not(:disabled) { border-color: var(--verde); color: var(--verde); } .btn-concluir-linha.feito { background: var(--verde); border-color: var(--verde); color: var(--sobre-semantica); } .btn-concluir-linha:disabled { cursor: not-allowed; opacity: .45; } .btn-concluir-linha:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acento-suave); } .btn-andamento { gap: 4px; } .btn-mais-filtros { height: 34px; padding: 0 12px; gap: 6px; border: 1px solid var(--borda); background: var(--superficie); } .btn-mais-filtros.com-ativos, .btn-mais-filtros.ativo { background: var(--acento-suave); color: var(--acento-forte); border-color: transparent; } .filtros > .selecionar-filtros { display: none; } /* os três selects à vista dividem o que sobra da fileira (base de 140px, até 200px) — nunca empurram o "Mais filtros" para a linha de baixo a 1366px (medido: as abas 428 + o botão 122 + os vãos deixam 473px) */ .conteudo-cabecalho > .filtros:has(> .btn-mais-filtros) > select { flex: 1 1 140px; min-width: 0; max-width: 200px; text-overflow: ellipsis; } .cabecalho-acoes > .selecionar-cabecalho[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento-forte); } .filtros-mais { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-sm); } .filtros-mais .exportar-painel { display: none; } .btn-mais-filtros .rotulo-mais-curto { display: none; } .filtros-mais > select { flex: 1 1 150px; min-width: 0; max-width: 240px; text-overflow: ellipsis; } .filtros-mais > .tabs-filtro { flex: none; } @media (max-width: 1000px) { .btn-andamento .rotulo-andamento { display: none; } .btn-andamento { width: 26px; padding: 0; } } .lista-recusas { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; overflow-wrap: anywhere; } /* toast com ação (`toast(msg, tipo, { acao })`, §3.2): o botão no próprio toast (o `#toasts` é fixo — nada da página se move) */ .toast .acao { margin-left: 12px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; } /* Tela "Pedidos de prazo" (§1.13): o motivo numa linha, com reticências (completo no `title`); a tabela rola dentro do card (`.tabela-wrap`), nunca a página */ .tabela-prazos .pedido-motivo { max-width: 32ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tabela-prazos td .badge + .badge, .tabela-prazos td .negrito + .badge { margin-top: 4px; } .acoes-pedido .btn { white-space: nowrap; } .tabela-prazos td.mono { white-space: nowrap; } /* "Concluir tarefa" (§3.2): o contador {n}/2000 não muda de largura enquanto se digita (R4); o link ocupa o que sobra da linha `ou link` · campo · `+ link` (o botão e o rótulo inteiros) */ .concluir-tarefa .contador-texto { min-width: 9ch; } .linha-link-anexo input { flex: 1 1 0; min-width: 0; } .linha-link-anexo > span, .linha-link-anexo > .btn { flex: none; white-space: nowrap; } /* ---------- Ferramentas (proposta 8, Parte C; GUIA §3.32) ---------- O layout do Gestor Pro: a lista dos grupos à esquerda, de ALTURA FIXA e rolagem própria (abrir um grupo ou procurar não muda o tamanho de nada — GUIA §1.4), e o cartão à direita. A lista fica presa no topo ao rolar (sticky); a altura é a da tela menos a topbar, o respiro da `.conteudo` (24 + 24) e a faixa do resumo (36 + 20). Até 860px, empilhados: a lista em cima com 280px e a mesma rolagem própria. Cores só por token: os desenhos (ferramentasDesenhos.js) levam classes, pintadas aqui. */ .ferr { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; } .ferr-nav { position: sticky; top: calc(var(--topbar-h) + 16px); height: max(320px, calc(100vh - var(--topbar-h) - 104px)); display: flex; flex-direction: column; gap: 8px; min-width: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 10px; } .ferr-procura { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--fundo); outline: none; } .ferr-procura:focus { border-color: var(--acento); background: var(--superficie); box-shadow: 0 0 0 3px var(--acento-suave); } .ferr-lista { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; } /* Grupo × item (proposta 9, itens 5a e 5b; GUIA §3.32): o GRUPO é cabeçalho — 40px, o ícone do grupo num quadro de 26px, o nome a 13.5px/600 em --texto e o contador numa pílula de largura mínima fixa (dígitos tabulares); aberto, o quadro do ícone em --acento-suave/--acento-forte. O ITEM fica recuado sob ele (o bloco .ferr-subitens começa no centro do quadro do ícone, com a linha-guia de 1px em --borda; o recuo é o mínimo — a lista tem 260px e o título longo precisa do espaço, o completo no `title`), mais leve (12.5px/400 em --texto-2) e com marcador (um ponto de 5px em --texto-3); o ativo, --acento-suave com o texto --acento-forte, o ponto e o filete no --destaque — sem negrito (GUIA §1.4). Alturas fixas (40/32px): abrir, fechar ou escolher não muda o tamanho de nada. Pares de contraste já no teste: --texto/--texto-2/--texto-3 sobre --superficie e --fundo, --acento-forte sobre --acento-suave. */ .ferr-grupo + .ferr-grupo { border-top: 1px solid var(--borda); } .ferr-grupo-botao { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 6px; background: none; border: 0; cursor: pointer; font-size: 13.5px; font-weight: 600; text-align: left; color: var(--texto); border-radius: var(--raio-sm); } .ferr-grupo-botao:hover { background: var(--fundo); } .ferr-grupo-icone { display: flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: var(--raio-sm); background: var(--fundo); color: var(--texto-2); } .ferr-grupo.aberto .ferr-grupo-icone { background: var(--acento-suave); color: var(--acento-forte); } .ferr-grupo-nome { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ferr-grupo-total { flex: none; min-width: 3ch; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--fundo); font-size: 11.5px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; color: var(--texto-2); font-weight: 600; } .ferr-subitens { margin: 0 0 6px 18px; padding-left: 4px; border-left: 1px solid var(--borda); } .ferr-item { display: block; width: 100%; height: 32px; padding: 0 8px; text-align: left; background: none; border: 0; border-radius: var(--raio-sm); cursor: pointer; font-size: 12.5px; font-weight: 400; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ferr-item::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 7px; vertical-align: middle; border-radius: 999px; background: var(--texto-3); } .ferr-item:hover { background: var(--fundo); color: var(--texto); } /* ativo sem negrito (GUIA §1.4): o fundo, o ponto e o filete à esquerda marcam o escolhido */ .ferr-item.ativo { background: var(--acento-suave); color: var(--acento-forte); box-shadow: inset 3px 0 0 var(--destaque); } .ferr-item.ativo::before { background: var(--destaque); } .ferr-achado { padding: 2px 0; } .ferr-achado-grupo { display: flex; align-items: center; gap: 6px; margin: 6px 10px 0; font-size: 11.5px; font-weight: 600; color: var(--texto-2); } .ferr-achado-icone { display: flex; flex: none; color: var(--texto-3); } .ferr-sem-achado { margin: 6px 4px; font-size: 12.5px; color: var(--texto-3); } .ferr-corpo { min-width: 0; } .ferr-cartao { padding: 16px 18px; min-width: 0; } .ferr-titulo { font-size: 15px; margin: 0 0 10px; } .ferr-intro { font-size: 12.5px; color: var(--texto-2); margin: 0 0 8px; } .ferr-linha { display: flex; flex-wrap: wrap; gap: 8px; } .ferr-linha + .ferr-linha { margin-top: 8px; } .ferr-campo { flex: 1 1 90px; min-width: 90px; } .ferr-campo-largo { flex: 2 1 170px; min-width: 150px; } .ferr-campo input, .ferr-campo select { width: 100%; min-width: 0; } .ferr-calcular { margin-top: 12px; } .ferr-res { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; min-height: 30px; } .ferr-res-texto { flex: 1; min-width: 0; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; } .ferr-res-texto strong { font-weight: 700; font-variant-numeric: tabular-nums; } /* o "Copiar" guarda o lugar mesmo sem resultado (aparecer não empurra o texto) */ .ferr-copiar.sem-resultado { visibility: hidden; } .ferr-nota { font-size: 11.5px; color: var(--texto-3); line-height: 1.45; margin-top: 4px; } .ferr-texto { font-size: 12.5px; margin: 0 0 8px; } p.ferr-nota { margin: 8px 0 0; } .ferr-desenho { margin: 0 0 10px; padding: 8px; text-align: center; background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: var(--raio-sm); } .ferr-desenho svg { display: inline-block; width: 100%; height: auto; vertical-align: middle; } /* a legenda do pé é texto da página (quebra linha em qualquer largura), não um do desenho */ .ferr-desenho-legenda { margin-top: 4px; font-size: 11px; color: var(--texto-2); } .ferr-desenho .tr { stroke: var(--texto); } .ferr-desenho .tr-leve { stroke: var(--texto-3); } .ferr-desenho .co1 { stroke: var(--destaque); } .ferr-desenho .co2 { stroke: var(--acento); } .ferr-desenho .tx0 { fill: var(--texto); } .ferr-desenho .tx1 { fill: var(--destaque); } .ferr-desenho .tx2 { fill: var(--acento); } .ferr-desenho .leg { fill: var(--texto-2); } .ferr-desenho .f1 { fill: var(--acento-suave); } .ferr-desenho .f2 { fill: var(--acento-suave-hover); } .ferr-desenho .f3, .ferr-desenho .t3 { fill: var(--borda); } .ferr-desenho .t1, .ferr-desenho .t2 { fill: var(--destaque-suave); } .ferr-desenho .vazio { fill: var(--superficie); } .ferr-desenho .sem { fill: none; } .ferr-perfil { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 6px 10px; background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: var(--raio-sm); } .ferr-desenho-secao { flex: none; width: 46px; height: 46px; } .ferr-desenho-secao svg { width: 46px; height: 46px; display: block; } .ferr-perfil span { flex: 1; min-width: 0; font-size: 11.5px; color: var(--texto-2); } .ferr-perfil .pf { fill: var(--acento-suave-hover); stroke: var(--texto-2); stroke-width: 2; stroke-linejoin: round; } .ferr-perfil .furo { fill: var(--superficie-alt); } /* tabelas de consulta: compactas, como lá (a linha de 50px da `.tabela` mostraria três bitolas por tela); a que rola tem o cabeçalho preso, e toda uma rola na horizontal dentro do cartão — a página nunca passa da largura da tela */ .ferr-tabela-bloco { min-width: 0; } .ferr-tabela-titulo { font-size: 12px; font-weight: 600; margin: 0 0 4px; } .ferr-tabela-rola { overflow: auto; max-width: 100%; } .ferr-tabela { width: 100%; max-width: 560px; border-collapse: collapse; font-variant-numeric: tabular-nums; } .ferr-tabela[style*="min-width"] { max-width: none; } .ferr-tabela th { position: sticky; top: 0; z-index: 1; background: var(--superficie); text-align: left; white-space: nowrap; padding: 7px 10px; font-size: 11px; font-weight: 600; color: var(--texto-3); border-bottom: 1px solid var(--borda); } .ferr-tabela td { padding: 6px 10px; font-size: 12.5px; border-bottom: 1px solid var(--borda); } .ferr-tabela tr:last-child td { border-bottom: 0; } .ferr-tabela .ferr-centro { text-align: center; } .ferr-tabela .ferr-dir { text-align: right; } .ferr-tabela .ferr-destaque { color: var(--acento-forte); } .ferr-lado-a-lado { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; } .ferr-lado-a-lado > .ferr-tabela-bloco { flex: 1 1 240px; max-width: 340px; } .ferr-res-texto .ferr-tabela-rola { margin: 2px 0 4px; } .ferr-res-texto .ferr-tabela { max-width: 420px; } .ferr-aparelhos { margin-top: 2px; border: 1px solid var(--borda); border-radius: var(--raio-sm); } .ferr-aparelhos td { font-size: 12px; padding: 4px 8px; } .ferr-mini { width: 60px; height: 28px; padding: 0 6px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); outline: none; } .ferr-mini:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); } @media (max-width: 860px) { .ferr { grid-template-columns: minmax(0, 1fr); } .ferr-nav { position: static; height: 280px; } } /* ---------- Minha Página (proposta 7 §B; proposta 8, itens 8 e 10; GUIA §3.30) ---------- O topo (minhaPagina.js › topoDaPagina) é do shell, a MESMA instância enquanto se está na página: a BARRA ORGANIZACIONAL (64px — o dobro da pílula de antes —, a largura inteira da área de trabalho, sem invadir a barra lateral) e o trilho de 5 guias (proposta 10, D1 — o Mural saiu: grade de células IGUAIS que nunca rola: 5 colunas acima de 700px — o maior pedido é "Lembretes" com o contador, 65,9 + 12 de respiro + 4 + 28 = 109,9px, e a célula mais estreita é a de 961px com a sidebar: (961 − 17 − 240 − 48 − 8 − 16) / 5 = 126,4px; a 701px, sem ela, 125,6px —, 3 (3 + 2) de 601 a 700px, o seletor `Guia: …` até 600px — R5, regra 16). A guia ativa (`.ativa`, `aria-current`) é a de `?guia=`; as que ainda não chegaram são `span.central-guia.desabilitada` (sem link, `aria-disabled`, o motivo no `title`), do mesmo tamanho. Sem placar: o número de cada coluna fica na cabeça dela (item 10). A barra tem QUATRO estados de cor (proposta 9, item 4b; proposta 11, D3 — o vermelho é só atraso): antes do primeiro resumo, neutra (--superficie, o botão invisível no lugar dele — nunca uma cor de estado falsa); com atrasadas (`.atrasado`, `estadoDaBarra` de minhaPagina.js), a cor da faixa de críticos da Central em estado vermelho (`.central-alerta.vermelho`): fundo --vermelho-suave, borda da mesma cor e texto --vermelho, CHAPADO, o ícone de alerta e, com itens na Entrada, o "Organizar agora" em pílula --superficie com o texto e a borda --vermelho; com itens na Entrada e nada atrasado (`.pendente`), o degradê AZUL-ROYAL → VIOLETA (--organizar-pendente-inicio → -fim, 90°) com o texto em --sobre-organizar-pendente e o "Organizar agora" em pílula branca (.btn-organizar: --organizar-botao com o texto --sobre-organizar-botao, a cor da faixa); com a Entrada vazia e nada atrasado (`.limpo`), a cor da faixa de críticos em estado verde (`.central-alerta.verde`: --verde-suave, --verde), o ícone de concluído e sem o botão. O botão aparece só com itens na Entrada (`.com-entrada`): no atrasado sem Entrada ele sai, como no limpo. 01/10/2026 (o pedido do dono: padronizar com a faixa de críticos da Central): o vermelho e o verde da barra deixaram de ser o degradê vivo de texto branco e passaram a ser os MESMOS tokens de estado da faixa de críticos — o par já está em test/public/contraste.test.js e muda sozinho com o modo e com o Alto contraste. Só o `.pendente` (que a faixa de críticos não tem) segue em degradê. 30/09/2026 (o pedido do dono, com a imagem): a barra é uma PÍLULA (border-radius 999px; o ícone, o texto e o botão ficam dentro da curva — até 600px o texto, a 12px, já começa depois dela); o `.pendente` vai até a borda (borda transparente, fundo em border-box — sem filete de outra cor) e a linha do estado é negrito. O círculo do ícone é --superficie (no `.pendente`, --organizar-botao) com a cor do estado por cima. A altura, o lugar e as margens não mudam — só a cor, os textos, o ícone e o botão (que fica no lugar, `visibility`, fora do `.limpo`); as duas linhas têm reticências (o completo no `title`). O foco é contornado na cor do estado (no `.pendente`, na cor do texto). --vermelho sobre --vermelho-suave (o número do Hoje com atrasadas), --texto-3 sobre --fundo-coluna (guia desabilitada; sem `opacity`) e --texto/--texto-3 sobre --superficie e --superficie-alt (colunas e portas) já estão no teste. */ .pagina-topo { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; min-width: 0; } .pagina-saudacao { display: flex; align-items: center; gap: 12px; height: 64px; min-width: 0; padding: 0 14px 0 14px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--texto); white-space: nowrap; } .pagina-saudacao.atrasado { border-color: var(--vermelho-suave); color: var(--vermelho); background: var(--vermelho-suave); } .pagina-saudacao.pendente { border-color: transparent; color: var(--sobre-organizar-pendente); background: linear-gradient(90deg, var(--organizar-pendente-inicio), var(--organizar-pendente-fim)) border-box; } .pagina-saudacao.limpo { border-color: var(--verde-suave); color: var(--verde); background: var(--verde-suave); } .saudacao-icone { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--fundo); color: inherit; } .pagina-saudacao.atrasado .saudacao-icone { background: var(--superficie); color: var(--vermelho); } .pagina-saudacao.pendente .saudacao-icone { background: var(--organizar-botao); color: var(--organizar-pendente-inicio); } .pagina-saudacao.limpo .saudacao-icone { background: var(--superficie); color: var(--verde); } .saudacao-textos { display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: 1 1 0; min-width: 0; } .saudacao-oi, .saudacao-texto { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .saudacao-oi { font-size: 17px; font-weight: 700; line-height: 22px; } .saudacao-texto { font-size: 13px; line-height: 18px; color: var(--texto-2); } .pagina-saudacao.atrasado .saudacao-texto, .pagina-saudacao.pendente .saudacao-texto, .pagina-saudacao.limpo .saudacao-texto { color: inherit; font-weight: 600; } .pagina-saudacao .saudacao-organizar { flex: none; height: 38px; padding: 0 20px; border-radius: 999px; visibility: hidden; } .pagina-saudacao.pendente .saudacao-organizar, .pagina-saudacao.atrasado.com-entrada .saudacao-organizar { visibility: visible; } .pagina-saudacao.limpo .saudacao-organizar, .pagina-saudacao.atrasado:not(.com-entrada) .saudacao-organizar { display: none; } .btn-organizar { background: var(--organizar-botao); color: var(--sobre-organizar-botao); border-color: var(--organizar-botao); font-weight: 600; } .btn-organizar:hover, .btn-organizar[aria-disabled="true"]:hover { background: var(--organizar-botao-hover); } .pagina-saudacao.atrasado .btn-organizar { background: var(--superficie); color: var(--vermelho); border-color: var(--vermelho); } .pagina-saudacao.atrasado .btn-organizar:hover { background: var(--vermelho-suave); } .pagina-saudacao.atrasado :focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; } .pagina-saudacao.pendente :focus-visible { outline: 2px solid var(--sobre-organizar-pendente); outline-offset: 2px; } .pagina-saudacao.limpo :focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; } .pagina-saudacao .saudacao-seu-dia { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 0 4px; color: inherit; font-weight: 600; } /* proposta 11, Parte 5: sem a conversa do gestor o "Seu dia" não aparece — no lugar (o Organizar não anda) */ .pagina-saudacao .saudacao-seu-dia.sem-conversa { visibility: hidden; } .saudacao-organizar .org-curto { display: none; } .pagina-topo .central-guias { grid-template-columns: repeat(5, minmax(0, 1fr)); } .central-guia.desabilitada { color: var(--texto-3); cursor: not-allowed; } .central-guia.desabilitada:hover { color: var(--texto-3); } /* Meu dia: acima de 600px as colunas com itens têm ALTURA FIXA — a lista rola por dentro (a sarjeta da barra reservada), então item que chega ou sai não move nada fora da coluna (GUIA §1.4). A fileira (flex com quebra): 5 colunas numa linha acima de 1300px; até 1300px a base de 1/3 da largura e até 900px de 1/2 (a linha que sobra se divide entre as que ficam nela); até 600px empilhadas, cada uma da altura do conteúdo. Proposta 11, Parte 3 (item 8 do pacote): a coluna VAZIA fica recolhida (`.recolhida`) — acima de 600px uma faixa VERTICAL de 44px (`Agendado · 0`, a altura da fileira) que dá a largura às outras; até 600px uma faixa horizontal de 44px; o toque na faixa a abre (e a cabeça a recolhe de novo). A largura só muda quando a coluna passa de vazia a não vazia, ou ao toque — nunca ao passar o mouse (o hover da faixa é só cor). Proposta 12, Parte C: com TODAS vazias, as cinco recolhidas e a largura às BOAS-VINDAS (`.boas-vindas`: a altura de uma coluna acima de 600px; em cima das faixas até lá); a frase de cada coluna no "?" ao lado do título (`.coluna-dia-titulo`, o `.btn-ajuda` de 24px) e, na vazia aberta, inteira embaixo do vazio (`.coluna-dia-explica`) — nunca mais o rodapé cortado com reticências. Capturar é o da barra do topo (proposta 8, D7). A cabeça (30px) tem o título (14px/700) e o NÚMERO em destaque (item 10): pílula de 44 × 28px — largura FIXA, que cabe o `99+` a 15px/700 com dígitos tabulares; o número mudar nunca mexe no título. Cor: --acento-forte sobre --acento-suave com itens, --verde sobre --verde-suave vazia, --vermelho sobre --vermelho-suave no Hoje com atrasadas. */ .meu-dia { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; min-width: 0; } .coluna-dia { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; height: 526px; min-width: 0; padding: 8px; background: var(--fundo-quadro); box-shadow: var(--sombra-quadro); border-radius: var(--raio-sm); } /* a cabeça da coluna vazia é um botão (abre e recolhe): o título, o " · 0" (só recolhida), a pílula e a seta */ .coluna-dia-cabecalho h3 .coluna-dia-alternar { display: flex; align-items: center; gap: 8px; width: 100%; height: 100%; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .coluna-dia-cabecalho h3.com-alternar { flex: 1; align-self: stretch; overflow: visible; } .coluna-dia-alternar:hover { color: var(--acento-forte); } .coluna-dia-alternar:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acento-suave); } .coluna-dia-rotulo { display: flex; align-items: baseline; min-width: 0; } .coluna-dia-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .coluna-dia-alternar .contador-coluna { margin-left: auto; } .coluna-dia-zero { display: none; flex: none; color: var(--texto-3); font-weight: 600; } .coluna-dia-seta { flex: none; display: inline-flex; color: var(--texto-3); transform: rotate(90deg); } .coluna-dia-seta svg { width: 14px; height: 14px; } .coluna-dia.recolhida .coluna-dia-seta { transform: rotate(-90deg); } .coluna-dia.recolhida .coluna-dia-lista, .coluna-dia.recolhida .coluna-dia-alternar .contador-coluna { display: none; } .coluna-dia.recolhida .coluna-dia-zero { display: inline; } /* acima de 600px, a faixa vertical: 44px de largura, a altura da fileira (a de uma coluna, ou a do texto numa fileira só de faixas); o texto de cima para baixo */ .coluna-dia.recolhida { flex: 0 0 44px; height: auto; padding: 8px 0; } .coluna-dia.recolhida:hover { background: var(--realce-quadro); } .coluna-dia.recolhida .coluna-dia-cabecalho { flex: 1 1 auto; height: auto; align-items: stretch; } /* o botão fica na escrita de sempre (a altura dele é a da faixa, definida pela fileira) e só o rótulo gira: um rótulo girado sem altura definida mediria a altura da janela */ .coluna-dia.recolhida .coluna-dia-alternar { flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 2px 0; } .coluna-dia.recolhida .coluna-dia-rotulo { writing-mode: vertical-rl; } .coluna-dia-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; flex: none; } .coluna-dia-cabecalho h3 { min-width: 0; margin: 0; font-size: 14px; font-weight: 700; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* o título e o "?" da coluna (proposta 12, Parte C): o "?" de 24px colado ao título; o título cede com reticências */ .coluna-dia-titulo { display: flex; align-items: center; gap: 2px; min-width: 0; } .coluna-dia-titulo .btn-ajuda { width: 24px; height: 24px; } .coluna-dia-titulo .btn-ajuda svg { width: 15px; height: 15px; } /* o "Ver Entrada" do fim do "Organizar agora" leva o foco à coluna: o anel do acento, sem mudar de tamanho */ .coluna-dia:focus { outline: none; box-shadow: 0 0 0 3px var(--acento-suave); } .contador-coluna { flex: none; width: 44px; height: 28px; border-radius: 999px; font-size: 15px; line-height: 28px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; background: var(--acento-suave); color: var(--acento-forte); } .contador-coluna.vazia { background: var(--verde-suave); color: var(--verde); } .contador-coluna.alerta { background: var(--vermelho-suave); color: var(--vermelho); } /* proposta 11, Parte 5: no Hoje com atrasadas, a legenda ao lado do número (`8 · 2 atrasadas`) — a pílula cresce para a legenda (a cabeça tem 30px e o título cede com reticências); sem atrasadas, a pílula de 44px de sempre */ .contador-coluna.com-legenda { width: auto; min-width: 44px; padding: 0 12px; white-space: nowrap; } .contador-coluna-legenda { font-size: 12px; font-weight: 600; } .coluna-dia-lista { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; } .coluna-dia-lista .vazio { padding: 18px 0; } @media (max-width: 1300px) { .meu-dia > .coluna-dia:not(.recolhida) { flex-basis: calc((100% - 16px) / 3); } } @media (max-width: 900px) { .meu-dia > .coluna-dia:not(.recolhida) { flex-basis: calc((100% - 8px) / 2); } } /* a frase da coluna vazia aberta (proposta 12, Parte C): inteira, embaixo do vazio */ .coluna-dia-explica { margin: 0; padding: 0 6px; font-size: 12px; line-height: 17px; color: var(--texto-3); text-align: center; overflow-wrap: anywhere; } /* as boas-vindas do "Meu dia" vazio (proposta 12, Parte C): no lugar da largura das colunas (recolhidas ao lado), com a altura de uma coluna — abrir uma faixa não muda a altura da fileira */ .boas-vindas { flex: 1 1 0; min-width: 0; height: 526px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: var(--fundo-quadro); box-shadow: var(--sombra-quadro); border-radius: var(--raio-sm); } .boas-vindas-icone { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--acento-suave); color: var(--acento-forte); } .boas-vindas h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--texto); } .boas-vindas p { margin: 0; max-width: 54ch; color: var(--texto-2); line-height: 1.5; } .boas-vindas strong { color: var(--texto); } .boas-vindas a { color: var(--acento-forte); text-decoration: underline; text-underline-offset: 2px; } .ficha-dia { display: flex; flex-direction: column; gap: 4px; flex: none; min-width: 0; padding: 7px 9px; font-size: 12.5px; background: var(--superficie); border: 1px solid var(--borda); border-left-width: 3px; border-radius: 8px; } .ficha-dia.captura { border-left-color: var(--acento); } /* o lembrete do dia no Hoje (proposta 10, D6): o filete do que vence hoje; o vencido fica com o vermelho (a regra de baixo) */ .ficha-dia.lembrete { border-left-color: var(--destaque); } .ficha-dia.vence-hoje { border-left-color: var(--destaque); } .ficha-dia.vencida { border-left-color: var(--vermelho); } /* a captura que você delegou e quem recebeu concluiu: espera a sua ciência (proposta 8, item 13) */ .ficha-dia.captura.concluida { border-left-color: var(--verde); } .ficha-texto { font-weight: 600; color: var(--texto); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Proposta 11, Parte 2: o cartão clicável — o texto é um botão sem moldura (o foco do teclado chega nele e ganha o anel do acento); o cartão inteiro tem a mão e, ao passar o mouse, só a borda muda de cor (nada muda de tamanho nem de lugar) */ .ficha-dia.clicavel { cursor: pointer; } .ficha-dia.clicavel:hover { border-top-color: var(--acento); border-right-color: var(--acento); border-bottom-color: var(--acento); } .ficha-abrir { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 4px; } .ficha-abrir:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acento-suave); } .ficha-dia.clicavel:hover .ficha-texto { color: var(--acento-forte); } .ficha-meta { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .ficha-meta .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Proposta 11, Parte 3 (item 2 do pacote): as ações com PALAVRAS — o botão principal (`.ficha-principal`: texto e ícone, 26px, no acento suave — a altura do botão de prazo), o botão de prazo de sempre e, à direita, o ⋯ (26 × 26) com as outras pelo nome. Quebram linha dentro do cartão: nunca rolagem horizontal na coluna. A nota (a ação principal recusada por um estado) é texto à vista, 11,5px --texto-2, inteiro. */ .ficha-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; } .ficha-acoes .ficha-principal { flex: none; max-width: 100%; gap: 4px; } .ficha-acoes .ficha-principal span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ficha-acoes .ficha-principal svg { width: 14px; height: 14px; } .ficha-acoes .btn-mais-acoes { flex: none; width: 26px; height: 26px; margin-left: auto; } .ficha-nota { margin: 0; font-size: 11.5px; line-height: 15px; color: var(--texto-2); overflow-wrap: anywhere; } /* proposta 9 §8.2 (Parte D): os botões de decidir o pedido de prazo no cartão (Entrada) e o Cancelar (Aguardando) — quebram linha dentro do cartão, nunca rolagem na coluna */ .ficha-pedido { min-width: 0; } /* Organizar agora: diálogo fixo (não muda de tamanho de um item para o outro) — a barra de progresso, o item (altura fixa: texto em duas linhas, metadados numa, o "Abrir onde se decide" numa) e as 6 saídas numa grade 3×2 (2×3 até 600px) de células iguais; a saída desabilitada mostra o motivo no lugar da explicação (e no `title`). */ .organizar { display: flex; flex-direction: column; gap: 14px; } .organizar-progresso { height: 4px; border-radius: 4px; background: var(--fundo-coluna); overflow: hidden; } .organizar-progresso-valor { height: 100%; width: 0; background: var(--acento); } .organizar-item { display: flex; flex-direction: column; gap: 6px; height: 118px; min-width: 0; } .organizar-texto { font-size: 15px; font-weight: 600; line-height: 21px; height: 42px; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .organizar-item .ficha-meta { height: 22px; flex-wrap: nowrap; overflow: hidden; } .organizar-onde { height: 30px; } .organizar-portas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 84px; gap: 8px; } /* proposta 9 §8.2 (Parte D): o pedido de prazo — no lugar das 6 saídas, a frase e os botões de decidir (`acoesDoPedido`) na largura inteira da grade (a área das saídas continua a mesma: o diálogo é fixo) */ .organizar-pedido { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .organizar-pedido p { margin: 0; } .porta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 9px 10px; text-align: left; background: var(--superficie); border: 1px solid var(--borda); border-radius: 9px; color: var(--texto); cursor: pointer; } .porta:hover:not(:disabled) { border-color: var(--acento); } .porta:disabled { background: var(--superficie-alt); color: var(--texto-3); cursor: not-allowed; } .porta-tecla { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--texto-3); } .porta-rotulo { font-size: 13px; font-weight: 600; } .porta-desc { font-size: 11px; line-height: 15px; color: var(--texto-3); overflow: hidden; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .agendar-prazo { gap: 8px; margin-top: 4px; flex-wrap: wrap; } /* Delegar uma captura (proposta 8, item 14): as duas saídas sempre no lugar — escolher uma só habilita os campos dela (GUIA §1.4: nada entra nem sai); o motivo da indisponível numa linha reservada de 18px (reticências, completo no title) — presente também vazia, para as duas seções terem a mesma altura em qualquer caso. */ .delegar-captura { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .delegar-opcao { min-width: 0; margin: 0; padding: 4px 12px 8px; border: 1px solid var(--borda); border-radius: 9px; transition: border-color .12s; } .delegar-opcao.escolhida { border-color: var(--acento); } .delegar-opcao legend { padding: 0 4px; } .delegar-escolha { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; } .delegar-opcao:disabled .campo label, .delegar-opcao:disabled .dica { color: var(--texto-3); } .delegar-motivo { height: 18px; margin: 2px 0 0; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .delegar-campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; } .delegar-campos .campo:first-child { grid-column: 1 / -1; } /* até 420px, Responsável e Prazo um embaixo do outro (29/09/2026: lado a lado, a 320px, o campo de data cortava o "dd/mm/aaaa" e o nome do responsável) */ @media (max-width: 420px) { .delegar-campos { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 700px) { .pagina-topo .central-guias { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Concluídas (proposta 10, D5; GUIA §3.30): os filtros (busca, mês e ano — completos já no esqueleto) numa linha, e um card com a cabeça de 44px (o total em uma linha, reticências, completo no `title`), a lista e a paginação de 48px SEMPRE no lugar (Anteriores · Página x de y · Próximas — os botões .btn-estavel não mudam de largura). Cada linha é uma grade: quando (dia e hora, 92px, dígitos tabulares) · o quê (o texto em até 2 linhas e os badges de "de onde veio") · o resultado (160px, à direita). Até 600px a linha vira duas faixas: quando e resultado em cima, o corpo embaixo. Só tokens de sempre (--superficie, --borda, --texto, --texto-2/-3 e os badges). */ /* a linha que explica a guia (proposta 12, Parte C — Lembretes, Rotinas e Concluídas): fixa no topo, até duas linhas (o texto inteiro também no `title`); até 600px, a forma curta */ .guia-explica { margin: 0 2px 10px; font-size: 12.5px; line-height: 18px; color: var(--texto-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .guia-explica .explica-curto { display: none; } /* o rodapé do "Organizar agora" (só os atalhos que o item usa): uma linha, reticências */ .organizar-atalhos { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .concluidas-filtros { margin-bottom: 12px; flex-wrap: nowrap; } .concluidas-filtros .concluidas-busca { flex: 1 1 260px; min-width: 0; max-width: 420px; } .concluidas-filtros select { flex: 0 1 170px; min-width: 0; } .concluidas-card { display: flex; flex-direction: column; min-width: 0; } .concluidas-cabeca { display: flex; align-items: center; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--borda); min-width: 0; } .concluidas-total { margin: 0; font-size: 14px; font-weight: 600; color: var(--texto); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .concluidas-lista { display: flex; flex-direction: column; min-height: 180px; min-width: 0; } .concluidas-lista > .esqueleto { height: 56px; margin: 8px 16px 0; } /* só o `article` da guia Concluídas: a linha de tabela `tr.concluida` (Usuários, Pendências, Tarefas, Centros de custo) continua linha de tabela — corrigido de carona na proposta 9, Parte H */ article.concluida { display: grid; grid-template-columns: 92px minmax(0, 1fr) 160px; gap: 12px; align-items: start; padding: 10px 16px; border-bottom: 1px solid var(--borda); min-width: 0; } .concluida-quando { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; } .concluida-dia { font-weight: 600; color: var(--texto); } .concluida-hora { font-size: 12px; color: var(--texto-3); } .concluida-corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .concluida-texto { font-weight: 600; color: var(--texto); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } a.concluida-texto:hover { text-decoration: underline; } .concluida-resultado { display: flex; justify-content: flex-end; min-width: 0; } .concluida-resultado .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .concluidas-paginas { display: flex; align-items: center; justify-content: center; gap: 12px; height: 48px; padding: 0 16px; min-width: 0; } .concluidas-posicao { min-width: 16ch; text-align: center; color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Lembretes (proposta 10, D6; GUIA §3.30): as abas-filtro (Em aberto · Concluídos · Todos — do catálogo de /api/meta, já no esqueleto) e um card com a cabeça de 44px (o resumo em uma linha, reticências, e o "+ Lembrete" à direita), a lista (sem paginação: lembretes são poucos e todos aparecem). Cada linha é uma grade: o dia (92px: a data — no anual, a próxima ocorrência — e "todo ano") · o título (até 2 linhas) e os badges · as ações (ícones 30×30, sempre visíveis). Até 600px o dia e as ações ficam na primeira faixa e o corpo embaixo. Só tokens de sempre. */ .lembretes-filtros { margin-bottom: 12px; } .lembretes-card { display: flex; flex-direction: column; min-width: 0; } .lembretes-cabeca { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--borda); min-width: 0; } .lembretes-total { flex: 1 1 auto; margin: 0; font-size: 14px; font-weight: 600; color: var(--texto); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .lembretes-novo { flex: none; } .lembretes-lista { display: flex; flex-direction: column; min-height: 180px; min-width: 0; } .lembretes-lista > .esqueleto { height: 56px; margin: 8px 16px 0; } .lembrete-linha { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--borda); border-left: 3px solid transparent; min-width: 0; } .lembrete-linha.vencido { border-left-color: var(--vermelho); } .lembrete-quando { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; } .lembrete-dia { font-weight: 600; color: var(--texto); } .lembrete-repete { font-size: 12px; color: var(--texto-3); } .lembrete-corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .lembrete-titulo { font-weight: 600; color: var(--texto); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .lembrete-linha.concluido .lembrete-titulo { color: var(--texto-2); text-decoration: line-through; } .lembrete-acoes { display: flex; gap: 2px; } /* o diálogo "Novo lembrete" / "Editar lembrete" */ .lembrete-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .lembrete-anual { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; } .lembrete-anual .dica { font-size: 11px; color: var(--texto-3); } .lembrete-escopo { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .lembrete-escopo-rotulo { font-size: 12px; font-weight: 600; color: var(--texto-2); } .lembrete-escopo-opcoes { display: flex; flex-wrap: wrap; gap: 6px 16px; } .lembrete-escopo-opcoes label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .lembrete-escopo .dica { font-size: 11px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Rotinas (proposta 10, D8; GUIA §3.30): o mesmo desenho da guia Lembretes — as abas-filtro (Ativas · Pausadas · Todas, do catálogo de /api/meta, já no esqueleto), um card com a cabeça de 44px (o resumo em uma linha e o "+ Rotina") e a lista (sem paginação: rotinas são poucas). Cada linha é uma grade: quando (140px, numa linha — "Toda segunda-feira", a maior, mede 132,6px a 14px/600 — e o que gera) · o título (até 2 linhas) e os badges · as ações (ícones 30×30). A pausada fica com o título em cinza. Até 600px o quando e as ações na primeira faixa (o que gera desce quando não cabe) e o corpo embaixo. No diálogo, a frequência e o dia lado a lado (até 600px, um embaixo do outro); na diária o dia fica no lugar, invisível (nada dança). Só tokens de sempre. */ .rotinas-filtros { margin-bottom: 12px; } .rotinas-card { display: flex; flex-direction: column; min-width: 0; } .rotinas-cabeca { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--borda); min-width: 0; } .rotinas-total { flex: 1 1 auto; margin: 0; font-size: 14px; font-weight: 600; color: var(--texto); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .rotinas-nova { flex: none; } .rotinas-lista { display: flex; flex-direction: column; min-height: 180px; min-width: 0; } .rotinas-lista > .esqueleto { height: 56px; margin: 8px 16px 0; } .rotinas-nota { margin: 10px 2px 0; font-size: 12px; color: var(--texto-3); } .rotina-linha { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--borda); min-width: 0; } .rotina-quando { display: flex; flex-direction: column; min-width: 0; } .rotina-freq { font-weight: 600; color: var(--texto); white-space: nowrap; } .rotina-gera { font-size: 12px; color: var(--texto-3); } .rotina-corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .rotina-titulo { font-weight: 600; color: var(--texto); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .rotina-linha.pausada .rotina-titulo { color: var(--texto-2); } .rotina-acoes { display: flex; gap: 2px; } /* o diálogo "Nova rotina" / "Editar rotina" */ .rotina-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .rotina-agenda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; min-width: 0; } .rotina-agenda .campo { min-width: 0; } .rotina-dia.invisivel { visibility: hidden; } .rotina-dica { font-size: 11px; color: var(--texto-3); margin-top: -6px; } /* proposta 9 §4.3 (Parte I1b): o aviso do Pedido de material escolhido — altura FIXA de três linhas (quatro até 600 px), sempre presente e vazia nas outras escolhas: aparecer ou sumir não move o rodapé (GUIA §1.4); o inteiro no title */ .rotina-aviso-pedido { height: calc(3 * 1.4em); margin-top: -6px; font-size: 11px; line-height: 1.4; color: var(--texto-2); overflow: hidden; } /* Meu Escore (proposta 10, D7; GUIA §3.30): as abas dos períodos (do catálogo de /api/meta), a linha do período (20px, uma linha) e dois cartões lado a lado — Demandas e Tarefas —, cada um com as duas células de 72px (o número grande em dígitos tabulares e o rótulo); o de Tarefas com as 4 linhas dos resultados (32px cada, sempre no lugar). Trocar de período troca só os números (nada entra nem sai). Até 900px, um cartão embaixo do outro. Só tokens de sempre. */ .escore-filtros { margin-bottom: 8px; } .escore-periodo { height: 20px; margin: 0 0 12px; line-height: 20px; font-size: 13px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .escore-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } .escore-card { padding: 16px; min-width: 0; } .escore-titulo { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--texto); } .escore-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .escore-celula { display: flex; flex-direction: column; justify-content: center; height: 72px; padding: 0 12px; min-width: 0; background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: 8px; } .escore-numero { font-size: 28px; line-height: 34px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; } .escore-rotulo { font-size: 12px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .escore-resultados { display: flex; flex-direction: column; min-height: 128px; margin: 12px 0 0; padding: 0; list-style: none; } .escore-resultado { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; border-top: 1px solid var(--borda); min-width: 0; } .escore-resultado .badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .escore-resultado-n { font-variant-numeric: tabular-nums; color: var(--texto); } .escore-nota { margin: 12px 0 0; } @media (max-width: 900px) { .escore-grade { grid-template-columns: minmax(0, 1fr); } } /* ---------- Proposta 12, Parte D — a janela da demanda ---------- */ /* A Visão Geral em LEITURA: a ficha (resumo em 3 colunas — código, fase, criticidade, responsável, prazo principal e pendências e decisões em aberto — e os dados da categoria em 2), com "Editar dados" no cabeçalho dela; a edição põe o formulário de sempre no MESMO lugar (`.ficha-demanda.editando`), com a mesma moldura e o mesmo cabeçalho de 30px — a janela não muda de tamanho (modal fixo) e o que vem antes da ficha não se move. Até 600px o resumo em 2 colunas e os dados em 1. O aviso "Somente leitura" (quem não edita) fica no topo, neutro (nunca vermelho): uma linha de 34px; no celular o motivo quebra (o toque não tem `title`) — o texto não muda com a demanda aberta, nada se move depois. */ .aviso-leitura { display: flex; align-items: flex-start; gap: 8px; min-height: 34px; box-sizing: border-box; padding: 7px 12px; margin-bottom: 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--fundo); color: var(--texto-2); font-size: 13px; line-height: 18px; } .aviso-leitura-icone { display: inline-flex; flex: none; height: 18px; align-items: center; } .aviso-leitura-texto { min-width: 0; } .aviso-leitura-texto > strong { color: var(--texto); font-weight: 600; } .ficha-demanda { padding: 12px 16px 16px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie); } .ficha-demanda-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; margin-bottom: 10px; } .ficha-demanda-cabeca .secao-titulo { margin: 0; } .ficha-demanda-cabeca .btn-editar-dados { flex: none; } .ficha-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--borda); } .ficha-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 14px 0 0; } .ficha-item { min-width: 0; } .ficha-cheio { grid-column: 1 / -1; } .ficha-rotulo { margin: 0 0 2px; font-size: 12px; color: var(--texto-2); } .ficha-valor { margin: 0; min-width: 0; color: var(--texto); overflow-wrap: anywhere; } .ficha-resumo .ficha-valor { font-size: 14px; } .ficha-fase, .ficha-prazo-data, .ficha-aberto { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } .ficha-prazo { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ficha-prazo-dica { overflow-wrap: anywhere; } .ficha-demanda + .bloco-prazos { margin-top: 20px; } /* a janela estreita (o celular: até 600px de tela a janela tem até 552px) — pela largura da janela, não da tela */ @container janela (max-width: 560px) { .ficha-demanda { padding: 10px 12px 12px; } .ficha-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ficha-dados { grid-template-columns: minmax(0, 1fr); } } /* sem mouse (o toque), todo ícone de linha à vista: o `.item:hover` que os revela não existe ali */ @media (hover: none) { .item .btn-icone { opacity: 1; } } /* As guias da janela NUMA LINHA onde cabem: a janela (`.modal`) é contêiner de largura; com 640px ou mais, uma linha de células iguais (`--abas-n`, de `abrirModal`) e os rótulos curtos (Geral · Pend./Dec. · Docs — o completo no `title` e para o leitor de tela), o contador embaixo do rótulo (13px); com 880px ou mais e até 7 guias, o contador ao lado (os maiores, "Pend./Dec." + 99+, pedem 116px — as 7 células têm 125px). Abaixo de 640px, as duas linhas de sempre (4×2). Medido: a 1366×768 a barra mede 47px numa linha (eram 84px em duas). Com até 7 guias, a linha única já vale de 520px (a janela da tela de 600px tem 552px: as 7 células de 75px, o maior rótulo curto, "Pend./Dec." a 12px, com 64px); as 8 do Pedido de material (células de 65px ali) esperam os 640px. */ .modal { container: janela / inline-size; } @container janela (min-width: 520px) { .modal-abas:not(:has(> button:nth-child(8))) { grid-template-columns: repeat(var(--abas-n, 4), minmax(0, 1fr)); padding: 8px 12px 0; } .modal-abas:not(:has(> button:nth-child(8))) button { flex-direction: column; gap: 2px; padding: 6px 2px 8px; font-size: 12px; } .modal-abas:not(:has(> button:nth-child(8))) button.tem-curto .aba-rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .modal-abas:not(:has(> button:nth-child(8))) button.tem-curto .aba-curto { display: block; } } @container janela (min-width: 640px) { .modal-abas { grid-template-columns: repeat(var(--abas-n, 4), minmax(0, 1fr)); padding: 8px 16px 0; } .modal-abas button { flex-direction: column; gap: 2px; padding: 6px 2px 8px; font-size: 13px; } .modal-abas button.tem-curto .aba-rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .modal-abas button.tem-curto .aba-curto { display: block; } } @container janela (min-width: 880px) { .modal-abas:not(:has(> button:nth-child(8))) { padding: 10px 22px 0; } .modal-abas:not(:has(> button:nth-child(8))) button { flex-direction: row; gap: 6px; padding: 8px 4px 10px; font-size: 14px; } } /* ---------- Modelos para baixar (`#/modelos`, 26/09/2026; GUIA §3.28) ---------- Um card por categoria (título de seção em cima) com uma linha por modelo: à esquerda o nome, os badges (formato e "do sistema"), a descrição (quebras de linha preservadas) e a linha de detalhes; à direita "Baixar" e, para quem gerencia, os ícones Editar · Substituir arquivo · Remover — sempre visíveis (sem hover), 30×30. A linha quebra quando o texto ficaria abaixo de 240px: as ações descem para uma faixa própria, alinhadas à direita. Nome, arquivo e descrição quebram em qualquer ponto (`overflow-wrap: anywhere`): um nome sem espaço nunca alarga a página (§1.4 regra 12). Nada aqui alterna conteúdo — o redesenho depois de salvar preserva a rolagem (modelos.js). */ .modelos-grupo + .modelos-grupo { margin-top: 20px; } .modelos-grupo > .secao-titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .modelo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; padding: 14px 16px; min-width: 0; } .modelo + .modelo { border-top: 1px solid var(--borda); } .modelo-info { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .modelo-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } .modelo-nome { font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .modelo-descricao { font-size: 13px; color: var(--texto-2); white-space: pre-line; overflow-wrap: anywhere; } .modelo-detalhes { font-size: 12px; color: var(--texto-3); overflow-wrap: anywhere; } .modelo-acoes { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; } /* quem gerencia: a coluna de ações tem sempre as quatro trilhas (Baixar + três ícones de 30px), também na linha do modelo do sistema, que só tem o Baixar — o "Baixar" fica na mesma posição em todas as linhas */ .lista-modelos.gerencia .modelo-acoes { display: grid; grid-template-columns: auto repeat(3, 30px); } .modelo-acoes .btn svg { width: 14px; height: 14px; } .modelo-acoes .btn-icone svg { width: 16px; height: 16px; } /* "Baixar planilha modelo" do diálogo de importação (importarCompras.js): na linha do rótulo "Arquivo", à direita — a linha tem a altura do próprio rótulo (12px × 1,45), então o campo, a dica e o que vem depois não se movem. */ .campo-rotulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 17.4px; min-width: 0; } .campo-rotulo .link-modelo { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; flex: none; } .campo-rotulo .link-modelo svg { width: 14px; height: 14px; } /* ---------- Central de Operações (proposta 7 §A.2; GUIA §3.29) ---------- O topo da Central (central.js) é do shell: a MESMA instância em todas as guias — só a guia ativa e os números mudam. Proposta 11, Parte 4 (D15 — o topo mais baixo, aprovado pelo dono; revoga a faixa de 56px e o subtítulo à vista da proposta 9 §7.1): DUAS faixas de altura fixa, a 8px uma da outra — o cabeçalho (36px: a faixa de alerta numa linha, ocupando o que sobra, o "?" com a frase dos acionamentos e o Modelos) e o trilho de 7 guias (42px numa linha acima de 1220px; 4×2 — 80px — de 601 a 1220px) ou, até 600px, o seletor (42px, a altura do trilho de uma linha — R5, GUIA §1.4 regra 16). Nada rola nem quebra; a página nunca passa da largura da tela; trocar de guia, carregar ou passar o mouse não muda altura nenhuma. Sem cor literal e sem par novo de contraste: --texto-2 sobre --fundo-coluna, --texto/--texto-2/--texto-3/--vermelho sobre --superficie e --acento-forte sobre --acento-suave já estão em test/public/contraste.test.js; o traço da guia ativa (--destaque) é elemento gráfico. */ .central-topo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; min-width: 0; } .central-cabecalho { display: flex; align-items: center; gap: 8px; height: 36px; min-width: 0; } .central-cabecalho > .cabecalho-acoes { margin-left: 4px; } a.btn:hover { text-decoration: none; } /* Proposta 9 §7.1 e §7.3 (Parte E), refeita na proposta 11, Parte 4: a FAIXA de alerta (alertas.js), UMA LINHA de 36px nos três estados e antes da primeira resposta (neutra) — um único `button` (a porta) que abre a lista nos dois estados: o ícone, a mensagem ("{n} crítico(s)" ou o texto verde; reticências, o completo no `title`), " · {m} para acompanhar" e "Ver" (estes dois nunca se cortam). Sem chips por tipo: a composição fica no `title` e na lista. Cores de estado só na base (proposta 11, D5 — o vermelho é só atraso): vermelho = --vermelho sobre --vermelho-suave quando algum crítico é atraso (`nAtraso` do servidor), âmbar = --amarelo sobre --amarelo-suave com críticos sem atraso, verde = --verde sobre --verde-suave — pares que já estão em test/public/contraste.test.js; ao passar o mouse, só o sublinhado do "Ver". Foco visível: o anel de sempre. Até 600px (no @media do fim): "{m} acomp.". */ .central-alerta { flex: 1 1 0; display: flex; align-items: center; height: 36px; min-width: 0; padding: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-sm); color: var(--texto-2); } .central-alerta.vermelho { background: var(--vermelho-suave); border-color: var(--vermelho-suave); color: var(--vermelho); } .central-alerta.ambar { background: var(--amarelo-suave); border-color: var(--amarelo-suave); color: var(--amarelo); } .central-alerta.verde { background: var(--verde-suave); border-color: var(--verde-suave); color: var(--verde); } .alerta-porta { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font-size: 13.5px; font-weight: 600; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer; } .alerta-porta:disabled { cursor: default; } .alerta-porta:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acento-suave); } .alerta-icone { flex: none; display: inline-flex; } .alerta-msg { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* proposta 12, Parte E (D21): o número do outro lado (" · 16 na equipe" nos seus, " · 3 seus" na equipe) — como o acompanhar, nunca se corta: quem cede é a mensagem */ .alerta-outro { flex: none; margin-left: -8px; font-weight: 500; } .alerta-msg .msg-curta { display: none; } .alerta-acompanhar { flex: none; margin-left: -8px; font-weight: 500; } .alerta-acompanhar .acompanhar-curto { display: none; } .alerta-ver { flex: none; margin-left: auto; text-decoration: underline; text-underline-offset: 2px; } .alerta-porta:hover .alerta-ver { text-decoration-thickness: 2px; } .alerta-porta:disabled .alerta-ver { visibility: hidden; } /* o "?" de ajuda (botaoAjuda de ui.js; proposta 11, Parte 4): 28px redondo, só o ícone — o texto no `title` e na janela drop `.drop-ajuda`. --texto-2 sobre --fundo/--superficie e --acento-forte sobre --acento-suave (aberto) já estão no teste de contraste. Ao passar o mouse, só a cor. */ .btn-ajuda { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--texto-2); cursor: pointer; } .btn-ajuda:hover { background: var(--fundo); color: var(--texto); } .btn-ajuda.ativo { background: var(--acento-suave); color: var(--acento-forte); } .btn-ajuda:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acento-suave); } .drop-ajuda { width: min(380px, calc(100vw - 16px)); } .drop-ajuda-texto { margin: 0; padding: 4px 16px 16px; color: var(--texto-2); line-height: 1.5; overflow-wrap: anywhere; } .cabecalho-acoes a.btn.ativo { background: var(--acento-suave); color: var(--acento-forte); border-color: transparent; } /* trilho de guias: grade de células IGUAIS (GUIA §1.4 regras 11 e 15); o contador em espaço reservado (28px, dígitos tabulares, `99+`) — o pill existe sempre nas guias com contador e fica invisível sem número; ativa sem negrito: fundo --superficie, sombra e o traço de 2px --destaque embaixo */ .central-guias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 4px; min-width: 0; background: var(--fundo-coluna); border-radius: var(--raio-sm); } .central-guia { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; height: 34px; min-width: 0; padding: 0 6px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--texto-2); white-space: nowrap; } .central-guia:hover { color: var(--texto); text-decoration: none; } .central-guia.ativa { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); } .central-guia.ativa::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--destaque); } .central-guia .aba-rotulo, .central-guia .aba-curto { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .central-guia .aba-curto { display: none; } .central-guia .contador { flex: none; min-width: 28px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; line-height: 18px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; background: var(--superficie); color: var(--texto-2); } .central-guia.ativa .contador { background: var(--acento-suave); color: var(--acento-forte); } .central-guia .contador.sem-numero { visibility: hidden; } /* R5: o seletor só aparece até 600px (no @media do fim), no lugar do trilho e com a altura dele */ .central-seletor { display: none; align-items: center; gap: 8px; height: 42px; padding: 4px 4px 4px 12px; min-width: 0; background: var(--fundo-coluna); border-radius: var(--raio-sm); } .central-seletor label { flex: none; font-weight: 500; color: var(--texto-2); } .central-seletor select { flex: 1; min-width: 0; height: 34px; } /* sub-barra das guias com duas telas: abas-filtro (.tabs-filtro — células de 104px, a mesma largura de toda barra de abas-filtro) feitas de links */ .central-secoes { display: grid; width: fit-content; margin-bottom: 20px; } .central-secoes a { display: flex; align-items: center; justify-content: center; padding: 5px 4px; border-radius: 6px; color: var(--texto-2); font-weight: 500; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; } .central-secoes a:hover { color: var(--texto); text-decoration: none; } .central-secoes a.ativo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); } /* Painel (proposta 9 §5.4, Parte B): as abas-filtro das linhas dos acionamentos — a célula de 104px de toda barra de abas-filtro (R11), com o contador EMBAIXO do rótulo numa segunda linha reservada (nunca ao lado, disputando os 96px úteis): o rótulo (o `curto`, 14px) numa linha de 18px e o contador (10,5px, dígitos tabulares) numa de 14px — 32px de conteúdo, 3px de respiro em cima e embaixo; a barra tem a sua altura fixa (44px, a mesma nas 5 células, com e sem número). Sem ativas, o contador fica invisível no lugar; as atrasadas em --vermelho (só com o número do servidor). Até 600px (no @media do fim) a barra dá lugar ao seletor `Linha: …`, com a mesma altura. */ .tabs-filtro.linhas-painel { height: 44px; } .linhas-painel button { display: grid; grid-template-rows: 18px 14px; align-content: center; padding: 3px 4px; container-type: inline-size; } /* Proposta 12, Parte E (D22) — o contador com a legenda: "5 ativas · 4 atrasadas". Exceção declarada à célula de 104px de toda abas-filtro (R11): esta barra tem células de até 138px (é a única cujo contador tem legenda), e a célula decide sozinha o que cabe (container query na própria célula, nunca a largura da tela). Medido no navegador (Inter 10px/600): o pior inteiro, "99+ ativas · 99+ atrasadas", 128,8px → a partir de 129px úteis (a célula de 137); o curto "99+ · 99+ atrasadas", 97,4px → a partir de 98px úteis; abaixo, "5 · 4". Sem atrasadas, "99+ ativas" (51px) cabe sempre. A 1366px as 5 células têm 138px: a barra (704px) e os dois selects ao lado (175 + 137px) numa linha — 1036 de 1063px. Até 600px o seletor "Linha: …" continua com os números ("5 · 4"; as opções e o title dizem o que são); abaixo deles, o quadro vira a lista por fase (proposta 13, Parte B, no bloco do kanban). */ .filtros-painel .tabs-filtro.linhas-painel { grid-auto-columns: minmax(0, 138px); } .linha-leg { display: none; } .linha-contador:not(.com-atrasadas) .leg-ativas { display: inline; } @container (min-width: 98px) { .linhas-painel .leg-atrasadas { display: inline; } } @container (min-width: 129px) { .linhas-painel .leg-ativas { display: inline; } } .linhas-painel .linha-rotulo, .linhas-painel .linha-contador { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .linhas-painel .linha-rotulo { line-height: 18px; } .linha-contador { font-size: 10px; line-height: 14px; font-weight: 600; color: var(--texto-3); font-variant-numeric: tabular-nums; } .linha-contador.sem-numero { visibility: hidden; } .linha-atrasadas { color: var(--vermelho); } .linhas-seletor { display: none; align-items: center; gap: 6px; height: 44px; min-width: 0; max-width: 100%; padding: 4px 6px 4px 10px; background: var(--fundo); border-radius: var(--raio-sm); } .linhas-seletor label { flex: none; font-weight: 500; color: var(--texto-2); } .filtros .linhas-seletor select { flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; } .linhas-seletor-contador { flex: none; min-width: 28px; text-align: right; } .linhas-seletor-contador .linha-contador { font-size: 12px; } /* no seletor (até 600px), só os números ("5 · 4"; o inteiro está nas opções e no title) */ .linhas-seletor-contador .linha-contador .linha-leg { display: none; } /* Solicitações (proposta 9 §4.3, Parte B; refeito na proposta 12, Parte E — abaixo). */ /* Proposta 12, Parte E (D25 — a avaliação: os dois cartões "parecem botões de criar, mas são guias"): o topo é um TRILHO DE GUIAS, com o visual das guias da Central (GUIA §3.29) — o trilho em --fundo-coluna, a guia sem borda de cartão, a ativa em --superficie com a sombra e o traço de 2px --destaque embaixo (sem negrito a mais); ao passar o mouse, só a cor. Cada guia tem 58px fixos: o ícone, o título numa linha (o nome da porta — "Material · Ferramenta · Equipamento · EPI", 268px medidos a 13,5px/600, mais o ícone e o vão, 308px — e, com menos que isso na guia (o conteúdo dela, sem os respiros de 12 e 48px), o curto — "Material"; container query na própria guia) e o apoio numa linha (reticências); o contador por cima, no canto. Duas colunas sempre (guias não empilham). Criar é o botão do resumo da lista ("Novo pedido" · "Nova solicitação"), nunca a guia. Até 600px, o seletor `Tipo: …` com a altura do trilho (R5). */ .solicitacoes-topo { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; min-width: 0; } .solicitacoes-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; min-width: 0; background: var(--fundo-coluna); border-radius: var(--raio-sm); } .cartao-solicitacao { position: relative; display: flex; align-items: center; gap: 10px; height: 58px; min-width: 0; padding: 0 48px 0 12px; background: transparent; border-radius: 6px; color: var(--texto-2); container-type: inline-size; } .cartao-solicitacao:hover { color: var(--texto); text-decoration: none; } .cartao-solicitacao:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acento-suave); } .cartao-solicitacao.ativo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); } .cartao-solicitacao.ativo::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--destaque); } .cartao-solicitacao-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--superficie); color: var(--texto-2); } .cartao-solicitacao.ativo .cartao-solicitacao-icone { background: var(--acento-suave); color: var(--acento-forte); } .cartao-solicitacao-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .cartao-solicitacao-titulo { display: block; min-width: 0; height: 18px; font-size: 13.5px; font-weight: 600; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cartao-solicitacao-titulo .titulo-curto { display: none; } @container (max-width: 307.98px) { .cartao-solicitacao-titulo .titulo-longo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .cartao-solicitacao-titulo .titulo-curto { display: inline; } } .cartao-solicitacao-apoio { min-width: 0; font-size: 12px; line-height: 16px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cartao-solicitacao.ativo .cartao-solicitacao-apoio { color: var(--texto-2); } .cartao-solicitacao .contador { position: absolute; top: 50%; right: 12px; margin-top: -9px; min-width: 28px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; line-height: 18px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; background: var(--superficie); color: var(--texto-2); } .cartao-solicitacao.ativo .contador { background: var(--acento-suave); color: var(--acento-forte); } .cartao-solicitacao .contador.sem-numero { visibility: hidden; } /* Trilho de 7 guias (proposta 9 §5.3 e §8.2, Parte D: a guia Prazos saiu). Proposta 11, Parte 5 (item 7 do pacote): o contador diz o que conta — o número e a legenda (`8 suas`, `12 ativos`, `5 abertas`, `2 hoje`; na Minha Página `1 na Entrada`, `2 hoje`) — e cada célula decide sozinha o que cabe nela (container query na própria guia, nunca pela largura da tela): o rótulo inteiro com a legenda, senão o curto com a legenda, senão o curto só com o número (o `title` do pill diz sempre o que ele conta; o seletor até 600px leva a legenda). Medidas do navegador (canvas: o rótulo Inter 13px/500, o pill 11px/600 com 10px de respiro; a célula precisa de 12 de respiro + rótulo + 4 de vão + pill, com o pior número, `99+`): Painel 37,7 + "99+ ativos" 66,3 → 121px; "Central de Tarefas" 114,1 + "99+ suas" 59,4 → 190px, "Tarefas" 46,4 → 122px; "Pendências & Decisões" 145,1 + "99+ abertas" 74,8 → 236px, "Pend. & Dec." 79,6 → 171px; Reuniões 57,3 + "99+ hoje" 57,1 → 131px; Meu dia 49,5 + "99+ na Entrada" 91,1 → 157px; Lembretes 65,9 → 140px. A célula = (largura útil − 8 de respiro − 6 vãos de 4px) / 7 (a largura útil = a tela − 17 da barra de rolagem − 240 do menu − 48 de margem acima de 960px): a 1366px, 147px — "Painel 12 ativos", "Tarefas 8 suas", "Pend. & Dec. 5", "Reuniões 2 hoje". Nada muda ao passar o mouse nem ao trocar de guia: só a largura da tela muda a célula. O completo continua no DOM para o leitor de tela e no `title`. */ .central-guia .contador-legenda { display: none; } .central-topo .central-guia, .pagina-topo .central-guia { container-type: inline-size; } @container (max-width: 235.98px) { .central-topo .central-guia.tem-curto[data-guia="pendencias-decisoes"] .aba-rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .central-topo .central-guia.tem-curto[data-guia="pendencias-decisoes"] .aba-curto { display: block; } } @container (max-width: 189.98px) { .central-topo .central-guia.tem-curto[data-guia="tarefas"] .aba-rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .central-topo .central-guia.tem-curto[data-guia="tarefas"] .aba-curto { display: block; } } @container (min-width: 121px) { .central-topo .central-guia[data-guia="painel"] .contador-legenda { display: inline; } } @container (min-width: 122px) { .central-topo .central-guia[data-guia="tarefas"] .contador-legenda { display: inline; } } @container (min-width: 171px) { .central-topo .central-guia[data-guia="pendencias-decisoes"] .contador-legenda { display: inline; } } @container (min-width: 131px) { .central-topo .central-guia[data-guia="reunioes"] .contador-legenda { display: inline; } } @container (min-width: 157px) { .pagina-topo .central-guia[data-guia="meu-dia"] .contador-legenda { display: inline; } } @container (min-width: 140px) { .pagina-topo .central-guia[data-guia="lembretes"] .contador-legenda { display: inline; } } /* 7 células de 123,6px pedem 1202,2px de viewport (7 × 123,6 + 32 + 305); até 1220px, a grade 4×2 (a última célula vazia, do mesmo tamanho das outras) — a célula mais estreita é a de 961px: (961 − 305 − 8 − 12) / 4 = 159px; sem o menu, a de 601px: (601 − 17 − 32 − 8 − 12) / 4 = 133px. Até 600px, o seletor `Guia: …` (R5). */ @media (max-width: 1220px) { .central-topo .central-guias { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Proposta 8 (D2): a barra do topo nunca passa da largura da tela. Proposta 12, Parte B (item 4): até 1200px, Capturar e Nova Demanda com o "+" e o nome curto ("+ Capturar", "+ Demanda" — o nome inteiro no aria-label/title; até 600px em duas linhas, no @media do bloco do chat); até 800px, o Ferramentas sai da barra e vive no "⋯ Mais". */ @media (max-width: 1200px) { .topbar-acoes .topbar-acao { padding: 0 8px; gap: 4px; font-size: 13px; } .topbar-acoes .topbar-acao .acao-icone-longo, .topbar-acoes .topbar-acao .rotulo-acao { display: none; } .topbar-acoes .topbar-acao .acao-icone-curto, .topbar-acoes .topbar-acao .acao-curta { display: inline-flex; } } @media (max-width: 800px) { .topbar-icones .topbar-extra { display: none; } } /* Proposta 12, Parte B (item 4): até 400px a barra do topo ganha os 24px que faltavam para "+ Capturar" e "+ Demanda" em duas linhas caberem a 320px com a busca, o ⋯, o sino e as mensagens — botões de ícone de 30px (o alvo de toque continua acima de 24px), respiros de 6px e vãos de 2px; o título fica com o que sobrar (a 320px, nada: a tela diz o que é logo abaixo). Medido no navegador a 320, 360 e 390px: a página nunca passa da largura da tela. */ @media (max-width: 400px) { .topbar { gap: 2px; padding: 0 6px; } .topbar-icones .btn-icone, .topbar-voltar, .btn-menu, .busca .busca-abrir { width: 30px; } } /* até 360px o título teria menos de 40px (uma letra e as reticências): sai da vista, não do leitor de tela (o h1 continua sendo lido) — o nome da tela está logo abaixo, no topo dela */ @media (max-width: 360px) { .topbar .titulo-tela { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } } /* Proposta 6 §5 m3 — abaixo de 360px a célula de "Pendências & Decisões" (64px, 60 úteis) não comporta "Pend./Dec." (cabe a partir de 343px): a aba com `mini` mostra "Pend/Dec" (56,4px). A barra ganha 8px de respiro lateral (era 12) e continua uma grade 4×2 de células iguais, sem rolagem; o completo segue no `title` e para o leitor de tela. */ @media (max-width: 359px) { .modal-abas { padding: 6px 8px 0; } .modal-abas button.tem-mini .aba-curto { display: none; } .modal-abas button.tem-mini .aba-mini { display: block; } }