/* Folha única das telas (spec §5).
 *
 * Sem framework de CSS, de propósito: treze telas de formulário e lista não
 * justificam uma dependência de front, e a spec nunca pediu SPA. O que a §5
 * exige está aqui e é verificável:
 *
 *   - alvo de toque de 44 px   -> --alvo-toque, aplicado a botão, link de ação
 *                                 e campo
 *   - foco visível             -> :focus-visible com contorno de 3 px, NUNCA
 *                                 `outline: none`
 *   - contraste adequado       -> --texto sobre --fundo dá 13,6:1; --primaria
 *                                 sobre branco dá 5,9:1 (AA para texto normal)
 *   - etiqueta de formulário   -> `label` sempre visível; placeholder não é
 *                                 etiqueta, porque desaparece ao digitar
 */

:root {
  --fundo: #f7f7f5;
  --superficie: #ffffff;
  --borda: #d6d6d0;
  --texto: #1a1a18;
  --texto-fraco: #5a5a54;
  --primaria: #1b5e20;      /* verde escuro: 5,9:1 sobre branco */
  --primaria-escura: #124116;
  --perigo: #a01818;        /* 6,4:1 sobre branco */
  --aviso: #8a5a00;
  --alvo-toque: 44px;
  --raio: 8px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Espaço para a barra inferior do celular não cobrir conteúdo. */
  padding-bottom: calc(var(--alvo-toque) + 28px);
}

/* Link de pular para o conteúdo: primeiro elemento focável da página.
 * Exigido para navegação por teclado (§5) e invisível até receber foco. */
.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primaria); color: #fff; padding: 12px 16px;
}
.pular:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- foco */
:focus-visible {
  outline: 3px solid var(--primaria);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------- cabeçalho */
.topo {
  display: flex; align-items: center; gap: 12px;
  background: var(--superficie); border-bottom: 1px solid var(--borda);
  padding: 10px 16px; position: sticky; top: 0; z-index: 20;
}
.topo h1 { font-size: 18px; margin: 0; flex: 1; }
.topo .unidade { font-size: 13px; color: var(--texto-fraco); }
.topo .sino {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--alvo-toque); min-height: var(--alvo-toque);
  text-decoration: none; color: var(--texto);
}
.topo .sino .contador {
  position: absolute; top: 4px; right: 2px;
  background: var(--perigo); color: #fff; border-radius: 10px;
  font-size: 11px; line-height: 1; padding: 3px 5px; font-weight: 700;
}

/* --------------------------------------------------------------- conteúdo */
main { max-width: 1040px; margin: 0 auto; padding: 16px; }
h2 { font-size: 20px; margin: 24px 0 8px; }
h2:first-child { margin-top: 0; }
p { margin: 0 0 12px; }

/* ----------------------------------------------------------------- cartão */
.cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 16px; margin: 0 0 16px;
}
.cartao > h3 { margin: 0 0 8px; font-size: 16px; }
.cartao .numero { font-size: 32px; font-weight: 700; line-height: 1; }
.cartao .numero.alerta { color: var(--perigo); }

.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Cartão de estado com TEXTO e ícone (§5: "cartões de estado com texto/ícone").
 * Nunca só cor: daltonismo e impressão em preto e branco. */
.estado {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--borda); border-radius: 999px;
  padding: 4px 10px; font-size: 13px; background: var(--superficie);
}
.estado::before { content: attr(data-icone); font-weight: 700; }
.estado.parado { border-color: var(--perigo); color: var(--perigo); }
.estado.operando { border-color: var(--primaria); color: var(--primaria); }
.estado.desconhecido { border-color: var(--aviso); color: var(--aviso); }

/* ------------------------------------------------------------- formulário */
form { margin: 0; }
.campo { margin: 0 0 16px; }
.campo label { display: block; font-weight: 600; margin-bottom: 4px; }
.campo .ajuda { display: block; font-size: 13px; color: var(--texto-fraco); margin-top: 4px; }
/* Unidade visível junto do campo (§5: "campos com unidades visíveis"). */
.campo .unidade-medida { font-weight: 600; margin-left: 6px; }

input, select, textarea {
  width: 100%; min-height: var(--alvo-toque);
  padding: 10px 12px; font: inherit; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--perigo); border-width: 2px;
}
textarea { min-height: 96px; resize: vertical; }

/* Erro POR CAMPO (§5: "erro por campo"), ligado por aria-describedby. */
.erro-campo { color: var(--perigo); font-size: 14px; margin-top: 4px; font-weight: 600; }
.erro-geral {
  background: #fdecec; border: 1px solid var(--perigo); color: #6d0f0f;
  border-radius: var(--raio); padding: 12px 14px; margin: 0 0 16px;
}
.aviso-geral {
  background: #fff8e5; border: 1px solid var(--aviso); color: #5c3d00;
  border-radius: var(--raio); padding: 12px 14px; margin: 0 0 16px;
}

/* ----------------------------------------------------------------- botões */
button, .botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--alvo-toque); min-width: var(--alvo-toque);
  padding: 0 18px; font: inherit; font-weight: 600;
  border-radius: var(--raio); border: 1px solid var(--primaria);
  background: var(--primaria); color: #fff; text-decoration: none; cursor: pointer;
}
button:hover, .botao:hover { background: var(--primaria-escura); }
button.secundario, .botao.secundario {
  background: var(--superficie); color: var(--primaria);
}
button.perigo, .botao.perigo { background: var(--perigo); border-color: var(--perigo); }
button[disabled], .botao[aria-disabled="true"] { opacity: .6; cursor: progress; }

/* Indicador de envio (§5: "indicador de envio", "botão bloqueado durante envio"). */
button[data-enviando="1"]::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  button[data-enviando="1"]::after { animation: none; }
}

/* ----------------------------------------------------------------- tabelas */
.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--superficie); }
caption { text-align: left; font-weight: 600; padding: 8px 0; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
th { background: #efefeb; font-size: 14px; }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ estado vazio */
/* §5: "Estados vazios orientam ação permitida". */
.vazio {
  border: 2px dashed var(--borda); border-radius: var(--raio);
  padding: 24px; text-align: center; color: var(--texto-fraco);
}
.vazio strong { color: var(--texto); display: block; margin-bottom: 6px; }

/* ------------------------------------------------------- barra do celular */
.barra-inferior {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; background: var(--superficie); border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-inferior a {
  flex: 1; min-height: var(--alvo-toque);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 2px; font-size: 11px; text-decoration: none; color: var(--texto-fraco);
}
.barra-inferior a[aria-current="page"] { color: var(--primaria); font-weight: 700; }
.barra-inferior a .glifo { font-size: 18px; line-height: 1; }

/* ---------------------------------------------------- menu administrativo */
.menu-admin { display: none; }
@media (min-width: 900px) {
  body { padding-bottom: 16px; display: grid; grid-template-columns: 240px 1fr;
         grid-template-areas: "topo topo" "menu conteudo"; }
  .topo { grid-area: topo; }
  .menu-admin {
    grid-area: menu; display: block; padding: 16px;
    border-right: 1px solid var(--borda); background: var(--superficie);
  }
  .menu-admin h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
                   color: var(--texto-fraco); margin: 16px 0 4px; }
  .menu-admin a {
    display: block; min-height: var(--alvo-toque); line-height: var(--alvo-toque);
    padding: 0 10px; border-radius: 6px; text-decoration: none; color: var(--texto);
  }
  .menu-admin a[aria-current="page"] { background: #e8f0e9; color: var(--primaria);
                                       font-weight: 700; }
  main { grid-area: conteudo; }
  .barra-inferior { display: none; }
}

/* ----------------------------------------------------------- tela de login */
.tela-login { max-width: 400px; margin: 48px auto; padding: 0 16px; }
.tela-login .cartao { padding: 24px; }
.tela-login h1 { font-size: 22px; margin: 0 0 4px; }
.tela-login .marca { color: var(--texto-fraco); margin-bottom: 20px; }

/* ---------------------------------------------------- alto contraste / impressão */
@media (prefers-contrast: more) {
  :root { --borda: #000; --texto-fraco: #333; }
}
@media print {
  .topo, .barra-inferior, .menu-admin, button, .botao { display: none !important; }
  body { padding: 0; background: #fff; }
}

/* Texto só para leitor de tela. Usado em "(obrigatório)" e em legenda de
 * tabela: a informação precisa existir para quem não vê o asterisco, sem
 * poluir a tela de quem vê. NÃO usa `display:none`, que remove do leitor
 * também. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}