/* ==========================================================================
   assets/painel.css - folha unica do Caderno de Bordo.

   SEM framework, SEM CDN, SEM webfont externa. Nao e economia: a politica de
   CSP do painel e style-src 'self' e script-src 'self', entao folha de fora
   seria BLOQUEADA pelo navegador em silencio - a tela so pareceria "sem
   estilo". Fonte do sistema resolve e ainda carrega instantaneo.

   Tema: escuro por padrao, claro quando o sistema pede. As duas paletas sao
   definidas por variavel no :root, e o bloco claro so troca os valores.
   ========================================================================== */

:root {
  --fundo:      #0e141b;
  --sup:        #18212c;
  --sup2:       #141c25;
  --sup3:       #212c39;
  --borda:      #2b3846;
  --borda2:     #3b4b5d;
  --tinta:      #e7eef5;
  --tinta2:     #a2b3c6;
  --tinta3:     #77879b;
  --acento:     #5aa9ff;
  --v: #2ecc71;  --v-txt: #4ade80;  --v-fundo: #10261a;
  --a: #f39c12;  --a-txt: #fbbf24;  --a-fundo: #2b2010;
  --r: #e74c3c;  --r-txt: #fb7d70;  --r-fundo: #2e1614;
  --c: #5c6a79;  --c-txt: #8b9aab;  --c-fundo: #1b232d;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --fundo: #eceff4; --sup: #ffffff; --sup2: #f4f7fa; --sup3: #e4eaf1;
    --borda: #ccd6e2; --borda2: #aebccd;
    --tinta: #141d27; --tinta2: #4e5d70; --tinta3: #7b8a9c;
    --acento: #0b62c4;
    --v-txt: #127a41; --v-fundo: #e6f7ee;
    --a-txt: #96590a; --a-fundo: #fdf3e2;
    --r-txt: #b02a1c; --r-fundo: #fdecea;
    --c: #bdc3c7;     --c-txt: #6d7b8b; --c-fundo: #eef1f4;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- topo ---------- */
.topo {
  background: var(--sup);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 10;
}
.topo-in {
  max-width: 1400px; margin: 0 auto;
  padding: 10px 20px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.topo .marca { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.topo .endereco-topo { font-family: var(--mono); font-size: 11px; color: var(--tinta3); }
.topo .voltar { font-size: 12.5px; }
.topo .sair { margin-left: auto; font-size: 12.5px; color: var(--tinta3); }
.topo .sair:hover { color: var(--tinta); }

/* ---------- quadro ---------- */
.quadro, .verso { max-width: 1400px; margin: 0 auto; padding: 18px 20px 50px; }

.resumo {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline;
  background: var(--sup); border: 1px solid var(--borda); border-radius: 3px;
  padding: 11px 14px; margin-bottom: 22px;
}
.resumo .item { font-size: 12px; color: var(--tinta2); }
.resumo .item b {
  font-size: 18px; font-weight: 700; margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.resumo .item.v b { color: var(--v-txt); }
.resumo .item.a b { color: var(--a-txt); }
.resumo .item.r b { color: var(--r-txt); }
.resumo .item.c b { color: var(--c-txt); }
.resumo .nota {
  margin-left: auto; font-size: 11.5px; color: var(--tinta3); font-style: italic;
}

.secao { margin-bottom: 26px; }
.secao > h2 {
  font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--tinta3); margin: 0 0 10px;
  display: flex; align-items: center; gap: 10px;
}
.secao > h2::after { content: ""; flex: 1; height: 1px; background: var(--borda); }

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
  align-items: start;
}

/* ---------- ficha ---------- */
.ficha {
  position: relative;
  margin-left: 4px;
  background: var(--sup);
  border: 1px solid var(--borda);
  border-left: none;
  border-radius: 0 3px 3px 0;
  padding: 12px 14px 10px;
  display: flex; flex-direction: column; gap: 8px;
}
/* A barra da esquerda e o semaforo, e nada mais. UMA escala de cor por card:
   duas escalas no mesmo cartao e legitimo e ilegivel. */
.ficha::before {
  content: ""; position: absolute; left: -4px; top: -1px; bottom: -1px;
  width: 4px; border-radius: 1px 0 0 1px; background: var(--c);
}
.ficha.e-v::before { background: var(--v); }
.ficha.e-a::before { background: var(--a); }
.ficha.e-r::before { background: var(--r); }
.ficha.e-r { border-color: var(--r); }

.ficha h3 { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.ficha h3 a { color: var(--tinta); }
.ficha h3 a:hover { color: var(--acento); text-decoration: none; }
.ficha.velho h3 { border-bottom: 1px dashed var(--a); padding-bottom: 3px; }

.ficha .endereco {
  margin: 0; font-family: var(--mono); font-size: 10.5px; color: var(--tinta3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ficha .frase { margin: 0; font-size: 12.5px; color: var(--tinta2); }
.ficha .sem-medicao {
  margin: 0; font-family: var(--mono); font-size: 10.5px; color: var(--tinta3);
}

.acao {
  margin: 0; font-size: 12.5px; color: var(--tinta);
  background: var(--sup2); border-left: 2px solid var(--borda2);
  padding: 7px 9px; border-radius: 0 2px 2px 0;
  display: flex; gap: 7px; align-items: baseline;
}
.acao .seta { color: var(--acento); font-weight: 700; flex: none; }
.acao.pronto { color: var(--tinta3); font-style: italic; }

.ficha .rodape {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px solid var(--borda);
}
.selo {
  font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px; background: var(--sup3); color: var(--tinta3);
}
.selo.pend { background: var(--a-fundo); color: var(--a-txt); }
.selo.velho { background: var(--a-fundo); color: var(--a-txt); }
.ficha .ler { margin-left: auto; font-size: 11px; color: var(--tinta3); }

/* ---------- verso ---------- */
.cabecalho-verso {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--borda);
}
.cabecalho-verso h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.cabecalho-verso .endereco {
  margin: 4px 0 0; font-family: var(--mono); font-size: 11.5px; color: var(--tinta3);
}
.estado {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px; flex: none;
  background: var(--c-fundo); color: var(--c-txt);
}
.estado.e-v { background: var(--v-fundo); color: var(--v-txt); }
.estado.e-a { background: var(--a-fundo); color: var(--a-txt); }
.estado.e-r { background: var(--r-fundo); color: var(--r-txt); }

.frase-verso {
  font-size: 15px; color: var(--tinta2); max-width: 62ch;
  margin: 16px 0 0; line-height: 1.6;
}

.bloco { padding: 18px 0; border-bottom: 1px solid var(--borda); }
.bloco:last-of-type { border-bottom: none; }
.bloco > h2 {
  font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--tinta3); margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.bloco > h2 .letra {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0;
  background: var(--sup3); color: var(--tinta3); padding: 1px 5px; border-radius: 2px;
}
.bloco p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; color: var(--tinta2); max-width: 66ch; }
.bloco p:last-child { margin-bottom: 0; }
.nada { color: var(--tinta3); font-style: italic; }

pre.literal {
  margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.7;
  color: var(--tinta2); background: var(--sup2);
  border: 1px solid var(--borda); border-radius: 3px; padding: 12px 13px;
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}

/* Exemplos clicaveis do bloco "Como acessar". A url e o proprio texto do link,
   de proposito: o bloco e "literal e copiavel", e um rotulo escondendo o
   endereco tiraria justamente a parte que se copia. Rotulo a esquerda, url a
   direita, nota embaixo da url; no celular vira uma coluna so. */
ul.exemplos { list-style: none; margin: 12px 0 0; padding: 0; }
ul.exemplos li {
  display: grid; grid-template-columns: minmax(9em, 15em) 1fr;
  column-gap: 12px; row-gap: 2px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--borda);
  font-size: 12.5px; line-height: 1.55;
}
ul.exemplos li:last-child { border-bottom: none; }
ul.exemplos .rotulo { grid-column: 1; color: var(--tinta); font-weight: 600; }
ul.exemplos a.url {
  grid-column: 2; font-family: var(--mono); font-size: 11.5px; word-break: break-all;
  text-decoration: underline dotted; text-decoration-color: var(--borda2); text-underline-offset: 2px;
}
ul.exemplos a.url:hover { text-decoration: underline solid; text-decoration-color: var(--acento); }
ul.exemplos .nota { grid-column: 2; color: var(--tinta2); font-size: 12px; }
/* Sem rotulo, o link e o primeiro filho: ele e a nota ocupam as duas colunas em
   vez de nascer 15em a direita com um buraco na frente. */
ul.exemplos li > a.url:first-child,
ul.exemplos li > a.url:first-child + .nota { grid-column: 1 / -1; }
/* .rodape-bloco perde para .bloco p (especificidade), entao o margin-top dele nao
   vale; o ultimo li nao tem borda e o rodape colaria na ultima nota. */
ul.exemplos + .rodape-bloco { margin-top: 10px; }

.armadilhas {
  background: var(--a-fundo);
  border: 1px solid var(--a);
  border-radius: 3px; padding: 12px 14px;
}
.armadilhas ul { margin: 0; padding-left: 18px; }
.armadilhas li { font-size: 13px; line-height: 1.6; color: var(--tinta); margin-bottom: 8px; }
.armadilhas li:last-child { margin-bottom: 0; }

ul.pendencias { list-style: none; margin: 0; padding: 0; }
ul.pendencias li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; line-height: 1.55; color: var(--tinta2);
  padding: 8px 0; border-bottom: 1px solid var(--borda);
}
ul.pendencias li:last-child { border-bottom: none; }
ul.pendencias .marca { color: var(--tinta3); flex: none; }
ul.pendencias .texto { flex: 1; }
ul.pendencias .quando { font-family: var(--mono); font-size: 10.5px; color: var(--tinta3); flex: none; }
ul.pendencias li.feita .texto { text-decoration: line-through; color: var(--tinta3); }
.rodape-bloco { font-size: 11.5px; color: var(--tinta3); font-style: italic; margin-top: 10px; }

.ponteiros { display: flex; flex-wrap: wrap; gap: 6px; }
.ponteiros span {
  font-family: var(--mono); font-size: 11px; color: var(--tinta2);
  background: var(--sup2); border: 1px solid var(--borda);
  border-radius: 2px; padding: 3px 7px;
}

.pe-verso {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--borda);
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--tinta3);
}
.pe-verso .rev { font-family: var(--mono); }
.pe-verso .editar { margin-left: auto; }

/* ---------- coleta ---------- */
.coleta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.coleta .quando { font-family: var(--mono); font-size: 11.5px; color: var(--tinta3); }
.coleta button {
  border: 1px solid var(--borda2); background: var(--sup); color: var(--tinta2);
  border-radius: 2px; padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer;
}
.coleta button:hover { background: var(--sup3); color: var(--tinta); }
/* ---------- barra de ferramentas (inc/ferramentas.php) ---------- */
.ferramentas {
  display: grid; gap: 10px; margin: 0 0 18px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.ferramenta {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  padding: 10px 13px; border-radius: 6px;
  background: var(--sup); border: 1px solid var(--borda); color: var(--tinta);
}
.ferramenta:hover { border-color: var(--acento); background: var(--sup3); text-decoration: none; }
.ferramenta svg { flex: none; width: 22px; height: 22px; color: var(--acento); }
.ferramenta .txt { min-width: 0; display: flex; flex-direction: column; }
.ferramenta .t { font-weight: 600; font-size: 13px; }
.ferramenta .t .ext { color: var(--tinta3); font-weight: 400; }
.ferramenta .s { font-size: 11.5px; line-height: 1.35; color: var(--tinta3); }
.ferramenta .ponto { flex: none; margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.ferramenta .ponto.e-v { background: var(--v); }
.ferramenta .ponto.e-a { background: var(--a); }
.ferramenta .ponto.e-r { background: var(--r); }
.secao { scroll-margin-top: 56px; }

/* relatorio cru do agente de VPS no verso do card */
.relatorio-agente { margin-top: 14px; }
.relatorio-agente h3 { font-size: 12.5px; font-weight: 600; margin: 0 0 6px; color: var(--tinta2); }
.relatorio-agente dl {
  display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 0;
  font-family: var(--mono); font-size: 11.5px;
}
.relatorio-agente dt { color: var(--tinta3); }
.relatorio-agente dd { margin: 0; overflow-wrap: anywhere; }

.atalhos { margin: -4px 0 14px; font-size: 12.5px; }
.atalhos a { color: var(--tinta2); }
.atalhos a:hover { color: var(--acento); }
.sinal-linha { font-family: var(--mono); font-size: 11.5px; color: var(--tinta3); margin: 0 0 10px; }
.sinal-linha code { font-size: 11px; }
.acoes form { display: inline-block; margin: 0 6px 4px 0; }
.acoes button {
  border: 1px solid var(--borda2); background: var(--sup); color: var(--tinta2);
  border-radius: 2px; padding: 3px 9px; font: inherit; font-size: 11.5px; cursor: pointer;
}
.acoes button:hover { background: var(--sup3); color: var(--tinta); }
.acoes .cego { display: block; font-size: 10.5px; color: var(--tinta3); }
.recado {
  background: var(--sup3); border: 1px solid var(--borda2); color: var(--tinta2);
  border-radius: 3px; padding: 9px 12px; margin: 0 0 14px; font-size: 12.5px;
}

/* ---------- numeros medidos na ficha ---------- */
.medidas { display: flex; gap: 14px; flex-wrap: wrap; }
.medidas .medida { min-width: 0; }
.medidas .v {
  display: block; font-weight: 700; font-size: 17px; line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.medidas .s {
  display: block; font-family: var(--mono); font-size: 10px; color: var(--tinta3);
  margin-top: 1px; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.medidas .r {
  display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta3); margin-top: 3px;
}
.medidas .ok   .v { color: var(--v-txt); }
.medidas .ruim .v { color: var(--r-txt); }
/* Leitura fora da validade NAO tem cara de numero. E o ponto inteiro da regra:
   dado velho desenhado como dado novo e como um painel comeca a mentir. */
.medidas .cego .v { color: var(--c-txt); font-weight: 500; font-size: 14px; font-style: italic; }

/* ---------- tabela de sinais no verso ---------- */
table.sinais { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.sinais th {
  text-align: left; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta3); font-weight: 600; padding: 0 10px 6px 0;
  border-bottom: 1px solid var(--borda);
}
table.sinais td {
  padding: 8px 10px 8px 0; border-bottom: 1px solid var(--borda);
  vertical-align: top; color: var(--tinta2);
}
table.sinais tr:last-child td { border-bottom: none; }
table.sinais td.val { font-weight: 600; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.sinais td.quando { font-family: var(--mono); font-size: 10.5px; color: var(--tinta3); white-space: nowrap; }
table.sinais td.org { font-family: var(--mono); font-size: 10.5px; color: var(--tinta3); word-break: break-all; }
table.sinais .ruim { color: var(--r-txt); }
table.sinais .cego { color: var(--c-txt); }
table.sinais tr.detalhe td {
  font-size: 11.5px; color: var(--a-txt); background: var(--a-fundo);
  padding: 6px 10px; border-bottom: 1px solid var(--borda);
}

.vazio { color: var(--tinta3); font-style: italic; }
.alerta {
  background: var(--r-fundo); border: 1px solid var(--r); color: var(--r-txt);
  border-radius: 3px; padding: 11px 14px; margin: 0 0 16px; font-size: 13px;
}
.rodape-pagina {
  max-width: 1400px; margin: 0 auto; padding: 0 20px 40px;
  font-size: 11.5px; color: var(--tinta3);
}

/* ---------- login ---------- */
.tela-login {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
}
.caixa-login {
  width: 100%; max-width: 330px;
  background: var(--sup); border: 1px solid var(--borda);
  border-radius: 4px; padding: 26px 24px;
}
.caixa-login h1 { margin: 0; font-size: 19px; font-weight: 700; }
.caixa-login .sub {
  margin: 4px 0 20px; font-family: var(--mono); font-size: 11px; color: var(--tinta3);
}
.caixa-login label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta3); margin-bottom: 12px;
}
.caixa-login input {
  display: block; width: 100%; margin-top: 5px;
  background: var(--sup2); border: 1px solid var(--borda2); border-radius: 3px;
  color: var(--tinta); font: inherit; font-size: 14px; padding: 8px 10px;
  text-transform: none; letter-spacing: normal;
}
.caixa-login input:focus { border-color: var(--acento); outline: none; }
.caixa-login button {
  width: 100%; margin-top: 6px; padding: 9px;
  background: var(--acento); border: none; border-radius: 3px;
  color: #fff; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
}
.caixa-login button:hover { filter: brightness(1.08); }
.caixa-login button:disabled { background: var(--c); cursor: not-allowed; }
.caixa-login .erro {
  background: var(--r-fundo); border: 1px solid var(--r); color: var(--r-txt);
  border-radius: 3px; padding: 9px 11px; font-size: 12.5px; margin: 0 0 16px;
}

/* ---------- usuarios e login unico (27/10/2026) ---------- */
.topo .quem { margin-left: auto; font-size: 12.5px; color: var(--tinta2); }
.topo .quem + .sair { margin-left: 14px; }
.caixa-login .recado { margin-bottom: 16px; }
.ola { margin: 6px 0 2px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.ola-sub { margin: 0 0 16px; font-size: 13px; color: var(--tinta2); }

.selo.ok   { background: var(--v-fundo); color: var(--v-txt); }
.selo.off  { background: var(--c-fundo); color: var(--c-txt); }
.selo.perm { background: var(--sup3); color: var(--tinta2); font-family: var(--mono); font-size: 10.5px; margin: 0 4px 3px 0; }
table.tabela-usuarios tr.em-edicao td { background: var(--sup3); }

.form-usuario, .form-excluir {
  background: var(--sup); border: 1px solid var(--borda); border-radius: 4px;
  padding: 18px 20px; max-width: 860px;
}
.form-usuario .campos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px;
  margin-bottom: 14px;
}
.form-usuario label, .form-excluir label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta3);
}
.form-usuario input[type=text], .form-usuario input[type=password] {
  display: block; width: 100%; margin-top: 5px;
  background: var(--sup2); border: 1px solid var(--borda2); border-radius: 3px;
  color: var(--tinta); font: inherit; font-size: 14px; padding: 7px 9px;
  text-transform: none; letter-spacing: normal;
}
.form-usuario input:disabled { color: var(--tinta3); }
.form-usuario input:focus { border-color: var(--acento); outline: none; }
label.check {
  display: flex; gap: 8px; align-items: baseline;
  text-transform: none; letter-spacing: normal; font-size: 13px; color: var(--tinta); margin: 4px 0;
}
label.check input { flex: none; }
.form-usuario .campos label.check { grid-column: 1 / -1; }
.permissoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 16px; }
.permissoes fieldset { border: 1px solid var(--borda); border-radius: 3px; padding: 8px 12px 10px; margin: 0; }
.permissoes legend { font-size: 11.5px; font-weight: 600; color: var(--tinta2); padding: 0 4px; }
.permissoes .dica { color: var(--tinta3); font-size: 11.5px; }
.botao {
  border: none; border-radius: 3px; padding: 8px 16px; cursor: pointer;
  background: var(--acento); color: #fff; font: inherit; font-weight: 600; font-size: 13.5px;
}
.botao:hover { filter: brightness(1.08); }
.botao.perigo { background: var(--r); }
.form-excluir { margin-top: 12px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.form-excluir label.check { margin: 0; }
.senha-sorteada code { font-size: 15px; color: var(--tinta); user-select: all; }
.nota-arquivo { font-size: 11.5px; color: var(--tinta3); margin-top: 22px; }

@media (max-width: 640px) {
  .quadro, .verso, .rodape-pagina { padding-left: 14px; padding-right: 14px; }
  .topo-in { padding-left: 14px; padding-right: 14px; }
  .grade { grid-template-columns: 1fr; }
  .resumo .nota { margin-left: 0; flex-basis: 100%; }
  .pe-verso .editar { margin-left: 0; }
  ul.exemplos li { grid-template-columns: 1fr; }
  ul.exemplos .rotulo, ul.exemplos a.url, ul.exemplos .nota { grid-column: 1; }
}