:root {
  --fundo: #f3f6f9;
  --cartao: #ffffff;
  --texto: #1f2d3a;
  --suave: #6b7c8c;
  --borda: #e3e9ef;
  --azul: #1565c0;
  --ciano: #00b4d8;
  --ok: #1e8449;       --ok-bg: #e3f6ea;
  --atencao: #a66300;  --atencao-bg: #fff3dc;
  --critico: #b3261e;  --critico-bg: #fdecea;
  --mudo: #5f6b76;     --mudo-bg: #eceff2;
  --sem: #6a1b9a;      --sem-bg: #f3e8f8;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--fundo); color: var(--texto); font-size: 14px; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; }

.btn { border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); border-radius: 10px; padding: 8px 14px; }
.btn.primario { background: var(--azul); color: #fff; border-color: var(--azul); font-weight: 600; }
.btn.perigo { background: var(--critico); color: #fff; border-color: var(--critico); }
.btn.fantasma { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); }
.btn.largo { width: 100%; padding: 11px; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: linear-gradient(135deg, var(--ciano), var(--azul)); }
.login-card { width: 100%; max-width: 380px; background: var(--cartao); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.2); }
.login-topo { background: linear-gradient(135deg, var(--ciano), var(--azul)); color: #fff; padding: 26px 24px; text-align: center; }
.login-topo .sub { font-size: 12px; opacity: .85; margin-top: 6px; }
.login-corpo { padding: 24px; display: grid; gap: 14px; }
.login-corpo label { display: grid; gap: 6px; font-weight: 600; font-size: 13px; }
.login-corpo input { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; }
.erro { color: var(--critico); background: var(--critico-bg); padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.marca { font-size: 20px; letter-spacing: .2px; }

/* topo */
.topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; color: #fff; background: linear-gradient(90deg, var(--ciano), var(--azul)); position: sticky; top: 0; z-index: 5; }
.topo-dir { display: flex; align-items: center; gap: 10px; }
.atualizado { font-size: 12px; opacity: .9; }
.conteudo { padding: 20px 24px 40px; max-width: 1500px; margin: 0 auto; }

/* resumo */
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 14px 16px; }
.kpi .rot { color: var(--suave); font-size: 12px; }
.kpi .val { font-size: 26px; font-weight: 700; margin-top: 4px; }
.kpi.critico .val { color: var(--critico); } .kpi.atencao .val { color: var(--atencao); }
.kpi.ok .val { color: var(--ok); } .kpi.sem .val { color: var(--sem); }

/* filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.filtros input { flex: 1 1 260px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--borda); background: var(--cartao); border-radius: 999px; padding: 6px 12px; font-size: 12px; color: var(--suave); }
.chip.ativo { background: var(--azul); color: #fff; border-color: var(--azul); }

/* cartões */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-left: 5px solid var(--borda); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.cartao.CRITICO { border-left-color: var(--critico); } .cartao.ATENCAO { border-left-color: var(--atencao); }
.cartao.OK { border-left-color: var(--ok); } .cartao.SEM_COMUNICACAO { border-left-color: var(--sem); }
.cartao.DESATIVADO { opacity: .6; }
.cab { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.nome { font-weight: 700; font-size: 15px; }
.meta { color: var(--suave); font-size: 12px; margin-top: 2px; }
.selo { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.selo.OK { color: var(--ok); background: var(--ok-bg); } .selo.ATENCAO { color: var(--atencao); background: var(--atencao-bg); }
.selo.CRITICO { color: var(--critico); background: var(--critico-bg); } .selo.SEM_COMUNICACAO { color: var(--sem); background: var(--sem-bg); }
.selo.DESATIVADO { color: var(--mudo); background: var(--mudo-bg); }
.filas { display: grid; gap: 6px; }
.fila { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.ponto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; transform: translateY(1px); }
.ponto.on { background: var(--ok); } .ponto.off { background: var(--critico); } .ponto.rec { background: var(--atencao); }
.fila .det { color: var(--suave); font-size: 12px; }
.problemas { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.problemas li { font-size: 12px; padding: 6px 8px; border-radius: 8px; }
.problemas li.critico { background: var(--critico-bg); color: var(--critico); }
.problemas li.atencao { background: var(--atencao-bg); color: var(--atencao); }
.numeros { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--suave); border-top: 1px solid var(--borda); padding-top: 8px; }
.numeros b { color: var(--texto); }
.rodape-cartao { display: flex; justify-content: flex-end; }
.vazio { text-align: center; color: var(--suave); padding: 50px 10px; background: var(--cartao); border: 1px dashed var(--borda); border-radius: 14px; }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(15,25,35,.45); display: grid; place-items: center; padding: 16px; z-index: 20; }
.modal-caixa { background: var(--cartao); width: 100%; max-width: 1000px; max-height: 92vh; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
.modal-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 20px; color: #fff; background: linear-gradient(90deg, var(--ciano), var(--azul)); }
.modal-topo h2 { margin: 0; font-size: 18px; }
.modal-corpo { padding: 18px 20px; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.secao h3 { margin: 0 0 8px; font-size: 14px; }
.info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 18px; font-size: 13px; }
.info div span { color: var(--suave); display: block; font-size: 11px; }
.faixa { display: flex; gap: 1px; height: 26px; border-radius: 6px; overflow: hidden; background: var(--borda); }
.faixa i { flex: 1; min-width: 1px; }
.faixa i.OK { background: #58b97e; } .faixa i.ATENCAO { background: #f0b84a; } .faixa i.CRITICO { background: #e2665d; }
.faixa i.SEM_COMUNICACAO { background: #a77cc4; } .faixa i.semdado { background: var(--borda); }
.legenda { display: flex; justify-content: space-between; color: var(--suave); font-size: 11px; margin-top: 4px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { color: var(--suave); font-weight: 600; background: #f8fafc; position: sticky; top: 0; }
.tabela-rolagem { max-height: 320px; overflow: auto; border: 1px solid var(--borda); border-radius: 10px; }
.nivel-erro { color: var(--critico); font-weight: 600; } .nivel-alerta { color: var(--atencao); font-weight: 600; } .nivel-info { color: var(--ok); }
.form { display: grid; gap: 10px; }
.form label { display: grid; gap: 5px; font-size: 12px; font-weight: 600; }
.form input[type=text], .form textarea { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; }
.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; }

@media (max-width: 640px) {
  .topo { padding: 12px 16px; flex-wrap: wrap; }
  .conteudo { padding: 16px; }
  .grade { grid-template-columns: 1fr; }
}

/* abas, ocorrências e configurações */
.topo-esq { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.abas { display: flex; gap: 4px; }
.aba { background: transparent; border: 0; color: rgba(255,255,255,.82); padding: 7px 12px; border-radius: 9px; font-weight: 600; }
.aba.ativa { background: rgba(255,255,255,.2); color: #fff; }
.badge { background: #ff5a4f; color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; margin-left: 4px; }
.cab-secao { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cab-secao h2 { margin: 0 0 4px; font-size: 18px; }
.filtros-linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filtros-linha select { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao); }
.check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--suave); }
.tabela-rolagem.alta { max-height: calc(100vh - 220px); background: var(--cartao); }
tr.nova td { background: #fffbe6; }
.seta { color: var(--suave); margin: 0 4px; }
.painel-config { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.painel-config > div { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 18px; }
.form small { font-weight: 400; color: var(--suave); }
.form input[type=number] { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; max-width: 160px; }
.uso h3 { margin: 0 0 10px; font-size: 14px; }
.uso .linha { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 13px; }
@media (max-width: 800px) { .painel-config { grid-template-columns: minmax(0, 1fr); } }