/* ============================================================
   Inventario EPM - interface mobile-first para o tecnico
   Alvo: celular na mao, uma mao so, digitacao minima.
   ============================================================ */

:root{
  --bg:#0b1220;
  --bg2:#0f1a2b;
  --card:#111c2e;
  --card2:#16233a;
  --borda:#1e293b;
  --borda2:#26364f;
  --txt:#e2e8f0;
  --txt2:#94a3b8;
  --txt3:#64748b;
  --acento:#22d3ee;
  --acento-esc:#0891b2;
  --ok:#34d399;
  --aviso:#fbbf24;
  --erro:#f87171;
  --raio:12px;
  --topo:58px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html{-webkit-text-size-adjust:100%}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  background:var(--bg);
  color:var(--txt);
  font-size:16px;
  line-height:1.5;
  overscroll-behavior-y:contain;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ---------------------------------------------------------- topo fixo */

.topo{
  position:sticky;top:0;z-index:50;
  background:rgba(11,18,32,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borda);
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;
}
.topo-linha{display:flex;align-items:center;justify-content:space-between;gap:12px}
.topo h1{font-size:17px;font-weight:650;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.logo-topo{height:27px;width:auto;display:block}
.ponto{width:9px;height:9px;border-radius:50%;background:var(--acento);flex:none}
.topo a{color:var(--txt2);text-decoration:none;font-size:13.5px;padding:8px 10px;border-radius:9px}
.topo a:active{background:var(--card)}

/* ---------------------------------------------------------- busca */

.busca{
  position:sticky;top:var(--topo);z-index:45;
  background:var(--bg);
  padding:12px 16px 10px;
  border-bottom:1px solid var(--borda);
}
.busca input{
  width:100%;padding:15px 16px 15px 44px;
  font-size:17px;                      /* 17px = sem zoom no iOS */
  background:var(--card);border:1.5px solid var(--borda);
  border-radius:var(--raio);color:var(--txt);outline:none;
  font-family:inherit;transition:border-color .15s;
}
.busca input:focus{border-color:var(--acento)}
.busca .lupa{
  position:absolute;left:29px;top:50%;transform:translateY(-50%);
  color:var(--txt3);pointer-events:none;font-size:17px;
}
.busca-rodape{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-size:12.5px;color:var(--txt3)}

/* ---------------------------------------------------------- lista */

.lista{padding:10px 16px 100px}
.item{
  display:flex;align-items:center;gap:13px;
  background:var(--card);border:1.5px solid var(--borda);
  border-radius:var(--raio);padding:14px 15px;margin-bottom:9px;
  cursor:pointer;transition:border-color .12s,background .12s;
}
.item:active{background:var(--card2);border-color:var(--borda2)}
.item.pronto{border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.05)}
.icone{
  width:40px;height:40px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--card2);font-size:18px;
}
.item.pronto .icone{background:rgba(52,211,153,.15)}
.item-txt{min-width:0;flex:1}
.item-nome{font-weight:600;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-nome.vazio{color:var(--txt3);font-style:italic;font-weight:500}
.item-sub{font-size:12.5px;color:var(--txt3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:2px}
.selo{
  font-size:11px;padding:3px 8px;border-radius:20px;flex:none;
  background:var(--card2);color:var(--txt3);font-weight:600;
}
.selo.ok{background:rgba(52,211,153,.16);color:var(--ok)}

.vazio-msg{text-align:center;padding:50px 20px;color:var(--txt3);font-size:14px;line-height:1.7}

/* ---------------------------------------------------------- botao flutuante */

.fab{
  position:fixed;right:18px;z-index:60;
  /* acima da barra de botoes — antes ficava por cima do botao "Setores" */
  bottom:calc(96px + env(safe-area-inset-bottom));
  width:54px;height:54px;border-radius:27px;border:none;
  background:var(--acento);color:#04121a;font-size:25px;font-weight:300;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(34,211,238,.35);cursor:pointer;
}
.fab:active{transform:scale(.94)}

/* ---------------------------------------------------------- barra inferior */

.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  background:rgba(11,18,32,.96);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--borda);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex;gap:10px;
}

/* ---------------------------------------------------------- formulario */

.form{padding:16px 16px 120px}
.grupo{margin-bottom:20px}
.grupo > label{
  display:block;font-size:12.5px;color:var(--txt2);
  margin-bottom:7px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
}
/* qualquer campo de texto, inclusive senha e busca.
   (antes so pegava text/number — o campo de senha ficava sem estilo) */
.grupo input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.grupo textarea,
.grupo select{
  width:100%;padding:14px 15px;font-size:17px;
  background:var(--card);border:1.5px solid var(--borda);
  border-radius:var(--raio);color:var(--txt);outline:none;
  font-family:inherit;transition:border-color .15s;
  -webkit-appearance:none;appearance:none;
}
.grupo input:focus,.grupo textarea:focus,.grupo select:focus{border-color:var(--acento)}
.grupo textarea{min-height:80px;resize:vertical;line-height:1.5}
.dica{font-size:12px;color:var(--txt3);margin-top:6px;line-height:1.5}

/* chips de escolha rapida */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  padding:10px 14px;border-radius:9px;font-size:14px;font-weight:500;
  background:var(--card);border:1.5px solid var(--borda);color:var(--txt2);
  cursor:pointer;transition:all .12s;font-family:inherit;
}
.chip:active{transform:scale(.96)}
.chip.on{background:rgba(34,211,238,.14);border-color:var(--acento);color:var(--acento);font-weight:600}

/* linha de campos lado a lado */
.linha{display:flex;gap:10px}
.linha > *{flex:1;min-width:0}

/* ---------------------------------------------------------- botoes */

.bt{
  flex:1;padding:16px;font-size:16px;font-weight:600;
  border-radius:var(--raio);border:none;cursor:pointer;
  font-family:inherit;transition:opacity .12s,transform .12s;
}
.bt:active{opacity:.82;transform:scale(.985)}
.bt-primario{background:var(--acento);color:#04121a}
.bt-secundario{background:var(--card2);color:var(--txt);border:1.5px solid var(--borda)}
.bt-perigo{background:rgba(248,113,113,.14);color:var(--erro);border:1.5px solid rgba(248,113,113,.3)}
.bt:disabled{opacity:.45;cursor:not-allowed}
.bt-bloco{width:100%;flex:none}

/* ---------------------------------------------------------- cartoes de secao */

.sec{
  background:var(--card);border:1.5px solid var(--borda);
  border-radius:var(--raio);padding:16px;margin-bottom:14px;
}
.sec-titulo{
  font-size:12.5px;color:var(--txt2);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;
  margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.sec-titulo .num{
  width:21px;height:21px;border-radius:50%;background:var(--acento);
  color:#04121a;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:none;
}

/* leitura (MAC/IP ja preenchidos) */
.leitura{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--borda);font-size:14.5px;
}
.leitura:last-child{border-bottom:none}
.leitura .rot{color:var(--txt3);font-size:13px}
.leitura .val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:var(--txt)}
.leitura .val.auto{color:var(--ok)}

.auto-selo{
  font-size:10.5px;background:rgba(52,211,153,.14);color:var(--ok);
  padding:2px 7px;border-radius:20px;margin-left:7px;font-weight:700;
  font-family:inherit;vertical-align:middle;
}

/* ---------------------------------------------------------- avisos */

.aviso{
  padding:13px 15px;border-radius:10px;font-size:13px;line-height:1.55;margin-bottom:16px;
}
.aviso.amarelo{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);color:var(--aviso)}
.aviso.verde{background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.25);color:var(--ok)}
.aviso.vermelho{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25);color:var(--erro)}

/* ---------------------------------------------------------- login */

.tela-login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;padding-bottom:max(24px,env(safe-area-inset-bottom));
}
.login-caixa{width:100%;max-width:380px}
.login-logo{display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.logo-login{height:50px;width:auto}
.login-titulo{font-size:18px;font-weight:650;letter-spacing:-.02em;text-align:center;margin-bottom:6px}
.login-sub{color:var(--txt3);font-size:13px;text-align:center;margin-bottom:26px;line-height:1.5}
.login-rodape{text-align:center;margin-top:22px;font-size:11.5px;color:var(--txt3);line-height:1.6}

/* ---------------------------------------------------------- progresso */

.progresso{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;background:var(--bg2);
  border-bottom:1px solid var(--borda);font-size:13px;color:var(--txt2);
}
.barra-prog{flex:1;height:5px;background:var(--borda);border-radius:3px;overflow:hidden}
.barra-prog i{display:block;height:100%;background:var(--acento);border-radius:3px;transition:width .3s}

/* ---------------------------------------------------------- toast */

.toast{
  position:fixed;left:50%;bottom:100px;transform:translateX(-50%) translateY(20px);
  background:var(--card2);border:1.5px solid var(--borda2);
  color:var(--txt);padding:13px 20px;border-radius:11px;font-size:14.5px;
  opacity:0;pointer-events:none;transition:all .25s;z-index:99;
  box-shadow:0 10px 34px rgba(0,0,0,.5);max-width:88vw;text-align:center;
}
.toast.mostra{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:rgba(52,211,153,.4);color:var(--ok)}
.toast.erro{border-color:rgba(248,113,113,.4);color:var(--erro)}

/* ---------------------------------------------------------- memoria por slot */

.slot-linha{
  padding:13px 0;
  border-bottom:1px solid var(--borda);
}
.slot-linha:last-child{border-bottom:none}
.slot-rot{
  font-size:13px;color:var(--txt2);font-weight:600;
  margin-bottom:9px;display:flex;align-items:center;gap:7px;
}
.slot-rot::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--borda2);flex:none;
}
.total-ram{
  margin-top:14px;padding:12px 15px;border-radius:10px;
  background:rgba(34,211,238,.07);
  border:1px solid rgba(34,211,238,.22);
  font-size:13.5px;color:var(--acento);line-height:1.5;
}
.total-ram b{font-size:15px}

/* ---------------------------------------------------------- desktop */

@media (min-width:720px){
  .lista,.form{max-width:680px;margin:0 auto}
  .busca{max-width:680px;margin:0 auto;border-radius:0}
  .barra{max-width:680px;margin:0 auto;border-radius:0}
}