/* =====================================================================
   ECHRO — aparência do aplicativo de campo

   Quem usa isto está em pé num aviário, com sol na tela, poeira, talvez
   luva, e pressa. Cada decisão daqui responde a isso:

   • fonte grande de verdade (18px de base, 24px nos números);
   • alvo de toque de 56px — dedo com luva não acerta botão de 40;
   • contraste alto, porque tela de celular no sol perde metade dele;
   • um assunto por vez, sem coluna lateral e sem menu escondido;
   • o que está em foco tem contorno visível, para não se perder o lugar.

   Escala tipográfica curta de propósito. Seis tamanhos bastam, e menos
   variação é menos coisa para o olho decidir.
   ===================================================================== */

:root {
  --fundo: #f5f7f8;
  --superficie: #ffffff;
  --superficie-2: #eef1f3;
  --borda: #cfd8dd;
  --borda-forte: #9fb0b9;

  --texto: #10191e;
  --texto-suave: #4a5b66;
  --texto-fraco: #6b7d88;

  --acao: #0f5d4a;
  --acao-toque: #0b4738;
  --acao-texto: #ffffff;

  --alerta: #9a3412;
  --alerta-fundo: #fff2ec;
  --alerta-borda: #f0b49a;

  --atencao: #7a5b00;
  --atencao-fundo: #fdf6e0;
  --atencao-borda: #e4cd85;

  --certo: #0f5d4a;
  --certo-fundo: #e9f5f1;
  --certo-borda: #a8d3c6;

  --raio: 12px;
  --sombra: 0 1px 2px rgba(16, 25, 30, .08), 0 4px 12px rgba(16, 25, 30, .06);

  --t-micro: .75rem;
  --t-pequeno: .875rem;
  --t-base: 1.125rem;
  --t-medio: 1.375rem;
  --t-grande: 1.75rem;
  --t-numero: 1.5rem;

  --toque: 56px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0d1417;
    --superficie: #151f24;
    --superficie-2: #1c282e;
    --borda: #2c3b43;
    --borda-forte: #47606c;

    --texto: #e8eef1;
    --texto-suave: #a8bac4;
    --texto-fraco: #7d919c;

    --acao: #2a9d7f;
    --acao-toque: #35b492;
    --acao-texto: #04120e;

    --alerta: #ff9f7a;
    --alerta-fundo: #2b1710;
    --alerta-borda: #6b3520;

    --atencao: #e8c96a;
    --atencao-fundo: #241d09;
    --atencao-borda: #5c4a16;

    --certo: #6dd3b4;
    --certo-fundo: #0e2620;
    --certo-borda: #235448;

    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--t-base)/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  /* respeita a barra de status e o entalhe do celular */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior-y: contain;
}

/* -------------------------------------------------- estrutura */
.app { max-width: 34rem; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }

/* No computador, o cadastro respira: 34rem é a medida do celular, e no
   escritório sobra tela. O aplicativo de campo continua igual. */
@media (min-width: 48rem) {
  .app, .rodape { max-width: 46rem; }
}
.conteudo { flex: 1; padding: 1rem 1rem 6rem; }

.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.topo h1 { margin: 0; font-size: var(--t-medio); font-weight: 650; letter-spacing: -.01em; }
.topo .voltar {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-left: -.5rem;
  border: 0; background: none; color: var(--texto); font-size: 1.5rem;
  border-radius: 50%; cursor: pointer;
}
.topo .voltar:active { background: var(--superficie-2); }

/* -------------------------------------------------- estado da rede */
.tarja {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .5rem 1rem; font-size: var(--t-pequeno); font-weight: 600;
}
.tarja--offline { background: var(--atencao-fundo); color: var(--atencao); border-bottom: 1px solid var(--atencao-borda); }
.tarja--fila    { background: var(--certo-fundo);   color: var(--certo);   border-bottom: 1px solid var(--certo-borda); }

/* -------------------------------------------------- cartões */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1rem;
  margin-bottom: .75rem;
  box-shadow: var(--sombra);
}
.cartao h2 { margin: 0 0 .5rem; font-size: var(--t-medio); font-weight: 620; }
.cartao p  { margin: 0 0 .5rem; color: var(--texto-suave); }
.cartao :last-child { margin-bottom: 0; }

/* -------------------------------------------------- botões */
.botao {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; min-height: var(--toque);
  padding: .875rem 1.25rem;
  font: 600 var(--t-base)/1.2 inherit;
  color: var(--acao-texto); background: var(--acao);
  border: 0; border-radius: var(--raio);
  cursor: pointer;
  /* sem realce azul de toque no celular */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.botao:active { background: var(--acao-toque); transform: translateY(1px); }
.botao[disabled] { opacity: .45; pointer-events: none; }

.botao--secundario {
  background: var(--superficie); color: var(--texto);
  border: 2px solid var(--borda-forte);
}
.botao--secundario:active { background: var(--superficie-2); }

.botao--perigo { background: var(--alerta); }

.botao + .botao { margin-top: .625rem; }
/* botão seguido de cartão precisa de respiro: encostados, os dois viram
   um bloco só e o botão deixa de parecer clicável */
.botao + .cartao, .botao + .aviso { margin-top: 1rem; }

/* -------------------------------------------------- formulário */
.campo { margin-bottom: 1.125rem; }

.campo > label {
  display: block; margin-bottom: .375rem;
  font-size: var(--t-base); font-weight: 600; color: var(--texto);
}
.campo .ajuda {
  display: block; margin-bottom: .5rem;
  font-size: var(--t-pequeno); color: var(--texto-fraco);
}

input, select, textarea {
  width: 100%; min-height: var(--toque);
  padding: .75rem .875rem;
  font: var(--t-base)/1.4 inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio);
}
input[inputmode="numeric"] {
  font-size: var(--t-numero); font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
input:focus, select:focus, textarea:focus, .botao:focus-visible {
  outline: 3px solid var(--acao);
  outline-offset: 2px;
  border-color: var(--acao);
}
input[aria-invalid="true"] { border-color: var(--alerta); }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%),
                    linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

/* valor calculado pelo sistema: mostrado, não digitado */
.calculado {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .75rem .875rem;
  background: var(--superficie-2);
  border: 2px dashed var(--borda-forte);
  border-radius: var(--raio);
}
.calculado b { font-size: var(--t-numero); font-variant-numeric: tabular-nums; }
.calculado span { font-size: var(--t-pequeno); color: var(--texto-fraco); }

/* -------------------------------------------------- avisos */
.aviso {
  border-radius: var(--raio);
  padding: .875rem 1rem;
  margin-bottom: .75rem;
  border: 1px solid;
}
.aviso h3 { margin: 0 0 .25rem; font-size: var(--t-base); font-weight: 650; }
.aviso p  { margin: 0; font-size: var(--t-pequeno); line-height: 1.5; }
.aviso p + p { margin-top: .375rem; }

.aviso--alta   { background: var(--alerta-fundo);  color: var(--alerta);  border-color: var(--alerta-borda); }
.aviso--media  { background: var(--atencao-fundo); color: var(--atencao); border-color: var(--atencao-borda); }
.aviso--ok     { background: var(--certo-fundo);   color: var(--certo);   border-color: var(--certo-borda); }

/* -------------------------------------------------- foto */
.foto-area {
  display: grid; place-items: center; gap: .75rem;
  min-height: 12rem; padding: 1.5rem;
  background: var(--superficie-2);
  border: 2px dashed var(--borda-forte);
  border-radius: var(--raio);
  text-align: center;
}
.foto-area img { max-width: 100%; max-height: 18rem; border-radius: var(--raio); }
.foto-area .icone { font-size: 3rem; line-height: 1; }

/* -------------------------------------------------- listas */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 0;
  border-bottom: 1px solid var(--borda);
}
.lista li:last-child { border-bottom: 0; }
.lista .principal { flex: 1; min-width: 0; }
.lista .principal strong { display: block; font-size: var(--t-base); font-weight: 600; }
.lista .principal small  { display: block; font-size: var(--t-pequeno); color: var(--texto-fraco); }

.etiqueta {
  flex-shrink: 0;
  padding: .25rem .625rem;
  font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-radius: 999px;
  border: 1px solid;
}
.etiqueta--espera   { background: var(--atencao-fundo); color: var(--atencao); border-color: var(--atencao-borda); }
.etiqueta--enviado  { background: var(--certo-fundo);   color: var(--certo);   border-color: var(--certo-borda); }
.etiqueta--recusado { background: var(--alerta-fundo);  color: var(--alerta);  border-color: var(--alerta-borda); }

/* -------------------------------------------------- barra inferior */
.rodape {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex;
  max-width: 34rem; margin: 0 auto;
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom);
}
.rodape a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: .125rem;
  padding: .625rem .25rem;
  min-height: var(--toque);
  color: var(--texto-fraco); text-decoration: none;
  font-size: var(--t-micro); font-weight: 600;
}
.rodape a[aria-current="page"] { color: var(--acao); }
.rodape .icone { font-size: 1.375rem; line-height: 1; }
.rodape .contador {
  position: absolute; transform: translate(1.25rem, -.375rem);
  min-width: 1.25rem; padding: 0 .25rem;
  background: var(--alerta); color: #fff;
  font-size: var(--t-micro); font-weight: 700; text-align: center;
  border-radius: 999px;
}

/* -------------------------------------------------- diversos */
.vazio { text-align: center; padding: 3rem 1rem; color: var(--texto-fraco); }
.vazio .icone { font-size: 3rem; display: block; margin-bottom: .75rem; }

.resumo-linha {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--borda);
}
.resumo-linha:last-child { border-bottom: 0; }
.resumo-linha b { font-variant-numeric: tabular-nums; }

.passo {
  font-size: var(--t-pequeno); font-weight: 600;
  color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .25rem;
}

.oculto { display: none !important; }

/* O `display` do navegador para [hidden] é de especificidade baixíssima:
   qualquer regra com classe o vence, e o elemento reaparece. Sem esta
   linha, a seta de voltar surgia na tela inicial. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}