/* ============================================================ Fazenda Alvorada — folha de estilo única (sem framework, sem CDN) Sistema visual "SINAL" — implantado em 02/08/2026. ------------------------------------------------------------ Dois modos de LEITURA (DECISOES-TECNICAS §4): - .modo-movel : telas do Ade e da Eini (mobile-first, botões grandes, um formulário por tela, campos amigáveis a ditado por voz — R0.2); - .modo-tv : telas do diretor e da Coamo (fonte grande, alto contraste, semáforos — R0.1/R7.3). Dois modos de EXIBIÇÃO, escolhidos pela pessoa (cookie alvorada_tema, aplicado como classe no por alvorada/web.py — sem JavaScript): - .tema-dia : padrão. É o modo do painel do diretor: fundo claro, texto grafite. Tela grande, vista de longe, sala com luz do dia pede fundo claro. - .tema-noite : celular na lavoura antes de clarear e notebook de madrugada. Reduz ofuscamento sem perder contraste. - .tema-auto : segue o aparelho (prefers-color-scheme). Regra que não pode ser quebrada: O amarelo-sinal (--marca) NUNCA é traço nem texto sobre fundo claro — tem 1,6:1 no branco. No modo dia ele só aparece como ÁREA (faixa, fundo de botão, anel de foco, fundo do ícone), sempre com grafite por cima. Onde o modo dia precisa de um traço dourado, existe o --ouro-traco (#8A5A00, 5,9:1). No modo noite os dois se fundem. Nenhum estado depende só de cor: semáforo tem pastilha E rótulo, erro tem borda grossa E ícone, item ativo tem contorno E peso. ============================================================ */ /* ---------- Tipografia auto-hospedada (sem CDN — DECISOES §2) ---------- Atkinson Hyperlegible: desenhada pelo Braille Institute para baixa visão — 0/O e 1/l/I inconfundíveis, o que importa num painel de números lido de longe. JetBrains Mono: dígitos tabulares para valores, IDs de lançamento e códigos de máquina. Ambas OFL (licenças na pasta). */ @font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fontes/atkinson-400-latin.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: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fontes/atkinson-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fontes/atkinson-700-latin.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: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fontes/atkinson-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Arquivo variável único: cobre 400 e 700 (por isso o intervalo no peso). */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fontes/jetbrainsmono-var-latin.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: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fontes/jetbrainsmono-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- O que não muda entre os modos ---------- */ :root { --fonte: "Atkinson Hyperlegible", Verdana, "Segoe UI", system-ui, -apple-system, sans-serif; --fonte-mono: "JetBrains Mono", Consolas, "Cascadia Mono", ui-monospace, monospace; --marca: #F5C518; /* amarelo-sinal — só como ÁREA no modo dia */ --marca-tinta: #101311; /* o que se escreve EM CIMA do amarelo */ --raio: 0; /* sinalização é reta; pílula só em selo/contador */ color-scheme: light dark; } /* ---------- MODO DIA (padrão) ---------- */ body, body.tema-dia { --casca: #101311; /* barra superior e barra lateral */ --casca-tinta: #FFFFFF; --fundo: #EFF1EC; /* página no celular */ --superficie: #FFFFFF; /* cartão, formulário, miolo do modo TV */ --tinta: #101311; --tinta-suave: #454B44; --borda: #C7CCC4; --borda-forte: #9AA298; --selecao: #FBF0CC; /* hover e item ativo (amarelo lavado) */ --ouro-traco: #8A5A00; /* detalhe dos pictogramas (5,9:1) */ --acao: #101311; /* botão principal */ --acao-tinta: #F5C518; --ok: #12703A; --ok-fundo: #E2F2E6; --atencao: #8A5A00; --atencao-fundo: #FDF3D4; --erro: #B3261E; --erro-fundo: #FBE7E5; --azul-nota: #10336B; --info-fundo: #EDF2FA; color-scheme: light; } /* ---------- MODO NOITE ---------- */ body.tema-noite { --casca: #080A09; /* mais escuro que a superfície: inverte o dia */ --casca-tinta: #ECEFE9; --fundo: #0E1110; --superficie: #171B19; --tinta: #ECEFE9; --tinta-suave: #9AA398; --borda: #2E332F; --borda-forte: #464D47; --selecao: #2C2716; --ouro-traco: #F5C518; /* no escuro o amarelo-sinal já serve de traço */ --acao: #F5C518; /* inverte: o botão vira o amarelo */ --acao-tinta: #101311; --ok: #57D68C; --ok-fundo: #10291A; --atencao: #F2B830; --atencao-fundo: #2E2410; --erro: #FF7A6B; --erro-fundo: #33161A; --azul-nota: #8FB6E8; --info-fundo: #131C2B; color-scheme: dark; } /* ---------- MODO AUTOMÁTICO: só entra quando o aparelho pede escuro ---------- */ @media (prefers-color-scheme: dark) { body.tema-auto { --casca: #080A09; --casca-tinta: #ECEFE9; --fundo: #0E1110; --superficie: #171B19; --tinta: #ECEFE9; --tinta-suave: #9AA398; --borda: #2E332F; --borda-forte: #464D47; --selecao: #2C2716; --ouro-traco: #F5C518; --acao: #F5C518; --acao-tinta: #101311; --ok: #57D68C; --ok-fundo: #10291A; --atencao: #F2B830; --atencao-fundo: #2E2410; --erro: #FF7A6B; --erro-fundo: #33161A; --azul-nota: #8FB6E8; --info-fundo: #131C2B; color-scheme: dark; } } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--fundo); } body { margin: 0; font-family: var(--fonte); color: var(--tinta); background: var(--fundo); font-size: 17px; line-height: 1.45; } /* Modo TV: alto contraste, corpo mínimo de 20px (R0.1) */ body.modo-tv { background: var(--superficie); font-size: 20px; } img { max-width: 100%; height: auto; } /* Sem cor de destaque legível em fundo claro, o link se anuncia pelo sublinhado e pelo peso — não pela cor (a regra do amarelo). */ a { color: var(--tinta); } h1, h2, h3 { line-height: 1.15; margin: 0 0 .5rem; } h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.015em; } h2 { font-size: 1.2rem; font-weight: 700; } /* "Eyebrow": rótulo de seção em maiúsculas espaçadas (pode levar um sinal) */ .rotulo-secao { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-family: var(--fonte-mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: .25rem; } .rotulo-secao .sinal-icone { width: 1.25rem; height: 1.25rem; } /* Foco visível sempre: anel amarelo + companheiro escuro, para o foco aparecer tanto em fundo claro quanto em fundo escuro. */ :focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; box-shadow: 0 0 0 6px var(--tinta); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---------- Sinais do Campo: a família de pictogramas ---------- O sprite fica inline no (templates/_sinais.html). Some da tela sem `display:none`, que em alguns navegadores atrapalha o . */ .sinais-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .sinal-icone { width: 1.5em; height: 1.5em; flex: none; --ic1: currentColor; --ic2: var(--ouro-traco); } /* ---------- Cabeçalho + faixa do sinal (assinatura) ---------- */ .topo { background: var(--casca); color: var(--casca-tinta); } .topo-conteudo { max-width: 1400px; margin: 0 auto; padding: .65rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .marca { display: inline-flex; align-items: center; gap: .5rem; color: var(--casca-tinta); text-decoration: none; font-size: 1.1rem; letter-spacing: .01em; /* A marca sempre em branco + amarelo: a casca é escura nos dois modos. */ --mk1: var(--casca-tinta); --mk2: var(--marca); } .marca strong { font-weight: 700; } .marca-simbolo { width: 1.65rem; height: 1.65rem; flex: none; } .topo-usuario { display: flex; align-items: center; gap: .6rem; font-size: .95rem; flex-wrap: wrap; } .usuario-nome { opacity: .92; } .usuario-papel { font-family: var(--fonte-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; border: 1px solid rgba(255, 255, 255, .35); padding: .15rem .5rem; } .sair { color: var(--casca-tinta); text-decoration: none; border: 2px solid rgba(255, 255, 255, .5); padding: .35rem .8rem; min-height: 40px; display: inline-flex; align-items: center; gap: .35rem; } .sair:hover { background: rgba(255, 255, 255, .14); } /* A faixa do sinal: o amarelo como ÁREA, no lugar do antigo degradê. */ .linha-alvorada { height: 6px; background: var(--marca); } /* ---------- Seletor de exibição (dia / noite / automático) ---------- Três links comuns (GET /tema/{valor}) — funciona sem JavaScript e o cookie mantém a escolha na próxima tela. */ .troca-tema { display: inline-flex; gap: 0; border: 2px solid rgba(255, 255, 255, .35); } .troca-tema a { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 40px; min-width: 44px; padding: .25rem .5rem; color: var(--casca-tinta); text-decoration: none; font-size: .78rem; font-weight: 700; border-left: 2px solid rgba(255, 255, 255, .35); } .troca-tema a:first-child { border-left: 0; } .troca-tema a:hover { background: rgba(255, 255, 255, .14); } .troca-tema a[aria-current="true"] { background: var(--marca); color: var(--marca-tinta); } .troca-tema .sinal-icone { width: 1.1rem; height: 1.1rem; --ic2: currentColor; } .troca-tema-rotulo { /* No celular só o desenho cabe; o nome fica para leitor de tela. */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } @media (min-width: 720px) { .troca-tema-rotulo { position: static; width: auto; height: auto; clip-path: none; } } /* ---------- Barra lateral de navegação (base.html + navegacao.py) ---------- Celular: sanfona "Menu" logo abaixo do cabeçalho (checkbox + label, sem JS). A partir de 1024px (notebook do Renan e TV do pai): coluna fixa à esquerda, grudada na rolagem. Os itens já vêm filtrados por papel. */ .corpo { max-width: 1080px; margin: 0 auto; } .modo-tv .corpo { max-width: 1780px; } .navegacao { position: relative; background: var(--superficie); border-bottom: 1px solid var(--borda); } /* O checkbox some da tela, mas continua alcançável pelo teclado (Espaço) */ .alternar-menu { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); } .abrir-menu { display: flex; align-items: center; gap: .5rem; min-height: 52px; margin: 0; padding: .6rem 1rem; font-weight: 700; color: var(--tinta); cursor: pointer; } .abrir-menu:hover { background: var(--selecao); } .abrir-menu-icone { font-size: 1.35rem; line-height: 1; } .abrir-menu::after { content: "▾"; margin-left: auto; } .alternar-menu:checked ~ .abrir-menu::after { content: "▴"; } .alternar-menu:focus-visible + .abrir-menu { outline: 3px solid var(--marca); outline-offset: -3px; } .lateral { display: none; padding: 0 .75rem .75rem; } .alternar-menu:checked ~ .lateral { display: block; } .lateral .rotulo-secao { margin: .9rem 0 .3rem; padding-left: .8rem; } .lateral-lista { list-style: none; margin: 0; padding: 0; } .lateral-item { display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: .5rem .75rem; border-left: 4px solid transparent; color: var(--tinta); font-weight: 600; text-decoration: none; } .lateral-item:hover { background: var(--selecao); } .lateral-icone { flex: none; width: 1.7rem; display: inline-flex; justify-content: center; } .lateral-icone .sinal-icone { width: 1.5rem; height: 1.5rem; } /* Tela em que o usuário está (aria-current="page"): contorno E peso — nunca só a cor. */ .lateral-item-ativo { background: var(--selecao); border-left-color: var(--tinta); color: var(--tinta); font-weight: 700; } .lateral-sair { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--borda); color: var(--tinta-suave); font-weight: 600; } @media (min-width: 1024px) { .corpo { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1rem 1rem 0; } .navegacao { flex: 0 0 262px; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; border: 2px solid var(--borda); } .abrir-menu { display: none; } .lateral { display: block; padding: .5rem .5rem 1rem; } .conteudo { flex: 1 1 auto; min-width: 0; padding: 0 0 4rem; } /* Modo TV: fonte de 20px — a coluna precisa ser mais larga para os rótulos não quebrarem em duas linhas. */ .modo-tv .navegacao { flex-basis: 322px; } .modo-tv .lateral-item { min-height: 52px; } } /* ---------- Miolo ---------- */ .conteudo { max-width: 720px; margin: 0 auto; padding: 1rem 1rem 4rem; } .modo-tv .conteudo { max-width: 1400px; } .volta { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; text-decoration: none; font-weight: 700; margin-bottom: .25rem; } .cabeca-pagina { margin: .25rem 0 1rem; } .cabeca-pagina p { margin: .25rem 0 0; color: var(--tinta-suave); } /* ---------- Cartões ---------- */ .cartao { background: var(--superficie); border: 2px solid var(--borda); border-radius: var(--raio); padding: 1rem; margin-bottom: 1rem; } /* ---------- Mensagens de feedback (contrato geral) ---------- */ .faixa-ok { background: var(--ok-fundo); border: 2px solid var(--ok); color: var(--tinta); padding: .8rem 1rem; font-weight: 700; margin: 0 0 1rem; } .faixa-alerta { background: var(--atencao-fundo); border: 2px solid var(--atencao); padding: .8rem 1rem; margin: 0 0 1rem; } .faixa-alerta .alerta-mensagem { margin: 0; font-weight: 700; color: var(--tinta); } .faixa-alerta .alerta-dica { margin: .35rem 0 0; color: var(--tinta-suave); font-size: .95rem; } /* ALERTA VERMELHO forte — Trava da Rose (R4.2) e bloqueio retroativo (R4.5) */ .faixa-alerta-vermelha { background: var(--erro-fundo); border: 3px solid var(--erro); } .faixa-alerta-vermelha .alerta-mensagem { color: var(--erro); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; } .faixa-alerta-vermelha .alerta-dica { color: var(--tinta); font-size: 1rem; } /* ---------- Formulários (mobile-first, ditado por voz) ---------- */ form .campo { margin-bottom: 1rem; } label, .rotulo-campo { display: block; font-weight: 700; margin-bottom: .35rem; } .rotulo-obs { font-weight: 400; color: var(--tinta-suave); font-size: .9rem; } input[type="text"], input[type="date"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], select, textarea { width: 100%; min-height: 52px; /* mínimo 48px — DECISOES §4 */ padding: .65rem .8rem; font: inherit; color: var(--tinta); background: var(--superficie); border: 2px solid var(--borda-forte); border-radius: var(--raio); } textarea { min-height: 8.5rem; resize: vertical; } /* grande p/ ditado (R0.2) */ input:focus, select:focus, textarea:focus { border-color: var(--tinta); } input[type="file"] { width: 100%; padding: .8rem; border: 2px dashed var(--borda-forte); border-radius: var(--raio); background: var(--superficie); color: var(--tinta); min-height: 52px; } .ajuda { display: block; margin-top: .3rem; color: var(--tinta-suave); font-size: .9rem; } /* Botões */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: .7rem 1.2rem; font: inherit; font-weight: 700; border-radius: var(--raio); border: 2px solid var(--tinta); background: var(--superficie); color: var(--tinta); cursor: pointer; text-decoration: none; } .botao:hover { background: var(--selecao); } .botao-principal { width: 100%; background: var(--acao); color: var(--acao-tinta); border-color: var(--acao); font-size: 1.1rem; } .botao-principal:hover { background: var(--acao); filter: brightness(1.25); } .botao-pequeno { min-height: 44px; padding: .4rem .8rem; font-size: .95rem; } .botao-mini { min-height: 40px; padding: .3rem .7rem; font-size: .88rem; } /* Opções grandes (radios como botões — período, status do laudo, destino) */ .opcoes { display: grid; gap: .5rem; } .opcoes-3 { grid-template-columns: 1fr; } @media (min-width: 560px) { .opcoes-3 { grid-template-columns: repeat(3, 1fr); } } .opcao { position: relative; display: block; margin: 0; font-weight: 600; } .opcao input { position: absolute; opacity: 0; inset: 0; } .opcao span { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 56px; padding: .5rem .75rem; border: 2px solid var(--borda-forte); border-radius: var(--raio); background: var(--superficie); text-align: center; } .opcao input:checked + span { border-color: var(--tinta); box-shadow: inset 0 0 0 3px var(--marca); background: var(--selecao); font-weight: 700; } .opcao input:focus-visible + span { outline: 3px solid var(--marca); outline-offset: 2px; } /* ---------- Menus por ícones grandes (home do Ade e da Eini) ---------- */ .menu-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1.25rem; } @media (min-width: 560px) { .menu-grade { grid-template-columns: repeat(3, 1fr); } } .menu-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 118px; padding: 1rem .5rem; background: var(--superficie); border: 2px solid var(--borda); border-radius: var(--raio); text-decoration: none; color: var(--tinta); font-weight: 700; text-align: center; } .menu-item:hover { border-color: var(--tinta); background: var(--selecao); } .menu-icone { line-height: 1; } .menu-icone.sinal-icone { width: 2.6rem; height: 2.6rem; } .menu-badge { position: absolute; top: -.6rem; right: -.6rem; min-width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 .4rem; border-radius: 999px; background: var(--erro); color: var(--superficie); border: 2px solid var(--superficie); font-family: var(--fonte-mono); font-size: .92rem; font-weight: 700; } /* ---------- Listas "últimos lançamentos" ---------- */ .lista-ultimos { list-style: none; margin: 0; padding: 0; } .lista-ultimos li { padding: .65rem 0; border-top: 1px solid var(--borda); } .lista-ultimos li:first-child { border-top: 0; } .lista-ultimos .linha1 { font-weight: 700; } .lista-ultimos .linha2 { color: var(--tinta-suave); font-size: .92rem; } /* ---------- Tabelas ---------- */ .rolagem, .tabela { overflow-x: auto; } /* tabela larga rola dentro do cartão */ table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--borda); white-space: nowrap; } th { font-family: var(--fonte-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); font-weight: 400; } td.num, th.num { text-align: right; font-family: var(--fonte-mono); } td.quebra { white-space: normal; } tr.negativo td { color: var(--erro); font-weight: 700; } /* ---------- Semáforos e selos ---------- Os semáforos 🟢🟡🔴 continuam sendo emoji de propósito: são GLIFOS DE ESTADO que o R1.2 pede e que o pai já lê de longe, não ícones de navegação. Toda vez que aparecem, vêm acompanhados de rótulo em texto (.selo) — cor nunca é o único canal. */ .semaforo { font-size: 1.6rem; line-height: 1; } .modo-tv .semaforo { font-size: 2.2rem; } .selo { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border: 2px solid currentColor; border-radius: 999px; font-size: .85rem; font-weight: 700; } .selo-ok { background: var(--ok-fundo); color: var(--ok); } .selo-atencao { background: var(--atencao-fundo); color: var(--atencao); } .selo-erro { background: var(--erro-fundo); color: var(--erro); } .selo-neutro { background: var(--fundo); color: var(--tinta-suave); } /* ---------- Painel de tarefas (R3.6) ---------- */ .tarefa { background: var(--superficie); border: 2px solid var(--borda); border-left: 8px solid var(--atencao); border-radius: var(--raio); padding: .9rem 1rem; margin-bottom: .75rem; } .tarefa-laudo-verde { border-left-color: var(--ok); } .tarefa-laudo-amarelo { border-left-color: var(--atencao); } .tarefa-laudo-vermelho { border-left-color: var(--erro); } .tarefa-feita { background: var(--ok-fundo); border-color: var(--ok); border-left-color: var(--ok); } .tarefa-cabeca { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--tinta-suave); margin-bottom: .3rem; } .tarefa-descricao { margin: 0 0 .5rem; font-weight: 600; } .tarefa-meta { margin: 0 0 .6rem; font-size: .88rem; color: var(--tinta-suave); } .botao-feito { width: 100%; border-color: var(--ok); color: var(--ok); font-size: 1.05rem; } .botao-feito:hover { background: var(--ok-fundo); } .selo-feito { margin: 0; font-weight: 700; color: var(--ok); } /* ---------- Barra de progresso (permuta R4.3) ---------- */ .progresso { background: var(--fundo); border: 2px solid var(--borda-forte); border-radius: 999px; height: 1.4rem; overflow: hidden; } .progresso > span { display: block; height: 100%; background: var(--tinta); border-radius: 999px; min-width: .5rem; transition: width .3s ease; } /* ---------- Modo TV: painéis do diretor / Coamo ---------- */ .paineis { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 900px) { .paineis { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1300px) { .paineis { grid-template-columns: repeat(3, 1fr); } } .painel-largo { grid-column: 1 / -1; } .painel-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; } .exportar { display: inline-flex; gap: .5rem; font-size: .85rem; white-space: nowrap; } .exportar a { text-decoration: none; font-weight: 700; border: 2px solid var(--tinta); padding: .25rem .6rem; } .exportar a:hover { background: var(--selecao); } /* Valores gigantes (tanque, lucro, visor) — monoespaçada tabular para os dígitos alinharem coluna a coluna na TV. */ .valor-gigante { font-family: var(--fonte-mono); font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; } .modo-tv .valor-gigante { font-size: 3.4rem; } .valor-gigante.negativo { color: var(--erro); } .valor-legenda { color: var(--tinta-suave); font-size: .95rem; } .par-valores { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: .5rem; } .par-valores .item .rotulo-campo { margin-bottom: 0; } /* Buscador fixo do topo (R1.1) e busca do visor (R7.3) */ .buscador-fixo { position: sticky; top: 0; z-index: 40; background: var(--superficie); border-bottom: 4px solid var(--marca); padding: .75rem 0; margin-bottom: 1rem; } .busca-grande { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .busca-grande input { flex: 1 1 260px; font-family: var(--fonte-mono); font-size: 1.4rem; font-weight: 700; min-height: 60px; } .modo-tv .busca-grande input { font-size: 1.8rem; } /* Visor de Notas (R7.3): linhas em negrito sobre a superfície */ .linha-nota td { font-weight: 700; color: var(--azul-nota); background: var(--superficie); font-size: 1.05em; } .visor-resumo { border: 3px solid var(--azul-nota); border-radius: var(--raio); background: var(--superficie); padding: 1rem 1.25rem; margin-bottom: 1rem; } .visor-resumo .valor-gigante { color: var(--azul-nota); } /* Aviso neutro (sem resultado, fora da janela etc.) */ .aviso-neutro { background: var(--fundo); border: 2px dashed var(--borda-forte); border-radius: var(--raio); padding: .8rem 1rem; color: var(--tinta-suave); } /* Selo FOB (R6.3) — carimbo preto: frete travado em zero */ .selo-fob { display: inline-block; background: var(--tinta); color: var(--superficie); border-radius: var(--raio); padding: .3rem .7rem; font-weight: 700; letter-spacing: .04em; margin-bottom: .75rem; } /* ---------- Login ---------- */ .login-caixa { max-width: 420px; margin: 8vh auto 0; background: var(--superficie); border: 2px solid var(--borda); border-radius: var(--raio); overflow: hidden; } .login-alvorada { height: 8px; background: var(--marca); } .login-miolo { padding: 1.5rem; } .login-miolo h1 { display: flex; align-items: center; justify-content: center; gap: .55rem; text-align: center; margin-bottom: 1.25rem; --mk1: var(--tinta); --mk2: var(--ouro-traco); } .login-miolo h1 .marca-simbolo { width: 2rem; height: 2rem; } /* ---------- Página de erro ---------- */ .erro-caixa { text-align: center; padding: 3rem 1rem; } .erro-codigo { font-family: var(--fonte-mono); font-size: 4rem; font-weight: 700; color: var(--tinta); letter-spacing: -0.03em; } /* ============================================================ MANUAL DE USO (/ajuda) — telas de instruções ilustradas ------------------------------------------------------------ Público: gente que não é de tecnologia. Por isso: texto maior, muito espaço em branco, numeração grande casando com as setas do desenho SVG e faixas coloridas com o mesmo significado do resto do app (verde = deu certo, amarelo = confira, vermelho = regra bloqueou). Conteúdo em app/alvorada/instrucoes.py. ============================================================ */ /* Botão de ajuda no cabeçalho (aparece em TODA tela logada) */ .ajuda-topo { color: var(--casca-tinta); text-decoration: none; font-weight: 700; border: 2px solid var(--marca); padding: .35rem .8rem; min-height: 40px; display: inline-flex; align-items: center; gap: .35rem; } .ajuda-topo:hover { background: rgba(245, 197, 24, .22); } /* "Como usar o app" no pé da barra lateral, logo antes de Sair */ .lateral-ajuda { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--borda); font-weight: 700; } .lateral-ajuda + .lateral-sair { margin-top: 0; padding-top: .5rem; border-top: 0; } /* Chamada grande do manual nos menus de ícones (Ade e Eini) */ .cartao-ajuda { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--tinta); } .cartao-ajuda:hover { border-color: var(--tinta); background: var(--selecao); } .cartao-ajuda strong { display: block; font-size: 1.1rem; } .cartao-ajuda .texto-suave { display: block; font-size: .95rem; } /* Capa do manual */ .ajuda-capa { display: flex; align-items: center; gap: 1rem; margin: .25rem 0 1rem; } .ajuda-capa-icone { font-size: 3rem; line-height: 1; } .ajuda-capa-icone.sinal-icone { width: 3rem; height: 3rem; } .ajuda-capa h1 { margin: 0; } .ajuda-capa-sub { margin: .2rem 0 0; color: var(--tinta-suave); } .ajuda-secao { font-size: .95rem; margin: 2rem 0 .75rem; padding-top: .75rem; border-top: 4px solid var(--marca); } .ajuda-resumo { margin: 0 0 .75rem; font-size: 1.05rem; } /* Índice de atalhos */ .ajuda-indice { display: grid; gap: .4rem; } .ajuda-indice a { display: flex; align-items: center; gap: .5rem; min-height: 46px; padding: .4rem .7rem; border: 2px solid var(--borda); border-radius: var(--raio); text-decoration: none; font-weight: 700; background: var(--superficie); } .ajuda-indice a:hover { border-color: var(--tinta); background: var(--selecao); } /* Rotina: quando × o que fazer */ .ajuda-rotina { list-style: none; margin: 0; padding: 0; } .ajuda-rotina li { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: .6rem 0; border-top: 1px solid var(--borda); } .ajuda-rotina li:first-child { border-top: 0; } .ajuda-quando { flex: 0 0 15rem; font-weight: 700; color: var(--tinta); } .ajuda-oque { flex: 1 1 16rem; } /* Bloco de uma tela */ .ajuda-tela { scroll-margin-top: 1rem; } .ajuda-tela-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .ajuda-tela-cabeca h2 { margin: 0; } .ajuda-rota { font-family: var(--fonte-mono); font-size: .8rem; color: var(--tinta-suave); background: var(--fundo); border: 1px solid var(--borda); border-radius: 999px; padding: .1rem .6rem; white-space: nowrap; } .ajuda-onde { background: var(--selecao); border-left: 6px solid var(--marca); padding: .7rem .9rem; margin-bottom: 1rem; } .ajuda-onde p { margin: 0 0 .35rem; } .ajuda-onde p:last-child { margin-bottom: 0; } .ajuda-passos { margin: 0 0 1rem; padding-left: 1.4rem; } .ajuda-passos li { margin-bottom: .5rem; } /* Desenho da tela (SVG) */ .ajuda-legenda-desenho { margin: 0 0 .6rem; color: var(--tinta-suave); } .ajuda-num-linha { color: var(--ouro-traco); font-weight: 700; } .mockup-rolagem { overflow-x: auto; background: var(--superficie); border: 2px solid var(--borda); border-radius: var(--raio); padding: .75rem; margin-bottom: 1rem; } .mockup { display: block; height: auto; max-width: 100%; margin: 0 auto; } /* Explicação campo a campo (a numeração casa com as bolinhas do SVG) */ .ajuda-campos { list-style: none; margin: 0 0 1rem; padding: 0; } .ajuda-campos > li { display: flex; gap: .75rem; padding: .85rem 0; border-top: 1px solid var(--borda); } .ajuda-campos > li:first-child { border-top: 0; } .ajuda-num { flex: 0 0 auto; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--marca); color: var(--marca-tinta); font-family: var(--fonte-mono); font-weight: 700; font-size: 1rem; } .ajuda-campo-corpo { flex: 1 1 auto; min-width: 0; } .ajuda-campo-rotulo { margin: 0 0 .25rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .ajuda-campo-texto { margin: 0; } .ajuda-campo-dica { margin: .4rem 0 0; padding: .45rem .7rem; background: var(--atencao-fundo); font-size: .95rem; } /* Faixas de aviso do manual */ .ajuda-caixa { border-radius: var(--raio); padding: .8rem 1rem; margin: 0 0 .8rem; border: 2px solid var(--borda); background: var(--fundo); } .ajuda-caixa-titulo { margin: 0 0 .3rem; font-weight: 700; } .ajuda-caixa-texto { margin: 0; } .ajuda-ok { background: var(--ok-fundo); border-color: var(--ok); } .ajuda-ok .ajuda-caixa-titulo { color: var(--ok); } .ajuda-atencao { background: var(--atencao-fundo); border-color: var(--atencao); } .ajuda-atencao .ajuda-caixa-titulo { color: var(--atencao); } .ajuda-erro { background: var(--erro-fundo); border-color: var(--erro); border-width: 3px; } .ajuda-erro .ajuda-caixa-titulo { color: var(--erro); } .ajuda-info { background: var(--info-fundo); border-color: var(--azul-nota); } .ajuda-info .ajuda-caixa-titulo { color: var(--azul-nota); } .ajuda-depois { background: var(--ok-fundo); border-left: 6px solid var(--ok); padding: .7rem .9rem; margin-bottom: .5rem; } .ajuda-depois p { margin: 0; } .ajuda-topo-link { display: inline-block; margin-top: .5rem; font-size: .9rem; font-weight: 700; text-decoration: none; } /* Dúvidas frequentes */ .ajuda-duvida { border-top: 1px solid var(--borda); padding: .6rem 0; } .ajuda-duvida:first-of-type { border-top: 0; } .ajuda-duvida summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: .4rem; } .ajuda-duvida p { margin: .4rem 0 .2rem; color: var(--tinta-suave); } /* Impressão: manual em papel para quem prefere consultar longe da tela. O papel é sempre "modo dia" — tinta escura em fundo branco. */ @media print { body, body.tema-noite, body.tema-auto { --casca: #101311; --casca-tinta: #FFFFFF; --fundo: #FFFFFF; --superficie: #FFFFFF; --tinta: #101311; --tinta-suave: #454B44; --borda: #C7CCC4; --borda-forte: #9AA298; --selecao: #FBF0CC; --ouro-traco: #8A5A00; --acao: #101311; --acao-tinta: #F5C518; --ok: #12703A; --ok-fundo: #E2F2E6; --atencao: #8A5A00; --atencao-fundo: #FDF3D4; --erro: #B3261E; --erro-fundo: #FBE7E5; --azul-nota: #10336B; --info-fundo: #EDF2FA; background: #fff; font-size: 12pt; } .topo, .navegacao, .volta, .ajuda-indice, .ajuda-topo-link, .troca-tema, .acoes-linha { display: none !important; } .cartao { break-inside: avoid; border-color: #999; } .ajuda-tela { break-before: page; } .ajuda-duvida[open] p, .ajuda-duvida p { display: block; } .ajuda-duvida summary::marker { content: ""; } } /* ---------- Utilitários ---------- */ .mt-0 { margin-top: 0; } .texto-suave { color: var(--tinta-suave); } .texto-erro { color: var(--erro); font-weight: 700; } .acoes-linha { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; } .oculto { display: none !important; }