/* =========================================================================
   TEMA VISUAL 3D — Alphafitus OS
   =========================================================================
   Camada de estilo ADICIONAL, carregada depois de `styles.css` (ver
   index.html). Não altera nenhuma classe usada por regra de negócio nem
   nenhum texto gerado pelo app.js — só reskina os componentes visuais que
   já existem (barra lateral, cartões, botões, tabelas, login, modais) com
   profundidade (sombras em camadas, vidro fosco, gradientes, leve
   inclinação 3D ao passar o mouse). Se algum dia quiser voltar ao visual
   plano anterior, basta remover a tag <link> deste arquivo no index.html —
   nada mais precisa mudar.

   Efeitos de mouse (inclinação 3D dos cartões) ficam em tema-3d.js,
   também carregado por cima do app.js sem depender dele.
   ========================================================================= */

:root {
  /* Elevação em camadas — cada nível soma uma sombra "de contato" (curta,
     mais escura) com uma sombra "ambiente" (longa, bem suave), que é como
     luz e profundidade funcionam de verdade — uma sombra só (a antiga
     --sombra, que continua existindo pro que não foi reskinado) sempre
     parece "adesivo colado", nunca objeto flutuando. */
  --elev-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 1px rgba(16, 24, 40, 0.04);
  --elev-2: 0 2px 4px rgba(16, 24, 40, 0.06), 0 8px 20px -6px rgba(16, 24, 40, 0.12);
  --elev-3: 0 4px 10px rgba(16, 24, 40, 0.08), 0 20px 40px -12px rgba(16, 24, 40, 0.20);
  --elev-4: 0 8px 16px rgba(16, 24, 40, 0.10), 0 32px 64px -16px rgba(16, 24, 40, 0.28);
  --brilho-topo: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --brilho-topo-fraco: inset 0 1px 0 rgba(255, 255, 255, 0.35);

  --raio-lg: 16px;
  --raio-xl: 22px;
  --perspectiva: 1400px;

  --grad-azul: linear-gradient(135deg, var(--azul-claro) 0%, var(--azul) 55%, #06231a 100%);
  --grad-dourado: linear-gradient(135deg, #10b981 0%, var(--dourado) 100%);
  --grad-verde: linear-gradient(135deg, #2fa15c 0%, var(--verde) 100%);
  --grad-vermelho: linear-gradient(135deg, #d3554c 0%, var(--vermelho) 100%);

  --anel-foco: 0 0 0 3px color-mix(in srgb, var(--azul-claro) 35%, transparent);

  /* Cores de destaque cíclicas para KPIs/stat cards sem precisar de nenhum
     dado novo vindo do backend — só decoração. */
  --acc-1: var(--azul);
  --acc-2: var(--dourado);
  --acc-3: var(--verde);
  --acc-4: #7c5cbf;
  --acc-5: #1d8fa3;

  /* Cores da marca Alphafitus (extraídas da logo oficial). Até a Fase 96
     eram mantidas separadas de propósito (--verde/--azul já tinham
     significado semântico próprio: "ativo/aprovado" e "cor de ação
     padrão"). A Fase 96 mudou essa decisão a pedido do usuário
     ("padronizar o sistema tudo para essas cores") — --azul/--azul-claro
     em styles.css agora REUSAM --marca-verde/--marca-teal. --verde
     (estado de negócio) continua deliberadamente intocado. Estas duas
     variáveis abaixo continuam existindo por nome próprio porque
     `--grad-marca` (usado no cabeçalho de PDFs/telas com a logo de
     verdade) precisa dos valores exatos, independente de o que --azul
     passe a valer no futuro. */
  --marca-teal: #00b4a3;
  --marca-verde: #00af6b;
  --marca-texto: #373435;
  --grad-marca: linear-gradient(135deg, var(--marca-teal) 0%, var(--marca-verde) 100%);
}

[data-tema="escuro"] {
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
  --elev-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 10px 24px -6px rgba(0, 0, 0, 0.55);
  --elev-3: 0 4px 10px rgba(0, 0, 0, 0.4), 0 24px 48px -14px rgba(0, 0, 0, 0.65);
  --elev-4: 0 8px 20px rgba(0, 0, 0, 0.45), 0 36px 72px -18px rgba(0, 0, 0, 0.7);
  --brilho-topo: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --brilho-topo-fraco: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --grad-azul: linear-gradient(135deg, #5eead4 0%, var(--azul) 55%, #061a13 100%);
  --acc-4: #a48ce0;
  --acc-5: #4db6cc;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- Fundo geral: leve "mesh" com blobs de luz, fixo ---------- */
body {
  background-color: var(--fundo);
  background-image:
    radial-gradient(680px circle at 8% 0%, color-mix(in srgb, var(--azul-claro) 12%, transparent), transparent 60%),
    radial-gradient(620px circle at 100% 18%, color-mix(in srgb, var(--dourado) 10%, transparent), transparent 55%),
    radial-gradient(900px circle at 50% 100%, color-mix(in srgb, var(--azul) 8%, transparent), transparent 60%);
  background-attachment: fixed;
}
[data-tema="escuro"] body {
  background-image:
    radial-gradient(680px circle at 8% 0%, color-mix(in srgb, var(--azul-claro) 16%, transparent), transparent 60%),
    radial-gradient(620px circle at 100% 18%, color-mix(in srgb, var(--dourado) 12%, transparent), transparent 55%),
    radial-gradient(900px circle at 50% 100%, color-mix(in srgb, #061a13 60%, transparent), transparent 60%);
}

/* Custom scrollbar — combina com o tema em vez da barra cinza padrão. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--texto-suave) 35%, transparent);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--texto-suave) 55%, transparent); background-clip: padding-box; }

/* =========================================================================
   TELA DE LOGIN — fundo "aurora" animado + cartão de vidro com inclinação 3D
   ========================================================================= */
.tela-login {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1200px 800px at 20% 15%, #0f6b4a 0%, transparent 55%),
              radial-gradient(1000px 700px at 85% 85%, #06231a 0%, transparent 55%),
              linear-gradient(135deg, var(--azul) 0%, #071912 100%);
  perspective: var(--perspectiva);
}
.tela-login::before, .tela-login::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  animation: af3d-flutuar 16s ease-in-out infinite;
}
.tela-login::before {
  width: 520px; height: 520px; top: -160px; left: -140px;
  background: radial-gradient(circle, #5fd4d0, transparent 70%);
  opacity: 0.4;
}
.tela-login::after {
  width: 460px; height: 460px; bottom: -180px; right: -110px;
  background: radial-gradient(circle, var(--dourado), transparent 70%);
  animation-delay: -8s;
  opacity: 0.5;
}
@keyframes af3d-flutuar {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -24px) scale(1.08); }
}

.cartao-login {
  position: relative;
  z-index: 1;
  background: color-mix(in srgb, var(--superficie) 95%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--raio-xl);
  box-shadow: var(--elev-4), var(--brilho-topo);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
}
[data-tema="escuro"] .cartao-login { border-color: rgba(255, 255, 255, 0.08); }

/* Logo real da Alphafitus — vive DENTRO do cartão que já tem
   `transform-style: preserve-3d` (ver regra `.cartao-stat, .kpi,
   .cartao-login` mais abaixo) e já recebe --rx/--ry ao vivo do
   mousemove (tema-3d.js). `translateZ` positivo aqui faz a logo
   flutuar literalmente à frente da superfície do cartão conforme o
   mouse se move — profundidade de verdade (perspectiva), não só uma
   animação decorativa por cima. */
.logo-marca {
  display: block;
  width: 96px;
  height: auto;
  margin: 0 auto 14px;
  transform: translateZ(46px);
  filter: drop-shadow(0 10px 18px rgba(0, 130, 110, 0.35));
  animation: af3d-logo-flutuar 5s ease-in-out infinite;
  transition: filter 0.2s ease;
}
.cartao-login:hover .logo-marca { filter: drop-shadow(0 16px 26px rgba(0, 130, 110, 0.45)); }
@keyframes af3d-logo-flutuar {
  0%, 100% { transform: translateZ(46px) translateY(0) rotateZ(0deg); }
  50% { transform: translateZ(46px) translateY(-6px) rotateZ(-1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marca { animation: none; }
}

.cartao-login h1 {
  text-align: center;
  background: var(--grad-marca);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-tema="escuro"] .cartao-login h1 { background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; }
.cartao-login .subtitulo { text-align: center; }

/* ---------- Campo de senha com botão "mostrar/ocultar" ---------- */
.campo-senha { position: relative; }
.campo-senha input { padding-right: 42px; }
.alternar-senha {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 8px;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.alternar-senha:hover { opacity: 1; background: color-mix(in srgb, var(--texto) 8%, transparent); }
.alternar-senha:focus-visible { outline: none; opacity: 1; box-shadow: var(--anel-foco); }

/* ---------- Botões: gradiente + relevo físico (afunda ao clicar) ---------- */
.botao {
  background: var(--grad-azul);
  border: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 3px 0 rgba(10, 22, 38, 0.35), var(--elev-2);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease;
}
.botao:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 4px 0 rgba(10, 22, 38, 0.35), var(--elev-3); }
.botao:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 0 rgba(10, 22, 38, 0.35), var(--elev-1); }
.botao:focus-visible { outline: none; box-shadow: var(--anel-foco), 0 3px 0 rgba(10, 22, 38, 0.35), var(--elev-2); }
.botao.perigo { background: var(--grad-vermelho); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 3px 0 rgba(90, 20, 16, 0.4), var(--elev-2); }
.botao.secundario {
  background: color-mix(in srgb, var(--azul) 6%, var(--superficie));
  color: var(--azul); border: 1px solid var(--borda);
  box-shadow: var(--elev-1);
}
.botao.secundario:hover:not(:disabled) { background: color-mix(in srgb, var(--azul) 12%, var(--superficie)); box-shadow: var(--elev-2); transform: translateY(-1px); }
[data-tema="escuro"] .botao.secundario { color: var(--azul-claro); }

/* =========================================================================
   BARRA LATERAL — vidro escuro com profundidade + ícones por rota (CSS puro,
   via atributo [href]/[data-grupo]; nenhum texto do app.js é alterado)
   ========================================================================= */
.barra-lateral {
  /* SEM `position` NEM `z-index` aqui de propósito: a versão para
     celular/tablet em styles.css (Fase 38, @media max-width:900px)
     define `position: fixed` e `z-index: 60` no MESMO seletor
     `.barra-lateral` para o menu virar uma gaveta — como as regras têm a
     mesma especificidade, qualquer valor definido aqui fora de media
     query venceria por vir depois no CSS (mesmo dentro da media query
     original) e quebraria o menu-gaveta do celular. Os dois só são
     redefinidos abaixo dentro de `@media (min-width: 901px)`, faixa em
     que styles.css não mexe em nenhum dos dois. */
  /* Fase 107 — pedido do usuário: menu lateral "inovador, com curvas, com
     detalhes gráficos" (mockup aprovado antes de implementar). Gradiente
     radial+diagonal nas cores da marca (mesmo par teal/verde de
     `--grad-marca`, indo até um verde quase preto) em vez do azul liso
     de antes; os dois brilhos suaves (`.barra-lateral-blob`, posição em
     styles.css) dão a sensação de profundidade orgânica. */
  background:
    radial-gradient(480px 320px at 15% -10%, color-mix(in srgb, var(--marca-teal) 30%, transparent), transparent 60%),
    radial-gradient(420px 380px at 108% 55%, color-mix(in srgb, var(--marca-verde) 26%, transparent), transparent 65%),
    linear-gradient(160deg, var(--marca-teal) -12%, #0b2b20 46%, #071912 100%);
  box-shadow: var(--elev-4);
  overflow: hidden;
}
.barra-lateral-blob-1 { width: 210px; height: 210px; left: -70px; top: 46%; background: radial-gradient(circle, rgba(94,234,212,0.4), transparent 70%); filter: blur(2px); }
.barra-lateral-blob-2 { width: 170px; height: 170px; right: -60px; top: 68%; background: radial-gradient(circle, rgba(0,175,107,0.4), transparent 70%); filter: blur(2px); }
@media (prefers-reduced-motion: no-preference) {
  .barra-lateral-blob { animation: barra-lateral-blob-drift 9s ease-in-out infinite alternate; }
  .barra-lateral-blob-2 { animation-duration: 11s; animation-delay: -3s; }
  @keyframes barra-lateral-blob-drift {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-14px) scale(1.06); }
  }
}
/* Borda direita ORGÂNICA (nervura de folha) em vez da sombra reta de
   antes — só em telas largas (>900px), onde a barra lateral fica sempre
   visível no fluxo normal: em telas estreitas ela vira gaveta com
   `position: fixed` (Fase 38, ver styles.css) e `position: relative`
   aqui entraria em conflito com isso (mesma especificidade, teria que
   vencer por ordem no CSS). */
@media (min-width: 901px) {
  .barra-lateral { position: relative; z-index: 2; }
  .barra-lateral::after {
    content: ""; position: absolute; top: 0; right: -1px; bottom: 0; width: 22px;
    background: var(--superficie);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 800' preserveAspectRatio='none'><path d='M22 0 C8 60 19 110 10 170 C1 230 17 280 12 340 C7 400 20 450 14 510 C8 570 19 620 10 670 C5 720 16 760 22 800 L22 0 Z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 800' preserveAspectRatio='none'><path d='M22 0 C8 60 19 110 10 170 C1 230 17 280 12 340 C7 400 20 450 14 510 C8 570 19 620 10 670 C5 720 16 760 22 800 L22 0 Z'/></svg>");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    pointer-events: none;
  }
}
.barra-lateral .marca {
  position: relative;
  z-index: 2;
  padding: 20px;
  min-height: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
/* Fase 107 — halo de vidro por trás do selo da marca, em vez de um
   segundo quadrado atrás do ícone (que já tem seu próprio fundo 3D) —
   só um brilho suave, para o ícone parecer "flutuando" no gradiente. */
.marca-selo {
  padding: 5px;
  background: radial-gradient(circle, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 70%);
  box-shadow: var(--brilho-topo-fraco);
}
.barra-lateral .marca .marca-icone {
  box-shadow: var(--elev-2), var(--brilho-topo);
}
.barra-lateral .marca small {
  color: rgba(255,255,255,0.68);
}
.barra-lateral .marca small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
  line-height: 1.5;
  max-height: 3em;
  /* O texto completo (histórico de todas as fases) continua no DOM — só a
     apresentação visual é truncada com um degradê no fim, então nada que
     dependa do texto (inclusive os testes automatizados) é afetado. */
  -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
  cursor: help;
}

.barra-lateral nav { padding: 10px 8px; }

/* ---------- Itens de topo (fora de grupo) — Fase 107: pílula orgânica em
   vez do "chip" quadrado anterior — o item ativo fica sólido e claro,
   com um traço luminoso do lado, como se a página "brotasse" dali
   (mesma linguagem do mockup aprovado: curvas + brilho, não caixas). ---------- */
.link-nav {
  border-radius: 999px;
  margin: 3px 0;
  border-left: none !important;
  position: relative;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: var(--brilho-topo-fraco);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.link-nav:hover { background: rgba(255, 255, 255, 0.1); transform: translateX(2px); box-shadow: var(--elev-1), var(--brilho-topo-fraco); }
.link-nav.ativo {
  background: linear-gradient(120deg, #ffffff 0%, #eafff8 100%);
  color: #06302a;
  box-shadow: var(--elev-2);
  font-weight: 700;
}
.link-nav.ativo::before { color: var(--marca-verde); }
.link-nav.ativo::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 20px;
  border-radius: 999px;
  background: #5eead4;
  box-shadow: 0 0 12px 2px rgba(94, 234, 212, 0.7);
}

/* ---------- Grupos do menu (Qualidade, Produção, Estoque...) — Fase 108:
   pedido do usuário foi "igual ao Sidebar que você enviou, sem mudanças
   de cor, exatamente como o Sidebar" (o mockup aprovado na Fase 107).
   O mockup NÃO tinha um "cartão" colorido por grupo (isso era do tema 3D
   antigo, anterior ao mockup) — cada grupo lá era só um rótulo discreto
   em maiúsculas com um ícone pequeno, sem fundo/borda própria, e TODO
   item ativo (de grupo ou não) usava a MESMA pílula clara + traço mint,
   nunca uma cor diferente por módulo. Removido todo o sistema de
   `--cor-grupo`/`--menu-*` (nenhum uso restante — ver histórico no git
   se precisar recuperar a paleta por módulo algum dia). */
.barra-lateral-grupo { margin: 4px 0; }
.link-nav + .barra-lateral-grupo { margin-top: 14px; }
.barra-lateral-grupo + .barra-lateral-grupo { margin-top: 4px; }
/* Pedido do usuário: ao abrir um módulo, os OUTROS módulos (fechados)
   somem da vista — não é só "recolhido", eles deixam de aparecer de
   verdade — e voltam todos assim que o módulo aberto for fechado de
   novo (nesse ponto a condição `:has([open])` deixa de bater com nada,
   então nada fica escondido). Puro CSS, sem precisar de JS adicional. */
.barra-lateral nav:has(.barra-lateral-grupo[open]) .barra-lateral-grupo:not([open]) {
  display: none;
}
.barra-lateral-grupo summary {
  border-radius: 0;
  margin: 0;
  padding: 14px 12px 8px;
  font-family: "Outfit", -apple-system, "Segoe UI", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.15s ease;
}
.barra-lateral-grupo[open] summary,
.barra-lateral-grupo summary:hover { color: rgba(255, 255, 255, 0.85); }
.barra-lateral-grupo summary::after { margin-left: auto; opacity: 0.6; }
.barra-lateral-grupo summary::before {
  width: 12px;
  height: 12px;
  margin-right: 8px;
  opacity: 0.8;
}
.barra-lateral-subitens {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 8px;
}
.barra-lateral-subitem {
  border-radius: 999px;
  margin: 0;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 28px !important;
  font-size: 12.5px !important;
}

/* Fase 123 (pedido do usuário) — 2º nível de aninhamento dentro de um
   grupo (ex.: "Shelf Life" dentro de "Qualidade"). Mesmo `<details>` de
   sempre, só que mais recolhido/indentado — reaproveita quase tudo de
   `.barra-lateral-grupo`, sem duplicar a base. */
.barra-lateral-subgrupo { margin: 2px 0; }
.barra-lateral-subgrupo summary {
  border-radius: 0;
  margin: 0;
  padding: 8px 12px 8px 28px;
  font-family: "Outfit", -apple-system, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.15s ease;
}
.barra-lateral-subgrupo[open] summary,
.barra-lateral-subgrupo summary:hover { color: rgba(255, 255, 255, 0.8); }
.barra-lateral-subgrupo summary::after {
  content: "▸"; font-size: 9px; opacity: 0.6; transition: transform 0.15s ease-out;
  flex-shrink: 0; margin-left: auto;
}
.barra-lateral-subgrupo[open] summary::after { transform: rotate(90deg); }
.barra-lateral-subitem-nivel2 { padding-left: 42px !important; }

/* Fase 107 — ícones por rota trocados de emoji (dependem da fonte de
   emoji instalada no SO, inconsistentes entre Windows/telas) para
   ícones de linha em SVG, mascarados com `currentColor` — herdam a cor
   do texto do próprio item (branco/dourado quando ativo, sem precisar
   de uma cor fixa por ícone). Mesma técnica de seletor por atributo já
   usada aqui (zero mudança em app.js): cada rota/grupo casa um
   `[href="..."]`/`[data-grupo="..."]` com o `mask-image` certo. */
.link-nav[href]:not(.barra-lateral-subitem)::before,
.barra-lateral-grupo > summary::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 10px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.link-nav[href="#/dashboard"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9' rx='1.5'/><rect x='14' y='3' width='7' height='5' rx='1.5'/><rect x='14' y='12' width='7' height='9' rx='1.5'/><rect x='3' y='16' width='7' height='5' rx='1.5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9' rx='1.5'/><rect x='14' y='3' width='7' height='5' rx='1.5'/><rect x='14' y='12' width='7' height='9' rx='1.5'/><rect x='3' y='16' width='7' height='5' rx='1.5'/></svg>"); }
.link-nav[href="#/painel-tempo-real"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h4l2-7 4 14 2-7h6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h4l2-7 4 14 2-7h6'/></svg>"); }
.link-nav[href="#/painel-executivo"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 20V11M10 20V5M15 20v-6M20 20V9'/><path d='M3 20h18'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 20V11M10 20V5M15 20v-6M20 20V9'/><path d='M3 20h18'/></svg>"); }
.link-nav[href="#/itens"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 8l-9-5-9 5 9 5 9-5Z'/><path d='M3 8v8l9 5 9-5V8'/><path d='M12 13v8'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 8l-9-5-9 5 9 5 9-5Z'/><path d='M3 8v8l9 5 9-5V8'/><path d='M12 13v8'/></svg>"); }
.link-nav[href="https://whatts.alphafitus.com.br:8444"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8l-5-5Z'/><path d='M14 3v5h5'/><path d='M9 13h6M9 17h6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8l-5-5Z'/><path d='M14 3v5h5'/><path d='M9 13h6M9 17h6'/></svg>"); }
.link-nav[href="#/conta"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.4'/><path d='M5 20c1-4 4-6 7-6s6 2 7 6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.4'/><path d='M5 20c1-4 4-6 7-6s6 2 7 6'/></svg>"); }
.link-nav[href="#/notificacoes"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 16v-5a6 6 0 10-12 0v5l-2 3h16l-2-3Z'/><path d='M10 21a2 2 0 004 0'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 16v-5a6 6 0 10-12 0v5l-2 3h16l-2-3Z'/><path d='M10 21a2 2 0 004 0'/></svg>"); }
.link-nav[href="https://whatts.alphafitus.com.br:8443"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3h6M10 3v6l-5.5 9.5A1.5 1.5 0 005.8 21h12.4a1.5 1.5 0 001.3-2.5L14 9V3'/><path d='M8 15h8'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3h6M10 3v6l-5.5 9.5A1.5 1.5 0 005.8 21h12.4a1.5 1.5 0 001.3-2.5L14 9V3'/><path d='M8 15h8'/></svg>"); }
/* Fase 123 (Parte 2) — pedido do usuário: "colocar a logo que te mandei
   ali onde está escrito WhatsApp". Diferente dos outros itens acima (uma
   silhueta em traço, mascarada com `currentColor`), aqui é a logo REAL
   do Whatts Inbox ("Seja Alpha" — mesmo ícone do atalho na área de
   trabalho, `whatts_bundled/frontend/static/img/icone-64.png`, copiado
   para `frontend/static/img/whatsapp-logo.png` pois o frontend principal
   é servido pelo próprio Flask do AlphafitusOS, separado do pacote do
   Whatts). Por isso este seletor desliga a técnica de máscara/currentColor
   da regra genérica logo acima e usa a imagem colorida direto — senão a
   logo apareceria toda branca (silhueta), perdendo as cores da marca. */
.link-nav[href="http://localhost:5050"]::before {
  /* !important necessário: a regra genérica logo acima usa
     `.link-nav[href]:not(.barra-lateral-subitem)::before`, que tem
     especificidade MAIOR que este seletor (o :not() carrega a
     especificidade do próprio .barra-lateral-subitem) — sem isso, o
     `background: currentColor` dela venceria e a logo continuaria
     aparecendo como um quadrado branco liso. */
  background: transparent url("img/whatsapp-logo.png") center / contain no-repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border-radius: 4px;
}
[data-grupo="grupo-qualidade"] > summary::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 3v6c0 4.5-3 8-7 9-4-1-7-4.5-7-9V6l7-3Z'/><path d='M9 12l2 2 4-4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 3v6c0 4.5-3 8-7 9-4-1-7-4.5-7-9V6l7-3Z'/><path d='M9 12l2 2 4-4'/></svg>"); }
[data-grupo="grupo-producao"] > summary::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21V11l4 3v-3l4 3v-3l4 3V7l4 3v11H3Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21V11l4 3v-3l4 3v-3l4 3V7l4 3v11H3Z'/></svg>"); }
[data-grupo="grupo-aps"] > summary::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 7v5l3.5 2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 7v5l3.5 2'/></svg>"); }
[data-grupo="grupo-estoque"] > summary::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l9 5-9 5-9-5 9-5Z'/><path d='M3 13l9 5 9-5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l9 5-9 5-9-5 9-5Z'/><path d='M3 13l9 5 9-5'/></svg>"); }
[data-grupo="grupo-materiais"] > summary::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 15a8 8 0 0116 0Z'/><path d='M2 15h20'/><path d='M11 7V4h2v3'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 15a8 8 0 0116 0Z'/><path d='M2 15h20'/><path d='M11 7V4h2v3'/></svg>"); }
[data-grupo="grupo-comercial"] > summary::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8h12l-1 12H7L6 8Z'/><path d='M9 8V6a3 3 0 016 0v2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8h12l-1 12H7L6 8Z'/><path d='M9 8V6a3 3 0 016 0v2'/></svg>"); }
/* Fase 148 — pedido do usuário: ícone de frasquinho (pote de suplemento
   com tampa) pro grupo "Monte sua linha", que estava sem nenhum ícone
   próprio (caindo no quadrado sólido genérico do seletor-base acima). */
[data-grupo="grupo-terceirizacao"] > summary::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='2' width='6' height='3' rx='1'/><path d='M9 5v2.3a2 2 0 00-2 2V19a3 3 0 003 3h4a3 3 0 003-3V9.3a2 2 0 00-2-2V5'/><path d='M6 13h12'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='2' width='6' height='3' rx='1'/><path d='M9 5v2.3a2 2 0 00-2 2V19a3 3 0 003 3h4a3 3 0 003-3V9.3a2 2 0 00-2-2V5'/><path d='M6 13h12'/></svg>"); }
[data-grupo="grupo-financeiro"] > summary::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7a2 2 0 012-2h13a1 1 0 011 1v3'/><path d='M3 7v11a2 2 0 002 2h14a1 1 0 001-1v-4'/><path d='M16 13h4v3h-4a1.5 1.5 0 010-3Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7a2 2 0 012-2h13a1 1 0 011 1v3'/><path d='M3 7v11a2 2 0 002 2h14a1 1 0 001-1v-4'/><path d='M16 13h4v3h-4a1.5 1.5 0 010-3Z'/></svg>"); }
[data-grupo="grupo-relatorios"] > summary::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 16l5-6 4 4 6-8'/><path d='M15 6h4v4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 16l5-6 4 4 6-8'/><path d='M15 6h4v4'/></svg>"); }
[data-grupo="grupo-administracao"] > summary::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='2.6'/><path d='M19 12a7 7 0 00-.2-1.6l2-1.5-2-3.4-2.3.9a7 7 0 00-2.7-1.6L13.4 2h-2.8l-.4 2.8a7 7 0 00-2.7 1.6l-2.3-.9-2 3.4 2 1.5A7 7 0 004.8 12c0 .5 0 1 .2 1.6l-2 1.5 2 3.4 2.3-.9c.8.7 1.7 1.3 2.7 1.6l.4 2.8h2.8l.4-2.8a7 7 0 002.7-1.6l2.3.9 2-3.4-2-1.5c.1-.5.2-1 .2-1.6Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='2.6'/><path d='M19 12a7 7 0 00-.2-1.6l2-1.5-2-3.4-2.3.9a7 7 0 00-2.7-1.6L13.4 2h-2.8l-.4 2.8a7 7 0 00-2.7 1.6l-2.3-.9-2 3.4 2 1.5A7 7 0 004.8 12c0 .5 0 1 .2 1.6l-2 1.5 2 3.4 2.3-.9c.8.7 1.7 1.3 2.7 1.6l.4 2.8h2.8l.4-2.8a7 7 0 002.7-1.6l2.3.9 2-3.4-2-1.5c.1-.5.2-1 .2-1.6Z'/></svg>"); }

/* ---------- Rodapé: cartão de identidade do usuário (Fase 107) ---------- */
.rodape-lateral-usuario {
  position: relative;
  z-index: 2;
  border-top-color: rgba(255, 255, 255, 0.1);
}
.rodape-lateral-avatar {
  background: linear-gradient(145deg, var(--marca-teal), var(--marca-verde));
  color: #06302a;
  box-shadow: var(--elev-1), var(--brilho-topo-fraco);
}
.versao-sistema-rodape { position: relative; z-index: 2; }

/* =========================================================================
   BARRA SUPERIOR — vidro fosco "flutuando" sobre o conteúdo
   ========================================================================= */
.barra-superior {
  background: color-mix(in srgb, var(--superficie) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--borda);
  box-shadow: var(--elev-1);
  position: sticky; top: 0; z-index: 10;
}
.botao-icone { border-radius: 10px; padding: 7px 9px; transition: background 0.15s ease, transform 0.15s ease; }
.botao-icone:hover { background: color-mix(in srgb, var(--azul) 8%, transparent); transform: translateY(-1px); }
.barra-superior .botao.secundario.pequeno { box-shadow: var(--elev-1); }

/* =========================================================================
   CARTÕES — elevação em camadas + leve "vidro" + inclinação 3D via JS
   (ver tema-3d.js: aplica --mx/--my/--rx/--ry usados aqui embaixo)
   ========================================================================= */
.cartao, .modal, .subcartao {
  border-radius: var(--raio-lg);
  border-color: color-mix(in srgb, var(--borda) 70%, transparent);
  box-shadow: var(--elev-2), var(--brilho-topo-fraco);
}

.cartao-stat, .kpi, .cartao-login {
  transform-style: preserve-3d;
  transform: perspective(var(--perspectiva)) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
  transition: transform 0.12s ease-out, box-shadow 0.25s ease;
  will-change: transform;
}

.cartao-stat {
  border-radius: var(--raio-lg);
  box-shadow: var(--elev-2), var(--brilho-topo-fraco);
  border-color: color-mix(in srgb, var(--borda) 60%, transparent);
}
.cartao-stat:hover { box-shadow: var(--elev-4), var(--brilho-topo-fraco); }
.cartao-stat .stat-icone { box-shadow: var(--elev-1); }

/* Faixa de cor cíclica no topo dos KPIs — puro CSS, sem depender de nenhum
   dado novo do backend (a ordem em que os cartões já vêm do app.js). */
.kpi {
  border-radius: 12px;
  background: var(--superficie);
  box-shadow: var(--elev-1), var(--brilho-topo-fraco);
  border-top: 3px solid var(--acc-1);
  position: relative;
  overflow: hidden;
}
.kpi:hover { box-shadow: var(--elev-3), var(--brilho-topo-fraco); }
.grade-kpi .kpi:nth-of-type(5n+1) { border-top-color: var(--acc-1); }
.grade-kpi .kpi:nth-of-type(5n+2) { border-top-color: var(--acc-2); }
.grade-kpi .kpi:nth-of-type(5n+3) { border-top-color: var(--acc-3); }
.grade-kpi .kpi:nth-of-type(5n+4) { border-top-color: var(--acc-4); }
.grade-kpi .kpi:nth-of-type(5n+5) { border-top-color: var(--acc-5); }
.kpi-valor {
  background: var(--grad-azul);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-tema="escuro"] .kpi-valor { background: linear-gradient(135deg, #cfe0f5, #7fb0e6); -webkit-background-clip: text; background-clip: text; }

.grade-stat { gap: 20px; }

/* =========================================================================
   TABELAS, SELOS, MODAIS — acabamento fino
   ========================================================================= */
table { border-radius: 10px; overflow: hidden; }
th { background: color-mix(in srgb, var(--azul) 4%, transparent); }
tr:hover td { transform: none; }
tbody tr { transition: background 0.12s ease; }

.selo { box-shadow: var(--elev-1); }
.selo.ativo { box-shadow: var(--elev-1), 0 0 0 1px color-mix(in srgb, var(--verde) 25%, transparent); }
.selo.bloqueado { box-shadow: var(--elev-1), 0 0 0 1px color-mix(in srgb, var(--vermelho) 25%, transparent); }

.fundo-modal { backdrop-filter: blur(3px); }
.modal { box-shadow: var(--elev-4); border: 1px solid color-mix(in srgb, var(--borda) 60%, transparent); }

.cartao-resumo-links a { border-radius: 8px; padding: 10px 8px; }
.cartao-resumo-links a:hover { background: color-mix(in srgb, var(--azul) 5%, transparent); transform: translateX(2px); }

.lista-progresso { box-shadow: var(--elev-1); border-radius: var(--raio-lg); }

/* Painel/memorial: manter o mesmo tratamento elevado. */
.memorial-nav { box-shadow: var(--elev-2); }