/* BSB Utilidades: base visual compartilhada entre a loja e o painel */

:root {
  /* Cores da marca, tiradas da logo: verde, amarelo e preto */
  --marca: #0a7d1f;
  --marca-escura: #075c15;
  --marca-viva: #16a02e;
  --marca-clara: #e9f6ec;
  --amarelo: #f6e20d;
  --amarelo-escuro: #e0cc00;
  --sobre-amarelo: #1c1a00;
  --preto: #0e1511;
  --grafite: #3b4a41;
  /* Cores de situação */
  --verde: #0a7d1f;
  --verde-claro: #e9f6ec;
  --ambar: #f5a524;
  --ambar-escuro: #a86400;
  --ambar-claro: #fff4dd;
  --vermelho: #b91c1c;
  --vermelho-claro: #fdecec;
  --info: #173f6b;
  --info-claro: #e8f0f9;
  /* Neutros */
  --tinta: #161c18;
  --cinza: #5a665e;
  --cinza-claro: #97a39b;
  --linha: #e2e8e3;
  --borda: #cbd5cd;
  --fundo: #f4f6f4;
  --fundo-suave: #f8faf8;
  --fundo-campo: #f0f4f1;
  --branco: #ffffff;
  --raio: 12px;
  --raio-p: 8px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --sombra-g: 0 10px 30px rgba(16, 24, 40, .12);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fundo);
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; color: var(--tinta); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
small, .pequeno { font-size: .85rem; }
.mudo { color: var(--cinza); }
.direita { text-align: right; }
.centro { text-align: center; }
.nowrap { white-space: nowrap; }
.negrito { font-weight: 700; }
.verde { color: var(--verde); }
.vermelho { color: var(--vermelho); }
.escondido { display: none !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.icone { flex: none; vertical-align: -0.2em; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .62em 1.1em; min-height: 42px;
  font: inherit; font-weight: 600; line-height: 1.2;
  color: var(--tinta); background: var(--branco);
  border: 1px solid var(--linha); border-radius: var(--raio-p);
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, box-shadow .15s;
}
.botao:hover { background: var(--fundo-suave); border-color: var(--borda); text-decoration: none; }
.botao:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 3px solid rgba(22, 160, 46, .45); outline-offset: 1px;
}
.botao.primario { background: var(--marca); border-color: var(--marca); color: #fff; }
.botao.primario:hover { background: var(--marca-escura); border-color: var(--marca-escura); }
.botao.destaque { background: var(--amarelo); border-color: var(--amarelo-escuro); color: var(--sobre-amarelo); }
.botao.destaque:hover { background: var(--amarelo-escuro); }
.botao.sucesso { background: var(--verde); border-color: var(--verde); color: #fff; }
.botao.sucesso:hover { background: var(--marca-escura); }
.botao.perigo { color: var(--vermelho); border-color: #f3c6c6; }
.botao.perigo:hover { background: var(--vermelho-claro); }
.botao.whats { background: #1fa855; border-color: #1fa855; color: #fff; }
.botao.whats:hover { background: #188a45; }
.botao.pequeno { padding: .4em .75em; min-height: 34px; font-size: .88rem; }
.botao.grande { padding: .85em 1.4em; min-height: 52px; font-size: 1.05rem; }
.botao.largo { width: 100%; }
.botao.so-icone { padding: .45em; min-width: 38px; min-height: 38px; }
.botao[disabled], .botao.ocupado { opacity: .6; cursor: not-allowed; }
.botao-link { background: none; border: 0; padding: 0; font: inherit; color: var(--marca); cursor: pointer; }
.botao-link:hover { text-decoration: underline; }

/* Formulários */
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3em; color: #333d36; }
label .opcional { font-weight: 400; color: var(--cinza-claro); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel],
input[type=date], input[type=datetime-local], input[type=search], input[type=url], select, textarea {
  width: 100%; padding: .6em .75em; min-height: 42px;
  font: inherit; color: var(--tinta); background: var(--branco);
  border: 1px solid var(--borda); border-radius: var(--raio-p);
}
textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--marca-viva); }
input[readonly] { background: var(--fundo-campo); color: var(--cinza); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--marca); vertical-align: -3px; }
.campo { margin-bottom: 1rem; }
.campo .ajuda { display: block; margin-top: .3em; font-size: .83rem; color: var(--cinza); font-weight: 400; }
.marcar { display: flex; align-items: flex-start; gap: .55em; font-weight: 500; cursor: pointer; }
.marcar input { margin-top: .2em; flex: none; }
.com-prefixo { display: flex; align-items: stretch; }
.com-prefixo > span {
  display: flex; align-items: center; padding: 0 .7em; background: var(--fundo-campo); color: var(--cinza);
  border: 1px solid var(--borda); border-right: 0; border-radius: var(--raio-p) 0 0 var(--raio-p); font-size: .9rem;
}
.com-prefixo > span.sufixo { border-right: 1px solid var(--borda); border-left: 0; border-radius: 0 var(--raio-p) var(--raio-p) 0; }
.com-prefixo > input { border-radius: 0 var(--raio-p) var(--raio-p) 0; min-width: 0; }
.com-prefixo > input:not(:last-child) { border-radius: var(--raio-p) 0 0 var(--raio-p); }

.grade { display: grid; gap: 1rem; }
.grade.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade .campo { margin-bottom: 0; }
.ocupa2 { grid-column: span 2; }
.ocupa3 { grid-column: span 3; }
.ocupa-tudo { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .grade.c2, .grade.c3, .grade.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ocupa3 { grid-column: span 2; }
}
@media (max-width: 480px) {
  .grade.c2, .grade.c3 { grid-template-columns: 1fr; }
  .grade.c2 .ocupa2, .grade.c3 .ocupa2, .grade.c3 .ocupa3 { grid-column: auto; }
}

/* Avisos */
.aviso {
  display: flex; gap: .7em; align-items: flex-start;
  padding: .8em 1em; margin-bottom: 1rem; border-radius: var(--raio-p);
  border: 1px solid; font-size: .95rem;
}
.aviso.ok { background: var(--verde-claro); border-color: #b7e3c5; color: #0f5a2b; }
.aviso.erro { background: var(--vermelho-claro); border-color: #f3c6c6; color: #8f1616; }
.aviso.info { background: var(--info-claro); border-color: #c5d9ef; color: var(--info); }
.aviso.atencao { background: var(--ambar-claro); border-color: #f5dca6; color: #7a4a00; }
.aviso p:last-child { margin-bottom: 0; }

/* Etiquetas de situação */
.selo {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .18em .65em; border-radius: 999px;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
  background: #edf1ee; color: #47524b;
}
.selo.verde { background: var(--verde-claro); color: #0f5a2b; }
.selo.ambar { background: var(--ambar-claro); color: #7a4a00; }
.selo.azul { background: var(--info-claro); color: var(--info); }
.selo.vermelho { background: var(--vermelho-claro); color: #8f1616; }

/* Cartões */
.cartao {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 1.25rem; margin-bottom: 1.25rem;
}
.cartao > h2:first-child, .cartao > h3:first-child { margin-top: 0; }
.cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.cartao-topo h2, .cartao-topo h3 { margin: 0; }

/* Tabelas */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabela { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tabela th {
  text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--cinza); font-weight: 700; padding: .6em .75em; border-bottom: 2px solid var(--linha); white-space: nowrap;
}
.tabela td { padding: .7em .75em; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--fundo-suave); }
.tabela .direita { text-align: right; }
.tabela tfoot td { font-weight: 700; border-top: 2px solid var(--linha); border-bottom: 0; }

.vazio { text-align: center; padding: 2.5rem 1rem; color: var(--cinza); }
.vazio .icone { color: var(--cinza-claro); margin-bottom: .5rem; }

/* Paginação */
.paginas { display: flex; gap: .35rem; justify-content: center; flex-wrap: wrap; margin: 1.25rem 0 0; }
.paginas a, .paginas span {
  min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .6em; border-radius: var(--raio-p); border: 1px solid var(--linha); background: var(--branco); font-weight: 600;
}
.paginas .paginas-atual { background: var(--marca); border-color: var(--marca); color: #fff; }
.paginas .paginas-salto { border: 0; background: none; }

/* Janela de confirmação */
.janela-fundo {
  position: fixed; inset: 0; z-index: 100; background: rgba(14, 21, 17, .55);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.janela {
  background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra-g);
  width: 100%; max-width: 480px; max-height: 92vh; overflow: auto; padding: 1.4rem;
}
.janela.larga { max-width: 720px; }
.janela h3 { margin-top: 0; }
.janela-acoes { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.25rem; flex-wrap: wrap; }

@media print {
  .nao-imprimir { display: none !important; }
  body { background: #fff; }
}

/* Chave de liga e desliga */
.chave { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; font-weight: 400; position: relative; color: var(--tinta); font-size: 1rem; }
.chave input { position: absolute; opacity: 0; width: 46px; height: 26px; margin: 0; cursor: pointer; }
.chave .trilho { flex: none; width: 46px; height: 26px; border-radius: 999px; background: #bcc7bf; position: relative; transition: background .15s; margin-top: .05rem; }
.chave .trilho::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.chave input:checked + .trilho { background: var(--marca); }
.chave input:checked + .trilho::after { transform: translateX(20px); }
.chave input:focus-visible + .trilho { outline: 3px solid rgba(22, 160, 46, .45); outline-offset: 2px; }
.chave-texto { display: block; line-height: 1.35; }
.chave-texto strong { font-weight: 600; }
.chave-texto .ajuda { display: block; margin-top: .15em; font-size: .83rem; color: var(--cinza); }
.recuo-da-chave { margin-left: calc(46px + .75rem); }
@media (prefers-reduced-motion: reduce) { .chave .trilho, .chave .trilho::after { transition: none; } }

/* Contagem regressiva */
.contagem { font-variant-numeric: tabular-nums; font-weight: 700; }