:root{
  --azul:#1d5cff;
  --azul-escuro:#123a9c;
  --cinza-bg:#f3f5f9;
  --cinza-borda:#dfe3ea;
  --texto:#1f2430;
  --verde:#1fa15c;
  --vermelho:#d9364f;
  --amarelo:#e0a112;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--cinza-bg); color:var(--texto);
}
a{color:var(--azul); text-decoration:none;}

.topbar{
  position:fixed; top:0; left:0; right:0; height:56px; background:var(--azul);
  color:#fff; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; z-index:20;
}
.topbar-left{display:flex; align-items:center; gap:10px;}
.menu-btn{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;display:none;}
.logo{font-weight:700; font-size:18px;}
.topbar-right{display:flex; align-items:center; gap:14px; font-size:14px;}
.sair{color:#fff; background:rgba(255,255,255,.15); padding:6px 12px; border-radius:6px;}

.sidebar{
  position:fixed; top:56px; left:0; bottom:0; width:220px; background:#fff;
  border-right:1px solid var(--cinza-borda); padding:14px 8px; overflow-y:auto; z-index:15;
}
.sidebar a{
  display:block; padding:10px 12px; border-radius:8px; color:var(--texto);
  font-size:15px; margin-bottom:4px;
}
.sidebar a:hover{background:var(--cinza-bg);}
.sidebar a.em-breve{color:#9aa1ad;}
.sidebar a.em-breve small{display:block; font-size:11px;}

.conteudo{margin-left:220px; margin-top:56px; padding:20px;}
.conteudo-cheio{padding:0;}

@media (max-width: 800px){
  .menu-btn{display:block;}
  .sidebar{transform:translateX(-100%); transition:.2s; box-shadow:2px 0 10px rgba(0,0,0,.15);}
  body.menu-aberto .sidebar{transform:translateX(0);}
  .conteudo{margin-left:0; padding:14px;}
}

.flash{padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:14px;}
.flash-sucesso{background:#e3f7ea; color:var(--verde); border:1px solid #b8ecc9;}
.flash-erro{background:#fbe4e8; color:var(--vermelho); border:1px solid #f3bcc6;}

.card{background:#fff; border:1px solid var(--cinza-borda); border-radius:12px; padding:18px; margin-bottom:16px;}

h1{font-size:22px; margin:0 0 16px;}
h2{font-size:18px;}

.grid-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px;}
.stat{background:#fff; border-radius:12px; padding:16px; border:1px solid var(--cinza-borda);}
.stat .valor{font-size:28px; font-weight:700; color:var(--azul);}
.stat .valor.alerta{color:var(--vermelho);}
.stat .rotulo{font-size:13px; color:#6b7280;}

.btn{
  display:inline-block; background:var(--azul); color:#fff; border:none;
  padding:10px 16px; border-radius:8px; font-size:14px; cursor:pointer;
}
.btn:hover{background:var(--azul-escuro);}
.btn-secundario{background:#fff; color:var(--azul); border:1px solid var(--azul);}
.btn-perigo{background:var(--vermelho);}
.btn-sm{padding:6px 10px; font-size:13px;}

.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:16px;}
.busca-form{display:flex; gap:8px;}
input[type=text], input[type=search], input[type=password], input[type=email], input[type=number], select, textarea{
  padding:10px 12px; border:1px solid var(--cinza-borda); border-radius:8px; font-size:14px; width:100%;
}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}
.campo{margin-bottom:14px;}
.campo label{display:block; font-size:13px; color:#4b5563; margin-bottom:5px; font-weight:600;}

table{width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden;}
th, td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--cinza-borda); font-size:14px;}
th{background:#f8f9fc; font-size:12px; text-transform:uppercase; color:#6b7280;}
tr.linha-alerta{background:#fff6e9;}

.badge{padding:3px 9px; border-radius:20px; font-size:12px; font-weight:600;}
.venda-estornada{text-decoration:line-through; opacity:0.6;}
.badge-ok{background:#e3f7ea; color:var(--verde);}
.badge-alerta{background:#fff2dc; color:var(--amarelo);}
.badge-erro{background:#fbe4e8; color:var(--vermelho);}

.tela-login{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-box{background:#fff; border-radius:16px; padding:32px; width:100%; max-width:380px; box-shadow:0 10px 30px rgba(0,0,0,.08);}
.login-box h1{text-align:center;}
.login-box .sub{text-align:center; color:#6b7280; font-size:13px; margin-bottom:24px;}
.login-box .btn{width:100%; padding:12px; margin-top:8px;}
.login-box .campo{margin-bottom:16px;}

.qrcode-box{text-align:center; padding:30px;}
.acoes-linha{display:flex; gap:6px; flex-wrap:wrap;}

/* ---------------- PDV estilo supermercado ---------------- */
.pdv-topo{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px;}
.pdv-resumo-mini{display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:#4b5563;}
.pdv-resumo-mini strong{color:var(--texto); font-size:15px;}

.pdv-scan{
  display:flex; gap:8px; margin-bottom:14px; position:sticky; top:66px; z-index:10;
  background:var(--cinza-bg); padding:8px 0;
}
.pdv-scan input{
  flex:1; font-size:18px; padding:14px 16px; border:2px solid var(--azul); border-radius:10px;
}
.pdv-scan button{font-size:15px; padding:0 18px; border-radius:10px;}

.pdv-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-bottom:16px;
}
.pdv-tile{
  background:#fff; border:1px solid var(--cinza-borda); border-radius:12px; padding:14px 10px;
  text-align:left; cursor:pointer; font-size:14px; display:flex; flex-direction:column; gap:6px;
  transition:.1s;
}
.pdv-tile:hover, .pdv-tile:active{border-color:var(--azul); background:#f2f6ff;}
.pdv-tile .nome{font-weight:600; line-height:1.25; min-height:36px;}
.pdv-tile .preco{color:var(--azul); font-weight:700; font-size:16px;}
.pdv-tile .estoque{font-size:11px; color:#9aa1ad;}
.pdv-tile .estoque.baixo{color:var(--vermelho);}

.pdv-carrinho{background:#fff; border:1px solid var(--cinza-borda); border-radius:12px;
  margin:0 0 16px; padding:16px 20px;}
.pdv-carrinho-itens{max-height:320px; overflow-y:auto; margin-bottom:10px;}
.pdv-item-linha{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--cinza-bg);}
.pdv-item-linha .nome{flex:1; font-size:14px;}
.pdv-item-qtd{display:flex; align-items:center; gap:6px;}
.pdv-item-qtd button{width:28px; height:28px; border-radius:6px; border:1px solid var(--cinza-borda); background:#fff; font-size:16px; cursor:pointer;}
.pdv-item-qtd span{min-width:28px; text-align:center; font-weight:600;}
.pdv-item-total{min-width:70px; text-align:right; font-weight:600;}

.pdv-total-linha{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.pdv-total-linha .rotulo{font-size:14px; color:#6b7280;}
.pdv-total-linha .valor{font-size:32px; font-weight:800; color:var(--azul);}

.pdv-pagamentos{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px;}
.pdv-pagamentos button{
  padding:14px 8px; border-radius:10px; border:2px solid var(--cinza-borda); background:#fff;
  font-size:14px; font-weight:600; cursor:pointer;
}
.pdv-pagamentos button:hover{border-color:var(--verde); background:#f0fbf4;}

.fab-os{
  position:fixed; right:18px; bottom:100px; z-index:30; background:var(--azul); color:#fff;
  border:none; border-radius:30px; padding:14px 20px; font-size:15px; font-weight:600;
  box-shadow:0 6px 20px rgba(29,92,255,.4); cursor:pointer; display:flex; align-items:center; gap:8px;
}
.fab-os .contador{background:#fff; color:var(--azul); border-radius:50%; min-width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;}

.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40;
  align-items:center; justify-content:center; padding:16px;
}
.modal-overlay.aberto{display:flex;}
.modal-box{background:#fff; border-radius:14px; max-width:520px; width:100%; max-height:85vh; overflow-y:auto; padding:20px;}
.modal-box-grande{max-width:1100px;}
.modal-box h2{margin-top:0;}
.modal-fechar{float:right; background:none; border:none; font-size:22px; cursor:pointer; color:#6b7280;}

.secao-secundaria{margin-top:22px;}
.toggle-secundaria{
  background:none; border:1px dashed var(--cinza-borda); color:#4b5563; padding:10px 14px;
  border-radius:8px; cursor:pointer; font-size:13px; width:100%; text-align:left;
}
.painel-secundario{display:none; margin-top:10px;}
.painel-secundario.aberto{display:block;}

@media (max-width:800px){
  .fab-os{bottom:20px;}
}

/* ---------------- Abas do Financeiro ---------------- */
.tabs-financeiro{display:flex; gap:6px; margin-bottom:18px; border-bottom:1px solid var(--cinza-borda);}
.tabs-financeiro a{
  padding:10px 16px; font-size:14px; color:#6b7280; border-bottom:2px solid transparent; font-weight:600;
}
.tabs-financeiro a.tab-ativa, .tabs-financeiro a:hover{color:var(--azul); border-bottom-color:var(--azul);}

/* ---------------- Abas de permissões por módulo (tela de usuários) ---------------- */
.abas-permissoes-botoes{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--cinza-borda); margin-bottom:12px;}
.aba-permissao-botao{
  padding:8px 14px; border:none; background:none; cursor:pointer; font-size:13px;
  color:#6b7280; border-bottom:2px solid transparent; font-family:inherit;
}
.aba-permissao-botao.aba-ativa{color:var(--azul); border-bottom-color:var(--azul); font-weight:600;}
.aba-permissao-conteudo{display:none; padding:6px 2px 4px;}
.aba-permissao-conteudo.aba-ativa{display:block;}
.aba-permissao-conteudo label{
  display:block; font-weight:normal; font-size:14px; margin-bottom:9px; color:var(--texto);
}
.usuario-card{background:#fff; border:1px solid var(--cinza-borda); border-radius:12px; padding:16px; margin-bottom:12px;}

/* ---------------- Seleção de produto no PDV (clicar -> aparece Adicionar) ---------------- */
.pdv-tile{cursor:pointer;}
.pdv-tile.selecionado{border-color:var(--azul); background:#f2f6ff; box-shadow:0 0 0 2px rgba(29,92,255,.15);}
.pdv-tile-adicionar{
  display:flex; gap:6px; align-items:center; margin-top:8px; padding-top:8px;
  border-top:1px dashed var(--cinza-borda); cursor:default;
}
.pdv-tile-adicionar input[type=number]{width:56px; padding:6px; font-size:13px;}
.pdv-tile-adicionar button{white-space:nowrap;}