/* estilo.css — os tokens do .interface-design/system.md e nada além deles.
 *
 * REGRA: nenhum valor aqui é inventado. Cor, espaço, tamanho de fonte e alvo
 * saem todos do system.md. Precisou de algo que não está lá? Vai lá, escreve
 * o porquê, e só então usa aqui.
 *
 * Contexto que determina tudo: supervisor de pé numa cozinha, celular na mão,
 * com pressa. Alto contraste, alvo grande, zero ambiguidade.
 */

:root {
  /* ---- profundidade: UMA estratégia — surface color shifts.
     Sombra quase não lê em fundo escuro; empilhar tom é o que funciona. */
  --bg:          #0f172a;   /* slate-900  fundo                        */
  --surface-1:   #1e293b;   /* slate-800  cards de pergunta            */
  --surface-2:   #334155;   /* slate-700  dentro de card (opções)      */
  --surface-3:   #475569;   /* slate-600  popover, sheet               */

  /* ---- cor */
  --text:        #f1f5f9;   /* slate-100 */
  --text-2:      #94a3b8;   /* slate-400 */
  --text-muted:  #64748b;   /* slate-500 */
  --border:      #334155;   /* slate-700 */
  --border-forte:#475569;   /* slate-600 */
  --accent:      #10b981;   /* emerald-500  conforme, positivo, ação   */
  --accent-hover:#059669;   /* emerald-600 */
  --danger:      #ef4444;   /* red-500      não conforme               */
  --warn:        #f59e0b;   /* amber-500    pendente / atrasado        */
  --info:        #38bdf8;   /* sky-400      salvo, informativo         */

  /* ---- controles */
  --control-bg:     #334155;
  --control-border: #475569;
  --control-focus:  #10b981;
  --alvo: 56px;             /* alvo mínimo — polegar, em pé, com pressa */

  /* ---- espaçamento: base 4px, só múltiplos */
  --micro:     4px;
  --tight:     8px;
  --component: 12px;
  --card:      16px;
  --section:   24px;
  --major:     32px;
  --gutter:    16px;

  /* ---- tipografia: 2 famílias, teto */
  --fonte-numero: 'Manrope', system-ui, sans-serif;
  --fonte-texto:  'Inter', system-ui, sans-serif;

  /* ---- movimento */
  --toque:  120ms;          /* feedback de toque      */
  --troca:  200ms;          /* troca de seção         */
  --curva:  ease-out;       /* sem spring/bounce: é auditoria, não jogo */

  --radius-botao: 12px;
  --radius-card:  16px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--fonte-texto);
  /* body 15px/1.55 — não 14: o supervisor lê em pé, com o braço estendido. */
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* Safe-area: celular com notch. O gutter lateral do system.md continua
   valendo — o inset é somado, não substitui. */
.app {
  padding:
    calc(var(--section) + env(safe-area-inset-top))
    calc(var(--gutter) + env(safe-area-inset-right))
    calc(var(--major) + env(safe-area-inset-bottom))
    calc(var(--gutter) + env(safe-area-inset-left));
  max-width: 640px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------- tipografia */

.display  { font-family: var(--fonte-numero); font-size: 32px; line-height: 1.15; font-weight: 800; }
.title    { font-family: var(--fonte-numero); font-size: 20px; line-height: 1.25; font-weight: 700; }
.subtitle { font-family: var(--fonte-texto);  font-size: 16px; line-height: 1.35; font-weight: 600; }
.body     { font-family: var(--fonte-texto);  font-size: 15px; line-height: 1.55; font-weight: 400; }
.label    { font-family: var(--fonte-texto);  font-size: 13px; line-height: 1.4;  font-weight: 500; }
.micro    { font-family: var(--fonte-texto);  font-size: 11px; line-height: 1.3;  font-weight: 500; }

h1, h2, h3 { margin: 0; }
p { margin: 0; }

.text-2     { color: var(--text-2); }
.text-muted { color: var(--text-muted); }

/* ---------------------------------------------------------------- ícones */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  /* Um só peso, um só preenchimento. */
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

/* ---------------------------------------------------------------- pilhas */

.pilha        { display: flex; flex-direction: column; gap: var(--card); }
.pilha-tight  { display: flex; flex-direction: column; gap: var(--tight); }
.pilha-section{ display: flex; flex-direction: column; gap: var(--section); }
.pilha-major  { display: flex; flex-direction: column; gap: var(--major); }
.linha        { display: flex; align-items: center; gap: var(--tight); }

/* ---------------------------------------------------------------- campos */

.campo-rotulo {
  display: block;
  margin-bottom: var(--tight);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
}

.campo {
  width: 100%;
  min-height: var(--alvo);
  padding: var(--component) var(--card);
  background: var(--control-bg);
  color: var(--text);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-botao);
  font-family: var(--fonte-texto);
  font-size: 16px;      /* < 16px faz o iOS dar zoom sozinho ao focar */
  line-height: 1.55;
  transition: border-color var(--toque) var(--curva);
}
.campo::placeholder { color: var(--text-muted); }
.campo:focus-visible,
.campo:focus {
  outline: none;
  border-color: var(--control-focus);
  box-shadow: 0 0 0 2px var(--control-focus);
}
.campo:disabled { opacity: 0.5; }

/* ---------------------------------------------------------------- botões */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tight);
  width: 100%;
  min-height: var(--alvo);
  padding: var(--component) var(--card);
  border: 1px solid transparent;
  border-radius: var(--radius-botao);
  font-family: var(--fonte-texto);
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: var(--accent);
  cursor: pointer;
  transition: background var(--toque) var(--curva), transform var(--toque) var(--curva);
  -webkit-tap-highlight-color: transparent;
}
.botao:hover:not(:disabled) { background: var(--accent-hover); }
/* active importa mais que hover — celular não tem hover. */
.botao:active:not(:disabled) { background: var(--accent-hover); transform: scale(0.98); }
.botao:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--control-focus); }
.botao:disabled { opacity: 0.6; cursor: default; }

.botao-secundario {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-forte);
}
.botao-secundario:hover:not(:disabled),
.botao-secundario:active:not(:disabled) { background: var(--surface-3); }

.botao-texto {
  width: auto;
  min-height: var(--alvo);
  padding: 0 var(--component);
  background: transparent;
  color: var(--text-2);
  border: none;
  font-weight: 500;
}
.botao-texto:hover:not(:disabled),
.botao-texto:active:not(:disabled) { background: transparent; color: var(--text); }

/* ---------------------------------------------------------------- cards */

.card {
  background: var(--surface-1);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  padding: var(--card);
}

/* Card clicável: unidade, checklist. Alvo grande, um toque. */
.card-alvo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--card);
  width: 100%;
  min-height: calc(var(--alvo) + var(--card));
  text-align: left;
  color: var(--text);
  font-family: var(--fonte-texto);
  cursor: pointer;
  transition: background var(--toque) var(--curva), transform var(--toque) var(--curva);
  -webkit-tap-highlight-color: transparent;
}
.card-alvo:hover  { background: var(--surface-2); }
.card-alvo:active { background: var(--surface-2); transform: scale(0.99); }
.card-alvo:focus-visible { outline: none; border-color: var(--control-focus); }
.card-alvo .material-symbols-outlined { color: var(--text-muted); flex: none; }

/* ---------------------------------------------------------------- pergunta */

.card-pergunta {
  display: flex;
  flex-direction: column;
  gap: var(--card);
  /* A borda esquerda existe SEMPRE, transparente: sem isto o card daria um
     pulo de 3px ao ser respondido, e a tela toda dançaria conforme o
     supervisor avança. */
  border-left: 3px solid transparent;
}

/* Respondido ganha barra de 3px em --accent na borda esquerda: varredura
   rápida da tela mostra o que falta sem ler nada. */
.card-pergunta.respondida { border-left-color: var(--accent); }
.card-pergunta.respondida > .pilha-tight .material-symbols-outlined { color: var(--accent); }

/* Destaque do 422: a pergunta obrigatória que travou o concluir. Âmbar =
   pendente, exatamente o que ela é. */
.card-pergunta.pendente {
  border-left-color: var(--warn);
  border-color: var(--warn);
}

.corpo-pergunta { gap: var(--component); }

/* ---- opções */

.opcoes { display: grid; gap: var(--tight); }
/* 2 opções: metade da largura, lado a lado (system.md). */
.opcoes-lado-a-lado { grid-template-columns: 1fr 1fr; }
/* 3 opções: empilhadas, largura cheia. Ver Extensões do system.md. */
.opcoes-empilhadas  { grid-template-columns: 1fr; }

.opcao {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo);
  padding: var(--component);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-botao);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--fonte-texto);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--toque) var(--curva), transform var(--toque) var(--curva);
  -webkit-tap-highlight-color: transparent;
}
.opcao:active { transform: scale(0.98); }
.opcao:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--control-focus); }

/* Escolhido tem de ser óbvio a 1 metro — é a garantia de que o supervisor não
   pula pergunta achando que respondeu. Fundo cheio + peso 700 + texto branco.
   A cor vem dos PONTOS (ver corDaOpcao), nunca do rótulo. */
.opcao.escolhido { color: #ffffff; font-weight: 700; border-color: transparent; }
.opcao-accent.escolhido { background: var(--accent); }
.opcao-danger.escolhido { background: var(--danger); }

/* ---- estrelas (1 pergunta, peso 10) */

.estrelas { display: flex; gap: var(--micro); }
.estrela {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 5 × 56px = 280px — cabe nos ~328px úteis do celular. */
  width: var(--alvo);
  height: var(--alvo);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-botao);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--toque) var(--curva), transform var(--toque) var(--curva);
  -webkit-tap-highlight-color: transparent;
}
.estrela:active { transform: scale(0.98); }
.estrela:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--control-focus); }
.estrela.acesa { color: var(--warn); border-color: var(--warn); }
.estrela .material-symbols-outlined { font-size: 28px; }

/* ---- N/A */

.botao-na {
  display: inline-flex;
  align-items: center;
  gap: var(--tight);
  align-self: flex-start;
  min-height: var(--alvo);
  padding: 0 var(--component);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-botao);
  background: transparent;
  color: var(--text-2);
  font-family: var(--fonte-texto);
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.botao-na.escolhido { background: var(--surface-2); color: var(--text); border-color: var(--border-forte); }
.botao-na:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--control-focus); }

/* ---- foto */

/* O <input type=file> nativo não se estiliza: fica fora da tela e quem o
   dispara é o botão. `display:none` o tiraria da árvore de acessibilidade e
   do .click() em alguns navegadores. */
.entrada-arquivo {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.acoes-foto { position: relative; }

/* Foto e comentário são SECUNDÁRIOS — chip de largura automática, fundo
   transparente. Largura cheia + emerald os faria competir com os botões de
   resposta, que são a interação que mais importa. Altura 56px: continuam no
   caminho de responder (a foto é a evidência da não conformidade). */
.acoes-linha { display: flex; flex-wrap: wrap; gap: var(--tight); }

.acao-secundaria {
  display: inline-flex;
  align-items: center;
  gap: var(--tight);
  min-height: var(--alvo);
  padding: 0 var(--card);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-botao);
  background: transparent;
  color: var(--text-2);
  font-family: var(--fonte-texto);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--toque) var(--curva), transform var(--toque) var(--curva);
  -webkit-tap-highlight-color: transparent;
}
.acao-secundaria:active { transform: scale(0.98); background: var(--surface-2); }
.acao-secundaria:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--control-focus); }
.acao-secundaria .material-symbols-outlined { font-size: 20px; }
/* Já tem comentário escrito: o chip precisa dizer isso sem abrir a caixa. */
.acao-secundaria.tem-conteudo { color: var(--text); border-color: var(--border-forte); background: var(--surface-2); }

.caixa-comentario:empty { display: none; }

.tira-fotos { display: flex; flex-wrap: wrap; gap: var(--tight); }

.foto-slot { position: relative; }

.miniatura {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--radius-botao);
  background: var(--surface-2);
  display: block;
}

.foto-remover {
  position: absolute;
  top: calc(-1 * var(--tight));
  right: calc(-1 * var(--tight));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-forte);
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.foto-remover .material-symbols-outlined { font-size: 18px; }
.foto-remover:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--control-focus); }

/* A opção escolhida exige anexo e ainda não tem: a foto é a prova do problema
   que vira plano de ação. Âmbar = pendente. */
.botao-exigido { border-color: var(--warn); }
.aviso-exigido {
  display: flex;
  align-items: center;
  gap: var(--micro);
  color: var(--warn);
}
.aviso-exigido .material-symbols-outlined { font-size: 16px; }

.foto-erro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tight);
  padding: var(--tight) var(--component);
  border: 1px solid var(--danger);
  border-radius: var(--radius-botao);
  color: var(--text);
}
/* Retry VISÍVEL: a foto não entra na fila do localStorage (D5 — não é
   offline-first), então quem tenta de novo é o supervisor, e ele só tenta se
   enxergar que falhou. */
.foto-erro button {
  flex: none;
  min-height: 40px;
  padding: 0 var(--component);
  border: 1px solid var(--border-forte);
  border-radius: var(--radius-botao);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--fonte-texto);
  font-size: 15px;
  cursor: pointer;
}

.campo-comentario { min-height: 0; resize: vertical; }

/* ---------------------------------------------------------------- aplicar */

.titulo-secao { color: var(--text-2); letter-spacing: 0.04em; }

.linha.entre { justify-content: space-between; }

/* ┌─────────────────────────────────────────────────────────────────────┐
   │ A BARRA GRUDA NO PÉ DA TELA.                                        │
   └─────────────────────────────────────────────────────────────────────┘
   O indicador de "salvo" é a única prova que o supervisor tem de que a
   resposta subiu. No fim do documento, ele fica a ~5000px de rolagem — ou
   seja, invisível justo enquanto se responde, que é quando ele importa. E o
   progresso ("12 de 26") é o que diz se dá pra ir embora da loja.
   Preso ao pé, os dois ficam sempre no campo de visão, sem custar rolagem. */
.rodape-fixo {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding: var(--tight) 0 calc(var(--tight) + env(safe-area-inset-bottom));
  background: var(--bg);
  /* Sem isto os cards passariam por baixo e o texto se misturaria ao rodapé. */
  box-shadow: 0 -8px 12px -4px var(--bg);
}
/* Na tela da nota o rodapé fica vazio: sem isto, o padding e a sombra dele
   ainda pintam uma faixa fantasma embaixo do "Voltar ao início". */
.rodape-fixo:empty { display: none; }

.barra-progresso {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}
.barra-progresso-cheio {
  height: 100%;
  background: var(--accent);
  transition: width var(--troca) var(--curva);
}

/* Indicador de salvo. Sky = informativo (system.md). */
.salvo { display: inline-flex; align-items: center; gap: var(--micro); color: var(--text-muted); }
.salvo .material-symbols-outlined { font-size: 16px; }
.salvo-ok       { color: var(--text-muted); }
.salvo-salvando { color: var(--info); }
.salvo-salvando .material-symbols-outlined { animation: girar 1200ms linear infinite; }
.salvo-erro     { color: var(--warn); }

.nota { align-items: center; text-align: center; padding: var(--major) var(--card); }

@media (prefers-reduced-motion: reduce) {
  .salvo-salvando .material-symbols-outlined { animation: none; }
}

/* ---------------------------------------------------------------- avisos */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--tight);
  padding: var(--card);
  border-radius: var(--radius-botao);
  border: 1px solid var(--border-forte);
  background: var(--surface-1);
  font-size: 15px;
  line-height: 1.55;
}
.aviso .material-symbols-outlined { flex: none; }
.aviso-erro  { border-color: var(--danger); color: var(--text); }
.aviso-erro  .material-symbols-outlined { color: var(--danger); }
.aviso-info  { border-color: var(--info); }
.aviso-info  .material-symbols-outlined { color: var(--info); }
.aviso-vazio { border-style: dashed; color: var(--text-2); }
.aviso-vazio .material-symbols-outlined { color: var(--text-muted); }
/* Âmbar = pendente (system.md). "Sem vínculo" é pendência de configuração —
   nada quebrou, falta o admin agir. Ver Extensões do system.md. */
.aviso-alerta { border-color: var(--warn); }
.aviso-alerta .material-symbols-outlined { color: var(--warn); }

/* ---------------------------------------------------------------- admin */

/* A tela do admin é a do teto de 640px (Extensões do system.md): é a única
   que se abre no desktop. */

.tira-chips { display: flex; flex-wrap: wrap; gap: var(--tight); align-items: center; }

/* Vínculo que JÁ existe: leitura, não controle — sem alvo, sem 56px. O ícone
   separa marcador (sell) de unidade (store): sem ele os dois viram o mesmo
   chip cinza e o admin lê a lista errada. */
.chip-vinculo {
  display: inline-flex;
  align-items: center;
  gap: var(--micro);
  padding: var(--micro) var(--tight);
  border: 1px solid var(--border);
  border-radius: var(--radius-botao);
  background: var(--surface-2);
  color: var(--text-2);
}
.chip-vinculo .material-symbols-outlined { font-size: 14px; color: var(--text-muted); }

/* Multi-seleção. 56px como todo controle no caminho da ação — as exceções ao
   piso são só destrutivo (remover foto) e reativo (tentar de novo). */
.chip-multi {
  display: inline-flex;
  align-items: center;
  gap: var(--tight);
  min-height: var(--alvo);
  padding: 0 var(--card);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-botao);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--fonte-texto);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--toque) var(--curva), transform var(--toque) var(--curva);
  -webkit-tap-highlight-color: transparent;
}
.chip-multi:active { transform: scale(0.98); }
.chip-multi:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--control-focus); }
.chip-multi.escolhido {
  background: var(--accent);
  border-color: transparent;
  color: #ffffff;
  font-weight: 700;
}
.chip-multi .material-symbols-outlined { font-size: 20px; }

/* O selo que esta tela existe pra mostrar: o checklist não aparece pra
   ninguém. Âmbar, e com o motivo escrito — um ícone sozinho não avisa nada. */
.selo-sem-vinculo {
  display: inline-flex;
  align-items: center;
  gap: var(--micro);
  color: var(--warn);
  font-weight: 500;
}
.selo-sem-vinculo .material-symbols-outlined { font-size: 16px; }

.card-alerta { border-color: var(--warn); }

@media (prefers-reduced-motion: reduce) {
  .chip-multi:active { transform: none; }
}

/* ---------------------------------------------------------------- estados */

.carregando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tight);
  padding: var(--major) 0;
  color: var(--text-2);
}

.girando {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-forte);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: girar 800ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Movimento sempre respeita quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .botao:active:not(:disabled), .card-alvo:active { transform: none; }
  .girando { animation: none; border-top-color: var(--border-forte); }
}