/* =========================================================================
   Monitor Corporativo — design system
   Tema escuro é o padrão; html[data-tema="claro"] troca apenas as variáveis,
   então nenhum componente precisa saber qual tema está ativo.
   ========================================================================= */

:root{
  /* superfícies */
  --bg:#070b16; --bg2:#0c1322; --surface:#111a2e; --surface2:#18243d; --surface3:#20304f;
  --border:#233350; --border2:#31456a;
  /* texto */
  --text:#e9eff9; --muted:#9aa9c6; --faint:#66748f;
  /* marca */
  --brand:#5b8cff; --brand2:#3d63f5; --brandink:#050a1a;
  /* semânticas */
  --good:#34d399; --good-bg:#0c2a1f; --good-bd:#1c6b4d; --good-ink:#6ee7b7;
  --warn:#fbbf24; --warn-bg:#2c2410; --warn-bd:#7a5c1a; --warn-ink:#fcd34d;
  --bad:#fb5a5a;  --bad-bg:#2c1416;  --bad-bd:#7a1f24;  --bad-ink:#fca5a5;
  --info-bg:#0e2338; --info-bd:#1c4570;
  /* paleta de gráficos — lida em runtime pelo bi.js */
  --c1:#5b8cff; --c2:#34d399; --c3:#fbbf24; --c4:#fb5a5a;
  --c5:#a78bfa; --c6:#f472b6; --c7:#fb923c; --c8:#22d3ee;
  --grid:#233350;
  --halo:
    radial-gradient(900px 520px at 82% -12%,color-mix(in srgb,var(--brand) 13%,transparent) 0,transparent 62%),
    radial-gradient(760px 460px at 8% 4%,color-mix(in srgb,#a78bfa 9%,transparent) 0,transparent 58%);
  /* elevação */
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 6px 24px rgba(0,0,0,.35);
  --shadow-lg:0 14px 40px rgba(0,0,0,.45);
  --shadow-xl:0 24px 60px rgba(0,0,0,.55);
  /* brilho de acento — o "neon" do sistema, sempre derivado de uma cor local (--kc)
     para que card, botão e painel usem a mesma fórmula em vez de sombras avulsas */
  --glow:0 0 0 1px color-mix(in srgb,var(--kc,var(--brand)) 32%,transparent),
         0 8px 30px -8px color-mix(in srgb,var(--kc,var(--brand)) 40%,transparent);
  --glow-forte:0 0 0 1px color-mix(in srgb,var(--kc,var(--brand)) 55%,transparent),
         0 12px 42px -10px color-mix(in srgb,var(--kc,var(--brand)) 60%,transparent);
  /* opacidade da marca-d'água dos cards — o tema claro precisa de bem menos */
  --marca-agua:.06;
  /* escala de espaçamento — usada em todo o painel */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:22px; --e6:32px;
  /* raios */
  --r-sm:9px; --r:11px; --r-md:14px; --r-lg:18px; --r-full:999px;
  /* controles: uma altura só para botões, inputs e selects */
  --h-controle:38px; --h-controle-sm:32px;
  /* layout */
  --larg-nav:252px; --larg-nav-min:68px; --alt-topo:58px;
  --transicao:.18s cubic-bezier(.4,0,.2,1);
}
html[data-tema="claro"]{
  --bg:#eef2f8; --bg2:#ffffff; --surface:#ffffff; --surface2:#f5f8fc; --surface3:#eaf0f8;
  --border:#e3e9f2; --border2:#ccd7e8;
  --text:#101a2e; --muted:#5c6a83; --faint:#8a99b2;
  --brand:#3d63f5; --brand2:#2947d6; --brandink:#ffffff;
  --good:#12a150; --good-bg:#dcfce7; --good-bd:#86efac; --good-ink:#15803d;
  --warn:#d68407; --warn-bg:#fef3c7; --warn-bd:#fcd34d; --warn-ink:#b45309;
  --bad:#e5484d;  --bad-bg:#fee2e2;  --bad-bd:#fca5a5;  --bad-ink:#b91c1c;
  --info-bg:#e6efff; --info-bd:#9dbcff;
  --c1:#3d63f5; --c2:#12a150; --c3:#d68407; --c4:#e5484d;
  --c5:#7c3aed; --c6:#db2777; --c7:#ea580c; --c8:#0891b2;
  --grid:#e3e9f2;
  --halo:
    radial-gradient(900px 520px at 82% -12%,color-mix(in srgb,var(--brand) 10%,transparent) 0,transparent 62%),
    radial-gradient(760px 460px at 8% 4%,color-mix(in srgb,#7c3aed 7%,transparent) 0,transparent 58%);
  /* no claro o brilho é quase só uma borda colorida: neon em fundo branco vira borrão */
  --glow:0 0 0 1px color-mix(in srgb,var(--kc,var(--brand)) 30%,transparent),
         0 6px 20px -8px color-mix(in srgb,var(--kc,var(--brand)) 32%,transparent);
  --glow-forte:0 0 0 1px color-mix(in srgb,var(--kc,var(--brand)) 45%,transparent),
         0 10px 28px -10px color-mix(in srgb,var(--kc,var(--brand)) 42%,transparent);
  --marca-agua:.045;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 2px 10px rgba(15,23,42,.06);
  --shadow-lg:0 12px 32px rgba(15,23,42,.10);
  --shadow-xl:0 24px 60px rgba(15,23,42,.16);
}

*{box-sizing:border-box}
/* O atributo [hidden] vem do navegador com especificidade (0,0,1) e QUALQUER
   regra de classe com `display` o vence — foi assim que o painel do robô
   continuava na tela depois de fechar, e que as opções filtradas do combo
   continuavam visíveis. Aqui `hidden` significa sempre "não mostre", então
   esta regra é a única fonte da verdade. Quem precisar de animação de saída
   usa classe própria, não o atributo. */
[hidden]{display:none!important}
/* Rede de segurança para ícones: um <svg> sem largura definida vira 300x150px no
   navegador. Esta regra vem ANTES dos componentes de propósito — todas as regras
   específicas adiante (.btn svg, .nav-item svg, ...) têm a mesma especificidade
   e, por virem depois, continuam vencendo. */
svg:not([width]){width:16px;height:16px;flex-shrink:0}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--halo),var(--bg);
  color:var(--text);
  font:15px/1.5 'Inter','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:'cv11','ss01';letter-spacing:-.1px;
  min-height:100vh;
  overflow-x:hidden;               /* nenhuma tela rola na horizontal */
}
body.sem-scroll{overflow:hidden}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:'JetBrains Mono',Consolas,monospace;font-size:.85em;background:var(--bg2);
  padding:2px 6px;border-radius:6px;border:1px solid var(--border);word-break:break-word}
h1,h2,h3{letter-spacing:-.2px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* =========================================================================
   SHELL — sidebar + conteúdo
   ========================================================================= */
.shell{display:flex;min-height:100vh}

.nav-lateral{
  position:fixed;inset:0 auto 0 0;width:var(--larg-nav);z-index:60;
  display:flex;flex-direction:column;
  background:var(--surface);border-right:1px solid var(--border);
  transition:width var(--transicao),transform var(--transicao);
}
.nav-topo{
  height:var(--alt-topo);flex-shrink:0;
  display:flex;align-items:center;gap:var(--e3);
  padding:0 var(--e4);border-bottom:1px solid var(--border);
}
.marca{display:flex;align-items:center;gap:var(--e3);font-weight:700;font-size:15px;
  color:var(--text);min-width:0;overflow:hidden}
.marca:hover{text-decoration:none}
.marca .logo{width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--brandink)}
.marca .logo svg{width:18px;height:18px}
.marca .txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.marca .txt b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marca .txt span{font-size:10.5px;color:var(--faint);font-weight:600;letter-spacing:.5px;text-transform:uppercase}

.nav-corpo{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--e3) var(--e3) var(--e4)}
.nav-corpo::-webkit-scrollbar{width:6px}
.nav-corpo::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}

.nav-secao{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  color:var(--faint);padding:var(--e4) var(--e3) var(--e2);white-space:nowrap}

/* item de menu — mesma caixa para link e botão de grupo */
.nav-item,.nav-grupo-btn{
  display:flex;align-items:center;gap:var(--e3);width:100%;
  padding:9px var(--e3);border-radius:var(--r-sm);
  color:var(--muted);font-weight:500;font-size:13.5px;text-align:left;
  background:transparent;border:none;cursor:pointer;font-family:inherit;
  transition:background var(--transicao),color var(--transicao);
  position:relative;
}
.nav-item svg,.nav-grupo-btn > svg{width:17px;height:17px;flex-shrink:0;opacity:.9}
.nav-item .rotulo,.nav-grupo-btn .rotulo{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item:hover,.nav-grupo-btn:hover{background:var(--surface2);color:var(--text);text-decoration:none}
.nav-item.ativo{
  background:linear-gradient(90deg,color-mix(in srgb,var(--kc,var(--brand)) 17%,transparent),
                                   color-mix(in srgb,var(--kc,var(--brand)) 4%,transparent));
  color:var(--kc,var(--brand));font-weight:600;
}
.nav-item.ativo::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--kc,var(--brand));
  box-shadow:0 0 10px 0 color-mix(in srgb,var(--kc,var(--brand)) 85%,transparent);
}

/* -------------------------------------------------------------------------
   ÍCONES DO MENU
   Pastilha com volume: gradiente diagonal, luz na aresta de cima e sombra
   projetada na cor do próprio item. Cada entrada define --kc, então a cor
   identifica a seção antes mesmo de ler o texto — e vale o tempo todo, não só
   no hover. O que separa os três estados é a INTENSIDADE, não a presença da
   cor: repouso colorido, hover mais forte e elevado, ativo preenchido.
   ------------------------------------------------------------------------- */
.nav-ico{
  width:28px;height:28px;flex-shrink:0;border-radius:8px;display:grid;place-items:center;
  color:var(--kc,var(--brand));
  background:linear-gradient(150deg,color-mix(in srgb,var(--kc,var(--brand)) 20%,var(--surface3)),
                                    color-mix(in srgb,var(--kc,var(--brand)) 6%,var(--surface2)));
  border:1px solid color-mix(in srgb,var(--kc,var(--brand)) 26%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 16%,transparent),
             0 2px 6px -2px color-mix(in srgb,var(--kc,var(--brand)) 38%,transparent);
  transition:color var(--transicao),background var(--transicao),
             border-color var(--transicao),box-shadow var(--transicao),transform var(--transicao);
}
.nav-ico svg{width:15px;height:15px;opacity:1}
.nav-item:hover .nav-ico,.nav-grupo-btn:hover .nav-ico{
  background:linear-gradient(150deg,color-mix(in srgb,var(--kc,var(--brand)) 34%,var(--surface3)),
                                    color-mix(in srgb,var(--kc,var(--brand)) 12%,var(--surface2)));
  border-color:color-mix(in srgb,var(--kc,var(--brand)) 44%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 24%,transparent),
             0 5px 12px -3px color-mix(in srgb,var(--kc,var(--brand)) 60%,transparent);
  transform:translateY(-1px);
}
.nav-item.ativo .nav-ico{
  color:var(--brandink);
  background:linear-gradient(150deg,color-mix(in srgb,var(--kc,var(--brand)) 88%,#fff),
                                    var(--kc,var(--brand)));
  border-color:color-mix(in srgb,var(--kc,var(--brand)) 75%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 42%,transparent),
             0 5px 14px -4px color-mix(in srgb,var(--kc,var(--brand)) 80%,transparent);
}
/* submenu usa pastilha menor — hierarquia visual sem depender só do recuo */
.nav-sub .nav-ico{width:24px;height:24px;border-radius:7px}
.nav-sub .nav-ico svg{width:13px;height:13px}

/* grupos expansíveis */
.nav-grupo{margin-bottom:2px}
.nav-grupo .seta{width:14px;height:14px;opacity:.7;transition:transform var(--transicao);flex-shrink:0}
.nav-grupo.aberto .seta{transform:rotate(90deg)}
.nav-grupo .nav-sub{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--transicao);
}
.nav-grupo.aberto .nav-sub{grid-template-rows:1fr}
.nav-sub-interno{overflow:hidden}
/* Subitem: recuo menor que antes, porque agora a pastilha do ícone já cria a
   hierarquia. A linha-guia passa à esquerda dela, sem cortar o ícone. */
.nav-sub .nav-item{
  font-size:13px;padding-left:var(--e5);gap:10px;
}
.nav-sub .nav-item::after{
  content:"";position:absolute;left:11px;top:0;bottom:0;width:1px;background:var(--border);
}
.nav-sub .nav-item.ativo::after{background:color-mix(in srgb,var(--kc,var(--brand)) 60%,transparent)}
.nav-grupo.tem-ativo > .nav-grupo-btn{color:var(--text)}

/* rodapé da sidebar: usuário e sair */
.nav-rodape{flex-shrink:0;border-top:1px solid var(--border);padding:var(--e3)}
.nav-usuario{display:flex;align-items:center;gap:var(--e3);padding:var(--e2);border-radius:var(--r-sm);min-width:0}
.nav-usuario .avatar{width:34px;height:34px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--brandink);font-weight:700;font-size:14px}
.nav-usuario .quem{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.nav-usuario .quem b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-usuario .quem span{font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* sidebar recolhida (desktop) */
.shell.nav-recolhida .nav-lateral{width:var(--larg-nav-min)}
.shell.nav-recolhida .marca .txt,
.shell.nav-recolhida .nav-item .rotulo,
.shell.nav-recolhida .nav-grupo-btn .rotulo,
.shell.nav-recolhida .nav-grupo .seta,
.shell.nav-recolhida .nav-usuario .quem,
.shell.nav-recolhida .nav-secao{display:none}
.shell.nav-recolhida .nav-item,
.shell.nav-recolhida .nav-grupo-btn{justify-content:center;padding-left:0;padding-right:0}
.shell.nav-recolhida .nav-sub .nav-item::after{display:none}
.shell.nav-recolhida .nav-secao{height:1px;padding:0;margin:var(--e3) var(--e3);background:var(--border);display:block;overflow:hidden}
.shell.nav-recolhida .conteudo{margin-left:var(--larg-nav-min)}
.shell.nav-recolhida .nav-usuario{justify-content:center}
/* tooltip do item quando recolhida */
.shell.nav-recolhida .nav-item:hover .rotulo-flutuante{display:block}
.rotulo-flutuante{
  display:none;position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:var(--surface3);color:var(--text);border:1px solid var(--border2);
  padding:6px 10px;border-radius:var(--r-sm);font-size:12.5px;white-space:nowrap;
  box-shadow:var(--shadow-lg);z-index:70;pointer-events:none;
}

/* conteúdo */
.conteudo{flex:1;min-width:0;margin-left:var(--larg-nav);
  display:flex;flex-direction:column;transition:margin var(--transicao)}

.barra-topo{
  position:sticky;top:0;z-index:40;height:var(--alt-topo);flex-shrink:0;
  display:flex;align-items:center;gap:var(--e3);padding:0 var(--e5);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
.barra-topo .titulo-atual{font-weight:600;font-size:15px;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-topo .acoes-topo{display:flex;align-items:center;gap:6px;min-width:0}

/* Ações da página na barra de topo (Atualizar, Imprimir, CSV, Excel).
   Ficam menores que os botões do corpo: aqui competem com o título e o tema,
   e a barra tem altura fixa. */
.barra-topo .acoes-topo .btn{height:30px;padding:0 10px;font-size:12.5px}
.barra-topo .acoes-topo .btn svg{width:14px;height:14px}
.barra-topo .acoes-topo .btn-icon{width:32px;height:32px;padding:0}

/* selo de "atualizado às", no lugar da antiga linha de descrição */
.selo-atualizado{
  font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;
  white-space:nowrap;margin-right:2px}
.selo-atualizado.falhou{color:var(--bad);font-weight:700}

/* Espaço curto: os rótulos saem e ficam só os ícones, que já têm title.
   Some primeiro o selo de horário, depois os textos — nessa ordem porque o
   horário é informativo e os botões são ação. */
@media(max-width:1100px){ .selo-atualizado{display:none} }
@media(max-width:900px){
  .barra-topo .acoes-topo .btn .rotulo-btn{display:none}
  .barra-topo .acoes-topo .btn{width:32px;padding:0;justify-content:center}
}

#nav-backdrop{display:none}

main{flex:1;width:100%;max-width:1500px;margin:0 auto;padding:var(--e5) var(--e5) var(--e6)}

/* =========================================================================
   CABEÇALHO DE PÁGINA
   ========================================================================= */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--e4);margin:0 0 var(--e5);flex-wrap:wrap}
.page-head h1{margin:0;font-size:22px;font-weight:700;display:flex;align-items:center;gap:10px}
.page-head h1 svg{width:22px;height:22px;color:var(--brand);flex-shrink:0}
.page-head .sub{color:var(--muted);font-size:13.5px;margin-top:4px;max-width:70ch}
.toolbar{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap}

/* =========================================================================
   BOTÕES — uma altura, um raio, um padrão de ícone
   ========================================================================= */
.btn,button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:var(--h-controle);padding:0 15px;
  border:1px solid transparent;border-radius:var(--r-sm);
  font-family:inherit;font-size:13.5px;font-weight:600;line-height:1;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  background:linear-gradient(180deg,var(--brand),var(--brand2));color:var(--brandink);
  transition:filter var(--transicao),transform .1s,box-shadow var(--transicao),background var(--transicao);
  position:relative;
}
.btn svg,button svg{width:15px;height:15px;flex-shrink:0}
.btn:hover,button:hover{filter:brightness(1.08);text-decoration:none}
.btn:active,button:active{transform:translateY(1px)}
.btn:disabled,button:disabled{opacity:.5;cursor:not-allowed;filter:none;transform:none}

/* variantes */
.btn-primario{background:linear-gradient(180deg,var(--brand),var(--brand2));color:var(--brandink)}
.btn-ghost,.btn-secundario{
  background:var(--surface2);color:var(--text);border-color:var(--border2);
}
.btn-ghost:hover,.btn-secundario:hover{background:var(--surface3);filter:none}
.btn-perigo,.btn-danger{background:linear-gradient(180deg,#f87171,#ef4444);color:#fff}
html[data-tema="claro"] .btn-perigo,html[data-tema="claro"] .btn-danger{
  background:linear-gradient(180deg,#ef4444,#dc2626)}
.btn-perigo-suave{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-bd)}
.btn-perigo-suave:hover{background:var(--bad);color:#fff;filter:none}
.btn-link{background:none;color:var(--brand);border-color:transparent;padding:0 6px}
.btn-link:hover{background:var(--surface2);filter:none}

/* tamanhos */
.btn-sm{height:var(--h-controle-sm);padding:0 11px;font-size:12.5px;border-radius:var(--r-sm)}
.btn-sm svg{width:14px;height:14px}
.btn-bloco{width:100%}

/* só ícone — quadrado perfeito, alvo de toque adequado */
.btn-icon{width:var(--h-controle);height:var(--h-controle);padding:0;flex-shrink:0}
.btn-icon.btn-sm{width:var(--h-controle-sm);height:var(--h-controle-sm)}

/* estado de envio */
button.carregando{color:transparent!important;pointer-events:none}
button.carregando::after{
  content:"";position:absolute;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:girar .6s linear infinite;
}
.btn-ghost.carregando::after,.btn-secundario.carregando::after{
  border-color:color-mix(in srgb,var(--text) 25%,transparent);border-top-color:var(--text)}
@keyframes girar{to{transform:rotate(360deg)}}

/* grupos de ação */
.actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.actions form{display:contents}      /* o form não quebra o alinhamento das ações */
.acoes-modal{display:flex;gap:var(--e2);justify-content:flex-end;flex-wrap:wrap}
.acoes-form{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap;margin-top:var(--e4)}

/* =========================================================================
   FORMULÁRIOS
   ========================================================================= */
input,select,textarea,button{font-family:inherit;font-size:14px}
input,select,textarea{
  width:100%;height:var(--h-controle);
  background:var(--bg2);border:1px solid var(--border2);color:var(--text);
  border-radius:var(--r-sm);padding:0 11px;outline:none;
  transition:border-color var(--transicao),box-shadow var(--transicao);
}
select{
  appearance:none;padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a4be' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:16px;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}
input[type=color]{padding:3px;width:56px;cursor:pointer}
input[type=file]{padding:6px 9px;height:auto;line-height:1.6;cursor:pointer}
input[type=checkbox],input[type=radio]{
  width:17px;height:17px;flex-shrink:0;accent-color:var(--brand);cursor:pointer}
textarea{height:auto;min-height:96px;padding:10px 11px;resize:vertical;line-height:1.55;
  font-family:'JetBrains Mono',Consolas,monospace;font-size:13px}

/* Rótulo em bloco: o texto e o "*" de obrigatório fluem inline na mesma linha;
   o campo (input/select/textarea) quebra para a linha de baixo sozinho.
   (Com flex-column, o texto e o <span>*</span> viravam itens separados e o "*"
    caía numa linha própria, desalinhando o formulário.) */
label{font-size:12.5px;color:var(--muted);font-weight:600;display:block;min-width:0}
label > input,label > select,label > textarea{margin-top:6px}
label > .dica{display:block;margin-top:5px}
label.row,label.inline{display:flex;flex-direction:row;align-items:center;gap:var(--e2);
  font-size:13.5px;color:var(--text)}
label.row > input,label.inline > input{margin-top:0}
label .dica{font-weight:400;font-size:11.5px;color:var(--faint);line-height:1.45}
label .obrigatorio{color:var(--bad);margin-left:2px}

/* grades de formulário — responsivas por natureza.
   O título de cada campo vem em <span class="rot">, o que permite tratar o
   rótulo como coluna: título (altura reservada) -> campo -> dica.

   Antes o label era um bloco e a grade usava align-items:end, alinhando pela
   BASE. Funcionava enquanto todos os campos tivessem a mesma estrutura; bastava
   um deles ter dica embaixo do input para a base dele passar a ser a dica — e o
   input subia, saindo da linha dos vizinhos. Era o desalinhamento visível em
   "Envio de dados", e igual em Configurações, Usuários, Setores e Revisão.

   Agora os itens esticam, o título reserva duas linhas e os campos caem sempre
   na mesma altura, com ou sem dica, com título de uma ou duas linhas. */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--e4);align-items:stretch}
/* checkbox (label.row) fica de fora: ali o campo vem ANTES do texto e a
   direção é linha. Sem o :not, esta regra (0,2,0) venceria label.row (0,1,1)
   e empilharia a caixinha em cima do rótulo. */
.form-grid > label:not(.row):not(.inline){display:flex;flex-direction:column;min-width:0}
.form-grid > label > .rot{
  display:block;min-height:2.9em;         /* 2 linhas: título curto ou longo ocupam o mesmo */
  line-height:1.45;
}
/* o campo encosta no fim do espaço do título, então todos ficam alinhados */
.form-grid > label > .rot + input,
.form-grid > label > .rot + select,
.form-grid > label > .rot + textarea{margin-top:0}
/* a dica desce depois do campo, sem puxar nada para cima */
.form-grid > label > .hint,
.form-grid > label > .dica{margin-top:5px}
/* em telas estreitas a grade vira uma coluna só: reservar 2 linhas vira buraco */
@media(max-width:640px){
  .form-grid > label > .rot{min-height:0}
}
.form-grid.duas{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.form-linha{display:flex;gap:var(--e3);flex-wrap:wrap;align-items:flex-end}
.form-linha > label{flex:1 1 180px}
.form-linha > button,.form-linha > .btn{flex-shrink:0}
.campo-largo{grid-column:1/-1}

/* formulário em coluna (telas de configuração) */
.form-vertical{display:flex;flex-direction:column;gap:var(--e4)}
.form-vertical > .acoes-form{margin-top:0}

/* lista de opções marcáveis */
.lista-check{display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--border);border-radius:var(--r);padding:var(--e2);
  max-height:260px;overflow-y:auto}
.lista-check label{padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;
  font-weight:500;color:var(--text);font-size:13.5px}
.lista-check label:hover{background:var(--surface2)}
/* item em revisão, destacado no topo do modal de classificação */
.item-revisao{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--e4);
  padding:var(--e3);border-radius:var(--r-sm);background:var(--surface2);
  border:1px solid var(--border);font-size:13.5px;word-break:break-word}
.item-revisao b{font-size:14px}

.hint-topo{margin-top:-6px}
.sub-linha{display:block;margin-top:2px;font-size:11.5px}
.alinha-fim{align-self:flex-end}
.espaco-baixo{margin-bottom:var(--e5)}
.grupo-campo{display:flex;flex-direction:column;gap:var(--e2)}
.grupo-campo > .rotulo-grupo{font-size:12.5px;color:var(--muted);font-weight:600}

/* =========================================================================
   CARDS / PAINÉIS
   ========================================================================= */
.painel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--e5);margin-bottom:var(--e4);box-shadow:var(--shadow);
  transition:box-shadow var(--transicao),border-color var(--transicao);
  min-width:0;
}
.painel:hover{box-shadow:var(--shadow-lg)}
.painel.estreito{max-width:660px}
.painel > h2,.painel-cabecalho h2{margin:0 0 var(--e4);font-size:15px;font-weight:700;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
/* Ícone do painel: pastilha com a cor de acento do próprio painel (--kc).
   Cada painel do BI define a sua, então a leitura fica por cor além do texto. */
.painel > h2 svg,.painel-cabecalho h2 svg{width:17px;height:17px;color:var(--kc,var(--brand));flex-shrink:0}
.painel > h2 > .ico-painel,.painel-cabecalho h2 > .ico-painel{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
  color:var(--kc,var(--brand));
  background:linear-gradient(150deg,color-mix(in srgb,var(--kc,var(--brand)) 24%,transparent),
                                    color-mix(in srgb,var(--kc,var(--brand)) 8%,transparent));
  border:1px solid color-mix(in srgb,var(--kc,var(--brand)) 26%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent),
             0 3px 10px -4px color-mix(in srgb,var(--kc,var(--brand)) 50%,transparent)}
.painel > h2 > .ico-painel svg,.painel-cabecalho h2 > .ico-painel svg{width:16px;height:16px}
.painel > h2 .sub,.painel-cabecalho h2 .sub{font-weight:500;font-size:12px;color:var(--faint);margin-left:auto}
.painel .hint{color:var(--muted);font-size:12.5px;line-height:1.55}
.painel-cabecalho{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3);margin-bottom:var(--e4);flex-wrap:wrap}
.painel-cabecalho h2{margin:0}

/* grid de 12 colunas para os painéis do BI */
.bi-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--e4);margin-bottom:var(--e4)}
.span12{grid-column:span 12} .span8{grid-column:span 8}
.span6{grid-column:span 6}  .span4{grid-column:span 4}
.bi-grid .painel{margin-bottom:0;display:flex;flex-direction:column}

/* =========================================================================
   KPI CARDS
   Cada card recebe a própria cor de acento em --kc; TUDO (borda, brilho, ícone,
   marca-d'água, barra) deriva dela. Assim um card novo só precisa da cor.
   ========================================================================= */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:var(--e4);margin-bottom:var(--e5)}
.kpi{
  --kc:var(--brand);
  position:relative;overflow:hidden;isolation:isolate;
  background:
    linear-gradient(160deg,color-mix(in srgb,var(--kc) 7%,transparent) 0,transparent 46%),
    var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--e4) 18px 15px;box-shadow:var(--shadow);
  transition:transform var(--transicao),box-shadow var(--transicao),border-color var(--transicao);
  display:flex;flex-direction:column;   /* todos os cards ficam da mesma altura */
}
/* filete superior de acento */
.kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,var(--kc),color-mix(in srgb,var(--kc) 25%,transparent) 55%,transparent)}
/* halo difuso no canto — dá profundidade sem virar "bola" chapada */
.kpi::after{content:"";position:absolute;right:-40px;top:-56px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--kc) 22%,transparent) 0,transparent 70%);
  pointer-events:none;z-index:0}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg),var(--glow);
  border-color:color-mix(in srgb,var(--kc) 50%,var(--border))}

/* marca-d'água: o mesmo ícone do card, grande e discreto, atrás do conteúdo */
.kpi .marca{
  position:absolute;right:-14px;bottom:-22px;width:104px;height:104px;z-index:0;
  color:var(--kc);opacity:var(--marca-agua);pointer-events:none;
  transition:opacity var(--transicao),transform var(--transicao);
}
.kpi .marca svg{width:100%;height:100%;stroke-width:1.15}
.kpi:hover .marca{opacity:calc(var(--marca-agua) * 1.9);transform:scale(1.06) rotate(-4deg)}

.kpi > *:not(.marca){position:relative;z-index:1}
.kpi .topo{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e2)}
.kpi .lbl{color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
/* ícone com profundidade: gradiente + luz na borda de cima + sombra colorida */
.kpi .ico{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;color:var(--kc);
  background:linear-gradient(150deg,color-mix(in srgb,var(--kc) 26%,transparent),color-mix(in srgb,var(--kc) 9%,transparent));
  border:1px solid color-mix(in srgb,var(--kc) 30%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent),
             0 4px 12px -4px color-mix(in srgb,var(--kc) 45%,transparent);
}
.kpi .ico svg{width:19px;height:19px}
.kpi .val{font-size:31px;font-weight:800;margin-top:12px;letter-spacing:-1.2px;line-height:1.1;
  font-variant-numeric:tabular-nums}
.kpi .val small{font-size:15px;font-weight:700;color:var(--muted);margin-left:2px;letter-spacing:0}
/* descrição curta do indicador — o que o número significa */
.kpi .desc{color:var(--faint);font-size:11.5px;line-height:1.45;margin-top:5px}
.kpi .pe{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--faint);
  flex-wrap:wrap;margin-top:auto;padding-top:9px}
.kpi .trend{display:inline-flex;align-items:center;gap:3px;font-weight:700;
  padding:2px 7px;border-radius:var(--r-full);font-size:11.5px;
  background:var(--surface2);border:1px solid var(--border2)}
.kpi .trend.sobe{color:var(--good);background:var(--good-bg);border-color:var(--good-bd)}
.kpi .trend.desce{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-bd)}
.kpi .trend.neutro{color:var(--faint)}
.kpi .barra{height:5px;border-radius:99px;background:var(--surface2);margin-top:11px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--kc) 12%,transparent)}
.kpi .barra i{display:block;height:100%;border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(90deg,color-mix(in srgb,var(--kc) 65%,transparent),var(--kc));
  box-shadow:0 0 8px -1px color-mix(in srgb,var(--kc) 65%,transparent)}

/* wrapper obrigatório dos canvas do BI */
.canvas-wrap{position:relative;min-height:240px;flex:1}
.canvas-wrap.alto{min-height:320px}
.canvas-wrap canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.skel{position:absolute;inset:0;border-radius:var(--r);z-index:2;
  background:linear-gradient(90deg,var(--surface2) 25%,var(--border) 37%,var(--surface2) 63%);
  background-size:400% 100%;animation:skel 1.3s ease infinite}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* barra de filtros */
.filtros{
  display:flex;gap:var(--e3);align-items:flex-end;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--e4);margin-bottom:var(--e4);box-shadow:var(--shadow);
}
.filtros > label{flex:0 1 160px}
/* campos de filtro (combos de setor/máquina) — mesma caixa do seletor de período */
.filtros > .campo-filtro{flex:0 1 210px;min-width:0}
.filtros > .btn{align-self:flex-end}
.presets{display:flex;gap:5px;flex-wrap:wrap}
.preset{
  display:inline-flex;align-items:center;height:var(--h-controle-sm);padding:0 12px;
  border-radius:var(--r-full);font-size:12.5px;font-weight:600;cursor:pointer;
  background:var(--surface2);color:var(--muted);border:1px solid var(--border2);
  transition:all var(--transicao);user-select:none;
}
.preset:hover{color:var(--text);border-color:var(--brand)}
.preset.on{background:var(--brand);color:var(--brandink);border-color:var(--brand)}
.filtros .cresce{flex:1 1 auto}

/* seletor compacto (período): botão que abre um painel flutuante */
.seletor{position:relative}
.seletor .gatilho{justify-content:space-between;min-width:210px;font-weight:600}
.seletor .gatilho .seta-baixo{width:14px;height:14px;opacity:.7;transition:transform var(--transicao)}
.seletor.aberto .gatilho{border-color:var(--brand);color:var(--brand)}
.seletor.aberto .gatilho .seta-baixo{transform:rotate(180deg)}
.seletor-painel{
  display:none;position:absolute;z-index:45;top:calc(100% + 6px);left:0;
  width:min(400px,calc(100vw - 2*var(--e4)));
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-md);
  box-shadow:var(--shadow-xl);padding:var(--e4);
  animation:sobe .16s cubic-bezier(.4,0,.2,1);
}
.seletor.aberto .seletor-painel{display:block}
.seletor-topo{display:none;align-items:center;justify-content:space-between;margin-bottom:var(--e3)}
.seletor-topo b{font-size:15px}
.seletor-painel .presets{margin-bottom:var(--e2)}
.seletor-painel .preset{flex:1 1 auto;justify-content:center;min-width:76px}
.seletor-painel .divider{margin:var(--e3) 0}
.seletor-rodape{display:flex;gap:var(--e2);justify-content:flex-end;margin-top:var(--e4)}
/* no celular vira folha inferior, igual aos modais */
@media(max-width:640px){
  .seletor-painel{
    position:fixed;inset:auto 0 0 0;width:100%;max-height:88vh;overflow-y:auto;
    border-radius:var(--r-lg) var(--r-lg) 0 0;border-left:none;border-right:none;
    padding:var(--e4) var(--e4) calc(var(--e4) + env(safe-area-inset-bottom,0px));
    animation:sobeFolha .22s cubic-bezier(.4,0,.2,1);
  }
  .seletor-topo{display:flex}
  .seletor .gatilho{width:100%;min-width:0}
  .seletor-rodape .btn{flex:1}
}
/* fundo escuro do painel no celular */
#fundo-seletor{display:none}
@media(max-width:640px){
  #fundo-seletor.on{display:block;position:fixed;inset:0;z-index:44;background:rgba(2,6,18,.55)}
}

/* =========================================================================
   TABELAS
   ========================================================================= */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--border);
  -webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{
  text-align:left;padding:11px var(--e3);color:var(--muted);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;
  background:var(--surface2);border-bottom:1px solid var(--border2);position:sticky;top:0;
}
tbody td{padding:11px var(--e3);border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:hover{background:var(--surface2)}
tbody tr:last-child td{border-bottom:none}
th.col-acoes,td.col-acoes{width:1%;white-space:nowrap;text-align:right}
td.col-acoes .actions{justify-content:flex-end;flex-wrap:nowrap}
/* números alinhados à direita e com dígitos de mesma largura: a coluna vira
   uma pilha comparável em vez de um zigue-zague */
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* pessoa + máquina numa célula só, com avatar */
.celula-pessoa{display:flex;align-items:center;gap:10px;min-width:0}
.avatar-mini{
  width:30px;height:30px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;color:var(--brandink);
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 2px 8px -2px color-mix(in srgb,var(--brand) 60%,transparent)}
.celula-principal{display:flex;flex-direction:column;gap:2px;min-width:0}
.celula-principal b{font-weight:600}
.celula-principal small{color:var(--faint);font-size:11.5px}
.cel-barra{display:flex;align-items:center;gap:var(--e2)}
.cel-barra .trilho{flex:1;height:6px;border-radius:99px;background:var(--surface2);overflow:hidden;min-width:52px}
.cel-barra .trilho i{display:block;height:100%;border-radius:99px}
.tabela-vazia{text-align:center;color:var(--muted);padding:var(--e6) var(--e4)!important}
.tabela-vazia svg{width:34px;height:34px;color:var(--faint);margin-bottom:var(--e2);display:block;
  margin-left:auto;margin-right:auto}

/* =========================================================================
   BADGES / TAGS
   ========================================================================= */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:700;border:1px solid transparent;white-space:nowrap;line-height:1.5}
.badge.bom,.bom{color:var(--good)} .badge.bom{background:var(--good-bg);border-color:var(--good-bd)}
.badge.alerta,.alerta{color:var(--warn)} .badge.alerta{background:var(--warn-bg);border-color:var(--warn-bd)}
.badge.ruim,.ruim{color:var(--bad)} .badge.ruim{background:var(--bad-bg);border-color:var(--bad-bd)}
.badge.info{background:var(--info-bg);color:var(--brand);border-color:var(--info-bd)}
.badge.neutro{background:var(--surface2);color:var(--muted);border-color:var(--border2)}
.tag{display:inline-block;padding:3px 9px;border-radius:6px;background:var(--surface2);
  border:1px solid var(--border2);color:var(--muted);font-size:11.5px;font-weight:600;white-space:nowrap}
.ponto{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.ponto.on{background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent)}
.ponto.off{background:var(--faint)}

/* =========================================================================
   ALERTAS
   ========================================================================= */
.alerta-box{padding:12px var(--e4);border-radius:var(--r);margin-bottom:var(--e4);font-size:13.5px;
  display:flex;align-items:center;gap:10px;border:1px solid transparent;line-height:1.5}
.alerta-box.ok{background:var(--good-bg);border-color:var(--good-bd);color:var(--good-ink)}
.alerta-box.erro{background:var(--bad-bg);border-color:var(--bad-bd);color:var(--bad-ink)}
.alerta-box.aviso{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-ink)}
.alerta-box.info{background:var(--info-bg);border-color:var(--info-bd);color:var(--brand)}
.alerta-box svg{width:18px;height:18px;flex-shrink:0}

/* =========================================================================
   MODAIS
   ========================================================================= */
.modal{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;padding:var(--e4);
  background:rgba(2,6,18,.65);backdrop-filter:blur(3px);
}
.modal.aberto{display:flex;animation:fade .16s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-caixa{
  width:100%;max-width:560px;max-height:calc(100vh - 2*var(--e4));
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl);animation:sobe .2s cubic-bezier(.4,0,.2,1);overflow:hidden;
}
.modal-caixa.estreita{max-width:440px}
.modal-caixa.larga{max-width:760px}
@keyframes sobe{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.modal-topo{
  display:flex;align-items:center;gap:var(--e3);flex-shrink:0;
  padding:var(--e4) var(--e5);border-bottom:1px solid var(--border);
}
.modal-topo .ico{width:36px;height:36px;border-radius:var(--r);flex-shrink:0;display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand)}
.modal-topo .ico svg{width:18px;height:18px}
.modal-topo.perigo .ico{background:var(--bad-bg);color:var(--bad)}
.modal-topo h3{margin:0;font-size:16px;font-weight:700;flex:1;min-width:0}
.modal-topo .sub{font-size:12.5px;color:var(--muted);font-weight:400;margin-top:2px;display:block}
.modal-fechar{
  width:32px;height:32px;padding:0;flex-shrink:0;border-radius:var(--r-sm);
  background:transparent;color:var(--muted);border:1px solid transparent;
}
.modal-fechar:hover{background:var(--surface2);color:var(--text);filter:none}
.modal-corpo{padding:var(--e5);overflow-y:auto;flex:1}
.modal-corpo > p{margin:0 0 var(--e4);color:var(--muted);font-size:13.5px;line-height:1.6}
.modal-corpo > p:last-child{margin-bottom:0}
.modal-rodape{
  display:flex;gap:var(--e2);justify-content:flex-end;align-items:center;
  flex-wrap:wrap;flex-shrink:0;
  padding:var(--e4) var(--e5);border-top:1px solid var(--border);background:var(--surface2);
}
/* todos os botões do rodapé com a mesma caixa, independente do texto */
.modal-rodape .btn,.modal-rodape button{height:var(--h-controle);flex:0 0 auto;min-width:110px}
/* destaque do registro afetado na confirmação */
.alvo-destaque{
  display:block;padding:10px var(--e3);border-radius:var(--r-sm);margin-bottom:var(--e4);
  background:var(--bad-bg);border:1px solid var(--bad-bd);color:var(--bad-ink);
  font-weight:700;font-size:13.5px;word-break:break-word;
}

/* =========================================================================
   TOASTS
   ========================================================================= */
.toasts{position:fixed;right:var(--e4);bottom:var(--e4);z-index:200;
  display:flex;flex-direction:column;gap:var(--e2);pointer-events:none;max-width:min(360px,calc(100vw - 2*var(--e4)))}
.toast{
  display:flex;align-items:center;gap:10px;pointer-events:auto;
  padding:12px var(--e4);border-radius:var(--r);font-size:13.5px;font-weight:500;
  background:var(--surface);border:1px solid var(--border2);box-shadow:var(--shadow-xl);
  animation:entra .22s cubic-bezier(.4,0,.2,1);
}
@keyframes entra{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.toast.saindo{opacity:0;transform:translateX(16px);transition:all .4s}
.toast-ico{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.toast.ok{border-left:3px solid var(--good)} .toast.ok .toast-ico{background:var(--good)}
.toast.erro{border-left:3px solid var(--bad)} .toast.erro .toast-ico{background:var(--bad)}
.toast.aviso{border-left:3px solid var(--warn)} .toast.aviso .toast-ico{background:var(--warn)}

/* =========================================================================
   PAPEL DE PAREDE (galeria)
   ========================================================================= */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--e4)}
.wp{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;
  transition:all var(--transicao);position:relative;display:flex;flex-direction:column}
.wp:hover{border-color:var(--brand);box-shadow:var(--shadow-lg)}
.wp.ativo{border-color:var(--good);box-shadow:0 0 0 2px color-mix(in srgb,var(--good) 35%,transparent)}
.wp .thumb{aspect-ratio:16/9;background:#000 center/cover no-repeat;display:block}
.wp .meta{padding:10px var(--e3);font-size:12.5px;flex:1}
.wp .meta b{display:block;font-size:13.5px;margin-bottom:3px;word-break:break-word}
.wp .meta .dim{color:var(--faint);font-size:11.5px}
.wp .acoes{display:flex;gap:6px;padding:0 var(--e3) var(--e3);flex-wrap:wrap}
.wp .selo{position:absolute;top:8px;right:8px;background:var(--good);color:#04240f;
  font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:var(--r-full);
  text-transform:uppercase;letter-spacing:.4px}
.preview-tela{aspect-ratio:16/9;border:2px solid var(--border2);border-radius:var(--r);overflow:hidden;
  background:#000 center/contain no-repeat;max-width:420px;width:100%}
.preview-tela.fill,.preview-tela.span{background-size:cover}
.preview-tela.fit{background-size:contain}
.preview-tela.stretch{background-size:100% 100%}
.preview-tela.center{background-size:auto}
.preview-tela.tile{background-size:auto;background-repeat:repeat}

/* =========================================================================
   DIVERSOS
   ========================================================================= */
.lista-cards{list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--e3)}
.lista-cards li{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:var(--e3) var(--e4);font-size:13.5px}
.lista-maq{list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--e3)}
.lista-maq li{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:var(--e3) var(--e4)}
.section-title{font-size:12px;font-weight:700;color:var(--brand);text-transform:uppercase;
  letter-spacing:.5px;margin:var(--e5) 0 var(--e3);display:flex;align-items:center;gap:var(--e2)}
.section-title svg{width:15px;height:15px;flex-shrink:0}
.muted{color:var(--muted)}
.divider{height:1px;background:var(--border);margin:var(--e5) 0;border:none}
details{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:0 var(--e4);margin-bottom:10px}
details summary{cursor:pointer;padding:13px 0;font-weight:600;list-style:none;
  display:flex;align-items:center;gap:var(--e2)}
details summary::-webkit-details-marker{display:none}
details[open]{padding-bottom:var(--e4)}
.estado-vazio{text-align:center;padding:var(--e6) var(--e4);color:var(--muted)}
.estado-vazio svg{width:40px;height:40px;color:var(--faint);margin-bottom:var(--e3)}
.estado-vazio h3{margin:0 0 6px;font-size:15px;color:var(--text)}
.estado-vazio p{margin:0 0 var(--e4);font-size:13.5px}

/* legado — telas que ainda usam .card */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--e4) 18px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}
.card .lbl{color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.card .val{font-size:29px;font-weight:800;margin-top:8px;letter-spacing:-1px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4);margin-bottom:var(--e4)}

/* =========================================================================
   LOGIN
   ========================================================================= */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:var(--e4)}
.login-card{
  --kc:var(--brand);
  width:100%;max-width:390px;position:relative;overflow:hidden;
  background:linear-gradient(165deg,color-mix(in srgb,var(--brand) 8%,transparent) 0,transparent 45%),var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);padding:34px 30px;box-shadow:var(--shadow-xl),var(--glow)}
.login-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent)}
.login-card .logo{width:56px;height:56px;margin:0 auto var(--e4);display:grid;place-items:center;
  border-radius:var(--r-lg);background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--brandink);
  box-shadow:0 8px 24px -6px color-mix(in srgb,var(--brand) 70%,transparent),
             inset 0 1px 0 color-mix(in srgb,#fff 30%,transparent)}
.login-card .logo svg{width:26px;height:26px}
.login-card h1{text-align:center;font-size:20px;margin:0 0 4px}
.login-card p{text-align:center;color:var(--muted);margin:0 0 var(--e5);font-size:13.5px}
.login-card form{display:flex;flex-direction:column;gap:var(--e3)}
.login-card input{height:44px}
.login-card button{height:44px;width:100%}

/* =========================================================================
   COMBO — campo de seleção com busca, multi-seleção e contador
   Um só componente serve setor, máquina e qualquer lista futura. O <select>
   original continua no DOM (oculto) e segue sendo a fonte de verdade: forms
   e o código que lê .value não precisam saber que o combo existe.
   ========================================================================= */
.combo{position:relative;min-width:0}
.combo select.combo-fonte{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;padding:0;margin:0}
.combo-gatilho{
  display:flex;align-items:center;gap:var(--e2);width:100%;
  height:var(--h-controle);padding:0 10px 0 11px;
  background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-sm);
  color:var(--text);font-size:13.5px;font-weight:500;text-align:left;
  transition:border-color var(--transicao),box-shadow var(--transicao);
}
.combo-gatilho:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--border2));filter:none}
.combo-gatilho .ico-campo{width:16px;height:16px;flex-shrink:0;color:var(--brand);opacity:.85}
.combo-gatilho .valor{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-gatilho .valor.vazio{color:var(--faint);font-weight:400}
.combo-gatilho .seta-baixo{width:14px;height:14px;flex-shrink:0;opacity:.6;transition:transform var(--transicao)}
.combo.aberto .combo-gatilho{border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.combo.aberto .combo-gatilho .seta-baixo{transform:rotate(180deg)}
/* contador de selecionados */
.combo-contador{
  flex-shrink:0;min-width:19px;height:19px;padding:0 6px;border-radius:var(--r-full);
  display:inline-grid;place-items:center;font-size:11px;font-weight:800;line-height:1;
  background:var(--brand);color:var(--brandink)}

.combo-painel{
  display:none;position:absolute;z-index:46;top:calc(100% + 6px);left:0;
  width:max(100%,258px);
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-md);
  box-shadow:var(--shadow-xl);overflow:hidden;
  animation:sobe .16s cubic-bezier(.4,0,.2,1);
}
.combo.aberto .combo-painel{display:flex;flex-direction:column}
.combo.acima .combo-painel{top:auto;bottom:calc(100% + 6px)}
.combo-topo{display:none;align-items:center;justify-content:space-between;
  padding:var(--e3) var(--e4) 0}
.combo-topo b{font-size:15px}
/* busca */
.combo-busca{position:relative;padding:var(--e2);border-bottom:1px solid var(--border);flex-shrink:0}
.combo-busca svg{position:absolute;left:19px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--faint);pointer-events:none}
.combo-busca input{height:var(--h-controle-sm);padding-left:32px;font-size:13px;background:var(--surface2)}
/* lista */
.combo-lista{list-style:none;margin:0;padding:var(--e1);overflow-y:auto;max-height:242px;flex:1}
.combo-lista::-webkit-scrollbar{width:6px}
.combo-lista::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}
.combo-opcao{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  font-size:13.5px;color:var(--text);cursor:pointer;user-select:none;min-width:0;
  transition:background var(--transicao);
}
.combo-opcao:hover,.combo-opcao.focada{background:var(--surface2)}
.combo-opcao .rot{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-opcao .extra{color:var(--faint);font-size:11.5px;flex-shrink:0}
/* checkbox desenhado (não é <input>: a lista pode ter centenas de itens) */
.combo-marca{
  width:17px;height:17px;flex-shrink:0;border-radius:5px;
  border:1.5px solid var(--border2);background:var(--bg2);
  display:grid;place-items:center;transition:all var(--transicao);
}
.combo-marca svg{width:11px;height:11px;color:var(--brandink);opacity:0;stroke-width:3.5}
.combo-opcao[aria-selected="true"] .combo-marca{
  background:var(--brand);border-color:var(--brand);
  box-shadow:0 0 9px -2px color-mix(in srgb,var(--brand) 75%,transparent)}
.combo-opcao[aria-selected="true"] .combo-marca svg{opacity:1}
.combo-opcao[aria-selected="true"] .rot{font-weight:600}
/* avatar/inicial do item */
.combo-avatar{
  width:24px;height:24px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;color:var(--brandink);
  background:linear-gradient(135deg,var(--brand),var(--brand2))}
.combo-sep{height:1px;background:var(--border);margin:var(--e1) var(--e2)}
/* rodapé: contagem + limpar/aplicar */
.combo-pe{
  display:flex;align-items:center;gap:var(--e2);flex-shrink:0;
  padding:var(--e2) var(--e3);border-top:1px solid var(--border);background:var(--surface2)}
.combo-pe .conta{flex:1;font-size:12px;color:var(--muted);font-weight:600;min-width:0}
.combo-vazio{padding:var(--e5) var(--e4);text-align:center;color:var(--faint);font-size:12.5px}

/* no celular o combo também vira folha inferior */
@media(max-width:640px){
  .combo-painel{position:fixed;inset:auto 0 0 0;width:100%;max-height:86vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;border-left:none;border-right:none;
    padding-bottom:env(safe-area-inset-bottom,0px);
    animation:sobeFolha .22s cubic-bezier(.4,0,.2,1)}
  .combo.acima .combo-painel{bottom:0}
  .combo-topo{display:flex}
  .combo-lista{max-height:52vh}
}

/* =========================================================================
   PAGINAÇÃO
   ========================================================================= */
.paginacao{
  display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
  padding:var(--e3) 2px 0;margin-top:var(--e3);border-top:1px solid var(--border)}
.paginacao .info{font-size:12.5px;color:var(--muted);font-weight:500}
.paginacao .info b{color:var(--text);font-variant-numeric:tabular-nums}
.paginacao .cresce{flex:1 1 auto}
.paginacao .por-pagina{display:flex;align-items:center;gap:var(--e2);font-size:12.5px;color:var(--muted)}
.paginacao .por-pagina select{width:auto;height:var(--h-controle-sm);font-size:12.5px;padding:0 28px 0 9px}
.pg-lista{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pg{
  min-width:var(--h-controle-sm);height:var(--h-controle-sm);padding:0 9px;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border-radius:var(--r-sm);font-size:12.5px;font-weight:600;
  background:var(--surface2);color:var(--muted);border:1px solid var(--border2);
  transition:all var(--transicao);font-variant-numeric:tabular-nums;
}
.pg:hover:not(:disabled){color:var(--text);border-color:var(--brand);filter:none}
.pg[aria-current="page"]{
  background:linear-gradient(180deg,var(--brand),var(--brand2));color:var(--brandink);border-color:var(--brand);
  box-shadow:0 3px 12px -3px color-mix(in srgb,var(--brand) 70%,transparent)}
.pg:disabled{opacity:.4;cursor:not-allowed}
.pg.reticencias{background:none;border-color:transparent;pointer-events:none;color:var(--faint)}
.pg svg{width:14px;height:14px}
@media(max-width:640px){
  .paginacao{gap:var(--e2)}
  .paginacao .cresce{flex-basis:100%}
  .pg-lista{width:100%;justify-content:center}
  .paginacao .info,.paginacao .por-pagina{font-size:12px}
}

/* =========================================================================
   ESTADOS — carregando, vazio, erro
   Um bloco só, com variação por classe, para não ter três visuais diferentes.
   ========================================================================= */
.estado{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:var(--e2);padding:var(--e6) var(--e4);color:var(--muted);min-height:150px}
.estado .estado-ico{
  width:54px;height:54px;border-radius:var(--r-lg);display:grid;place-items:center;flex-shrink:0;
  margin-bottom:var(--e1);color:var(--kc,var(--faint));
  background:linear-gradient(150deg,color-mix(in srgb,var(--kc,var(--faint)) 20%,transparent),
                                    color-mix(in srgb,var(--kc,var(--faint)) 7%,transparent));
  border:1px solid color-mix(in srgb,var(--kc,var(--faint)) 22%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 16%,transparent)}
.estado .estado-ico svg{width:25px;height:25px}
.estado h3{margin:0;font-size:14.5px;font-weight:700;color:var(--text)}
.estado p{margin:0;font-size:13px;line-height:1.55;max-width:44ch}
.estado .acoes{margin-top:var(--e3)}
.estado.erro{--kc:var(--bad)}
.estado.vazio-filtro{--kc:var(--brand)}
.estado.processando{--kc:var(--brand)}
/* spinner do estado "processando" */
.estado.processando .estado-ico svg{animation:girar 1s linear infinite}
/* dentro de um canvas-wrap o estado se sobrepõe ao gráfico */
.canvas-wrap .estado{position:absolute;inset:0;min-height:0;padding:var(--e4);z-index:1}
.canvas-wrap .estado .estado-ico{width:44px;height:44px}
.canvas-wrap .estado .estado-ico svg{width:21px;height:21px}
.canvas-wrap .estado h3{font-size:13.5px}
.canvas-wrap .estado p{font-size:12px}
/* estado dentro de tabela */
td.estado-celula{padding:0!important}
td.estado-celula .estado{padding:var(--e5) var(--e4)}

/* =========================================================================
   MICROINTERAÇÕES
   ========================================================================= */
/* painéis: leve elevação + borda que acende no hover */
.painel{position:relative}
.painel:hover{border-color:color-mix(in srgb,var(--brand) 22%,var(--border))}
/* barra de progresso indeterminada no topo do painel enquanto recarrega */
.painel.recarregando::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:var(--r-md) var(--r-md) 0 0;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  background-size:42% 100%;background-repeat:no-repeat;animation:varrer 1.1s ease-in-out infinite}
@keyframes varrer{0%{background-position:-45% 0}100%{background-position:145% 0}}
/* números que mudam: pequeno realce, sem piscar a tela toda */
@keyframes realce{0%{opacity:.35;transform:translateY(3px)}100%{opacity:1;transform:none}}
.kpi .val,.kpi .pe{animation:realce .3s cubic-bezier(.4,0,.2,1)}
/* linhas de tabela entram escalonadas nas primeiras posições */
tbody tr{transition:background var(--transicao)}
/* botões: brilho sutil no hover do primário */
.btn:not(.btn-ghost):not(.btn-secundario):not(.btn-link):hover{
  box-shadow:0 4px 16px -4px color-mix(in srgb,var(--brand) 55%,transparent)}
.btn-perigo:hover,.btn-danger:hover{
  box-shadow:0 4px 16px -4px color-mix(in srgb,var(--bad) 55%,transparent)}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media(max-width:1280px){
  .span8{grid-column:span 12}
  .span6,.span4{grid-column:span 6}
}
@media(max-width:1024px){
  :root{--larg-nav:224px}
  main{padding:var(--e4) var(--e4) var(--e6)}
}
@media(max-width:900px){
  .span12,.span8,.span6,.span4{grid-column:span 12}
  .grid{grid-template-columns:1fr}
}

/* celular/tablet: sidebar vira drawer */
@media(max-width:820px){
  .nav-lateral{transform:translateX(-100%);box-shadow:none;width:min(84vw,290px)}
  .shell.nav-aberta .nav-lateral{transform:none;box-shadow:var(--shadow-xl)}
  .conteudo{margin-left:0!important}
  .shell.nav-recolhida .nav-lateral{width:min(84vw,290px)}       /* recolhimento não vale no celular */
  .shell.nav-recolhida .marca .txt,
  .shell.nav-recolhida .nav-item .rotulo,
  .shell.nav-recolhida .nav-grupo-btn .rotulo,
  .shell.nav-recolhida .nav-grupo .seta,
  .shell.nav-recolhida .nav-usuario .quem{display:flex}
  .shell.nav-recolhida .nav-secao{display:block;height:auto;padding:var(--e4) var(--e3) var(--e2);
    margin:0;background:none}
  .shell.nav-recolhida .nav-item,.shell.nav-recolhida .nav-grupo-btn{justify-content:flex-start;padding:9px var(--e3)}
  #nav-backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(2,6,18,.6);
    opacity:0;pointer-events:none;transition:opacity var(--transicao)}
  .shell.nav-aberta #nav-backdrop{opacity:1;pointer-events:auto}
  #btn-recolher{display:none}
  #btn-menu{display:inline-flex!important}
  main{padding:var(--e4) var(--e3) var(--e6)}
  .page-head h1{font-size:19px}
  .filtros{padding:var(--e3)}
  .filtros > label{flex:1 1 140px}
}

@media(max-width:640px){
  .cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--e3)}
  .kpi{padding:var(--e3) var(--e4) var(--e3)}
  .kpi .val{font-size:24px}
  .painel{padding:var(--e4) var(--e3);border-radius:var(--r)}
  .bi-grid{gap:var(--e3)}
  .toolbar{width:100%}
  .toolbar .btn,.toolbar button{flex:1 1 auto}
  /* modal vira folha inferior, aproveitando a tela */
  .modal{padding:0;align-items:flex-end}
  .modal-caixa{max-width:none;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0;
    animation:sobeFolha .24s cubic-bezier(.4,0,.2,1)}
  @keyframes sobeFolha{from{transform:translateY(100%)}to{transform:none}}
  .modal-topo,.modal-corpo,.modal-rodape{padding-left:var(--e4);padding-right:var(--e4)}
  .modal-rodape{flex-direction:column-reverse}
  .modal-rodape .btn,.modal-rodape button{width:100%}
  .toasts{left:var(--e3);right:var(--e3);bottom:var(--e3);max-width:none}
  .form-linha > label{flex:1 1 100%}
  .form-linha > button,.form-linha > .btn{width:100%}
  .galeria{grid-template-columns:1fr 1fr;gap:var(--e3)}
  .presets{width:100%}
  .preset{flex:1 1 auto;justify-content:center}
}

@media(max-width:400px){
  .galeria{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  main{padding:var(--e3) var(--e2) var(--e5)}
  .page-head h1{font-size:18px}
}

/* alvos de toque maiores em telas sensíveis */
@media(hover:none){
  .btn-sm,button.btn-sm{height:36px}
  .btn-icon.btn-sm{width:36px}
  .nav-item,.nav-grupo-btn{padding-top:11px;padding-bottom:11px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Cabeçalho que só existe no papel — some da tela (a regra de print o
   reexibe). Fica junto do bloco de impressão para não se perder de vista. */
.cabecalho-impressao{display:none}

/* =========================================================================
   ASSISTENTE (robô)
   Botão flutuante no canto inferior direito + painel de conversa. O painel
   é ancorado ao botão no desktop e vira folha de tela cheia no celular,
   onde um cartão flutuante de 440px não caberia.
   ========================================================================= */
/* A largura do assistente é do container, não do conteúdo: com shrink-to-fit
   uma tabela larga esticava o bloco e o painel cobria a tela. Fixando aqui,
   nada que o servidor responda muda o tamanho do robô. */
body > .robo{--kc:var(--brand);position:fixed;right:var(--e5);bottom:var(--e5);z-index:60;
  width:min(440px,calc(100vw - var(--e5) * 2));pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--e3)}
body > .robo > *{pointer-events:auto}

.robo-botao{width:52px;height:52px;padding:0;border-radius:var(--r-full);
  background:linear-gradient(180deg,var(--brand),var(--brand2));color:var(--brandink);
  border:none;box-shadow:var(--glow),var(--shadow-lg);
  display:flex;align-items:center;justify-content:center;order:2}
.robo-botao:hover{transform:translateY(-2px);box-shadow:var(--glow-forte),var(--shadow-xl)}
.robo-face svg,.robo-botao svg{width:24px;height:24px}
.robo-ico svg{width:18px;height:18px;color:var(--brand)}

.robo-painel{order:1;min-width:0;width:100%;
  max-height:min(min(640px,80vh),calc(100vh - 140px));display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl);overflow:hidden}
.robo-painel[hidden]{display:none}

.robo-topo{display:flex;align-items:center;gap:var(--e2);padding:var(--e3) var(--e3);
  border-bottom:1px solid var(--border);background:var(--surface2)}
.robo-quem{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.robo-quem b{font-size:.92rem}
.robo-quem span{font-size:.74rem;color:var(--muted)}

.robo-conversa{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;
  padding:var(--e4) var(--e3);display:flex;flex-direction:column;gap:var(--e3)}

/* A mensagem é texto para ler, não legenda: 15px e entrelinha larga. A bolha
   do robô só se limita a 88% quando é texto — com tabela dentro ela usa a
   largura toda, senão a tabela nasce com rolagem horizontal num painel
   estreito, que era o pior da leitura anterior. */
/* min-width:0 é o que segura a bolha dentro do painel: sem isso o min-width
   automático do flex item cresce até caber a tabela sem quebra, e a mensagem
   vaza para fora do robô em vez de rolar dentro dela. */
.robo-msg{max-width:88%;min-width:0;padding:var(--e3);border-radius:var(--r-md);
  font-size:.94rem;line-height:1.6;overflow-wrap:anywhere}
.robo-msg p{margin:0}
.robo-msg strong{font-weight:650;color:var(--brand)}
.robo-msg p + .robo-tabela{margin-top:var(--e3)}
.robo-msg.de-robo{align-self:flex-start;background:var(--surface2);color:var(--text);
  border:1px solid var(--border2);border-bottom-left-radius:var(--e1);
  box-shadow:var(--shadow-sm)}
.robo-msg.de-robo:has(.robo-tabela){max-width:100%;width:100%}
.robo-msg.de-eu{align-self:flex-end;background:var(--brand);color:var(--brandink);
  border:1px solid transparent;border-bottom-right-radius:var(--e1)}
.robo-msg.de-eu strong{color:inherit}
.robo-msg.aviso{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-ink)}
.robo-msg.aviso strong{color:inherit}
.robo-msg.pensando{padding:var(--e2) var(--e3)}

/* Tabela de resposta: rótulo à esquerda, número à direita em fonte tabular —
   a comparação vertical é o motivo de a tabela existir. */
.robo-tabela{max-width:100%;min-width:0;overflow-x:auto;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.robo-tabela table{width:100%;border-collapse:collapse;font-size:.86rem}
.robo-tabela th,.robo-tabela td{padding:var(--e2);border-bottom:1px solid var(--border);
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.robo-tabela th:first-child,.robo-tabela td:first-child{text-align:left;
  white-space:normal;min-width:9rem}
.robo-tabela th{position:sticky;top:0;background:var(--surface3);color:var(--muted);
  font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.03em}
.robo-tabela tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface3) 45%,transparent)}
.robo-tabela tr:last-child td{border-bottom:none}

.robo-rodape{display:flex;flex-wrap:wrap;gap:var(--e1);margin-top:var(--e3)}
.robo-selo{font-size:.7rem;color:var(--muted);background:var(--surface3);
  border:1px solid var(--border);border-radius:var(--r-full);padding:2px var(--e2)}
.robo-selo.ia{color:var(--brand);border-color:var(--brand)}

.robo-sugestoes{display:flex;flex-wrap:wrap;gap:var(--e1)}
.robo-chip{font-size:.76rem;padding:var(--e1) var(--e2);border-radius:var(--r-full);
  background:var(--surface2);border:1px solid var(--border);color:var(--text);cursor:pointer}
.robo-chip:hover{border-color:var(--brand);color:var(--brand)}

/* três pontinhos enquanto o servidor responde */
.robo-pensando{display:inline-flex;gap:4px;align-items:center;height:1.2em}
.robo-pensando i{width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:robo-pulsa 1.2s infinite ease-in-out}
.robo-pensando i:nth-child(2){animation-delay:.15s}
.robo-pensando i:nth-child(3){animation-delay:.3s}
@keyframes robo-pulsa{0%,80%,100%{opacity:.25;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-3px)}}

.robo-envio{display:flex;gap:var(--e2);padding:var(--e3);
  border-top:1px solid var(--border);background:var(--surface2)}
.robo-envio input{flex:1;min-width:0}
.robo-envio .btn{width:var(--h-controle);padding:0;flex-shrink:0}

@media (max-width:640px){
  body > .robo{right:var(--e3);bottom:var(--e3)}
  .robo-painel{position:fixed;inset:var(--e3);width:auto;max-height:none}
}
@media (prefers-reduced-motion:reduce){
  .robo-botao:hover{transform:none}
  .robo-pensando i{animation:none}
}

/* =========================================================================
   IMPRESSÃO
   ========================================================================= */
/* =========================================================================
   IMPRESSÃO
   O papel é outro meio: não tem rolagem, não tem hover, não tem tema escuro e
   tem quebra de página. Cada regra abaixo existe por causa de uma dessas
   diferenças.
   ========================================================================= */
@page{ size:A4; margin:16mm 14mm 18mm; }

@media print{
  /* --- 1. O tema escuro não vai para o papel -----------------------------
     O navegador não imprime fundos, mas imprime a cor do texto. Com o tema
     escuro ativo, --text é #e8eef7 (quase branco) e a folha saía em branco.
     Aqui a paleta clara é imposta, independentemente do tema em uso. */
  :root,html[data-tema="escuro"],html[data-tema="claro"]{
    --bg:#fff; --bg2:#fff; --surface:#fff; --surface2:#f4f7fa; --surface3:#eaeff5;
    --border:#b9c4d2; --border2:#9aa7b8;
    --text:#0d1420; --muted:#3f4b5c; --faint:#5c6878;
    --brand:#0a5694; --brand2:#0a5694; --brandink:#fff;
    --good:#0f6537; --bad:#96202c; --warn:#7a4e05;
    --good-bg:#e9f4ed; --good-bd:#a9cfba; --good-ink:#0f6537;
    --bad-bg:#fceced;  --bad-bd:#e3b1b6;  --bad-ink:#96202c;
    --warn-bg:#fcf3e2; --warn-bd:#e0ca9c; --warn-ink:#7a4e05;
    --info-bg:#eaf2fa; --info-bd:#b2cbe5;
    --grid:#ccd6e2; --halo:none;
    --shadow:none; --shadow-sm:none; --shadow-lg:none; --shadow-xl:none;
    --glow:none; --glow-forte:none; --marca-agua:0;
    --c1:#0a5694; --c2:#0f6537; --c3:#7a4e05; --c4:#96202c;
    --c5:#4c3391; --c6:#8a2d5c; --c7:#8f4a10; --c8:#0a5d66;
  }
  /* Corpo em 12pt: o relatório é lido em papel, muitas vezes impresso em
     preto e branco e às vezes reduzido numa fotocópia. Ocupar mais páginas é
     preferível a uma folha ilegível. */
  body{background:#fff!important;color:var(--text);font-size:12pt;line-height:1.5}

  /* --- 2. Nada que só serve para operar a tela -------------------------- */
  .nav-lateral,.barra-topo,.toolbar,.filtros,.presets,.toasts,#nav-backdrop,
  .paginacao,.combo-painel,.robo,.modal,.btn-expandir,.chips-entrada,
  .chips-pe,.acoes-form,.actions,.col-acoes,.btn,button{display:none!important}
  .conteudo{margin-left:0!important}
  main{max-width:none;padding:0}
  .shell{display:block}

  /* --- 3. Rolagem não existe no papel -----------------------------------
     .table-wrap tem overflow-x:auto; no papel isso cortava a tabela e
     desenhava a barra por cima. */
  .table-wrap,.robo-tabela,.rolagem,.combo-lista,.modal-corpo,.nav-corpo,
  .detalhe-prod,.chips-caixa{
    overflow:visible!important;max-height:none!important;border:none!important;
  }
  html,body{overflow:visible!important}

  /* --- 4. Cabeçalho da folha ------------------------------------------- */
  .cabecalho-impressao{
    display:flex!important;align-items:flex-end;justify-content:space-between;
    gap:16px;padding-bottom:10px;margin-bottom:20px;
    border-bottom:2px solid var(--text);
  }
  .ci-marca{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13pt}
  .ci-marca svg{width:19px;height:19px}
  .ci-titulo{text-align:center;line-height:1.35}
  .ci-titulo b{display:block;font-size:14pt}
  .ci-titulo span{font-size:10.5pt;color:var(--muted)}
  .ci-meta{display:flex;flex-direction:column;align-items:flex-end;
    font-size:10pt;color:var(--muted);line-height:1.45;text-align:right}

  /* --- 5. Painéis ------------------------------------------------------- */
  .painel{
    border:1px solid var(--border);border-radius:5px;padding:16px 18px;
    margin:0 0 16px;box-shadow:none;background:#fff;
    break-inside:avoid;page-break-inside:avoid;
  }
  .painel > h2,.painel-cabecalho h2{font-size:13pt;margin-bottom:12px}
  .ico-painel{display:none!important}
  .painel > h2 .sub,.painel-cabecalho h2 .sub{font-size:10pt}

  /* --- 6. KPIs: 3 por linha, com respiro -------------------------------- */
  .cards{grid-template-columns:repeat(3,1fr)!important;gap:12px;margin-bottom:20px}
  .kpi{
    padding:14px 16px;border:1px solid var(--border);border-radius:5px;
    box-shadow:none;background:#fff;break-inside:avoid;
  }
  .kpi::before,.kpi::after,.kpi .marca{display:none!important}
  .kpi .lbl{font-size:9.5pt;letter-spacing:.3px}
  .kpi .ico{width:0;height:0;overflow:hidden;border:none;box-shadow:none}
  .kpi .val{font-size:24pt;margin-top:8px}
  .kpi .val small{font-size:13pt}
  .kpi .desc{font-size:9.5pt;margin-top:5px}
  .kpi .pe{font-size:9.5pt;padding-top:8px}
  .kpi .trend{border:none;background:none;padding:0;font-weight:700}
  .kpi .barra{height:6px;margin-top:9px}

  /* --- 7. Gráficos: UM por página ---------------------------------------
     Dois lado a lado em 52mm ficaram ilegíveis — rótulos de eixo espremidos e
     legenda impossível de ler. Em largura inteira e 105mm de altura, cada
     gráfico é analisável. Cabem dois por folha. */
  .bi-grid{display:block!important}
  .span12,.span8,.span6,.span4{grid-column:auto!important}
  .bi-grid .painel{margin-bottom:16px}
  .canvas-wrap,.canvas-wrap.alto{
    min-height:0!important;height:105mm!important;width:100%!important;
  }
  .canvas-wrap canvas{max-width:100%!important}
  .skel{display:none!important}

  /* --- 8. Tabelas ------------------------------------------------------- */
  table{width:100%;font-size:10.5pt;border-collapse:collapse}
  thead{display:table-header-group}      /* repete o cabeçalho a cada página */
  tfoot{display:table-footer-group}
  tr,img,svg{break-inside:avoid;page-break-inside:avoid}
  thead th{
    background:var(--surface2)!important;color:var(--text);
    border-bottom:1.5px solid var(--text);font-size:9.5pt;padding:9px 10px;
    position:static!important;             /* sticky sobreporia o conteúdo */
  }
  tbody td{padding:8px 10px;border-bottom:1px solid var(--border)}
  tbody tr:hover{background:none!important}
  /* a tabela sai inteira: paginar o papel esconderia dados */
  tbody tr[hidden]:not(.linha-detalhe){display:table-row!important}
  .linha-detalhe{display:none!important}
  .linha-pessoa td:first-child{display:table-cell}
  .avatar-mini{display:none!important}
  .celula-pessoa{display:block}
  .celula-principal small{font-size:9pt;color:var(--muted)}

  /* --- 9. Cor que carrega informação precisa sair impressa -------------- */
  .cel-barra .trilho,.cel-barra .trilho i,.kpi .barra,.kpi .barra i,
  .prod-trilho,.prod-trilho i,.badge,.tag,.mini-medalha,.medalha,
  .degrau,.painel.morcego,.morcego-ico,.alerta-box{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .badge,.tag{border:1px solid var(--border2);padding:2px 8px;font-size:9.5pt}
  .cel-barra{gap:8px}
  .cel-barra .trilho{min-width:48px;height:7px}

  /* --- 10. Ranking ------------------------------------------------------ */
  .podio{gap:14px;margin-bottom:20px;break-inside:avoid;page-break-inside:avoid}
  .degrau{padding:16px 12px;border:1px solid var(--border);box-shadow:none}
  .degrau.ouro{padding-top:22px}
  .degrau .face{display:none!important}
  .degrau .medalha{width:42px;height:42px}
  .degrau .medalha svg{width:22px;height:22px}
  .degrau .medalha b{width:18px;height:18px;font-size:10pt}
  .degrau .quem{font-size:13pt}
  .degrau .setor{font-size:9.5pt}
  .degrau .nota{font-size:24pt}
  .degrau .detalhe{font-size:9.5pt}
  .painel.morcego{break-inside:avoid;page-break-inside:avoid;margin-top:16px;gap:16px}
  .morcego-ico{width:48px;height:48px}
  .morcego-ico svg{width:26px;height:26px}
  .morcego-txt .titulo{font-size:9.5pt}
  .morcego-txt b{font-size:15pt}
  .morcego-txt .sub{font-size:10.5pt}
  .morcego-pos{font-size:26pt;opacity:.75}
  .criterio{font-size:10.5pt;margin-bottom:16px}
  .bloco-ranking{break-inside:auto}

  /* --- 11. Quebras de página deliberadas --------------------------------
     Em vez de espremer tudo, o relatório é dividido onde o assunto muda: os
     indicadores abrem a primeira folha, os gráficos vêm em seguida e cada
     tabela longa começa em folha nova. */
  .bi-grid{break-before:page;page-break-before:always}
  /* marcado no template: :has() ainda não é confiável em todo navegador */
  .folha-nova{break-before:page;page-break-before:always}
  .bloco-ranking + .bloco-ranking{break-before:page;page-break-before:always}
  /* nunca deixar título órfão no pé da página */
  h1,h2,h3,.painel-cabecalho{break-after:avoid;page-break-after:avoid}
  .cards{break-after:avoid}

  /* --- 12. Detalhes recolhidos saem abertos ----------------------------- */
  details{border:1px solid var(--border);break-inside:avoid;padding:0 14px}
  details > summary{list-style:none;font-size:10.5pt}
  details:not([open]) > *:not(summary){display:revert!important}

  /* --- 13. Sem animação, sem elevação ----------------------------------- */
  *,*::before,*::after{
    animation:none!important;transition:none!important;
    box-shadow:none!important;text-shadow:none!important;
  }
  a{color:var(--text);text-decoration:none}
  .estado,.tabela-vazia{color:var(--muted);font-size:10.5pt}
}

/* =========================================================================
   LISTA DE ETIQUETAS (chips)
   Cada item é um elemento com o próprio X. Substitui a textarea de "1 por
   linha", onde um Ctrl+A distraído apagava a lista inteira.
   ========================================================================= */
.chips{margin-top:6px}
.chips-caixa{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  min-height:var(--h-controle);padding:6px 8px;cursor:text;
  background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-sm);
  transition:border-color var(--transicao),box-shadow var(--transicao);
}
.chips-caixa:focus-within{border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.chips-lista{display:contents;list-style:none;margin:0;padding:0}

.chip{
  display:inline-flex;align-items:center;gap:2px;max-width:100%;
  padding:3px 3px 3px 10px;border-radius:var(--r-full);
  font-size:12.5px;font-weight:600;line-height:1.5;
  background:color-mix(in srgb,var(--brand) 13%,var(--surface2));
  color:var(--text);border:1px solid color-mix(in srgb,var(--brand) 28%,transparent);
  animation:chipEntra .16s cubic-bezier(.4,0,.2,1);
}
@keyframes chipEntra{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.chip-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:'JetBrains Mono',Consolas,monospace;font-size:12px}
.chip-x{
  width:19px;height:19px;padding:0;flex-shrink:0;border-radius:50%;
  background:transparent;color:var(--muted);border:none;
}
.chip-x svg{width:12px;height:12px}
.chip-x:hover{background:var(--bad);color:#fff;filter:none}
/* item repetido: pisca em vez de duplicar silenciosamente */
.chip.repetido{animation:chipRepete .5s ease}
@keyframes chipRepete{
  0%,100%{background:color-mix(in srgb,var(--brand) 13%,var(--surface2))}
  30%,70%{background:var(--warn-bg);border-color:var(--warn-bd)}
}

.chips-entrada{
  flex:1;min-width:140px;width:auto;height:26px;padding:0 4px;
  background:transparent;border:none;font-size:13px}
.chips-entrada:focus{box-shadow:none;border:none}

.chips-pe{display:flex;align-items:center;gap:var(--e3);margin-top:5px;flex-wrap:wrap;min-height:18px}
.chips-conta{font-size:11.5px;color:var(--muted);font-weight:600}
.chips-conta.vazia{color:var(--faint);font-weight:400}
.chips-aviso{font-size:11.5px;font-weight:600;color:var(--muted)}
.chips-aviso.erro{color:var(--warn)}
.chips-aviso.ok{color:var(--good)}
.chips-desfazer{
  height:auto;padding:2px 9px;font-size:11.5px;font-weight:700;border-radius:var(--r-full);
  background:var(--surface3);color:var(--brand);border:1px solid var(--border2)}
.chips-desfazer:hover{border-color:var(--brand);filter:none}

/* resumo de alterações da tela de Classificação */
.hint.com-inclusao{color:var(--good);font-weight:600}
.hint.com-remocao{color:var(--warn);font-weight:600}
.revisar-bloco{padding:10px 0;border-bottom:1px solid var(--border)}
.revisar-bloco:last-child{border-bottom:none}
.revisar-bloco b{font-size:12.5px;color:var(--muted);display:block;margin-bottom:6px}
.revisar-itens{display:flex;flex-wrap:wrap;gap:5px}
.revisar-item{
  font-family:'JetBrains Mono',Consolas,monospace;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:var(--r-full);border:1px solid transparent}
.revisar-item.entra{background:var(--good-bg);color:var(--good-ink);border-color:var(--good-bd)}
.revisar-item.sai{background:var(--bad-bg);color:var(--bad-ink);border-color:var(--bad-bd)}

/* =========================================================================
   "EM QUE FOI PRODUTIVO" — detalhe que abre sob a linha da pessoa
   Vai numa linha própria, e não numa coluna nova: a tabela já usa 8 colunas
   e qualquer coluna a mais empurraria tudo para o scroll horizontal.
   ========================================================================= */
.linha-pessoa td:first-child{display:flex;align-items:center;gap:var(--e2)}
.btn-expandir{
  width:24px;height:24px;padding:0;flex-shrink:0;border-radius:var(--r-sm);
  background:var(--surface2);color:var(--muted);border:1px solid var(--border2);
}
.btn-expandir svg{width:13px;height:13px;transition:transform var(--transicao)}
.btn-expandir:hover{color:var(--brand);border-color:var(--brand);filter:none}
.linha-pessoa.aberta .btn-expandir svg{transform:rotate(90deg)}
.linha-pessoa.aberta{background:var(--surface2)}
.linha-pessoa.aberta td{border-bottom-color:transparent}

.linha-detalhe > td{padding:0!important;background:var(--surface2)}
.detalhe-prod{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--e4);padding:var(--e4) var(--e4) var(--e5);
  border-left:3px solid var(--brand);
  animation:abreDetalhe .18s cubic-bezier(.4,0,.2,1);
}
@keyframes abreDetalhe{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.detalhe-prod.vazio-prod{
  display:block;color:var(--muted);font-size:12.5px;line-height:1.55;
  border-left-color:var(--border2)}

.prod-bloco h4{
  margin:0 0 var(--e3);font-size:11.5px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:6px}
.prod-bloco h4 svg{width:14px;height:14px;color:var(--kc,var(--brand))}
.prod-bloco ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.prod-bloco li{display:grid;grid-template-columns:minmax(0,1fr) 70px 46px 42px;
  align-items:center;gap:var(--e2);font-size:12.5px}
.prod-nome{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;
  font-family:'JetBrains Mono',Consolas,monospace;font-size:11.5px}
.prod-trilho{height:6px;border-radius:99px;background:var(--bg2);overflow:hidden;
  border:1px solid var(--border)}
.prod-trilho i{display:block;height:100%;border-radius:99px;background:var(--kc,var(--brand));
  box-shadow:0 0 6px -1px color-mix(in srgb,var(--kc,var(--brand)) 70%,transparent)}
.prod-num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.prod-pct{text-align:right;font-variant-numeric:tabular-nums;color:var(--faint);font-size:11.5px}

@media(max-width:640px){
  .detalhe-prod{padding:var(--e3);gap:var(--e3)}
  .prod-bloco li{grid-template-columns:minmax(0,1fr) 44px 40px}
  .prod-trilho{display:none}          /* na largura do celular a barra vira risco */
}

/* =========================================================================
   RANKING — pódio, medalhas e lanterna
   ========================================================================= */
.criterio{
  display:flex;align-items:flex-start;gap:9px;margin:0 0 var(--e4);
  font-size:12.5px;color:var(--muted);line-height:1.55}
.criterio svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--brand)}
.bloco-ranking{margin-bottom:var(--e5)}

/* --- pódio --- */
.podio{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3);
  align-items:end;margin:0 0 var(--e5)}
.degrau{
  --kc:var(--c3);
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:3px;padding:var(--e4) var(--e2) var(--e3);border-radius:var(--r-md);
  background:linear-gradient(180deg,color-mix(in srgb,var(--kc) 16%,transparent),var(--surface2));
  border:1px solid color-mix(in srgb,var(--kc) 30%,transparent);
  box-shadow:0 8px 24px -10px color-mix(in srgb,var(--kc) 60%,transparent);
}
.degrau.ouro{--kc:#f5b301;padding-top:var(--e6)}     /* o 1º fica mais alto */
.degrau.prata{--kc:#9fb2c9}
.degrau.bronze{--kc:#cd7f32}
.degrau .medalha{
  position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  color:#1b1200;margin-bottom:2px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--kc) 70%,#fff),var(--kc));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 12px -3px color-mix(in srgb,var(--kc) 80%,transparent)}
.degrau .medalha svg{width:22px;height:22px}
.degrau .medalha b{
  position:absolute;right:-3px;bottom:-3px;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:800;
  background:var(--surface);color:var(--kc);border:1px solid color-mix(in srgb,var(--kc) 50%,transparent)}
.degrau .face{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-size:17px;font-weight:800;color:var(--brandink);margin:2px 0 4px;
  background:linear-gradient(135deg,var(--brand),var(--brand2))}
.degrau .quem{font-size:14px;line-height:1.25;word-break:break-word}
.degrau .setor{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.4px}
.degrau .nota{font-size:26px;font-weight:800;letter-spacing:-1px;color:var(--kc);
  font-variant-numeric:tabular-nums;margin-top:4px}
.degrau .detalhe{font-size:11px;color:var(--muted);line-height:1.4}

/* --- tabela do ranking --- */
.tab-ranking td.pos{font-weight:700;color:var(--muted);white-space:nowrap}
.mini-medalha{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-size:11px;font-weight:800;color:#1b1200;
  background:linear-gradient(150deg,color-mix(in srgb,var(--m) 70%,#fff),var(--m))}
.mini-medalha.ouro{--m:#f5b301} .mini-medalha.prata{--m:#9fb2c9} .mini-medalha.bronze{--m:#cd7f32}
.tab-ranking tr.com-medalha{background:color-mix(in srgb,var(--warn) 5%,transparent)}
.tab-ranking .cel-barra .trilho i{background:var(--good)}

/* --- lanterna --- */
.painel.morcego{
  --kc:var(--c5);
  display:flex;align-items:center;gap:var(--e4);margin:var(--e4) 0 0;
  background:linear-gradient(120deg,color-mix(in srgb,var(--kc) 14%,transparent),var(--surface2));
  border-color:color-mix(in srgb,var(--kc) 35%,transparent)}
.morcego-ico{
  width:52px;height:52px;flex-shrink:0;border-radius:var(--r-md);display:grid;place-items:center;
  color:var(--kc);
  background:linear-gradient(150deg,color-mix(in srgb,var(--kc) 26%,transparent),
                                    color-mix(in srgb,var(--kc) 8%,transparent));
  border:1px solid color-mix(in srgb,var(--kc) 30%,transparent)}
.morcego-ico svg{width:28px;height:28px}
.morcego-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.morcego-txt .titulo{font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.7px;color:var(--kc)}
.morcego-txt b{font-size:17px}
.morcego-txt .sub{font-size:12px;color:var(--muted);line-height:1.5}
.morcego-pos{font-size:30px;font-weight:800;color:var(--kc);opacity:.5;
  font-variant-numeric:tabular-nums;flex-shrink:0}

/* --- fora do ranking --- */
.fora-ranking{margin-top:var(--e4)}
.fora-ranking summary{font-size:13px;color:var(--muted)}
.fora-ranking summary svg{width:15px;height:15px;flex-shrink:0}
.fora-ranking .lista-cards{margin:var(--e3) 0}
.fora-ranking .hint{margin:var(--e3) 0 0}

@media(max-width:760px){
  .podio{grid-template-columns:1fr;align-items:stretch}
  .degrau.ouro{padding-top:var(--e4);order:-1}   /* no celular o 1º vem primeiro */
  .painel.morcego{flex-wrap:wrap;gap:var(--e3)}
  .morcego-pos{font-size:24px}
}

/* ===== Acessos em tempo real ===== */
.grade-tempo-real{display:grid;grid-template-columns:1fr;gap:var(--e4)}
@media(min-width:1080px){.grade-tempo-real{grid-template-columns:1.7fr 1fr}}
.lista-maquinas{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow-y:auto}
.maquina-linha{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface2);
  transition:border-color var(--transicao)}
.maquina-linha.status-online{border-left:3px solid var(--good)}
.maquina-linha.status-atencao{border-left:3px solid #f59e0b}
.maquina-linha.status-offline{border-left:3px solid var(--bad);opacity:.75}
.maquina-linha .mq-info{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.maquina-linha .mq-info b{font-size:13px}
.maquina-linha .mq-info .muted{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.maquina-linha .mq-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:11px;flex-shrink:0}
/* Coluna direita do tempo real: dois painéis empilhados (setores + máquinas)
   dentro da mesma célula da grade. */
.grade-tempo-real .coluna-lateral{display:flex;flex-direction:column;gap:var(--e4);min-width:0}
.grade-tempo-real .coluna-lateral .lista-maquinas{max-height:300px}
/* Linha de setor: reaproveita a caixa da linha de máquina, mas é clicável — o
   clique liga o filtro da tabela ao lado. */
.setor-linha{cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit}
.setor-linha:hover{border-color:var(--brand)}
.setor-linha.on{border-color:var(--brand);box-shadow:inset 3px 0 0 var(--brand)}
.setor-linha .mq-info b{font-size:13px}
.setor-linha .sl-num{font-variant-numeric:tabular-nums;font-weight:700}
#tr-eventos tr{animation:tr-surge .35s ease}
@keyframes tr-surge{from{background:var(--good-bg)}to{background:transparent}}
#tr-pausar.ativo{color:var(--brand);border-color:var(--brand)}

/* =========================================================================
   REFRESH DE IDENTIDADE (2026) — realces anexados ao final.
   Só ADICIONA profundidade/glass/microinterações sobre a estrutura existente;
   nenhuma classe nova é exigida pelo HTML. Mantém tema claro e escuro.
   ========================================================================= */

/* transição global mais "viva" (curva com leve overshoot nos hovers) */
:root{ --transicao:.2s cubic-bezier(.34,1.2,.64,1); }

/* --- vidro na sidebar e na topbar: deixam ver o halo do fundo por trás --- */
.nav-lateral{
  background:linear-gradient(180deg,
      color-mix(in srgb,var(--surface) 82%,transparent),
      color-mix(in srgb,var(--bg2) 88%,transparent));
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
}
.barra-topo{
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
}

/* --- painéis com luz superior interna e hover mais nítido --- */
.painel{
  box-shadow:var(--shadow),inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent);
}
html[data-tema="claro"] .painel{
  box-shadow:var(--shadow),inset 0 1px 0 #fff;
}

/* --- KPI: brilho de topo + hover com respiro maior --- */
.kpi{ box-shadow:var(--shadow),inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent); }
html[data-tema="claro"] .kpi{ box-shadow:var(--shadow),inset 0 1px 0 #fff; }
.kpi:hover{ transform:translateY(-4px) scale(1.006); }
.kpi .val{ letter-spacing:-1.4px; }

/* --- botões: leve brilho no topo (aspecto 3D) e realce no hover --- */
.btn,button{
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent),
             0 2px 6px -2px color-mix(in srgb,var(--brand) 30%,transparent);
}
.btn-ghost,.btn-secundario,.btn-link,.btn-perigo-suave{
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 5%,transparent);
}
.btn:hover,button:hover{ transform:translateY(-1px); }
.btn:active,button:active{ transform:translateY(1px); }

/* --- badges/tags com aparência dimensional --- */
.tag{
  background:linear-gradient(180deg,
      color-mix(in srgb,var(--surface3) 70%,var(--surface2)),var(--surface2));
  border-color:var(--border2);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent),0 1px 2px rgba(0,0,0,.12);
  padding:3px 10px;border-radius:var(--r-full);letter-spacing:.2px;
}
html[data-tema="claro"] .tag{ box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,23,42,.05); }

/* --- ponto de status: online pulsa suavemente --- */
.ponto.on{
  background:radial-gradient(circle at 35% 30%,#eafff2,var(--good) 65%);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent),
             0 0 8px color-mix(in srgb,var(--good) 60%,transparent);
  animation:pulso-online 2.4s ease-in-out infinite;
}
.ponto.off{ background:radial-gradient(circle at 35% 30%,#9fb0c9,var(--faint) 70%); }
@keyframes pulso-online{
  0%,100%{ box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent),0 0 8px color-mix(in srgb,var(--good) 55%,transparent); }
  50%    { box-shadow:0 0 0 5px color-mix(in srgb,var(--good) 10%,transparent),0 0 14px color-mix(in srgb,var(--good) 75%,transparent); }
}
@media(prefers-reduced-motion:reduce){ .ponto.on{animation:none} }

/* --- microinteração nos ícones do menu --- */
.nav-item .nav-ico{ transition:transform var(--transicao),background var(--transicao); }
.nav-item:hover .nav-ico{ transform:translateY(-1px) scale(1.06); }

/* --- logo da marca com um brilho sutil --- */
.marca .logo{
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 35%,transparent),
             0 4px 12px -3px color-mix(in srgb,var(--brand) 55%,transparent);
}

/* --- foco mais suave e coerente com a nova marca --- */
:focus-visible{ outline:2px solid var(--brand);outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent); }

/* Barra de rolagem visível no corpo dos modais (o conteúdo pode passar da
   altura da tela — ex.: editar máquina com ociosidade + horário de trabalho).
   scrollbar-gutter reserva o espaço para o layout não "pular" ao aparecer. */
/* O <form> fica ENTRE .modal-caixa e .modal-corpo na maioria dos modais.
   Como .modal-caixa é flex-column, seu único item flex é o próprio form: se o
   form não for flex também, o flex:1/min-height:0 do .modal-corpo não vale de
   nada, o form cresce até a altura do conteúdo e o overflow:hidden da caixa
   corta o final do formulário — sem barra e sem roda do mouse. Aqui o form
   repassa a cadeia flex para topo/corpo/rodapé. */
.modal-caixa > form{
  display:flex;flex-direction:column;
  flex:1 1 auto;min-height:0;overflow:hidden;
}

.modal-corpo{
  /* min-height:0 é o que FAZ o modal rolar. Sem isto, um item flex em coluna
     usa min-height:auto e nunca encolhe abaixo da altura do conteúdo: o
     overflow-y:auto jamais entra em ação, o conteúdo transborda e o
     overflow:hidden do .modal-caixa corta o final do formulário — sem barra
     de rolagem e sem responder à roda do mouse. */
  min-height:0;
  scrollbar-width:thin;
  scrollbar-color:var(--border2) transparent;
  scrollbar-gutter:stable;
}
.modal-corpo::-webkit-scrollbar{width:12px}
.modal-corpo::-webkit-scrollbar-track{background:transparent;margin:4px 0}
.modal-corpo::-webkit-scrollbar-thumb{
  background:var(--border2);border-radius:99px;
  border:3px solid var(--surface);        /* “folga” que afina o polegar */
}
.modal-corpo::-webkit-scrollbar-thumb:hover{background:var(--faint)}

/* ===== Painel de Monitoramento ===== */
.grade-mon{display:grid;grid-template-columns:1fr;gap:var(--e4)}
@media(min-width:1000px){.grade-mon{grid-template-columns:1.15fr 1fr}}
.mini-graficos{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4)}
@media(max-width:620px){.mini-graficos{grid-template-columns:1fr}}

.lista-alertas{display:flex;flex-direction:column;gap:7px;max-height:330px;overflow-y:auto}
.alerta-linha{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-md);
  background:var(--surface2);border:1px solid var(--border)}
.alerta-linha .pino{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.alerta-linha.critico{border-left:3px solid var(--bad)}
.alerta-linha.critico .pino{background:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 20%,transparent)}
.alerta-linha.atencao{border-left:3px solid var(--warn)}
.alerta-linha.atencao .pino{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 20%,transparent)}
.alerta-linha .al-info{display:flex;flex-direction:column;min-width:0;flex:1}
.alerta-linha .al-info b{font-size:13px}
.alerta-linha .al-info .muted{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.barra-acoes-mon{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;
  padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface2)}
.barra-acoes-mon .espaco{flex:1 1 auto}
.barra-acoes-mon .sel-todas{display:flex;align-items:center;gap:7px;font-size:13px;white-space:nowrap}
.barra-acoes-mon .alvo{height:var(--h-controle-sm);font-size:12.5px;max-width:170px}
@media(max-width:760px){.barra-acoes-mon .espaco{display:none}.barra-acoes-mon{gap:8px}}

/* Barra + número lado a lado. O número já ficou POR CIMA do preenchimento e
   sumia acima de ~50% de uso — fora da barra ele mantém contraste em qualquer
   percentual e em ambos os temas. A cor do número segue o estado (-ink, que é
   a variante com contraste garantido sobre superfícies). */
.mini-barra{display:flex;align-items:center;gap:7px;min-width:96px}
.mini-barra .trilho{flex:1;height:8px;border-radius:99px;background:var(--surface3);
  border:1px solid var(--border);overflow:hidden;min-width:56px}
.mini-barra i{display:block;height:100%;border-radius:99px;transition:width .5s ease}
.mini-barra b{flex-shrink:0;min-width:34px;text-align:right;font-size:11.5px;font-weight:700;
  font-variant-numeric:tabular-nums}
.mini-barra.bom i{background:linear-gradient(90deg,color-mix(in srgb,var(--good) 55%,transparent),var(--good))}
.mini-barra.alerta i{background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 55%,transparent),var(--warn))}
.mini-barra.ruim i{background:linear-gradient(90deg,color-mix(in srgb,var(--bad) 55%,transparent),var(--bad))}
.mini-barra.bom b{color:var(--good-ink)}
.mini-barra.alerta b{color:var(--warn-ink)}
.mini-barra.ruim b{color:var(--bad-ink)}

#tab-mon th[data-ord]{cursor:pointer;user-select:none}
#tab-mon th[data-ord]:hover{color:var(--brand)}
#tab-mon .col-sel{width:34px}
#tab-mon tr.linha-critica{background:color-mix(in srgb,var(--bad) 6%,transparent)}
.link-maq{background:none;border:none;padding:0;height:auto;color:var(--text);cursor:pointer;
  font:inherit;text-align:left;box-shadow:none}
.link-maq:hover{color:var(--brand);text-decoration:underline;transform:none}
.tag-alerta{background:var(--bad-bg);border-color:var(--bad-bd);color:var(--bad-ink);margin-left:5px}

.det-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--e4)}
.det-bloco{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--e4);background:var(--surface2)}
.det-bloco h4{margin:0 0 10px;font-size:12.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.info-linha{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed var(--border);font-size:12.5px}
.info-linha:last-child{border-bottom:none}
.info-linha span{color:var(--muted)}
.info-linha b{text-align:right;word-break:break-word}

/* ===== Modal de detalhe da máquina (monitoramento) ===== */
.det-hero{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 18px;margin-bottom:16px;border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 10%,transparent),var(--surface2));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent)}
.det-hero .hero-ico{width:46px;height:46px;flex-shrink:0;border-radius:13px;display:grid;place-items:center;
  color:var(--brand);border:1px solid color-mix(in srgb,var(--brand) 32%,transparent);
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 26%,transparent),color-mix(in srgb,var(--brand) 8%,transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent),0 5px 14px -5px color-mix(in srgb,var(--brand) 50%,transparent)}
.det-hero .hero-ico svg{width:23px;height:23px}
.det-hero .hero-txt{flex:1;min-width:0}
.det-hero .hero-txt > b{display:block;font-size:19px;letter-spacing:-.4px;margin-bottom:6px}
.hero-meta{display:flex;flex-wrap:wrap;gap:6px}
.hero-tempo{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px}
.hero-tempo span{color:var(--muted)}
.hero-tempo b{font-size:14px}

.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:600;color:var(--muted);
  background:var(--surface);border:1px solid var(--border2)}
.chip svg{width:12px;height:12px}
.chip-status{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:700;border:1px solid transparent}
.chip-status i{width:7px;height:7px;border-radius:50%;display:inline-block}
.chip-status.online{background:var(--good-bg);border-color:var(--good-bd);color:var(--good-ink)}
.chip-status.online i{background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 25%,transparent)}
.chip-status.atencao{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-ink)}
.chip-status.atencao i{background:var(--warn)}
.chip-status.offline{background:var(--bad-bg);border-color:var(--bad-bd);color:var(--bad-ink)}
.chip-status.offline i{background:var(--bad)}

/* cartões de métrica com anel de progresso */
.det-metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.metrica{display:flex;align-items:center;gap:13px;padding:14px;border-radius:var(--r-md);
  background:var(--surface2);border:1px solid var(--border);position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent)}
.metrica::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc)}
.anel{width:66px;height:66px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--kc) calc(var(--pct,0)*1%),var(--surface3) 0)}
.anel::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--surface2)}
.anel span{position:relative;z-index:1;font-weight:800;font-size:16px;letter-spacing:-.5px}
.anel span i{font-style:normal;font-size:10px;color:var(--muted);margin-left:1px}
.metrica .m-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.metrica .m-info b{font-size:13.5px}
.metrica .m-info span{font-size:11px;color:var(--faint);line-height:1.35}
.metrica.av .av-ico{width:66px;height:66px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  color:var(--kc);background:color-mix(in srgb,var(--kc) 12%,transparent);
  border:2px solid color-mix(in srgb,var(--kc) 35%,transparent)}
.metrica.av .av-ico svg{width:28px;height:28px}
.badge-av{display:inline-block;width:fit-content;padding:2px 9px;border-radius:var(--r-full);
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  color:var(--kc);background:color-mix(in srgb,var(--kc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--kc) 40%,transparent)}

/* painéis internos do modal */
.det-colunas{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:780px){.det-colunas{grid-template-columns:1fr 1fr}}
.det-painel{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface2);
  overflow:hidden;margin-bottom:14px}
.det-colunas .det-painel{margin-bottom:0}
.det-painel > header{display:flex;align-items:center;gap:9px;padding:11px 14px;
  border-bottom:1px solid var(--border);background:var(--surface)}
.det-painel > header h4{margin:0;font-size:12.5px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);flex:1}
.det-painel > header .p-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  color:var(--brand);background:color-mix(in srgb,var(--brand) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent)}
.det-painel > header .p-ico svg{width:14px;height:14px}
.det-painel .p-corpo{padding:14px}

.grid-info{display:grid;grid-template-columns:1fr;gap:0}
.info-item{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px dashed var(--border);font-size:12.5px}
.info-item:last-child{border-bottom:none}
.info-item span{color:var(--muted);white-space:nowrap}
.info-item b{text-align:right;word-break:break-word}

/* cartões de disco */
.discos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.disco-card{border:1px solid var(--border);border-radius:var(--r-md);padding:12px;background:var(--surface);
  border-left:3px solid var(--kc)}
.disco-card .d-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.disco-card .d-topo b{display:flex;align-items:center;gap:6px;font-size:13px}
.disco-card .d-topo b svg{width:14px;height:14px;color:var(--kc)}
.disco-card .d-barra{height:8px;border-radius:99px;background:var(--surface3);overflow:hidden;
  border:1px solid var(--border)}
.disco-card .d-barra i{display:block;height:100%;border-radius:99px;background:var(--kc);
  transition:width .6s cubic-bezier(.4,0,.2,1)}
.disco-card .d-nums{display:flex;justify-content:space-between;gap:8px;margin-top:7px;
  font-size:11px;color:var(--faint)}
.disco-card .d-nums b{color:var(--text);font-size:12px}

.tab-det{font-size:12.5px}
.tab-det th{font-size:11px;text-transform:uppercase;letter-spacing:.4px}

/* =========================================================================
   REFINO NOC (2026-08) — pills de status, skeletons e pulso crítico.
   Só adiciona sobre o design system; nenhuma classe antiga muda de contrato.
   ========================================================================= */

/* pill de status compacta para tabelas e listas densas */
.chip-status.sm{font-size:10.5px;padding:2px 9px;gap:5px}
.chip-status.sm i{width:6px;height:6px}
/* o ponto da pill online respira, igual ao .ponto.on */
.chip-status.online i{animation:pulso-online 2.4s ease-in-out infinite}

/* célula de status do monitoramento: pill + tempo relativo + contador de alerta */
.cel-status{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* badge com ícone (ex.: escudo do antivírus) */
.badge svg{width:12px;height:12px;flex-shrink:0}

/* linha crítica do monitoramento: filete que pulsa discretamente à esquerda */
#tab-mon tr.linha-critica{position:relative}
#tab-mon tr.linha-critica td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
#tab-mon tr.linha-critica{animation:pulsa-critico 2.6s ease-in-out infinite}
@keyframes pulsa-critico{
  0%,100%{background:color-mix(in srgb,var(--bad) 6%,transparent)}
  50%{background:color-mix(in srgb,var(--bad) 11%,transparent)}
}

/* skeleton da primeira carga (cards e linhas), com o mesmo shimmer do BI */
.kpi-skel{
  min-height:118px;border:1px solid var(--border);border-radius:var(--r-md);
  background:linear-gradient(90deg,var(--surface2) 25%,var(--border) 37%,var(--surface2) 63%);
  background-size:400% 100%;animation:skel 1.3s ease infinite;
  box-shadow:var(--shadow);
}
.linha-skel td{padding:14px var(--e3)}
.skel-fixo{
  display:block;height:14px;border-radius:6px;
  background:linear-gradient(90deg,var(--surface2) 25%,var(--border) 37%,var(--surface2) 63%);
  background-size:400% 100%;animation:skel 1.3s ease infinite;
}

/* alvo da confirmação não destrutiva: informação, não perigo */
.alvo-destaque.neutro{background:var(--info-bg);border-color:var(--info-bd);color:var(--brand)}

@media(prefers-reduced-motion:reduce){
  .chip-status.online i,#tab-mon tr.linha-critica{animation:none}
}

/* botão suave azul (informativo) — par do .btn-perigo-suave, usado no reiniciar */
.btn-info-suave{background:var(--info-bg);color:var(--brand);border-color:var(--info-bd);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 5%,transparent)}
.btn-info-suave:hover{background:var(--brand);color:var(--brandink);filter:none}