*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#f1f5f9;color:#0f172a;font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}

/* ===================== BARRA SUPERIOR ===================== */
.topo{background:#1e293b;color:#fff;position:sticky;top:0;z-index:500}
.topo-conteudo{max-width:1000px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.marca{font-weight:800;letter-spacing:.02em}
.topo-acoes{display:flex;align-items:center;gap:8px}
.badge-admin{
  background:#16a34a;color:#fff;font-size:.7rem;font-weight:900;
  letter-spacing:.08em;padding:4px 10px;border-radius:999px;
}
.botao-sair{
  background:#dc2626;color:#fff;border:0;border-radius:8px;
  padding:8px 14px;font-weight:800;font-size:.85rem;cursor:pointer;
}
.botao-sair:hover{background:#b91c1c}
.engrenagem{background:transparent;border:0;color:#94a3b8;font-size:1.3rem;cursor:pointer;padding:6px 10px;border-radius:8px;opacity:.65;transition:opacity .15s}
.engrenagem:hover,.engrenagem:focus{opacity:1;color:#fff;background:#334155}

/* ===================== LAYOUT GERAL ===================== */
.view.hidden{display:none}
.container{width:min(1000px,calc(100% - 28px));margin:24px auto 48px}
.container-estreito{width:min(560px,calc(100% - 28px))}
h1{font-size:clamp(1.5rem,4vw,2.2rem);margin:6px 0}
.tag{background:#dbeafe;color:#1d4ed8;padding:5px 10px;border-radius:999px;font-size:.78rem;font-weight:800}
.cabecalho-view{margin-bottom:8px}
.voltar{background:none;border:0;color:#2563eb;font-weight:700;cursor:pointer;padding:6px 0;font-size:.95rem}

/* ===================== CARDS ===================== */
.card{background:#fff;border:1px solid #dbe3ee;border-radius:18px;padding:22px;margin:16px 0;box-shadow:0 8px 24px #0f172a0f}
.card-central{text-align:center}
.card-central h1{margin-top:4px}
.subtitulo{color:#64748b;margin-bottom:18px}
.aviso{border-color:#fde68a;background:#fffbeb}
.aviso h2{color:#92400e;margin-top:0}
.sugestao{border-color:#93c5fd;background:#eff6ff}
.sugestao h2{color:#1d4ed8;margin-top:0}
.fonte-sugestao{color:#475569;font-size:.85rem;margin-top:-8px}
.mensagem-busca-externa{color:#92400e;font-size:.85rem}
.mensagem-busca-externa.hidden{display:none}

/* ===================== LEITOR SEMPRE VISÍVEL ===================== */
.leitor-wrapper{
  position:relative;width:100%;max-width:420px;margin:0 auto 16px;
  border-radius:16px;overflow:hidden;background:#000;min-height:260px;
}
.leitor-wrapper #leitorCodigoPublico,
.leitor-wrapper #leitorCodigoAdmin{width:100%;min-height:260px}
.leitor-wrapper-admin{max-width:360px;min-height:220px}
.leitor-wrapper-admin #leitorCodigoAdmin{min-height:220px}
.leitor-mira{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:70%;height:32%;border:3px solid #22c55e;border-radius:12px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.25);pointer-events:none;
  animation:pulsar-mira 1.6s infinite;
}
@keyframes pulsar-mira{
  0%,100%{border-color:#22c55e;box-shadow:0 0 0 9999px rgba(0,0,0,.25),0 0 12px #22c55e}
  50%{border-color:#4ade80;box-shadow:0 0 0 9999px rgba(0,0,0,.25),0 0 24px #4ade80}
}
.leitor-status{
  position:absolute;left:0;right:0;bottom:0;background:rgba(15,23,42,.75);
  color:#fff;font-size:.85rem;padding:6px 10px;text-align:center;
}
.busca-camera-wrapper{margin-bottom:14px}

/* ===================== BUSCA PÚBLICA ===================== */
.busca-publica{display:flex;flex-direction:column;gap:10px}
.busca-publica input[type="text"]{border:2px solid #cbd5e1;border-radius:12px;padding:16px;font-size:1.2rem;text-align:center}
.busca-publica input:focus{outline:none;border-color:#2563eb}
.busca-publica-botoes{display:flex;gap:10px}
.busca-publica-botoes button{flex:1}

/* ===================== RESULTADO PÚBLICO ===================== */
.card-resultado h2{margin-top:0;font-size:1.4rem;text-align:center}
.destaque-preco-loja{
  margin-top:18px;background:linear-gradient(135deg,#166534,#22c55e);
  color:#fff;border-radius:16px;padding:28px 18px;text-align:center;
  box-shadow:0 10px 26px rgba(22,101,52,.35);
}
.destaque-preco-loja span{display:block;font-size:.95rem;opacity:.92;letter-spacing:.05em;text-transform:uppercase}
.destaque-preco-loja strong{display:block;font-size:clamp(2.4rem,11vw,4rem);font-weight:900;line-height:1.05;margin-top:8px}
.aviso-temporizador{
  margin-top:18px;color:#475569;font-size:.95rem;text-align:center;
}
.aviso-temporizador strong{color:#1d4ed8;font-size:1.1rem}

/* ===================== CARD BUSCANDO (RADAR) ===================== */
.buscando-card{text-align:center;border-color:#93c5fd;background:#eff6ff}
.radar{
  position:relative;width:140px;height:140px;margin:8px auto 16px;
  display:grid;place-items:center;
}
.radar-onda{
  position:absolute;inset:0;border:3px solid #2563eb;border-radius:50%;
  opacity:0;animation:radar-pulso 2s ease-out infinite;
}
.radar-onda:nth-child(2){animation-delay:.6s}
.radar-onda:nth-child(3){animation-delay:1.2s}
@keyframes radar-pulso{
  0%{transform:scale(.35);opacity:.9}
  100%{transform:scale(1);opacity:0}
}
.radar-centro{
  width:64px;height:64px;border-radius:50%;background:#2563eb;color:#fff;
  display:grid;place-items:center;font-size:1.6rem;z-index:1;
  animation:radar-girar 2.4s linear infinite;
}
.radar-externo .radar-centro{background:#c2410c}
.radar-externo .radar-onda{border-color:#ea580c}
@keyframes radar-girar{
  0%{transform:rotate(0)}
  100%{transform:rotate(360deg)}
}
.barra-progresso-indeterminada{
  height:6px;background:#dbeafe;border-radius:999px;overflow:hidden;margin-top:12px;
}
.barra-progresso-indeterminada div{
  height:100%;width:40%;background:#2563eb;border-radius:999px;
  animation:indeterminada 1.2s ease-in-out infinite;
}
@keyframes indeterminada{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(300%)}
}

/* ===================== BUSCA ADMIN ===================== */
.busca{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.busca input{flex:1;min-width:180px;border:2px solid #cbd5e1;border-radius:10px;padding:12px 14px;font-size:1.05rem}
.busca input:focus{outline:none;border-color:#2563eb}
.botao-camera{flex:0 0 auto;font-size:1.1rem;padding:12px 16px}
.mensagem{color:#64748b;margin-top:10px}

/* ===================== BOTÕES ===================== */
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
button{border:0;border-radius:10px;padding:12px 18px;font-weight:750;cursor:pointer;background:#e2e8f0;font-size:.95rem}
button.primary{background:#2563eb;color:#fff}
button.secondary{background:#e0e7ff;color:#3730a3}
button.danger{background:#fee2e2;color:#b91c1c}
button.bloco{width:100%;padding:16px;font-size:1.05rem;margin-bottom:10px}
button:disabled{opacity:.45;cursor:not-allowed}

/* ===================== PROGRESSO ===================== */
.progress{height:14px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.progress div{height:100%;width:0;background:#2563eb;transition:width .2s}

/* ===================== GRID DE DADOS ===================== */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.grid div,.modal-resumo span{background:#f8fafc;border-radius:12px;padding:14px}
.grid span,.modal-resumo span{display:block;color:#64748b;font-size:.85rem}
.grid strong,.modal-resumo strong{display:block;color:#0f172a;word-break:break-word}
.hidden{display:none}
.errors{margin-top:16px;background:#fff1f2;color:#9f1239;border-radius:12px;padding:14px;white-space:pre-wrap}

/* ===================== DESTAQUES NA CONSULTA ADMIN ===================== */
.grid-destaque{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0;
}
.grid-destaque-3{
  grid-template-columns:repeat(3,1fr);
}
.item-destaque{
  border-radius:16px;padding:20px 16px;text-align:center;color:#fff;
  box-shadow:0 8px 22px rgba(15,23,42,.18);
}
.item-destaque span{display:block;font-size:.85rem;opacity:.92;text-transform:uppercase;letter-spacing:.04em}
.item-destaque strong{display:block;font-size:clamp(1.6rem,5.5vw,2.4rem);font-weight:900;margin-top:6px;line-height:1.1}
.destaque-loja{background:linear-gradient(135deg,#166534,#22c55e)}
.destaque-atacado{background:linear-gradient(135deg,#1d4ed8,#3b82f6)}
.destaque-estoque{background:linear-gradient(135deg,#7c2d12,#ea580c)}
.grid-secundario div{background:#f8fafc}

/* ===================== ABAS (ADMIN) ===================== */
.tabs{display:flex;gap:8px;margin:18px 0;flex-wrap:wrap}
.tab-btn{background:#e2e8f0;color:#334155;border-radius:999px;padding:10px 18px;font-weight:700}
.tab-btn.active{background:#1e293b;color:#fff}
.painel.hidden{display:none}

/* ===================== FORMULÁRIO DE CADASTRO ===================== */
.form-cadastro{display:flex;flex-direction:column;gap:14px;margin:16px 0}
.form-cadastro label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:#475569;font-weight:600}
.form-cadastro input,.form-cadastro select{border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;font-size:1rem;color:#0f172a;background:#fff}
.campo-nova-familia{margin-top:8px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* ===================== LISTAS ===================== */
.lista-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.lista{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.item-lista{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.item-lista .info strong{display:block}
.item-lista .info span{color:#64748b;font-size:.85rem;display:block}
.item-lista .acoes{display:flex;gap:8px;flex-wrap:wrap}
.item-lista .acoes button{padding:8px 12px;font-size:.85rem}
.item-estoque .saldo-baixo{color:#b91c1c;font-weight:900}
.lista-header-acoes{display:flex;gap:8px;flex-wrap:wrap}

.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:800;margin-top:4px}
.badge.PENDENTE{background:#fef3c7;color:#92400e}
.badge.PRONTO_EXPORTAR{background:#dbeafe;color:#1d4ed8}
.badge.EXPORTADO{background:#dcfce7;color:#166534}
.badge.CANCELADO{background:#fee2e2;color:#991b1b}

/* ===================== CONFIGURAÇÕES ===================== */
.linha-config{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.linha-config label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:#475569;font-weight:600}
.linha-config input{border:1px solid #cbd5e1;border-radius:8px;padding:10px;width:120px}

/* ===================== CONFIGURAR REGRAS DE ESTOQUE BAIXO ===================== */
.lista-regras{
  display:flex;flex-direction:column;gap:14px;margin-top:18px;
}

.regra-item{
  position:relative;
  background:#fff;
  border:1px solid #e2e8f0;
  border-left:5px solid #2563eb;
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 2px 8px rgba(15,23,42,.05);
  transition:box-shadow .15s, border-color .15s;
}
.regra-item:hover{
  border-color:#c7d2fe;
  box-shadow:0 6px 18px rgba(37,99,235,.12);
}

.regra-item-topo{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
}
.regra-numero{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:#eff6ff;color:#2563eb;font-weight:900;font-size:.85rem;
  display:grid;place-items:center;
}
.regra-nome-input{
  flex:1;min-width:0;border:0;border-bottom:2px solid transparent;background:transparent;
  font-size:1.08rem;font-weight:800;color:#0f172a;padding:4px 2px;
  transition:border-color .15s;
}
.regra-nome-input:focus{outline:none;border-bottom-color:#2563eb}
.regra-nome-input::placeholder{color:#94a3b8;font-weight:600}

.regra-remover{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:#fef2f2;color:#dc2626;border:0;font-size:1.2rem;font-weight:900;
  cursor:pointer;display:grid;place-items:center;line-height:1;padding:0;
  transition:background .15s,color .15s,transform .1s;
}
.regra-remover:hover{background:#fecaca;color:#991b1b}
.regra-remover:active{transform:scale(.92)}

.regra-corpo{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.regra-campo{display:flex;flex-direction:column;gap:6px;margin:0}
.regra-campo span{font-size:.72rem;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.05em}
.regra-campo input{
  border:1.5px solid #e2e8f0;border-radius:9px;padding:10px 12px;
  font-size:.92rem;color:#0f172a;background:#f8fafc;width:100%;
  font-family:inherit;transition:border-color .15s,background .15s,box-shadow .15s;
}
.regra-campo input:focus{
  outline:none;border-color:#2563eb;background:#fff;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.regra-campo-limite input{text-align:center;font-weight:900;color:#1d4ed8;font-size:1.05rem}

.lista-regras-acoes{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;
  padding-top:16px;border-top:1px dashed #e2e8f0;
}
.card .lista-regras + .actions{margin-top:0}

@media(max-width:640px){
  .regra-corpo{grid-template-columns:1fr}
  .regra-nome-input{font-size:1rem}
}

/* ===================== MODAIS ===================== */
.modal{position:fixed;inset:0;background:#0f172a99;display:grid;place-items:center;padding:18px;z-index:9999}
.modal.hidden{display:none}
.modal-card{width:min(500px,100%);max-height:90vh;overflow-y:auto;background:#fff;border-radius:20px;padding:26px;box-shadow:0 24px 70px #0f172a4d}
.modal-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#fff7ed;color:#c2410c;font-size:1.5rem;font-weight:900}
.modal-resumo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.confirm-check{display:flex;gap:10px;margin:16px 0}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.campo-toggle{display:flex;align-items:center;gap:10px;margin:10px 0;font-weight:600;color:#334155}
.campo-toggle input[type="number"]{flex:1;border:1px solid #cbd5e1;border-radius:8px;padding:8px 10px}
.campo-toggle input[type="checkbox"]{width:18px;height:18px}
.campo-obs{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:.85rem;color:#475569;font-weight:600}
.campo-obs input,.campo-obs select{border:1px solid #cbd5e1;border-radius:8px;padding:10px;width:100%}
.modal-subtitulo{color:#64748b;margin-top:-6px}

#modalSenha .modal-card{text-align:center}
#campoSenha{width:100%;padding:14px;font-size:1.3rem;text-align:center;border:2px solid #cbd5e1;border-radius:10px;margin:14px 0;letter-spacing:.3em}
.mensagem-erro-senha{color:#b91c1c;font-weight:700}
.menu-admin-botoes{margin:18px 0}

.modal-scanner{width:min(420px,100%)}
#leitorCodigo{width:100%;border-radius:12px;overflow:hidden;background:#000;min-height:260px}

/* ===================== OVERLAY / TOAST ===================== */
.overlay{position:fixed;inset:0;background:#0f172a4d;display:grid;place-items:center;z-index:10000}
.overlay.hidden{display:none}
.spinner{width:48px;height:48px;border:5px solid #dbeafe;border-top-color:#2563eb;border-radius:50%;animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#166534;color:#fff;padding:12px 22px;border-radius:999px;font-weight:700;box-shadow:0 10px 30px #0003;z-index:10001;opacity:0;transition:opacity .25s;max-width:90vw;text-align:center}
.toast.show{opacity:1}
.toast.hidden{display:none}

/* ===================== BANNER DE INSTALAÇÃO PWA ===================== */
.banner-instalar{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:9000;
  background:#fff;border:1px solid #cbd5e1;border-radius:16px;
  box-shadow:0 18px 40px #0f172a3d;padding:14px;
  animation:subir-banner .3s ease-out;
}
@keyframes subir-banner{
  from{transform:translateY(120%);opacity:0}
  to{transform:translateY(0);opacity:1}
}
.banner-instalar.hidden{display:none}
.banner-instalar-conteudo{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.banner-icone{
  width:52px;height:52px;border-radius:12px;flex:0 0 auto;background:#1e293b;
}
.banner-texto{flex:1;min-width:180px;display:flex;flex-direction:column}
.banner-texto strong{font-size:1rem;color:#0f172a}
.banner-texto span{font-size:.85rem;color:#475569}
.banner-acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.banner-acoes button{padding:10px 14px;font-size:.9rem}
.banner-acoes .fechar{
  background:transparent;color:#64748b;font-size:1.4rem;font-weight:800;
  padding:4px 10px;line-height:1;
}
.banner-acoes .fechar:hover{color:#0f172a}

/* ===================== MODAL DE INSTRUÇÕES PWA ===================== */
.instrucoes-instalar{display:flex;flex-direction:column;gap:14px;margin:14px 0}
.instrucoes-instalar section{
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px;
}
.instrucoes-instalar section h3{
  margin:0 0 6px;font-size:.95rem;color:#1e293b;
  display:flex;align-items:center;gap:8px;
}
.instrucoes-instalar ol{margin:0;padding-left:20px;color:#334155;font-size:.9rem;line-height:1.6}
.instrucoes-instalar ol li{margin-bottom:4px}
.instrucoes-instalar code{
  background:#e2e8f0;padding:1px 6px;border-radius:6px;
  font-family:ui-monospace,Menlo,monospace;font-size:.85rem;
}

/* ===================== RESPONSIVO ===================== */
@media(min-width:640px){
  .container{margin-top:32px}
}
@media(max-width:640px){
  .container,.container-estreito{width:calc(100% - 20px);margin:16px auto 32px}
  .card{padding:16px;border-radius:14px}
  .actions button{width:100%}
  .linha-config{width:100%;flex-direction:column;align-items:stretch}
  .linha-config input{width:100%}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .grid-destaque,.grid-destaque-3{grid-template-columns:1fr}
  .item-lista{flex-direction:column;align-items:flex-start}
  .item-lista .acoes{width:100%}
  .item-lista .acoes button{flex:1}
  .modal-actions{flex-direction:column}
  .modal-actions button{width:100%}
  .busca-publica-botoes{flex-direction:column}
  .tabs{justify-content:stretch}
  .tab-btn{flex:1;text-align:center}
  .leitor-wrapper{min-height:220px}
  .leitor-wrapper #leitorCodigoPublico,
  .leitor-wrapper #leitorCodigoAdmin{min-height:220px}
  .banner-instalar{left:8px;right:8px;bottom:8px;padding:12px}
  .banner-icone{width:44px;height:44px}
  .banner-texto strong{font-size:.95rem}
  .banner-acoes{width:100%}
  .banner-acoes button{flex:1}
  .banner-acoes .fechar{flex:0 0 auto}
}
@media(min-width:1024px){
  .container{width:min(1100px,calc(100% - 40px))}
}