/* ============================================================ Agenda · Design System "Folha" — paleta, tipografia e reskin ------------------------------------------------------------ Herdado do Seiva (nutria-tokens.css) em 2026-09-04, sem as partes clinicas. Carregado DEPOIS do style.css: redefine as MESMAS classes (.botao, .tabela, .cartao, .etiqueta, .aviso…), entao e um reskin sem mexer nos templates. A cor de destaque vem por cima, do identidade.css. Modo escuro: `data-theme="dark"` no (o base.html aplica antes da pintura e persiste em localStorage, chave 'agenda-theme'). ============================================================ */ /* ---- Fontes servidas pelo PROPRIO site (nada sai da rede) ------------ Arquivos OFL em app/static/fontes/. Os pesos que faltam sao MAPEADOS nos que existem: Hanken 500 -> SemiBold; Spectral 500 -> Regular; Spectral 600 de pe e engrossado pelo navegador. `font-display:swap`: o texto aparece na hora com a fonte do sistema e troca quando a nossa chega. --- */ @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap; src:url('fontes/HankenGrotesk-Regular.ttf') format('truetype')} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap; src:url('fontes/HankenGrotesk-SemiBold.ttf') format('truetype')} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap; src:url('fontes/HankenGrotesk-SemiBold.ttf') format('truetype')} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap; src:url('fontes/HankenGrotesk-Bold.ttf') format('truetype')} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap; src:url('fontes/HankenGrotesk-ExtraBold.ttf') format('truetype')} @font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap; src:url('fontes/Spectral-Regular.ttf') format('truetype')} @font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap; src:url('fontes/Spectral-Regular.ttf') format('truetype')} @font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap; src:url('fontes/Spectral-Italic.ttf') format('truetype')} @font-face{font-family:'Spectral';font-style:italic;font-weight:500;font-display:swap; src:url('fontes/Spectral-Italic.ttf') format('truetype')} @font-face{font-family:'Spectral';font-style:italic;font-weight:600;font-display:swap; src:url('fontes/Spectral-SemiBoldItalic.ttf') format('truetype')} :root{ /* superficies */ --nt-bg:#F4F1E8; --nt-bg2:#EDEADE; --nt-panel:#FFFFFF; --nt-panel2:#FAF8F1; --nt-line:#E4E1D3; --nt-line2:#EEEBDF; --nt-hover:#F3F5EE; /* texto (contraste AA conferido sobre o papel: muted 4,59; ok 4,71; alert 4,93; risk 4,96) */ --nt-ink:#1F281F; --nt-body:#4C5548; --nt-muted:#66705F; /* marca — o identidade.css troca estes por cima */ --nt-brand:#4C7A5B; --nt-brand-deep:#365A43; --nt-brand-text:#365A43; --nt-brand-fundo:#4C7A5B; --nt-brand-soft:#E7F0E7; --nt-brand-soft-line:#CFE1CF; --nt-gold:#E1A63F; --nt-gold-soft:#FBEFD6; /* semanticas */ --nt-ok:#237A47; --nt-ok-soft:#E6F4EA; --nt-alert:#8F5E0E; --nt-alert-soft:#FBEFD6; --nt-risk:#C0341F; --nt-risk-soft:#FBE9E7; --nt-info:#1A5FA8; --nt-info-soft:#E4EEFB; --nt-warm:#B0281B; --nt-warm-soft:#FBE7E3; /* menu lateral (escuro nos dois modos) — o identidade.css troca por cima */ --nt-sidebar:#2A3A2C; --nt-sidebar-line:#3A4C33; --nt-sidebar-fg:#B4C4AD; --nt-sidebar-active:#4C7A5B; --nt-sidebar-dim:#9DB09A; --nt-sidebar-link:#CACECA; /* forma */ --nt-r:12px; --nt-r-lg:16px; --nt-shadow:0 8px 24px -16px rgba(33,42,34,.22); } :root[data-theme="dark"]{ --nt-bg:#0E140D; --nt-bg2:#0A0F09; --nt-panel:#18211A; --nt-panel2:#1E2820; --nt-line:#28342A; --nt-line2:#222E24; --nt-hover:#202A20; --nt-ink:#EDF2EA; --nt-body:#B3C0AF; --nt-muted:#8A9A86; --nt-brand:#5C9A72; --nt-brand-deep:#8FBE9A; --nt-brand-text:#8FBE9A; --nt-brand-fundo:#3F7A57; --nt-brand-soft:#1C2A1E; --nt-brand-soft-line:#2C3E2E; --nt-gold:#E7B14E; --nt-gold-soft:#2A2213; --nt-ok:#3FB56B; --nt-ok-soft:#16281C; --nt-alert:#E7B14E; --nt-alert-soft:#2A2213; --nt-risk:#EC6E62; --nt-risk-soft:#2A1615; --nt-info:#5FA8E0; --nt-info-soft:#122234; --nt-warm:#F0796B; --nt-warm-soft:#2A1613; --nt-sidebar:#0B120A; --nt-sidebar-line:#1C271B; --nt-sidebar-fg:#8FA089; --nt-sidebar-active:#4C7A5B; --nt-sidebar-dim:#798875; --nt-sidebar-link:#C2C4C2; --nt-shadow:0 10px 28px -16px rgba(0,0,0,.6); } /* ---------- base ---------- */ body{ background:var(--nt-bg); color:var(--nt-body); font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; } h1{ color:var(--nt-ink); font-weight:800; letter-spacing:-.02em; } h2{ color:var(--nt-ink); font-weight:800; } h3{ color:var(--nt-ink); font-weight:700; } .sub{ color:var(--nt-muted); } a{ color:var(--nt-brand-text); } /* ---------- avisos (flash) ---------- */ .aviso{ border-radius:12px; border:1px solid; } .aviso-ok{ background:var(--nt-ok-soft); border-color:var(--nt-ok); color:var(--nt-ok); } .aviso-erro{ background:var(--nt-risk-soft); border-color:var(--nt-risk); color:var(--nt-risk); } .aviso-aviso{ background:var(--nt-gold-soft); border-color:var(--nt-gold); color:var(--nt-alert); } .aviso .sub-linha{ color:var(--nt-body); } /* ---------- formularios ---------- */ label{ color:var(--nt-ink); font-weight:600; } input, select, textarea{ background:var(--nt-panel); border:1px solid var(--nt-line); border-radius:11px; color:var(--nt-ink); } input::placeholder, textarea::placeholder{ color:var(--nt-muted); } input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--nt-brand); box-shadow:0 0 0 3px var(--nt-brand-soft); } /* ---------- botoes ---------- */ button, .botao{ background:var(--nt-brand-fundo); color:#fff; border:1px solid transparent; border-radius:11px; font-weight:700; font-family:inherit; box-shadow:0 8px 18px -10px var(--nt-brand); transition:filter .15s, transform .15s; } button:hover, .botao:hover{ background:var(--nt-brand-fundo); filter:brightness(1.06); transform:translateY(-1px); } .botao.secundario, button.secundario{ background:var(--nt-panel); color:var(--nt-brand-deep); border:1px solid var(--nt-line); box-shadow:none; } .botao.secundario:hover, button.secundario:hover{ background:var(--nt-panel); border-color:var(--nt-brand); filter:none; } .botao.secundario.perigo, button.secundario.perigo{ color:var(--nt-risk); } .botao.secundario.perigo:hover, button.secundario.perigo:hover{ border-color:var(--nt-risk); background:var(--nt-risk-soft); } .link-perigo{ color:var(--nt-risk); } .link-acao{ color:var(--nt-brand-text); } /* ---------- hierarquia de acao ------------------------------------------ Uma tela, UM botao cheio: o que responde "o que eu vim fazer aqui?". .botao -> primario, cheio .botao.suave -> fundo suave: acrescimo ("+ Adicionar…") .botao.secundario -> contorno .botao.icone -> so o icone, 36x36, sem fundo .seletor -> escolha mutuamente exclusiva (segmented) ------------------------------------------------------------------------ */ .botao.suave, button.suave{ background:var(--nt-brand-soft); color:var(--nt-brand-deep); border:1px solid var(--nt-brand-soft-line); box-shadow:none; } .botao.suave:hover, button.suave:hover{ background:var(--nt-brand-soft); border-color:var(--nt-brand); filter:brightness(.94); transform:translateY(-1px); } :root[data-theme="dark"] .botao.suave:hover, :root[data-theme="dark"] button.suave:hover{ filter:brightness(1.35); } .botao.compacto, button.compacto{ padding:8px 14px; font-size:13.5px; align-self:end; } .botao.icone, button.icone{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; background:none; border:1px solid transparent; border-radius:10px; color:var(--nt-muted); font-size:15px; line-height:1; box-shadow:none; } .botao.icone:hover, button.icone:hover{ background:var(--nt-brand-soft); border-color:var(--nt-brand-soft-line); color:var(--nt-brand-deep); filter:none; transform:none; } .botao.icone:disabled, button.icone:disabled{ visibility:hidden; } .seletor{ display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--nt-line); border-radius:11px; background:var(--nt-panel2); } .seletor > a, .seletor > button{ display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:0 13px; border:0; border-radius:8px; background:none; box-shadow:none; color:var(--nt-muted); font-size:12.5px; font-weight:600; text-decoration:none; white-space:nowrap; cursor:pointer; } .seletor > a:hover, .seletor > button:hover{ background:none; color:var(--nt-ink); filter:none; transform:none; } .seletor > .ativo, .seletor > .ativo:hover{ background:var(--nt-brand-soft); color:var(--nt-brand-deep); font-weight:700; } .seletor > a:focus-visible, .seletor > button:focus-visible{ outline:2px solid var(--nt-brand); outline-offset:-2px; } /* zona de perigo: o que nao se desfaz mora no FIM da pagina */ .zona-perigo{ margin:36px 0 8px; padding:15px 17px; border:1px solid var(--nt-risk-soft); border-left:4px solid var(--nt-risk); border-radius:var(--nt-r); background:var(--nt-panel); } .zona-perigo > h2, .zona-perigo > h3{ margin:0 0 4px; font-size:14px; font-weight:800; color:var(--nt-risk); } .zona-perigo p{ margin:0 0 11px; font-size:13px; color:var(--nt-muted); } .zona-perigo .acoes{ margin:0; } /* ---------- etiquetas / pills ---------- */ .etiqueta{ background:var(--nt-panel2); color:var(--nt-muted); font-weight:700; } .etiqueta.ok{ background:var(--nt-ok-soft); color:var(--nt-ok); } .etiqueta.alerta{ background:var(--nt-gold-soft); color:var(--nt-alert); } .etiqueta.risco{ background:var(--nt-risk-soft); color:var(--nt-risk); } .etiqueta.info{ background:var(--nt-info-soft); color:var(--nt-info); } /* ---------- tabelas ---------- */ .tabela{ background:var(--nt-panel); border:1px solid var(--nt-line); border-radius:var(--nt-r); overflow:hidden; } .tabela th{ background:var(--nt-panel2); color:var(--nt-muted); border-bottom:1px solid var(--nt-line); font-weight:700; } .tabela th, .tabela td{ border-bottom:1px solid var(--nt-line2); } .tabela td{ color:var(--nt-body); } .tabela tr.vigente{ background:var(--nt-ok-soft); } .tabela tr.inativa td{ color:var(--nt-muted); } /* ---------- cartoes ---------- */ .cartao{ background:var(--nt-panel); border:1px solid var(--nt-line); border-radius:var(--nt-r-lg); } .cartao h3{ color:var(--nt-ink); } .rotulo{ color:var(--nt-muted); } /* ---------- trilha (breadcrumb) ---------- */ .trilha{ color:var(--nt-muted); } .trilha a{ color:var(--nt-brand-text); } /* ---------- dica ---------- */ .dica{ background:var(--nt-panel); border:1px solid var(--nt-line); border-left:4px solid var(--nt-brand); border-radius:var(--nt-r); color:var(--nt-body); } /* ---------- celular: o seletor ocupa a linha e divide os itens ---------- */ @media (max-width: 640px){ .seletor{ display:flex; width:100%; } .seletor > a, .seletor > button{ flex:1 1 0; min-height:38px; padding:0 8px; } .botao.icone, button.icone{ width:44px; height:44px; padding:0; } }