/* Inventário Amyris — protótipo visual
   Paleta e componentes no mesmo padrão do HUB Amyris (tema Amyris_Executive_Dark).
   Cópia independente: nada aqui altera o HUB. */

:root {
  --fundo: #0F0C1A;
  --fundo-externo: #0B0914;
  --painel: #1A1630;
  --painel-alt: #1D1935;
  --elevado: #221E3A;
  --borda: #2E2850;
  --texto: #F4F2FA;
  --rotulo: #D6D1E4;
  --apoio: #C4BED6;
  --nota: #ADA7C2;
  --roxo: #8B5CF6;
  --roxo-inst: #410099;
  --roxo-claro: #C4B5FD;
  --verde: #2FBF71;
  --amarelo: #F2B33D;
  --vermelho: #E5484D;
  --azul: #38BDF8;
  --raio: 14px;
  --menu-largura: 264px;
  --faixa: 46px;
  --fonte: "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--roxo-claro); outline-offset: 2px; border-radius: 6px; }
img[src$="gps-branco.png"] { transform: scale(1.5); transform-origin: center; }

.selo { display: inline-block; padding: 5px 12px; border: 1px solid rgba(196,181,253,.35); border-radius: 999px; background: rgba(139,92,246,.12); color: var(--roxo-claro); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.selo--alerta { border-color: rgba(242,179,61,.4); background: rgba(242,179,61,.1); color: #F6CB78; letter-spacing: .08em; }

/* ---------- Faixa do protótipo ---------- */
.proto-faixa { position: sticky; top: 0; z-index: 60; height: var(--faixa); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; background: var(--fundo-externo); border-bottom: 1px solid var(--borda); }
.alternador { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--painel); border: 1px solid var(--borda); }
.alternador button { border: 0; background: none; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--apoio); }
.alternador button.ativo { background: linear-gradient(90deg, var(--roxo-inst), var(--roxo)); color: #fff; }

/* ---------- Estrutura (igual ao HUB) ---------- */
.app { display: flex; min-height: calc(100vh - var(--faixa)); }
.menu { position: fixed; top: var(--faixa); bottom: 0; left: 0; width: var(--menu-largura); display: flex; flex-direction: column; padding: 24px 16px 18px; background: linear-gradient(180deg, rgba(65,0,153,.55), rgba(65,0,153,0) 260px), var(--fundo-externo); border-right: 1px solid var(--borda); z-index: 30; overflow-y: auto; }
.menu__marca { padding: 0 12px 22px; border-bottom: 1px solid var(--borda); }
.menu__marca img { width: 140px; height: auto; }
.menu__marca span { display: block; margin-top: 10px; color: var(--roxo-claro); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.menu__nav { padding-top: 12px; flex: 1; }
.menu__grupo { margin: 18px 12px 6px; color: var(--nota); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.menu__item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; margin-bottom: 2px; border: 0; border-radius: 10px; background: none; color: var(--rotulo); font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; }
.menu__item svg { flex: 0 0 19px; width: 19px; height: 19px; }
.menu__item:hover { background: rgba(139,92,246,.1); color: var(--texto); }
.menu__item.ativo { background: linear-gradient(90deg, rgba(139,92,246,.32), rgba(139,92,246,.08)); color: var(--texto); font-weight: 600; }
.menu__item.ativo::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--roxo); }
.menu__badge { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(242,179,61,.16); color: #F6CB78; font-size: 11.5px; font-weight: 700; text-align: center; }
.menu__rodape { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--borda); }
.usuario { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--painel); border: 1px solid var(--borda); }
.usuario__avatar { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--roxo-inst), var(--roxo)); font-size: 12.5px; font-weight: 700; }
.usuario strong { display: block; font-size: 13.5px; }
.usuario small { color: var(--nota); font-size: 12px; }
.menu__operacao { text-align: center; }
.menu__operacao span { color: var(--nota); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.menu__operacao div { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 8px; }
.menu__operacao img { height: 24px; width: auto; opacity: .85; }

.principal { flex: 1; min-width: 0; margin-left: var(--menu-largura); display: flex; flex-direction: column; }
.topo { position: sticky; top: var(--faixa); z-index: 20; display: flex; align-items: center; gap: 18px; padding: 12px 28px; background: rgba(15,12,26,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); }
.topo__apuracao small { display: block; color: var(--nota); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.topo__apuracao strong { font-size: 16px; }
.ao-vivo { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(47,191,113,.1); border: 1px solid rgba(47,191,113,.3); color: #7EDCA8; font-size: 12px; font-weight: 600; }
.ao-vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); animation: pulsar 1.6s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .35; } }
.topo__inhaus { margin-left: auto; height: 28px; width: auto; }
.btn-icone { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--borda); border-radius: 10px; background: var(--painel); }
.btn-icone svg { width: 20px; height: 20px; }
.btn-menu { display: none; }
.conteudo { flex: 1; padding: 26px 28px 40px; outline: 0; }

/* ---------- Componentes ---------- */
.pagina-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.trilha { color: var(--nota); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pagina-cabecalho h1 { margin: 2px 0 4px; font-size: 24px; font-weight: 700; }
.pagina-cabecalho p { margin: 0; color: var(--apoio); max-width: 760px; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--borda); border-radius: 10px; background: var(--painel); color: var(--texto); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.btn svg { width: 17px; height: 17px; }
.btn:hover { border-color: var(--roxo); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--pequeno { padding: 6px 10px; font-size: 12.5px; }
.btn-primario { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; border: 0; border-radius: 10px; background: linear-gradient(90deg, var(--roxo-inst), var(--roxo)); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px -12px rgba(139,92,246,.7); }
.btn-primario svg { width: 18px; height: 18px; }
.btn-primario:hover { filter: brightness(1.08); }
.btn-primario:disabled { opacity: .45; cursor: not-allowed; filter: none; }

.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi { position: relative; padding: 14px 16px; border-radius: 12px; background: var(--painel); border: 1px solid var(--borda); overflow: hidden; }
.kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cor, var(--roxo)); }
.kpi small { display: block; color: var(--rotulo); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.kpi strong { display: block; margin-top: 6px; font-size: 28px; font-weight: 600; line-height: 1.1; }
.kpi span { color: var(--nota); font-size: 12px; }

.grade-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.grade-2--igual { grid-template-columns: 1fr 1fr; }
.caixa { padding: 20px; border: 1px solid var(--borda); border-radius: 16px; background: var(--painel); min-width: 0; }
.caixa + .caixa { margin-top: 18px; }
.caixa h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.caixa > p.sub { margin: 0 0 16px; color: var(--nota); font-size: 13px; }

.progresso { height: 10px; border-radius: 999px; background: var(--borda); overflow: hidden; display: flex; }
.progresso i { display: block; height: 100%; }
.progresso__legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; color: var(--apoio); font-size: 12.5px; }
.progresso__legenda span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 3px; background: var(--c); }

.pessoa { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.pessoa:last-child { border-bottom: 0; }
.pessoa strong { display: block; font-size: 14px; }
.pessoa small { color: var(--nota); font-size: 12px; }
.pessoa .progresso { height: 6px; margin-top: 6px; }
.pessoa b { font-size: 18px; }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; }
.feed li:last-child { border-bottom: 0; }
.feed time { color: var(--nota); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.feed small { display: block; color: var(--nota); font-size: 12px; }
.feed li.novo { animation: brilho 2.4s ease-out; }
@keyframes brilho { from { background: rgba(139,92,246,.25); } to { background: transparent; } }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filtros input, .filtros select, .campo input, .campo select, .campo textarea { padding: 9px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo-externo); color: var(--texto); font: inherit; font-size: 13.5px; }
.filtros input[type=search] { min-width: 240px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 6px 12px; border: 1px solid var(--borda); border-radius: 999px; background: none; color: var(--apoio); font-size: 12.5px; font-weight: 600; }
.chip.ativo { border-color: var(--roxo); background: rgba(139,92,246,.18); color: var(--texto); }

.tabela-caixa { border: 1px solid var(--borda); border-radius: 16px; background: var(--painel); overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; min-width: 860px; }
.tabela th { padding: 11px 14px; text-align: left; color: var(--rotulo); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--borda); background: var(--painel-alt); white-space: nowrap; }
.tabela td { padding: 11px 14px; border-bottom: 1px solid var(--borda); font-size: 13.5px; vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: rgba(139,92,246,.05); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela td small { display: block; color: var(--nota); font-size: 12px; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px; }
.dif-pos { color: #7EDCA8; font-weight: 700; }
.dif-neg { color: #F59EA1; font-weight: 700; }
.tabela tr.linha-alerta td { background: rgba(242,179,61,.06); }

.etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.etiqueta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.et-ok { background: rgba(47,191,113,.13); color: #7EDCA8; }
.et-pos { background: rgba(56,189,248,.13); color: #8BD6F8; }
.et-neg { background: rgba(229,72,77,.13); color: #F59EA1; }
.et-pend { background: rgba(173,167,194,.12); color: var(--apoio); }
.et-rec { background: rgba(242,179,61,.14); color: #F6CB78; }
.et-roxo { background: rgba(139,92,246,.18); color: var(--roxo-claro); }

.aviso { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; margin-bottom: 14px; }
.aviso svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; }
.aviso--alerta { border: 1px solid rgba(242,179,61,.4); background: rgba(242,179,61,.07); color: #F6CB78; }
.aviso--info { border: 1px solid rgba(139,92,246,.4); background: rgba(139,92,246,.08); color: var(--roxo-claro); }
.aviso--ok { border: 1px solid rgba(47,191,113,.35); background: rgba(47,191,113,.08); color: #7EDCA8; }
.aviso strong { color: var(--texto); }

/* Importação */
.passos { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.passo { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--painel); border: 1px solid var(--borda); color: var(--nota); font-size: 13px; font-weight: 600; }
.passo b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--borda); color: var(--texto); font-size: 12.5px; }
.passo.feito { color: var(--apoio); }
.passo.feito b { background: var(--verde); }
.passo.atual { color: var(--texto); border-color: var(--roxo); }
.passo.atual b { background: var(--roxo); }
.soltar { display: grid; place-items: center; gap: 6px; padding: 26px; border: 1.5px dashed rgba(196,181,253,.4); border-radius: 14px; background: rgba(139,92,246,.05); text-align: center; color: var(--apoio); }
.soltar svg { width: 34px; height: 34px; color: var(--roxo-claro); }
.soltar strong { color: var(--texto); }
.arquivo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--painel-alt); border: 1px solid var(--borda); margin-top: 14px; }
.arquivo svg { width: 26px; height: 26px; color: #7EDCA8; }
.arquivo small { display: block; color: var(--nota); font-size: 12px; }
.abas-lista { display: grid; gap: 8px; margin-top: 14px; }
.aba-op { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borda); background: var(--fundo-externo); cursor: pointer; }
.aba-op input { accent-color: var(--roxo); width: 18px; height: 18px; }
.aba-op strong { font-size: 14.5px; }
.aba-op small { color: var(--nota); font-size: 12px; display: block; }
.aba-op .etiqueta { margin-left: auto; }
.aba-op.sel { border-color: var(--roxo); background: rgba(139,92,246,.1); }
.aba-op.desab { opacity: .55; cursor: default; }
.dados { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.dado { padding: 12px 14px; border-radius: 12px; background: var(--painel-alt); border: 1px solid var(--borda); }
.dado small { display: block; color: var(--rotulo); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.dado strong { display: block; margin-top: 3px; font-size: 15px; }
.atrib { display: grid; gap: 10px; }
.atrib label { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 12px; }
.atrib input { accent-color: var(--roxo); width: 18px; height: 18px; }
.atrib small { color: var(--nota); display: block; font-size: 12px; }

/* Linha do tempo (recontagem / histórico do item) */
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 4px; }
.linha-tempo li { position: relative; padding: 0 0 18px 26px; }
.linha-tempo li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--roxo)); box-shadow: 0 0 0 4px rgba(139,92,246,.12); }
.linha-tempo li::after { content: ""; position: absolute; left: 5px; top: 20px; bottom: 2px; width: 2px; background: var(--borda); }
.linha-tempo li:last-child::after { display: none; }
.linha-tempo strong { display: block; font-size: 14px; }
.linha-tempo small { color: var(--nota); font-size: 12.5px; }
.linha-tempo .qtd { float: right; font-size: 18px; font-weight: 700; }

.cards-ap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card-ap { position: relative; padding: 18px; border-radius: 16px; background: linear-gradient(180deg, var(--elevado), var(--painel)); border: 1px solid var(--borda); overflow: hidden; }
.card-ap::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--cor, var(--roxo)); }
.card-ap h3 { margin: 6px 0 2px; font-size: 18px; }
.card-ap p { margin: 0 0 12px; color: var(--nota); font-size: 12.5px; }
.card-ap .linha { display: flex; justify-content: space-between; font-size: 13px; color: var(--apoio); padding: 4px 0; }
.card-ap .linha b { color: var(--texto); }
.card-ap footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); }

.assinatura-img { display: block; width: 100%; max-width: 260px; height: 70px; border-radius: 10px; background: #F4F2FA; }
.relatorios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.relatorio { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; background: var(--painel); border: 1px solid var(--borda); }
.relatorio .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(139,92,246,.16); color: var(--roxo-claro); }
.relatorio .ic svg { width: 22px; height: 22px; }
.relatorio h3 { margin: 0; font-size: 15.5px; }
.relatorio p { margin: 0; color: var(--apoio); font-size: 13px; flex: 1; }
.relatorio .formato { color: var(--nota); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.amostra { overflow-x: auto; border-radius: 10px; border: 1px solid #c9c9c9; background: #fff; color: #111; font-family: Calibri, "Segoe UI", sans-serif; font-size: 12.5px; }
.amostra table { border-collapse: collapse; width: 100%; min-width: 860px; }
.amostra td, .amostra th { border: 1px solid #c9c9c9; padding: 3px 8px; white-space: nowrap; }
.amostra th { background: #f2f2f2; font-weight: 700; }
.amostra .tit { font-size: 18px; font-weight: 700; text-align: left; border: 0; padding: 8px; }
.amostra .novo { background: #EDE7FF; }
.amostra .rn { color: #888; background: #f7f7f7; text-align: center; width: 30px; }

/* Diálogo */
.dialogo { width: min(560px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--borda); border-radius: 18px; background: var(--painel); color: var(--texto); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
.dialogo::backdrop { background: rgba(5,4,10,.7); backdrop-filter: blur(3px); }
.dialogo__corpo { padding: 22px 24px; }
.dialogo h2 { margin: 0 0 6px; font-size: 19px; }
.dialogo p { color: var(--apoio); margin: 0 0 14px; font-size: 13.5px; }
.dialogo__acoes { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--borda); background: var(--painel-alt); border-radius: 0 0 18px 18px; }
.campo { display: grid; gap: 6px; margin-bottom: 14px; }
.campo > span { color: var(--rotulo); font-size: 12.5px; font-weight: 600; }
.campo textarea { min-height: 70px; resize: vertical; }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px; background: #13301F; border: 1px solid rgba(47,191,113,.5); color: #B7F0CF; font-weight: 600; box-shadow: 0 16px 40px -10px rgba(0,0,0,.6); }
.toast svg { width: 20px; height: 20px; }
.toast.erro { background: #3A1518; border-color: rgba(229,72,77,.5); color: #F9C1C3; }

/* ================= COLETOR (TABLET) ================= */
.coletor-palco { min-height: calc(100vh - var(--faixa)); display: flex; justify-content: center; align-items: flex-start; gap: 28px; padding: 24px 16px 40px; background: radial-gradient(900px 600px at 50% 0%, rgba(65,0,153,.45), transparent 60%), var(--fundo-externo); }
.tablet { width: 100%; max-width: 820px; min-height: 1060px; display: flex; flex-direction: column; border-radius: 34px; border: 12px solid #05040A; outline: 1px solid #2A2540; background: var(--fundo); overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); position: relative; }
.coletor-legenda { width: 300px; flex: 0 0 300px; position: sticky; top: calc(var(--faixa) + 24px); color: var(--apoio); font-size: 13.5px; }
.coletor-legenda h3 { margin: 0 0 8px; font-size: 15px; color: var(--texto); }
.coletor-legenda ol { margin: 0 0 16px; padding-left: 18px; }
.coletor-legenda li { margin-bottom: 6px; }
.coletor-legenda .caixa { padding: 16px; }

.c-topo { display: flex; align-items: center; gap: 14px; padding: 16px 22px; background: linear-gradient(90deg, var(--roxo-inst), #2A0866); }
.c-topo img { height: 26px; width: auto; }
.c-topo .c-tit { flex: 1; min-width: 0; }
.c-topo small { display: block; color: #E2DAF7; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.c-topo strong { font-size: 18px; }
.c-voltar { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 12px; background: rgba(255,255,255,.12); }
.c-voltar svg { width: 24px; height: 24px; }
.c-online { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #B7F0CF; }
.c-online i { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); }
.c-corpo { flex: 1; padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.c-progresso { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: var(--painel); border: 1px solid var(--borda); }
.c-progresso b { font-size: 30px; line-height: 1; }
.c-progresso span { color: var(--nota); font-size: 14px; }
.c-progresso .progresso { flex: 1; height: 12px; }
.c-abas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.c-abas button { padding: 14px 8px; border: 1px solid var(--borda); border-radius: 14px; background: var(--painel); font-size: 15px; font-weight: 600; color: var(--apoio); }
.c-abas button.ativo { border-color: var(--roxo); background: rgba(139,92,246,.18); color: var(--texto); }
.c-abas button em { font-style: normal; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(242,179,61,.18); color: #F6CB78; font-size: 13px; }

.c-etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.c-etapa { padding: 10px 12px; border-radius: 12px; background: var(--painel); border: 1px solid var(--borda); color: var(--nota); font-size: 13px; font-weight: 600; }
.c-etapa b { display: block; color: var(--apoio); font-size: 15px; }
.c-etapa.atual { border-color: var(--roxo); background: rgba(139,92,246,.14); color: var(--roxo-claro); }
.c-etapa.atual b { color: var(--texto); }
.c-etapa.feita { border-color: rgba(47,191,113,.4); color: #7EDCA8; }
.c-etapa.feita b { color: var(--texto); }

.c-leitor { position: relative; display: grid; place-items: center; height: 300px; border-radius: 20px; overflow: hidden; background: repeating-linear-gradient(135deg, #151125 0 14px, #120F20 14px 28px); border: 1px solid var(--borda); }
.c-leitor .mira { position: relative; width: 190px; height: 190px; }
.c-leitor .mira::before, .c-leitor .mira::after { content: ""; position: absolute; inset: 0; border: 4px solid var(--roxo-claro); border-radius: 18px; clip-path: polygon(0 0, 30% 0, 30% 6%, 6% 6%, 6% 30%, 0 30%, 0 70%, 6% 70%, 6% 94%, 30% 94%, 30% 100%, 70% 100%, 70% 94%, 94% 94%, 94% 70%, 100% 70%, 100% 30%, 94% 30%, 94% 6%, 70% 6%, 70% 0, 100% 0, 100% 100%, 0 100%); }
.c-leitor .linha-scan { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--roxo-claro); box-shadow: 0 0 12px var(--roxo); animation: varrer 2s ease-in-out infinite alternate; }
@keyframes varrer { from { top: 14px; } to { top: 174px; } }
.c-leitor p { position: absolute; bottom: 14px; left: 0; right: 0; margin: 0; text-align: center; color: var(--apoio); font-size: 14px; }
.c-instrucao { text-align: center; }
.c-instrucao h2 { margin: 0 0 4px; font-size: 24px; }
.c-instrucao p { margin: 0; color: var(--apoio); font-size: 15px; }
.c-manual { display: flex; gap: 10px; }
.c-manual input { flex: 1; min-width: 0; padding: 16px; border: 1px solid var(--borda); border-radius: 14px; background: var(--fundo-externo); color: var(--texto); font: inherit; font-size: 17px; }
.c-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 22px; border: 1px solid var(--borda); border-radius: 14px; background: var(--painel); font-size: 17px; font-weight: 600; }
.c-btn svg { width: 22px; height: 22px; }
.c-btn--primario { border: 0; background: linear-gradient(90deg, var(--roxo-inst), var(--roxo)); color: #fff; box-shadow: 0 14px 30px -12px rgba(139,92,246,.8); }
.c-btn--primario:disabled { opacity: .4; box-shadow: none; }
.c-btn--largo { width: 100%; }
.c-simular { padding: 14px; border-radius: 14px; border: 1px dashed rgba(242,179,61,.45); background: rgba(242,179,61,.05); }
.c-simular small { display: block; margin-bottom: 8px; color: #F6CB78; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.c-simular .chips { gap: 8px; }
.c-simular .chip { padding: 9px 14px; font-size: 14px; }

.c-material { padding: 20px; border-radius: 18px; background: linear-gradient(180deg, var(--elevado), var(--painel)); border: 1px solid var(--borda); }
.c-material .sap { color: var(--roxo-claro); font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.c-material h2 { margin: 4px 0 14px; font-size: 22px; line-height: 1.25; }
.c-material .grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.c-material .grade div { padding: 10px 12px; border-radius: 12px; background: var(--fundo-externo); border: 1px solid var(--borda); }
.c-material .grade small { display: block; color: var(--nota); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.c-material .grade strong { font-size: 17px; }
.c-cega { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--nota); font-size: 13px; }
.c-cega svg { width: 18px; height: 18px; }

.c-lotes { display: grid; gap: 10px; }
.c-lote { display: flex; align-items: center; justify-content: space-between; padding: 18px; border-radius: 14px; border: 1px solid var(--borda); background: var(--painel); font-size: 18px; font-weight: 600; text-align: left; }
.c-lote small { color: var(--nota); font-size: 13px; font-weight: 500; }

.c-qtd { display: flex; align-items: center; gap: 12px; }
.c-qtd output { flex: 1; display: block; padding: 14px 18px; border-radius: 16px; border: 2px solid var(--roxo); background: var(--fundo-externo); font-size: 44px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; min-height: 82px; }
.c-qtd span { color: var(--apoio); font-size: 18px; font-weight: 600; min-width: 40px; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.teclado button { height: 70px; border: 1px solid var(--borda); border-radius: 14px; background: var(--painel); font-size: 26px; font-weight: 600; }
.teclado button:active { background: rgba(139,92,246,.25); }
.teclado .tecla-apagar svg { width: 28px; height: 28px; }

.c-lista { display: grid; gap: 8px; }
.c-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--painel); border: 1px solid var(--borda); }
.c-item .pos { min-width: 92px; padding: 6px 10px; border-radius: 10px; background: var(--fundo-externo); color: var(--roxo-claro); font-weight: 700; text-align: center; font-size: 14px; }
.c-item strong { display: block; font-size: 15px; }
.c-item small { color: var(--nota); font-size: 13px; }
.c-item .etiqueta { margin-left: auto; }

.c-rodape { display: flex; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--borda); background: var(--fundo-externo); }
.c-rodape .c-btn { flex: 1; }

.c-cartoes { display: grid; gap: 14px; }
.c-cartao { padding: 20px; border-radius: 18px; background: linear-gradient(180deg, var(--elevado), var(--painel)); border: 1px solid var(--borda); text-align: left; }
.c-cartao h3 { margin: 4px 0; font-size: 22px; }
.c-cartao p { margin: 0 0 12px; color: var(--apoio); }

.c-login { flex: 1; display: grid; place-items: center; padding: 30px; background: radial-gradient(800px 500px at 50% -10%, rgba(65,0,153,.75), transparent 60%), var(--fundo-externo); }
.c-login form { width: 100%; max-width: 440px; display: grid; gap: 16px; text-align: center; }
.c-login img.logo { width: 200px; margin: 0 auto 6px; }
.c-login input { padding: 18px; border: 1px solid var(--borda); border-radius: 14px; background: var(--fundo-externo); color: var(--texto); font: inherit; font-size: 17px; }
.c-login .rodape { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 18px; color: var(--nota); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.c-login .rodape img { height: 26px; width: auto; }

/* Assinatura */
.assinar { display: grid; gap: 14px; }
.assinar .resumo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.assinar canvas { width: 100%; height: 200px; border-radius: 14px; background: #F4F2FA; touch-action: none; cursor: crosshair; }
.assinar .linha-ass { display: flex; justify-content: space-between; align-items: center; color: var(--nota); font-size: 12.5px; }
.dialogo--grande { width: min(680px, calc(100vw - 32px)); }

/* ---------- Roteiro por container ---------- */
.grupo-nome { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.grupo-nome svg { width: 17px; height: 17px; color: var(--roxo-claro); }
.grupo-nome--pend svg { color: var(--amarelo); }
.c-abas--4 { grid-template-columns: repeat(4, 1fr); }
.c-abas--4 button { font-size: 14px; padding: 13px 6px; }
.c-grupos { display: grid; gap: 10px; }
.c-grupo { display: grid; grid-template-columns: 46px 1fr auto auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--borda); background: var(--painel); text-align: left; }
.c-grupo__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(139,92,246,.16); color: var(--roxo-claro); }
.c-grupo__ic svg { width: 24px; height: 24px; }
.c-grupo__txt strong { display: block; font-size: 17px; }
.c-grupo__txt small { color: var(--nota); font-size: 13px; }
.c-grupo__num { text-align: right; }
.c-grupo__num b { display: block; font-size: 24px; line-height: 1; }
.c-grupo__num span { color: var(--nota); font-size: 12.5px; }
.c-grupo--atual { border-color: var(--roxo); box-shadow: 0 0 0 3px rgba(139,92,246,.2); }
.c-grupo--outro { opacity: .55; }
.c-ir { display: grid; justify-items: center; gap: 2px; padding: 18px; border-radius: 20px; text-align: center; background: radial-gradient(500px 200px at 50% 0%, rgba(139,92,246,.45), transparent 70%), linear-gradient(120deg, var(--roxo-inst), #2A0866); border: 1px solid rgba(196,181,253,.3); }
.c-ir small { color: #E2DAF7; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.c-ir__rot { color: var(--roxo-claro); font-size: 15px; font-weight: 600; margin-top: 6px; }
.c-ir__end { font-size: 54px; font-weight: 800; letter-spacing: .02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.c-ir--pend { background: linear-gradient(120deg, #5A3A06, #3A2604); border-color: rgba(242,179,61,.4); }
.c-ir--pend .c-ir__end { font-size: 26px; }
.c-leitor--baixo { height: 190px; }
.c-leitor--baixo .mira { width: 130px; height: 130px; }
@keyframes varrer2 { from { top: 10px; } to { top: 118px; } }
.c-leitor--baixo .linha-scan { animation-name: varrer2; }
.c-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c-proximos { padding: 14px 16px; border-radius: 14px; background: var(--painel); border: 1px solid var(--borda); }
.c-proximos > small { display: block; margin-bottom: 8px; color: var(--nota); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.c-proximos div { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--borda); font-size: 14px; color: var(--apoio); }
.c-proximos div:first-of-type { border-top: 0; }
.c-proximos .pos, .c-item .pos { min-width: 104px; padding: 5px 10px; border-radius: 10px; background: var(--fundo-externo); color: var(--roxo-claro); font-weight: 700; text-align: center; font-size: 14px; }
.pos--pend { color: #F6CB78 !important; }
.c-concluido { display: grid; justify-items: center; gap: 12px; padding: 28px 22px; border-radius: 20px; text-align: center; background: rgba(47,191,113,.08); border: 1px solid rgba(47,191,113,.35); }
.c-concluido > svg { width: 54px; height: 54px; padding: 12px; border-radius: 50%; background: var(--verde); color: #fff; stroke-width: 2.6; }
.c-concluido h2 { margin: 0; font-size: 24px; }
.c-concluido p { margin: 0; color: var(--apoio); }
.c-concluido--alerta { background: rgba(242,179,61,.07); border-color: rgba(242,179,61,.4); }
.c-concluido--alerta > svg { background: var(--amarelo); }
.c-lote--total { border-style: dashed; border-color: rgba(196,181,253,.5); }
.c-lote--total small { text-align: right; }

/* ---------- Rastreabilidade ---------- */
.resp { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 13px; font-weight: 600; margin-right: 6px; }
.resp i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--roxo-inst), var(--roxo)); font-style: normal; font-size: 10px; font-weight: 700; color: #fff; }
.resp--destaque { padding: 2px 8px 2px 2px; border-radius: 999px; background: rgba(139,92,246,.22); outline: 1px solid var(--roxo); }
.tabela--rast { min-width: 1240px; }
.tabela--rast td, .tabela--rast th { padding: 10px 11px; }
.tabela--rast .th-grupo th { background: var(--fundo-externo); color: var(--roxo-claro); font-size: 10.5px; text-align: center; border-bottom: 1px solid var(--borda); }
.tabela--rast td span.mono { display: block; }
.rast-sep { border-left: 1px solid var(--borda); }
.rast-desc { max-width: 260px; }
.rast-vazio { color: var(--nota); }
.linha-substituida td { opacity: .5; text-decoration: line-through; text-decoration-color: rgba(229,72,77,.6); }
.linha-solic td { background: rgba(242,179,61,.05); }
.prod-barra { display: grid; grid-template-columns: 110px 1fr 70px; gap: 12px; align-items: center; padding: 10px 0; }
.prod-barra__trilho { display: flex; height: 16px; border-radius: 999px; background: var(--borda); overflow: hidden; }
.prod-barra__trilho i { display: block; height: 100%; }
.prod-barra b { text-align: right; font-variant-numeric: tabular-nums; }
.leg { margin-right: 14px; }
.leg::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 3px; background: var(--c); }
.c-quem { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 13px; font-weight: 600; }
.c-quem svg { width: 16px; height: 16px; }

/* ---------- Reservas (item em contagem) ---------- */
.c-trava { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(242,179,61,.4); background: rgba(242,179,61,.07); color: #F6CB78; font-size: 13.5px; }
.c-trava svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
.c-trava b { color: var(--texto); }
.linha-evento td { background: rgba(173,167,194,.05); color: var(--apoio); }
.btn--perigo:hover { border-color: var(--vermelho); color: #F59EA1; }

/* ================= TABLET v3: tela única de contagem ================= */
.tablet { position: relative; }
.c-btn--gigante { min-height: 76px; font-size: 20px; }
.c-btn.ativo { border-color: var(--roxo); background: rgba(139,92,246,.18); }
.c-btn em { font-style: normal; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: rgba(173,167,194,.18); font-size: 13px; }
.c-btn em.ok { background: rgba(47,191,113,.2); color: #7EDCA8; }
.c-ap { display: grid; gap: 10px; padding: 22px; border-radius: 20px; border: 1px solid var(--borda); background: linear-gradient(180deg, var(--elevado), var(--painel)); text-align: left; font-size: 16px; color: var(--apoio); }
.c-ap strong { font-size: 30px; color: var(--texto); }
.c-ap b { color: var(--texto); font-size: 20px; }
.c-ap__btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 70px; margin-top: 6px; border-radius: 14px; background: linear-gradient(90deg, var(--roxo-inst), var(--roxo)); color: #fff; font-size: 20px; font-weight: 700; }
.c-ap__btn svg { width: 24px; height: 24px; }
.c-ap--off { opacity: .55; }
.c-conts { display: grid; gap: 12px; }
.c-cont { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; min-height: 96px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--borda); background: var(--painel); text-align: left; }
.c-cont__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: rgba(139,92,246,.18); color: var(--roxo-claro); }
.c-cont__ic svg { width: 28px; height: 28px; }
.c-cont__txt strong { display: block; font-size: 21px; }
.c-cont__txt small { color: var(--nota); font-size: 14px; }
.c-cont__txt small b { color: #F6CB78; }
.c-cont__num { text-align: center; min-width: 92px; }
.c-cont__num b { display: block; font-size: 38px; line-height: 1; color: var(--texto); }
.c-cont__num b.ok svg { width: 34px; height: 34px; color: var(--verde); stroke-width: 3; }
.c-cont__num small { color: var(--nota); font-size: 13px; }
.c-cont--ok { opacity: .6; }
.c-cont--rec { border-color: rgba(242,179,61,.55); background: rgba(242,179,61,.07); }
.c-cont--rec .c-cont__ic { background: rgba(242,179,61,.2); color: #F6CB78; }
.c-cont--sem .c-cont__ic { background: rgba(242,179,61,.14); color: #F6CB78; }

.c-prog { display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: var(--fundo-externo); border-bottom: 1px solid var(--borda); }
.c-prog b { font-size: 30px; line-height: 1; white-space: nowrap; }
.c-prog b small { font-size: 18px; color: var(--nota); }
.c-prog .progresso { flex: 1; height: 14px; }
.c-prog span { color: var(--apoio); font-size: 15px; white-space: nowrap; }
.c-prog span b { font-size: 18px; color: var(--texto); }
.c-corpo--contar { gap: 14px; }

.c-vaate { display: grid; gap: 4px; padding: 20px 22px; border-radius: 22px; text-align: center; background: radial-gradient(500px 200px at 50% 0%, rgba(139,92,246,.45), transparent 70%), linear-gradient(120deg, var(--roxo-inst), #2A0866); border: 1px solid rgba(196,181,253,.3); }
.c-vaate small { color: #E2DAF7; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.c-vaate__end { font-size: 64px; font-weight: 800; line-height: 1.05; letter-spacing: .01em; font-variant-numeric: tabular-nums; word-break: break-all; }
.c-vaate__desc { font-size: 21px; font-weight: 600; line-height: 1.25; margin-top: 4px; }
.c-vaate__info { color: #E2DAF7; font-size: 15px; }
.c-vaate--sem { background: linear-gradient(120deg, #5A3A06, #3A2604); border-color: rgba(242,179,61,.45); }
.c-vaate--sem .c-vaate__end { font-size: 40px; color: #F6CB78; }

.c-scan { position: relative; display: flex; align-items: center; gap: 16px; min-height: 104px; padding: 16px 20px; border-radius: 20px; border: 2px dashed var(--roxo-claro); background: rgba(139,92,246,.08); cursor: text; animation: pronto 1.8s ease-in-out infinite; }
@keyframes pronto { 50% { border-color: rgba(196,181,253,.35); background: rgba(139,92,246,.03); } }
.c-scan__ic { display: grid; place-items: center; flex: 0 0 64px; height: 64px; border-radius: 16px; background: var(--roxo); color: #fff; }
.c-scan__ic svg { width: 34px; height: 34px; }
.c-scan__txt strong { display: block; font-size: 26px; }
.c-scan__txt small { color: var(--apoio); font-size: 15px; }
.c-scan__in { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.c-scan__in--vis { position: static; opacity: 1; pointer-events: auto; width: auto; height: auto; flex: 1; min-width: 0; padding: 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo-externo); color: var(--texto); font: inherit; font-size: 22px; }
.c-scan--pausa { animation: none; opacity: .45; }
.c-acoes3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.c-acoes3 .c-btn { min-height: 62px; font-size: 16px; padding: 0 10px; }

.c-alerta { display: flex; gap: 14px; padding: 18px; border-radius: 18px; border: 2px solid; }
.c-alerta > svg { flex: 0 0 34px; width: 34px; height: 34px; }
.c-alerta strong { display: block; font-size: 21px; margin-bottom: 4px; }
.c-alerta p { margin: 0 0 12px; font-size: 16px; color: var(--texto); }
.c-alerta__acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.c-alerta__acoes .c-btn { min-height: 60px; flex: 1; }
.c-alerta--erro { border-color: var(--vermelho); background: rgba(229,72,77,.12); color: #F9C1C3; }
.c-alerta--aviso { border-color: var(--amarelo); background: rgba(242,179,61,.1); color: #F6CB78; }
.c-alerta--info { border-color: var(--azul); background: rgba(56,189,248,.1); color: #8BD6F8; }

.c-lista2 { border-radius: 16px; border: 1px solid var(--borda); background: var(--painel); padding: 10px 12px; }
.c-lista2__abas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.c-lista2__abas button { min-height: 50px; border: 1px solid var(--borda); border-radius: 12px; background: none; font-size: 15px; font-weight: 600; color: var(--apoio); }
.c-lista2__abas button.ativo { border-color: var(--roxo); background: rgba(139,92,246,.18); color: var(--texto); }
.c-li { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 4px; border: 0; border-top: 1px solid var(--borda); background: none; text-align: left; font-size: 15px; color: var(--apoio); }
.c-li:disabled { opacity: .6; cursor: default; }
.c-li .pos { min-width: 110px; padding: 6px 10px; border-radius: 10px; background: var(--fundo-externo); color: var(--roxo-claro); font-weight: 700; text-align: center; }
.c-li span:nth-child(2) { flex: 1; }

.c-prod { display: grid; gap: 4px; padding: 16px 20px; border-radius: 18px; border: 1px solid rgba(47,191,113,.45); background: rgba(47,191,113,.08); }
.c-prod__ok { display: inline-flex; align-items: center; gap: 8px; color: #7EDCA8; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.c-prod__ok svg { width: 20px; height: 20px; stroke-width: 2.6; }
.c-prod strong { font-size: 23px; line-height: 1.25; }
.c-prod > span:last-child { color: var(--apoio); font-size: 15px; }
.c-pergunta { margin: 4px 0 0; font-size: 24px; text-align: center; }
.c-qtd2 { display: grid; gap: 6px; }
.c-qtd2 > span:first-child { color: var(--rotulo); font-size: 15px; font-weight: 700; }
.c-qtd2__linha { display: flex; align-items: center; gap: 14px; }
.c-qtd2 input { flex: 1; min-width: 0; height: 96px; padding: 0 22px; border: 3px solid var(--roxo); border-radius: 18px; background: var(--fundo-externo); color: var(--texto); font: inherit; font-size: 58px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; caret-color: var(--roxo-claro); }
.c-qtd2 input:focus { outline: 0; box-shadow: 0 0 0 5px rgba(139,92,246,.3); }
.c-qtd2 em { font-style: normal; font-size: 22px; font-weight: 700; color: var(--apoio); min-width: 46px; }
.teclado--grande button { height: 76px; font-size: 30px; }
.teclado--grande .tecla-txt { font-size: 17px; }
.c-salvar { display: grid; grid-template-columns: 1fr 2.2fr; gap: 10px; }
.c-salvar .c-btn { min-height: 84px; }
.c-btn--salvar { border: 0; background: linear-gradient(90deg, #1E8F52, var(--verde)); color: #fff; font-size: 26px; font-weight: 800; box-shadow: 0 14px 30px -12px rgba(47,191,113,.8); }
.c-btn--salvar svg { width: 30px; height: 30px; stroke-width: 2.8; }
.c-btn--salvar:disabled { opacity: .35; box-shadow: none; }
.c-btn.pressionado { transform: scale(.96); filter: brightness(1.2); }
.c-cega { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--nota); font-size: 13.5px; }
.c-cega svg { width: 17px; height: 17px; }

.c-salvo { position: absolute; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 30px; text-align: center; background: rgba(15,60,35,.94); color: #fff; animation: salvo 1.3s ease-out forwards; pointer-events: none; }
.c-salvo svg { width: 110px; height: 110px; padding: 20px; border-radius: 50%; background: var(--verde); stroke-width: 3; }
.c-salvo strong { font-size: 44px; }
.c-salvo span { font-size: 22px; font-weight: 600; }
.c-salvo small { font-size: 16px; color: #B7F0CF; }
@keyframes salvo { 0% { opacity: 0; } 10% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.c-fim { display: grid; justify-items: center; gap: 12px; padding: 30px 22px; border-radius: 22px; text-align: center; background: rgba(47,191,113,.08); border: 1px solid rgba(47,191,113,.35); }
.c-fim > svg { width: 70px; height: 70px; padding: 14px; border-radius: 50%; background: var(--verde); color: #fff; stroke-width: 2.8; }
.c-fim h2 { margin: 0; font-size: 27px; }
.c-fim p { margin: 0; color: var(--apoio); font-size: 16px; }
.c-fim--alerta { background: rgba(242,179,61,.07); border-color: rgba(242,179,61,.4); }
.c-fim--alerta > svg { background: var(--amarelo); }
.c-lote { min-height: 74px; font-size: 21px; }

/* ================= APLICAÇÃO REAL (sem a faixa do protótipo) ================= */
.app--real { min-height: 100vh; }
.menu--real { top: 0; }
.topo--real { top: 0; }
.menu__rodape .usuario { width: 100%; border: 1px solid var(--borda); text-align: left; cursor: pointer; }
.menu__rodape .usuario:hover { border-color: var(--roxo); }
.btn-primario--largo { width: 100%; min-height: 50px; font-size: 16px; }
.carregando { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 16px; color: var(--nota); background: var(--fundo-externo); }
.carregando img { width: 160px; animation: pulsar 1.4s ease-in-out infinite; }
.mensagem { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; }
.mensagem--erro { background: rgba(229,72,77,.1); border: 1px solid rgba(229,72,77,.35); color: #F59EA1; }
.mensagem--ok { background: rgba(47,191,113,.1); border: 1px solid rgba(47,191,113,.35); color: #7EDCA8; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 0; border-color: var(--roxo); box-shadow: 0 0 0 3px rgba(139,92,246,.25); }
.campo input, .campo select { min-height: 44px; }

/* Login (mesmo visual do HUB) */
.login { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 40px 16px; overflow: hidden;
  background: radial-gradient(1200px 700px at 50% -10%, rgba(65,0,153,.75), transparent 60%), radial-gradient(900px 600px at 100% 110%, rgba(139,92,246,.22), transparent 60%), var(--fundo-externo); }
.login__glow { position: absolute; inset: auto -20% -40% -20%; height: 70%; background: radial-gradient(closest-side, rgba(139,92,246,.18), transparent); pointer-events: none; }
.login__conteudo { position: relative; width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.login__amyris { width: 210px; height: auto; }
.login__cartao { width: 100%; padding: 32px 30px 26px; border: 1px solid rgba(196,181,253,.18); border-radius: 22px; background: linear-gradient(180deg, rgba(34,30,58,.85), rgba(26,22,48,.85)); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); text-align: left; }
.login__cartao h1 { margin: 0 0 6px; font-size: 28px; }
.login__texto { margin: 0 0 22px; color: var(--apoio); }
.login__ajuda { margin: 16px 0 0; color: var(--nota); font-size: 12.5px; text-align: center; }
.login__rodape { display: flex; align-items: center; gap: 16px; color: var(--nota); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.login__rodape img { height: 30px; width: auto; opacity: .9; }
.login__rodape i { width: 1px; height: 26px; background: var(--borda); }

/* Cadastro de usuários */
.opcoes-papel { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.opcoes-papel legend { margin-bottom: 6px; color: var(--rotulo); font-size: 12.5px; font-weight: 600; }
.opcao-papel { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 12px; cursor: pointer; }
.opcao-papel:has(input:checked) { border-color: var(--roxo); background: rgba(139,92,246,.1); }
.opcao-papel input { accent-color: var(--roxo); width: 18px; height: 18px; margin-top: 2px; }
.opcao-papel strong { display: block; font-size: 14px; }
.opcao-papel small { color: var(--nota); font-size: 12.5px; }
.opcoes-papel:disabled { opacity: .55; }
.interruptor { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; }
.interruptor input { accent-color: var(--verde); width: 20px; height: 20px; }
.tabela tr.inativo td { opacity: .55; }
.tabela tr.inativo td:last-child { opacity: 1; }

.btn-primario--compacto { padding: 8px 14px; font-size: 13.5px; box-shadow: none; }
.assinatura-linha { display: grid; grid-template-columns: 1fr 180px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.assinatura-linha:last-child { border-bottom: 0; }
.assinatura-linha strong { display: block; }
.assinatura-linha small { color: var(--nota); font-size: 12px; }
.assinatura-linha img { width: 180px; height: 60px; object-fit: contain; background: #fff; border-radius: 8px; }
.filtros label { display: inline-flex; align-items: center; gap: 6px; color: var(--apoio); font-size: 13px; }

.pos-ok { display: block; color: #7EDCA8; font-weight: 600; }
.pos-nok { display: block; color: #F6CB78; font-weight: 700; }

/* Seletor de apuração no cabeçalho das telas de gestão */
.sel-ap { min-height: 42px; padding: 8px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--painel); color: var(--texto); font: inherit; font-weight: 600; }

/* Importação */
label.soltar { cursor: pointer; transition: border-color .15s, background .15s; }
label.soltar:hover, .soltar--sobre { border-color: var(--roxo-claro); background: rgba(139,92,246,.12); }

/* Tablet em tela cheia (aparelho real) */
.coletor-real { min-height: 100vh; display: flex; flex-direction: column; background: var(--fundo); }
.coletor-real .c-corpo { flex: 1; }
.coletor-real .c-salvo { position: fixed; }
.c-video { flex: 0 0 120px; height: 84px; border-radius: 12px; overflow: hidden; background: #000; border: 2px solid var(--roxo-claro); }
.c-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-acoes3--4 { grid-template-columns: repeat(4, 1fr); }
/* Conferência da posição (SIM / NÃO) */
.c-pos { display: grid; justify-items: center; gap: 2px; padding: 14px 18px; border-radius: 18px; background: var(--painel); border: 1px solid var(--borda); text-align: center; }
.c-pos small { color: var(--nota); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.c-pos__end { font-size: 44px; font-weight: 800; line-height: 1.1; word-break: break-all; }
.c-pos--antigo .c-pos__end { font-size: 28px; color: var(--apoio); }
.c-simnao { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c-simnao .c-btn { min-height: 110px; font-size: 32px; font-weight: 800; border: 0; }
.c-btn--sim { background: linear-gradient(90deg, #1E8F52, var(--verde)); color: #fff; box-shadow: 0 14px 30px -12px rgba(47,191,113,.8); }
.c-btn--sim svg { width: 34px; height: 34px; stroke-width: 2.8; }
.c-btn--nao { background: linear-gradient(90deg, #B7791F, var(--amarelo)); color: #1A1630; box-shadow: 0 14px 30px -12px rgba(242,179,61,.7); }
.c-pos__in { flex: 1; min-width: 0; height: 84px; padding: 0 20px; border: 3px solid var(--amarelo); border-radius: 18px; background: var(--fundo-externo); color: var(--texto); font: inherit; font-size: 34px; font-weight: 800; text-transform: uppercase; }
.c-pos__in:focus { outline: 0; box-shadow: 0 0 0 5px rgba(242,179,61,.3); }
.c-qtd2, .c-qtd2__linha { min-width: 0; }
.c-pos__in { width: 100%; }

/* ===== Celular (até 600 px): mesmo fluxo, só mais compacto. Tablet e computador não mudam. ===== */
@media (max-width: 600px) {
  .c-topo { padding: 12px 14px; gap: 8px; }
  .c-tit strong { font-size: 16px; }
  .c-online { font-size: 11px; }
  .c-corpo { padding: 14px; gap: 12px; }
  .c-prog { padding: 10px 14px; }
  .c-cont { grid-template-columns: 44px 1fr auto; gap: 12px; min-height: 84px; padding: 12px 14px; }
  .c-cont__ic { width: 44px; height: 44px; }
  .c-cont__txt strong { font-size: 18px; }
  .c-cont__num { min-width: 64px; }
  .c-cont__num b { font-size: 30px; }
  .c-vaate { padding: 16px; }
  .c-vaate__end { font-size: 40px; }
  .c-vaate__desc { font-size: 18px; }
  .c-scan { min-height: 84px; padding: 12px 14px; }
  .c-scan__txt strong { font-size: 21px; }
  .c-acoes3 .c-btn { min-height: 54px; font-size: 14px; }
  .c-prod strong { font-size: 19px; }
  /* no celular a quantidade usa o teclado numérico do próprio aparelho */
  .teclado--grande { display: none; }
  .c-qtd2 input { height: 76px; font-size: 42px; }
  .c-salvar .c-btn { min-height: 66px; }
  .c-btn--salvar { font-size: 22px; }
  .c-pos__end { font-size: 34px; }
  .c-pos--antigo .c-pos__end { font-size: 24px; }
  .c-pergunta { font-size: 20px; }
  .c-simnao .c-btn { min-height: 92px; font-size: 26px; }
  .c-pos__in { height: 64px; font-size: 24px; padding: 0 14px; }
  .c-alerta strong { font-size: 18px; }
  .c-alerta__acoes .c-btn { min-height: 54px; }
}
@media (max-width: 640px) { .c-acoes3--4 { grid-template-columns: repeat(2, 1fr); } .c-vaate__end { font-size: 46px; } }
.em-breve { display: grid; justify-items: start; gap: 10px; padding: 26px; border-radius: 16px; border: 1px dashed rgba(196,181,253,.35); background: rgba(139,92,246,.05); color: var(--apoio); }
.em-breve strong { color: var(--texto); font-size: 17px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1280px) { .kpis { grid-template-columns: repeat(3, 1fr); } .cards-ap, .relatorios { grid-template-columns: repeat(2, 1fr); } .coletor-legenda { display: none; } }
@media (max-width: 1000px) {
  .menu { transform: translateX(-100%); transition: transform .2s; }
  .menu.aberto { transform: none; }
  .principal { margin-left: 0; }
  .btn-menu { display: grid; }
  .grade-2, .grade-2--igual { grid-template-columns: 1fr; }
  .dados { grid-template-columns: repeat(2, 1fr); }
  .ao-vivo { display: none; }
}
@media (max-width: 640px) {
  .conteudo { padding: 18px 16px 32px; }
  .topo { padding: 10px 16px; }
  .kpis, .cards-ap, .relatorios { grid-template-columns: 1fr 1fr; }
  .proto-faixa .selo { display: none; }
  .tablet { border-width: 0; border-radius: 0; min-height: calc(100vh - var(--faixa)); }
  .coletor-palco { padding: 0; }
  .c-material .grade { grid-template-columns: 1fr 1fr; }
}