/* Identidade visual do Veratum (design system "Veratum": verde Veratum, ouro do selo, papel de laudo; Fraunces nos
   títulos, IBM Plex Sans no texto, IBM Plex Mono nos códigos). Entra quando o laboratório usa a aparência "Veratum"
   (Dados do laboratório; padrão de quem começa); troca os tokens de app.css sem mexer no resto. */
:root {
  --navy: #0E4D45; --navy-2: #0B3F38; --green: #0E4D45; --green-d: #0E4D45; --green-t: #DCEAE5;
  --bg: #F7F4EE; --card: #FFFFFF; --text: #142321; --mute: #56645F; --line: #DDD6C9;
  --sup: #FBF9F5; --hover: #F1EDE5; --chip: #EFEAE0; --input: #FFFFFF;
  --ouro: #8A6320; --ouro-t: #F2E6CF; --on-verde: #FFFFFF;
}
:root[data-tema="escuro"] {
  --navy: #162423; --navy-2: #1C3B37; --green: #6CC4B3; --green-d: #6CC4B3; --green-t: #1C3B37;
  --bg: #0F1A1A; --card: #162423; --text: #EEF2EF; --mute: #A3B1AC; --line: #2A3B39;
  --sup: #13201F; --hover: #1C2C2B; --chip: #22302F; --input: #0F1A1A;
  --ouro: #D9A85A; --ouro-t: #3A2F1C; --on-verde: #0F1A1A;
}
body { font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; }
h1, h2, .marca-login { font-family: Fraunces, Georgia, "Times New Roman", serif; letter-spacing: .005em; }
code, .codigo { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; }

/* menu lateral em verde Veratum, logo em branco direto sobre ele (sem a caixa branca do logo do laboratório) */
.side { color: rgba(255, 255, 255, .78); }
.side .logo, .side .logo:hover { background: transparent; box-shadow: none; color: #FFFFFF; padding: 4px 6px; }
.side .logo .logo-veratum { height: 46px; width: auto; max-width: 100%; display: block; }
.side a { color: rgba(255, 255, 255, .78); }
.side a:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.side a.on, [data-tema="escuro"] .side a.on { background: rgba(255, 255, 255, .16); border-color: transparent; color: #FFFFFF; }
.side .grupo { color: rgba(255, 255, 255, .55); }

.btn.pri, [data-tema="escuro"] .btn.pri { background: var(--green-d); border-color: var(--green-d); color: var(--on-verde); }
.btn.pri:hover { background: var(--navy-2); }
[data-tema="escuro"] .btn.pri:hover { background: #8AD3C5; }

/* login: papel de laudo, selo em verde */
.login { background: var(--bg); }
.login-logo, [data-tema="escuro"] .login-logo { background: transparent; border: 0; box-shadow: none; color: var(--green-d); padding: 4px; }
.login-logo .logo-veratum { height: 62px; width: auto; max-width: 100%; display: block; }
.login .assinatura a { color: var(--mute); }

/* laboratório com logo próprio: o logo fica na caixa branca, como no tema clássico */
.side .logo.com-imagem, .side .logo.com-imagem:hover { background: #FFFFFF; padding: 8px 10px; border-radius: 10px; }
.login-logo.com-imagem, [data-tema="escuro"] .login-logo.com-imagem { background: #FFFFFF; border: 1px solid var(--line); padding: 10px; }

@media (max-width: 860px) { .side .logo .logo-veratum { height: 30px; } }

/* cores por tipo na paleta do Veratum: elétrico = verde, emissão acústica = ouro, visão geral = tinta */
.px { --s-ele: #0E4D45; --s-ea: #8A6320; }
.fin { --serie: #0E4D45; } .fin[data-tipo="eletrico"] { --serie: #0E4D45; } .fin[data-tipo="acustico"] { --serie: #8A6320; }
.card.tipo.eletrico, .op-grupo.eletrico { --cor: #0E4D45; --cor-texto: #0E4D45; --fundo: #DCEAE5; }
.card.tipo.acustico, .op-grupo.acustico { --cor: #8A6320; --cor-texto: #76541B; --fundo: #F2E6CF; }
.card.tipo.marca { --cor: #142321; --cor-texto: #142321; --fundo: #EFEAE0; }
.destaque.eletrico { --cor: #0E4D45; --cor-btn: #0B3F38; --fundo: #DCEAE5; --borda: #A9C9C0; box-shadow: 0 4px 16px rgba(14, 77, 69, .12); }
.destaque.acustico { --cor: #8A6320; --cor-btn: #6F4F19; --fundo: #F2E6CF; --borda: #DCC69C; box-shadow: 0 4px 16px rgba(138, 99, 32, .12); }
.tag.prop { background: #F2E6CF; color: #76541B; }
.divisao-barra .eletrico, .divisao-linha i.eletrico { background: #0E4D45; }
.divisao-barra .acustico, .divisao-linha i.acustico { background: #8A6320; }
.fin-kpis .kpi { border-top-color: var(--k-cor, #142321); }
.fin-kpis .kpi.grupo-volume { --k-cor: #142321; } .fin-kpis .kpi.grupo-ticket { --k-cor: #0E4D45; --k-texto: #0E4D45; }
.ng-tile.fechada { border-top-color: #0E4D45; } .ng-card.r-fechada, .ng-card.r-parcial { border-left-color: #0E4D45; }
.px-neg .fechada { --ng-cor: #0E4D45; }

[data-tema="escuro"] .px { --s-ele: #6CC4B3; --s-ea: #D9A85A; }
[data-tema="escuro"] .fin, [data-tema="escuro"] .fin[data-tipo="eletrico"] { --serie: #6CC4B3; --bom: #6CC4B3; }
[data-tema="escuro"] .fin[data-tipo="acustico"] { --serie: #D9A85A; }
[data-tema="escuro"] .card.tipo.eletrico, [data-tema="escuro"] .op-grupo.eletrico { --cor: #6CC4B3; --cor-texto: #8AD3C5; --fundo: #1C3B37; }
[data-tema="escuro"] .card.tipo.acustico, [data-tema="escuro"] .op-grupo.acustico { --cor: #D9A85A; --cor-texto: #E8C58A; --fundo: #3A2F1C; }
[data-tema="escuro"] .card.tipo.marca { --cor: #A3B1AC; --cor-texto: #EEF2EF; --fundo: #1C2C2B; }
[data-tema="escuro"] .destaque.eletrico { --cor: #6CC4B3; --cor-btn: #0E4D45; --fundo: #1C3B37; --borda: #2F5D56; }
[data-tema="escuro"] .destaque.acustico { --cor: #D9A85A; --cor-btn: #6F4F19; --fundo: #3A2F1C; --borda: #6B5520; }
[data-tema="escuro"] .tag.prop { background: #3A2F1C; color: #E8C58A; }
[data-tema="escuro"] .tag.res-ok { background: #1C3B37; color: #8AD3C5; }
[data-tema="escuro"] .av-regra { background: #1C2C2B; border-color: #2A3B39; }
[data-tema="escuro"] .divisao-barra .eletrico, [data-tema="escuro"] .divisao-linha i.eletrico { background: #6CC4B3; }
[data-tema="escuro"] .divisao-barra .acustico, [data-tema="escuro"] .divisao-linha i.acustico { background: #D9A85A; }
[data-tema="escuro"] .fin-kpis .kpi.grupo-volume { --k-cor: #A3B1AC; }
[data-tema="escuro"] .fin-kpis .kpi.grupo-ticket { --k-cor: #6CC4B3; --k-texto: #8AD3C5; }
[data-tema="escuro"] .ng-tile.fechada { border-top-color: #6CC4B3; }
[data-tema="escuro"] .ng-card.r-fechada, [data-tema="escuro"] .ng-card.r-parcial { border-left-color: #6CC4B3; }
[data-tema="escuro"] .px-neg .fechada { --ng-cor: #6CC4B3; }

/* ociosidade: dia útil sem ensaio em verde Veratum listrado (tom frio contra a escala quente) */
.oc { --oc-vazio: #EFEAE0; --oc-ocioso: #0E4D45; --oc-ocioso-2: #DCEAE5; }
[data-tema="escuro"] .oc { --oc-vazio: #22302F; --oc-ocioso: #6CC4B3; --oc-ocioso-2: #1C3B37; }

/* versão de demonstração */
.demo-faixa { background: var(--ouro-t); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; margin: 0 0 16px; font-size: .92rem; }
.demo-faixa b { color: var(--ouro); }