:root {
  --azul: #17498E; --azul-escuro: #103567; --verm: #C81E2B; --fundo: #F2F5F9; --cartao: #fff;
  --texto: #17202E; --suave: #5B6677; --linha: #DCE2EB; --claro: #E7ECF4; --ok: #14804A; --alerta: #FFF6DC; --alerta-b: #EFD98F; --perigo: #FBE7E9; --perigo-t: #A5121E;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.45 Figtree, system-ui, sans-serif; overscroll-behavior-y: none; }
h1, h2 { font-family: 'Bricolage Grotesque', Figtree, sans-serif; font-weight: 700; line-height: 1.15; margin: 0; }
h1 { font-size: 22px; } h2 { font-size: 19px; }
p { margin: 0; }
.carregando { padding: 40px 16px; text-align: center; color: var(--suave); }

button, .botao { font: 600 16px Figtree, system-ui, sans-serif; border: 0; border-radius: 12px; min-height: 48px; padding: 11px 16px; cursor: pointer; background: var(--azul); color: #fff; }
button:active { filter: brightness(.92); }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #6EA0E8; outline-offset: 1px; }
button.sec { background: var(--claro); color: var(--azul); }
button.perigo { background: var(--perigo); color: var(--perigo-t); }
button.icone { background: none; color: inherit; min-height: 44px; min-width: 44px; padding: 8px; font-size: 15px; }

label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 5px; }
label small { font-weight: 400; color: var(--suave); }
input, select, textarea { width: 100%; font: 16px Figtree, system-ui, sans-serif; color: var(--texto); background: #fff; border: 1px solid #C4CDDA; border-radius: 10px; padding: 11px 12px; min-height: 48px; }
textarea { min-height: 110px; resize: vertical; }
input[type=checkbox] { width: 22px; height: 22px; min-height: 0; flex: none; margin: 1px 0 0; accent-color: var(--azul); }
.marcar { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }

.topo { position: sticky; top: 0; z-index: 5; background: var(--azul); color: #fff; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 8px; min-height: 60px; }
.topo h1 { flex: 1; font-size: 19px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo .icone { color: #fff; }
.conteudo { max-width: 720px; margin: 0 auto; padding: 14px 16px 110px; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.suave { color: var(--suave); font-size: 14px; }

.login { min-height: 100dvh; display: grid; place-items: center; padding: 20px 16px; background: linear-gradient(180deg, var(--azul) 0 34%, var(--fundo) 34%); }
.login form { width: min(100%, 400px); background: #fff; border-radius: 18px; padding: 22px 20px; box-shadow: 0 10px 30px rgb(16 53 103 / .18); }
.login button { width: 100%; margin-top: 18px; }
.login .erro { margin-top: 12px; }

.busca { display: flex; gap: 8px; }
.busca input { flex: 1; min-width: 0; }
.filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 12px; }
.contagem { margin: 0 0 8px; }
.lista { display: grid; gap: 8px; }
.item { display: grid; grid-template-columns: 66px 1fr; gap: 12px; width: 100%; text-align: left; align-items: center; background: #fff; color: var(--texto); border: 1px solid var(--linha); border-radius: 12px; padding: 8px 12px 8px 8px; font-weight: 400; }
.item img { width: 66px; height: 66px; object-fit: contain; border-radius: 8px; background: #fff; display: block; }
.item .nome { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.item .linha2 { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 3px; font-size: 14px; }
.item .preco { color: var(--azul); font-weight: 700; }
.selo { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 1px 6px; background: var(--perigo); color: var(--perigo-t); }
.selo.rem { background: var(--alerta); color: #7A5A00; }
.flutuante { position: fixed; right: max(16px, calc(50% - 344px)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 6; box-shadow: 0 6px 18px rgb(16 53 103 / .35); border-radius: 999px; padding: 12px 22px; }
.mais { width: 100%; margin-top: 10px; }

.foto-atual { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; }
.foto-atual .quadro { width: 112px; height: 112px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; display: grid; place-items: center; overflow: hidden; color: var(--suave); font-size: 13px; text-align: center; padding: 4px; }
.foto-atual img { width: 100%; height: 100%; object-fit: contain; display: block; }
.foto-botoes { display: grid; gap: 8px; }
.linha-botao { display: flex; gap: 8px; }
.linha-botao input { flex: 1; min-width: 0; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acoes { display: grid; gap: 8px; margin-top: 16px; }
.aviso-caixa { border-radius: 12px; padding: 10px 12px; font-size: 14px; margin: 10px 0; background: var(--alerta); border: 1px solid var(--alerta-b); }
.aviso-caixa.erro { background: var(--perigo); border-color: #F1C2C6; color: var(--perigo-t); }
.aviso-caixa.ok { background: #E4F5EC; border-color: #B5E0C8; color: #0F5C36; }

.grade-fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
@media (min-width: 620px) { .grade-fotos { grid-template-columns: repeat(3, 1fr); } }
.opcao-foto { display: block; width: 100%; padding: 8px; background: #fff; color: var(--texto); border: 1px solid var(--linha); border-radius: 12px; text-align: left; font-weight: 400; font-size: 13px; line-height: 1.25; }
.opcao-foto img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; margin-bottom: 6px; background: #fff; }
.opcao-foto b { display: block; color: var(--azul); margin-bottom: 2px; }

.corte { width: min(100%, 460px); margin: 0 auto; }
.corte canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--linha); background: #fff; touch-action: none; cursor: grab; }
input[type=range] { min-height: 32px; padding: 0; border: 0; background: none; accent-color: var(--azul); }

.camera video { width: 100%; border-radius: 12px; background: #000; display: block; max-height: 60vh; object-fit: cover; }
dialog { border: 0; border-radius: 16px; padding: 18px; width: min(calc(100% - 32px), 460px); color: var(--texto); }
dialog::backdrop { background: rgb(10 20 40 / .55); }
dialog h2 { margin-bottom: 8px; }
dialog .acoes { margin-top: 14px; }

.hist { padding: 10px 0; border-bottom: 1px solid var(--linha); }
.hist:last-child { border-bottom: 0; }
.hist .acao { font-weight: 600; }
.hist button { margin-top: 6px; min-height: 40px; padding: 7px 12px; font-size: 14px; }

#aviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px)); z-index: 30; background: #17202E; color: #fff; padding: 10px 16px; border-radius: 12px; width: max-content; max-width: calc(100% - 32px); text-align: center; font-weight: 500; box-shadow: 0 6px 20px rgb(0 0 0 / .3); }
@media (prefers-reduced-motion: no-preference) { .item, button { transition: filter .1s; } }