/* GuerraTech — tema CLARO (Edson 13/09: "um prata bem claro com o mesmo design, só mudando as paletas").
   O escuro é o padrão (tokens em cada página); aqui só o que muda quando html[data-theme="light"]. */
/* declara os dois esquemas: evita o "escurecer sites automaticamente" do Chrome/Samsung no celular
   repintar nossa versão clara (e vice-versa) — o site é quem manda na paleta */
html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
@media (prefers-color-scheme: light){html{color-scheme:dark}}
html[data-theme="light"], html[data-theme="light"] body.gt, html[data-theme="light"] :root{
  /* PRATA do /gestao (Edson 13/09: "o modelo claro que fiz na calculadora é com fundo prata"):
     workspace #d8dde4 · cartões #f7f9fb · tinta #101828 · secundário #475467 (frontend_gestao_novo/css/app.css) */
  --bg:#d8dde4; --panel:#f7f9fb; --panel2:#e7ebf3; --border:#aeb9c8;
  --text:#101828; --muted:#475467; --accent:#0a6fd6; --accent2:#0a5cb5;
  --ok:#12864e; --warn:#b26a00; --bad:#dc2626;
  --line:rgba(100,116,139,.45); --glow:rgba(10,111,214,.22);
  --c-verde:#16a34a; --c-verde2:#12864e; --c-vermelho:#dc2626; --c-ambar:#d97706; --c-azul:#0a6fd6;
  --c-tinta:#101828; --c-tinta2:#475467; --c-cinza:#8a97ab; --c-cinza2:#64748b; --c-cinza3:#94a3b8; --c-cinza4:#445568;
  --c-borda:#c3ccd8; --c-borda2:#e2e8f0; --c-claro:#f8fafc; --ink:#101828;
}
html[data-theme="light"] body{background:var(--bg);color:var(--text)}
/* partículas: brancas no escuro → grafite discreto no claro */
html[data-theme="light"] #estrelas{filter:invert(1);opacity:.22}
/* quadriculado: linhas escuras discretas */
html[data-theme="light"] body::before, html[data-theme="light"] .malha{
  background-image:radial-gradient(rgba(40,60,90,.22) .7px,transparent .8px),
    linear-gradient(rgba(40,60,90,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(40,60,90,.10) 1px,transparent 1px)!important}
html[data-theme="light"] body::after{background-image:none!important}
/* barras do topo (vidro claro) */
html[data-theme="light"] .gt-top, html[data-theme="light"] .topo, html[data-theme="light"] #menu{
  background:rgba(216,221,228,.85)!important;border-bottom-color:rgba(110,138,170,.6)!important}
html[data-theme="light"] .gt-login{background:rgba(216,221,228,.88)}
html[data-theme="light"] #menu nav a.m-pill{color:var(--text);background:rgba(246,248,251,.7)}
html[data-theme="light"] #menu nav a.m-pill.principal, html[data-theme="light"] #menu nav a.m-pill.principal:hover{background:var(--accent);border-color:var(--accent);color:#fff}
/* botões */
html[data-theme="light"] .bt{background:rgba(246,248,251,.95)}
html[data-theme="light"] .bt.pri, html[data-theme="light"] .bt.pri .k{color:#fff;border-color:rgba(255,255,255,.4)}
html[data-theme="light"] .gt-btn.p{color:#fff}
/* rótulos cravados em azul-cinza escuro do modelo 4 */
html[data-theme="light"] .nav button i, html[data-theme="light"] .kpi .rot span, html[data-theme="light"] .fila .cab, html[data-theme="light"] .fila .idx,
html[data-theme="light"] .atalho i, html[data-theme="light"] .tabela th, html[data-theme="light"] .tabela .idx, html[data-theme="light"] .abas button b,
html[data-theme="light"] .card .num::before, html[data-theme="light"] .card .dias, html[data-theme="light"] .seg-status .meta, html[data-theme="light"] footer .conf{color:#4b5f76!important}
/* onda GI e pulso: traço branco → azul profundo */
html[data-theme="light"] .gt-pulso .ponta{fill:#0a3c70;filter:drop-shadow(0 0 4px rgba(10,60,112,.5))}
html[data-theme="light"] .gt-onda .gi{color:var(--text)}html[data-theme="light"] .gt-onda .gi span{color:var(--accent)}
html[data-theme="light"] .gt-onda .viva{stroke:#0a3c70}
html[data-theme="light"] svg [fill="#ffffff"], html[data-theme="light"] svg [fill="#fff"]{fill:#0a3c70}
html[data-theme="light"] svg [stroke="#ffffff"], html[data-theme="light"] svg [stroke="#fff"]{stroke:#0a3c70}
/* logo prateado precisa de sombra pra não sumir no prata */
html[data-theme="light"] img[src*="guerratech-g"]{filter:drop-shadow(0 2px 5px rgba(10,30,60,.55)) drop-shadow(0 0 14px rgba(10,111,214,.25))!important}
html[data-theme="light"] #vstamp{color:#128a48!important;border-color:rgba(18,138,72,.45)!important}
/* painéis chanfrados: brilho interno branco em vez de véu escuro */
html[data-theme="light"] .cartao::before, html[data-theme="light"] .passo::before, html[data-theme="light"] .kpi::before,
html[data-theme="light"] .lista-ploomes li::before, html[data-theme="light"] .hud::before{
  background:linear-gradient(180deg,rgba(255,255,255,.7),transparent 40%),var(--panel)}
/* ===== botão de tema (mesmo em toda página) ===== */
#gt-tema{position:fixed;right:14px;bottom:14px;z-index:70;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:600 .68rem/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);background:var(--panel);border:1px solid var(--border);padding:9px 14px 9px 12px;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));transition:background .2s,color .2s}
#gt-tema:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
#gt-tema .sol{display:none}#gt-tema .lua{display:inline}
html[data-theme="light"] #gt-tema .sol{display:inline}html[data-theme="light"] #gt-tema .lua{display:none}
@media (max-width:700px){#gt-tema{right:10px;bottom:10px;padding:8px 10px}#gt-tema span.t{display:none}}
/* ===== ajustes vistos nas fotos (13/09) ===== */
html[data-theme="light"] .hero{background:radial-gradient(1400px 700px at 70% -10%,#c9d1dc 0%,transparent 60%),radial-gradient(900px 500px at 15% 110%,#cfd8e6 0%,transparent 55%),var(--bg)!important}
html[data-theme="light"] #menu .m-marca, html[data-theme="light"] #menu nav a:hover, html[data-theme="light"] #menu nav a.m-pill:hover, html[data-theme="light"] #m-burger{color:var(--text)}
html[data-theme="light"] #m-burger{border-color:var(--border)}
html[data-theme="light"] .gi-brand, html[data-theme="light"] .gi-rotulo, html[data-theme="light"] .gi-label, html[data-theme="light"] .hero .gi{color:var(--text)}
html[data-theme="light"] .bt.pri{background:var(--accent)!important;border-color:var(--accent)!important}
/* faixa GUERRA INTELLIGENCE no prata: traço e rótulos mais firmes */
html[data-theme="light"] .gi-wave-path{stroke:#0a3c70}
html[data-theme="light"] .gi-wave-svg path[stroke="rgba(84,150,255,.24)"]{stroke:rgba(10,111,214,.35)}
html[data-theme="light"] .gi-brand .intel{color:var(--accent)}
html[data-theme="light"] .gi-legenda b{color:#128a48}
html[data-theme="light"] .gi-wave-svg [stroke="#9fc4ff"]{stroke:#0a6fd6}

/* ===== 14/09 — tom INOX (Edson/Lucas: "nem muito claro nem muito escuro… um prateado que lembre inox, com efeitos bonitos") =====
   Aplica em cima do esquema claro: html[data-theme="light"][data-tone="inox"]. Fundo aço escovado em meio-tom,
   painéis com brilho de metal, tinta escura, acento azul-aço. É o padrão do site; o escuro fica no botão. */
html[data-tone="inox"], html[data-tone="inox"] body.gt, html[data-tone="inox"] :root{
  --bg:#a3adb8; --panel:#dde2e8; --panel2:#cfd6de; --border:#7d8b9b;
  --text:#0f1a26; --muted:#3f4f61; --accent:#0b62c4; --accent2:#0a4f9e;
  --ok:#0f7a45; --warn:#9a5a00; --bad:#c81e2e;
  --line:rgba(60,80,104,.40); --glow:rgba(11,98,196,.22);
  --c-cinza:#6d7c8e; --c-borda:#aeb9c6; --c-borda2:#c6cfd8; --c-claro:#e9edf1; --ink:#0f1a26;
}
/* 14/09 (Edson: "escuro no fundo não tá legal… algo tecnológico e bonito, contraste entre o menu e o fundo"):
   fundo = chapa de inox clara e uniforme, com reflexo de luz vindo de cima à esquerda e escovado fino; sem faixa escura.
   menu = barra de aço grafite (escura) com texto claro — contrasta com a página e combina com os painéis prateados. */
html[data-tone="inox"]{--bg:#cdd4dc}
html[data-tone="inox"] body{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),
    radial-gradient(1400px 700px at 18% -10%,rgba(255,255,255,.75),transparent 60%),
    radial-gradient(900px 500px at 100% 100%,rgba(11,98,196,.10),transparent 60%),
    linear-gradient(180deg,#dde3e9 0%,#cfd6de 45%,#c6cdd6 100%);
  background-attachment:fixed;color:var(--text)}
html[data-tone="inox"] .rodape{color:#4a5a6c;border-top-color:rgba(70,90,115,.35)}
html[data-tone="inox"] .topo{
  --text:#eef3f8;--muted:#aebccd;--line:rgba(255,255,255,.14);color:var(--text);
  background:linear-gradient(180deg,#2a3542 0%,#1c2632 100%)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 8px 24px rgba(15,26,38,.28)}
html[data-tone="inox"] .topo::after{background:linear-gradient(90deg,transparent,rgba(46,163,255,.9) 30%,rgba(47,213,121,.6) 70%,transparent)}
html[data-tone="inox"] .topo .marca b{color:#5fb3ff}html[data-tone="inox"] .topo .marca small{color:#aebccd;border-color:rgba(255,255,255,.18)}
html[data-tone="inox"] .topo .nav button{color:#aebccd}html[data-tone="inox"] .topo .nav button i{color:#7d93ab}
html[data-tone="inox"] .topo .nav button.on,html[data-tone="inox"] .topo .nav button:hover{color:#fff}
html[data-tone="inox"] .topo #relogio{color:#fff}
html[data-tone="inox"] .topo .avatar{color:#5fb3ff;border-color:rgba(95,179,255,.55);background:rgba(95,179,255,.10)}
html[data-tone="inox"] .topo #gt-sair{color:#aebccd;border-color:rgba(255,255,255,.2)}html[data-tone="inox"] .topo #gt-sair:hover{color:#ff8a96;border-color:#ff8a96}
html[data-tone="inox"] .topo img[src*="guerratech-g"]{filter:drop-shadow(0 0 10px rgba(95,179,255,.45))!important}
html[data-tone="inox"] #estrelas{filter:invert(1);opacity:.16}
html[data-tone="inox"] body::before, html[data-tone="inox"] .malha{
  background-image:radial-gradient(rgba(30,45,65,.20) .7px,transparent .8px),
    linear-gradient(rgba(30,45,65,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(30,45,65,.08) 1px,transparent 1px)!important}
/* painel = chapa de inox escovado: borda em gradiente metálico, miolo com reflexo suave e escovado fino */
html[data-tone="inox"] .hud{background:linear-gradient(155deg,#f2f5f8,#8a97a6 26%,#6f7e90 50%,#9aa6b3 74%,#eef2f6)}
html[data-tone="inox"] .hud::before{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.25) 26%,rgba(0,0,0,.035) 62%,rgba(255,255,255,.40)),
    var(--panel)}
html[data-tone="inox"] .hud::after{--c:rgba(11,98,196,.7)}
html[data-tone="inox"] .hud.quente{background:linear-gradient(155deg,rgba(11,98,196,.85),#8a97a6 30%,#6f7e90 70%,rgba(15,122,69,.6))}
html[data-tone="inox"] .cartao::before, html[data-tone="inox"] .passo::before, html[data-tone="inox"] .kpi::before, html[data-tone="inox"] .lista-ploomes li::before{
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 4px),linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.2) 30%,rgba(0,0,0,.03) 65%,rgba(255,255,255,.35)),var(--panel)}
/* campos, chips e botões com relevo */
html[data-tone="inox"] .inp, html[data-tone="inox"] .pp-cli input, html[data-tone="inox"] .pp-cli select, html[data-tone="inox"] .card, html[data-tone="inox"] .fam-chip{
  background:linear-gradient(180deg,#f3f6f9,#e3e8ee);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(20,35,55,.12)}
html[data-tone="inox"] .fam-chip.on, html[data-tone="inox"] .card.aberto{background:linear-gradient(180deg,#e2ecf8,#cfdff2);border-color:var(--accent)}
html[data-tone="inox"] .bt{background:linear-gradient(180deg,#f6f8fa,#dfe5ec);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(20,35,55,.16)}
html[data-tone="inox"] .bt.pri{background:linear-gradient(180deg,#2f86e0,#0b62c4);color:#fff;border-color:#0a4f9e;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 2px 8px rgba(11,98,196,.35)}
html[data-tone="inox"] .seg button.on, html[data-tone="inox"] .opc.on{background:linear-gradient(180deg,#dbe7f6,#c7d8ee)}
html[data-tone="inox"] .filtro{background:linear-gradient(180deg,#e9edf2,#d6dde5)}
html[data-tone="inox"] .kicker, html[data-tone="inox"] .card .num{color:var(--accent)}
html[data-tone="inox"] #pp-barra{background:linear-gradient(180deg,#f0f3f6,#d6dde5);color:var(--text);border-color:var(--border)}
html[data-tone="inox"] #gt-tema{background:linear-gradient(180deg,#f0f3f6,#d6dde5)}

/* ===== 14/09 — INOX "tecnológico": piso de grade em perspectiva no fundo, varredura de luz no menu ===== */
html[data-tone="inox"] .malha{
  background-image:linear-gradient(rgba(20,40,70,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(20,40,70,.16) 1px,transparent 1px)!important;
  background-size:56px 56px!important;
  transform:perspective(700px) rotateX(62deg) scale(1.6);transform-origin:50% 100%;
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.25) 45%,#000 100%)!important;-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.25) 45%,#000 100%);
  mask-composite:initial;opacity:.75}
html[data-tone="inox"] .brilho{display:none}
html[data-tone="inox"] .topo::after{
  background:linear-gradient(90deg,transparent 0%,rgba(46,163,255,0) 20%,rgba(46,163,255,.95) 45%,rgba(47,213,121,.8) 55%,rgba(46,163,255,0) 80%,transparent 100%);
  background-size:60% 100%;background-repeat:no-repeat;animation:gtVarre 7s ease-in-out infinite}
@keyframes gtVarre{0%{background-position:-60% 0}100%{background-position:160% 0}}
html[data-tone="inox"] .topo{background:linear-gradient(180deg,#26313e 0%,#182129 100%)!important}
html[data-tone="inox"] .topo::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 55%)}

/* ===== 14/09 — "COCKPIT" (ideia 2, Edson: "faça o design que você deu como dica no modelo claro"):
   menu e rodapé em grafite, página em inox claro, e o painel EM USO acende uma borda de luz azul. ===== */
html[data-tone="inox"] .rodape{background:linear-gradient(180deg,#26313e,#182129);color:#aebccd;border-top:1px solid rgba(255,255,255,.08);margin-top:24px}
html[data-tone="inox"] .rodape a{color:#aebccd}
html[data-tone="inox"] .hud{transition:background .35s ease,box-shadow .35s ease,filter .35s ease}
html[data-tone="inox"] .hud:focus-within, html[data-tone="inox"] .hud.ativo{
  background:linear-gradient(155deg,#5fb3ff,#1d7fe0 30%,#0b62c4 50%,#1d7fe0 70%,#5fb3ff);
  box-shadow:0 0 0 1px rgba(46,163,255,.25),0 0 28px rgba(46,163,255,.28),0 10px 30px rgba(15,26,38,.16)}
html[data-tone="inox"] .hud:focus-within::after, html[data-tone="inox"] .hud.ativo::after{--c:rgba(11,98,196,1)}
html[data-tone="inox"] .hud:hover:not(:focus-within){box-shadow:0 0 0 1px rgba(46,163,255,.14),0 8px 24px rgba(15,26,38,.12)}
html[data-tone="inox"] main{padding-bottom:40px}

/* ===== 14/09 — mais vida no fundo (Edson: "efeitos mais visíveis, linhas azuis animadas; sem o cinza escuro embaixo") ===== */
html[data-tone="inox"] .rodape{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0));color:#4a5a6c;border-top:1px solid rgba(70,90,115,.35);margin-top:24px}
html[data-tone="inox"] .rodape a{color:#4a5a6c}
/* quadriculado da marca na página TODA (Edson 14/09: "gostei mais do quadriculado nela toda"): pontos finos + linhas a 64px, em azul-aço */
html[data-tone="inox"] .malha{
  background-image:radial-gradient(rgba(11,98,196,.13) .7px,transparent .8px),linear-gradient(rgba(11,98,196,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(11,98,196,.055) 1px,transparent 1px)!important;
  background-size:7px 7px,64px 64px,64px 64px!important;
  transform:none;mask-image:none!important;-webkit-mask-image:none;opacity:1;animation:none}
/* partículas: azul vivo em vez de invertidas e apagadas */
html[data-tone="inox"] #estrelas{filter:none;opacity:.45}
/* brilho: um facho de luz suave que passeia pela página */
html[data-tone="inox"] .brilho{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(520px 520px at var(--bx,20%) var(--by,30%),rgba(95,179,255,.28),rgba(95,179,255,.10) 40%,transparent 70%);
  animation:gtFacho 18s ease-in-out infinite alternate;mix-blend-mode:multiply}
@keyframes gtFacho{0%{--bx:15%;--by:25%}50%{--bx:70%;--by:60%}100%{--bx:85%;--by:20%}}
@property --bx{syntax:'<percentage>';inherits:false;initial-value:20%}
@property --by{syntax:'<percentage>';inherits:false;initial-value:30%}
@media (prefers-reduced-motion:reduce){html[data-tone="inox"] .malha,html[data-tone="inox"] .brilho{animation:none}}