:root {
  --fg:#18181b; --fg-fraco:#71717a; --bg:#f4f4f5; --cartao:#fff;
  --linha:#e4e4e7; --acento:#166534; --acento-forte:#14532d; --perigo:#b91c1c;
}
* { box-sizing:border-box; }
/* Precisa vir antes das regras de display: um `display:flex` na mesma classe
   ganha do display:none implícito do atributo hidden. */
[hidden] { display:none !important; }
body { margin:0; font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--fg); background:var(--bg); }
code { font-size:.9em; background:#f4f4f5; padding:.1rem .3rem; border-radius:.25rem; }

/* --- estrutura --- */
header { display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.9rem 1.5rem; background:var(--cartao); border-bottom:1px solid var(--linha); }
.marca { font-weight:600; text-decoration:none; color:var(--fg); }
main { max-width:52rem; margin:0 auto; padding:1.75rem 1.5rem 3rem; }
h1 { font-size:1.2rem; margin:0 0 1.1rem; }
h2 { font-size:1rem; margin:1.75rem 0 .85rem; display:flex; align-items:center; gap:.5rem; }
h1 small, h2 small { font-weight:400; color:var(--fg-fraco); }
.contagem { font-weight:500; font-size:.8rem; color:var(--fg-fraco);
  background:var(--cartao); border:1px solid var(--linha); border-radius:1rem; padding:.05rem .5rem; }
.cartao { background:var(--cartao); border:1px solid var(--linha); border-radius:.625rem;
  padding:1.25rem; margin-bottom:1rem; }
.cartao.estreito { max-width:21rem; margin:3.5rem auto 0; }
.cartao > :last-child { margin-bottom:0; }

/* --- campos --- */
label { display:block; font-size:.85rem; font-weight:500; color:var(--fg); margin-bottom:.35rem; }
input, textarea { display:block; width:100%; padding:.55rem .7rem; font:inherit; color:var(--fg);
  background:var(--cartao); border:1px solid #d4d4d8; border-radius:.375rem; }
input:focus, textarea:focus { outline:none; border-color:var(--acento); box-shadow:0 0 0 3px rgba(22,101,52,.12); }
input:invalid:not(:placeholder-shown) { border-color:var(--perigo); }
textarea { resize:vertical; min-height:7rem; line-height:1.55; }
.dica { margin:0; font-size:.8rem; color:var(--fg-fraco); }
.instrucao { margin:0 0 .9rem; font-size:.88rem; color:#3f3f46; }

.cartao.estreito label { margin-top:.9rem; }
.cartao.estreito button { width:100%; margin-top:1.25rem; }

/* Cadastro: campo e botão na mesma linha, dica ocupando a largura toda abaixo. */
.cadastro { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.55rem .75rem; align-items:end; }
.cadastro .campo { min-width:0; }
.cadastro .dica { grid-column:1 / -1; }

/* Tela de teste: coluna única, campos confortáveis. */
.formulario { max-width:32rem; }
.formulario label { margin-top:1.1rem; }
.formulario > label:first-of-type { margin-top:0; }
.formulario .dica { margin-top:.35rem; }
.acoes { display:flex; align-items:center; gap:1.1rem; margin-top:1.4rem; }

/* --- botões e links --- */
button, .botao {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem 1.1rem; font:inherit; font-weight:500; line-height:1.2;
  color:#fff; background:var(--acento); border:1px solid var(--acento);
  border-radius:.375rem; text-decoration:none; cursor:pointer; white-space:nowrap;
}
button:hover, .botao:hover { background:var(--acento-forte); border-color:var(--acento-forte); }
button:focus-visible, .botao:focus-visible, a:focus-visible { outline:2px solid var(--acento); outline-offset:2px; }

.botao-remover { color:var(--fg-fraco); background:none; border-color:transparent; font-weight:400; padding:.55rem .75rem; }
.botao-remover:hover { color:#fff; background:var(--perigo); border-color:var(--perigo); }

.link { background:none; border:none; color:var(--fg-fraco); padding:0; font-weight:400; text-decoration:underline; }
.link:hover { background:none; color:var(--fg); }
.link-secundario { color:var(--fg-fraco); font-size:.9rem; text-decoration:none; }
.link-secundario:hover { color:var(--fg); text-decoration:underline; }
.voltar { display:inline-block; margin-bottom:1rem; font-size:.9rem; color:var(--fg-fraco); text-decoration:none; }
.voltar:hover { color:var(--fg); }

/* --- lista de números ---
   Um número conectado ocupa UMA linha; só quem falta parear abre espaço para o
   QR. Assim a lista continua legível com muitos itens. */
.lista { list-style:none; margin:0 0 1.75rem; padding:0; background:var(--cartao);
  border:1px solid var(--linha); border-radius:.625rem; overflow:hidden; }
.item + .item { border-top:1px solid var(--linha); }
.item-linha { display:flex; align-items:center; gap:.75rem; padding:.7rem .9rem; }
.item-linha:hover { background:#fafafa; }

.status-ponto { flex:none; width:.5rem; height:.5rem; border-radius:50%; background:#d4d4d8; }
.status-ponto.ok { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.15); }
.status-ponto.off { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.15); }

.identidade { display:flex; flex-direction:column; gap:.05rem; min-width:0; flex:1; }
.identidade strong { font-size:.95rem; line-height:1.3; }
.meta { font-size:.78rem; color:var(--fg-fraco); overflow-wrap:anywhere; line-height:1.35; }
.separador { margin:0 .25rem; }

.item-acoes { display:flex; align-items:center; gap:.4rem; flex:none; }
.item-acoes form { margin:0; }
.pequeno { padding:.32rem .7rem; font-size:.83rem; }

.item-qr { display:flex; align-items:flex-start; gap:1.25rem; flex-wrap:wrap;
  padding:0 .9rem 1rem 1.6rem; }
.item-qr .instrucao { margin:0; padding-top:.15rem; }

/* --- QR --- */
.qr-caixa { width:200px; max-width:100%; flex:none; }
.qr { display:block; width:200px; max-width:100%; height:auto; border:1px solid var(--linha); border-radius:.5rem; background:#fff; }
.qr-espera { display:flex; align-items:center; justify-content:center; width:200px; max-width:100%; height:200px;
  margin:0; border:1px dashed #d4d4d8; border-radius:.5rem; color:var(--fg-fraco); font-size:.85rem; background:#fafafa; }

/* --- mensagens --- */
.erro, .aviso, .sucesso { padding:.8rem 1rem; margin:0 0 1.1rem; border-radius:.375rem;
  font-size:.9rem; overflow-wrap:anywhere; }
.erro { background:#fee2e2; color:#991b1b; border-left:3px solid var(--perigo); }
.aviso { background:#fef9c3; color:#854d0e; border-left:3px solid #ca8a04; }
.sucesso { display:flex; flex-direction:column; gap:.2rem;
  background:#f0fdf4; color:var(--acento-forte); border-left:3px solid var(--acento); }
.sucesso code { background:#dcfce7; }
.vazio { color:var(--fg-fraco); font-size:.9rem; }

/* --- código --- */
pre { margin:0; background:#18181b; color:#fafafa; padding:.9rem 1rem;
  border-radius:.5rem; overflow-x:auto; font-size:.8rem; line-height:1.6; }
pre code { background:none; color:inherit; padding:0; }