/* =====================================================================
   APP DE CAMPO — mobile first, uso com uma mão, alto contraste
   ===================================================================== */
body { background: var(--fundo); font-size: 16px; }
body.travado { overflow: hidden; }
.tela { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.conteudo { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 18px 16px 120px; }

/* ---------- Cabeçalho do local ---------- */
.cab { background: var(--marinho); color: #fff; padding-top: env(safe-area-inset-top); }
.cab-in { max-width: 640px; margin: 0 auto; padding: 14px 16px 22px; }
.cab-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.cab-marca { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #AFC2DC; text-transform: uppercase; }
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #C6D4E8; }
.trilha .ic { width: 14px; height: 14px; opacity: .6; }
.cab-titulo { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; line-height: 1.1; }
.cab-sub { margin-top: 8px; font-size: 14px; color: #C6D4E8; }
.cab-mini .cab-in { padding: 10px 12px 12px; }
.cab-linha { display: flex; align-items: center; gap: 10px; }
.cab-txt { flex: 1; min-width: 0; }
.cab-trilha-mini { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #AFC2DC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-titulo-mini { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-voltar { width: 44px; height: 44px; flex: none; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; }
.cab-voltar .ic { width: 22px; height: 22px; }
.cab-voltar:active { background: rgba(255,255,255,.18); }

/* Selo de sincronização no cabeçalho */
.chip-sync { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; flex: none; }
.chip-sync i { width: 8px; height: 8px; border-radius: 50%; background: #9FB3CE; }
.chip-sync.s-ok i { background: #4ADE80; }
.chip-sync.s-at i { background: #FBBF24; }
.chip-sync.s-nc i { background: #F87171; }
.chip-sync.s-info i { background: #60A5FA; animation: pulsar 1s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .35; } }

/* ---------- Blocos ---------- */
.bloco { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-3); padding: 18px 16px 4px; margin-bottom: 14px; box-shadow: var(--sombra-1); }
.rotulo-g { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 8px; }
.rotulo-g em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--tinta-3); margin-left: 4px; }
.entrada-g { min-height: 52px; font-size: 17px; border-radius: var(--r-2); padding: 12px 14px; }
textarea.entrada-g { min-height: 110px; }
.btn-g { min-height: 54px; font-size: 16px; border-radius: var(--r-2); padding: 0 18px; }
.btn-bloco { width: 100%; }
.btn-perigo-cheio { background: var(--nc); color: #fff; }
.btn-perigo-cheio:active { background: #9B2A23; }
.linha-botoes { display: flex; gap: 10px; margin-top: 12px; }
.linha-botoes .btn { flex: 1; }

.opcoes { display: flex; flex-wrap: wrap; gap: 8px; border-radius: var(--r-2); }
.opcoes.invalida { outline: 2px solid var(--nc); outline-offset: 4px; }
.opcoes-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opcoes-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opcoes-4 .opcao { padding: 8px 4px; font-size: 14px; }
.opcao { min-height: 46px; padding: 8px 14px; border: 1px solid var(--linha-forte); border-radius: var(--r-2); background: var(--papel);
  font-size: 15px; font-weight: 600; color: var(--tinta-2); text-align: left; line-height: 1.25; -webkit-tap-highlight-color: transparent; }
.opcoes-2 .opcao, .opcoes-4 .opcao { text-align: center; }
.opcao.ativa { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.segmentado { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segmentado .opcao { text-align: center; }
.prio-alta.ativa { background: #C2410C; border-color: #C2410C; }
.prio-critica.ativa { background: var(--nc); border-color: var(--nc); }
.prio-baixa.ativa { background: var(--na); border-color: var(--na); }
.prio-media.ativa { background: var(--at); border-color: var(--at); }

.refs { display: grid; gap: 8px; margin-bottom: 10px; }
.ref { display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 12px; border: 1px solid var(--marinho-borda); background: var(--marinho-claro); border-radius: var(--r-2); }
.ref > .ic { color: var(--marinho-3); }
.ref div { flex: 1; min-width: 0; }
.ref strong { display: block; font-size: 14px; }
.ref span { display: block; font-size: 13px; color: var(--tinta-2); }

.card { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-3); padding: 16px; margin-bottom: 14px; }
.card-rascunho { border-color: var(--at-borda); background: #FFFBF3; }
.card-rascunho-t { display: flex; gap: 12px; }
.card-rascunho-t .ic { color: var(--at); width: 24px; height: 24px; margin-top: 2px; }
.card-rascunho-t p { font-size: 14px; color: var(--tinta-2); margin-top: 2px; }

/* ---------- Home ---------- */
.qr-dica { display: flex; gap: 16px; align-items: flex-start; padding: 18px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-3); margin-bottom: 18px; }
.qr-dica > .ic { width: 44px; height: 44px; color: var(--marinho); stroke-width: 1.5; }
.qr-dica p { color: var(--tinta-2); font-size: 14px; margin-top: 4px; }
.secao { margin-top: 22px; }
.sec-titulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 10px; }
.lista { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-3); overflow: hidden; }
.linha-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 0; border-bottom: 1px solid var(--linha); background: none; text-align: left; min-height: 64px; }
.linha-item:last-child { border-bottom: 0; }
.linha-item:active:not(.estatico) { background: var(--cinza-1); }
.linha-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--marinho-claro); color: var(--marinho-3); display: grid; place-items: center; flex: none; }
.linha-ic.at { background: var(--at-fundo); color: var(--at); }
.linha-ic.nc { background: var(--nc-fundo); color: var(--nc); }
.linha-txt { flex: 1; min-width: 0; }
.linha-txt strong { display: block; font-size: 15px; }
.linha-meta { display: block; font-size: 13px; color: var(--tinta-3); margin-top: 2px; }
.linha-erro { display: block; font-size: 12.5px; color: var(--nc); margin-top: 4px; }
.linha-seta { color: var(--tinta-4); }
.envio { align-items: flex-start; }
.rodape-app { text-align: center; font-size: 12px; color: var(--tinta-4); margin-top: 20px; }
.vazio { text-align: center; color: var(--tinta-3); padding: 30px 10px; }

/* ---------- Barra inferior fixa ---------- */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--linha); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.barra-in { max-width: 640px; margin: 0 auto; display: flex; gap: 10px; }
.barra-in .btn { flex: 1; }
.bolha { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #FBBF24; color: #3B2600; font-size: 12px; font-weight: 700; margin-left: 4px; }

/* ---------- Contexto da inspeção ---------- */
.contexto { background: var(--papel); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 10; }
.contexto-in { max-width: 640px; margin: 0 auto; padding: 10px 16px 12px; }
.ctx-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.ctx-ref { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--marinho-3); font-weight: 600; }
.ctx-ref .ic { width: 14px; height: 14px; }
.progresso { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--tinta-3); flex-wrap: wrap; }
.progresso-barra { flex: 1 1 100%; height: 6px; background: var(--cinza-2); border-radius: 99px; overflow: hidden; }
.progresso-barra i { display: block; height: 100%; background: var(--marinho-3); border-radius: 99px; transition: width .25s; }
.progresso .cont { margin-left: auto; }
.t-ok { color: var(--ok); } .t-nc { color: var(--nc); } .t-at { color: var(--at); } .t-info { color: var(--marinho-3); }

/* ---------- Cards de item ---------- */
.conteudo-itens { padding-top: 14px; }
.itens { display: grid; gap: 12px; }
.item { background: var(--papel); border: 1px solid var(--linha); border-left: 4px solid var(--linha-forte); border-radius: var(--r-3); padding: 12px 12px 14px; box-shadow: var(--sombra-1); scroll-margin: 140px 0 120px; }
.item.st-conforme { border-left-color: var(--ok); }
.item.st-nao_conforme { border-left-color: var(--nc); }
.item.st-nao_se_aplica { border-left-color: var(--na); }
.item.piscar { animation: piscar 1.2s ease; }
@keyframes piscar { 20%, 60% { box-shadow: 0 0 0 3px var(--at); } }
.item-cab { display: flex; align-items: flex-start; gap: 10px; }
.item-num { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--cinza-1); color: var(--tinta-2); font-weight: 700; font-size: 14px; display: grid; place-items: center; margin-top: 3px; }
.item-desc { flex: 1; border: 1px solid transparent; border-radius: 8px; padding: 7px 8px; font-size: 16.5px; font-weight: 600; resize: none; overflow: hidden; line-height: 1.35; background: none; min-height: 40px; }
.item-desc:focus { outline: none; border-color: var(--foco); background: var(--papel); }
.item-desc::placeholder { color: var(--tinta-4); font-weight: 500; }
.item.incompleto .item-desc:placeholder-shown { background: var(--at-fundo); }
.item-menu { color: var(--tinta-4); flex: none; }
.item-sit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.sit { min-height: 60px; border: 1.5px solid var(--linha-forte); border-radius: var(--r-2); background: var(--papel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--tinta-2); -webkit-tap-highlight-color: transparent; line-height: 1.1; padding: 6px 4px; }
.sit .ic { width: 22px; height: 22px; stroke-width: 2.4; }
.sit-conforme .ic { color: var(--ok); } .sit-nao_conforme .ic { color: var(--nc); } .sit-nao_se_aplica .ic { color: var(--na); }
.sit[aria-pressed="true"] .ic { color: #fff; }
.sit-conforme[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: #fff; }
.sit-nao_conforme[aria-pressed="true"] { background: var(--nc); border-color: var(--nc); color: #fff; }
.sit-nao_se_aplica[aria-pressed="true"] { background: var(--na); border-color: var(--na); color: #fff; }
.item-acoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.acao { min-height: 46px; border: 1px solid var(--linha); border-radius: var(--r-2); background: var(--papel-2); display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.acao .ic { width: 20px; height: 20px; color: var(--marinho-3); }
.acao.ativa { border-color: var(--marinho-borda); background: var(--marinho-claro); }
.item-obs { margin-top: 10px; min-height: 76px; font-size: 15px; }
.miniaturas { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; padding-bottom: 2px; }
.mini { position: relative; flex: none; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; background: var(--cinza-1); border: 1px solid var(--linha); }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini-env { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ok); }
.mini-proc { display: grid; place-items: center; }
.mini-x { position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(20,28,39,.72); color: #fff; display: grid; place-items: center; }
.mini-x .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.nc-resumo { margin-top: 12px; padding: 12px; border-radius: var(--r-2); background: var(--nc-fundo); border: 1px solid var(--nc-borda); }
.nc-resumo-t { display: flex; align-items: center; gap: 8px; color: var(--nc); margin-bottom: 6px; flex-wrap: wrap; }
.nc-resumo-t strong { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.nc-resumo p { font-size: 14.5px; }
.nc-resumo .falta { color: var(--nc); font-weight: 600; }
.nc-resumo .nc-meta { font-size: 13px; color: var(--tinta-2); margin-top: 4px; }
.nc-resumo .btn { margin-top: 10px; min-height: 46px; }
.novo-item { width: 100%; margin-top: 14px; min-height: 60px; border: 2px dashed var(--linha-forte); border-radius: var(--r-3); background: none; color: var(--marinho-3);
  font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.novo-item:active { background: var(--marinho-claro); }

/* ---------- Resumo ---------- */
.titulo-tela { font-size: 22px; margin-bottom: 14px; }
.resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.res-cel { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-2); padding: 12px 10px; }
.res-cel strong { display: block; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.res-cel span { font-size: 12px; color: var(--tinta-3); font-weight: 600; }
.res-cel.ok strong { color: var(--ok); } .res-cel.nc strong { color: var(--nc); }
.dados { margin: 0 0 18px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-3); }
.dados div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--linha); }
.dados div:last-child { border-bottom: 0; }
.dados dt { font-size: 12.5px; color: var(--tinta-3); font-weight: 600; }
.dados dd { margin: 0; font-size: 14.5px; }

/* ---------- Sucesso / estados ---------- */
.sucesso { text-align: center; padding-top: 34px; }
.sucesso-ic { width: 76px; height: 76px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; margin: 0 auto 18px; }
.sucesso-ic .ic { width: 40px; height: 40px; stroke-width: 2.6; }
.sucesso h1 { font-size: 24px; }
.sucesso .sub { color: var(--tinta-3); margin-top: 6px; }
.estado-envio { text-align: left; margin-top: 24px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-3); padding: 6px 16px 16px; }
.estado-linha { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.estado-linha:last-of-type { border-bottom: 0; }
.estado-linha strong { font-size: 13px; letter-spacing: .06em; }
.estado-linha p { font-size: 13.5px; color: var(--tinta-3); margin-top: 2px; }
.estado-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--na-fundo); color: var(--na); }
.estado-ic.ok { background: var(--ok-fundo); color: var(--ok); } .estado-ic.at { background: var(--at-fundo); color: var(--at); }
.estado-ic.nc { background: var(--nc-fundo); color: var(--nc); } .estado-ic.info { background: var(--marinho-claro); color: var(--marinho-3); }
.estado-envio .btn { margin-top: 6px; }

.msg { text-align: center; padding-top: 60px; }
.msg > .ic { width: 52px; height: 52px; color: var(--at); margin: 0 auto 16px; }
.msg h1 { font-size: 22px; margin-bottom: 8px; }
.msg p { color: var(--tinta-2); margin-bottom: 24px; }

/* ---------- Folhas (NC e seleção de prancha) ---------- */
.sobre { position: fixed; inset: 0; z-index: 50; background: var(--fundo); display: flex; }
.folha { display: flex; flex-direction: column; width: 100%; height: 100%; }
.folha-cab { display: flex; align-items: center; gap: 12px; background: var(--marinho); color: #fff; padding: calc(10px + env(safe-area-inset-top)) 12px 12px; }
.folha-cab.nc { background: #7F1D17; }
.folha-cab h2 { font-size: 19px; }
.folha-corpo { flex: 1; overflow-y: auto; padding: 18px 16px 110px; max-width: 640px; width: 100%; margin: 0 auto; -webkit-overflow-scrolling: touch; }
.barra-folha { position: absolute; }
.folha-busca { background: var(--papel); border-bottom: 1px solid var(--linha); padding: 10px 16px; }
.busca-campo { position: relative; max-width: 640px; margin: 0 auto; }
.busca-campo .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); }
.busca-campo .entrada { padding-left: 38px; min-height: 48px; font-size: 16px; }
.pr-lista { padding-bottom: 40px; }
.pr-grupo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); margin: 16px 0 8px; }
.pr-grupo:first-child { margin-top: 0; }
.pr-grupo span { font-weight: 600; color: var(--tinta-4); margin-left: 4px; }
.pr-linha { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-2); margin-bottom: 6px; overflow: hidden; }
.pr-linha.aberta { border-color: var(--marinho-borda); box-shadow: 0 0 0 1px var(--marinho-borda); }
.pr-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; background: none; text-align: left; min-height: 60px; }
.pr-cod { flex: none; min-width: 64px; max-width: 96px; line-height: 1.25; font-size: 12.5px; font-weight: 700; color: var(--marinho-3); background: var(--marinho-claro); border-radius: 6px; padding: 5px 7px; text-align: center; font-variant-numeric: tabular-nums; }
.pr-txt { flex: 1; min-width: 0; }
.pr-txt strong { display: block; font-size: 14.5px; }
.pr-txt span { display: block; font-size: 12.5px; color: var(--tinta-3); }
.pr-rev { flex: none; font-size: 12.5px; font-weight: 700; color: var(--tinta-2); }
.pr-revs { padding: 4px 12px 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.pr-revs .rotulo { width: 100%; margin: 0; }

@media (min-width: 700px) {
  .cab-titulo { font-size: 34px; }
  .item-sit .sit { font-size: 13px; }
}