:root {
    --azul: #14213d;
    --azul-2: #22335c;
    --ambar: #fca311;
    --fundo: #eef1f6;
    --cartao: #ffffff;
    --texto: #16181d;
    --suave: #667085;
    --borda: #d7dce5;
    --ok: #12a150;
    --ok-fundo: #e5f7ec;
    --erro: #d92d20;
    --erro-fundo: #fdecea;
    --aviso: #b54708;
    --aviso-fundo: #fff4e0;
    --raio: 14px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fundo); color: var(--texto); font-size: 16px; line-height: 1.4; }
a { color: var(--azul); }
h1, h2, h3 { margin: 0 0 12px; line-height: 1.2; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }

/* ---------- Barra superior ---------- */
.barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--azul); color: #fff; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.2rem; letter-spacing: .01em; }
.marca-bip { width: 26px; height: 20px; border-radius: 4px; background:
    linear-gradient(90deg, var(--ambar) 0 3px, transparent 3px 5px, var(--ambar) 5px 6px, transparent 6px 8px, var(--ambar) 8px 11px, transparent 11px 13px, var(--ambar) 13px 14px, transparent 14px 16px, var(--ambar) 16px 19px, transparent 19px 21px, var(--ambar) 21px 22px, transparent 22px 23px, var(--ambar) 23px 26px); }
.marca-bip.grande { width: 52px; height: 40px; background-size: 100% 100%; transform: scaleX(1); filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.barra nav { display: flex; gap: 4px; flex-wrap: wrap; }
.barra nav a { color: #dfe5f2; text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 600; }
.barra nav a:hover, .barra nav a:focus-visible { background: var(--azul-2); color: #fff; }

.conteudo { max-width: 1200px; margin: 0 auto; padding: 16px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }

/* ---------- Componentes ---------- */
.cartao { background: var(--cartao); border-radius: var(--raio); padding: 18px; box-shadow: 0 1px 3px rgba(16,24,40,.08); margin-bottom: 16px; }
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 10px 16px;
    border-radius: 12px; border: 1px solid var(--borda); background: #fff; color: var(--azul); font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.1; text-decoration: none; cursor: pointer;
    transition: background .15s, transform .05s; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.primario { background: var(--ambar); border-color: var(--ambar); color: var(--azul); }
.btn.primario:hover { background: #f59e0b; }
.btn.leve { background: transparent; }
.btn.leve:hover { background: #f2f4f8; }
.btn.ativo { background: var(--azul); color: #fff; border-color: var(--azul); }
.btn.perigo { color: var(--erro); border-color: #f3c1bc; }
.btn.grande { min-height: 54px; font-size: 1.05rem; padding: 12px 22px; }

.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--suave); }
.form input:not([type=checkbox]) { font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.2; color: var(--texto); padding: 12px 14px; min-height: 48px; border-radius: 10px; border: 1px solid var(--borda); background: #fff; width: 100%; }
.form input:focus { outline: 3px solid rgba(252,163,17,.35); border-color: var(--ambar); }
.form input:disabled { background: #f4f5f8; color: #555; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form.linha { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.form.linha label { flex: 1 1 220px; }
.form.linha label.curto { flex: 0 1 150px; }
.form.inline { flex-direction: row; gap: 8px; align-items: center; }
.form.inline input { min-height: 42px; padding: 8px 10px; }
label.check { flex-direction: row !important; align-items: center; gap: 8px; color: var(--texto); }
label.check input { width: 20px; height: 20px; }

.alerta { padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; font-weight: 600; }
.alerta.erro { background: var(--erro-fundo); color: var(--erro); }
.alerta.ok { background: var(--ok-fundo); color: var(--ok); }
.dica { color: var(--suave); font-size: .9rem; margin: 10px 0 0; }
.vazio { color: var(--suave); text-align: center; padding: 18px 0; }
.selo { font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.selo.aberto { background: #e0f2fe; color: #075985; }
.selo.fechado { background: #ecfdf3; color: #027a48; }

/* ---------- Login ---------- */
.tela-login { background: radial-gradient(1200px 600px at 50% -10%, #2b3f6e 0, var(--azul) 60%); min-height: 100vh; }
.tela-login .conteudo { display: grid; place-items: center; min-height: 100vh; }
.login-caixa { width: min(400px, 100%); background: #fff; border-radius: 20px; padding: 28px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.login-marca { display: flex; align-items: center; gap: 12px; font-size: 2rem; font-weight: 800; color: var(--azul); justify-content: center; }
.login-sub { text-align: center; color: var(--suave); margin: 6px 0 20px; }

/* ---------- Lista de romaneios ---------- */
.cab-lista { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cab-lista h2 { margin: 0; }
.filtro { display: flex; gap: 8px; }
.filtro input, #busca { font: inherit; padding: 8px 10px; min-height: 42px; border-radius: 10px; border: 1px solid var(--borda); }
.lista-romaneios { list-style: none; margin: 0; padding: 0; }
.lista-romaneios li + li { border-top: 1px solid #eef0f4; }
.lista-romaneios a { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; padding: 14px 6px; text-decoration: none; color: inherit; border-radius: 10px; }
.lista-romaneios a:hover { background: #f6f8fb; }
.rom-num { font-weight: 800; color: var(--suave); min-width: 3ch; }
.rom-info { display: flex; flex-direction: column; min-width: 0; }
.rom-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rom-info small { color: var(--suave); }
.rom-total { text-align: right; color: var(--suave); white-space: nowrap; }
.rom-total b { font-size: 1.3rem; color: var(--texto); }

/* ---------- Usuários ---------- */
.lista-usuarios { list-style: none; padding: 0; margin: 0; }
.lista-usuarios li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid #eef0f4; }
.lista-usuarios li > div { display: flex; flex-direction: column; flex: 1 1 200px; }
.lista-usuarios small { color: var(--suave); }
.lista-usuarios .inativo { opacity: .55; }

/* ---------- Tela de bipagem ---------- */
.tela-bipagem .conteudo { display: grid; gap: 16px; grid-template-columns: 1fr; }
.tela-bipagem .conteudo > .cartao { margin: 0; }
.cab-romaneio { background: var(--cartao); border-radius: var(--raio); padding: 14px 18px; box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.titulo-rom { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.titulo-rom h1 { margin: 0; }
.titulo-rom small { color: var(--suave); }
.titulo-rom .selo { margin-left: auto; }
.voltar { font-size: 2rem; line-height: 1; text-decoration: none; color: var(--azul); padding: 0 8px 4px; border-radius: 8px; }
.voltar:hover { background: #f2f4f8; }
.cab-campos { align-items: center; }
.salvo { color: var(--ok); font-weight: 600; font-size: .9rem; min-width: 70px; align-self: flex-end; padding-bottom: 14px; }

.painel-bip { background: var(--azul); color: #fff; border-radius: var(--raio); padding: 18px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.contador { display: flex; align-items: baseline; gap: 10px; justify-content: center; }
.contador-num { font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ambar); }
.contador-rot { font-size: 1.2rem; color: #c6cfe2; }
.form-bip { display: flex; gap: 10px; }
.campo-codigo { flex: 1; min-width: 0; font: 700 1.35rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; padding: 16px; border-radius: 12px; border: 3px solid transparent; background: #fff; color: var(--texto); letter-spacing: .03em; }
.campo-codigo::placeholder { font-family: system-ui, sans-serif; font-weight: 500; font-size: 1.05rem; letter-spacing: 0; color: #98a2b3; }
.campo-codigo:focus { outline: none; border-color: var(--ambar); box-shadow: 0 0 0 4px rgba(252,163,17,.3); }
.form-bip .btn { min-width: 76px; font-size: 1.1rem; }
.acoes-bip { display: flex; gap: 8px; flex-wrap: wrap; }
.acoes-bip .btn { color: #fff; border-color: rgba(255,255,255,.25); flex: 1 1 auto; }
.acoes-bip .btn.leve:hover { background: var(--azul-2); }
.acoes-bip .btn.ativo { background: #fff; color: var(--azul); }
.aviso-fechado { margin: 0; text-align: center; color: #c6cfe2; }

.feedback { min-height: 52px; border-radius: 12px; padding: 14px 16px; font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; background: rgba(255,255,255,.06); color: #c6cfe2; overflow-wrap: anywhere; }
.feedback:empty::before { content: "Aguardando leitura…"; font-weight: 500; opacity: .7; }
.feedback.ok { background: var(--ok); color: #fff; }
.feedback.erro { background: var(--erro); color: #fff; font-size: 1.15rem; }
.feedback.aviso { background: var(--ambar); color: var(--azul); }
.painel-bip.flash-ok { animation: flashOk .45s ease-out; }
.painel-bip.flash-erro { animation: flashErro .8s ease-out; }
.painel-bip.flash-aviso { animation: flashAviso .8s ease-out; }
@keyframes flashOk { from { box-shadow: inset 0 0 0 6px var(--ok); } to { box-shadow: inset 0 0 0 0 transparent; } }
@keyframes flashErro { 0%, 40% { box-shadow: inset 0 0 0 10px var(--erro); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
@keyframes flashAviso { 0%, 40% { box-shadow: inset 0 0 0 8px var(--ambar); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
.fila { background: var(--aviso-fundo); color: var(--aviso); border-radius: 10px; padding: 10px 12px; font-weight: 600; font-size: .92rem; }

/* Câmera em tela cheia */
.camera-area { position: fixed; inset: 0; z-index: 40; background: #000; display: flex; flex-direction: column; color: #fff;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); gap: 10px; }
body.com-camera { overflow: hidden; }
.cam-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cam-contador { font-size: 1.1rem; color: #c6cfe2; }
.cam-contador b { font-size: 2.6rem; color: var(--ambar); font-variant-numeric: tabular-nums; margin-right: 4px; }
.cam-botoes { display: flex; gap: 8px; }
.cam-btn { min-height: 52px; font-size: 1.05rem; }
.cam-btn:not(.primario) { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
.cam-btn.ativo { background: #fff; color: var(--azul); }
#leitor-camera { flex: 1; min-height: 0; width: 100%; border-radius: 12px; overflow: hidden; background: #111; position: relative; border: none !important; }
#leitor-camera video { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
#leitor-camera img[alt="Info icon"], #leitor-camera img[alt="Camera based scan"] { display: none !important; }
.cam-msg { min-height: 60px; border-radius: 12px; padding: 14px 16px; font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; text-align: center;
    background: rgba(255,255,255,.1); overflow-wrap: anywhere; }
.cam-msg.ok { background: var(--ok); }
.cam-msg.erro { background: var(--erro); font-size: 1.3rem; }
.cam-msg.aviso { background: var(--ambar); color: var(--azul); }
.camera-area.flash-ok { animation: flashOk .45s ease-out; }
.camera-area.flash-erro { animation: flashErro .8s ease-out; }
.camera-area.flash-aviso { animation: flashAviso .8s ease-out; }
@media (orientation: landscape) and (max-height: 600px) {
    .camera-area { flex-direction: row; flex-wrap: wrap; }
    .cam-topo { width: 100%; }
    #leitor-camera { flex: 1 1 60%; height: calc(100% - 70px); }
    .cam-msg { flex: 1 1 30%; align-self: stretch; }
}

.acoes-romaneio { display: flex; flex-wrap: wrap; gap: 8px; }
.acoes-romaneio .btn.grande { flex: 1 1 100%; }

.lista-pacotes { list-style: none; margin: 0; padding: 0; counter-reset: pac; max-height: 60vh; overflow-y: auto; }
.lista-pacotes li { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid #eef0f4; }
.lista-pacotes li.pendente { opacity: .6; }
.lista-pacotes li.destaque { animation: destaque 1.6s ease-out; }
@keyframes destaque { 0%, 50% { background: var(--erro-fundo); } 100% { background: transparent; } }
.pac-codigo { font: 700 1.02rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; flex: 1; word-break: break-all; }
.pac-meta { color: var(--suave); font-size: .85rem; white-space: nowrap; }
.pac-remover { appearance: none; border: 0; background: transparent; color: #98a2b3; font-size: 1.5rem; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; }
.pac-remover:hover { background: var(--erro-fundo); color: var(--erro); }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(10,15,30,.55); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal[hidden] { display: none; }
.modal-caixa { background: #fff; border-radius: 16px; padding: 22px; width: min(420px, 100%); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.modal-caixa p { color: var(--suave); word-break: break-word; }
.modal-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ---------- Tablet deitado / computador: duas colunas ---------- */
@media (min-width: 900px) {
    .tela-bipagem .conteudo { grid-template-columns: minmax(380px, 1.1fr) 1fr; grid-template-rows: auto auto auto 1fr; align-items: start; }
    .cab-romaneio { grid-column: 1 / -1; }
    .painel-bip { grid-column: 1; }
    .acoes-romaneio { grid-column: 1; }
    .tela-bipagem .conteudo > .cartao { grid-column: 2; grid-row: 2 / -1; position: sticky; top: 76px; }
    .lista-pacotes { max-height: calc(100vh - 200px); }
}

/* ---------- Celular ---------- */
@media (max-width: 560px) {
    .conteudo { padding: 10px; }
    .cartao, .cab-romaneio, .painel-bip { padding: 14px; }
    .lista-romaneios a { grid-template-columns: 1fr auto; gap: 4px 10px; }
    .rom-num { display: none; }
    .rom-total { grid-row: 1; grid-column: 2; }
    .lista-romaneios .selo { grid-column: 2; justify-self: end; }
    .barra nav a { padding: 8px; }
    .acoes-romaneio .btn:not(.grande) { flex: 1 1 40%; }
    .campo-codigo { font-size: 1.15rem; padding: 14px 12px; }
}