/* ═══════════════════════════════════════════════════════════════════════════
   ESTILO DO SITE — LH ENGENHARIA
   ───────────────────────────────────────────────────────────────────────────
   Arquivo único de estilo. Carregado por login.html, index.html, usinas.html
   e painel.html DEPOIS do <style> de cada página, de propósito: assim o que
   está aqui vence, e mudar uma cor aqui muda o site todo.

   Paleta copiada do SEMS+ (decisão do usuário em 31/07/2026: usar as cores
   deles, não as da logo da LH). Valores medidos direto na tela do portal:
       vermelho #FF323A · fundo #1F2123 · painel #2F2F33 · borda #3A3A3C
       verde #5DC84F · azul #1677FF · amarelo #FAAD14

   VERMELHO é a cor de tudo: navegação ativa, botão principal E alerta —
   é assim no SEMS+. Para o alerta continuar se distinguindo do resto, ele
   nunca aparece sozinho: vem sempre com ÍCONE e fundo tingido a 12%.

   Nota de legibilidade (registrada, não impeditiva): #FF323A dá 4,44:1 sobre
   o fundo — ótimo para título, ícone e badge; para texto miúdo corrido o ideal
   seriam 4,5:1. Branco sobre o vermelho dá 3,64:1, então texto de botão
   vermelho vai sempre em negrito, que é o que o SEMS+ faz.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── FONTE ─────────────────────────────────────────────────────────────────
   Poppins servida da própria pasta static/fontes/ (sem depender do Google).
   Se os arquivos não existirem, o navegador cai na pilha geométrica abaixo e
   o site continua correto — só com outro desenho de letra.                   */
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/static/fontes/poppins-400.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/static/fontes/poppins-500.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/static/fontes/poppins-600.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/static/fontes/poppins-700.woff2') format('woff2');
}

:root{
  /* superfícies */
  --bg:#1f2123;            /* fundo geral                                     */
  --panel:#2f2f33;         /* painel/cartão                                   */
  --panel2:#3a3a3c;        /* campo, linha em hover, elemento embutido        */
  --border:#3f3f42;        /* borda                                           */
  --rail:#0d0d0f;          /* sidebar e fundo externo                         */

  /* texto */
  --txt:#f5f6f8;           /* 13,9:1                                          */
  --muted:#949698;         /*  4,8:1                                          */

  /* ACENTO — cor de navegação e ação. Trocável em Configurações.
     O JavaScript sobrescreve --acento/--acento-hover no <html>.              */
  --acento:#ff323a;
  --acento-hover:#e0242c;

  /* PERIGO — fixo, NUNCA muda com o tema nem com o acento escolhido.
     Erro, alerta e excluir precisam continuar assustando mesmo que o acento
     vire verde ou azul.                                                      */
  --perigo:#ff323a;
  --perigo-tint:rgba(255,50,58,.12);

  /* aliases usados pelas regras já escritas */
  --vermelho:var(--acento);
  --vermelho-txt:var(--acento);
  --vermelho-tint:rgba(255,50,58,.12);
  --vermelho-hover:var(--acento-hover);

  /* escala da fonte (Configurações) — 1 = tamanho normal */
  --escala:1;

  /* status, iguais aos do portal */
  --ok:#5dc84f;            --ok-tint:rgba(93,200,79,.12);
  --aviso:#faad14;         --aviso-tint:rgba(250,173,20,.12);
  --info:#1677ff;          --info-tint:rgba(22,119,255,.12);
  --run:#1677ff;
  --laranja:#fa7a1c;       --laranja-tint:rgba(250,122,28,.14);
  --roxo:#9254de;          --roxo-tint:rgba(146,84,222,.14);

  /* compatibilidade: os templates pedem estes nomes */
  --accent:var(--acento);
  --accent2:var(--acento);
  --erro:var(--perigo);      /* erro segue o PERIGO, não o acento */
  --azul:#1677ff;  --azul-txt:#1677ff;  --azul-tint:rgba(22,119,255,.12);

  /* forma */
  --r-pill:100px;          /* filtros, badges, botões                         */
  --r-card:16px;           /* painéis e cartões                               */
  --r-sm:10px;             /* elementos pequenos                              */
  --rail-w:64px;           /* largura da sidebar                              */

  --fonte:'Poppins','Century Gothic',"Segoe UI Variable Text",'Segoe UI',
          system-ui,-apple-system,sans-serif;
}

/* ═══ TEMAS ═══════════════════════════════════════════════════════════════
   O JavaScript põe data-tema no <html>. Só as superfícies e o texto mudam:
   acento, perigo e cores de status ficam iguais nos três.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ESCURO (padrão) — o cinza-carvão do SEMS+. Já está no :root acima. */

/* DARK — preto de verdade, para sala escura e para telas OLED */
:root[data-tema="dark"]{
  --bg:#000000;
  --panel:#111113;
  --panel2:#1c1c1f;
  --border:#2a2a2d;
  --rail:#000000;
  --txt:#f2f2f4;
  --muted:#8a8a8e;
}
:root[data-tema="dark"] .rail{border-right:1px solid var(--border);}

/* CLARO */
:root[data-tema="claro"]{
  --bg:#f4f5f7;
  --panel:#ffffff;
  --panel2:#eceef1;
  --border:#dcdfe4;
  --rail:#1f2123;          /* sidebar segue escura: a marca fica legível */
  --txt:#1b1d20;           /* 14,4:1 sobre o fundo claro                 */
  --muted:#5f6570;         /*  5,4:1                                     */
}
/* no claro, sombra leve substitui a borda para dar relevo ao cartão */
:root[data-tema="claro"] .bloco,
:root[data-tema="claro"] .card,
:root[data-tema="claro"] .col,
:root[data-tema="claro"] header{
  box-shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
}
/* hovers que eram "branco transparente" não aparecem no claro */
:root[data-tema="claro"] .cmd-tab:hover{background-color:rgba(0,0,0,.035);}
:root[data-tema="claro"] .rail-item:hover{background-color:rgba(255,255,255,.10);}
/* campo em foco: no escuro o fundo escurecia; no claro precisa clarear */
:root[data-tema="claro"] input:focus,
:root[data-tema="claro"] select:focus{background:#fff !important;}

/* ─── ESCALA DA FONTE ───────────────────────────────────────────────────────
   O CSS do site é em px, então mudar o font-size da raiz não resolveria.
   Uso zoom — mas na RAIZ, não em subárvores (header/main/.wrap): aplicado em
   subárvore, o Chrome deixava de recalcular o estilo quando o acento mudava, e
   os elementos dentro dela ficavam presos na cor antiga. Na raiz não acontece,
   e de bônus a barra lateral acompanha a escala. */
:root{zoom:var(--escala);}

/* ─── BASE ────────────────────────────────────────────────────────────────── */
body{
  font-family:var(--fonte) !important;
  background-color:var(--bg) !important;
  color:var(--txt);
  /* o SEMS+ usa fundo chapado, sem brilho de canto */
  background-image:none !important;
}
::selection{background-color:var(--vermelho);color:#fff;}

/* barra de rolagem combinando com o tema */
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:100px;border:2px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:#4d4d50;background-clip:content-box;}

/* ─── SIDEBAR DE ÍCONES ───────────────────────────────────────────────────── */
.rail{
  position:fixed;top:0;left:0;bottom:0;width:var(--rail-w);z-index:60;
  background-color:var(--rail);display:flex;flex-direction:column;align-items:center;
  padding:14px 0 12px;gap:6px;
}
/* o texto "LH" embaixo da logo saiu em 03/08/2026 (pedido do usuário: só a
   logo fica mais bonito). A margem que era do texto passou para a logo. */
.rail-logo{width:38px;height:38px;object-fit:contain;display:block;margin-bottom:18px;}
.rail-item{
  position:relative;width:42px;height:42px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;color:var(--muted);
  text-decoration:none;transition:.16s;flex-shrink:0;
}
.rail-item svg{width:21px;height:21px;display:block;}
.rail-item:hover{background-color:rgba(255,255,255,.07);color:var(--txt);}
.rail-item.on{background-color:var(--vermelho);color:#fff;}
.rail-item.on:hover{background-color:var(--vermelho-hover);}
/* nome do item aparece ao passar o mouse */
.rail-item::after{
  content:attr(data-nome);position:absolute;left:calc(100% + 10px);
  background-color:var(--panel);color:var(--txt);font-size:11.5px;font-weight:600;
  letter-spacing:.3px;padding:6px 11px;border-radius:8px;white-space:nowrap;
  border:1px solid var(--border);opacity:0;pointer-events:none;transition:.16s;
  transform:translateX(-4px);box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.rail-item:hover::after{opacity:1;transform:translateX(0);}
/* item de área ainda não liberada: apagado, mas continua clicável (abre o aviso) */
.rail-item.em-breve{opacity:.42;}
.rail-item.em-breve:hover{opacity:.75;}
.rail-item.em-breve::before{
  content:'';position:absolute;top:6px;right:6px;width:6px;height:6px;
  border-radius:50%;background-color:var(--aviso);
}

.rail-sep{flex:1;}
.rail-item.sair:hover{background-color:var(--vermelho);color:#fff;}

/* o conteúdo desvia da sidebar */
body.com-rail{padding-left:var(--rail-w);}
body.com-rail header{border-top-left-radius:var(--r-card);}

/* o alternador antigo (OPERAÇÃO/USINAS no header) sai: virou a sidebar */
.troca{display:none !important;}

/* ─── CABEÇALHO ───────────────────────────────────────────────────────────── */
header{
  background-color:var(--panel) !important;
  border-bottom:1px solid var(--border) !important;
  padding:14px 22px !important;
}
.logo-img{height:34px !important;}

/* ─── CANTOS EM PÍLULA E CARTÕES ──────────────────────────────────────────── */
/* campos e botões viram pílula */
input[type=text],input[type=password],input[type=search],input:not([type]),
select,.hdr-busca input,.ferramentas input,.ferramentas select{
  border-radius:var(--r-pill) !important;
  background-color:var(--panel2) !important;
  border:1px solid transparent !important;
  padding-left:15px !important;padding-right:15px !important;
  font-family:var(--fonte) !important;
}
input:focus,select:focus{
  border-color:var(--vermelho) !important;
  background-color:var(--rail) !important;
  outline:none !important;
}
button{font-family:var(--fonte) !important;border-radius:var(--r-pill) !important;}

/* painéis e cartões com canto grande */
.bloco,.card,.kpi,.painel-card,.col,.caixa,.secao,.busca-result,
.modal-box,.modal-conteudo{border-radius:var(--r-card) !important;}
.bloco,.card{background-color:var(--panel) !important;border-color:var(--border) !important;}

/* KPI do cabeçalho */
.kpi{background-color:var(--panel2) !important;border:1px solid transparent !important;}
.kpi:hover{border-color:var(--vermelho) !important;}
.kpi .kv{font-weight:700 !important;}

/* ─── TÍTULO GRANDE DA PÁGINA ─────────────────────────────────────────────── */
.titulo-pagina{
  font-size:26px;font-weight:700;letter-spacing:-.4px;margin:2px 0 16px;
}
.titulo-pagina small{
  display:block;font-size:12px;font-weight:400;color:var(--muted);
  letter-spacing:.2px;margin-top:3px;
}

/* ─── ABAS ────────────────────────────────────────────────────────────────── */
.aba,.tab{
  font-family:var(--fonte) !important;border-radius:0 !important;
  border-bottom:2px solid transparent !important;
}
.aba.on,.tab.ativa,.tab.on{
  color:var(--vermelho) !important;border-bottom-color:var(--vermelho) !important;
}

/* Cliente encontrado pela busca geral: pisca por 3s para o olho achar sozinho
   depois da rolagem. Serve tanto para a linha da lista quanto para o cartão. */
.achado{
  animation:piscar-achado 3.2s ease-out;
  position:relative;z-index:5;
}
@keyframes piscar-achado{
  0%,55%  {background-color:var(--vermelho-tint);box-shadow:0 0 0 2px var(--acento) inset;}
  100%    {background-color:transparent;box-shadow:0 0 0 2px transparent inset;}
}

/* ═══ ÍCONES ══════════════════════════════════════════════════════════════
   Desenho vetorial no lugar de emoji. Emoji muda de forma conforme a fonte do
   sistema e não obedece a cor do texto; isto obedece.

   Uso:  <i class="ico ico-copiar"></i>   ·   <i class="ico ico-lupa"></i>

   Funciona por `mask`: o SVG vira o recorte e a cor vem de `currentColor`,
   então o ícone acompanha a cor do texto e o tema sem precisar de duas versões.
   Tamanho = 1em, ou seja, acompanha a fonte do elemento em volta.
   ═══════════════════════════════════════════════════════════════════════════ */
.ico{
  display:inline-block;flex-shrink:0;width:1em;height:1em;
  background-color:currentColor;vertical-align:-.14em;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
/* duas folhas sobrepostas — a da frente em cima, à direita */
.ico-copiar{
  -webkit-mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='14' height='14' rx='2.4'/%3E%3Cpath d='M8 8H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E");
          mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='14' height='14' rx='2.4'/%3E%3Cpath d='M8 8H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E");
}
/* lupa fina: círculo em cima à esquerda, cabo para baixo à direita */
.ico-lupa{
  -webkit-mask-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='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7.2'/%3E%3Cpath d='M15.8 15.8 21 21'/%3E%3C/svg%3E");
          mask-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='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7.2'/%3E%3Cpath d='M15.8 15.8 21 21'/%3E%3C/svg%3E");
}

/* ═══ CONTROLES DO CABEÇALHO (injetados por config.js) ════════════════════ */

/* busca global — vale em todas as telas */
.gb{position:relative;flex:0 1 340px;min-width:170px;}
.gb input{
  width:100%;padding:9px 14px 9px 36px !important;font-size:13px;
  color:var(--txt);
}
.gb .gb-ico{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  font-size:13px;color:var(--muted);pointer-events:none;
}
.gb .gb-atalho{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font-size:10px;color:var(--muted);border:1px solid var(--border);
  border-radius:5px;padding:2px 6px;pointer-events:none;
}
.gb input:focus ~ .gb-atalho{display:none;}
.gb-res{
  position:absolute;top:calc(100% + 7px);left:0;width:min(430px,78vw);
  max-height:min(380px,60vh);overflow-y:auto;background-color:var(--panel);
  border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:0 12px 40px rgba(0,0,0,.5);display:none;z-index:200;padding:6px;
}
.gb-res.abre{display:block;}
.gb-item{
  display:flex;align-items:center;gap:10px;padding:9px 11px;
  border-radius:var(--r-sm);cursor:pointer;text-decoration:none;color:var(--txt);
}
.gb-item:hover,.gb-item.sel{background-color:var(--panel2);}
.gb-tx{flex:1;min-width:0;}
.gb-nome{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gb-sub{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gb-rot{
  font-size:9.5px;font-weight:700;letter-spacing:.4px;padding:3px 8px;
  border-radius:var(--r-pill);flex-shrink:0;
}
.gb-vazio{padding:18px;text-align:center;color:var(--muted);font-size:12.5px;}

/* botões redondos do cabeçalho: ↻, tela cheia, engrenagem */
.hb{
  width:34px;height:34px;flex-shrink:0;border-radius:var(--r-pill) !important;
  border:1px solid var(--border);background-color:var(--panel2);color:var(--muted);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;transition:.15s;
}
.hb:hover{border-color:var(--acento);color:var(--acento);}
.hb svg{width:17px;height:17px;}
.hb.girando{animation:girar .8s linear infinite;color:var(--acento);}
@keyframes girar{to{transform:rotate(360deg);}}

/* "atualizado há X" */
.hb-tempo{
  font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0;
  margin-left:-2px;
}

/* ═══ PAINEL DE CONFIGURAÇÕES ═════════════════════════════════════════════ */
.cfg-fundo{
  position:fixed;inset:0;background-color:rgba(0,0,0,.55);z-index:400;
  display:none;backdrop-filter:blur(2px);
}
.cfg-fundo.abre{display:block;}
.cfg{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);z-index:401;
  background-color:var(--panel);border-left:1px solid var(--border);
  transform:translateX(100%);transition:transform .22s ease;
  display:flex;flex-direction:column;
}
.cfg.abre{transform:translateX(0);}
.cfg-topo{
  display:flex;align-items:center;gap:12px;padding:18px 22px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.cfg-topo h2{font-size:16px;font-weight:700;flex:1;}
.cfg-corpo{padding:20px 22px 30px;overflow-y:auto;flex:1;}
.cfg-grupo{margin-bottom:26px;}
.cfg-rot{
  font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--muted);margin-bottom:11px;
}
.cfg-dica{font-size:11.5px;color:var(--muted);margin-top:9px;line-height:1.5;}

/* escolha de tema: três cartões com amostra */
.cfg-temas{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.cfg-tema{
  border:2px solid var(--border);border-radius:12px;padding:8px;cursor:pointer;
  background:none;transition:.15s;font-family:var(--fonte);
}
.cfg-tema:hover{border-color:var(--muted);}
.cfg-tema.on{border-color:var(--acento);}
.cfg-amostra{height:38px;border-radius:7px;margin-bottom:7px;display:flex;
  align-items:flex-end;padding:4px;gap:3px;}
.cfg-amostra i{display:block;height:7px;border-radius:2px;}
.cfg-tema span{font-size:11px;font-weight:600;color:var(--txt);}

/* escolha do acento */
.cfg-cores{display:flex;gap:9px;flex-wrap:wrap;}
.cfg-cor{
  width:34px;height:34px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;position:relative;transition:.15s;
}
.cfg-cor:hover{transform:scale(1.08);}
.cfg-cor.on{border-color:var(--txt);box-shadow:0 0 0 3px var(--panel) inset;}

/* tamanho da fonte */
.cfg-fonte{display:flex;align-items:center;gap:12px;}
.cfg-fbtn{
  width:36px;height:36px;border-radius:var(--r-pill) !important;
  border:1px solid var(--border);background-color:var(--panel2);color:var(--txt);
  font-size:17px;font-weight:700;cursor:pointer;line-height:1;
}
.cfg-fbtn:hover:not(:disabled){border-color:var(--acento);color:var(--acento);}
.cfg-fbtn:disabled{opacity:.4;cursor:not-allowed;}
.cfg-fval{
  flex:1;text-align:center;font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.cfg-rodape{
  padding:14px 22px;border-top:1px solid var(--border);flex-shrink:0;
  display:flex;gap:9px;
}

/* ─── ABAS DOS COMANDOS (arrastáveis) ─────────────────────────────────────── */
.cmd-tabs{
  display:flex;gap:2px;flex-wrap:wrap;align-items:center;
  border-bottom:1px solid var(--border);margin:0 0 22px;
}
.cmd-tab{
  display:inline-flex;align-items:center;gap:8px;background:none;border:none;
  border-radius:0 !important;border-bottom:2px solid transparent;
  padding:13px 18px;font-size:12.5px;font-weight:600;letter-spacing:.4px;
  color:var(--muted);cursor:grab;transition:.15s;font-family:var(--fonte);
  white-space:nowrap;user-select:none;
}
.cmd-tab:hover{color:var(--txt);background-color:rgba(255,255,255,.03);}
.cmd-tab.ativa{color:var(--vermelho);border-bottom-color:var(--vermelho);}
.cmd-tab .ci{font-size:13px;}
/* enquanto arrasta e onde vai encaixar */
.cmd-tab.arrastando{opacity:.4;cursor:grabbing;}
.cmd-tab.drop-antes{box-shadow:inset 3px 0 0 var(--vermelho);}
.cmd-tab.drop-depois{box-shadow:inset -3px 0 0 var(--vermelho);}

/* o bloco de cada comando: só o da aba ativa aparece */
.secao-corpo.oculta{display:none !important;}
/* títulos recolhíveis foram substituídos pelas abas */
.secao-titulo{display:none !important;}

/* ─── ABAS DE ETAPA (contador), como a lista de plantas do SEMS+ ─────────── */
.etapas{
  display:flex;gap:4px;flex-wrap:wrap;align-items:center;
  border-bottom:1px solid var(--border);margin:4px 0 16px;padding-bottom:0;
}
.etapa-aba{
  display:inline-flex;align-items:center;gap:7px;background:none;border:none;
  border-radius:0 !important;border-bottom:2px solid transparent;
  padding:11px 15px;font-size:13px;font-weight:500;color:var(--muted);
  cursor:pointer;transition:.15s;font-family:var(--fonte);white-space:nowrap;
}
.etapa-aba:hover{color:var(--txt);}
.etapa-aba.on{color:var(--vermelho);border-bottom-color:var(--vermelho);font-weight:600;}
.etapa-cont{color:var(--muted);font-weight:400;}
.etapa-aba.on .etapa-cont{color:var(--vermelho);}
.etapa-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;}

/* ─── ALTERNADOR LISTA / QUADRO ───────────────────────────────────────────── */
.modo-troca{
  display:flex;background-color:var(--panel2);border-radius:var(--r-pill);
  padding:3px;flex-shrink:0;
}
.modo-btn{
  border:none;background:none;color:var(--muted);cursor:pointer;
  padding:6px 14px;font-size:11.5px;font-weight:700;letter-spacing:.5px;
  border-radius:var(--r-pill) !important;transition:.15s;font-family:var(--fonte);
}
.modo-btn:hover{color:var(--txt);}
.modo-btn.on{background-color:var(--vermelho);color:#fff;}

/* ─── TABELA DO FUNIL ─────────────────────────────────────────────────────── */
#funil-lista table{width:100%;border-collapse:collapse;font-size:13px;}
#funil-lista th{
  text-align:left;padding:12px 13px;font-size:10.5px;text-transform:uppercase;
  white-space:nowrap;border-bottom:1px solid var(--border);
}
#funil-lista td{padding:12px 13px;vertical-align:middle;}
#funil-lista .ln-nome{font-weight:600;}
#funil-lista .ln-obs{
  color:var(--muted);max-width:260px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;
}
#funil-lista .ln-acoes{white-space:nowrap;text-align:right;}
.ln-btn{
  background-color:var(--panel2);border:1px solid transparent;color:var(--muted);
  width:29px;height:29px;border-radius:var(--r-pill) !important;cursor:pointer;
  font-size:13px;line-height:1;margin-left:5px;transition:.15s;
}
.ln-btn:hover{border-color:var(--vermelho);color:var(--vermelho);}

/* ─── BADGES / TAGS ───────────────────────────────────────────────────────── */
/* pílula com fundo tingido a 12% + cor do texto forte, como no SEMS+ */
.tag,.badge,.br-etapa,.pill{
  border-radius:var(--r-pill) !important;font-weight:600 !important;
  letter-spacing:.3px !important;display:inline-flex !important;
  align-items:center !important;gap:5px !important;padding:3px 10px !important;
}
.t-alta,.tag-erro,.badge-erro{background-color:var(--perigo-tint) !important;color:var(--perigo) !important;}
.t-media,.tag-aviso{background-color:var(--aviso-tint) !important;color:var(--aviso) !important;}
.t-ok,.tag-ok{background-color:var(--ok-tint) !important;color:var(--ok) !important;}
.t-baixa{background-color:rgba(148,150,152,.14) !important;color:var(--muted) !important;}

/* ─── BOTÕES ──────────────────────────────────────────────────────────────── */
/* principal = azul preenchido, texto branco (8,78:1) */
/* .go é o botão grande de ação das telas de comando (INICIAR, SINCRONIZAR...).
   Herdava texto #111, que funcionava no laranja antigo mas dá só 2,4:1 sobre o
   vermelho. Agora é vermelho chapado com texto branco em negrito, como no SEMS+. */
.btn-principal,.btn-sync,#btn-iniciar,.btn-acao,.go{
  background-color:var(--vermelho) !important;background-image:none !important;
  color:#fff !important;border:1px solid transparent !important;
  font-weight:700 !important;
}
.btn-principal:hover:not(:disabled),.btn-sync:hover:not(:disabled),
#btn-iniciar:hover:not(:disabled),.btn-acao:hover:not(:disabled),
.go:hover:not(:disabled){
  background-color:var(--vermelho-hover) !important;color:#fff !important;
}
/* perigo = vermelho preenchido */
.btn-excluir,.btn-perigo,.fm-excluir{
  background-color:var(--perigo) !important;color:#fff !important;
  border:1px solid transparent !important;font-weight:700 !important;
}
.btn-excluir:hover,.btn-perigo:hover{filter:brightness(.88);}
.rail-item.sair:hover{background-color:var(--perigo) !important;color:#fff !important;}
/* secundário = contorno */
.btn-secundario,.btn-limpar{
  background-color:var(--panel2) !important;color:var(--txt) !important;
  border:1px solid var(--border) !important;
}
.btn-secundario:hover{border-color:var(--vermelho) !important;color:var(--vermelho) !important;}

/* ─── TABELAS ─────────────────────────────────────────────────────────────── */
th{letter-spacing:.6px !important;color:var(--muted) !important;}
th:hover{color:var(--vermelho) !important;}
tbody tr:hover{background-color:var(--panel2) !important;}
td{border-bottom-color:rgba(58,58,60,.55) !important;}

/* ─── DIVERSOS ────────────────────────────────────────────────────────────── */
.col.realce{
  border-color:var(--vermelho) !important;
  box-shadow:0 0 0 3px var(--vermelho-tint) !important;
}
.hdr-refresh{border-radius:var(--r-pill) !important;}
.hdr-refresh:hover,.hdr-refresh.girando{color:var(--vermelho) !important;border-color:var(--vermelho) !important;}
.barra .pr{background:linear-gradient(90deg,var(--vermelho),var(--vermelho)) !important;}
/* caixa de informação: fica AZUL de propósito, para não competir com alerta */
.aviso-fase{
  background-color:var(--info-tint) !important;border-color:rgba(22,119,255,.35) !important;
  border-radius:var(--r-card) !important;
}
.aviso-fase b{color:var(--info) !important;}

/* foco visível por teclado — acessibilidade */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--vermelho) !important;outline-offset:2px !important;
}

/* ═══ AVISO DE SENHA PADRÃO ════════════════════════════════════════════════
   13/08/2026. Fica aqui, e não no <style> de cada tela, porque o MESMO aviso
   aparece nas duas entradas do site via {% include "_aviso_senha.html" %} —
   local viraria cópia em dois lugares, que depois divergem.

   Âmbar de propósito: senha padrão é ATENÇÃO, não erro. O vermelho é reservado
   para erro, alerta e excluir, e é o que dá o susto.

   ⚠️ Não reusar `.aviso-fase`: ela é forçada para azul com !important mais
   abaixo, e a caixa não ficaria âmbar.
   ═══════════════════════════════════════════════════════════════════════════ */
.aviso-senha{
  display:flex;align-items:center;gap:12px;
  background-color:var(--aviso-tint);border:1px solid var(--aviso-tint);
  border-radius:var(--r-card);padding:13px 16px;margin-bottom:18px;
  font-size:13px;line-height:1.5;
}
.aviso-senha .as-alerta{color:var(--aviso);font-size:17px;line-height:1;flex-shrink:0;}
.aviso-senha b{color:var(--aviso);}
/* ⚠️ min-width:0 é o que faz o TEXTO encolher em vez do botão. Item de flex não
   passa do próprio conteúdo por padrão (min-width:auto) e, com a fonte da raiz
   ampliada, o botão era empurrado para fora da caixa. */
.aviso-senha>div{flex:1;min-width:0;}
.aviso-senha-btn{
  flex-shrink:0;display:inline-flex;align-items:center;text-decoration:none;
  padding:9px 16px;font-size:12px;letter-spacing:.4px;
  /* o raio de pílula da regra geral só alcança <button>, e este é um <a> */
  border-radius:var(--r-pill);
}

/* Pontinho de pendência no item da sidebar. Não reusar `.em-breve`: aquele APAGA
   o item (opacidade baixa), e aqui o item está ativo — só pedindo atenção. */
.rail-item.pendente::before{
  content:'';position:absolute;top:6px;right:6px;width:6px;height:6px;
  border-radius:50%;background-color:var(--aviso);
}

/* ═══ LUPA DOS CAMPOS DE BUSCA — fica no FIM do arquivo de propósito ═══════
   A lupa não pode ir no `placeholder` (texto não aceita SVG), então entra como
   imagem de fundo do campo. Duas armadilhas resolvidas aqui:

   1. O seletor é `input.busca` (0,1,1) e NÃO `.busca` (0,1,0): a regra geral
      `input[type=text]{padding-left:15px !important}` tem especificidade (0,1,1)
      e vencia — a lupa ficava embaixo do texto digitado. Como as duas empatam,
      quem vem DEPOIS no arquivo ganha: por isso este bloco é o último.
   2. `mask` não funciona em background-image, então a cor é fixa — daí a
      versão separada para o tema claro.
   ═══════════════════════════════════════════════════════════════════════════ */
input.busca, input#obs-busca{
  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='%23949698' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7.2'/%3E%3Cpath d='M15.8 15.8 21 21'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:14px center !important;
  background-size:15px 15px !important;
  padding-left:38px !important;
}
:root[data-tema="claro"] input.busca,
:root[data-tema="claro"] input#obs-busca{
  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='%235f6570' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7.2'/%3E%3Cpath d='M15.8 15.8 21 21'/%3E%3C/svg%3E") !important;
}
