/*
 * Tempos AJM — o telemóvel.
 *
 * Desenhado para um polegar, de pé, à porta de um cliente: campos altos, um botão principal que
 * não se falha, e um resumo em letra grande antes de submeter. Sem tabelas, sem menus, sem nada
 * que obrigue a apontar com precisão.
 *
 * Tipos de letra do sistema de propósito: a app tem de abrir sem rede, e ir buscar tipos de
 * letra à internet faria dela uma app que só funciona com cobertura.
 */
:root {
  --navy-950: #0a1529;
  --navy-900: #0f1f3d;
  --navy-700: #1e3a6b;
  --navy-600: #2a4d8a;
  --tinta: #16213a;
  --suave: #6b7690;
  --borda: #dde2ea;
  --fundo: #eef1f6;
  --erro: #b3261e;
  --bom: #1d7a4c;
  --r: 14px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* `hidden` ganha a tudo o que este ficheiro disser.
   Sem isto, um `display:` escrito com seletor de ID vence a regra do browser que esconde os
   elementos marcados como escondidos — e o painel da câmara ficava por cima da app desde que ela
   abria, com a câmara nunca chegando a ser chamada. Foi assim que a app foi publicada à
   primeira, e o defeito não se via em nenhum teste: o `hidden` estava lá, só não valia nada. */
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--fundo);
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- cabeçalho ---------- */
header {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(160deg, var(--navy-900), var(--navy-950));
  color: #fff;
  padding: calc(env(safe-area-inset-top) + 16px) 18px 18px;
}
header .marca { height: 20px; width: auto; opacity: .95; }
header .titulo { flex: 1; min-width: 0; }
header .nome { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
header .quem {
  font-size: 12.5px; color: #9fb0cc; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
header .icone {
  background: rgba(255,255,255,.12); border: 0; color: #fff;
  width: 38px; height: 38px; border-radius: 50%; font-size: 17px;
}

main { padding: 18px 16px calc(env(safe-area-inset-bottom) + 28px); max-width: 520px; margin: 0 auto; }

/* ---------- cartões ---------- */
.cartao {
  background: #fff; border-radius: var(--r); padding: 18px 16px 20px;
  box-shadow: 0 1px 2px rgba(15,31,61,.06), 0 8px 24px rgba(15,31,61,.06);
}
.cartao.vazio { text-align: center; padding: 30px 22px; }
.cartao.vazio h2 { font-size: 18px; margin: 14px 0 8px; }
.cartao.vazio p { font-size: 14px; color: var(--suave); margin: 0 0 6px; }
.emblema {
  width: 60px; height: 60px; margin: 0 auto; border-radius: 50%;
  background: var(--fundo); color: var(--navy-700);
  font-size: 26px; line-height: 60px;
}
.emblema.bom { background: #e3f5ea; color: var(--bom); }

label {
  display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--suave); margin: 18px 0 7px;
}
.cartao > label:first-child { margin-top: 0; }

input[type=text], input[type=date], input[type=time], input[type=email] {
  width: 100%; padding: 14px 13px;
  /* 17px de propósito: abaixo de 16 o iPhone dá zoom sozinho ao tocar no campo. */
  font-size: 17px; font-family: inherit; color: inherit;
  border: 1.5px solid var(--borda); border-radius: 11px; background: #fff;
  appearance: none;
}
input:focus {
  outline: none; border-color: var(--navy-600);
  box-shadow: 0 0 0 4px rgba(42,77,138,.10);
}
.duas { display: flex; gap: 12px; }
.duas > div { flex: 1; min-width: 0; }
.eco { font-size: 13.5px; color: var(--suave); margin-top: 7px; min-height: 20px; }
.eco.mau { color: var(--erro); }
.estado { font-size: 14px; color: var(--suave); margin-bottom: 4px; }

/* ---------- o resumo antes de submeter ----------
   É a última vez que a pessoa vê o que está a marcar: não há resposta ao email. */
.resumo {
  margin-top: 16px; padding: 16px 18px; border-radius: var(--r);
  background: var(--navy-900); color: #fff;
}
.resumo-tempo { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.resumo-onde { font-size: 13.5px; color: #9fb0cc; margin-top: 2px; }

/* ---------- botões ---------- */
button.principal, button.secundaria {
  width: 100%; padding: 16px; font-size: 16px; font-weight: 600; font-family: inherit;
  border-radius: 12px; border: 1.5px solid transparent; margin-top: 18px;
}
button.principal { background: var(--navy-900); color: #fff; }
button.principal:active { background: var(--navy-700); }
button.principal.grande { font-size: 17px; padding: 18px; }
button.principal[disabled] { background: #b9c2d2; }
button.secundaria { background: #fff; color: var(--navy-900); border-color: var(--borda); margin-top: 10px; }
button.secundaria.clara { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }

.nota { font-size: 12.5px; line-height: 1.6; color: var(--suave); margin: 14px 2px 0; text-align: center; }

/* ---------- avisos ---------- */
#aviso {
  position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px);
  padding: 14px 16px; border-radius: 12px; font-size: 14px; line-height: 1.45;
  box-shadow: 0 12px 34px rgba(15,31,61,.25); z-index: 20;
}
#aviso.bom { background: #123d2a; color: #d6f5e4; }
#aviso.mau { background: #5c1512; color: #ffdcd8; }

/* ---------- a câmara ----------
   Ocupa o ecrã todo: aponta-se e lê-se, sem mais nada à volta. */
#camara {
  position: fixed; inset: 0; background: #000; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 20px calc(env(safe-area-inset-bottom) + 20px);
}
/* O vídeo tem um tamanho máximo: num telemóvel ocupa tudo, e num ecrã largo (onde isto também
   se abre, para experimentar) fica uma janela em vez de uma parede preta. */
#camara-palco { position: relative; width: 100%; max-width: 420px; }
#video {
  display: block; width: 100%; aspect-ratio: 3 / 4; max-height: 64vh;
  object-fit: cover; border-radius: 14px; background: #111;
}
/* A mira não faz nada de técnico — serve para a pessoa saber onde pôr o código.
   Centrada sobre o vídeo: sem o `left/top/transform` ficava onde o fluxo a deixasse, que num
   ecrã largo era encostada a um canto e por baixo do botão (visto ao publicar, à primeira). */
.mira {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62%; aspect-ratio: 1; pointer-events: none;
  border: 3px solid rgba(255,255,255,.9); border-radius: 18px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.35);
}
#camara-info {
  color: #fff; font-size: 15px; text-align: center; margin-top: 18px; min-height: 22px;
  max-width: 420px;
}
#camara button { max-width: 420px; }