/* Orgnizer — build local de validação.
   Sem framework e sem build (04_ARQUITETURA_V1.md §1). Sobriedade deliberada:
   nuvem de tags e categorização por cores são a parte que dá prazer construir
   e não expõe ninguém — L1. Ficam para depois de haver usuário. */


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font: 16px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--tinta); text-decoration-color: var(--linha); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--realce); }
h1 { font-size: 1.7rem; line-height: 1.2; margin: 0 0 .3rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; letter-spacing: -.005em; }
h2.secao { margin-top: 2.2rem; }
p { margin: .4rem 0 .9rem; }
code { font: .85em ui-monospace, "SF Mono", Menlo, monospace; background: var(--lavado); padding: .1em .35em; border-radius: 3px; }

/* ---------------------------------------------------------------- estrutura */
/* As medidas vêm de base.css, que a /folha e o /relatorio também carregam.
   Antes o 900 estava escrito aqui, no rodapé e nos avisos — três cópias do
   mesmo número, e as telas de papel com números próprios que ninguém
   relacionava. Agora é um token; quem quer outra largura redefine o token. */
main { max-width: var(--coluna); margin: 0 auto;
       padding: 1.6rem var(--respiro) 4rem; }
.estreito { max-width: var(--coluna-estreita); margin: 0 auto; }
.centrado { text-align: center; }
.linha-fina { max-width: 60ch; }
.apagado { color: var(--fraco); }
.peq { font-size: .85rem; }
.vazio { color: var(--fraco); padding: 1.4rem 0; }

.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.2rem; border-bottom: 1px solid var(--linha); background: var(--papel);
}
.marca { font-weight: 700; letter-spacing: -.03em; font-size: 1.15rem; text-decoration: none; }
.marca span { color: var(--realce); }
/* `box.` e `.com` em volta da marca. Vêm DEPOIS da regra acima de propósito:
   `.marca span` pega todo span de dentro, inclusive estes, e sem esta linha o
   endereço inteiro sairia em terracota — o realce deixaria de realçar nada.
   Peso e cor menores mantêm a leitura em três tempos: o endereço existe, a
   marca é o que salta. */
.marca .marca-fora { color: var(--fraco); font-weight: 400; }
.topo nav { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .92rem; }
.bolha {
  display: inline-block; min-width: 1.25em; margin-left: .3em; padding: 0 .35em;
  background: var(--realce); color: var(--contraste); border-radius: 999px;
  font-size: .72rem; font-weight: 700; text-align: center;
}

/* Botão que se comporta como link — "sair" precisa ser POST, mas continua
   sendo um item de menu discreto, não uma ação de destaque. */
.sair-form { display: inline; }
.link-botao {
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--linha); text-underline-offset: 3px;
}
.link-botao:hover { text-decoration-color: var(--realce); }

footer { max-width: var(--coluna); margin: 0 auto; padding: 1.4rem var(--respiro) 3rem; border-top: 1px solid var(--linha); font-size: .8rem; color: var(--fraco); }
footer p { margin: .2rem 0; }

.avisos { max-width: var(--coluna); margin: 1rem auto 0; padding: 0 var(--respiro); }
.aviso { padding: .6rem .9rem; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--papel); margin: 0 0 .5rem; }
.aviso.ok  { border-color: var(--ok-borda); color: var(--ok); }
.aviso.erro{ border-color: var(--erro-borda); color: var(--erro); }

.cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cabeca p { margin: 0 0 .2rem; }
.duas-colunas { display: grid; grid-template-columns: 1fr 300px; gap: 2.2rem; align-items: start; }
.colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.8rem; margin-top: 2.5rem; }
@media (max-width: 720px) { .duas-colunas { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ botões */
.botao {
  display: inline-block; border: 1px solid var(--tinta); background: var(--tinta); color: var(--contraste);
  padding: .5rem 1rem; border-radius: var(--raio); font: inherit; font-size: .92rem;
  cursor: pointer; text-decoration: none;
}
.botao:hover { background: var(--tinta-forte); }
.botao.vazado { background: transparent; color: var(--tinta); }
.botao.vazado:hover { background: var(--lavado); }
.botao.pequeno { padding: .35rem .75rem; font-size: .86rem; }
.botao.micro   { padding: .22rem .55rem; font-size: .78rem; }
.botao.perigo  { border-color: #d8c4c2; color: var(--erro); }
.chip { border: 1px solid var(--linha); background: var(--papel); border-radius: 999px; padding: .12rem .55rem; font: inherit; font-size: .78rem; cursor: pointer; }
.chip:hover { border-color: var(--realce); }

/* ------------------------------------------------------- acesso (tela admin) */
/* Barras em CSS puro: 24 retângulos não valem uma biblioteca de gráficos, e
   biblioteca de gráficos é a dependência de terceiro que o projeto não tem.
   A altura vem de --h, calculado no servidor contra o pico da janela. */
.barras { display: flex; align-items: flex-end; gap: 2px; height: 64px;
          padding: .5rem .6rem; background: var(--papel);
          border: 1px solid var(--linha); border-radius: var(--raio); }
.barras .barra { flex: 1; min-height: 2px; height: var(--h);
                 background: var(--linha); border-radius: 1px; }
/* Hora com falha ganha cor. Hora vazia continua desenhada, em cinza: o eixo do
   tempo tem de ser contínuo, senão três barras seguidas mentem sobre o formato. */
.barras .barra.viva { background: var(--realce); }

/* Selo de estado numa célula de tabela. Sem cor de fundo forte: a tabela toda
   ficaria pintada, e aí nada salta — que é o oposto de sinalizar. */
.selo { font-size: .78rem; padding: .1em .45em; border-radius: 3px;
        border: 1px solid var(--linha); white-space: nowrap; }
.selo.ok      { color: var(--ok);     border-color: var(--ok-borda); }
.selo.atencao { color: var(--realce); border-color: var(--alerta-borda); }
.selo.erro    { color: var(--erro);   border-color: var(--erro-borda); }
.metrica.atencao b { color: var(--realce); }

/* ------------------------------------------------------------- formulários */
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.1rem; }
.cartao.compacto { padding: .8rem; margin-top: 1rem; }
.cartao.linha { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }

/* A isca do cadastro: campo que existe para robô encontrar e gente não.
   `display:none` seria mais curto e é justamente o que o robô testa primeiro —
   tirar do fluxo por posição custa o mesmo e não anuncia a intenção. O campo já
   sai do teclado por `tabindex="-1"` e do leitor de tela por `aria-hidden`. */
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
label { display: block; margin-bottom: .85rem; font-size: .9rem; }
label.inline { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
input, textarea, select {
  display: block; width: 100%; margin-top: .3rem; padding: .5rem .6rem;
  border: 1px solid var(--linha); border-radius: var(--raio); font: inherit;
  background: var(--papel); color: var(--tinta);
}
/* A regra acima é para campo de texto. Caixa de seleção e botão de rádio não
   têm largura de campo — esticá-los a 100% deixava o quadradinho perdido do
   outro lado do rótulo (visível em "Visibilidade", no ciclo). */
input[type="checkbox"], input[type="radio"] {
  width: auto; display: inline-block; margin: 0; flex: 0 0 auto;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--realce); outline-offset: -1px; }
textarea { resize: vertical; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.busca { display: flex; gap: .5rem; margin: 1rem 0 1.4rem; }
.busca input { margin: 0; }
.busca.grande input { padding: .7rem .8rem; font-size: 1.05rem; }
.verbos { display: flex; gap: .4rem; flex-wrap: wrap; }
.inline-verbos { margin-top: .5rem; }

/* --------------------------------------------------------------- etiqueta */
/* ⚠️ A etiqueta NÃO segue o tema, e isso é decisão, não esquecimento.
   Este bloco é a pré-visualização de um adesivo que sai numa impressora, em
   papel branco, com tinta preta. Escurecê-lo no tema escuro mostraria ao dono
   uma etiqueta que nunca vai existir — e a decisão que ele toma olhando para
   ela (o título cabe? lê-se de longe?) passaria a ser tomada sobre uma mentira.
   Papel é branco nos dois temas. */
.etiqueta {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #d9d9d6; border-radius: 3px;
  padding: 10px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06);
  color: #17181a;
}
.et-texto { flex: 1; min-width: 0; }
/* Sem elipse aqui também: esta é a prévia do que vai para o adesivo, e cortar
   o título na tela mentiria sobre o que sai impresso — onde ele sai inteiro. */
.et-titulo { display: block; font-size: 1.8rem; font-weight: 700; line-height: 1.05;
             letter-spacing: .01em; overflow-wrap: break-word; }
.et-dominio, .et-data { font-size: .7rem; color: #444; }
.et-data { float: right; }
.et-qr { width: 62px; height: 62px; flex: 0 0 62px; }
.et-qr svg { width: 100%; height: 100%; display: block; }
.etiqueta-demo { max-width: 420px; margin: 1.6rem 0; }
.codigo-grande { font: 700 1.5rem/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; margin: 1rem 0 .3rem; }

/* ----------------------------------------------------------------- listas */
.lista-caixas { list-style: none; padding: 0; margin: 0; }
.lista-caixas li {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem;
  padding: .75rem 0; border-bottom: 1px solid var(--linha); align-items: baseline;
}
.lista-caixas li.vencida { background: linear-gradient(90deg, var(--alerta), transparent 60%); }
.cx-titulo { font-weight: 600; font-size: 1.02rem; text-decoration: none; }
.cx-meta { grid-column: 1; font-size: .84rem; color: var(--fraco); }
.cx-codigo { grid-row: 1; grid-column: 2; font: .8rem ui-monospace, Menlo, monospace; color: var(--fraco); }
.tag { grid-column: 2; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--realce); }
.lista-itens { margin: .3rem 0 1rem; padding-left: 1.1rem; }
.lista-itens li { margin: .2rem 0; }
.lista-itens.grande { font-size: 1.1rem; text-align: left; display: inline-block; }
.lista-simples { list-style: none; padding: 0; margin: 0; }
.lista-simples li { padding: .3rem 0; border-bottom: 1px solid var(--linha); }
.lista-simples li.atual { font-weight: 600; }
.grade-codigos { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.grade-codigos li { border: 1px solid var(--linha); border-radius: var(--raio); padding: .4rem .6rem; background: var(--papel); font: .85rem ui-monospace, Menlo, monospace; display: flex; justify-content: space-between; gap: .5rem; }

/* ---------------------------------------------------------------- avisos */
.alerta { background: var(--alerta); border: 1px solid var(--alerta-borda); border-radius: var(--raio); padding: .8rem 1rem; margin: 1.2rem 0; font-size: .92rem; }
.alerta.congelado { background: var(--lavado); border-color: var(--linha); }
.privado { border: 1px dashed var(--linha); border-radius: var(--raio); padding: 1.4rem; margin-top: 1.4rem; }
.caixa-titulo { font-size: 2.6rem; letter-spacing: .01em; }

/* --------------------------------------------------------------- métricas */
.metricas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; margin: 1.2rem 0; }
.metrica { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: .8rem .9rem; }
.metrica b { display: block; font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.metrica span { display: block; font-size: .84rem; }
.metrica em { display: block; font-size: .76rem; color: var(--fraco); font-style: normal; margin-top: .2rem; }
.tabela { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tabela th, .tabela td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--linha); }
.tabela th { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fraco); }

/* ------------------------------------------------------------------- hero */
.hero h1 { font-size: 2.2rem; max-width: 16ch; }
.hero .linha-fina { font-size: 1.05rem; }
.cta { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* Bloco recolhido — usado em /etiquetas e na correção da caixa. */
.dobra { border-top: 1px solid var(--linha); padding-top: .7rem; margin-top: 1.6rem; }
.dobra > summary { cursor: pointer; font-size: .92rem; font-weight: 600; padding: .2rem 0; }
.dobra > summary:hover { color: var(--realce); }

/* ------------------------------------------------------- itens sugeridos */
/* Absorvido da versão vizinha (item 3). Reusa `.chip`, que já existia para as
   etiquetas livres — o gesto é o mesmo (clicar em vez de digitar), então não
   merece um componente novo. */
.sugestoes { display: flex; gap: .35rem; flex-wrap: wrap; margin: -.4rem 0 .9rem; }
.sugestoes .chip::before { content: "+ "; color: var(--fraco); }
.sugestoes-rotulo { display: block; font-size: .8rem; color: var(--fraco); margin-bottom: .35rem; }

/* Seleção do painel, para escolher o que vai ao relatório. */
.lista-caixas li .marcar { margin-right: .5rem; vertical-align: baseline; }
.lista-caixas li .marcar-rot { display: inline; }

/* ------------------------------------------------------------------ print
   Rede de segurança: `/folha` e `/relatorio` têm CSS próprio e não passam por
   aqui, mas qualquer tela do app pode ir parar numa impressora. Tema escuro
   impresso gasta tinta e sai ilegível. */
@media print {
  :root, :root[data-tema="escuro"] {
    --tinta: #000; --fraco: #444; --linha: #bbb; --fundo: #fff; --papel: #fff;
    --contraste: #fff; --tinta-forte: #000; --lavado: #f0f0ee;
    color-scheme: light;
  }
  .topo nav, .sair-form, #tema, .busca button { display: none; }
}