/* KiipitADS — sala de controle: densidade alta, cor só como sinal. */

:root,
:root[data-tema="escuro"] {
  --fundo: #0e1014;
  --superficie: #161920;
  --superficie-alta: #1d212a;
  --borda: #262b36;
  --borda-forte: #333a48;
  --texto: #e7eaf0;
  --texto-medio: #a8b0c0;
  --apagado: #737d90;
  --acento: #5b9dff;
  --alerta: #ff6b6b;
  --alerta-fundo: #2a1517;
  --aviso: #f0a832;
  --aviso-fundo: #2a2114;
  --ok: #3ecf8e;
  --ok-fundo: #12241c;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.5);
}

:root[data-tema="claro"] {
  --fundo: #f4f5f7;
  --superficie: #ffffff;
  --superficie-alta: #f8f9fb;
  --borda: #e2e5ea;
  --borda-forte: #cfd4dd;
  --texto: #14171d;
  --texto-medio: #4a5263;
  --apagado: #737d90;
  --acento: #1f63d6;
  --alerta: #c62f32;
  --alerta-fundo: #fdf0f0;
  --aviso: #9a6206;
  --aviso-fundo: #fdf6e7;
  --ok: #10794f;
  --ok-fundo: #eef8f2;
  --sombra: 0 1px 2px rgba(16, 20, 30, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* números em monoespaçada: as colunas alinham e o olho compara sem esforço */
.num, .kpi-valor, .var, td.num, .id { font-family: "IBM Plex Mono", ui-monospace, monospace; }

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- cabeçalho ---------- */
header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda);
}
.marca {
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto);
}
.marca::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px;
  border-radius: 50%; background: var(--ok); vertical-align: middle;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent);
}
header nav { display: flex; gap: 18px; margin-left: auto; align-items: center; }
header nav a { color: var(--texto-medio); font-size: 0.9rem; }
header nav a:hover { color: var(--texto); text-decoration: none; }
#tema {
  background: none; border: 1px solid var(--borda-forte); color: var(--texto-medio);
  border-radius: 6px; padding: 4px 9px; font-size: 0.85rem; cursor: pointer;
}

main { max-width: 1100px; margin: 0 auto; padding: 20px; }

h1 { font-size: 1.35rem; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; margin: 20px 0 10px; }
h3 { font-size: 0.9rem; margin: 14px 0 6px; color: var(--texto-medio);
     text-transform: uppercase; letter-spacing: 0.07em; }

.meta { color: var(--apagado); font-size: 0.85rem; }
.voltar { margin: 0 0 12px; font-size: 0.9rem; }

/* ---------- painel: barra de resumo ---------- */
.barra {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--borda); border: 1px solid var(--borda);
  border-radius: 10px; overflow: hidden; margin-bottom: 14px;
}
.barra > div { background: var(--superficie); padding: 12px 14px; }
.barra .rotulo { display: block; font-size: 0.7rem; text-transform: uppercase;
                 letter-spacing: 0.08em; color: var(--apagado); margin-bottom: 4px; }
/* modificadores próprios: 'aviso' e 'alerta' já nomeiam caixas e pílulas */
.barra .grande { font-family: "IBM Plex Mono", monospace; font-size: 1.3rem; font-weight: 600; }
.barra .grande.sinal-alerta { color: var(--alerta); }
.barra .grande.sinal-aviso { color: var(--aviso); }

.acoes-topo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }

/* ---------- busca ---------- */
.busca { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.busca input {
  margin-top: 0; max-width: 340px; background: var(--superficie);
  font-size: 0.9rem; padding: 8px 12px;
}
.busca input::placeholder { color: var(--apagado); }

/* ---------- filtros ---------- */
.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filtros a {
  padding: 5px 12px; border-radius: 999px; font-size: 0.85rem;
  border: 1px solid var(--borda-forte); color: var(--texto-medio); background: var(--superficie);
}
.filtros a:hover { border-color: var(--acento); text-decoration: none; }
.filtros a.ativo { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.filtros .contagem { font-family: "IBM Plex Mono", monospace; opacity: 0.65; margin-left: 5px; }
.filtros a { transition: background 120ms ease, color 120ms ease, border-color 120ms ease; }
.linha[hidden] { display: none; }

/* plataforma no cabeçalho: hoje Google Ads, amanhã Meta Ads */
.plataforma { position: relative; }
.plataforma summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  font-family: "IBM Plex Mono", monospace; font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--texto-medio);
  border: 1px solid var(--borda-forte); border-radius: 999px; padding: 4px 10px;
}
.plataforma summary::-webkit-details-marker { display: none; }
.plataforma summary::after { content: "▾"; font-size: 0.7rem; }
.plataforma[open] summary { color: var(--texto); border-color: var(--acento); }
.plataforma .menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 190px;
  background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); padding: 6px; font-size: 0.85rem;
}
.plataforma .menu div { padding: 7px 10px; border-radius: 6px; color: var(--texto-medio); }
.plataforma .menu div.atual { background: var(--superficie-alta); color: var(--texto); font-weight: 600; }
.plataforma .menu div.futura { opacity: 0.55; }
.plataforma .menu .nota { font-size: 0.72rem; color: var(--apagado); padding: 4px 10px 2px; }

/* ---------- lista de contas ---------- */
.contas { border: 1px solid var(--borda); border-radius: 10px; overflow: hidden;
          background: var(--superficie); box-shadow: var(--sombra); }
.linha {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 14px minmax(180px, 1.6fr) repeat(4, minmax(90px, 1fr)) 90px;
  padding: 11px 14px; border-top: 1px solid var(--borda);
}
.linha:first-child { border-top: 0; }
.linha:hover { background: var(--superficie-alta); }
.linha.cabecalho {
  background: var(--superficie-alta); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--apagado); padding: 8px 14px;
}
.linha.cabecalho:hover { background: var(--superficie-alta); }

.sinal { width: 8px; height: 8px; border-radius: 50%; background: var(--apagado); }
.p3 .sinal { background: var(--alerta); box-shadow: 0 0 0 3px var(--alerta-fundo); }
.p2 .sinal { background: var(--aviso); box-shadow: 0 0 0 3px var(--aviso-fundo); }
.p1 .sinal { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-fundo); }

.conta-nome { min-width: 0; }
.conta-nome a { color: var(--texto); font-weight: 600; display: block;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta-nome .id { font-size: 0.72rem; color: var(--apagado); }

.celula { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.celula .rotulo-mob { display: none; font-size: 0.65rem; color: var(--apagado);
                      text-transform: uppercase; letter-spacing: 0.06em; }
.kpi-valor { font-size: 0.92rem; font-weight: 500; }
.var { font-size: 0.72rem; color: var(--apagado); }
.var.sobe { color: var(--ok); }
.var.desce { color: var(--alerta); }
.var.sobe.invertido { color: var(--alerta); }
.var.desce.invertido { color: var(--ok); }

.marcadores { display: flex; gap: 6px; justify-content: flex-end; }
.pilula {
  font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.pilula.alerta { background: var(--alerta-fundo); color: var(--alerta); border-color: var(--alerta); }
.pilula.pendente { background: var(--aviso-fundo); color: var(--aviso); border-color: var(--aviso); }
.pilula.erro { background: var(--alerta-fundo); color: var(--alerta); }
.pilula.neutra { background: var(--superficie-alta); color: var(--texto-medio); border-color: var(--borda-forte); }

.alertas-linha { grid-column: 2 / -1; font-size: 0.8rem; color: var(--texto-medio);
                 margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.alertas-linha span::before { content: "▸ "; color: var(--alerta); }

/* ---------- cartões e KPIs ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
          padding: 16px; margin-bottom: 14px; box-shadow: var(--sombra); }
.tijolos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
           gap: 1px; background: var(--borda); border: 1px solid var(--borda);
           border-radius: 10px; overflow: hidden; margin: 12px 0 18px; }
.tijolos > div { background: var(--superficie); padding: 14px; }
.tijolos .rotulo { display: block; font-size: 0.68rem; text-transform: uppercase;
                   letter-spacing: 0.08em; color: var(--apagado); margin-bottom: 5px; }
.tijolos .kpi-valor { font-size: 1.45rem; font-weight: 600; }

.aviso { background: var(--aviso-fundo); border: 1px solid var(--aviso);
         border-radius: 8px; padding: 10px 14px; color: var(--texto); font-size: 0.9rem; }
.erro { color: var(--alerta); }
.sucesso { color: var(--ok); }
.lista-alertas { margin: 8px 0; padding-left: 18px; color: var(--texto-medio); }
.lista-alertas li::marker { color: var(--alerta); }

/* ---------- tabelas de itens ---------- */
table.itens { width: 100%; border-collapse: collapse; background: var(--superficie);
              border: 1px solid var(--borda); border-radius: 10px; overflow: hidden;
              margin-bottom: 16px; }
table.itens th { background: var(--superficie-alta); font-size: 0.68rem; text-transform: uppercase;
                 letter-spacing: 0.08em; color: var(--apagado); font-weight: 600; }
table.itens th, table.itens td { border-top: 1px solid var(--borda); padding: 10px 12px;
                                 text-align: left; vertical-align: top; font-size: 0.88rem; }
table.itens tbody tr:hover { background: var(--superficie-alta); }
tr.status-aplicado td { opacity: 0.5; }
tr.status-rejeitado td { opacity: 0.45; text-decoration: line-through; }
tr.status-erro { background: var(--alerta-fundo); }
.duvidosos { border-color: var(--aviso); }
.tag { font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; letter-spacing: 0.04em;
       background: var(--superficie-alta); border: 1px solid var(--borda-forte);
       color: var(--texto-medio); border-radius: 4px; padding: 1px 6px; margin-left: 5px; }
.situacao { white-space: nowrap; font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; }
.aviso-inline { color: var(--aviso); font-size: 0.78rem; }

/* ---------- barra de ação fixa ---------- */
.acoes {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 12px 14px; margin-top: 16px;
  background: color-mix(in srgb, var(--superficie) 94%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--borda); border-radius: 10px;
}
.acoes .espaco { margin-left: auto; }

button {
  background: var(--acento); color: #fff; border: 0; border-radius: 7px;
  padding: 9px 15px; font: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer;
}
button:hover { filter: brightness(1.1); }
button.secundario { background: transparent; border: 1px solid var(--borda-forte); color: var(--texto-medio); }
button.perigo { background: var(--alerta); color: #fff; }
button[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------- formulários ---------- */
.formulario label, .login label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 0.9rem; }
.ajuda { display: block; font-weight: 400; font-size: 0.8rem; color: var(--apagado); margin-top: 3px; }
input, select, textarea {
  width: 100%; padding: 9px 10px; margin-top: 5px; font: inherit; font-size: 0.9rem;
  border: 1px solid var(--borda-forte); border-radius: 7px;
  background: var(--fundo); color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
.colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

.tela-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login { width: min(370px, 92vw); }
.login .marca { display: block; text-align: center; margin-bottom: 18px; font-size: 0.95rem; }

/* ---------- celular ---------- */
@media (max-width: 760px) {
  main { padding: 14px; }
  .linha { grid-template-columns: 12px 1fr 1fr; row-gap: 8px; }
  .linha.cabecalho { display: none; }
  .conta-nome { grid-column: 2 / -1; }
  .celula .rotulo-mob { display: block; }
  .marcadores { grid-column: 2 / -1; justify-content: flex-start; }
  .barra { grid-template-columns: repeat(2, 1fr); }
  table.itens th:nth-child(4), table.itens td:nth-child(4) { display: none; }
}