: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;}
.stat-topo{display:block; text-decoration:none; color:inherit;}
.stat-topo .rotulo{font-size:18px; font-weight:700; color:#374151; line-height:1.2; margin-top:4px;}
.stat-link{cursor:pointer; transition:box-shadow .15s, transform .15s;}
.stat-link:hover{box-shadow:0 4px 14px rgba(0,0,0,.12); transform:translateY(-1px);}

.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;}
.botao-olho-senha{
  flex:0 0 auto; width:40px; padding:0; border:1px solid var(--cinza-borda); border-radius:8px;
  background:#f8f9fc; font-size:16px; line-height:1; cursor:pointer; color:#6b7280;
}
.botao-olho-senha:hover{background:#eef0f4;}

.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{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:4px;}
.pdv-item-qtd button{width:20px; height:20px; padding:0; line-height:1; border-radius:5px; border:1px solid var(--cinza-borda); background:#fff; font-size:13px; cursor:pointer;}
.pdv-item-qtd span{min-width:20px; text-align:center; font-weight:600; font-size:13px;}
.pdv-item-total{margin-left:auto; text-align:right; font-weight:600; white-space:nowrap;}
.pdv-item-card{padding:8px 0; border-bottom:1px solid var(--cinza-bg);}
.pdv-item-topo{display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
.pdv-item-topo .nome{flex:1; min-width:0; font-size:14px; font-weight:600; overflow-wrap:anywhere;}
.pdv-item-controles{display:flex; align-items:center; gap:10px; margin-top:6px;}
.pdv-item-acrescimo{display:flex; align-items:center; gap:3px;}
.pdv-item-acrescimo input[type=text]{width:58px !important; font-size:12px !important; padding:0 5px !important; height:22px !important; min-height:0 !important; margin:0; border-radius:5px;}
.pdv-item-acrescimo .btn{padding:0 6px !important; font-size:11px !important; height:22px !important; min-height:0 !important; line-height:1;}

.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;}

/* =====================================================================
   RESPONSIVO — celular (feito e conferido em 320 / 360 / 375 / 414 px)
   ===================================================================== */
html{-webkit-text-size-adjust:100%;}
body{overflow-wrap:break-word;}
img, video, canvas, svg{max-width:100%; height:auto;}
pre, code{white-space:pre-wrap; word-break:break-word;}

/* campos de data/hora com o mesmo visual dos demais */
input[type=date], input[type=datetime-local], input[type=time], input[type=tel], input[type=url]{
  padding:10px 12px; border:1px solid var(--cinza-borda); border-radius:8px; font-size:14px;
  width:100%; font-family:inherit; background:#fff;
}
input[type=checkbox], input[type=radio]{width:auto;}

/* estados de hover corretos por tipo de botão (o secundário virava azul-escuro com texto azul;
   o vermelho virava azul) e só quando o aparelho tem mouse — no celular o hover "grudava" após o toque */
.btn:hover{background:var(--azul);}
@media (hover:hover){
  .btn:hover{background:var(--azul-escuro);}
  .btn.btn-secundario:hover{background:#eef3ff; color:var(--azul);}
  .btn.btn-perigo:hover{background:#b82c42;}
}
.btn.btn-secundario:hover{background:#fff; color:var(--azul);}
.btn.btn-perigo:hover{background:var(--vermelho);}
.btn:active{filter:brightness(.92);}

/* fundo escurecido atrás do menu aberto (só celular) */
.menu-backdrop{display:none;}

/* rolagem horizontal de segurança para qualquer tabela que continue larga */
.tabela-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;}
@media print{ .tabela-scroll{overflow:visible;} }

/* cabeçalho: nome do usuário nunca empurra o "Sair" pra fora */
.topbar-left{min-width:0;}
.logo{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw;}
.topbar-right{min-width:0;}
.usuario-nome{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34vw;}

@media (max-width:800px){
  /* a sombra do menu só aparece quando ele está aberto (antes vazava uma faixa cinza na borda) */
  .sidebar{box-shadow:none; width:min(280px, 82vw); padding-bottom:40px;}
  body.menu-aberto .sidebar{box-shadow:4px 0 18px rgba(0,0,0,.25);}
  .sidebar a{padding:13px 14px; font-size:16px;}
  .menu-backdrop{
    display:block; position:fixed; inset:56px 0 0 0; background:rgba(0,0,0,.4); z-index:14;
    opacity:0; pointer-events:none; transition:.2s;
  }
  body.menu-aberto .menu-backdrop{opacity:1; pointer-events:auto;}
  body.menu-aberto{overflow:hidden;}
  .menu-btn{padding:8px 10px; font-size:24px;}
}

@media (max-width:640px){
  .conteudo{padding:12px 12px 90px;}
  h1{font-size:20px; margin-bottom:12px;}
  h2{font-size:17px; margin:6px 0 10px;}
  .card{padding:14px; border-radius:12px; margin-bottom:12px;}
  .topbar{padding:0 8px;}
  .topbar-right{gap:8px; font-size:13px;}
  .sair{padding:8px 12px;}

  /* campos maiores e com 16px: o iPhone dá zoom na tela quando o campo tem letra menor que isso */
  input[type=text], input[type=search], input[type=password], input[type=email], input[type=number],
  input[type=date], input[type=datetime-local], input[type=time], input[type=tel], input[type=url],
  select, textarea{font-size:16px; padding:12px; min-height:46px;}
  textarea{min-height:90px;}

  /* botões fáceis de tocar */
  .btn{padding:12px 16px; min-height:44px; font-size:15px; text-align:center;}
  .btn-sm{padding:9px 12px; min-height:38px; font-size:14px;}
  .acoes-linha{gap:8px;}
  .acoes-linha > .btn, .acoes-linha > form{flex:1 1 calc(50% - 8px);}
  .acoes-linha > .btn{padding:10px 8px; font-size:14px;}
  .acoes-linha form .btn{width:100%;}

  /* barras de ferramentas empilham; busca ocupa a largura toda */
  .toolbar{flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:10px;}
  .toolbar > .btn, .toolbar > a.btn{width:100%;}
  .busca-form{flex-wrap:wrap; width:100%; align-items:center;}
  .busca-form > input, .busca-form > div{flex:1 1 100%; min-width:0;}
  .busca-form > select{flex:1 1 0; min-width:0;}
  .busca-form > .btn, .busca-form > a.btn{flex:0 0 auto;}
  .busca-form > label{flex:1 1 100%; margin:4px 0 -4px; font-size:12px; font-weight:600; color:#6b7280;}
  .busca-form > input[type=date], .busca-form > input[type=datetime-local]{flex:1 1 100%;}
  .busca-form > input[type=date] ~ .btn, .busca-form > input[type=date] ~ a.btn{flex:1 1 100%;}
  .form-grid{grid-template-columns:1fr; gap:0;}

  /* indicadores da tela inicial */
  .grid-cards{grid-template-columns:repeat(2,1fr); gap:10px;}
  .stat{padding:12px;}
  .stat .valor{font-size:22px;}
  .stat-topo .rotulo{font-size:14px;}

  /* abas: uma faixa que rola pro lado, em vez de espremer o texto */
  .tabs-financeiro, .abas-permissoes-botoes{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tabs-financeiro::-webkit-scrollbar, .abas-permissoes-botoes::-webkit-scrollbar{display:none;}
  .tabs-financeiro a, .aba-permissao-botao{white-space:nowrap; flex:0 0 auto; padding:12px 14px;}

  /* janelas: viram uma "gaveta" que sobe de baixo, ocupando a largura toda */
  .modal-overlay{padding:0; align-items:flex-end;}
  .modal-box, .modal-box-grande{
    max-width:none; width:100%; max-height:92vh; border-radius:18px 18px 0 0;
    padding:18px 16px 24px;
  }

  /* PDV */
  .pdv-scan{top:62px;}
  .pdv-scan input{font-size:16px; padding:12px 14px;}
  .pdv-grid{grid-template-columns:repeat(2,1fr); gap:8px;}
  .pdv-tile-adicionar{flex-wrap:wrap;}
  .pdv-tile-adicionar input[type=number]{width:64px; min-height:38px; padding:6px;}
  .pdv-tile-adicionar button{flex:1 1 auto; min-height:38px;}
  .pdv-carrinho{padding:12px;}
  .pdv-item-linha{flex-wrap:wrap; gap:6px 10px;}
  .pdv-item-linha .nome{flex:1 1 100%;}
  .pdv-item-qtd button{width:27px; height:27px; font-size:15px;}
  .pdv-item-controles{gap:8px;}
  .pdv-total-linha .valor{font-size:28px;}
  .pdv-pagamentos button{padding:16px 8px;}
  .fab-os{right:12px; bottom:14px; padding:12px 14px; font-size:14px;}
  .fab-os .fab-rotulo{display:none;}

  /* ---- tabelas viram cartões (o script do base.html cria os rótulos) ---- */
  .card:has(> .tabela-scroll > table.tabela-cartoes){background:transparent; border:0; padding:0;}
  table.tabela-cartoes{background:transparent; border-radius:0; overflow:visible;}
  table.tabela-cartoes thead{display:none;}
  table.tabela-cartoes tbody{display:block;}
  table.tabela-cartoes tr{
    display:grid; grid-template-columns:1fr 1fr; gap:8px 14px;
    background:#fff; border:1px solid var(--cinza-borda); border-radius:12px;
    padding:12px 14px; margin-bottom:10px;
  }
  table.tabela-cartoes tr.linha-alerta{background:#fff6e9;}
  table.tabela-cartoes td{display:block; border:0; padding:0; min-width:0; font-size:14px;}
  table.tabela-cartoes td::before{
    content:attr(data-label); display:block; font-size:11px; font-weight:700; letter-spacing:.03em;
    text-transform:uppercase; color:#9aa1ad; margin-bottom:2px;
  }
  table.tabela-cartoes td[data-label=""]::before{display:none;}
  table.tabela-cartoes td.badge{background:transparent; border-radius:0; padding:0; font-size:14px;}
  table.tabela-cartoes td.celula-titulo{
    grid-column:1 / -1; order:-1; font-size:15px; font-weight:700;
    padding-bottom:8px; border-bottom:1px solid var(--cinza-bg);
  }
  table.tabela-cartoes td.celula-titulo::before{display:none;}
  table.tabela-cartoes td.celula-cheia{grid-column:1 / -1;}
  table.tabela-cartoes td.celula-acoes{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; padding-top:4px;}
  table.tabela-cartoes td.celula-acoes .btn, table.tabela-cartoes td.celula-acoes form{flex:1 1 auto;}
  table.tabela-cartoes td.celula-acoes form .btn{width:100%;}
}

@media (max-width:360px){
  .logo{font-size:16px;}
  .usuario-nome{display:none;}
  .grid-cards{grid-template-columns:1fr 1fr;}
  table.tabela-cartoes tr{grid-template-columns:1fr;}
}

/* aviso "digite o nome..." e mensagens dentro da grade do PDV ocupam a linha toda */
.pdv-grid > p{grid-column:1 / -1;}

/* campos herdam a fonte do sistema (o textarea aparecia em fonte monoespaçada) */
input, select, textarea, button{font-family:inherit;}

@media (max-width:640px){
  /* caixas de marcar grandes o bastante pro dedo, com o texto ao lado */
  input[type=checkbox], input[type=radio]{width:22px; height:22px; flex:0 0 auto; margin:0 8px 0 0; vertical-align:middle;}
  .aba-permissao-conteudo label, .campo-marcar, label:has(> input[type=checkbox]), label:has(> input[type=radio]){
    display:flex; align-items:flex-start; gap:2px; padding:7px 0; font-size:15px; line-height:1.35;
  }
}

@media (max-width:640px){
  /* desconto (R$ ou %) + valor na mesma linha nas janelas de pagamento */
  #select-desconto-tipo-pdv, #select-desconto-tipo-os{width:auto; min-width:84px; flex:0 0 auto; font-size:16px !important; padding:10px 12px !important;}
  #campo-desconto-valor-pdv, #campo-desconto-valor-os{width:auto !important; min-width:0; flex:1 1 100px; font-size:16px !important; padding:10px 12px !important;}
}

/* =====================================================================
   Ajustes de celular v2 — organização e acabamento das telas
   ===================================================================== */
.menu-usuario{display:none;}
.contagem-layout{display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start;}
details.versao > summary{cursor:pointer; list-style:none;}
details.versao > summary::-webkit-details-marker{display:none;}
details.versao > summary h2{margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;}
details.versao > summary h2::before{content:"▸"; color:#9aa1ad; font-size:14px; transition:transform .15s;}
details.versao[open] > summary h2::before{transform:rotate(90deg);}
details.versao[open] > summary{margin-bottom:8px;}

@media (max-width:640px){
  /* --- campos curtos lado a lado (só os marcados no HTML; o resto continua em linha inteira) --- */
  .form-grid{grid-template-columns:repeat(6,minmax(0,1fr)); column-gap:10px;}
  .form-grid > *{grid-column:1 / -1;}
  .form-grid > .campo.meio{grid-column:span 3;}
  .form-grid > .campo.terco{grid-column:span 2;}
  .form-grid > .campo.dois-tercos{grid-column:span 4;}

  /* --- barra do topo: o nome do usuário vai pra dentro do menu; sobra espaço pro nome da loja --- */
  .usuario-nome{display:none;}
  .logo{max-width:68vw;}
  .menu-usuario{
    display:block; padding:16px 16px 14px; margin:-4px 0 6px; border-bottom:1px solid var(--cinza-borda);
    font-weight:700; font-size:16px; color:#1f2937; word-break:break-word;
  }
  .menu-usuario small{display:block; font-weight:500; font-size:12px; color:#6b7280; margin-top:2px;}

  /* --- abas do Financeiro: grade 2x2 em vez de faixa cortada --- */
  .tabs-financeiro{display:grid; grid-template-columns:1fr 1fr; gap:8px; overflow:visible; border-bottom:0; margin-bottom:14px;}
  .tabs-financeiro a{
    white-space:normal; text-align:center; line-height:1.25; padding:11px 8px; font-size:14px;
    background:#fff; border:1px solid var(--cinza-borda); border-radius:10px;
  }
  .tabs-financeiro a.tab-ativa{background:var(--azul); color:#fff; border-color:var(--azul);}

  /* --- abas da O.S.: as 4 cabem numa linha só --- */
  .abas-permissoes-botoes.abas-os{display:grid; grid-template-columns:repeat(4,1fr); overflow:visible; gap:0;}
  .abas-os .aba-permissao-botao{white-space:normal; text-align:center; line-height:1.2; font-size:12px; padding:10px 2px; flex:none;}

  /* --- faixas de abas que rolam: esmaece a ponta quando ainda tem mais pra ver --- */
  .abas-permissoes-botoes.rolavel:not(.no-fim){
    -webkit-mask-image:linear-gradient(to right,#000 82%,transparent);
            mask-image:linear-gradient(to right,#000 82%,transparent);
  }

  /* --- vendedor/técnico da O.S.: seletor e botão na mesma linha, sem texto de ajuda --- */
  .card-responsavel{padding:12px 14px;}
  .card-responsavel h2{margin:0 0 8px;}
  .card-responsavel > p.ajuda-desktop{display:none;}
  .card-responsavel form.form-grid{display:flex; gap:8px; align-items:flex-end;}
  .card-responsavel form.form-grid > .campo{margin-bottom:0;}
  .card-responsavel form.form-grid > .campo:first-child{flex:1 1 auto; min-width:0;}
  .card-responsavel form.form-grid > .campo:last-child:not(:first-child){flex:0 0 auto;}
  .card-responsavel form.form-grid .btn{white-space:nowrap;}

  /* --- Auditoria: escolher os usuários primeiro, botão de ligar por último --- */
  .contagem-layout{flex-direction:column-reverse; gap:14px;}
  .contagem-acoes .btn{width:100%;}
  .contagem-usuarios{min-width:0 !important; max-width:none !important; width:100%;}

  /* --- histórico de atualizações: cada versão é uma sanfona --- */
  details.versao{padding:12px 14px;}
  details.versao > summary h2{font-size:16px;}
  details.versao > summary h2 label{margin-left:0 !important;}
}
@media (max-width:640px){
  table.tabela-cartoes td[data-label=""]::before{display:none;}
}
@media (max-width:640px){ .so-desktop{display:none;} }
@media (max-width:640px){
  /* campos lado a lado: rótulos que quebram em 2 linhas não podem desalinhar os campos — a base dos campos fica na mesma linha */
  .form-grid > .campo.meio, .form-grid > .campo.terco, .form-grid > .campo.dois-tercos{display:flex; flex-direction:column;}
  .form-grid > .campo.meio > input, .form-grid > .campo.meio > select,
  .form-grid > .campo.terco > input, .form-grid > .campo.terco > select,
  .form-grid > .campo.dois-tercos > input, .form-grid > .campo.dois-tercos > select{margin-top:auto;}
}
@media (max-width:640px){
  /* 3 abas no Financeiro: a última ocupa a linha inteira em vez de ficar sozinha em meia largura */
  .tabs-financeiro a:last-child:nth-child(odd){grid-column:1 / -1;}
}

/* =====================================================================
   Senha do aparelho (Ordem de Serviço) — campo de texto ou padrão de
   desenho estilo Android
   ===================================================================== */
.senha-aparelho select{max-width:280px;}
.senha-campo-texto{display:flex; gap:8px; align-items:center; margin-top:8px; max-width:320px;}
.senha-campo-texto input{flex:1 1 auto;}
.senha-campo-padrao{margin-top:10px;}
.grade-padrao{touch-action:none; display:block; user-select:none;}
.grade-padrao .padrao-ponto-aro{fill:none; stroke:#c7cbd4; stroke-width:2;}
.grade-padrao .padrao-ponto{fill:#c7cbd4;}
.grade-padrao .padrao-ponto.ativo ~ .padrao-ponto-aro,
.grade-padrao .padrao-ponto-aro.ativo{stroke:var(--azul);}
.grade-padrao .padrao-ponto.ativo{fill:var(--azul);}
.grade-padrao .padrao-linha{stroke:var(--azul); stroke-width:6; stroke-linecap:round; opacity:.75;}
.grade-padrao .padrao-numero-fundo{fill:#fff; stroke:var(--azul); stroke-width:2;}
.grade-padrao .padrao-numero-texto{fill:var(--azul); font-size:13px; font-weight:700; text-anchor:middle; dominant-baseline:central; pointer-events:none;}
.grade-padrao .padrao-numero-inicio .padrao-numero-fundo{fill:#1a8a4a; stroke:#1a8a4a;}
.grade-padrao .padrao-numero-inicio .padrao-numero-texto{fill:#fff;}
.grade-padrao .padrao-numero-fim .padrao-numero-fundo{fill:#d9364f; stroke:#d9364f;}
.grade-padrao .padrao-numero-fim .padrao-numero-texto{fill:#fff;}
.senha-padrao-somente-leitura{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}

/* Navegação de páginas (listagens grandes) */
.paginacao{display:flex; align-items:center; justify-content:center; gap:14px; margin:18px 0; flex-wrap:wrap;}
.paginacao-info{color:#6b7280; font-size:13px;}

/* Estoque: cards compactos específicos pro celular (a tabela normal some
   e esse bloco assume — evita rótulo em cima de cada campo espalhando o
   card por várias linhas). No computador é o contrário: esse bloco some e
   a tabela de sempre aparece. */
.estoque-cartoes-compactos{display:none;}
@media (max-width:640px){
  .estoque-cartoes-compactos{display:block;}
  .card:has(> .tabela-scroll > table.sem-cartoes){padding:0; background:transparent; border:0;}
  .card:has(> .tabela-scroll > table.sem-cartoes) > .tabela-scroll{display:none;}
  .estoque-cartao{
    background:#fff; border:1px solid var(--cinza-borda); border-radius:12px;
    padding:12px 14px; margin-bottom:10px;
  }
  .estoque-cartao-alerta{background:#fff6e9;}
  .estoque-cartao-topo{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
  .estoque-cartao-nome{font-weight:700; font-size:15px; flex:1 1 auto;}
  .estoque-cartao-preco{font-weight:700; color:var(--azul); font-size:15px; white-space:nowrap;}
  .estoque-cartao-info{color:#6b7280; font-size:13px; margin:4px 0 10px;}
  .estoque-cartao-acoes{display:flex; flex-wrap:wrap; gap:8px;}
  .estoque-cartao-acoes .btn, .estoque-cartao-acoes form{flex:1 1 auto;}
  .estoque-cartao-acoes form .btn{width:100%;}
}

/* Movimentos do caixa (PDV): mesmo tratamento do Estoque — card compacto
   específico pro celular, escondendo a tabela normal. */
.caixa-mov-cartoes-compactos{display:none;}
@media (max-width:640px){
  .caixa-mov-cartoes-compactos{display:block;}
  .card:has(> .tabela-scroll > table.sem-cartoes){padding:0; background:transparent; border:0;}
  .card:has(> .tabela-scroll > table.sem-cartoes) > .tabela-scroll{display:none;}
  .caixa-mov-cartao{
    background:#fff; border:1px solid var(--cinza-borda); border-radius:12px;
    padding:12px 14px; margin-bottom:10px;
  }
  .caixa-mov-estornado{background:#fdf0f0; text-decoration:line-through; text-decoration-color:#e3b3b3;}
  .caixa-mov-estornado .caixa-mov-acoes{text-decoration:none;}
  .caixa-mov-topo{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
  .caixa-mov-hora-tipo{font-weight:700; font-size:14px;}
  .caixa-mov-valor{font-weight:700; font-size:15px; white-space:nowrap;}
  .caixa-mov-valor.positivo{color:#1a8a4a;}
  .caixa-mov-valor.negativo{color:#d9364f;}
  .caixa-mov-desc{color:#374151; font-size:13px; margin:4px 0 0;}
  .caixa-mov-meta{color:#9aa1ad; font-size:12px; margin:4px 0 0;}
  .caixa-mov-acoes{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
  .caixa-mov-acoes .btn, .caixa-mov-acoes form{flex:1 1 auto;}
  .caixa-mov-acoes form .btn{width:100%;}
}

/* Financeiro > Histórico de Caixas: mesmo tratamento de card compacto. */
.caixa-hist-cartoes-compactos{display:none;}
@media (max-width:640px){
  .caixa-hist-cartoes-compactos{display:block;}
  .caixa-hist-cartao{
    background:#fff; border:1px solid var(--cinza-borda); border-radius:12px;
    padding:12px 14px; margin-bottom:10px;
  }
  .caixa-hist-topo{display:flex; justify-content:space-between; align-items:center; gap:10px;}
  .caixa-hist-numero{font-weight:700; font-size:15px;}
  .caixa-hist-periodo{color:#9aa1ad; font-size:12px; margin:4px 0 8px;}
  .caixa-hist-linha{color:#374151; font-size:13px; margin:0 0 4px;}
  .caixa-hist-diferenca-ok{color:#1a8a4a; font-weight:600;}
  .caixa-hist-diferenca-erro{color:#d9364f; font-weight:600;}
  .caixa-hist-cartao .btn{margin-top:8px; width:100%;}
}

/* Relatório de caixa (_relatorio_caixa_corpo.html, usado no Financeiro e no
   PDV): mesmo tratamento de card compacto nas 7 tabelas do relatório. */
.relatorio-cartoes-compactos{display:none;}
@media (max-width:640px){
  .relatorio-cartoes-compactos{display:block;}
  .relatorio-cartao{
    background:#fff; border:1px solid var(--cinza-borda); border-radius:12px;
    padding:12px 14px; margin-bottom:10px;
  }
  .relatorio-cartao.venda-estornada{background:#fdf0f0;}
  .relatorio-cartao-topo{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
  .relatorio-cartao-titulo{font-weight:700; font-size:14px;}
  .relatorio-cartao-valor{font-weight:700; font-size:15px; white-space:nowrap;}
  .relatorio-cartao-valor.positivo{color:#1a8a4a;}
  .relatorio-cartao-valor.negativo{color:#d9364f;}
  .relatorio-cartao-desc{color:#374151; font-size:13px; margin:4px 0 0;}
  .relatorio-cartao-meta{color:#9aa1ad; font-size:12px; margin:4px 0 0;}
  .relatorio-cartao-alerta{color:#d9364f; font-size:12px; margin:4px 0 0; text-decoration:none; display:block;}
  .relatorio-cartao .btn{margin-top:8px;}
}

/* Ordens de Serviço (lista): mesmo tratamento de card compacto. O card
   inteiro é um link pra "Abrir" — mais fácil de tocar no celular. */
.os-cartoes-compactos{display:none;}
@media (max-width:640px){
  .os-cartoes-compactos{display:block;}
  .os-cartao{
    display:block; background:#fff; border:1px solid var(--cinza-borda); border-radius:12px;
    padding:12px 14px; margin-bottom:10px; text-decoration:none; color:inherit;
  }
  .os-cartao-topo{display:flex; justify-content:space-between; align-items:center; gap:10px;}
  .os-cartao-numero{font-weight:700; font-size:15px; color:#1f2937;}
  .os-cartao-desc{color:#374151; font-size:13px; margin:6px 0 4px;}
  .os-cartao-meta{color:#9aa1ad; font-size:12px; margin:0;}
  .os-cartao-atrasada{color:#d9364f; font-weight:600;}
  .os-cartao-rodape{display:flex; justify-content:space-between; align-items:center; margin-top:10px;}
  .os-cartao-valor{font-weight:700; font-size:15px; color:var(--azul);}
}

/* Relatório de estoque mínimo: mesmo tratamento de card compacto. */
.estoque-min-cartoes-compactos{display:none;}
@media (max-width:640px){
  .estoque-min-cartoes-compactos{display:block;}
  .estoque-min-cartao{
    background:#fff6e9; border:1px solid #f5dcae; border-radius:12px;
    padding:12px 14px; margin-bottom:10px;
  }
  .estoque-min-nome{font-weight:700; font-size:14px; margin:0 0 4px;}
  .estoque-min-info{color:#6b7280; font-size:13px; margin:0 0 4px;}
  .estoque-min-faltam{color:#d9364f; font-weight:600;}
}

/* Segundo botão flutuante do PDV: Pedidos em aberto (empilhado acima do de O.S.) */
.fab-pedidos{bottom:164px; background:var(--verde); box-shadow:0 6px 20px rgba(31,161,92,.4);}
.fab-pedidos .contador{color:var(--verde);}
@media (max-width:800px){ .fab-pedidos{bottom:84px;} }
@media (max-width:640px){ .fab-os.fab-pedidos{bottom:70px;} }

/* Fila "Pedidos em aberto" do PDV: um cartão por pedido (cabe em qualquer largura). */
.pedido-card-pdv{border:1px solid var(--cinza-borda); border-radius:12px; padding:12px 14px; margin-bottom:10px; background:#fff;}
.pedido-card-topo{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:15px;}
.pedido-card-total{font-weight:700; font-size:15px; color:var(--azul);}
.pedido-card-cliente{color:#374151; font-size:13px; margin:6px 0 4px;}
.pedido-card-ident{color:#6b7280;}
.pedido-card-itens{font-size:13px; color:#4b5563; margin:2px 0 4px; overflow-wrap:anywhere;}
.pedido-card-info{color:#9aa1ad; font-size:12px; margin:0;}
.pedido-card-rodape{display:flex; justify-content:space-between; align-items:center; margin:10px 0 0;}

/* Movimentos do caixa no celular: um botão pequeno ao lado do valor abre as ações numa janelinha
   (em vez de uma linha inteira de botões em cada cartão). */
.caixa-mov-direita{display:flex; align-items:center; gap:8px;}
.caixa-mov-menu{border:1px solid var(--cinza-borda); background:#fff; color:var(--azul); border-radius:8px;
  width:34px; height:28px; padding:0; font-size:18px; line-height:1; font-weight:700; cursor:pointer;}
/* o risco do estorno vale pros textos do cartão, não pro botão ⋯ (um risco no cartão inteiro atravessaria o botão) */
.caixa-mov-estornado{text-decoration:none;}
.caixa-mov-estornado .caixa-mov-hora-tipo, .caixa-mov-estornado .caixa-mov-valor,
.caixa-mov-estornado .caixa-mov-desc, .caixa-mov-estornado .caixa-mov-meta{text-decoration:line-through; text-decoration-color:#e3b3b3;}
.acoes-mov-corpo{display:flex; flex-direction:column; gap:8px;}
.acoes-mov-corpo .btn, .acoes-mov-corpo form{display:block; width:100%; margin:0;}
.acoes-mov-corpo .btn{text-align:center; padding:12px; font-size:15px; box-sizing:border-box;}

/* Desempenho do dia por vendedor (PDV): tabela no computador; lista compacta no celular. */
.desempenho-compacto{display:none;}
@media (max-width:640px){
  .desempenho-tabela, .desempenho-intro{display:none;}
  .desempenho-compacto{display:block;}
  .desempenho-card{padding:12px 14px;}
  .desempenho-titulo{font-size:16px; margin:0 0 6px;}
  .desempenho-linha{padding:7px 0; border-top:1px solid var(--cinza-borda);}
  .desempenho-linha:first-child{border-top:0;}
  .desempenho-topo{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14px;}
  .desempenho-total{font-weight:800; color:var(--azul); white-space:nowrap;}
  .desempenho-detalhe{color:#6b7280; font-size:12px; margin-top:1px;}
}

/* Troco só visual: resumo pequeno abaixo do valor real da venda no movimento do caixa */
.mov-recebido{display:block; font-size:11px; font-weight:400; color:#6b7280; margin-top:2px; white-space:nowrap;}
.mov-recebido.direita{text-align:right; margin:-2px 0 4px;}

/* Conferência antes de fechar o caixa: página inteira, com os botões atrás dos 3 pontinhos */
.conferencia-tela{display:none; position:fixed; inset:0; z-index:60; background:var(--cinza-bg); overflow-y:auto;}
.conferencia-tela.aberto{display:block;}
.conferencia-barra{position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px; background:#fff; border-bottom:1px solid var(--cinza-borda);}
.conferencia-barra h2{margin:0; font-size:18px;}
.conferencia-menu{display:none; position:absolute; top:100%; right:12px; margin-top:6px; z-index:3; background:#fff;
  border:1px solid var(--cinza-borda); border-radius:12px; padding:12px; box-shadow:0 8px 24px rgba(0,0,0,.18);
  flex-direction:column; gap:8px; min-width:220px;}
.conferencia-menu.aberto{display:flex;}
.conferencia-corpo{max-width:1100px; margin:0 auto; padding:16px;}

/* Histórico compacto da O.S. */
.hist-os-qtd{font-size:12px; font-weight:600; color:#6b7280; background:#eef0f4; border-radius:10px; padding:1px 8px; margin-left:6px; vertical-align:middle;}
.hist-os-lista{max-height:340px; overflow-y:auto; border:1px solid var(--cinza-borda); border-radius:8px;}
.hist-os-item{padding:7px 10px; border-bottom:1px solid var(--cinza-borda); line-height:1.35;}
.hist-os-item:last-child{border-bottom:none;}
.hist-os-topo{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.hist-os-evento{font-weight:600; font-size:13px; color:#1f2937;}
.hist-os-quando{font-size:11px; color:#6b7280; white-space:nowrap;}
.hist-os-obs{font-size:12px; color:#374151; margin-top:1px; word-break:break-word;}
.hist-os-user{font-size:11px; color:#9aa1ad; margin-top:1px;}

/* Peças da O.S. em lista compacta, com ⋯ */
.peca-os-lista{border:1px solid var(--cinza-borda); border-radius:8px;}
.peca-os-item{display:flex; align-items:center; gap:10px; padding:7px 10px; border-bottom:1px solid var(--cinza-borda);}
.peca-os-item:last-child{border-bottom:none;}
.peca-os-info{flex:1; min-width:0;}
.peca-os-nome{font-weight:600; font-size:13px; color:#1f2937; word-break:break-word; line-height:1.3;}
.peca-os-det{font-size:12px; color:#6b7280;}
.peca-os-total{font-weight:700; font-size:13px; white-space:nowrap;}
.peca-os-acoes{position:relative;}
.peca-os-menu{display:none; position:absolute; right:0; top:100%; margin-top:4px; z-index:5; background:#fff;
  border:1px solid var(--cinza-borda); border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.12); padding:6px;}
.peca-os-menu.aberto{display:block;}
.peca-os-menu .btn{white-space:nowrap;}
.peca-os-subtotal{display:flex; justify-content:space-between; padding:8px 10px 0; font-size:14px;}

/* Resultados da busca de peça/serviço na O.S.: até 25 itens, janela de ~6 linhas com rolagem */
.lista-busca-os{max-height:336px; overflow-y:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--cinza-borda); border-radius:8px;}

/* Card "Status da O.S." compacto: só o status atual + previsão, botão Trocar no canto */
.status-os-topo{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px;}
.status-os-resumo{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;}
.status-os-prev{font-size:14px; color:#374151;}

.responsavel-nome{font-size:15px; font-weight:600; color:#1f2937;}

/* PDV (caixa fechado) > Últimos fechamentos: o botão ⋯ fica no topo do cartão compacto */
.caixa-hist-topo .peca-os-acoes{flex:0 0 auto;}

/* Estoque (cartão compacto): preço + botão ⋯ lado a lado no topo */
.estoque-cartao-direita{display:flex; align-items:center; gap:8px; flex:0 0 auto;}
.estoque-cartao-topo{align-items:center;}

/* Estoque: filtros recolhíveis */
.busca-form .filtros-estoque{display:none; flex:1 1 100%; gap:8px; flex-wrap:wrap; align-items:flex-end;}
.busca-form .filtros-estoque.aberto{display:flex;}
.filtros-estoque label{display:flex; flex-direction:column; gap:2px; font-size:12px; color:#6b7280; flex:1 1 160px; min-width:0;}
.filtros-estoque select{width:100%; min-width:0; text-overflow:ellipsis;}
@media (max-width: 700px){ .filtros-estoque label{flex:1 1 100%;} }

/* Ranking de vendedores: no celular continua tabela (vendedor e total na mesma linha) */
table.ranking-tabela td:last-child, table.ranking-tabela th:last-child{text-align:right; white-space:nowrap;}
@media (max-width:640px){
  table.ranking-tabela th, table.ranking-tabela td{padding:8px 6px; font-size:13px;}
  table.ranking-tabela td:first-child, table.ranking-tabela th:first-child{width:34px; padding-left:8px;}
}

table.ranking-tabela .detalhe-celular{display:none;}
@media (max-width:640px){
  table.ranking-tabela .col-detalhe{display:none;}
  table.ranking-tabela .detalhe-celular{display:block; color:#6b7280; font-size:11px; margin-top:2px;}
}

/* Botão de ajuda "?" (textos explicativos escondidos) */
.btn-ajuda{
  display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0;
  border-radius:50%; border:1px solid #c5ccd8; background:#f4f6fa; color:#6b7280;
  font-size:12px; font-weight:700; line-height:1; cursor:pointer; vertical-align:middle;
}
.btn-ajuda:hover, .btn-ajuda.aberto{background:var(--azul); border-color:var(--azul); color:#fff;}
.ajuda-linha{margin:2px 0 6px; text-align:left;}
@media print{ .btn-ajuda, .ajuda-linha{display:none !important;} }

/* Tabelas compactas (Financeiro): continuam tabela no celular, só mais enxutas */
table.tabela-compacta .col-num{white-space:nowrap; text-align:right; width:1%;}
table.tabela-compacta td.col-wrap{overflow-wrap:break-word; width:auto;}
@media (max-width:640px){
  table.tabela-compacta th, table.tabela-compacta td{padding:6px 5px; font-size:12.5px;}
  table.tabela-compacta td.col-data{font-size:11.5px; width:62px;}
}

/* tabela cujo menu ⋯ precisa sair da caixa (sem cortar na rolagem horizontal) */
.tabela-scroll:has(> table.menu-visivel){overflow:visible;}

/* Menu ⋮ das telas de impressão (canto superior direito) */
.no-print:has(> .menu-3p) { position: relative; padding-right: 44px; padding-left: 44px; }
.menu-3p { position: absolute; top: 0; right: 0; z-index: 5; text-align: left; }
.menu-3p.aberto { z-index: 12; }
.menu-3p-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #d5dae3; background: #fff; font-size: 22px; line-height: 1; cursor: pointer; color: #374151; padding: 0; }
.menu-3p-btn:hover { background: #f1f4f9; }
.menu-3p-lista { display: none; position: absolute; right: 0; top: 42px; min-width: 230px; background: #fff; border: 1px solid #d5dae3; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 6px; }
.menu-3p.aberto .menu-3p-lista { display: block; }
.menu-3p-lista button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 12px 12px; font-size: 15px; border-radius: 8px; cursor: pointer; color: #1f2937; }
.menu-3p-lista button:hover { background: #eef4ff; }
@media print { .menu-3p { display: none !important; } }

.menu-3p-pm{top:4px; right:4px;}
.menu-3p-pm .menu-3p-btn{width:30px; height:30px; font-size:18px; border-radius:8px;}
.menu-3p-pm .menu-3p-lista{top:34px; min-width:210px;}
.menu-3p-pm.em-linha{position:relative; top:auto; right:auto; display:inline-block; flex:none; vertical-align:middle;}
.pdv-tile{position:relative;}
.pdv-tile:has(.menu-3p-pm) .nome{padding-right:26px;}

.menu-3p-lista{max-width:calc(100vw - 16px); box-sizing:border-box;}
.menu-3p-lista button{white-space:normal;}

/* Lista de IMEIs (cadastro/entrada de celular): uma linha por IMEI */
.lista-imeis-form { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.linha-imei-form { display: flex; align-items: center; gap: 6px; }
.linha-imei-form .imei-num { min-width: 24px; font-size: 12px; color: #9aa1ad; text-align: right; }
.linha-imei-form input { flex: 1; min-width: 0; font-family: monospace; font-size: 15px; letter-spacing: .5px; }
.card-imei { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; }
.card-imei.aberto { border-color: #bfd3fe; }