/* ============================================================
Seiva · Design System "Folha" — ponte design → Flask
------------------------------------------------------------
Como usar no seu app Flask:
1) Copie este arquivo para app/static/nutria-tokens.css
2) No base.html, carregue-o DEPOIS do style.css atual:
(ele redefine as MESMAS classes que você já usa —
.barra, .botao, .tabela, .cartao, .etiqueta, .aviso… —
então vira um reskin, sem mexer nos templates.)
3) Modo escuro: coloque data-theme no .
e um botão que faça:
document.documentElement.dataset.theme =
document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
localStorage.setItem('nutria-theme', ...); // persista se quiser
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
:root{
/* superfícies */
--nt-bg:#F4F1E8; --nt-bg2:#EDEADE;
--nt-panel:#FFFFFF; --nt-panel2:#FAF8F1;
--nt-line:#E4E1D3; --nt-line2:#EEEBDF; --nt-hover:#F3F5EE;
/* texto */
--nt-ink:#1F281F; --nt-body:#4C5548; --nt-muted:#8A9382;
/* marca */
--nt-brand:#4C7A5B; --nt-brand-deep:#365A43; --nt-brand-text:#4C7A5B;
--nt-brand-soft:#E7F0E7; --nt-brand-soft-line:#CFE1CF;
--nt-gold:#E1A63F; --nt-gold-soft:#FBEFD6;
/* semânticas */
--nt-ok:#2E9E5B; --nt-ok-soft:#E6F4EA;
--nt-alert:#C98416; --nt-alert-soft:#FBEFD6;
--nt-risk:#D93B2F; --nt-risk-soft:#FBE9E7;
/* direcao do lab: BAIXO = frio (azul), ALTO = quente (coral) — bater o olho */
--nt-info:#1A5FA8; --nt-info-soft:#E4EEFB;
--nt-warm:#B0281B; --nt-warm-soft:#FBE7E3;
/* sidebar (sempre em verde-escuro, nos dois modos) */
--nt-sidebar:#2A3A2C; --nt-sidebar-line:#3A4C33;
--nt-sidebar-fg:#B4C4AD; --nt-sidebar-active:#4C7A5B;
/* 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:#7B8A77;
--nt-brand:#5C9A72; --nt-brand-deep:#8FBE9A; --nt-brand-text:#8FBE9A;
--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:#E4574B; --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-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); }
/* ---------- barra superior ---------- */
.barra{
background:var(--nt-panel); border-bottom:1px solid var(--nt-line);
}
.marca{ color:var(--nt-brand-text); font-weight:800; letter-spacing:-.01em; }
.barra nav a{ color:var(--nt-body); font-weight:600; }
.barra nav a:hover{ color:var(--nt-brand-text); }
.barra nav a.destaque{ color:var(--nt-brand-text); }
.barra .usuario{ color:var(--nt-muted); }
.barra .sair{ color:var(--nt-risk); }
/* ---------- 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); }
/* ---------- cartão central (login) ---------- */
.cartao-centro{
background:var(--nt-panel); border:1px solid var(--nt-line);
border-radius:var(--nt-r-lg); box-shadow:var(--nt-shadow);
}
/* ---------- formulários ---------- */
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);
}
/* ---------- botões ---------- */
button, .botao{
background:var(--nt-brand); 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); 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); }
/* ---------- grade / blocos ---------- */
.bloco{ background:var(--nt-panel); border:1px solid var(--nt-line); border-radius:var(--nt-r-lg); }
.bloco-num{ background:var(--nt-panel2); color:var(--nt-muted); }
.bloco h3{ color:var(--nt-ink); }
.bloco p{ color:var(--nt-muted); }
.bloco.link:hover{ border-color:var(--nt-brand); box-shadow:0 8px 20px -14px var(--nt-brand); }
.bloco.pronto .etiqueta{ background:var(--nt-ok-soft); color:var(--nt-ok); }
/* ---------- 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.normal{ background:var(--nt-ok-soft); color:var(--nt-ok); }
.etiqueta.baixo{ background:var(--nt-info-soft); color:var(--nt-info); }
.etiqueta.alto{ background:var(--nt-warm-soft); color:var(--nt-warm); }
.etiqueta.alerta{ background:var(--nt-gold-soft); color:var(--nt-alert); }
.etiqueta.risco{ background:var(--nt-risk-soft); color:var(--nt-risk); }
/* ---------- 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); }
.tabela tr.grupo-linha td{ background:var(--nt-panel2); color:var(--nt-muted); }
/* ---------- cartões / ficha ---------- */
.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); }
.lembranca{ background:var(--nt-brand-soft); border-left:4px solid var(--nt-brand); color:var(--nt-brand-deep); }
.lista-clinica li{ border-bottom:1px solid var(--nt-line2); }
.lista-clinica .meta{ 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); }
.dica.aviso-doses{ border-left-color:var(--nt-gold); background:var(--nt-gold-soft); }
/* ---------- cartao de reposicao de eletrolitos (K/Mg/P) ---------- */
.cartao-reposicao{ border-left:4px solid var(--nt-gold); }
/* ---------- tags de aporte ---------- */
.tag-aporte.cal{ background:var(--nt-gold-soft); color:var(--nt-alert); }
.tag-aporte.osm{ background:var(--nt-brand-soft); color:var(--nt-brand-deep); }
.tag-aporte.central{ background:var(--nt-risk-soft); color:var(--nt-risk); }
/* Sinalizacoes de terapia nutricional (Passo de apoio A) */
.tag-aporte.tn{ background:var(--nt-ok-soft); color:var(--nt-ok); }
.tag-aporte.diarreia{ background:var(--nt-gold-soft); color:var(--nt-alert); }
.tag-aporte.interacao{ background:var(--nt-brand-soft); color:var(--nt-brand-deep); }
/* ---------- resultados de cálculo (antropometria) ---------- */
.res.ok{ color:var(--nt-ok); }
.res.alerta{ color:var(--nt-alert); }
.res.risco{ color:var(--nt-risk); }
/* ---------- critérios de SR / eventos ---------- */
.sr-criterio, .grupo-eventos{ border:1px solid var(--nt-line); border-radius:var(--nt-r); background:var(--nt-panel); }
.sr-criterio legend, .grupo-eventos legend{ color:var(--nt-ink); }