/* ============ CORES (mude aqui para trocar o visual) ============ */
:root {
  --primaria: #0f766e;
  --primaria-escura: #115e59;
  --destaque: #f59e0b;
  --fundo: #f1f5f9;
  --cartao: #ffffff;
  --texto: #0f172a;
  --texto-suave: #64748b;
  --lateral: #0b1f2a;
  --lateral-texto: #cbd5e1;
  --borda: #e2e8f0;
  --erro: #dc2626;
  --raio: 12px;
  /* cores dos botões, iguais ao jbapp (padrão Bootstrap do D2Bridge) */
  --bt-primario: #0d6efd;  /* Procurar, Entrar */
  --bt-sucesso: #198754;   /* Novo, Gravar */
  --bt-info: #0dcaf0;      /* Ver */
  --bt-aviso: #ffc107;     /* Alterar, Cancelar */
  --bt-sair: #6c757d;      /* Fechar, Voltar (o "Sair" do jbapp) */
  --bt-perigo: #dc3545;    /* Excluir */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--texto); background: var(--fundo); }
button { font: inherit; cursor: pointer; }

/* ===================== LOGIN ===================== */
.pagina-login { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-fundo { position: fixed; inset: 0; background: var(--lateral) center/cover no-repeat; z-index: -1; }
.login-caixa { width: 100%; max-width: 380px; background: var(--cartao); border-radius: 18px;
  padding: 36px 28px 28px; box-shadow: 0 20px 50px rgba(0,0,0,.35); text-align: center; }
.login-logo { width: 72px; height: 72px; }
.login-caixa h1 { margin: 12px 0 4px; font-size: 1.5rem; }
.sub { margin: 0 0 24px; color: var(--texto-suave); }
form { text-align: left; display: grid; gap: 14px; }
label { font-size: .85rem; font-weight: 600; color: var(--texto-suave); display: grid; gap: 6px; }
input { font: inherit; padding: 11px 12px; border: 1px solid var(--borda); border-radius: 10px; width: 100%; color: var(--texto); }
input:focus { outline: 2px solid var(--primaria); border-color: transparent; }
.senha { position: relative; }
.senha button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 1.1rem; opacity: .6; }
.erro { color: var(--erro); min-height: 1.2em; margin: 0; font-size: .9rem; }
.botao { background: var(--primaria); color: #fff; border: 0; padding: 12px; border-radius: 10px; font-weight: 600; }
.botao:hover { background: var(--primaria-escura); }
.botao:disabled { opacity: .6; }

/* ===================== PRINCIPAL ===================== */
.pagina-principal { display: flex; }
.lateral { width: 270px; flex-shrink: 0; height: 100vh; position: sticky; top: 0; overflow-y: auto;
  background: var(--lateral); color: var(--lateral-texto); padding: 14px 10px; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; padding: 6px 10px 18px; }
.marca img { width: 36px; height: 36px; }
.grupo-titulo { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0;
  color: var(--lateral-texto); padding: 10px; border-radius: 8px; text-align: left; font-weight: 600; }
.grupo-titulo:hover { background: rgba(255,255,255,.06); }
.grupo-titulo i { margin-left: auto; font-style: normal; transition: transform .2s; }
.grupo.aberto .grupo-titulo i { transform: rotate(180deg); }
.itens { display: none; padding: 2px 0 8px 36px; }
.grupo.aberto .itens { display: grid; }
.itens a { color: var(--lateral-texto); text-decoration: none; padding: 7px 10px; border-radius: 6px; font-size: .92rem; opacity: .85; }
.itens a:hover { background: rgba(255,255,255,.06); opacity: 1; }
.itens a.ativo { background: var(--primaria); color: #fff; opacity: 1; }

.area { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topo { display: flex; align-items: center; gap: 12px; background: var(--cartao); border-bottom: 1px solid var(--borda); padding: 12px 20px; position: sticky; top: 0; z-index: 5; }
.topo h1 { font-size: 1.1rem; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario { display: flex; align-items: center; gap: 10px; color: var(--texto-suave); font-size: .9rem; }
.usuario button { border: 1px solid var(--borda); background: none; padding: 6px 12px; border-radius: 8px; }
.hamburguer { display: none; border: 0; background: none; font-size: 1.4rem; }
#conteudo { padding: 24px 20px; }

.boas-vindas h2 { margin: 0 0 4px; }
.boas-vindas p { margin: 0 0 20px; color: var(--texto-suave); }
.boas-vindas p.diag { margin-top: -12px; font-size: .8rem; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.atalho { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px;
  display: grid; gap: 6px; text-align: left; transition: transform .15s, box-shadow .15s; color: var(--texto); }
.atalho:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.08); border-color: var(--primaria); }
.atalho .ic { font-size: 1.6rem; }
.atalho span:nth-child(2) { font-weight: 600; }
.atalho small { color: var(--texto-suave); }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px; }
.vazio { text-align: center; padding: 50px 20px; }
.vazio .grande { font-size: 3rem; }
.vazio p { color: var(--texto-suave); }
.sombra { display: none; }

/* ===================== CELULAR ===================== */
@media (max-width: 800px) {
  .lateral { position: fixed; left: 0; top: 0; z-index: 20; transform: translateX(-100%); transition: transform .25s; }
  .menu-aberto .lateral { transform: none; }
  .menu-aberto .sombra { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 15; }
  .hamburguer { display: block; }
  .topo { padding: 10px 16px; }
  #conteudo { padding: 18px 16px; }
  .usuario span { display: none; }
}

/* ---------- telas (lista + ficha) ---------- */
.tela-topo { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.busca { display: flex; gap: 8px; flex: 1 1 380px; }
.busca select, .busca input { font: inherit; padding: 9px 10px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao); color: var(--texto); }
.busca input { flex: 1; min-width: 0; }
.busca .botao { padding: 9px 16px; }
.acoes { display: flex; gap: 10px; align-items: center; }
.etiqueta { font-size: .8rem; background: #e0f2f1; color: var(--primaria-escura); padding: 5px 10px; border-radius: 999px; font-weight: 600; }
.botao-sec { background: var(--cartao); color: var(--texto); border: 1px solid var(--borda); padding: 9px 14px; border-radius: 10px; font-weight: 600; }
.botao-sec:hover { border-color: var(--primaria); }
.botao-perigo { background: #fff; color: var(--erro); border: 1px solid #fecaca; padding: 9px 14px; border-radius: 10px; font-weight: 600; }
.ficha-botoes .botao { padding: 9px 16px; }
.cartao.sem-padding { padding: 0; overflow: hidden; }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th { text-align: left; background: #f8fafc; color: var(--texto-suave); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 10px 14px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover td { background: #f0fdfa; }
.carregando { color: var(--texto-suave); text-align: center; padding: 24px; }
.erro-linha { color: var(--erro); padding: 18px; }
.paginacao { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; color: var(--texto-suave); font-size: .9rem; }
.paginacao button { border: 1px solid var(--borda); background: var(--cartao); padding: 6px 12px; border-radius: 8px; }
.paginacao button:disabled { opacity: .4; }
.abas-tela { margin: 0 0 16px; }
.abas-tela .aba[hidden] { display: none; }
#cb-ficha[hidden], #cb-painel-lista[hidden] { display: none; }
.tabela .col-acoes { text-align: right; white-space: nowrap; }
.mini { border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); padding: 5px 10px; border-radius: 8px; font-size: .85rem; font-weight: 600; margin-left: 6px; }
.mini:hover { border-color: var(--primaria); color: var(--primaria); }
.mini.perigo { color: var(--erro); border-color: #fecaca; }
.mini.perigo:hover { border-color: var(--erro); }
.ficha-topo { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; }
.ficha-topo h2 { margin: 0 0 4px; }
.ficha-topo .sub { margin: 0; }
.ficha-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin: 18px 0; overflow-x: auto; }
.aba { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.aba.ativa { color: var(--primaria); border-bottom-color: var(--primaria); }
.grade-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.grade-campos[hidden] { display: none; }
.campo.larg2 { grid-column: span 2; }
.campo.larg3 { grid-column: span 4; }
.campo input[readonly], .campo textarea[readonly] { background: #f8fafc; color: var(--texto); }
.campo.so-ver input, .campo.so-ver textarea { background: #f1f5f9; color: var(--texto-suave); }
.campo textarea { font: inherit; padding: 11px 12px; border: 1px solid var(--borda); border-radius: 10px; width: 100%; resize: vertical; }
.campo i { font-style: normal; font-size: .8rem; }
.msg-ficha { font-weight: 600; min-height: 1.2em; margin: 16px 0 0; }
.msg-ficha.erro { color: var(--erro); }
.msg-ficha.ok { color: var(--primaria); }
.campo select { font: inherit; padding: 11px 12px; border: 1px solid var(--borda); border-radius: 10px; width: 100%; background: var(--cartao); color: var(--texto); }
.campo small { font-weight: 500; color: var(--primaria); }
@media (max-width: 800px) {
  .grade-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo.larg3 { grid-column: span 2; }
  .esconde-cel { display: none; }
  .busca { flex-basis: 100%; }
}

/* campos de número alinhados à direita (padrão do site: todo input com inputmode numeric/decimal ou classe "numero") */
input[inputmode="decimal"], input[inputmode="numeric"], input.numero, td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- botões no padrão do jbapp ----------
   Use: <button class="bt bt-gravar"><i class="fa fa-save"></i> Gravar</button>
   Para mudar uma cor, troque a variável --bt-... lá no começo do arquivo. */
.bt { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; padding: 9px 14px; border-radius: 8px;
  font-weight: 600; white-space: nowrap; color: #fff; background: var(--bt-cor, var(--bt-primario)); border-color: var(--bt-cor, var(--bt-primario)); }
.bt:hover { filter: brightness(.9); }
.bt:disabled { opacity: .65; filter: none; }
.bt[hidden] { display: none; }
.bt.mini { padding: 4px 9px; font-size: .82rem; margin-left: 4px; }
.bt-procurar, .bt-entrar { --bt-cor: var(--bt-primario); }
.bt-incluir, .bt-gravar { --bt-cor: var(--bt-sucesso); }
.bt-ver { --bt-cor: var(--bt-info); color: #000; }
.bt-alterar, .bt-cancelar { --bt-cor: var(--bt-aviso); color: #000; }
.bt-fechar, .bt-voltar { --bt-cor: var(--bt-sair); }
.bt-excluir { --bt-cor: var(--bt-perigo); }
.botao.bt-entrar { background: var(--bt-primario); display: flex; justify-content: center; gap: 8px; }

/* grupos de campos (tela Config) */
.grupos-config { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.grupo-campos { grid-column: span 6; border: 1px solid var(--borda); border-radius: 10px; padding: 12px 16px 16px; margin: 0; min-width: 0; }
.grupo-campos.meio { grid-column: span 3; }
.grupo-campos.trio { grid-column: span 2; }
.grupo-campos.trio .grade-campos { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.grupo-campos legend { font-weight: 700; color: var(--primaria-escura); padding: 0 6px; }
.grupo-campos .grade-campos { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.grupo-campos .campo.larg2 { grid-column: span 2; }
@media (max-width: 800px) {
  .grupos-config { grid-template-columns: 1fr; }
  .grupo-campos, .grupo-campos.meio, .grupo-campos.trio { grid-column: span 1; }
  .grupo-campos .grade-campos, .grupo-campos.trio .grade-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* tela de usuários: listas de marcar (cidades, opções do menu, sim/não) */
.lista-marcar { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; }
.marcar { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: .92rem; color: var(--texto); cursor: pointer; padding: 3px 0; }
.marcar input { width: 18px; height: 18px; accent-color: var(--primaria); flex: none; }
.grupo-campos legend .marcar { font-weight: 700; }
.tabela.horarios td { padding: 6px 14px; }
.tabela.horarios tbody tr { cursor: default; }
.tabela.horarios input[type=time] { font: inherit; padding: 7px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); color: var(--texto); }
.etiqueta-erro { color: var(--erro); font-weight: 700; }
.so-editando[hidden] { display: none; }
.aviso-perfil { background: #fff7e6; border: 1px solid #ffd591; color: #8a5300; border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; font-size: .9rem; }
/* tela Controle de acesso */
.ac-duas { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.ac-lista .tabela tr.selecionada td { background: #e6f4f1; font-weight: 600; }
.ac-lista .busca input { width: 100%; }
.grade-acesso td, .grade-acesso th { padding: 6px 10px; }
.grade-acesso .centro { text-align: center; }
.grade-acesso input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primaria); }
.grade-acesso tbody tr { cursor: default; }
.grade-acesso tr.linha-grupo td { background: #f8fafc; }
.grade-acesso td.filha { padding-left: 28px; }
.grade-acesso tr.tem-campos td:first-child { cursor: pointer; color: var(--primaria-escura); }
.grade-acesso select { font: inherit; font-size: .85rem; padding: 3px 4px; border: 1px solid var(--borda); border-radius: 6px; background: var(--cartao); }
.grade-acesso select.excecao { border-color: #f59e0b; background: #fff7e6; font-weight: 700; }
.etiqueta a { color: inherit; text-decoration: none; margin-left: 4px; }
.ac-editor, .ac-lista { min-width: 0; }
@media (max-width: 800px) { .ac-duas { grid-template-columns: minmax(0, 1fr); } }

/* ---------- troca de cidade (botão no topo + tela) ---------- */
.usuario .bt-local { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; color: var(--primaria-escura); border-color: #99f6e4; background: #f0fdfa; font-weight: 600; cursor: pointer; }
.usuario .bt-local[hidden] { display: none; }
.usuario .bt-local span { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.usuario .bt-local:hover { border-color: var(--primaria); }
.lc-ajuda { color: var(--texto-suave); margin: 0 0 14px; }
.lc-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.lc-grade.lc-so-cidades { grid-template-columns: minmax(0, 560px); }
.lc-bloco h3 { margin: 0 0 10px; font-size: 1rem; }
.lc-bloco h3 small { color: var(--texto-suave); font-weight: 500; }
.lc-filtro { width: 100%; box-sizing: border-box; font: inherit; padding: 9px 10px; border: 1px solid var(--borda); border-radius: 10px; margin-bottom: 10px; background: var(--cartao); color: var(--texto); }
.lc-lista { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.lc-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; font: inherit; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao); color: var(--texto); cursor: pointer; }
.lc-item:hover:not(:disabled) { border-color: var(--primaria); background: #f0fdfa; }
.lc-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lc-item small { color: var(--texto-suave); flex-shrink: 0; }
.lc-item.lc-atual { border-color: var(--primaria); background: #ccfbf1; font-weight: 600; }
.lc-estado { font-size: .75rem; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; margin: 8px 2px 2px; }
.lc-vazio { color: var(--texto-suave); margin: 6px 2px; }
@media (max-width: 800px) {
  .lc-grade { grid-template-columns: minmax(0, 1fr); }
  .usuario .bt-local { max-width: 150px; padding: 6px 8px; }
  .lc-lista { max-height: 45vh; }
}
.usuario .bt-local:disabled { opacity: .5; cursor: not-allowed; border-color: var(--borda); background: none; color: var(--texto-suave); }
.usuario .bt-local.so-nome { cursor: default; background: none; border-color: transparent; }
.usuario .bt-local.so-nome .fa-caret-down { display: none; }

/* ---------- cobrança por recolhe ---------- */
.cb-filtros { margin-bottom: 16px; }
.cb-campos { display: flex; flex-wrap: wrap; gap: 12px; }
.cb-campos label, .cb-mov label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--texto-suave); font-weight: 600; }
.cb-campos input, .cb-campos select, .cb-mov input { font: inherit; font-size: 1rem; padding: 9px 10px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao); color: var(--texto); min-width: 0; }
.cb-campos .cb-recolhe { flex: 1 1 280px; }
.cb-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cb-rel-cartao h3 { margin: 0 0 10px; font-size: 1rem; }
.cb-texto { margin: 0; font-family: "Courier New", Courier, monospace; font-size: 13px; line-height: 1.45; white-space: pre; overflow: auto; max-height: 62vh; background: #f8fafc; border: 1px solid var(--borda); border-radius: 10px; padding: 12px; color: var(--texto); }
.cb-vazio { font-family: inherit; color: var(--texto-suave); white-space: normal; }
.cb-quebra { display: block; border-top: 1px dashed var(--texto-suave); margin: 6px 0; height: 0; }
.cb-caixa { max-height: 55vh; }
.cb-quem { margin: 0 0 12px; color: var(--texto-suave); }
.cb-mov { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 12px; margin-bottom: 8px; }
.cb-mov input#cb-valor { text-align: right; }
.janela-fundo { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; }
.janela-fundo[hidden] { display: none; }
.janela { background: var(--cartao); border-radius: var(--raio); padding: 20px; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.janela-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.janela-topo h3 { margin: 0; font-size: 1.05rem; }
.janela-x { border: none; background: none; font-size: 1.1rem; cursor: pointer; color: var(--texto-suave); padding: 4px 8px; }
@media (max-width: 800px) {
  .cb-campos label:not(.cb-recolhe) { flex: 1 1 140px; }
  .cb-botoes .bt { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .cb-mov { grid-template-columns: minmax(0, 1fr); }
  .cb-texto { font-size: 11px; max-height: 55vh; }
}
.cl-aviso { margin: 10px 0 0; font-size: .85rem; color: var(--texto-suave); }
.busca .sel-cliente { max-width: 260px; flex: 0 1 auto; }
@media (max-width: 800px) { .busca:has(.sel-cliente) { flex-wrap: wrap; } .busca .sel-cliente { max-width: none; flex: 1 1 100%; } }

/* ===== Tela de avisos ===== */
.av-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 1100px) { .av-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .av-grade { grid-template-columns: 1fr; } }
.av-texto { font: .95rem/1.45 ui-monospace, Consolas, monospace; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; width: 100%; resize: vertical; color: var(--texto); background: #fff; white-space: pre; overflow-x: auto; }
.av-texto[readonly] { background: #f8fafc; }
.av-texto:focus { outline: 2px solid var(--primaria); outline-offset: -1px; }
.av-longa { color: var(--erro); font-weight: 400; font-size: .82rem; min-height: 1.1em; }

/* ===== Campo de senha com olho (cadastros) ===== */
.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 40px; }
.bt-olho-campo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--texto-suave); cursor: pointer; padding: 6px; }

/* ===== Bancado caixa ===== */
.grupo-campos .grade-campos.bc-grade { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

/* ===== Ativa/Desativa loterias ===== */
.al-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 16px; }
.al-barra .campo { min-width: 180px; }
.al-grupo { margin-top: 16px; }
.al-grupo legend small { font-weight: 400; color: var(--texto-suave); margin-left: 6px; }
.al-marcar { display: flex; gap: 16px; margin-bottom: 10px; }
.al-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 16px; }
.al-item { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--texto); font-size: .92rem; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.al-item:hover { background: #f1f5f9; }
.al-item input { width: auto; margin: 0; }
.al-item span { flex: 1; min-width: 0; }
.al-item small { font-size: .75rem; white-space: nowrap; }
.al-sim { color: var(--primaria); }
.al-nao { color: var(--texto-suave); }
.al-resultado { margin: 0; white-space: pre-wrap; font-size: .88rem; max-height: 260px; overflow: auto; }
.al-link { background: none; border: 0; padding: 0; color: var(--primaria); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.al-link:hover { text-decoration: underline; }

/* ---------- campos tipo "check" (caixinha S/N), ex.: tela de Jogos ---------- */
.campo-check { display: flex; align-items: center; gap: 8px; font-size: .92rem; cursor: pointer; padding: 4px 0; }
.campo-check input { width: 17px; height: 17px; flex: none; margin: 0; accent-color: var(--primaria); }
.campo-check input:disabled + span { color: var(--texto); }
.grupo-campos .grade-campos:has(.campo-check) { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 14px; }
@media (max-width: 700px) { .grupo-campos .grade-campos:has(.campo-check) { grid-template-columns: 1fr; } }
.grupo-campos legend .al-link { margin-left: 10px; font-weight: 500; }

/* ---------- Altera máximo ---------- */
.am-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 720px; }
.am-nome { color: var(--texto-suave); font-size: .9rem; margin-top: 4px; min-height: 1.2em; }
@media (max-width: 700px) { .am-grade { grid-template-columns: 1fr; } }
.aj-pagas { margin-top: 16px; }

/* ---------- Cadastro de resultados ---------- */
.rs-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.rs-barra .campo { min-width: 150px; }
.rs-barra .rs-lot { flex: 1; min-width: 220px; }
.rs-barra .ficha-botoes { margin-left: auto; }
.rs-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 8px; }
.rs-cab, .rs-linha { display: grid; grid-template-columns: 44px 110px 56px 1fr; gap: 8px; align-items: center; }
.rs-cab { font-size: .8rem; color: var(--texto-suave); font-weight: 600; margin-bottom: 4px; }
.rs-linha { margin-bottom: 6px; }
.rs-linha input { width: 100%; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.rs-pos { font-weight: 700; color: var(--texto-suave); text-align: right; }
.rs-grupo { font-variant-numeric: tabular-nums; font-weight: 600; text-align: center; }
.rs-bicho { font-size: .9rem; }
.rs-soma { margin-top: 10px; }
.rs-mensagens { min-height: 120px; max-height: 520px; overflow: auto; font-size: .92rem; line-height: 1.6; }
.rs-lista { margin-top: 16px; }
.rs-lista-topo { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 6px; }
.rs-lista-topo h3 { margin: 0; font-size: 1rem; }
.rs-lista tbody tr { cursor: pointer; }
@media (max-width: 800px) { .rs-grade { grid-template-columns: 1fr; } .rs-barra .ficha-botoes { margin-left: 0; } }

/* ---------- janela da pule (js/telas/pule.js) ---------- */
.janela-pule { width: min(460px, 100%); }
.pule-texto { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700; font-size: 14px; white-space: pre; overflow: auto; max-height: 62vh; background: var(--fundo); border-radius: 8px; padding: 12px; margin: 8px 0 0; }
.pule-excluida { color: var(--erro); }
.link-nsu { background: none; border: 0; padding: 0; color: var(--primaria); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* ---------- Validar / Enviar prêmios ---------- */
.pv-filtros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 4px; }
.pv-filtros .grupo-campos:only-child { grid-column: 1 / -1; }
.pv-dupla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pv-dupla [hidden] { display: none; }
.pv-lista { margin-top: 16px; }
.pv-topo { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; padding: 12px 16px; }
.pv-todos { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.pv-ck { width: 36px; text-align: center; }
.pv-ck input, .pv-todos input { width: 17px; height: 17px; accent-color: var(--primaria); }
.pv-lista tbody tr { cursor: pointer; }
.pv-lista tbody tr.pv-marcado td { background: color-mix(in srgb, var(--primaria) 10%, transparent); }
@media (max-width: 800px) { .pv-filtros { grid-template-columns: 1fr; } }

/* ---------- Consulta / Excluir jogo ---------- */
.cs-busca { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 720px; }
.cs-situacao { display: inline-block; margin: 4px 0 12px; padding: 8px 14px; border-radius: 8px; font-weight: 700; }
.cs-situacao[hidden] { display: none; }
.cs-ok { background: color-mix(in srgb, var(--bt-sucesso) 14%, transparent); color: var(--bt-sucesso); }
.cs-nao { background: color-mix(in srgb, var(--erro) 12%, transparent); color: var(--erro); }
.cs-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cs-grade.cs-uma { grid-template-columns: minmax(0, 560px); }
.cs-texto { min-height: 200px; max-height: 60vh; margin: 0; }
@media (max-width: 800px) { .cs-busca, .cs-grade { grid-template-columns: 1fr; } }

/* ---------- Movimento ---------- */
.mv-filtros { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 14px; }
.mv-filtros .mv-largo { grid-column: span 2; }
.mv-lista { margin-top: 16px; }
.mv-tabela td, .mv-tabela th { white-space: nowrap; }
.mv-tabela tfoot td { font-weight: 700; border-top: 2px solid var(--borda); background: var(--fundo); position: sticky; bottom: 0; }
@media (max-width: 900px) { .mv-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mv-filtros .mv-largo { grid-column: 1 / -1; } }
.rs-grade > .grupo-campos, .cs-grade > .grupo-campos, .pv-filtros > .grupo-campos { grid-column: auto; }
.pv-filtros > .grupo-campos:only-child { grid-column: 1 / -1; }
.cs-busca { margin-top: 10px; }
.rs-barra { margin-bottom: 4px; }

/* ---------- Pagamento de comissão retida e Relatório de fechamento ---------- */
.cr-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px 14px; }
.cr-grade.cr-camb { grid-template-columns: minmax(0, 160px) minmax(0, 1fr); }
.cr-grade input.numero { text-align: right; }
.ficha > .grupo-campos + .grupo-campos { margin-top: 12px; }
.fc-filtros { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); gap: 12px 14px; }
.fc-lista { margin-top: 16px; }
.fc-tabela td, .fc-tabela th { white-space: nowrap; }
.fc-tabela .fc-grupo td { font-weight: 700; background: var(--fundo); color: var(--primaria); }
.fc-tabela .fc-subtotal td { font-weight: 600; border-bottom: 2px solid var(--borda); }
.fc-tabela tfoot td { font-weight: 700; border-top: 2px solid var(--borda); background: var(--fundo); position: sticky; bottom: 0; }
@media (max-width: 700px) { .cr-grade, .cr-grade.cr-camb, .fc-filtros { grid-template-columns: 1fr; } }

/* ---------- Relatórios do Movimento diário (relatorios.js) ---------- */
.rl-filtros { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 14px; margin-top: 10px; }
.rl-filtros .rl-largo { grid-column: span 2; }
.rl-filtros input.so-leitura { background: var(--fundo); }
.rl-lista { margin-top: 16px; }
.rl-lista.rl-estreito { max-width: 760px; }
.rl-resumo { margin: 0; padding: 12px 14px; font-weight: 600; color: var(--texto-suave, #64748b); }
.rl-tabela td, .rl-tabela th { white-space: nowrap; }
.rl-tabela td.rl-quebra { white-space: normal; min-width: 260px; max-width: 520px; font-family: "Courier New", Courier, monospace; font-size: .85rem; }
.rl-tabela tfoot td { font-weight: 700; border-top: 2px solid var(--borda); background: var(--fundo); position: sticky; bottom: 0; }
.rl-texto { font: 700 14px/1.45 "Courier New", Courier, monospace; margin: 0; padding: 12px 14px; background: #fff; color: #000; border: 1px solid var(--borda); border-radius: 8px; overflow: auto; max-height: 65vh; white-space: pre; }
.rl-texto.rl-bobina { display: inline-block; min-width: 300px; max-width: 100%; font-size: 16px; }
@media (max-width: 900px) { .rl-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rl-filtros .rl-largo { grid-column: 1 / -1; } }
.rl-tabela .rl-grupo td { font-weight: 700; background: var(--fundo); color: var(--primaria); }
.rl-tabela .rl-subtotal td { font-weight: 600; border-bottom: 2px solid var(--borda); }
.cp-resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.cp-resumo .grupo-campos { background: var(--cartao, #fff); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.cp-item { display: flex; flex-direction: column; gap: 2px; }
.cp-item span { font-size: .8rem; color: var(--texto-suave, #64748b); font-weight: 600; }
.cp-item b { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .cp-resumo { grid-template-columns: 1fr; } .cp-resumo .grupo-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* aba Descarga */
.ld-add { display: flex; flex-direction: column; justify-content: flex-end; }
.ld-add .bt { justify-content: center; }
.dj-pules-lista { max-height: 55vh; }
.rl-filtros .da-arquivo { grid-column: span 4; }
.da-retorno { margin-top: 12px; }
.da-retorno h3 { margin: 0 0 6px; font-size: 1rem; }
.da-retorno pre { margin: 0; font-family: "Courier New", Courier, monospace; font-size: 13px; white-space: pre-wrap; background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; max-height: 30vh; overflow: auto; }
.rl-tabela tr.da-erro td { color: var(--erro); }
input.so-leitura.numero { text-align: right; }
@media (max-width: 900px) { .rl-filtros .da-arquivo { grid-column: 1 / -1; } }
/* aba Lançamentos */
.ln-titulo { margin: 18px 0 8px; font-size: 1rem; color: var(--primaria-escura); }
.ln-titulo span { font-weight: 500; color: var(--texto-suave); }
.ln-sem-margem { margin: 0; }
.ln-modo { margin: 10px 0 0; font-weight: 600; color: var(--texto-suave); }
.rl-filtros .ln-metade { grid-column: span 3; }
.ln-duas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.ln-aviso { margin: 8px 2px 0; font-size: .85rem; color: var(--texto-suave); }
.ln-filtro { margin-top: 16px; }
.ln-retorno { margin-top: 16px; }
.ln-retorno pre { margin: 8px 0 0; font-family: "Courier New", Courier, monospace; font-size: 13px; white-space: pre-wrap; background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; max-height: 30vh; overflow: auto; }
@media (max-width: 1400px) { .ln-duas { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .rl-filtros .ln-metade { grid-column: 1 / -1; } }

/* ---------- aba Relatórios (relatorios2.js) ---------- */
.ce-edita { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rl-tabela .col-acoes { white-space: nowrap; }

/* ---------- aba Quina / Seninha / Super Loto (concursos.js) ---------- */
.rc-dezenas { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
.rc-dezenas input { text-align: center; }
.rl-tabela td.rc-dez { font-family: "Courier New", Courier, monospace; letter-spacing: .5px; }
.vc-bt { justify-content: flex-end; display: flex; flex-direction: column; }

/* ---------- abas Desenvolvedor e Admin (devadmin.js) ---------- */
.dv-texto { margin: 0; min-height: 200px; max-height: 60vh; overflow: auto; white-space: pre; font: 600 14px "Courier New", Courier, monospace; }
.dv-situacao { margin: 6px 0 0; font-weight: 700; color: var(--primaria); }
.rl-tabela tr.selecionada td { background: #e6f4f1; font-weight: 600; }
.rl-tabela tr.riscada td { color: #9aa3ad; text-decoration: line-through; }

/* Sair com o ícone do JBOnLine (botão Off do topo: fas-power-off, cresce 1.2x no hover) - 08/11/2026 */
.usuario #sair { border: none; background: none; padding: 4px 6px; color: var(--texto-suave); font-size: 1.25rem; line-height: 1; cursor: pointer; transition: transform .15s, color .15s; }
.usuario #sair:hover { transform: scale(1.2); color: #dc2626; }

/* Carregando... das chamadas à API (js/api.js) - 08/11/2026 */
#carregando-api { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(15, 23, 42, .18); cursor: progress; }
#carregando-api.ativo { display: flex; }
#carregando-api .ca-caixa { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 12px; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.18); font-weight: 600; color: #334155; }
#carregando-api .ca-roda { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #cbd5e1; border-top-color: var(--primaria, #0d9488); animation: ca-gira .8s linear infinite; }
@keyframes ca-gira { to { transform: rotate(360deg); } }

/* Grade (09/11/2026): Movimento, Fechamento e relatórios com títulos e totais sempre visíveis.
   A tabela rola dentro da caixa; o cabeçalho fica fixo em cima e os totais fixos embaixo. */
.tabela-rolagem:has(> .mv-tabela), .tabela-rolagem:has(> .rl-tabela), .tabela-rolagem:has(> .fc-tabela) {
  overflow: auto; max-height: calc(100vh - 150px); min-height: 260px; }
.mv-tabela thead th, .rl-tabela thead th, .fc-tabela thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--borda); }
.mv-tabela tfoot td, .rl-tabela tfoot td, .fc-tabela tfoot td { z-index: 2; box-shadow: inset 0 2px 0 var(--borda); }
.mv-tabela tbody tr:hover td { background: #f1f5f9; }