:root{
  --bg: #0E141B;
  --surface: #141C25;
  --surface-2: #1B2530;
  --line: #2A3646;
  --line-soft: #212C39;
  --text: #E7EAEE;
  --text-muted: #8D98AA;
  --copper: #C9793E;
  --copper-bright: #E2954F;
  --live: #4FC3E8;
  --ok: #4CAF7D;
  --warn: #E2B33D;
  --danger: #E15B5B;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
*{ box-sizing:border-box; }
/* Sem isso o iOS/Android aumenta a fonte sozinho ao girar pra paisagem */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:15px; line-height:1.55;
}
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.01em; }
a{ color:inherit; }
button, input, select{ font-family:inherit; font-size:inherit; }

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  /* PWA em tela cheia (viewport-fit=cover): nao deixa o cartao embaixo do notch/barra.
     Navegador sem env() descarta a linha e fica com o padding acima. */
  padding:calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}
.login-card{
  width:100%; max-width:380px; background:var(--surface);
  border:1px solid var(--line-soft); border-radius:6px; padding:36px 32px;
}
.brand{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; margin-bottom:28px; color:inherit; text-decoration:none; }
a.brand{ cursor:pointer; }
.brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--copper); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:0.82rem; color:var(--text-muted); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text);
  border-radius:4px; padding:10px 12px;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--copper-bright); outline-offset:1px; }
.select-sm{
  background:var(--bg); border:1px solid var(--line); color:var(--text);
  border-radius:4px; padding:5px 8px; cursor:pointer;
}
.select-sm:focus{ outline:2px solid var(--copper-bright); outline-offset:1px; }
.select-sm:disabled{ opacity:.6; cursor:wait; }
.btn{
  display:inline-block; background:var(--copper); color:var(--bg); font-weight:600;
  border:none; border-radius:4px; padding:11px 18px; cursor:pointer; transition:background .15s;
}
.btn:hover{ background:var(--copper-bright); }
.btn-ghost{
  background:transparent; color:var(--text-muted); border:1px solid var(--line);
}
.btn-ghost:hover{ color:var(--text); border-color:var(--copper); }
.btn-sm{ padding:6px 12px; font-size:0.82rem; }
.erro-msg{ color:var(--danger); font-size:0.85rem; min-height:1.2em; margin-top:4px; }
.sub{ color:var(--text-muted); font-size:0.85rem; }
.link-secondary{ color:var(--text-muted); font-size:0.85rem; text-decoration:none; }
.link-secondary:hover{ color:var(--copper-bright); }

/* ---------- App shell ---------- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  width:230px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; padding:22px 0;
  padding-top:calc(22px + env(safe-area-inset-top)); padding-bottom:calc(22px + env(safe-area-inset-bottom));
  padding-left:env(safe-area-inset-left);
}
.sidebar .brand{ padding:0 22px; margin-bottom:26px; }
.sidebar nav{ display:flex; flex-direction:column; gap:2px; }
.sidebar nav button{
  all:unset; cursor:pointer; padding:11px 22px; color:var(--text-muted); font-size:0.92rem;
  border-left:2px solid transparent;
}
.sidebar nav button:hover{ color:var(--text); background:var(--surface-2); }
.sidebar nav button.active{ color:var(--text); border-left-color:var(--copper); background:var(--surface-2); }
.sidebar .rodape{ margin-top:auto; padding:0 22px; }

.main{ flex:1; min-width:0; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; border-bottom:1px solid var(--line-soft);
  padding-top:calc(18px + env(safe-area-inset-top)); padding-right:calc(32px + env(safe-area-inset-right));
}
.topbar h1{ font-size:1.2rem; }
.topbar .sub{ color:var(--text-muted); font-size:0.85rem; margin-top:2px; }
.topbar .sub.offline{ color:var(--danger); }
.topbar .sub.parcial{ color:var(--warn); }
.content{ padding:32px; max-width:1100px; }
.content{ padding-right:calc(32px + env(safe-area-inset-right)); padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
/* Painel NOC (telao/desktop grande): cards e mapa usam a largura toda; so as
   secoes de formulario continuam limitadas pra nao esticar os campos. */
.content.content-larga{ max-width:none; }
.content-larga > .secao-estreita{ max-width:1100px; }
.hide{ display:none !important; }

/* ---------- Cards / tabelas ---------- */
.card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:6px;
  padding:22px; margin-bottom:20px;
}
table{ width:100%; border-collapse:collapse; }
th, td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--line-soft); font-size:0.9rem; }
th{ color:var(--text-muted); font-weight:500; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.03em; }
td.actions{ white-space:nowrap; }
td.actions .btn{ margin:2px 0; }
/* Tabela larga rola so dentro do proprio conteiner (nunca a pagina inteira) */
.tabela-rolagem{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.tabela-rolagem > table{ min-width:100%; }

.badge{
  display:inline-block; font-family:var(--font-mono); font-size:0.72rem; padding:3px 8px;
  border-radius:3px; border:1px solid var(--line); color:var(--text-muted); white-space:nowrap;
}
.badge-ok{ color:var(--ok); border-color:var(--ok); }
.badge-warn{ color:var(--warn); border-color:var(--warn); }
.badge-danger{ color:var(--danger); border-color:var(--danger); }
.badge-live{ color:var(--live); border-color:var(--live); }

/* ---------- NOC grid ---------- */
.noc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:16px; }
.noc-card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:6px; padding:18px;
  cursor:pointer; transition:border-color .15s;
}
.noc-card:hover{ border-color:var(--copper); }
.noc-card.noc-oculta{ opacity:0.55; }
.noc-card.noc-indisponivel{ opacity:0.55; cursor:default; }
.noc-card.noc-indisponivel:hover{ border-color:var(--line-soft); }
.noc-card .noc-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.noc-card h3{ font-size:1rem; margin:0; }
.noc-card .linha{ display:flex; justify-content:space-between; align-items:center; font-size:0.85rem; color:var(--text-muted); margin-top:4px; }
.noc-card .linha > span:first-child{ margin-right:8px; min-width:0; }
.noc-card .linha .badge{ flex-shrink:0; }

.ficha-linha{
  display:flex; justify-content:space-between; gap:16px; padding:9px 0;
  border-bottom:1px solid var(--line-soft); font-size:0.88rem;
}
.ficha-linha:last-child{ border-bottom:none; }
.ficha-linha span{ color:var(--text-muted); }
.ficha-linha b{ font-weight:500; text-align:right; min-width:0; overflow-wrap:break-word; word-break:break-word; }
.noc-card .noc-acoes{ display:flex; flex-wrap:wrap; margin-top:12px; }
.noc-card .noc-acoes .btn{ margin:0 6px 6px 0; }

.status-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; }
.status-dot.verde{ background:var(--ok); }
.status-dot.amarelo{ background:var(--warn); }
.status-dot.vermelho{ background:var(--danger); }
.status-dot.laranja{ background:var(--copper-bright); }
.status-dot.cinza{ background:#5A6472; }
/* margem em vez de gap: gap em flexbox so existe a partir do Chrome 84 (tablet com WebView antiga) */
.status-legenda{ display:flex; flex-wrap:wrap; font-size:0.8rem; color:var(--text-muted); align-items:center; margin-right:-16px; }
.status-legenda > span{ display:inline-flex; align-items:center; margin:2px 16px 2px 0; }
.status-legenda .status-dot{ margin-right:6px; }

/* ---------- Diagrama de monitoramento ---------- */
/* Altura acompanha o espaco disponivel na tela (nao fica fixa/pequena
   independente do tamanho da janela) - o viewBox em si e recalculado em
   JS (ajustarViewBoxDiagrama) pros limites reais dos elementos do diagrama,
   entao o SVG sempre usa o espaco disponivel de forma proporcional. */
.diagrama-box{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:68vh; max-height:720px; min-height:360px; padding:10px;
}
/* Barra acima do diagrama: titulo, legenda de cores e botoes quebram linha
   em tela estreita (margens em vez de gap, ver .status-legenda) */
.barra-diagrama{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:10px 22px 4px; }
.barra-diagrama > *{ margin:0 12px 6px 0; }
.barra-diagrama .status-legenda{ margin-right:0; }
.barra-diagrama-acoes{ display:flex; flex-wrap:wrap; align-items:center; }
.barra-diagrama-acoes .btn{ margin:0 8px 0 0; }
.diagrama-box svg{ width:100%; height:100%; display:block; }
.diagrama-label{ font-family:var(--font-mono); font-size:11px; fill:var(--text-muted); }
.diagrama-valor{ font-family:var(--font-mono); font-size:13px; fill:var(--text); font-weight:600; }
.diagrama-valor.pulso{ animation:pulso-flash .5s ease; }
/* contorno da cor do fundo atras dos textos do diagrama: linha de ligacao que
   passa por baixo de um rotulo (ex: rele acima do disjuntor) some atras dele
   em vez de riscar o texto */
.diagrama-label, .diagrama-valor{ paint-order:stroke; stroke:var(--surface); stroke-width:5px; stroke-linejoin:round; }
.diagrama-box:fullscreen .diagrama-label, .diagrama-box:fullscreen .diagrama-valor{ stroke:var(--bg); }
@keyframes pulso-flash{ 0%{ fill:var(--live); } 100%{ fill:var(--text); } }
.icone-alarme{ animation:alerta-pulso 1.4s ease-in-out infinite; }
@keyframes alerta-pulso{ 0%,100%{ opacity:1; } 50%{ opacity:0.45; } }

.btn-com-icone{ display:inline-flex; align-items:center; gap:6px; }
.btn-icone-somente{ display:inline-flex; align-items:center; justify-content:center; padding:8px; line-height:0; }
.icone-btn{ flex-shrink:0; }

/* Tela cheia: o elemento .diagrama-box vira a tela inteira (Fullscreen API) -
   so ele e seus filhos ficam visiveis, o resto da pagina some sozinho. */
#btn-fechar-tela-cheia{ position:absolute; top:16px; right:16px; z-index:5; display:none; }
.diagrama-box:fullscreen{ height:100vh; max-height:none; background:var(--bg); padding:32px; }
.diagrama-box:fullscreen #btn-fechar-tela-cheia{ display:inline-flex; }
.diagrama-box:-webkit-full-screen{ height:100vh; max-height:none; background:var(--bg); padding:32px; }
.diagrama-box:-webkit-full-screen #btn-fechar-tela-cheia{ display:inline-flex; }

form.inline{ display:flex; flex-wrap:wrap; align-items:flex-end; margin-bottom:8px; }
form.inline > *{ margin:0 10px 10px 0; }
form.inline .field{ margin-bottom:10px; min-width:160px; }


/* ---------- Configuracao de ingestao do gateway ---------- */
.mono{ font-family:var(--font-mono); }
textarea.codigo{
  width:100%; margin-top:6px; background:var(--bg); border:1px solid var(--line); color:var(--text);
  border-radius:4px; padding:10px 12px; font-family:var(--font-mono); font-size:0.8rem; line-height:1.5; resize:vertical;
}
textarea.codigo:focus{ outline:2px solid var(--copper-bright); outline-offset:1px; }
.cfg-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:20px; }
.cfg-grid > *{ min-width:0; }
.cfg-acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.cfg-ok{ color:var(--ok); font-size:0.85rem; min-height:1.2em; margin-top:4px; }
#cfg-resultado table td, #cfg-guia table td{ font-size:0.82rem; padding:6px 8px; }
#cfg-resultado .mono, #cfg-guia .mono{ font-size:0.78rem; }


/* ---------- Mapa (Leaflet) ---------- */
/* Tiles claros do OpenStreetMap escurecidos pra combinar com o portal */
.mapa-tiles-escuro{ filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.6); }
.leaflet-container{ background:var(--bg); font-family:var(--font-body); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip{ background:var(--surface-2); color:var(--text); }
.leaflet-popup-content{ margin:12px 16px; font-size:0.85rem; }
.leaflet-popup-content h4{ margin:0 0 6px; font-family:var(--font-display); font-size:0.95rem; }
.leaflet-container a.leaflet-popup-close-button{ color:var(--text-muted); }
.leaflet-control-attribution{ background:rgba(14,20,27,0.75) !important; color:var(--text-muted); }
.leaflet-control-attribution a{ color:var(--text-muted); }
.mapa-pin{ background:none; border:0; }
/* sombra pra destacar o pino do fundo (principalmente no satelite) */
.mapa-pin svg{ filter: drop-shadow(0 1px 2px rgba(0,0,0,.75)) drop-shadow(0 0 1px rgba(0,0,0,.6)); overflow: visible; }
/* seletor de camadas no tema do portal */
.leaflet-control-layers{ border-radius:6px; }
.leaflet-control-layers-expanded{ background:var(--surface-2); color:var(--text); border:1px solid var(--line) !important; padding:8px 12px; font-size:0.85rem; }
.leaflet-control-layers label{ margin:4px 0; cursor:pointer; }
.leaflet-touch .leaflet-control-layers-toggle{ width:44px; height:44px; }
.mapa-pin-piscar svg{ animation: pin-pulso 1.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes pin-pulso{ 50%{ transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce){ .mapa-pin-piscar svg{ animation:none; } }
#mapa-garagens{ height: calc(100vh - 260px); min-height: 360px; border-radius:6px; }
#mapa-local{ height: 280px; border-radius:6px; margin-top:12px; }

/* ---------- Concessionaria (dados da garagem + acionamento) ---------- */
.form-grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px 14px; margin-top:6px; }
.form-grade .field{ margin-bottom:0; }
.form-grade .campo-largo{ grid-column:1 / -1; }
.form-grade textarea{ width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:4px; padding:9px 12px; font:inherit; resize:vertical; }
.canais-lista{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; }
.canal{ display:block; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:6px; padding:10px 14px; color:var(--text); text-decoration:none; }
.canal:hover{ border-color:var(--copper); }
.canal.emergencia{ border-left:3px solid var(--danger); }
.canal .rotulo{ display:block; font-size:0.78rem; color:var(--text-muted); }
.canal .valor{ display:block; font-family:var(--font-mono); font-size:0.95rem; margin-top:2px; word-break:break-all; }
.canais-grupo{ font-size:0.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin:14px 0 8px; }
.canais-grupo:first-child{ margin-top:0; }
.aviso-conc{ background:rgba(226,179,61,0.1); border:1px solid rgba(226,179,61,0.4); color:var(--warn); border-radius:6px; padding:9px 14px; font-size:0.85rem; margin-bottom:14px; }
.faixa-falta-rede{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  background:rgba(225,91,91,0.12); border:1px solid rgba(225,91,91,0.5); border-left:4px solid var(--danger);
  border-radius:6px; padding:12px 18px; margin-bottom:20px;
}
.faixa-falta-rede b{ color:var(--danger); margin-right:8px; }
#card-acionar.destaque{ border-color:var(--danger); box-shadow:0 0 0 1px var(--danger); }
.mapa-falha{ display:flex; align-items:center; justify-content:center; height:100%; min-height:200px; padding:24px; text-align:center; color:var(--warn); font-size:0.9rem; }
.mapa-aviso-tiles{ max-width:280px; background:rgba(14,20,27,0.92); color:var(--warn); border:1px solid rgba(226,179,61,0.5); border-radius:6px; padding:8px 12px; font-size:0.8rem; }


/* =====================================================================
   Ajustes por dispositivo
   - celular: ate 600px (360-414 na pratica)
   - tablet: 601-1024 (retrato ate 800 usa a navegacao no topo)
   - desktop/telao: >= 1280
   Tudo com fallback pra navegador antigo (Chrome 79 / WebView Android):
   nada de gap em flexbox como unico espaco, aspect-ratio, :is(), clamp().
   ===================================================================== */

/* ---------- Tablet retrato e celular: navegacao vira barra no topo ---------- */
@media (max-width: 800px){
  .app-shell{ flex-direction:column; }
  /* Linha 1: marca + botoes (voltar/sair); linha 2: secoes com rolagem lateral */
  .sidebar{
    width:100%; flex-direction:row; flex-wrap:wrap; align-items:center;
    border-right:none; border-bottom:1px solid var(--line-soft);
    padding:8px 12px 0;
    padding:calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));
  }
  .sidebar .brand{ order:1; padding:0; margin:0 12px 0 0; min-height:44px; }
  .sidebar .rodape{ order:2; display:flex; flex-wrap:wrap; justify-content:flex-end; margin:0 0 0 auto; padding:0; }
  /* os botoes tem width:100% inline (layout de coluna) */
  .sidebar .rodape .btn{ width:auto !important; margin:4px 0 4px 8px !important; }
  .sidebar nav{
    order:3; width:100%; flex-direction:row; overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin:4px -12px 0; width:calc(100% + 24px); padding:0 4px;
  }
  .sidebar nav button{
    flex-shrink:0; white-space:nowrap; padding:12px 14px; min-height:44px;
    border-left:none; border-bottom:2px solid transparent;
  }
  .sidebar nav button.active{ border-bottom-color:var(--copper); }

  .topbar{ padding:14px 20px; padding-right:calc(20px + env(safe-area-inset-right)); padding-left:calc(20px + env(safe-area-inset-left)); }
  .content{ padding:20px; }
  .content{ padding-right:calc(20px + env(safe-area-inset-right)); padding-bottom:calc(24px + env(safe-area-inset-bottom)); padding-left:calc(20px + env(safe-area-inset-left)); }

  #mapa-garagens{ height:60vh; min-height:300px; }
}

/* ---------- Toque (celular, tablet): alvos >= 44px e fonte >= 16px nos campos ---------- */
@media (max-width: 800px), (pointer: coarse){
  .btn, .btn-sm{ min-height:44px; padding-top:10px; padding-bottom:10px; line-height:24px; }
  .btn-sm{ padding-left:14px; padding-right:14px; }
  a.btn{ text-align:center; }
  .btn-icone-somente{ min-width:44px; line-height:0; }
  .field input, .field select, .field textarea, .select-sm, textarea.codigo, .form-grade textarea{ font-size:16px; }
  .field input, .field select{ min-height:44px; }
  .select-sm{ min-height:44px; padding:8px 10px; }
  #label-incluir-ocultas input{ width:20px; height:20px; margin:0 6px 0 0; }
  #label-incluir-ocultas{ min-height:44px; }
  .link-secondary{ display:inline-block; padding:12px 0; }
  details > summary{ padding:12px 0; }
  .canal{ padding:12px 14px; }
}

/* ---------- Celular ---------- */
@media (max-width: 600px){
  body{ font-size:15px; }
  .login-card{ padding:28px 20px; }
  .topbar h1{ font-size:1.08rem; }
  .content{ padding-left:12px; padding-right:12px; }
  .content{ padding-right:calc(12px + env(safe-area-inset-right)); padding-left:calc(12px + env(safe-area-inset-left)); }
  .card{ padding:16px; margin-bottom:14px; }

  /* Formulario em linha vira coluna: cada campo na largura toda */
  form.inline .field{ flex:1 1 100%; min-width:0 !important; margin-right:0; }
  form.inline > .btn{ flex:1 1 auto; }

  .cfg-grid{ grid-template-columns:1fr; }
  .form-grade{ grid-template-columns:1fr; }
  .canais-lista{ grid-template-columns:1fr; }
  .cfg-acoes > span[style]{ display:none; } /* espacador flex:1 so atrapalha quando quebra linha */

  .ficha-linha{ font-size:0.85rem; }
  .faixa-falta-rede{ padding:12px 14px; }
  .faixa-falta-rede .btn{ width:100%; margin-top:8px; }

  .barra-diagrama{ padding:10px 14px 4px; }
  .barra-diagrama-acoes{ width:100%; }
  .barra-diagrama-acoes .btn{ margin-bottom:6px; }

  /* Diagrama unifilar: nao encolhe ate ficar ilegivel - o JS
     (dimensionarDiagramaCelular em dashboard.js) define largura/altura do SVG
     e a caixa rola na horizontal so dentro dela. */
  .diagrama-box{ display:block; height:auto; max-height:none; min-height:0; padding:8px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
  .diagrama-box svg{ width:100%; height:260px; }
  .diagrama-box:fullscreen{ display:flex; overflow:hidden; padding:12px; }
  .diagrama-box:-webkit-full-screen{ display:flex; overflow:hidden; padding:12px; }
  #btn-fechar-tela-cheia{ top:8px; right:8px; }

  th, td{ padding:9px 6px; }
  .noc-grid{ grid-template-columns:1fr; gap:12px; }
  .noc-card{ padding:16px; }
}

/* Coluna de acoes com varios botoes: quebra em vez de alargar a tabela
   (desktop grande mantem tudo numa linha) */
@media (max-width: 1100px){
  td.actions{ white-space:normal; min-width:130px; }
  td.actions .btn{ margin:2px 4px 2px 0; }
}

/* ---------- Desktop grande / telao NOC ---------- */
@media (min-width: 1600px){
  .noc-grid{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px; }
}
@media (min-width: 2200px){
  body{ font-size:16px; }
  .noc-grid{ grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); }
}

/* checkbox com texto ao lado (ex: autorizacao de divulgacao em Dados da garagem) */
.campo-check{ display:flex; align-items:flex-start; gap:10px; flex-basis:100%; margin:4px 0 6px; font-size:0.88rem; color:var(--text-muted); cursor:pointer; line-height:1.45; }
.campo-check input{ width:18px; height:18px; min-height:0; margin:1px 0 0; flex-shrink:0; accent-color:var(--copper, #C9793E); }
.campo-check b{ color:var(--text); }

/* painel NOC: segmento/empresa embaixo do nome e filtros */
.noc-card-head{ flex-wrap:wrap; }
.noc-card-seg{ flex-basis:100%; font-size:0.8rem; color:var(--text-muted); margin-top:3px; }
.filtros-noc{ display:flex; flex-wrap:wrap; align-items:flex-end; margin:0 0 14px; }
.filtros-noc .field{ margin:0 12px 8px 0; min-width:200px; }
.filtros-noc .sub{ margin:0 0 16px; }

/* botao "Atualizar mapa do site" (Empresas cliente) */
.site-mapa{ display:flex; flex-wrap:wrap; align-items:center; margin-top:16px; }
.site-mapa .btn{ margin:0 12px 6px 0; }
.site-mapa .sub{ margin-bottom:6px; }

/* campo de senha com botao mostrar/ocultar (js/mostrar-senha.js) */
.campo-senha{ position:relative; }
.campo-senha input{ width:100%; padding-right:48px; box-sizing:border-box; }
.btn-mostrar-senha{ position:absolute; right:3px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:4px; color:var(--text-muted); cursor:pointer; padding:0; min-height:0; }
.btn-mostrar-senha:hover{ color:var(--text); }
.btn-mostrar-senha:focus-visible{ outline:2px solid var(--copper-bright); outline-offset:0; }
.btn-mostrar-senha[aria-pressed="true"]{ color:var(--copper-bright); }