/* ─────────────────────────────────────────────────────────────────────────────
   Painel da Ali — superfície de operação.
   O uso é um operador conferindo estado e agindo, não alguém sendo convencido:
   densidade, alinhamento e vocabulário constante valem mais que expressão. A
   cor só aparece onde carrega significado — ação primária, seleção e estado.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Tema claro (padrão) ───────────────────────────────────────────────────
     O claro não é o escuro invertido: acento e cores de estado que funcionam
     sobre fundo escuro reprovam em contraste sobre branco. Cada tom aqui foi
     calculado para ≥4.5:1 no MAIS CLARO dos fundos do tema — o pior caso. */
  --fundo:       #f5f7f9;
  --painel:      #ffffff;
  --painel-alto: #eceff4;
  /* A barra é um plano recuado, não elevado: no escuro ela é mais escura que
     o conteúdo, e no claro precisa ser mais cinza — como near-white, ficava
     igual aos painéis e a navegação deixava de se separar do trabalho. */
  --barra-fundo: #eaeef3;

  --linha:       #e4e8ed;
  --linha-forte: #ccd3db;

  --tinta:       #11161c;   /* 18.2:1 */
  --tinta-media: #49525f;   /* 7.0:1  */
  --tinta-fraca: #5e6775;   /* 4.91:1 no pior fundo — #636d7b dava 4.50, no fio */

  /* O acento marca o que VOCÊ aciona; o que a máquina relata fica neutro ou
     semântico. Era teal, vizinho do verde de "ok": no dashboard, o botão e os
     pontos de status liam como a mesma família e a distinção sumia. Azul é o
     que sobra depois de verde (vivo), âmbar (atenção) e vermelho (falha) — e
     é justamente por não competir que ele serve. */
  --acento:      #1d4ed8;   /* 6.3:1 sobre o fundo mais claro */
  --acento-alto: #1739a8;
  --acento-fundo:#e4ebfd;
  --sobre-acento:#ffffff;

  --ok:      #17784b;  --ok-fundo:     #e3f2e9;
  --atencao: #8a5d09;  --atencao-fundo:#faf0da;
  --falha:   #b32741;  --falha-fundo:  #fce8ec;

  /* Sombra é mais legível sobre fundo claro; no escuro ela quase some e a
     borda é que separa. Por isso o valor muda junto com o tema. */
  --sombra-flutuante: 0 10px 30px -12px rgb(15 25 40 / 0.28);
  --sombra-gaveta:    0 0 60px -12px rgb(15 25 40 / 0.35);
  --tinta-sobre-cor:  rgb(255 255 255 / 0.55);

  /* IBM Plex foi desenhada para interface técnica e tem diacríticos de verdade
     para português — "ção", "ê", "õ" saem com o mesmo cuidado do resto.
     A pilha de fallback é a antiga: se a fonte não carregar, o painel
     continua legível, só perde a personalidade.

     REGRA DE USO, e ela carrega informação: se é MEDIDA, é mono; se é
     LINGUAGEM, é sans. O operador passa a distinguir número de rótulo antes
     de ler. */
  --fonte: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala de tipo fixa, razão ~1.15: numa interface de produto há muitos
     níveis de texto, e contraste exagerado vira ruído. */
  --t-micro: 0.6875rem;   /* 11px — rótulos de coluna */
  --t-mini:  0.75rem;     /* 12px — legendas, notas */
  --t-peq:   0.8125rem;   /* 13px — tabelas, controles */
  --t-base:  0.875rem;    /* 14px — corpo da interface */
  --t-med:   1rem;        /* 16px — título de seção */
  --t-gr:    1.125rem;    /* 18px — título de tela */
  --t-dado:  1.375rem;    /* 22px — números */
  --t-xg:    1.75rem;     /* 28px — número de destaque */
  --t-heroi: 2.5rem;      /* 40px — o pulso, e só ele */

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px;

  --r-peq: 6px;
  --r-med: 10px;
  --r-gr:  14px;

  --barra-w: 228px;
  --transicao: 160ms cubic-bezier(0.32, 0.72, 0, 1);

  color-scheme: light;
}

/* ── Tema escuro ─────────────────────────────────────────────────────────────
   Três estados, não dois: escolha explícita carimba data-theme; o padrão
   "sistema" não carimba nada, e só prefers-color-scheme separa claro de
   escuro. Por isso o bloco aparece duas vezes — um para cada caminho. Os dois
   precisam permanecer idênticos. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo:       #0b0e12;
    --painel:      #12161c;
    --painel-alto: #171c23;
    --barra-fundo: #0e1318;

    --linha:       #1f262f;
    --linha-forte: #2b343f;

    --tinta:       #e8ecf1;
    --tinta-media: #a3aeba;
    --tinta-fraca: #7e8a98;   /* 4.9:1 no fundo mais claro do escuro */

    --acento:      #7aa2ff;   /* claro o bastante para o fundo escuro: 7.4:1 */
    --acento-alto: #9dbcff;
    --acento-fundo:#16243f;
    --sobre-acento:#0a1220;

    --ok:      #4caf7d;  --ok-fundo:     #10241a;
    --atencao: #cf9b3a;  --atencao-fundo:#241c0f;
    --falha:   #d9536a;  --falha-fundo:  #260f15;

    --sombra-flutuante: 0 10px 30px -10px rgb(0 0 0 / 0.75);
    --sombra-gaveta:    0 0 60px -10px rgb(0 0 0 / 0.85);
    --tinta-sobre-cor:  rgb(0 0 0 / 0.3);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fundo:       #0b0e12;
  --painel:      #12161c;
  --painel-alto: #171c23;
  --barra-fundo: #0e1318;

  --linha:       #1f262f;
  --linha-forte: #2b343f;

  --tinta:       #e8ecf1;
  --tinta-media: #a3aeba;
  --tinta-fraca: #7e8a98;

  --acento:      #7aa2ff;
  --acento-alto: #9dbcff;
  --acento-fundo:#16243f;
  --sobre-acento:#0a1220;

  --ok:      #4caf7d;  --ok-fundo:     #10241a;
  --atencao: #cf9b3a;  --atencao-fundo:#241c0f;
  --falha:   #d9536a;  --falha-fundo:  #260f15;

  --sombra-flutuante: 0 10px 30px -10px rgb(0 0 0 / 0.75);
  --sombra-gaveta:    0 0 60px -10px rgb(0 0 0 / 0.85);
  --tinta-sobre-cor:  rgb(0 0 0 / 0.3);

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* O atributo `hidden` vem do navegador como [hidden]{display:none}, regra de
   user-agent que perde para qualquer classe do autor. Sem este reset, alternar
   telas por JS falha em silêncio. */
[hidden] { display: none !important; }

body {
  margin: 0;
  transition: background-color var(--transicao), color var(--transicao);
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Superfícies do navegador ────────────────────────────────────────────────
   Seleção, cursor, rolagem e anel de foco vêm com padrão de fábrica que não
   pertence a nenhum sistema. Vesti-los é o sinal mais barato de que a tela foi
   construída, e o mais frequentemente esquecido. */
::selection { background: var(--acento-fundo); color: var(--acento-alto); }
:where(input, textarea) { caret-color: var(--acento-alto); }

* { scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--linha-forte);
  border-radius: 99px;
  border: 3px solid var(--fundo);
}
::-webkit-scrollbar-thumb:hover { background: var(--tinta-fraca); }

:focus-visible {
  /* Sem border-radius aqui: a propriedade muda a forma do PRÓPRIO elemento,
     não do anel — numa célula de tabela isso deformava a célula ao focar.
     O anel já segue o raio que o elemento tiver. */
  outline: 2px solid var(--acento-alto);
  outline-offset: 2px;
}

/* Na navegação o anel com folga de 2px flutuava destacado do item e lia como
   defeito. Por dentro, ele abraça a forma do item — continua óbvio para quem
   navega por teclado, sem parecer quebrado. */
.item:focus-visible { outline-offset: -2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Um traço só, uma métrica só, para todo ícone do painel. */
.icone {
  width: 18px; height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.icone-gr { width: 22px; height: 22px; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: var(--t-gr); }
h2 { font-size: var(--t-med); margin-block: var(--e6) var(--e3); text-wrap: balance; }
h3 { font-size: var(--t-peq); color: var(--tinta-media); font-weight: 600; margin-bottom: var(--e3); }
p { margin: 0 0 var(--e2); }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--painel-alto);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  color: var(--tinta-media);
}

/* ── Faixa de aviso ──────────────────────────────────────────────────────── */
.faixa-aviso {
  display: flex; align-items: center; justify-content: center; gap: var(--e2);
  background: var(--atencao-fundo);
  color: var(--atencao);
  padding: var(--e2) var(--e4);
  font-size: var(--t-mini);
  border-bottom: 1px solid color-mix(in srgb, var(--atencao) 35%, transparent);
}
.faixa-aviso code { background: var(--tinta-sobre-cor); color: inherit; }

/* ── Estrutura ───────────────────────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

.barra {
  width: var(--barra-w);
  flex: none;
  background: var(--barra-fundo);
  border-right: 1px solid var(--linha);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.barra-marca {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e4) var(--e4) var(--e3);
}
/* A marca é tipográfica: um quadrado arredondado com a inicial dentro é o
   container-de-ícone que todo gerador produz, e não diz nada sobre o produto.
   O ponto ao lado é funcional — indica que o painel está conectado. */
.marca-pulso {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-fundo);
  flex: none;
}
.marca-nome {
  font-weight: 650; font-size: var(--t-med);
  letter-spacing: -0.02em;
}
.marca-tipo {
  font-size: var(--t-micro); color: var(--tinta-fraca);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-left: auto;
}

#menu { display: flex; flex-direction: column; padding: var(--e2); overflow-y: auto; flex: 1; }
.menu-grupo {
  font-size: var(--t-micro); color: var(--tinta-fraca);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin: var(--e4) var(--e2) var(--e1);
  font-weight: 600;
}
.menu-grupo:first-child { margin-top: var(--e1); }

.item {
  display: flex; align-items: center; gap: var(--e3);
  padding: 7px var(--e2) 7px 10px;
  color: var(--tinta-media);
  text-decoration: none;
  border-radius: var(--r-peq);
  font-size: var(--t-peq);
  position: relative;
  transition: background var(--transicao), color var(--transicao);
}
.item:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); color: var(--tinta); }
.item .icone { color: var(--tinta-fraca); transition: color var(--transicao); }
.item:hover .icone { color: var(--tinta-media); }

/* A seção atual se marca por fundo e peso, não por barra colorida na borda:
   traço de cor grosso ao lado do item é decoração e some no primeiro tema. */
.item.ativo { background: var(--acento-fundo); color: var(--acento-alto); font-weight: 600; }
.item.ativo .icone { color: var(--acento-alto); }

.barra-rodape { padding: var(--e3) var(--e4); border-top: 1px solid var(--linha); }
.rodape-txt { font-size: var(--t-micro); color: var(--tinta-fraca); font-family: var(--mono); }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e5);
  border-bottom: 1px solid var(--linha);
  background: color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 5;
}
.topo h1 { flex: 1; }
.topo-acoes { display: flex; align-items: center; gap: var(--e2); }

.pulso {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tinta-fraca);
  transition: background var(--transicao), box-shadow var(--transicao);
}
.pulso.ativo { background: var(--acento-alto); box-shadow: 0 0 0 3px var(--acento-fundo); }

main { padding: var(--e2) var(--e5) var(--e7); max-width: 1180px; width: 100%; }
main:focus { outline: none; }

/* ── Controles ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--e2);
  background: var(--painel-alto);
  border: 1px solid var(--linha-forte);
  color: var(--tinta);
  padding: 7px 13px;
  border-radius: var(--r-peq);
  font: inherit; font-size: var(--t-peq); font-weight: 500;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--linha); border-color: var(--tinta-fraca); }
.btn:active:not(:disabled) { background: var(--linha-forte); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600; }
.btn-primario:hover:not(:disabled) { background: var(--acento-alto); border-color: var(--acento-alto); }
.btn-primario:active:not(:disabled) { background: var(--acento); }

.btn-sutil { background: transparent; border-color: var(--linha-forte); color: var(--tinta-media); }
.btn-sutil:hover:not(:disabled) { color: var(--tinta); background: var(--painel); }

.btn-perigo { background: transparent; border-color: color-mix(in srgb, var(--falha) 35%, var(--linha-forte)); color: var(--falha); }
.btn-perigo:hover:not(:disabled) { background: var(--falha-fundo); border-color: var(--falha); }

.btn-mini { padding: 3px 9px; font-size: var(--t-mini); }

.btn-icone {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  background: transparent; border: 1px solid transparent;
  color: var(--tinta-media);
  border-radius: var(--r-peq); cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.btn-icone:hover { background: var(--painel-alto); color: var(--tinta); }
.btn-icone.girando .icone { animation: girar 700ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Declarado DEPOIS de .btn-icone de propósito: as duas regras têm a mesma
   especificidade, então quem vence é a última. Antes, `.btn-icone{display:grid}`
   anulava este `none` e o botão de menu aparecia no desktop. */
.so-mobile { display: none; }

.linha-acoes {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--e3); flex-wrap: wrap; margin-block: var(--e6) var(--e3);
}
.linha-acoes h2 { margin: 0; }
.acoes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }

/* Ações numa coluna estreita: empilhadas.
   Em fila, quatro botões de larguras diferentes quebravam em duas linhas
   desalinhadas — o que lê como "quebrado". Igualar larguras resolvia o
   alinhamento mas deixava um órfão na última linha em telas médias. Empilhado
   é previsível em QUALQUER largura, e a ordem passa a carregar a hierarquia:
   a ação que se usa no topo, a destrutiva no fim, separada. */
.acoes-pilha { display: grid; gap: var(--e2); }
.acoes-pilha .btn { width: 100%; justify-content: center; }
.acoes-pilha .btn-destrutiva {
  margin-top: var(--e2);
  border-top: 1px solid var(--linha);
  padding-top: calc(var(--e3) + 1px);
  border-radius: 0 0 var(--r-peq) var(--r-peq);
}

/* ── Painéis ─────────────────────────────────────────────────────────────── */
/* Elevação declarada uma vez: borda OU sombra, nunca as duas. Borda 1px sob
   sombra larga é o cartão fantasma. */
/* `.painel` é o bloco das outras onze telas. Alinhado ao mesmo raio, sombra e
   respiro do `.cartao`, as doze telas passam a parecer o mesmo produto sem
   reescrever o JS de cada uma. */
.painel {
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--r-cartao);
  box-shadow: var(--sombra-cartao);
  padding: var(--e5);
}
.painel + .painel { margin-top: var(--e4); }
.painel-justo { padding: 0; overflow: hidden; }
.duas-colunas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--e3);
  /* Sem isto o cartão mais curto estica até a altura do maior e mostra um
     vazio no meio — o do QR é alto por natureza. */
  align-items: start;
}

/* ── Estado dos serviços ─────────────────────────────────────────────────── */
/* Lista, não grade de cartões idênticos: o operador varre uma coluna de nomes
   alinhados muito mais rápido que seis caixas do mesmo tamanho. */
.servicos { display: flex; flex-direction: column; }
.servico {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center; gap: var(--e3);
  padding: 11px var(--e4);
  border-bottom: 1px solid var(--linha);
}
.servico:last-child { border-bottom: none; }
.servico-luz { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-fraca); }
.servico.ok .servico-luz { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-fundo); }
.servico.falha .servico-luz { background: var(--falha); box-shadow: 0 0 0 3px var(--falha-fundo); }
.servico-nome { font-weight: 500; }
.servico-vazio { color: var(--tinta-fraca); }
.servico-detalhe {
  font-family: var(--mono); font-size: var(--t-mini);
  color: var(--tinta-fraca); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44ch;
}
.servico.falha .servico-detalhe { color: var(--falha); }

/* ── Tira de números ─────────────────────────────────────────────────────── */
/* Números em tira contínua, não seis cartões-herói: em software de operação a
   comparação entre valores importa mais que o destaque de cada um. */
.tira {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  /* Divisórias por borda no item, não por gap sobre fundo colorido: com o
     fundo na cor da linha, a sobra da última fileira quebrada virava um bloco
     cinza vazio. Assim o espaço que sobra fica da cor do painel e some. */
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--r-gr);
  overflow: hidden;
}
.tira-item {
  padding: var(--e3) var(--e4);
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
/* Rótulos de uma ou duas linhas alinham o número na mesma base. */
.tira-rotulo { min-height: 2.1em; display: flex; align-items: flex-start; }
.tira-rotulo {
  font-size: var(--t-mini); color: var(--tinta-fraca);
  font-weight: 500; line-height: 1.35;
}
.tira-valor {
  font-size: var(--t-dado); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  margin-top: 3px; line-height: 1.15;
}
.tira-valor.texto { font-size: var(--t-base); font-weight: 500; letter-spacing: 0; }
.tira-valor.atencao { color: var(--atencao); }
.tira-valor.falha { color: var(--falha); }
.tira-nota { font-size: var(--t-mini); color: var(--tinta-fraca); margin-top: 2px; }

/* ── Formulários ─────────────────────────────────────────────────────────── */
.form { display: grid; gap: var(--e4); }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo label { font-size: var(--t-mini); color: var(--tinta-media); font-weight: 500; }
.campo .ajuda { font-size: var(--t-mini); color: var(--tinta-fraca); line-height: 1.45; }
.form-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e3); }

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="time"], input[type="file"], select, textarea {
  padding: 8px 11px;
  background: var(--fundo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-peq);
  color: var(--tinta);
  font: inherit; font-size: var(--t-peq);
  width: 100%;
  transition: border-color var(--transicao), background var(--transicao);
}
input::placeholder, textarea::placeholder { color: var(--tinta-fraca); }
input:hover:not(:disabled), textarea:hover:not(:disabled), select:hover:not(:disabled) { border-color: var(--tinta-fraca); }
input:focus, textarea:focus, select:focus { border-color: var(--acento); }
input:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
textarea { min-height: 88px; resize: vertical; line-height: 1.55; }
textarea.mono { font-family: var(--mono); font-size: var(--t-mini); line-height: 1.6; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-fraca) 50%),
                    linear-gradient(135deg, var(--tinta-fraca) 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--e6);
}

/* ── Tabelas ─────────────────────────────────────────────────────────────── */
.rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--r-gr); background: var(--painel); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-peq); }
.tabela th {
  text-align: left; font-size: var(--t-mini);
  color: var(--tinta-fraca); font-weight: 600;
  padding: 9px var(--e4); border-bottom: 1px solid var(--linha);
  white-space: nowrap; background: var(--barra-fundo);
}
.tabela td {
  padding: 10px var(--e4); border-bottom: 1px solid var(--linha);
  font-variant-numeric: tabular-nums;
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tr.clicavel { cursor: pointer; transition: background var(--transicao); }
.tabela tr.clicavel:hover td { background: var(--painel-alto); }
.tabela .num { text-align: right; }
.tabela .mono { font-family: var(--mono); font-size: var(--t-mini); color: var(--tinta-media); }
.tabela .cortar { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Estados ─────────────────────────────────────────────────────────────── */
.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 99px;
  font-size: var(--t-mini); font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.selo .luz { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.selo.ok      { background: var(--ok-fundo);      color: var(--ok);      border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.selo.atencao { background: var(--atencao-fundo); color: var(--atencao); border-color: color-mix(in srgb, var(--atencao) 28%, transparent); }
.selo.falha   { background: var(--falha-fundo);   color: var(--falha);   border-color: color-mix(in srgb, var(--falha) 28%, transparent); }
.selo.neutro  { background: var(--painel-alto);   color: var(--tinta-media); border-color: var(--linha-forte); }

.pares { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--e2) var(--e5); align-items: baseline; }
.pares dt { color: var(--tinta-fraca); font-size: var(--t-mini); }
.pares dd { margin: 0; font-family: var(--mono); font-size: var(--t-mini); word-break: break-all; color: var(--tinta-media); }
.pares dd.ausente { color: var(--atencao); font-family: var(--fonte); }

.vazio { color: var(--tinta-fraca); font-size: var(--t-peq); margin: 0; }
.aviso { font-size: var(--t-peq); color: var(--tinta-media); margin-top: var(--e3); }
.aviso.ok { color: var(--ok); }
.aviso.ruim { color: var(--falha); }

/* Nota: fundo tingido carrega o estado; barra colorida na borda seria só
   decoração competindo com o próprio texto. */
.nota {
  display: flex; gap: var(--e3); align-items: flex-start;
  background: var(--painel-alto);
  border: 1px solid var(--linha-forte);
  padding: var(--e3) var(--e4);
  border-radius: var(--r-med);
  font-size: var(--t-peq); color: var(--tinta-media);
  margin-bottom: var(--e4);
}
.nota .icone { color: var(--tinta-fraca); margin-top: 1px; }
.nota.atencao {
  background: var(--atencao-fundo);
  border-color: color-mix(in srgb, var(--atencao) 30%, transparent);
  color: color-mix(in srgb, var(--atencao) 85%, var(--tinta));
}
.nota.atencao .icone { color: var(--atencao); }

/* ── Estado vazio ────────────────────────────────────────────────────────── */
/* Ensina o próximo passo em vez de dizer "nada aqui". */
.sem-nada { text-align: center; padding: var(--e7) var(--e5); }
.sem-nada .icone { width: 30px; height: 30px; color: var(--tinta-fraca); margin-bottom: var(--e3); }
.sem-nada h3 { color: var(--tinta); font-size: var(--t-base); margin-bottom: 5px; }
.sem-nada p { color: var(--tinta-fraca); font-size: var(--t-peq); max-width: 46ch; margin-inline: auto; }

/* ── Esqueleto de carregamento ───────────────────────────────────────────── */
/* Esqueleto no lugar da palavra "Carregando": preserva o layout e evita o
   salto que um texto curto provoca ao ser trocado pelo conteúdo real. */
.osso {
  background: linear-gradient(90deg, var(--painel) 25%, var(--painel-alto) 37%, var(--painel) 63%);
  background-size: 400% 100%;
  animation: brilho 1.4s ease-in-out infinite;
  border-radius: var(--r-peq);
}
@keyframes brilho { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
.osso-linha { height: 12px; margin-bottom: var(--e2); }
.osso-bloco { height: 72px; border-radius: var(--r-gr); }
.esqueleto { display: grid; gap: var(--e3); }
.esqueleto-tira { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--e3); }

/* ── QR Code ─────────────────────────────────────────────────────────────── */
.area-qr { display: grid; place-items: center; min-height: 262px; text-align: center; padding: var(--e3); }
.area-qr img {
  width: 224px; height: 224px; max-width: 100%;
  /* Branco fixo de propósito: o leitor de QR do WhatsApp precisa do contraste
     do código sobre fundo claro, em qualquer tema. */
  background: #fff; padding: 12px; border-radius: var(--r-med);
  image-rendering: pixelated;
}
.codigo-pareamento {
  font-family: var(--mono); font-size: 1.4rem; letter-spacing: 0.18em;
  background: var(--painel-alto); border: 1px dashed var(--linha-forte);
  border-radius: var(--r-med); padding: var(--e3) var(--e4);
}

/* ── Resultados ──────────────────────────────────────────────────────────── */
.resultado { margin-top: var(--e3); border: 1px solid var(--linha); border-radius: var(--r-gr); overflow: hidden; }
.resultado-topo {
  display: flex; align-items: center; gap: var(--e2);
  padding: 10px var(--e4); font-weight: 600; font-size: var(--t-peq);
}
.resultado-topo.ok { background: var(--ok-fundo); color: var(--ok); }
.resultado-topo.falha { background: var(--falha-fundo); color: var(--falha); }
.resultado-corpo { padding: var(--e4); background: var(--painel); }

.bloco-json {
  font-family: var(--mono); font-size: var(--t-mini); line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
  background: var(--fundo); border: 1px solid var(--linha);
  border-radius: var(--r-med); padding: var(--e3);
  margin: 0; max-height: 300px; overflow: auto; color: var(--tinta-media);
}

.linha-check {
  display: grid; grid-template-columns: 18px 1fr auto;
  gap: var(--e3); align-items: baseline;
  padding: 10px var(--e4); border-top: 1px solid var(--linha);
  background: var(--painel); font-size: var(--t-peq);
}
.linha-check .icone { width: 15px; height: 15px; }
.linha-check.ok .icone { color: var(--ok); }
.linha-check.falha .icone { color: var(--falha); }
.linha-check .detalhe { color: var(--tinta-fraca); font-family: var(--mono); font-size: var(--t-mini); display: block; margin-top: 2px; }
.linha-check .ms { color: var(--tinta-fraca); font-size: var(--t-mini); font-variant-numeric: tabular-nums; }

.balao {
  background: var(--acento-fundo);
  border: 1px solid color-mix(in srgb, var(--acento) 32%, transparent);
  border-radius: var(--r-med) var(--r-med) var(--r-med) 4px;
  padding: var(--e3) var(--e4);
  font-size: var(--t-base); white-space: pre-wrap; line-height: 1.55;
  color: var(--tinta);
  margin-bottom: var(--e3);
}

/* ── Avisos flutuantes ───────────────────────────────────────────────────── */
.avisos {
  position: fixed; right: var(--e5); bottom: var(--e5);
  display: grid; gap: var(--e2); z-index: 50;
  max-width: min(380px, calc(100vw - 2 * var(--e5)));
}
.toast {
  display: flex; align-items: center; gap: var(--e2);
  background: var(--painel-alto);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-med);
  padding: 10px var(--e3);
  font-size: var(--t-peq);
  box-shadow: var(--sombra-flutuante);
  animation: entrar 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }
.toast .icone { width: 15px; height: 15px; }
.toast.ok { border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.toast.ok .icone { color: var(--ok); }
.toast.ruim { border-color: color-mix(in srgb, var(--falha) 35%, transparent); }
.toast.ruim .icone { color: var(--falha); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 860px) {
  .so-mobile { display: grid; }
  .barra {
    position: fixed; z-index: 20; left: 0; top: 0;
    transform: translateX(-100%);
    transition: transform var(--transicao);
    box-shadow: var(--sombra-gaveta);
  }
  .barra.aberta { transform: translateX(0); }
  main { padding-inline: var(--e4); }
  .topo { padding-inline: var(--e4); }
  .painel { padding-inline: var(--e4); }
  .pares { grid-template-columns: 1fr; gap: 2px 0; }
  .pares dd { margin-bottom: var(--e2); }
  .servico { grid-template-columns: 8px 1fr; }
  .servico-detalhe { grid-column: 2; text-align: left; max-width: 100%; }
  .avisos { right: var(--e4); left: var(--e4); bottom: var(--e4); max-width: none; }
}

/* ── O pulso ─────────────────────────────────────────────────────────────────
   O herói do painel, e o único lugar onde ele levanta a voz.

   A pergunta que o operador tem ao abrir isto é uma só: está vivo agora? Antes
   ela era respondida por um ponto verde de 8px numa lista de seis linhas, com
   o mesmo peso visual de "desambiguacao · 8 chamadas". Aqui ela ocupa a
   largura da tela, e o traço atrás mostra QUANDO houve conversa — porque "134
   mensagens em 24 h" não distingue um dia cheio de uma madrugada parada. */
.pulso-bloco {
  position: relative;
  overflow: hidden;
  padding: var(--e6) var(--e5) var(--e5);
  border: 1px solid var(--linha);
  border-radius: var(--r-gr);
  background: var(--painel);
  margin-bottom: var(--e5);
}

/* O traço fica atrás do texto, sangrando até as bordas: é fundo, não gráfico —
   ninguém vai ler valor nele, e por isso não tem eixo nem rótulo. */
.pulso-traco {
  position: absolute;
  inset: auto 0 0 0;
  height: 76px;
  opacity: 0.5;
  pointer-events: none;
}
.pulso-traco svg { display: block; width: 100%; height: 100%; }

/* A cor vive no container e a batida herda por currentColor — assim o ponto e
   a palavra nunca saem de sincronia. */
.pulso-topo { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.pulso-topo.vivo { color: var(--ok); }
.pulso-topo.parado { color: var(--falha); }

.pulso-estado {
  font-size: var(--t-heroi);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: inherit;
}

/* A batida pulsa junto do número: movimento mínimo, e só aqui. Quem tiver
   redução de movimento ligada vê o ponto parado — ele já diz o que precisa. */
.pulso-batida {
  width: 10px; height: 10px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: batida 2.4s ease-out infinite;
  flex: none;
  align-self: center;
}
@keyframes batida {
  0%   { box-shadow: 0 0 0 0 rgb(from currentColor r g b / 0.5); }
  70%  { box-shadow: 0 0 0 12px rgb(from currentColor r g b / 0); }
  100% { box-shadow: 0 0 0 0 rgb(from currentColor r g b / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pulso-batida { animation: none; }
}

.pulso-frase {
  margin-top: var(--e3);
  max-width: 62ch;          /* linha de leitura, não largura de tela */
  color: var(--tinta-media);
  line-height: 1.55;
  position: relative;
}
.pulso-frase strong { color: var(--tinta); font-weight: 600; }
.pulso-frase .num { font-family: var(--mono); color: var(--tinta); }

/* ── Fita de serviços ────────────────────────────────────────────────────────
   Seis estados binários não precisam de seis linhas. Em fita, o olho varre a
   linha inteira e só para no que está vermelho. */
.fita-servicos {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  margin-top: var(--e4);
  position: relative;
}
.chip-servico {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--fundo);
  font-size: var(--t-mini);
  color: var(--tinta-media);
  white-space: nowrap;
}
.chip-servico .luz { width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-fraca); flex: none; }
.chip-servico.ok .luz { background: var(--ok); }
.chip-servico.falha { border-color: color-mix(in srgb, var(--falha) 45%, transparent); color: var(--falha); }
.chip-servico.falha .luz { background: var(--falha); }
.chip-servico b { font-weight: 600; color: var(--tinta); }
.chip-servico.falha b { color: var(--falha); }
.chip-servico .det { font-family: var(--mono); font-size: var(--t-micro); opacity: 0.8; }

/* ── Hierarquia entre blocos ─────────────────────────────────────────────────
   Nem toda seção pesa igual. `.secao-menor` recua o que é diagnóstico (como se
   comportou, quanto agrupou) para que o que é operação (o dia, o dinheiro)
   fique à frente. Antes eram quatro tiras idênticas empilhadas e o olho não
   tinha onde pousar. */
.secao-menor .tira { background: transparent; border-style: dashed; }
.secao-menor .tira-valor { font-size: var(--t-base); font-weight: 600; }

h2.titulo-secao {
  display: flex; align-items: baseline; gap: var(--e3);
  font-size: var(--t-peq);
  font-weight: 600;
  color: var(--tinta-media);
  margin-block: var(--e6) var(--e3);
}
h2.titulo-secao::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linha);
}

/* Botão que parece o que é: um link dentro de uma tabela, não uma ação
   primária competindo com "Testar sistema". */
.btn-texto {
  background: none; border: 0; padding: var(--e2) 0;
  color: var(--acento); font: inherit; font-size: var(--t-mini);
  cursor: pointer; text-align: left;
}
.btn-texto:hover { color: var(--acento-alto); text-decoration: underline; }
.tabela tfoot td { border-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA DE COMPONENTES — Habitua-se
   ═══════════════════════════════════════════════════════════════════════════

   O que as referências de SaaS acertam e o painel não tinha: TODO bloco de
   conteúdo usa o mesmo cabeçalho. Um quadradinho de ícone tingido, o título, e
   a ação à direita. Isso não é enfeite — é o que faz doze telas diferentes
   parecerem o mesmo produto, e é a diferença entre "ferramenta interna" e
   "produto".

   Um acento só, e com disciplina: azul royal marca o que VOCÊ aciona. O ciano
   aparece só em dado (traço, barra de progresso), nunca em botão — assim as
   duas cores nunca competem pelo mesmo significado.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ciano:       #0e7490;   /* dado e medida — nunca ação */
  --ciano-fundo: #e0f4f8;
  --r-cartao:    14px;
  --sombra-cartao: 0 1px 2px rgb(15 25 40 / 0.04), 0 8px 24px -16px rgb(15 25 40 / 0.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ciano:       #4dd0e1;
    --ciano-fundo: #0d2b33;
    --sombra-cartao: none;   /* no escuro é a borda que separa, não a sombra */
  }
}
:root[data-theme="dark"] {
  --ciano:       #4dd0e1;
  --ciano-fundo: #0d2b33;
  --sombra-cartao: none;
}

/* ── Cartão ──────────────────────────────────────────────────────────────── */
.cartao {
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--r-cartao);
  box-shadow: var(--sombra-cartao);
  overflow: hidden;
}
/* O espaçamento entre cartões NÃO pode vir de margem no irmão adjacente:
   dentro de uma grade, `+` também casa, e os cards 2, 3 e 4 de uma linha
   ganhavam 16px de margem que o primeiro não tinha — quatro KPIs lado a lado
   saíam em degrau. Quem empilha usa `.pilha`, que espaça por gap. */
.pilha { display: grid; gap: var(--e4); }

.cartao-topo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--linha);
}
.cartao-topo .acoes { margin-left: auto; }

/* O quadradinho de ícone: 30px, cantos macios, fundo tingido pelo papel do
   cartão. É ele que dá o "acabamento" que a interface não tinha. */
.cartao-ico {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--acento-fundo);
  color: var(--acento);
}
.cartao-ico .icone { width: 16px; height: 16px; }
.cartao-ico.dado   { background: var(--ciano-fundo);   color: var(--ciano); }
.cartao-ico.ok     { background: var(--ok-fundo);      color: var(--ok); }
.cartao-ico.aviso  { background: var(--atencao-fundo); color: var(--atencao); }
.cartao-ico.risco  { background: var(--falha-fundo);   color: var(--falha); }

.cartao-titulo { font-size: var(--t-base); font-weight: 600; line-height: 1.2; }
.cartao-sub { display: block; font-size: var(--t-mini); font-weight: 400; color: var(--tinta-fraca); margin-top: 2px; }
.cartao-corpo { padding: var(--e5); }
.cartao-corpo.justo { padding: 0; }

/* Rodapé de ação, como nas referências: leva para a tela que aprofunda. */
.cartao-pe {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e5);
  border-top: 1px solid var(--linha);
  background: color-mix(in srgb, var(--painel-alto) 50%, transparent);
  font-size: var(--t-mini);
}
.cartao-pe a { color: var(--acento); font-weight: 500; }

/* ── KPI ─────────────────────────────────────────────────────────────────── */
.kpi-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e4);
}
.kpi-valor {
  font-size: var(--t-xg);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: var(--e2);
}
.kpi-nota { margin-top: 6px; font-size: var(--t-mini); color: var(--tinta-fraca); }

/* ── Selo de estado ──────────────────────────────────────────────────────────
   Um padrão para todos os estados do produto. Ponto + palavra, sempre. Um
   card inteiro para dizer "Online" é desperdício de tela. */
.estado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: var(--fundo);
  font-size: var(--t-mini);
  font-weight: 500;
  color: var(--tinta-media);
  white-space: nowrap;
}
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.estado.on      { color: var(--ok);      background: var(--ok-fundo);      border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.estado.off     { color: var(--falha);   background: var(--falha-fundo);   border-color: color-mix(in srgb, var(--falha) 25%, transparent); }
.estado.pendente{ color: var(--atencao); background: var(--atencao-fundo); border-color: color-mix(in srgb, var(--atencao) 25%, transparent); }
.estado.neutro  { color: var(--tinta-fraca); }

/* ── Botões: quatro papéis, e só ────────────────────────────────────────────
   Azul em tudo tira o significado do azul. Primário é o que a tela quer que
   você faça; o resto recua. */
.btn-fantasma {
  background: none; border-color: transparent; color: var(--tinta-media);
}
.btn-fantasma:hover:not(:disabled) { background: var(--painel-alto); border-color: transparent; color: var(--tinta); }

.btn-risco { border-color: color-mix(in srgb, var(--falha) 40%, transparent); color: var(--falha); background: none; }
.btn-risco:hover:not(:disabled) { background: var(--falha-fundo); border-color: var(--falha); }

/* ── Cabeçalho de página ───────────────────────────────────────────────────── */
.topo { align-items: flex-start; padding-block: var(--e4); }
.topo-titulos { flex: 1; min-width: 0; }
.topo h1 { flex: none; line-height: 1.2; }
.topo-desc {
  margin-top: 3px;
  font-size: var(--t-mini);
  color: var(--tinta-fraca);
  max-width: 68ch;
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.marca-nome { letter-spacing: -0.02em; }
.item.ativo {
  /* Pílula preenchida, como nas referências: o item ativo não pode depender de
     o olho comparar dois cinzas. */
  background: var(--acento);
  color: var(--sobre-acento);
  box-shadow: 0 6px 16px -8px var(--acento);
}
.item.ativo .icone { color: var(--sobre-acento); }
.item.ativo:hover { background: var(--acento-alto); color: var(--sobre-acento); }

.barra-rodape { display: flex; align-items: center; gap: var(--e2); }
.rodape-estado { margin-left: auto; }

/* Cartões numa mesma linha terminam na mesma altura, e o rodapé encosta no pé.
   Sem isto, quatro KPIs lado a lado ficam com o número em quatro alturas
   diferentes e os links do rodapé em degrau — é o detalhe que denuncia
   interface montada às pressas. */
.kpi-grade .cartao { display: flex; flex-direction: column; }
.kpi-grade .cartao-corpo { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: var(--e4); }
.kpi-grade .cartao-topo { min-height: 62px; }
.kpi-grade .kpi-valor { margin-top: 0; }

/* O item ativo brilha menos: a pílula preenchida já resolve, e o halo em
   volta competia com o conteúdo. */
.item.ativo { box-shadow: 0 4px 12px -8px var(--acento); }