@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/lato-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/lato-latin-700-normal.woff2') format('woff2'); }

:root {
  /* "only light": pede aos navegadores com escurecimento automático (Chrome "modo escuro para sites", Samsung Internet) que não escureçam a página. */
  color-scheme: only light;
  /* Cores: Design System Arcos Verde, tema light (MARCA.md rev. 3, 2026-10-26). Não criar tons novos. */
  --fundo: #ffffff;
  --fundo-peca: #f7f8f7;
  --campo-claro: #eef1ee;
  --texto: #1a201c;
  --primaria: #1f5c35;
  --verde-arcos: #1f5c35;
  --laranja-arcos: #d1801f;
  --laranja-texto: #854805;
  --texto-sobre-laranja: #1a201c;
  --texto-sobre-verde: #ffffff;
  --alerta: #d1801f;
  --alerta-texto: #854805;
  --alerta-selo-fundo: #f4e9dc;
  --nao-conforme: #b42318;
  --nao-conforme-selo-fundo: #fde8e6;
  --nao-conforme-selo-texto: #7a1710;
  --conforme: #2e894f;
  --conforme-texto: #18482a;
  --conforme-selo-fundo: #e2eee6;
  --linha: #d9ded9;
  --rampa-1: #d1801f;
  --rampa-2: #b66e29;
  --rampa-3: #1f5c35;
  /* Só do app (ver DESIGN.md 3.2) */
  --texto-secundario: #4f5a54;
  --borda-campo: #7d877f;
  --foco: 0 0 0 3px rgba(31, 92, 53, .35);
  --sombra-toast: 0 6px 20px rgba(26, 32, 28, .25);
  /* Raio: sistema (raio-sm 4, raio-md 8, raio-circulo 999). O 14px atual sai. */
  --raio-sm: 4px;
  --raio-md: 8px;
  --raio-circulo: 999px;
  /* Tipografia */
  --fonte: 'Lato', Corbel, 'Segoe UI', system-ui, sans-serif;
  /* Tamanhos parametrizados do app (Compacto/Normal/Grande): mantidos como estão. */
  --fs-base: 16px;
  --fs-input: 16px;
  --fs-btn: 15px;
  --fs-btn-lg: 16px;
  --fs-label: 14px;
  --tap: 48px;
  --btn-lg-h: 54px;
  --counter-num: 26px;
  --pad-y: 10px;
  --field-mt: 12px;
  --grid-mt: 14px;
}

/* ----- Níveis de tamanho da interface (Compacto / Normal / Grande) ----- */
body.size-grande {
  --fs-base: 18px; --fs-input: 18px; --fs-btn: 17px; --fs-btn-lg: 18px; --fs-label: 15px;
  --tap: 56px; --btn-lg-h: 64px; --counter-num: 32px; --pad-y: 12px; --field-mt: 14px; --grid-mt: 18px;
}
body.size-compacto {
  --fs-base: 14px; --fs-input: 15px; --fs-btn: 14px; --fs-btn-lg: 14px; --fs-label: 13px;
  --tap: 42px; --btn-lg-h: 46px; --counter-num: 20px; --pad-y: 7px; --field-mt: 7px; --grid-mt: 10px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--fundo-peca);
  color: var(--texto);
  font-size: var(--fs-base);
  line-height: 1.4;
  /* Palavra longa sem espaço (nome, observação, parcela) quebra em vez de alargar a página. */
  overflow-wrap: break-word;
}
/* Rede de segurança contra rolagem lateral (v11.2). As causas foram corrigidas em cada
   elemento; isto só segura o que escapar. No body é "clip" e não "hidden": hidden faria
   do body um contêiner de rolagem e o topo sticky deixaria de grudar. */
html { overflow-x: hidden; }
body { overflow-x: clip; }

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* Ícones SVG inline (símbolos no index.html): traço em currentColor. */
.i {
  width: 1.2em; height: 1.2em; flex-shrink: 0; vertical-align: -0.22em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--fundo);
  color: var(--primaria);
  border-bottom: 2px solid var(--verde-arcos);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 10px = área de proteção mínima da marca (DESIGN.md 6). */
  padding: 10px 16px;
}
/* Marca encolhe em telas estreitas (360px): sem isso o topo transbordava,
   alargava a página e jogava a barra de abas para fora da tela. */
.topbar { gap: 10px; }
.topbar-logo {
  display: block; height: 42px; width: auto; min-width: 0; flex: 0 1 auto;
  object-fit: contain; object-position: left center;
}
/* Na tela Sobre a marca entra no corpo; o topo mostra só o nome do app (marca uma vez por tela). */
.topbar-titulo { display: none; font-weight: 700; font-size: 18px; line-height: 42px; color: var(--primaria); }
body:has(#screen-sobre.active) .topbar-logo { display: none; }
body:has(#screen-sobre.active) .topbar-titulo { display: block; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.size-toggle {
  min-width: 40px; min-height: 40px;
  border: 2px solid var(--verde-arcos);
  background: var(--fundo); color: var(--primaria);
  border-radius: var(--raio-md); font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  line-height: 1; padding: 0 8px;
}
.size-toggle:active { transform: translateY(1px); }

/* Controle segmentado de tamanho na tela inicial */
.size-control {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 8px;
}
.size-control-label { font-size: 14px; font-weight: 700; color: var(--primaria); margin-right: 2px; }
.size-seg { display: inline-flex; max-width: 100%; border: 2px solid var(--verde-arcos); border-radius: var(--raio-md); overflow: hidden; }
.size-btn {
  flex: 1 1 auto; min-width: 0; /* com fonte grande do sistema, encolhe em vez de vazar */
  min-height: 40px; padding: 0 14px;
  border: none; background: var(--fundo); color: var(--primaria);
  font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.size-btn + .size-btn { border-left: 2px solid var(--verde-arcos); }
.size-btn.active { background: var(--verde-arcos); color: var(--texto-sobre-verde); }
.net-badge {
  font-size: 12px; font-weight: 700;
  color: var(--conforme-texto);
  background: var(--conforme-selo-fundo);
  border: 1px solid var(--linha);
  padding: 4px 10px; border-radius: var(--raio-circulo);
}
/* A palavra (Online/Offline) carrega o estado junto com a cor. */
.net-badge.online, .net-badge.offline { text-transform: capitalize; }
.net-badge.online { color: var(--conforme-texto); background: var(--conforme-selo-fundo); border-color: var(--conforme); }
.net-badge.offline { color: var(--texto-sobre-laranja); background: var(--laranja-arcos); border-color: var(--laranja-arcos); }

/* Marca principal (só na tela Sobre) */
.brand-lockup { display: block; width: min(280px, 70%); height: auto; margin: 6px auto 18px; }

#app { padding: 16px; max-width: 640px; margin: 0 auto; }

.screen { display: none; }
.screen.active { display: block; animation: fade .15s ease; }
@keyframes fade { from { opacity: .4; } to { opacity: 1; } }

h1 { font-size: 22px; font-weight: 700; margin: 4px 0 6px; color: var(--primaria); }
h2 { font-size: 17px; font-weight: 700; margin: 26px 0 8px; color: var(--primaria); }
.hint { color: var(--texto-secundario); font-size: 14px; margin: 0 0 14px; }

label {
  display: block;
  font-weight: 700;
  font-size: var(--fs-label);
  margin: var(--field-mt) 0 6px;
  color: var(--primaria);
}

input, select {
  width: 100%;
  min-height: var(--tap);
  padding: var(--pad-y) 14px;
  font-family: inherit;
  font-size: var(--fs-input);
  border: 2px solid var(--borda-campo);
  border-radius: var(--raio-md);
  background: var(--fundo);
  color: var(--texto);
}
input:focus, select:focus {
  outline: none;
  border-color: var(--primaria);
  box-shadow: var(--foco);
}

.field-pair { display: flex; gap: 12px; }
.field-pair > div { flex: 1; min-width: 0; }

.nome-row { display: flex; gap: 8px; align-items: stretch; }

.nome-row input { flex: 1; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: var(--pad-y) 16px;
  font-family: inherit;
  font-size: var(--fs-btn);
  font-weight: 700;
  border: none;
  border-radius: var(--raio-md);
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--foco); }
.btn-lg { min-height: var(--btn-lg-h); font-size: var(--fs-btn-lg); }
.btn-block { width: 100%; margin-top: 10px; }
/* Botão de arquivo (label envolvendo input[type=file]); antes era style="" no HTML, proibido pela CSP (v0.12.1) */
.btn-file { text-align: center; cursor: pointer; }
.btn-primary { background: var(--verde-arcos); color: var(--texto-sobre-verde); }
.btn-secondary { background: var(--fundo); color: var(--primaria); border: 2px solid var(--verde-arcos); }
.btn-ghost { background: transparent; color: var(--primaria); border: 2px solid var(--borda-campo); font-weight: 700; }
.btn-danger { background: var(--nao-conforme); color: var(--texto-sobre-verde); }
/* Cancelamento não-destrutivo (ex.: cancelar fuste pendente): laranja da marca,
   texto escurecido p/ contraste na luz forte do campo. */
.btn-cancel { background: var(--alerta-selo-fundo); color: var(--laranja-texto); border: 2px solid var(--laranja-arcos); font-weight: 700; }
/* Botão de duas linhas (DESIGN.md 5): título e subtítulo empilhados e centralizados.
   Com ícone (.btn-com-icone), o ícone fica à esquerda fora do fluxo para não descentralizar o texto. */
.btn-duas-linhas { flex-direction: column; gap: 2px; }
.btn-titulo { display: block; }
.btn-sub { display: block; font-size: var(--fs-label); font-weight: 400; }
.btn-com-icone { position: relative; padding-left: 44px; padding-right: 44px; }
.btn-com-icone > .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }

#btnStartColeta { width: 100%; margin-top: 22px; }

.counter-row {
  display: flex; gap: 12px; margin: 8px 0 4px;
}
.counter {
  flex: 1;
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  background: var(--verde-arcos);
  color: var(--texto-sobre-verde);
  border-radius: var(--raio-md);
  padding: var(--pad-y) 12px;
}
.counter-label { font-size: 12px; opacity: .85; text-transform: uppercase; letter-spacing: .5px; }
.counter-num { font-size: var(--counter-num); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

.coleta-context {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--primaria);
  border-radius: var(--raio-md);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--texto-secundario);
  margin-bottom: 10px;
}
.coleta-context strong { color: var(--texto); }

.lock-badge { font-size: 12px; color: var(--laranja-texto); font-weight: 700; margin-left: 6px; }
.lock-badge .i { width: 14px; height: 14px; vertical-align: -2px; }
.hidden { display: none !important; }

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 1fr sozinho cresce até a maior palavra */
  align-items: stretch; /* os dois botões do par sempre com a mesma altura */
  gap: 12px;
  margin-top: var(--grid-mt);
}
.secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.secondary-actions .btn { flex: 1; min-height: 48px; font-size: 14px; }

.alert {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--raio-md);
  font-size: 15px;
  font-weight: 700;
}
.alert.warn { background: var(--alerta-selo-fundo); color: var(--alerta-texto); border: 1px solid var(--alerta); }
.alert.err  { background: var(--nao-conforme-selo-fundo); color: var(--nao-conforme-selo-texto); border: 1px solid var(--nao-conforme); }

.counts-footer, .context-summary {
  margin-top: 18px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--texto-secundario);
  font-variant-numeric: tabular-nums;
}
/* Vazio (ex.: contexto ainda não preenchido): não desenha cartão nem ocupa espaço. */
.counts-footer:empty, .context-summary:empty { display: none; }
.context-summary strong { color: var(--texto); }
.context-summary .i { color: var(--laranja-texto); }

.export-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.review-list { margin-top: 12px; font-variant-numeric: tabular-nums; }
.review-item {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 14px;
  /* Censo com milhares de fustes: itens fora da tela não entram no layout até rolar até eles. */
  content-visibility: auto;
  contain-intrinsic-size: auto 110px;
}
.review-item.suspect { border-left: 4px solid var(--laranja-arcos); background: var(--alerta-selo-fundo); }
.review-item .ri-head { font-weight: 700; color: var(--texto); }
.review-item .ri-segundo-nome { color: var(--texto-secundario); }
/* Registro alterado depois de salvo: marca discreta, sem mudar a posição na lista. */
.marca-editado { color: var(--texto-secundario); font-size: 12px; font-weight: 400; }
.review-item .ri-flag { color: var(--laranja-texto); font-size: 12px; font-weight: 700; }

.species-chip {
  display: inline-block;
  background: var(--conforme-selo-fundo);
  color: var(--conforme-texto);
  border-radius: var(--raio-circulo);
  padding: 4px 12px;
  margin: 3px 4px 3px 0;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  max-width: 100%;
}

.mini-title { font-size: 14px; margin: 18px 0 8px; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: .5px; }
.mini-list { display: flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums; }
/* Lista densa em duas alturas: linha 1 = id + nome inteiro (quebra, nunca reticências);
   linha 2 = valores à esquerda, ações à direita (alvo 40px, DESIGN.md 5). */
.mini-row {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--fundo); border: 1px solid var(--linha);
  border-radius: var(--raio-md); padding: 8px 6px 6px 10px; font-size: 14px;
}
.mini-row.suspect { border-left: 4px solid var(--laranja-arcos); background: var(--alerta-selo-fundo); }
.mini-linha1 { display: flex; align-items: baseline; gap: 8px; }
.mini-linha2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mini-id { font-weight: 700; color: var(--primaria); flex-shrink: 0; }
.mini-name { flex: 1; min-width: 0; color: var(--texto); overflow-wrap: anywhere; }
.mini-vals { color: var(--texto-secundario); font-weight: 700; white-space: nowrap; }
.mini-vals .i { color: var(--laranja-texto); }
.mini-empty { color: var(--texto-secundario); font-size: 14px; padding: 8px 2px; }

.danger-title { color: var(--nao-conforme); }

/* Ações Editar/Excluir por registro (lista inline e revisão) */
.rec-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.review-item .rec-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.btn-mini {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 40px; min-height: 40px; padding: 0 10px;
  border: 2px solid var(--borda-campo); border-radius: var(--raio-sm);
  background: var(--fundo); color: var(--primaria);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.btn-mini .i { width: 20px; height: 20px; vertical-align: 0; }
.btn-mini:active { transform: translateY(1px); }
.btn-mini:focus-visible { outline: none; box-shadow: var(--foco); }
.btn-mini-danger { color: var(--nao-conforme); }

/* Tela Sobre */
.sobre-texto p { margin: 0 0 10px; }
/* CTA de parceria: único CTA laranja do app; nunca branco sobre laranja. */
.btn-cta {
  background: var(--laranja-arcos); color: var(--texto-sobre-laranja); border: 2px solid var(--laranja-texto);
  font-weight: 700; text-decoration: none; margin-top: 16px; padding: 14px 16px;
}
.btn-cta:focus-visible { outline: 3px solid var(--primaria); outline-offset: 2px; }
.sobre-links { list-style: none; padding: 0; margin: 18px 0 4px; font-size: 15px; color: var(--texto-secundario); }
.sobre-links li { padding: 8px 0; border-bottom: 1px solid var(--linha); }
.sobre-links a { color: var(--primaria); font-weight: 700; }
.link-disabled { color: var(--texto-secundario); cursor: not-allowed; }

/* Rodapé de marca (todas as telas) */
.brand-footer {
  display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap;
  max-width: 640px; margin: 0 auto; padding: 0 16px 12px;
  color: var(--texto-secundario); font-size: 12px;
}
.footer-link {
  min-height: 40px; border: none; background: none; padding: 0 4px;
  color: var(--primaria); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.footer-version { font-variant-numeric: tabular-nums; }

/* Metadados da parcela (somente Inventário) */
.parcela-meta {
  margin: 12px 0 4px;
  padding: 4px 12px 12px;
  border: 1px solid var(--linha);
  border-left: 4px solid var(--primaria);
  border-radius: var(--raio-md);
  background: var(--campo-claro);
}
.gps-row { display: flex; gap: 8px; }
.gps-row input { flex: 1; }
#gpsInfo .i { color: var(--primaria); }

.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: var(--fundo);
  border-top: 1px solid var(--linha);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
}
.tab {
  flex: 1;
  border: none;
  background: none;
  padding: 12px 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-secundario);
  cursor: pointer;
}
.tab.active { color: var(--primaria); box-shadow: inset 0 3px 0 var(--primaria); }

.toast {
  position: fixed;
  bottom: 78px; left: 50%;
  transform: translateX(-50%);
  background: var(--texto);
  color: var(--texto-sobre-verde);
  padding: 12px 20px;
  border-radius: var(--raio-circulo);
  font-size: 15px;
  font-weight: 700;
  z-index: 50;
  box-shadow: var(--sombra-toast);
  max-width: 90%;
}
.toast.show { animation: toastIn .2s ease; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Tema claro forçado (alto contraste, legível sob sol em campo).
   Mesmo com o sistema/navegador em modo escuro, o app mantém o tema claro:
   fundo claro + texto escuro é mais legível na luz forte do campo. */

/* Pergunta do tipo da lista importada (Dados). */
.import-tipo { margin: 8px 0 12px; }
.import-tipo p { margin: 0 0 8px; }

/* ===== v12: Volume (Etapa 2) ===== */
/* Bloco recolhido no Contexto: a coleta começa igual; volume é opção. */
.opcoes-box {
  margin: 14px 0 4px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  background: var(--fundo);
}
.opcoes-box > summary {
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  min-height: var(--tap);
  padding: 0 14px;
  cursor: pointer;
  font-weight: 700; color: var(--primaria);
}
.opcoes-box > summary::-webkit-details-marker { display: none; }
.opcoes-box > summary::after {
  content: ''; margin-left: auto; width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--primaria); border-bottom: 2px solid var(--primaria);
  transform: rotate(45deg); transition: transform .15s;
}
.opcoes-box[open] > summary::after { transform: rotate(-135deg); }
.opcoes-box[open] > summary { border-bottom: 1px solid var(--linha); }
.opcoes-resumo { font-weight: 400; color: var(--texto-secundario); font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opcoes-box > :not(summary) { margin-left: 14px; margin-right: 14px; }
.opcoes-box > .hint { margin-top: 10px; }
.opcoes-box > :last-child { margin-bottom: 14px; }
.opcoes-box > div > :last-child { margin-bottom: 4px; }
.field-trio { display: flex; gap: 10px; }
.field-trio > div { flex: 1; min-width: 0; }
#equacaoInfo:empty { display: none; }
#equacaoInfo strong { color: var(--texto); }

/* Revisão: bloco de volume */
.volume-resumo { margin-top: 10px; line-height: 1.5; }
.hint-inline { color: var(--texto-secundario); font-size: 13px; }

/* Dados: tabela de volume por parcela */
.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px; }
.tabela-volume {
  width: 100%; border-collapse: collapse; font-size: 13px;
  font-variant-numeric: tabular-nums; background: var(--fundo);
  border: 1px solid var(--linha); border-radius: var(--raio-md);
}
.tabela-volume th, .tabela-volume td { padding: 8px 4px; border-bottom: 1px solid var(--linha); text-align: right; white-space: nowrap; }
.tabela-volume th:first-child, .tabela-volume td:first-child { text-align: left; white-space: normal; padding-left: 8px; }
.tabela-volume td:last-child, .tabela-volume th:last-child { padding-right: 8px; }
.tabela-legenda { margin-top: 6px; font-size: 12px; }
.tabela-volume th { color: var(--primaria); font-weight: 700; background: var(--campo-claro); }
.tabela-volume tr:last-child td { border-bottom: none; }
.tabela-volume .tv-media td { font-weight: 700; background: var(--campo-claro); }

/* Sobre e Como calculamos */
.sobre-instalar { font-size: 14px; color: var(--texto-secundario); }
.sobre-links .footer-link { font-size: 15px; min-height: 0; padding: 0; }
.calculos p, .calculos li { font-size: 15px; line-height: 1.55; }
.calculos ul { padding-left: 20px; margin: 8px 0 14px; }
.calculos li { margin-bottom: 8px; }
.calculos code {
  font-family: inherit; font-variant-numeric: tabular-nums;
  background: var(--campo-claro); border: 1px solid var(--linha); border-radius: var(--raio-sm);
  padding: 1px 6px; white-space: nowrap;
}
.referencias li { font-size: 14px; color: var(--texto-secundario); }
.referencias em { font-style: normal; color: var(--texto); }