/* KERYX SKOPOS — visual v1 (sóbrio, tema vigia: azul-noite + âmbar) */
:root {
  --fundo: #0f1722;
  --painel: #16212f;
  --borda: #24344a;
  --texto: #dbe4f0;
  --texto2: #8fa1b8;
  --acento: #f0a84c;
  --ok: #35c26a;
  --problema: #e05252;
  --semdados: #7a8699;
}
/* ===== TEMA CLARO (pedido Wilson 23/07: "a molecada prefere claro" kkk) =====
   Mesmas variáveis, outros valores — escolha gravada no navegador (localStorage). */
html.tema-claro {
  --fundo: #eef1f6;
  --painel: #ffffff;
  --borda: #d4dbe6;
  --texto: #1e2936;
  --texto2: #5a6a80;
  --acento: #c07a14;      /* âmbar mais escuro p/ contraste no claro */
  --ok: #1e9e50;
  --problema: #cc3b3b;
  --semdados: #93a0b3;
}
html.tema-claro .erro  { background: #fdeaea; color: #8a2323; }
html.tema-claro .aviso { background: #fdf3e0; color: #7a5410; }
html.tema-claro .semaforo.problema { background: #fbecec; }

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.topo {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 24px;
  background: var(--painel);
  border-bottom: 1px solid var(--borda);
}
.marca { font-size: 1.15rem; letter-spacing: 1px; }
.marca strong { color: var(--acento); }
.topo nav { display: flex; gap: 18px; flex: 1; }
.topo nav a { color: var(--texto2); text-decoration: none; padding: 6px 4px; }
.topo nav a:hover { color: var(--texto); }
.sessao { display: flex; gap: 14px; align-items: center; color: var(--texto2); }
.btn-tema { background: none; border: 1px solid var(--borda); border-radius: 6px;
            cursor: pointer; font-size: .95rem; padding: 4px 8px; }
.btn-tema:hover { border-color: var(--acento); }

/* Ações físicas no equipamento (AGIR) — visual de RESPEITO, não de link qualquer */
.acoes-fisicas { margin-top: 14px; padding: 12px; border: 1px dashed var(--acento);
                 border-radius: 8px; display: flex; flex-direction: column; gap: 8px; }
.acoes-titulo { font-size: .8rem; color: var(--acento); font-weight: 600; }
.btn-fisico { width: 100%; padding: 9px; border-radius: 6px; cursor: pointer;
              font-weight: 600; border: 1px solid var(--borda);
              background: var(--fundo); color: var(--texto); }
.btn-fisico.ligar:hover     { border-color: var(--ok); color: var(--ok); }
.btn-fisico.desligar:hover  { border-color: var(--problema); color: var(--problema); }
.btn-fisico.reiniciar:hover { border-color: var(--acento); color: var(--acento); }
.sessao a { color: var(--texto2); text-decoration: none; }
.sessao a:hover { color: var(--texto); }
.sessao .sair { color: var(--problema); }
.conteudo { flex: 1; padding: 24px; max-width: 1280px; width: 100%; margin: 0 auto; }
.conteudo.cheia { display: flex; align-items: center; justify-content: center; }
.rodape { text-align: center; color: var(--texto2); font-size: .8rem; padding: 12px; }

/* Login */
.card-login {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 10px;
  padding: 36px; width: 360px;
}
.card-login h1 { font-size: 1.3rem; margin-bottom: 4px; }
.card-login .sub { color: var(--texto2); font-size: .85rem; margin-bottom: 24px; }
.card-login label { display: block; font-size: .85rem; color: var(--texto2); margin: 12px 0 4px; }
.card-login input {
  width: 100%; padding: 10px; border-radius: 6px; border: 1px solid var(--borda);
  background: var(--fundo); color: var(--texto);
}
.card-login button[type=submit] {
  width: 100%; margin-top: 20px; padding: 11px; border: 0; border-radius: 6px;
  background: var(--acento); color: #1a1206; font-weight: 600; cursor: pointer;
}

/* Textarea (27/07 — achado do Wilson na /ImportarCameras): não havia NENHUMA
   regra, então a caixa nascia com o tamanho padrão do HTML (20 colunas) e
   ignorava a largura do container. Regra global: qualquer textarea do sistema
   ocupa a largura disponível e usa fonte monoespaçada (colar lista/CSV alinha). */
textarea {
  width: 100%; box-sizing: border-box; padding: 10px; border-radius: 6px;
  border: 1px solid var(--borda); background: var(--fundo); color: var(--texto);
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: .82rem; line-height: 1.45; resize: vertical;   /* arrastar p/ ver mais linhas */
}
textarea:focus { outline: 1px solid var(--acento); }

/* Zóinho de senha */
.campo-senha { position: relative; }
.campo-senha input { padding-right: 42px; }
.campo-senha .zoinho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; font-size: 1.05rem;
  padding: 4px 6px; line-height: 1; opacity: .75;
}
.campo-senha .zoinho:hover { opacity: 1; }
.card-login button:hover { filter: brightness(1.08); }
.erro { background: #3a1d1d; border: 1px solid var(--problema); color: #f2b8b8;
        padding: 10px; border-radius: 6px; margin-top: 16px; font-size: .85rem; }
.aviso { background: #3a2f1d; border: 1px solid var(--acento); color: #f2dcb8;
         padding: 10px; border-radius: 6px; margin-top: 16px; font-size: .85rem; }

/* Formulários dentro de cards (tela do painel) */
.card-praca form label { display: block; font-size: .8rem; color: var(--texto2); margin: 10px 0 4px; }
.card-praca form input {
  width: 100%; padding: 9px; border-radius: 6px; border: 1px solid var(--borda);
  background: var(--fundo); color: var(--texto);
}
.btn-add {
  margin-top: 14px; padding: 9px 14px; border: 0; border-radius: 6px;
  background: var(--acento); color: #1a1206; font-weight: 600; cursor: pointer; width: 100%;
}
.btn-remover {
  padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: .78rem;
  background: transparent; border: 1px solid var(--problema); color: var(--problema);
}

/* Tabelas — respiro padrão (QA Wilson: cabeçalhos "CâmeraDisjuntorManut." grudados) */
table th, table td { padding: 6px 16px 6px 6px; }
table th { white-space: nowrap; }

/* KPIs do topo do dashboard */
.kpis { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.kpi {
  flex: 1; min-width: 170px; background: var(--painel);
  border: 1px solid var(--borda); border-radius: 10px; padding: 14px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.kpi-num { font-size: 1.5rem; font-weight: 700; }
.kpi-num small { font-size: .85rem; color: var(--texto2); font-weight: 400; }
.kpi-rotulo { color: var(--texto2); font-size: .8rem; }
.kpi.ok { border-color: var(--ok); }
.kpi.problema { border-color: var(--problema); }

/* Dashboard */
.dash-cab { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.dash-cab h1 { font-size: 1.4rem; }
.dash-cab .sub { color: var(--texto2); font-size: .85rem; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card-praca {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 10px;
  padding: 16px; cursor: pointer; transition: border-color .15s;
}
.card-praca:hover { border-color: var(--acento); }
.card-praca h3 { font-size: 1rem; margin-bottom: 2px; }
.card-praca .resp { color: var(--texto2); font-size: .8rem; margin-bottom: 12px; }
.semaforos { display: flex; gap: 10px; }
.semaforo {
  flex: 1; text-align: center; border-radius: 8px; padding: 8px 4px;
  background: var(--fundo); border: 1px solid var(--borda); font-size: .75rem;
}
.semaforo .luz { font-size: 1.05rem; display: block; margin-bottom: 2px; }
.semaforo.ok       { border-color: var(--ok); }
.semaforo.problema { border-color: var(--problema); background: #2a1616; }
.semaforo.semdados { opacity: .55; }
.badge-exemplo {
  display: inline-block; background: #3a2f1d; border: 1px solid var(--acento);
  color: var(--acento); font-size: .7rem; padding: 2px 8px; border-radius: 10px;
}