/* ============================================================================
   SBR SKIN — redesign 100% visual das classes existentes via tokens.
   Não altera JS, HTML, layout estrutural (grid/sidebar), Supabase ou lógica.
   ============================================================================ */
body{ background:var(--sbr-bg); color:var(--sbr-text); font-family:var(--ff); }
*{ -webkit-tap-highlight-color:transparent; }

/* transição suave entre telas */
#tela{ animation:sbr-fade var(--mo-slow) var(--ease); }
@keyframes sbr-fade{ from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }

/* ---------- Títulos de seção (hierarquia) ---------- */
.olho{ font-family:var(--ff)!important;font-weight:var(--fw-bold);font-size:var(--fs-h-s);
  color:var(--sbr-text);letter-spacing:normal;text-transform:none;
  margin:var(--sp-6) 0 var(--sp-3);display:flex;align-items:center;gap:var(--sp-2); }
.nota{ color:var(--sbr-text-2);font-size:var(--fs-body-s);line-height:1.55;margin:0 0 var(--sp-3); }
.dica{ color:var(--sbr-text-3);font-size:var(--fs-caption); }

/* ---------- Botões (sistema unificado) ---------- */
.bt{ font-family:var(--ff);font-weight:var(--fw-semibold);font-size:var(--fs-body-m);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:10px var(--sp-4);border-radius:var(--rad-12);border:1px solid transparent;cursor:pointer;line-height:1;white-space:nowrap;
  transition:transform var(--mo-fast) var(--ease),filter var(--mo-fast) var(--ease),background var(--mo-fast) var(--ease),box-shadow var(--mo-fast) var(--ease); }
.bt:hover{ filter:brightness(.97); }
.bt:active{ transform:scale(.97); }
.bt:focus-visible{ outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--sbr-primary) 32%,transparent); }
.bt[disabled],.bt:disabled{ opacity:.5;cursor:not-allowed; }
.bt-1{ background:var(--sbr-primary);color:#fff; }
.bt-1:hover{ background:var(--sbr-primary-hover);filter:none; }
.bt-2{ background:var(--sbr-surface);color:var(--sbr-text);border-color:var(--sbr-border-strong);box-shadow:var(--sh-xs); }
.bt-2:hover{ background:var(--sbr-surface-2);filter:none; }
.bt-3{ background:var(--sbr-text);color:var(--sbr-surface); }
.bt-v{ background:var(--sbr-success);color:#fff; }
.bt-r{ background:var(--sbr-danger);color:#fff; }
.bt-p{ padding:7px var(--sp-3);font-size:var(--fs-body-s);border-radius:var(--rad-8); }
.bt-larga{ width:100%; }

/* ---------- Caixas / formulários ---------- */
.caixa{ background:var(--sbr-surface);border:1px solid var(--sbr-border);border-radius:var(--rad-16);
  padding:var(--sp-5);box-shadow:var(--sh-sm);margin-bottom:var(--sp-4); }
.campo{ display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-3); }
.campo label{ font-size:var(--fs-body-s);font-weight:var(--fw-semibold);color:var(--sbr-text-2); }
.campo input,.campo select,.campo textarea{ font-family:var(--ff);font-size:var(--fs-body-m);color:var(--sbr-text);
  background:var(--sbr-surface);border:1px solid var(--sbr-border-strong);border-radius:var(--rad-12);
  padding:11px var(--sp-3);outline:none;width:100%;
  transition:border var(--mo-fast) var(--ease),box-shadow var(--mo-fast) var(--ease); }
.campo input:focus,.campo select:focus,.campo textarea:focus{ border-color:var(--sbr-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--sbr-primary) 18%,transparent); }
.campo input::placeholder,.campo textarea::placeholder{ color:var(--sbr-text-3); }
.dupla{ display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3); }
@media(max-width:640px){ .dupla{ grid-template-columns:1fr; } }

/* ---------- Linhas de lista ---------- */
.mov,.item-carrinho,.emprestimo{ background:var(--sbr-surface);border:1px solid var(--sbr-border);
  border-radius:var(--rad-12);padding:var(--sp-3);margin-bottom:var(--sp-2);box-shadow:var(--sh-xs);
  transition:box-shadow var(--mo-fast) var(--ease),transform var(--mo-fast) var(--ease); }
.mov:hover,.item-carrinho:hover{ box-shadow:var(--sh-sm); }
.mov-quem,.com-quem{ color:var(--sbr-text-2);font-size:var(--fs-body-s); }
.mov-qtd{ font-weight:var(--fw-bold); }
.ic-foto,.mr-ic{ border-radius:var(--rad-8);overflow:hidden; }

/* ---------- Badges / status ---------- */
.selo,.selo-mini{ display:inline-flex;align-items:center;gap:4px;font-weight:var(--fw-semibold);
  font-size:var(--fs-caption);padding:3px 9px;border-radius:var(--rad-full);
  background:var(--sbr-surface-2);color:var(--sbr-text-2);line-height:1.3; }
.selo.crit,.selo-mini.crit,.selo.ruim{ background:var(--sbr-danger-weak);color:var(--sbr-danger); }
.selo.baixo,.selo-mini.baixo{ background:var(--sbr-warning-weak);color:var(--sbr-warning); }
.selo.pend,.selo-mini.pend{ background:var(--sbr-info-weak);color:var(--sbr-info); }
.selo.tem-estoque,.selo-mini.tem-estoque{ background:var(--sbr-success-weak);color:var(--sbr-success); }
.atrasada{ color:var(--sbr-danger);font-weight:var(--fw-semibold); }

/* ---------- Filtros (chips) ---------- */
.filtros{ display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3); }
.filtro{ font-family:var(--ff);font-weight:var(--fw-medium);font-size:var(--fs-body-s);
  padding:7px var(--sp-3);border-radius:var(--rad-full);border:1px solid var(--sbr-border-strong);
  background:var(--sbr-surface);color:var(--sbr-text-2);cursor:pointer;
  transition:all var(--mo-fast) var(--ease); }
.filtro:hover{ border-color:var(--sbr-primary);color:var(--sbr-primary); }
.filtro[aria-pressed="true"]{ background:var(--sbr-primary);color:#fff;border-color:var(--sbr-primary); }

/* ---------- Empty states ---------- */
.vazio{ text-align:center;padding:var(--sp-10) var(--sp-6);color:var(--sbr-text-2);
  background:var(--sbr-surface);border:1px dashed var(--sbr-border-strong);border-radius:var(--rad-16); }
.vazio b{ color:var(--sbr-text); }
.vazio-mini{ padding:var(--sp-4);text-align:center;color:var(--sbr-text-3);font-size:var(--fs-body-s); }

/* ---------- Grade de itens / fichas ---------- */
.grade{ display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-3); }
.ficha{ background:var(--sbr-surface);border:1px solid var(--sbr-border);border-radius:var(--rad-16);
  box-shadow:var(--sh-xs);transition:box-shadow var(--mo-fast) var(--ease),transform var(--mo-fast) var(--ease);overflow:hidden; }
.ficha:hover{ box-shadow:var(--sh-md);transform:translateY(-1px); }

/* ---------- Notas de valor ---------- */
.valor-big{ font-size:var(--fs-display-l);font-weight:var(--fw-bold);color:var(--sbr-text); }

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms!important;transition-duration:.001ms!important; } }