/* ============================================================================
   SBR — CAMADA "APPLE-GRADE" (v20.3.0)
   Só visual. Inspirada na filosofia de design da Apple (ergonomia, tipografia,
   sombras, microinterações) — sem copiar marcas, ícones ou ativos protegidos.
   Usa a fonte do SISTEMA (renderiza SF Pro nativamente em iPhone/iPad/Mac,
   sem embutir arquivos de fonte). Preserva a identidade visual da SBR:
   azul institucional, branco, cinzas e preto suave.
   Carrega por último → cascateia sobre todas as telas de uma vez.
   ============================================================================ */

:root{
  /* Stack de fonte do sistema (Apple → SF Pro; fallback multiplataforma) */
  --ff-sys: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
            "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  /* Raios no padrão iOS */
  --ap-r: 14px;            /* botões / inputs           */
  --ap-r-card: 20px;       /* cards                     */
  --ap-r-lg: 26px;         /* folhas / modais           */
  /* Sombras suaves e em camadas (elevação Apple) */
  --ap-sh-1: 0 1px 2px rgba(15,23,42,.04), 0 2px 8px rgba(15,23,42,.05);
  --ap-sh-2: 0 2px 6px rgba(15,23,42,.05), 0 14px 34px rgba(15,23,42,.07);
  --ap-sh-3: 0 8px 24px rgba(15,23,42,.10), 0 30px 60px rgba(15,23,42,.10);
  --ap-sh-primary: 0 6px 18px rgba(30,64,175,.24);
  /* Curva de easing "iOS" e durações */
  --ap-ease: cubic-bezier(.32,.72,0,1);
  --ap-fast: .18s;
  --ap-slow: .32s;
  /* Azul de destaque = azul institucional SBR */
  --ap-blue: var(--sbr-primary, #1E40AF);
}

/* ---------------------------------------------------------------------------
   1) TIPOGRAFIA — fonte do sistema + refinamento ótico
   (vence o !important herdado da camada premium por vir depois, com !important)
   --------------------------------------------------------------------------- */
html, body,
.aba, .subtab, .subaba, .olho, .modulo, .modulo-login, .sub-login,
h1, h2, h3, h4, h5, .kpi, .card, .knum, .krot,
input, select, textarea, button,
.bt, .ds-btn, .acao, .navcard, .perf-row, .busca-row, .fab-act, .bn-item{
  font-family: var(--ff-sys) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body{ letter-spacing:-.01em !important; }

/* Títulos fortes, tracking negativo como no iOS; hierarquia clara */
h1{ letter-spacing:-.028em !important; font-weight:700 !important; line-height:1.06; }
h2{ letter-spacing:-.024em !important; font-weight:700 !important; line-height:1.12; }
h3{ letter-spacing:-.02em  !important; font-weight:600 !important; line-height:1.2; }
h4, .pnl-head h1{ letter-spacing:-.02em !important; }
.pnl-head p, .sub{ letter-spacing:-.006em; }

/* Números grandes: figuras tabulares, peso semibold (estilo widget iOS) */
.knum, .saldo, .req-id, .mov-qtd, .kpi b, .kpi .knum{
  font-variant-numeric: tabular-nums;
  letter-spacing:-.02em;
}
.knum{ font-weight:700 !important; }

/* ---------------------------------------------------------------------------
   2) BOTÕES — de gradiente/skeuomórfico para FLAT premium (Apple)
   Cor sólida, cantos 14px, sombra única suave, toque com scale + opacidade.
   --------------------------------------------------------------------------- */
.bt{
  border:none !important;
  border-radius:var(--ap-r) !important;
  letter-spacing:-.01em !important;
  font-weight:600 !important;
  min-height:44px;
  box-shadow:var(--ap-sh-1) !important;
  background-image:none !important;               /* remove gradientes */
  transition:transform var(--ap-fast) var(--ap-ease),
             box-shadow var(--ap-fast) var(--ap-ease),
             opacity var(--ap-fast) var(--ap-ease),
             filter var(--ap-fast) var(--ap-ease) !important;
}
.bt-p{ min-height:48px; padding:0 22px !important; font-size:16px !important; }
.bt:hover{ transform:translateY(-1px); filter:brightness(1.03); box-shadow:var(--ap-sh-2) !important; }
.bt:active{ transform:scale(.97) !important; opacity:.9; box-shadow:var(--ap-sh-1) !important; filter:none; }

/* Preenchimentos sólidos, mantendo a semântica de cor */
.bt-1, .bt-1:hover{ background:var(--ap-blue) !important; color:#fff !important; box-shadow:var(--ap-sh-primary) !important; }
.bt-1:active{ background:var(--sbr-primary-hover,#1b3a9e) !important; }
.bt-v, .bt-v:hover{ background:var(--sbr-success,#16A34A) !important; color:#fff !important; box-shadow:0 6px 18px rgba(22,163,74,.24) !important; }
.bt-3, .bt-3:hover{ background:var(--sbr-warning,#F59E0B) !important; color:#1d1d1f !important; box-shadow:0 6px 18px rgba(245,158,11,.24) !important; }
.bt-r, .bt-r:hover{ background:var(--sbr-danger,#EF4444) !important; color:#fff !important; box-shadow:0 6px 18px rgba(239,68,68,.24) !important; }

/* Secundário: superfície "vidro" com traço fino (estilo botão claro do iOS) */
.bt-2, .bt-2:hover{
  background:rgba(255,255,255,.92) !important;
  color:#1d1d1f !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:var(--ap-sh-1) !important;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
body.escuro .bt-2, body.escuro .bt-2:hover{
  background:rgba(30,45,66,.9) !important; color:var(--sbr-text,#e9edf4) !important;
  border-color:rgba(255,255,255,.10) !important;
}

/* Design-system: só arredondar/soltar sombra no padrão Apple */
.ds-btn{ border-radius:var(--ap-r) !important; }
.ds-btn:active{ transform:scale(.97); }

/* ---------------------------------------------------------------------------
   3) INPUTS — campos no estilo iOS: cantos 14px, foco azul elegante
   --------------------------------------------------------------------------- */
.campo input, .campo select, .campo textarea,
.ds-input, .ds-select, .busca-top input{
  border-radius:var(--ap-r) !important;
  border:1px solid rgba(0,0,0,.10) !important;
  padding:14px !important;
  font-size:16px !important;                      /* evita zoom no iOS */
  background:var(--sbr-surface,#fff);
  transition:border-color var(--ap-fast) var(--ap-ease),
             box-shadow var(--ap-fast) var(--ap-ease),
             background var(--ap-fast) var(--ap-ease) !important;
}
.campo input:focus, .campo select:focus, .campo textarea:focus,
.ds-input:focus, .ds-select:focus{
  border-color:var(--ap-blue) !important;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--ap-blue) 18%, transparent) !important;
  outline:none !important;
}
body.escuro .campo input, body.escuro .campo select, body.escuro .campo textarea{
  border-color:rgba(255,255,255,.12) !important;
}
/* Rótulos: sentença legível, fonte do sistema (sai do "condensado maiúsculo") */
.campo label{
  font-family:var(--ff-sys) !important;
  text-transform:none !important;
  letter-spacing:-.006em !important;
  font-weight:600 !important;
  font-size:13.5px !important;
  color:var(--sbr-text-2,#6B7280) !important;
}

/* ---------------------------------------------------------------------------
   4) CARDS — elevação suave em camadas + microinteração
   --------------------------------------------------------------------------- */
.card, .kpi{
  border-radius:var(--ap-r-card) !important;
  box-shadow:var(--ap-sh-2) !important;
  border:1px solid rgba(15,23,42,.04) !important;
  transition:transform var(--ap-fast) var(--ap-ease), box-shadow var(--ap-fast) var(--ap-ease) !important;
}
body.escuro .card, body.escuro .kpi{ border-color:rgba(255,255,255,.05) !important; box-shadow:0 10px 34px rgba(0,0,0,.34) !important; }
.acao{ border-radius:18px !important; box-shadow:var(--ap-sh-1) !important; }
.acao:active{ transform:scale(.96); }

/* Ícones-círculo dos atalhos: sombra colorida suave (profundidade Apple) */
.ac-ic, .fab-act .fa-ic{ box-shadow:0 8px 20px rgba(15,23,42,.14) !important; }

/* Badges dos KPIs — chip tonalizado (fundo suave + ícone na cor de destaque).
   Cor de destaque vem inline via --kc; funciona no claro e no escuro. */
/* Todos os ícones-badge do MESMO tipo (KPIs, atalhos rápidos, ações do +,
   bullets das listas): mesma cara de ícone de app iOS — cor viva sólida com
   brilho no topo + sombra de profundidade, squircle e símbolo branco. */
.kpi .kico, .acao .ac-ic, .fab-act .fa-ic, .mini-row .mr-ic{
  background-image:linear-gradient(160deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,0) 46%,
      rgba(0,0,0,.14) 100%) !important;
  color:#ffffff !important;
  box-shadow:0 6px 15px rgba(15,23,42,.20),
             inset 0 1px 0 rgba(255,255,255,.42),
             inset 0 -1px 0 rgba(0,0,0,.10) !important;
  overflow:hidden;
  flex-shrink:0 !important;          /* nunca encolher, mesmo com título de 2 linhas */
  transition:transform var(--ap-fast) var(--ap-ease) !important;
}
/* A chave (ferramentas) é desenhada menor no conjunto de ícones — compensa
   opticamente pra igualar aos demais símbolos. */
.kpi .kico .ic-wr{ display:flex; align-items:center; justify-content:center; }
.kpi .kico .ic-wr svg{ transform:scale(1.4); }
.kpi .kico{ background-color:var(--kc,#1E40AF) !important; }

/* Símbolo o mais profissional possível: traço uniforme, centralizado,
   leve profundidade — igual em todos os badges. */
.kpi .kico svg, .acao .ac-ic svg, .fab-act .fa-ic svg, .mini-row .mr-ic svg{
  stroke-width:2 !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));
}

/* Badges grandes — todos exatamente do mesmo tamanho (48px) */
.kpi .kico, .acao .ac-ic, .fab-act .fa-ic{
  width:48px !important; height:48px !important; border-radius:13px !important;
}
.kpi .kico svg, .acao .ac-ic svg, .fab-act .fa-ic svg{ width:23px !important; height:23px !important; }
.kpi:active .kico, .acao:active .ac-ic, .fab-act:active .fa-ic{ transform:scale(.94); }

/* Bullets de lista — mesmo estilo, tamanho próprio da linha (uniformes entre si) */
.mini-row .mr-ic{ width:34px !important; height:34px !important; border-radius:10px !important; }
.mini-row .mr-ic svg{ width:16px !important; height:16px !important; }
.mini-row .mr-ic img{ width:100% !important; height:100% !important; object-fit:cover; }

/* Elevação no ponteiro (só em telas com hover — desktop) */
@media (hover:hover) and (pointer:fine){
  .card:hover, .kpi:hover, .navcard:hover{ transform:translateY(-2px); box-shadow:var(--ap-sh-3) !important; }
}

/* ---------------------------------------------------------------------------
   5) CABEÇALHO + MENU INFERIOR — vidro fosco, foco no conteúdo
   --------------------------------------------------------------------------- */
.topo{ -webkit-backdrop-filter:saturate(1.6) blur(20px); backdrop-filter:saturate(1.6) blur(20px); }
/* Logo da empresa com mais destaque no topo */
.logo-topo{ height:40px !important; }
.marca .divisor{ height:30px !important; }
@media(max-width:560px){ .logo-topo{ height:34px !important; } }
.botnav{ -webkit-backdrop-filter:saturate(1.8) blur(22px) !important; backdrop-filter:saturate(1.8) blur(22px) !important; }
.bn-item{ transition:color var(--ap-fast) var(--ap-ease), transform var(--ap-fast) var(--ap-ease); }
.bn-item:active{ transform:scale(.92); }
.bn-fab{ transition:transform var(--ap-fast) var(--ap-ease), box-shadow var(--ap-fast) var(--ap-ease); }

/* ---------------------------------------------------------------------------
   6) TABELAS — DataGrid limpo com hover e linhas sutis
   --------------------------------------------------------------------------- */
.linhas{ border-collapse:separate; border-spacing:0; }
.linhas tbody tr{ transition:background var(--ap-fast) var(--ap-ease); }
.linhas tbody tr:hover{ background:color-mix(in srgb, var(--ap-blue) 5%, transparent); }
.linhas td, .linhas th{ border-color:rgba(15,23,42,.06) !important; }
.ds-table tbody tr{ transition:background var(--ap-fast) var(--ap-ease); }

/* ---------------------------------------------------------------------------
   7) MODAIS / FOLHAS / BUSCA — entrada suave fade + scale (estilo macOS/iOS)
   --------------------------------------------------------------------------- */
.busca-modal{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
body.busca-open .busca-box{ animation:ap-pop var(--ap-slow) var(--ap-ease) both; }
.busca-box{ border-radius:var(--ap-r-lg) !important; box-shadow:var(--ap-sh-3) !important; }
.busca-row{ transition:background var(--ap-fast) var(--ap-ease), transform var(--ap-fast) var(--ap-ease); }
.busca-row:active{ transform:scale(.985); }
.fab-sheet{ border-radius:var(--ap-r-lg) var(--ap-r-lg) 0 0 !important; }
body.fab-open .fab-act{ animation:ap-rise var(--ap-slow) var(--ap-ease) both; }
#lightbox.on img{ animation:ap-pop var(--ap-slow) var(--ap-ease) both; }

@keyframes ap-pop{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } }
@keyframes ap-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes ap-shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
@keyframes ap-spin{ to{ transform:rotate(360deg); } }

/* ---------------------------------------------------------------------------
   8) LOADING — spinner fino elegante + utilitários skeleton/shimmer
   --------------------------------------------------------------------------- */
.carregando::before{
  border-width:2.5px !important;
  border-color:color-mix(in srgb, var(--ap-blue) 22%, transparent) !important;
  border-top-color:var(--ap-blue) !important;
  animation:ap-spin .8s linear infinite !important;
}
.sk{
  background:linear-gradient(90deg,
    var(--sbr-surface-2,#f1f5f9) 25%,
    color-mix(in srgb, var(--sbr-surface-2,#f1f5f9) 55%, var(--sbr-border,#e5e9f0)) 50%,
    var(--sbr-surface-2,#f1f5f9) 75%);
  background-size:200% 100%;
  animation:ap-shimmer 1.3s infinite linear;
  border-radius:10px;
}
.sk-line{ height:14px; margin:8px 0; }
.sk-title{ height:22px; width:52%; margin-bottom:14px; }
.sk-card{ height:120px; border-radius:var(--ap-r-card); }

/* Skeleton de página (mostrado no boot, some quando a tela é desenhada) */
.sk-page{ padding:8px 16px 24px; max-width:1200px; margin:0 auto; }
.sk-page .sk-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media(min-width:768px){ .sk-page .sk-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1100px){ .sk-page .sk-grid{ grid-template-columns:repeat(5,1fr); } }
.sk-page .sk-card{ box-shadow:var(--ap-sh-1); }

/* ---------------------------------------------------------------------------
   9) MICROINTERAÇÕES / FOCO / ACESSIBILIDADE
   --------------------------------------------------------------------------- */
a, .aba, .subtab, .perf-row, .selo, .badge, .ds-badge{
  transition:transform var(--ap-fast) var(--ap-ease),
             background var(--ap-fast) var(--ap-ease),
             color var(--ap-fast) var(--ap-ease),
             box-shadow var(--ap-fast) var(--ap-ease);
}
/* Anel de foco visível e consistente (azul), acessível ao teclado */
:focus-visible{ outline:none; }
.bt:focus-visible, .ds-btn:focus-visible, .acao:focus-visible,
.bn-item:focus-visible, .busca-row:focus-visible, .perf-row:focus-visible,
a:focus-visible, .aba:focus-visible, .subtab:focus-visible{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--ap-blue) 40%, transparent) !important;
  border-radius:12px;
}

/* Respeita quem prefere menos movimento (acessibilidade + performance) */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Rolagem suave e sem "pulos" de layout */
html{ scroll-behavior:smooth; }
img{ content-visibility:auto; }

/* ---------------------------------------------------------------------------
   10) LISTA DE MATERIAIS — ocupa a área útil no desktop e permanece legível
       em telas menores.
   --------------------------------------------------------------------------- */
body.logado #tela{
  box-sizing:border-box;
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
}
.secao-corpo{ width:100%;min-width:0; }
.grade{
  width:100%;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)) !important;
  gap:18px !important;
  align-items:stretch;
}
.ficha{ min-width:0;height:100%; }
.ficha .foto{
  height:clamp(148px,13vw,184px) !important;
  aspect-ratio:auto;
  box-sizing:border-box;
  padding:10px;
  background:#ffffff !important;
}
.ficha .foto img{ object-fit:contain !important; }
.ficha .nome{
  min-height:2.6em;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.estoque-resumo{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:0 0 22px;
}
.estoque-resumo-item{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:14px 16px;
  border:1px solid var(--linha);
  border-radius:14px;
  background:var(--branco);
  box-shadow:var(--sombra);
}
.estoque-resumo-item b{
  font-family:"Barlow Condensed",sans-serif;
  font-size:24px;
  line-height:1;
}
.estoque-resumo-item span{ color:var(--tinta-fraca);font-size:12px; }
.estoque-toolbar{
  display:flex;
  align-items:end;
  gap:12px;
  margin-bottom:22px;
  padding:14px;
  border:1px solid var(--linha);
  border-radius:14px;
  background:var(--branco);
}
.estoque-toolbar .campo{ flex:1;margin:0; }
.estoque-toolbar .campo.ordem{ flex:0 1 230px; }
.vazio.vazio-compacto{ padding:18px 20px; }
.fab-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
body.escuro .ficha .foto{ background:#0f1e30 !important; }
body.escuro .estoque-resumo-item,
body.escuro .estoque-toolbar{
  background:rgba(22,39,61,.94);
  border-color:var(--linha);
}
@media(min-width:1500px){
  body.logado #app > #tela{ padding-left:32px;padding-right:32px; }
}
@media(max-width:900px){
  .estoque-resumo{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:640px){
  .grade{ grid-template-columns:1fr !important;gap:14px !important; }
  .ficha .foto{ height:180px !important; }
  .estoque-toolbar{ align-items:stretch;flex-direction:column; }
  .estoque-toolbar .campo.ordem{ flex:1;width:100%; }
}
@media(min-width:641px) and (max-width:899px){
  .grade{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media(max-width:420px){
  .estoque-resumo{ grid-template-columns:1fr 1fr;gap:8px; }
  .estoque-resumo-item{ padding:11px 12px; }
}