/* design-tokens.css — Sprint 9.1
   Tokens do :root + componentes genéricos reusados por 2+ telas de index.html.
   Extraído do <style> inline original — mesmo CSS, sem mudança de regra.
   Carregar ANTES dos screen-*.css (algumas classes de tela dependem destas
   variáveis, mas cascata não depende de ordem entre arquivos aqui — nenhum
   destes seletores é sobrescrito por screen-*.css). */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --orange:#EE4D2D;--orange-dark:#C93A1D;
  --teal:#0D7A7A;
  --ok:#16A34A;--ok-bg:rgba(22,163,74,.10);
  --warn:#D97706;--warn-bg:rgba(217,119,6,.12);
  --err:#DC2626;--err-bg:rgba(220,38,38,.10);
  --info:#0284C7;--info-bg:rgba(2,132,199,.10);
  --miss:#64748B;--miss-bg:rgba(100,116,139,.10);
  --bg:#EEF1F5;--s1:#FFFFFF;--s2:#F4F6F9;--s3:#E8EBF0;
  --b:#DDE2E9;--b2:#C4CBD5;
  --text:#1B2330;--muted:#9AA3B2;--muted2:#5B6472;
  --font:'DM Sans',system-ui,sans-serif;
  --display:'Archivo','DM Sans',sans-serif;
  --mono:'DM Mono',monospace;
}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px}

/* ── Mecanismo de telas (todas as screen-*) ─────────────────── */
.screen{display:none;flex-direction:column;height:100%;overflow:hidden}
.screen.active{display:flex}
.scrollbar{overflow-y:auto;-webkit-overflow-scrolling:touch}
.scrollbar::-webkit-scrollbar{width:3px}
.scrollbar::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}

.notice{background:var(--s2);border:1px solid var(--b);border-radius:3px;padding:12px 14px;font-size:12px;color:var(--muted);line-height:1.6;font-family:var(--mono)}

/* ── Formulário genérico (login, setup, conferente, recount) ── */
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)}
.form-input{padding:11px 14px;background:var(--s2);border:1px solid var(--b);border-radius:3px;font-family:var(--mono);font-size:13px;color:var(--text);outline:none;letter-spacing:.03em;width:100%}
.form-input:focus{border-color:var(--orange)}
.form-input.regular{font-family:var(--font);font-size:14px;letter-spacing:normal}
select.form-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2350506A' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
select.form-input option{background:var(--s1);color:var(--text)}

/* ── Botões genéricos ────────────────────────────────────────── */
.btn-primary{padding:15px;background:var(--orange);color:white;border:none;border-radius:3px;font-family:var(--display);font-size:16px;font-weight:700;cursor:pointer;transition:background .15s,transform .1s;letter-spacing:.1em;text-transform:uppercase;width:100%}
.btn-primary:active{background:var(--orange-dark);transform:scale(.98)}
.btn-primary:disabled{opacity:.4;pointer-events:none}
.btn-outline{padding:13px;background:transparent;color:var(--muted);border:1px solid var(--b);border-radius:3px;font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;width:100%;margin-top:4px}

/* ── Cabeçalho "hero" genérico (setup, conferente, recount) ──── */
.setup-hero{background:linear-gradient(135deg,#FFFFFF,#FDF1EE);padding:28px 20px 22px;border-bottom:2px solid var(--orange);flex-shrink:0}
.setup-title{font-family:var(--display);font-size:24px;font-weight:700;color:var(--text);letter-spacing:.06em;text-transform:uppercase}
.setup-sub{font-size:11px;color:var(--muted);margin-top:4px;font-family:var(--mono);letter-spacing:.04em}
.setup-body{padding:20px;display:flex;flex-direction:column;gap:16px;flex:1;min-height:0}

/* ── Badge genérico (audit, conferente, recount) ──────────────── */
.badges{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0}
.badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:2px;font-family:var(--display);letter-spacing:.04em}
.item-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:2px;flex-shrink:0;font-family:var(--display);letter-spacing:.04em;text-transform:uppercase}

/* ── Botão de ação pequeno (recount +/-, items screen) ────────── */
.si-btn{width:40px;height:40px;background:transparent;border:1px solid var(--b);border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;color:var(--muted);transition:all .12s}
.si-btn-dec:active{background:rgba(217,119,6,.12);border-color:var(--warn);color:var(--warn)}
.si-btn-del:active{background:rgba(220,38,38,.10);border-color:var(--err);color:var(--err)}

/* ── Loading overlay (qualquer tela, via showLoading/hideLoading) */
.loading-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:200;align-items:center;justify-content:center;flex-direction:column;gap:16px}
.loading-overlay.show{display:flex}
.loading-spinner{width:40px;height:40px;border:3px solid var(--b2);border-top-color:var(--orange);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loading-msg{font-family:var(--display);font-size:14px;color:var(--text);letter-spacing:.08em;text-transform:uppercase}

/* ── Modal de confirmação genérico (usado por vários fluxos) ──── */
.modal-overlay{display:none;position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.8);align-items:center;justify-content:center;padding:24px}
.modal-overlay.show{display:flex}
.modal-card{background:var(--s2);border:1px solid var(--orange);border-radius:6px;padding:24px;max-width:320px;width:100%}
.modal-title{font-family:var(--display);font-size:18px;font-weight:700;color:var(--text);letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.modal-body{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.7}
.modal-actions{display:flex;gap:10px}
.modal-cancel{flex:1;padding:12px;background:transparent;border:1px solid var(--b2);border-radius:3px;font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.modal-confirm{flex:1;padding:12px;background:var(--orange);border:none;border-radius:3px;font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:white;cursor:pointer}
.modal-confirm:active{background:var(--orange-dark)}

/* .toast{display:none} — achado durante a divisão (2026-08-08): classe sem
   nenhum uso no HTML/JS (toast() reaproveita showFeedback()/.scan-feedback,
   não esta classe). Provável resíduo de uma versão anterior. Não removida
   nesta rodada (a Sprint 9.1 é só mover CSS, não limpar) — sinalizado pro
   usuário decidir se apaga numa rodada de limpeza. */
.toast{display:none}