/* ============================================================
   Sistema Almoxarifado — design tokens
   Estilo: SaaS moderno · índigo · Manrope + JetBrains Mono
   ============================================================ */

:root {
  /* superfícies */
  --bg:            #F5F8F7;
  --superficie:    #FFFFFF;
  --superficie-2:  #FAFCFB;
  --superficie-3:  #EEF3F2;

  /* marca — teal institucional Tupperware */
  --marca-950: #062B28;
  --marca-900: #073531;
  --marca-800: #0B4F4A;
  --marca-700: #0B7167;
  --marca-600: #0E8478;
  --marca-500: #109C8C;
  --marca-200: #8FC4BE;
  --marca-100: #CFE5E2;
  --marca-50:  #E8F2F0;

  /* assinatura BeFra — barra de quatro cores do grupo */
  --befra-1: #F0902A;
  --befra-2: #E8542A;
  --befra-3: #8E3FA8;
  --befra-4: #29ABE2;

  /* texto */
  --texto:        #12201E;
  --texto-suave:  #556663;
  --texto-fraco:  #8CA09C;

  /* traços */
  --borda:        #E1E9E7;
  --borda-forte:  #CDDBD8;

  /* semânticas */
  --alerta:       #9E2A12;  --alerta-bg:  #FDE9E4;  --alerta-borda: #F6C9BD;
  --atencao:      #7A4D04;  --atencao-bg: #FDF0DA;  --atencao-borda:#F5DCAE;
  --ok:           #115C2E;  --ok-bg:      #DFF3E6;  --ok-borda:     #BCE3C9;
  --info:         #1E4FA3;  --info-bg:    #E5EEFC;  --info-borda:   #C3D8F5;
  --neutro-bg:    #EFEFF6;

  --raio:    10px;
  --raio-sm: 7px;
  --raio-lg: 14px;

  --sombra-sm: 0 1px 2px rgba(6,43,40,.06);
  --sombra:    0 2px 8px rgba(6,43,40,.08), 0 1px 2px rgba(6,43,40,.05);
  --sombra-lg: 0 12px 32px rgba(6,43,40,.14), 0 2px 8px rgba(6,43,40,.07);

  --fonte: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --topbar-h: 58px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { min-height: 100vh; }

h1 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
h3 { font-size: 14px; font-weight: 600; margin: 0; }
p  { margin: 0; }

.mono { font-family: var(--mono); font-size: .86em; letter-spacing: -.02em; }
.num  { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }

/* ---------- barra superior ---------- */

.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  background: linear-gradient(180deg, var(--marca-900) 0%, var(--marca-950) 100%);
  display: flex; align-items: center; gap: 6px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 4px 18px rgba(6,43,40,.26);
}

.topbar-marca {
  color: #fff; font-weight: 700; font-size: 15px;
  letter-spacing: -.02em; margin-right: 20px;
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
}
.topbar-marca .sigla {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--marca-600);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}

/* Logo da marca. O arquivo em icons/ é a versão BRANCA, usada como está
   sobre a barra escura. Nas telas de fundo claro (login e terminal) o
   filtro inverte para escuro, para não sumir no branco. */
.logo-marca {
  height: 19px; width: auto; display: block;
}
.topbar-sistema {
  padding-left: 11px; margin-left: 2px;
  border-left: 1px solid rgba(255,255,255,.22);
  font-weight: 600; font-size: 14px; color: rgba(255,255,255,.9);
}

.topbar a {
  color: var(--marca-200);
  text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  padding: 7px 12px; border-radius: var(--raio-sm);
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.topbar a:hover { background: rgba(255,255,255,.09); color: #fff; }
.topbar a.ativo {
  background: rgba(255,255,255,.16); color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}

.topbar-fim { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar-usuario { color: #8FC4BE; font-size: 12.5px; text-align: right; line-height: 1.3; }
.topbar-usuario strong { display: block; color: #fff; font-weight: 600; }

.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.17); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: -.02em;
  border: 1px solid rgba(255,255,255,.2);
  flex-shrink: 0;
}

/* Assinatura do grupo BeFra: barra de quatro cores. Atravessa a tela
   inteira logo abaixo do menu, e reaparece no rodapé do cartão do terminal. */
.marca-barra {
  display: flex; height: 4px; width: 100%;
}
.marca-barra i {
  flex: 1; display: block; height: 100%;
}
.marca-barra i:nth-child(1) { background: var(--befra-1); }
.marca-barra i:nth-child(2) { background: var(--befra-2); }
.marca-barra i:nth-child(3) { background: var(--befra-3); }
.marca-barra i:nth-child(4) { background: var(--befra-4); }

.marca-barra.arredondada { border-radius: 999px; overflow: hidden; height: 5px; }

/* ---------- conteúdo ---------- */

.conteudo { max-width: 1140px; margin: 0 auto; padding: 26px 20px 60px; }

.pagina-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.pagina-sub { color: var(--texto-suave); font-size: 13.5px; margin-top: 3px; }

/* ---------- cartões ---------- */

.card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
}
.card-pad { padding: 18px 20px; }

.card-topo {
  padding: 14px 20px;
  border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* ---------- métricas ---------- */

.metricas {
  display: grid; gap: 12px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

.metrica {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  padding: 15px 17px;
  box-shadow: var(--sombra-sm);
  position: relative; overflow: hidden;
  transition: box-shadow .18s, transform .18s;
}
.metrica:hover { box-shadow: var(--sombra); transform: translateY(-1px); }
.metrica::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--marca-500);
}
.metrica.m-alerta::before  { background: #C4321A; }
.metrica.m-atencao::before { background: #CF8A12; }
.metrica.m-ok::before      { background: #1F7A44; }
.metrica.m-neutro::before  { background: var(--borda-forte); }

.metrica-rotulo {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-fraco);
}
.metrica-valor {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 27px; font-weight: 600; letter-spacing: -.045em;
  margin-top: 5px; line-height: 1.1;
}
.metrica-nota { font-size: 12px; color: var(--texto-suave); margin-top: 3px; }

/* ---------- badges ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: -.01em;
  border: 1px solid transparent; white-space: nowrap;
}
.badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .75;
}
.badge-sem-ponto::before { display: none; }

.badge-comprar  { background: var(--alerta-bg);  color: var(--alerta);  border-color: var(--alerta-borda); }
.badge-atencao  { background: var(--atencao-bg); color: var(--atencao); border-color: var(--atencao-borda); }
.badge-excesso  { background: var(--atencao-bg); color: var(--atencao); border-color: var(--atencao-borda); }
.badge-normal   { background: var(--ok-bg);      color: var(--ok);      border-color: var(--ok-borda); }
.badge-info     { background: var(--info-bg);    color: var(--info);    border-color: var(--info-borda); }
.badge-neutro   { background: var(--neutro-bg);  color: var(--texto-suave); border-color: var(--borda); }
.badge-marca    { background: var(--marca-50);  color: var(--marca-700); border-color: var(--marca-100); }

/* ---------- controles ---------- */

button {
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--raio-sm);
  border: 1px solid var(--borda-forte);
  background: var(--superficie); color: var(--texto);
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
  box-shadow: var(--sombra-sm);
}
button:hover:not(:disabled) { background: var(--superficie-3); border-color: var(--texto-fraco); }
button:active:not(:disabled) { transform: scale(.985); }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

button.primario {
  background: var(--marca-700); border-color: var(--marca-800); color: #fff;
  box-shadow: 0 1px 3px rgba(6,43,40,.32);
}
button.primario:hover:not(:disabled) { background: var(--marca-600); border-color: var(--marca-700); }

button.perigo { color: var(--alerta); border-color: var(--alerta-borda); background: var(--alerta-bg); }
button.perigo:hover:not(:disabled) { background: #FBDDD5; border-color: var(--alerta); }

button.discreto { background: transparent; border-color: transparent; box-shadow: none; color: var(--texto-suave); }
button.discreto:hover:not(:disabled) { background: var(--superficie-3); color: var(--texto); }

button.grande { padding: 12px 18px; font-size: 15px; border-radius: var(--raio); }

input, select, textarea {
  font-family: inherit; font-size: 14px;
  padding: 8px 11px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda-forte);
  background: var(--superficie); color: var(--texto);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
input::placeholder { color: var(--texto-fraco); }
input:hover, select:hover { border-color: var(--texto-fraco); }
input:focus, select:focus, textarea:focus {
  border-color: var(--marca-500);
  box-shadow: 0 0 0 3px var(--marca-50);
}
input:disabled, select:disabled { background: var(--superficie-3); color: var(--texto-fraco); }

label.campo { display: block; }
label.campo > span {
  display: block; font-size: 11.5px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--texto-fraco); margin-bottom: 5px;
}
label.campo > input, label.campo > select { width: 100%; }

.barra-filtros {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  margin-bottom: 16px;
}
.busca { position: relative; flex: 1 1 240px; }
.busca input { width: 100%; padding-left: 33px; }
.busca .lupa {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--texto-fraco); font-size: 15px; pointer-events: none;
}

/* ---------- tabela ---------- */

.tabela-envolve { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

thead th {
  text-align: left; padding: 10px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-fraco);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--superficie-2); }
tbody tr:last-child td { border-bottom: none; }

.td-direita { text-align: right; }

/* ---------- item da lista (código + descrição) ---------- */

.item-nome { font-weight: 600; letter-spacing: -.01em; }
.item-cod {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--texto-fraco); letter-spacing: -.02em; margin-top: 1px;
}

.ficha { width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--marca-50); color: var(--marca-700);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
}

/* ---------- barra de nível (saldo x mín/máx) ---------- */

.nivel { width: 108px; }
.nivel-trilho {
  height: 5px; border-radius: 999px; background: var(--superficie-3);
  position: relative; overflow: hidden;
}
.nivel-preenche { height: 100%; border-radius: 999px; background: var(--marca-500); }
.nivel-preenche.n-alerta  { background: #C4321A; }
.nivel-preenche.n-atencao { background: #CF8A12; }
.nivel-preenche.n-ok      { background: #1F7A44; }
.nivel-marca {
  position: absolute; top: -2px; width: 2px; height: 9px;
  background: var(--texto-fraco); border-radius: 1px; opacity: .6;
}
.nivel-legenda {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--texto-fraco); margin-top: 4px; letter-spacing: -.02em;
}

/* ---------- estados ---------- */

.vazio { padding: 46px 20px; text-align: center; color: var(--texto-suave); }
.vazio .icone {
  width: 46px; height: 46px; border-radius: 14px; margin: 0 auto 12px;
  background: var(--superficie-3); display: grid; place-items: center;
  font-size: 22px; color: var(--texto-fraco);
}
.vazio h3 { margin-bottom: 4px; }

.aviso {
  border-radius: var(--raio); padding: 14px 16px;
  border: 1px solid; font-size: 13.5px;
}
.aviso-alerta  { background: var(--alerta-bg);  border-color: var(--alerta-borda);  color: var(--alerta); }
.aviso-atencao { background: var(--atencao-bg); border-color: var(--atencao-borda); color: var(--atencao); }
.aviso-ok      { background: var(--ok-bg);      border-color: var(--ok-borda);      color: var(--ok); }

.esqueleto {
  background: linear-gradient(90deg, var(--superficie-3) 25%, #E3EDEB 37%, var(--superficie-3) 63%);
  background-size: 400% 100%;
  animation: brilho 1.3s ease infinite;
  border-radius: var(--raio-sm);
}
@keyframes brilho { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ---------- abas internas ---------- */

.abas { display: flex; gap: 2px; padding: 3px; background: var(--superficie-3);
  border-radius: var(--raio); width: fit-content; }
.abas button {
  background: transparent; border: none; box-shadow: none;
  color: var(--texto-suave); padding: 7px 15px; border-radius: var(--raio-sm);
}
.abas button:hover:not(.ativa) { background: rgba(255,255,255,.6); color: var(--texto); }
.abas button.ativa { background: var(--superficie); color: var(--marca-700); box-shadow: var(--sombra-sm); }

/* ---------- zona de upload ---------- */

.dropzone {
  display: block; text-align: center; cursor: pointer;
  padding: 34px 20px;
  border: 1.5px dashed var(--borda-forte);
  border-radius: var(--raio-lg);
  background: var(--superficie-2);
  transition: border-color .18s, background .18s;
}
.dropzone:hover { border-color: var(--marca-500); background: var(--marca-50); }
.dropzone .icone { font-size: 26px; color: var(--marca-500); }
.dropzone .titulo { font-weight: 600; margin-top: 8px; }
.dropzone .dica { font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }

/* ---------- terminal (quiosque) ---------- */

/* Tela do balcão: fundo institucional escuro, marca fora do cartão,
   assinatura do grupo atravessando o topo do cartão. */
.terminal-tela {
  min-height: 100vh; display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, #0E5F58 0%, rgba(14,95,88,0) 62%),
    linear-gradient(170deg, #0A4A45 0%, #062B28 58%, #04201E 100%);
}

.terminal-conjunto { width: 100%; max-width: 430px; }

.terminal-logo {
  display: block; height: 34px; width: auto;
  margin: 0 auto 26px;
}

.terminal-cartao {
  background: var(--superficie);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.34), 0 4px 14px rgba(0,0,0,.18);
}
.terminal-cartao .marca-barra { height: 5px; }
.terminal-corpo { padding: 28px; }

.terminal-titulo { text-align: center; }

.terminal-grupo {
  margin-top: 22px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.terminal-grupo span {
  font-size: 10px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.42);
}
.terminal-grupo img { height: 22px; width: auto; opacity: .85; }
.pin-input {
  font-family: var(--mono); font-size: 24px; text-align: center;
  letter-spacing: .5em; padding: 13px; width: 100%;
}

@media (max-width: 720px) {
  .topbar { padding: 0 12px; overflow-x: auto; }
  .topbar-marca { margin-right: 10px; }
  .topbar-usuario { display: none; }
  .conteudo { padding: 18px 13px 50px; }
  .metrica-valor { font-size: 23px; }
}

/* ---------- modal ---------- */

.modal-fundo {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6, 43, 40, .38);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 20px;
  animation: surge .16s ease;
}
.modal-caixa {
  width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
  box-shadow: var(--sombra-lg);
  animation: sobe .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes sobe  { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }

.modal-topo {
  position: sticky; top: 0; z-index: 1;
  background: var(--superficie);
  padding: 16px 20px;
  border-bottom: 1px solid var(--borda);
  border-radius: 16px 16px 0 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.modal-rodape {
  position: sticky; bottom: 0;
  background: var(--superficie);
  padding: 14px 20px;
  border-top: 1px solid var(--borda);
  border-radius: 0 0 16px 16px;
  display: flex; gap: 8px; flex-wrap: wrap;
}

tr.clicavel { cursor: pointer; }
tr.clicavel:hover { background: var(--marca-50); }

.upload-compacto {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; width: 100%;
  border: 1.5px dashed var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie-2);
  cursor: pointer; text-align: left;
  transition: border-color .18s, background .18s;
}
.upload-compacto:hover { border-color: var(--marca-500); background: var(--marca-50); }