/* App do motorista: câmera em tela cheia, seletor PROCEDA, check-in/comprovante e o shell do PWA */

/* ---------- câmera ao vivo ---------- */
.cam-veu { position: fixed; inset: 0; z-index: 200; background: #000; color: #f1ece9; display: flex; flex-direction: column; }
.cam-veu[hidden] { display: none; }
.cam-top { display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
.cam-top b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.cam-top .tiny { color: rgba(241, 236, 233, .65); margin-top: 2px; }
.cam-top .btn { color: #f1ece9; }
.cam-area { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.cam-area video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-moldura { position: absolute; inset: 12% 8%; outline: 1px solid rgba(241, 236, 233, .55); box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); pointer-events: none; }
.cam-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 32px; font-size: 14px; line-height: 1.5; background: #000; }
.cam-msg[hidden] { display: none; }
.cam-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.cam-foot .btn { justify-self: start; background: rgba(241, 236, 233, .1); border-color: rgba(241, 236, 233, .25); color: #f1ece9; }
.cam-disparo { width: 74px; height: 74px; border-radius: 50%; border: 4px solid #f1ece9; background: rgba(241, 236, 233, .9); box-shadow: inset 0 0 0 4px #000; cursor: pointer; transition: transform .12s; }
.cam-disparo:active { transform: scale(.92); }
.cam-disparo:disabled { opacity: .35; }
.cam-disparo[hidden] { display: none; }

/* ---------- foto do canhoto / ocorrência ---------- */
.foto-box.tem { border-style: solid; cursor: pointer; }
.foto-trocar { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; background: rgba(10, 9, 8, .78); color: #f1ece9; border-radius: 2px; }
.foto-box:focus-visible { outline: 2px solid var(--entregas); outline-offset: 2px; }

/* ---------- check-in ---------- */
.checkin-tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--info-ink); background: var(--info-soft); padding: 2px 6px; border-radius: 2px; margin-top: 4px; }
.checkin-tag svg { width: 12px; height: 12px; }
.comp { border: 1px solid var(--line); background: var(--surface); border-radius: 2px; }
.comp-linha { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 12.5px; color: var(--text-2); }
.comp-linha + .comp-linha { border-top: 1px solid var(--line); }
.comp-linha b { color: var(--text); font-weight: 500; }
.comp-linha svg { flex: none; color: var(--text-3); }
.warn-ink, .comp-linha b.warn-ink { color: var(--warn-ink); }

/* ---------- seletor PROCEDA ---------- */
.proc-busca { position: relative; margin-bottom: 8px; }
.proc-busca .input { padding-left: 36px; height: 44px; font-size: 15px; width: 100%; }
.proc-lupa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); display: grid; }
.proc-lista { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
.proc-grupo { position: sticky; top: 0; z-index: 1; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); background: var(--surface-2); padding: 7px 14px; border-bottom: 1px solid var(--line); }
.proc-item { padding: 11px 14px; min-height: 48px; }
.proc-item.sel { background: color-mix(in srgb, var(--entregas) 14%, transparent); }
.proc-item.sel svg { color: var(--entregas); }
.proc-cod { flex: none; min-width: 32px; height: 26px; display: grid; place-items: center; font-size: 12px; font-weight: 500; background: var(--surface-3); color: var(--text); border-radius: 2px; }
.proc-escolhido .proc-cod, .proc-item.sel .proc-cod { background: var(--entregas); color: #04131c; }
.proc-vazio { padding: 18px 14px; font-size: 13px; color: var(--text-3); text-align: center; }

/* ---------- shell do app instalável (/app-motorista/) ---------- */
.pwa { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.pwa-corpo { flex: 1; width: 100%; max-width: 460px; margin: 0 auto; padding: 28px 16px 24px; display: flex; flex-direction: column; gap: 18px; }
.pwa-corpo > * { animation: rise .34s var(--ease) both; }
.pwa-marca { display: flex; align-items: center; gap: 12px; }
.pwa-marca img { width: 48px; height: 48px; border-radius: 10px; flex: none; }
.pwa-marca b { font-size: 19px; font-weight: 600; letter-spacing: -.03em; display: block; }
.pwa-marca span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.pwa h1 { font-size: 26px; font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
.pwa p.lead { color: var(--text-2); font-size: 15px; line-height: 1.5; }
.pwa .btn.grande { height: 52px; font-size: 16px; width: 100%; justify-content: center; }
.pwa .btn.pack { background: var(--entregas); border-color: var(--entregas); color: #04131c; }
.pwa .btn.pack:hover { filter: brightness(1.06); }
.pwa-passos { border: 1px solid var(--line); background: var(--surface); border-radius: 2px; }
.pwa-passo { display: flex; gap: 12px; padding: 13px 14px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.pwa-passo + .pwa-passo { border-top: 1px solid var(--line); }
.pwa-passo .n { width: 24px; height: 24px; border-radius: 2px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); font-family: var(--mono); font-size: 11.5px; flex: none; }
.pwa-passo svg { width: 16px; height: 16px; vertical-align: -3px; }
.pwa-perm { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 2px; }
.pwa-perm + .pwa-perm { margin-top: -8px; }
.pwa-perm .ico-box { flex: none; }
.pwa-perm b { display: block; font-size: 15px; font-weight: 500; }
.pwa-perm p { font-size: 13px; color: var(--text-3); margin-top: 2px; line-height: 1.45; }
.pwa-perm .estado { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; display: inline-block; }
.pwa-perm .estado.ok { color: var(--ok-ink); } .pwa-perm .estado.bad { color: var(--bad-ink); } .pwa-perm .estado.neutro { color: var(--text-3); }
.pwa-form { display: flex; flex-direction: column; gap: 14px; }
.pwa-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
.pwa-form .input { height: 54px; font-size: 22px; font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.pwa-rodape { text-align: center; font-size: 12px; color: var(--text-3); padding: 8px 16px 18px; }
.pwa-rodape a { color: var(--text-2); }
.pwa-link { background: none; border: 0; color: var(--text-2); text-decoration: underline; font-size: 13.5px; padding: 6px; cursor: pointer; align-self: center; }
/* o app instalado ocupa a tela toda; .mobile-full já trata o entalhe no topo e no rodapé */
.pwa-app .mobile-full { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* ---------- testadores e acessos (gestão) ---------- */
.qr-caixa { background: #fff; padding: 12px; display: inline-grid; border-radius: 2px; }
.qr-caixa svg { width: 180px; height: 180px; display: block; }
/* linha do testador: em tela estreita os botões descem para baixo do nome */
.item.testador { flex-wrap: wrap; }
.item.testador > .grow { flex: 1 1 180px; }
.testador-acoes { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.codigo-acesso { font-family: var(--mono); font-size: 18px; font-weight: 500; letter-spacing: .18em; }
.proc-entrega { flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); border-radius: 2px; padding: 2px 5px; }