:root {
  --azul: #10275a;
  --azul-claro: #2563eb;
  --azul-hover: #1d4ed8;
  --cinza-fundo: #eef1f6;
  --borda: #dde1e8;
  --texto: #1a2233;
  --verde: #16a34a;
  --vermelho: #dc2626;
  --amarelo: #d97706;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--cinza-fundo);
  color: var(--texto);
  line-height: 1.5;
}

a { color: var(--azul-claro); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Cabecalho */
header.topo {
  background: var(--azul);
  color: #fff;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
header.topo .marca { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: .3px; display: inline-flex; align-items: center; }
.logo-topo { height: 34px; margin-right: 10px; border-radius: 6px; background: #fff; padding: 2px; }
header.topo .marca small { font-weight: 400; opacity: .75; font-size: 13px; }
header.topo nav { display: flex; gap: 14px; align-items: center; }
header.topo nav a { color: #fff; font-size: 14px; }
header.topo nav button {
  color: #fff; font-size: 14px; background: rgba(255,255,255,0.12);
  border: none; cursor: pointer; padding: 8px 14px; border-radius: 8px;
}
header.topo nav button:hover { background: rgba(255,255,255,0.22); }
.ola { color: #c5d0ea; font-size: 14px; }
.btn-carrinho { position: relative; font-weight: 600; }
.contador {
  background: #ef4444; color: #fff; border-radius: 999px; font-size: 12px;
  padding: 1px 7px; margin-left: 4px; font-weight: 700;
}

/* Layout do catalogo */
.catalogo-layout {
  max-width: 1240px; margin: 0 auto; padding: 24px 20px;
  display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start;
}
.barra-topo {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
h1 { font-size: 26px; color: var(--azul); }
h2 { font-size: 20px; color: var(--azul); margin-bottom: 12px; }
p.sub { color: #6b7280; font-size: 14px; }

.busca {
  padding: 11px 16px; border: 1px solid var(--borda); border-radius: 10px;
  font-size: 15px; min-width: 260px; background: #fff;
}

/* Chips de categoria */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--borda);
  background: #fff; color: #374151; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .12s;
}
.chip:hover { border-color: var(--azul-claro); color: var(--azul-claro); }
.chip.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }

/* Grade de produtos */
.grade-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.produto {
  background: #fff; border: 1px solid var(--borda); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 2px 8px rgba(16,39,90,0.05); transition: transform .15s, box-shadow .15s;
}
.produto:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(16,39,90,0.14); }
.produto .foto {
  position: relative; width: 100%; aspect-ratio: 1 / 1; background: #f4f6fa;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.produto .foto img { width: 100%; height: 100%; object-fit: cover; }
.produto .foto .sem-foto { color: #aeb6c2; font-size: 13px; }
.produto .selo {
  position: absolute; top: 10px; left: 10px; background: var(--amarelo); color: #fff;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 8px; border-radius: 6px;
}
.produto .corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.produto .cat {
  font-size: 10px; color: var(--azul-claro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.produto .nome { font-weight: 700; font-size: 14px; margin: 4px 0; min-height: 38px; }
.produto .preco { font-size: 20px; font-weight: 800; color: var(--azul); margin-top: auto; }
.produto .campo-nomes { font-size: 11px; font-weight: 700; color: var(--azul); margin-top: 10px; }
.produto .campo-nomes textarea {
  min-height: 54px; font-weight: 400; font-size: 12px; text-transform: uppercase;
  margin-top: 4px;
}
/* Seletor de graduacao */
.produto .campo-grad { display: block; font-size: 11px; font-weight: 700; color: var(--azul); margin-top: 12px; text-transform: uppercase; letter-spacing: .3px; }
.produto .campo-grad select { margin-top: 4px; font-weight: 600; }

/* Grade de tamanhos */
.produto .rotulo-tam { font-size: 11px; font-weight: 700; color: #4b5563; margin-top: 12px; }
.produto .grade-tam { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.produto .tam { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; font-weight: 700; }
.produto .tam span { font-size: 11px; color: #374151; }
.produto .tam input {
  width: 48px; padding: 6px 4px; text-align: center; margin: 0; font-size: 14px;
}
.produto .add-qtd { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.produto .add-qtd input { width: 64px; text-align: center; margin: 0; }
.produto .btn-add {
  width: 100%; margin-top: 12px; padding: 11px; background: var(--azul); color: #fff;
  border: none; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 14px;
}
.produto .btn-add:hover { background: #0b1c42; }
.badge-tam {
  background: #e0e7ff; color: var(--azul); font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 5px; margin-left: 4px;
}

/* Destaques da home */
.vantagens { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.vantagem { background: #fff; border-radius: 12px; padding: 18px; box-shadow: 0 2px 10px rgba(16,39,90,0.06); display: flex; flex-direction: column; gap: 4px; }
.vantagem .v-ico { font-size: 26px; }
.vantagem strong { color: var(--azul); font-size: 15px; }
.vantagem span { color: #6b7280; font-size: 13px; }

/* Botão flutuante de WhatsApp */
.whats-flutuante {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  background: #25d366; color: #fff; font-weight: 700; font-size: 14px;
  padding: 12px 18px; border-radius: 999px; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 20px rgba(37,211,102,0.45); text-decoration: none;
}
.whats-flutuante:hover { background: #1ebe5a; text-decoration: none; }
.whats-icone { font-size: 18px; }
@media (max-width: 860px) {
  .whats-flutuante { bottom: 80px; padding: 12px 14px; }
  .whats-flutuante .whats-txt { display: none; }
}

/* Toast (aviso rapido) */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
  background: #10275a; color: #fff; padding: 12px 22px; border-radius: 10px;
  font-weight: 600; font-size: 14px; box-shadow: 0 8px 26px rgba(0,0,0,0.25);
  opacity: 0; pointer-events: none; transition: all .25s; z-index: 60;
}
.toast.mostrar { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.erro { background: #b91c1c; }

/* Tela de pagamento (overlay) */
.overlay {
  display: none; position: fixed; inset: 0; z-index: 70;
  background: rgba(16,39,90,0.55); align-items: center; justify-content: center; padding: 16px;
}
.modal-pag {
  background: #fff; border-radius: 16px; padding: 26px; max-width: 420px; width: 100%;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3); max-height: 92vh; overflow-y: auto;
}
.modal-pag h2 { margin-bottom: 12px; }
.modal-pag .qr { width: 220px; height: 220px; margin: 8px auto; display: block; border: 1px solid var(--borda); border-radius: 10px; }
.status-pag { padding: 10px; border-radius: 8px; font-weight: 700; margin-bottom: 14px; }
.status-pag.aguardando { background: #fef3c7; color: var(--amarelo); }
.status-pag.pago { background: #dcfce7; color: var(--verde); }
.cob-bloco { border: 1px solid var(--borda); border-radius: 10px; padding: 14px; margin-bottom: 12px; text-align: left; }
.cob-titulo { font-size: 14px; margin-bottom: 8px; color: var(--texto); }
.copia-cola { display: flex; gap: 6px; }
.copia-cola input { font-size: 12px; }
.copia-cola button { background: var(--azul); color: #fff; border: none; border-radius: 8px; padding: 0 14px; font-weight: 700; cursor: pointer; }
.btn-boleto {
  display: inline-block; margin-top: 8px; background: var(--azul); color: #fff;
  padding: 12px 20px; border-radius: 10px; font-weight: 700;
}
.btn-boleto:hover { text-decoration: none; background: #0b1c42; }

/* Barra fixa no celular */
.barra-mobile {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: #fff; border-top: 1px solid var(--borda);
  padding: 12px 18px; justify-content: space-between; align-items: center;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.1);
}
.barra-mobile strong { font-size: 18px; color: var(--azul); }
.barra-mobile button {
  background: var(--azul-claro); color: #fff; border: none; padding: 11px 20px;
  border-radius: 9px; font-weight: 700; font-size: 14px; cursor: pointer;
}

/* Formularios em geral */
input, textarea, select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px;
  font-size: 15px; font-family: inherit; background: #fff;
}
textarea { resize: vertical; }
input:focus, textarea:focus { outline: 2px solid var(--azul-claro); outline-offset: -1px; border-color: var(--azul-claro); }

/* Carrinho lateral */
.carrinho-lateral { position: sticky; top: 90px; }
.card {
  background: #fff; border-radius: 14px; box-shadow: 0 4px 20px rgba(16,39,90,0.08); padding: 22px;
}
.carrinho h2 { margin-top: 0; }
.item-carrinho {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid #eef0f4; gap: 8px;
}
.item-nome { font-size: 14px; font-weight: 600; }
.nomes-item { color: var(--azul-claro); font-size: 12px; white-space: pre-line; margin-top: 2px; }
.muted { color: #8a93a3; font-size: 13px; }
.linha-total { display: flex; justify-content: space-between; font-size: 20px; font-weight: 800; color: var(--azul); margin: 16px 0; }
.lbl-obs { display: block; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.lbl-obs textarea { margin-top: 5px; min-height: 60px; }
.resumo-pag { font-size: 13px; color: #4b5563; margin: -4px 0 14px; padding: 8px 10px; background: #f6f8fb; border-radius: 8px; }
.resumo-pag:empty { display: none; }
.resumo-pag .verde { color: var(--verde); font-weight: 600; }
.resumo-pag .total-pag { font-size: 15px; color: var(--azul); }

/* Opções de forma de pagamento (cartões clicáveis) */
.opcoes-pag { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.opcao-pag {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; padding: 10px 12px; border: 1.5px solid var(--borda);
  border-radius: 10px; background: #fff; cursor: pointer; transition: .15s;
}
.opcao-pag:hover { border-color: var(--azul-claro); }
.opcao-pag.ativa { border-color: var(--azul-claro); background: #eff6ff; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.opcao-pag .op-titulo { font-weight: 700; font-size: 14px; color: #1f2937; }
.opcao-pag .op-desc { font-size: 12px; color: #6b7280; }

/* Sub-opções (prazo do boleto faturado / parcelas do cartão) */
.sub-opcao-pag { margin-bottom: 10px; }
.sub-opcao-pag:empty { display: none; }
.sub-label { font-size: 12px; font-weight: 600; color: #4b5563; margin-bottom: 6px; }
.sub-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.sub-btn {
  padding: 7px 11px; border: 1.5px solid var(--borda); border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; color: #374151; transition: .15s;
}
.sub-btn:hover { border-color: var(--azul-claro); }
.sub-btn.ativa { border-color: var(--azul-claro); background: var(--azul-claro); color: #fff; }

/* Barra de progresso do desconto PIX */
.barra-pix { margin: 4px 0 14px; padding: 10px 12px; border-radius: 10px; background: #f0f9ff; border: 1px solid #bae6fd; }
.barra-pix.liberado { background: #ecfdf5; border-color: #a7f3d0; }
.barra-pix .bp-texto { font-size: 12.5px; color: #075985; margin-bottom: 7px; line-height: 1.35; }
.barra-pix.liberado .bp-texto { color: #047857; }
.barra-pix .bp-track { height: 8px; background: #e0f2fe; border-radius: 99px; overflow: hidden; }
.barra-pix.liberado .bp-track { background: #d1fae5; }
.barra-pix .bp-fill { height: 100%; background: var(--azul-claro); border-radius: 99px; transition: width .3s; }
.barra-pix.liberado .bp-fill { background: var(--verde); }

button.primario {
  width: 100%; padding: 13px; background: var(--azul-claro); color: #fff; border: none;
  border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer;
}
button.primario:hover { background: var(--azul-hover); }
button.primario:disabled { opacity: .6; cursor: default; }

.aviso { margin-top: 14px; padding: 12px; border-radius: 8px; font-size: 14px; text-align: center; }
.aviso.ok { background: #dcfce7; color: var(--verde); }
.aviso.erro { background: #fee2e2; color: var(--vermelho); }

/* Secao "meus pedidos" e paginas simples */
.container { max-width: 1240px; margin: 0 auto; padding: 10px 20px 40px; }
.card.estreito { max-width: 460px; margin: 40px auto; }

/* Tabelas */
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; background: #fff; border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { background: #f6f8fb; font-weight: 700; }

/* Etiquetas de status */
.tag { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.tag.pendente { background: #fef3c7; color: var(--amarelo); }
.tag.aprovado { background: #dcfce7; color: var(--verde); }
.tag.recusado { background: #fee2e2; color: var(--vermelho); }
.tag.novo { background: #dbeafe; color: var(--azul-claro); }

/* Botoes pequenos */
.btn-mini { padding: 5px 11px; border-radius: 6px; border: none; font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-aprovar { background: var(--verde); color: #fff; }
.btn-recusar { background: var(--vermelho); color: #fff; }
.btn-ver { background: #e5e7eb; color: #333; }

/* Landing / paginas de formulario */
label { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
label input, label textarea { margin-top: 5px; }
.hero { text-align: center; padding: 56px 20px; }
.hero h1 { font-size: 36px; }
.hero p { color: #555; max-width: 540px; margin: 14px auto 30px; }
.botoes-hero { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.botoes-hero a { padding: 13px 26px; border-radius: 10px; font-weight: 700; font-size: 15px; }
.botoes-hero a.solido { background: var(--azul-claro); color: #fff; }
.botoes-hero a.solido:hover { background: var(--azul-hover); text-decoration: none; }
.botoes-hero a.contorno { border: 1px solid var(--azul-claro); color: var(--azul-claro); }
.botoes-hero a.contorno:hover { text-decoration: none; background: #eaf1ff; }

/* Formulario de produto (admin) */
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 18px; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 4px 0 16px; }
label.check input { width: auto; margin: 0; }
#lista-produtos img { display: block; }

/* Grade de 2 colunas para formularios */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }

/* ===== App do admin (menu lateral + abas) ===== */
.admin-app { display: flex; min-height: 100vh; align-items: stretch; }
.sidebar {
  width: 240px; flex-shrink: 0; background: var(--azul); color: #fff;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.side-marca {
  display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800;
  padding: 20px 18px; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.side-nav { flex: 1; padding: 10px 0; overflow-y: auto; }
.side-item {
  display: flex; align-items: center; gap: 8px; padding: 13px 20px; color: #c5d0ea;
  font-size: 15px; font-weight: 600; cursor: pointer; border-left: 3px solid transparent;
}
.side-item:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; }
.side-item.ativo { background: rgba(255,255,255,0.12); color: #fff; border-left-color: #fff; }
.side-badge {
  margin-left: auto; background: #ef4444; color: #fff; font-size: 12px; font-weight: 700;
  min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 999px;
}
.side-badge:empty { display: none; }
.side-rodape { padding: 14px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: 8px; }
.side-rodape button { border: none; border-radius: 8px; padding: 11px; font-weight: 700; font-size: 13px; cursor: pointer; }
.side-btn-site { background: rgba(255,255,255,0.15); color: #fff; }
.side-btn-site:hover { background: rgba(255,255,255,0.25); }
.side-btn-sair { background: #fff; color: var(--azul); }
.side-conteudo { flex: 1; padding: 30px 34px; max-width: 1100px; }
.tab-panel h1 { margin-bottom: 4px; }

@media (max-width: 780px) {
  .admin-app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: column; }
  .side-nav { display: flex; overflow-x: auto; padding: 0; }
  .side-item { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; padding: 12px 14px; }
  .side-item.ativo { border-left: none; border-bottom-color: #fff; }
  .side-badge { margin-left: 6px; }
  .side-rodape { flex-direction: row; }
  .side-conteudo { padding: 20px 16px; }
}

/* Dashboard do admin */
.dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 26px; }
.stat { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(16,39,90,0.06); }
.stat-num { font-size: 28px; font-weight: 800; }
.stat-txt { font-size: 13px; color: #6b7280; margin-top: 2px; }

/* Filtros de pedidos */
.filtros-pedidos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.filtros-pedidos input, .filtros-pedidos select { width: auto; flex: 1; min-width: 160px; }
.pedido-card { margin-bottom: 14px; }
.pedido-card select { width: auto; display: inline-block; padding: 6px 10px; }

/* Responsivo */
@media (max-width: 860px) {
  .catalogo-layout { grid-template-columns: 1fr; }
  .carrinho-lateral { position: static; }
  .barra-mobile { display: flex; }
  body { padding-bottom: 72px; } /* espaco para a barra fixa nao cobrir conteudo */
}