:root {
  --fundo: #f4efe2;          /* creme (pergaminho) */
  --texto: #14213d;
  --suave: #5b6478;
  --linha: #d9d2be;
  --escuro: #0b2545;         /* azul profundo */
  --azul: #1d4e89;           /* azul da loja: links, mesa livre */
  --livre: #1d4e89;
  --ouro: #c9a227;
  --ouro-claro: #e7c65a;
  --vermelho: #c62828;
  --vermelho-escuro: #8e1b1b;
  --verde: #15803d;
  --serifa: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
}
h1, h2, h3, .marca b { font-family: var(--serifa); }
h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .25rem; }
h3 { font-size: 1rem; margin: 1rem 0 .25rem; }
a { color: var(--azul); }

/* topo */
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .75rem; padding-top: max(.5rem, env(safe-area-inset-top));
  background: var(--escuro); color: #fff; border-bottom: 3px solid var(--ouro);
}
.marca { display: flex; align-items: center; gap: .6rem; min-width: 0; color: #fff; text-decoration: none; }
.emblema { flex: none; height: 40px; width: auto; }
.marca-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.marca-texto b { font-size: min(1.05rem, 4.9vw); letter-spacing: .01em; color: var(--ouro-claro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca-texto small { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mosaico { height: 6px; background: repeating-conic-gradient(#14213d 0 25%, #f4efe2 0 50%) 0 0 / 12px 12px; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; padding: .35rem .2rem; font-size: 1.1rem; color: var(--ouro-claro); white-space: nowrap; }
.menu-nome { display: none; font-size: .9rem; color: #e5e7eb; }
.quem { color: var(--texto); margin: 0; padding: .6rem .8rem .5rem; border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; }
.quem span { font-size: .8rem; color: var(--suave); }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 20; min-width: 13rem; padding: .35rem; display: flex; flex-direction: column; background: #fff; border-radius: 10px; box-shadow: 0 4px 18px rgb(0 0 0 / .3); }
.menu nav a, .menu nav .link { display: block; width: 100%; padding: .7rem .8rem; text-align: left; color: var(--texto); text-decoration: none; font-size: 1rem; border-radius: 6px; }
.menu nav a:hover, .menu nav .link:hover { background: var(--fundo); }
@media (min-width: 640px) { .menu-nome { display: inline; } }
.menu form { margin: 0; }
.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* formulários */
label { display: block; margin-bottom: .9rem; font-weight: 600; font-size: .95rem; }
input, select, textarea {
  display: block; width: 100%; margin-top: .25rem; padding: .7rem .75rem;
  font: inherit; font-weight: 400; color: inherit; background: #fff;
  border: 1px solid var(--linha); border-radius: 8px;
}
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 3px solid var(--ouro-claro); outline-offset: 1px; }
.botao {
  display: inline-block; padding: .7rem 1.1rem; font: inherit; font-weight: 600; text-align: center;
  color: #fff; background: var(--escuro); border: 0; border-radius: 8px; cursor: pointer; text-decoration: none;
}
.botao:disabled { opacity: .6; cursor: wait; }
.botao.pequeno { padding: .6rem .9rem; }
.botao.grande { width: 100%; padding: 1rem; font-size: 1.1rem; background: var(--azul); }
.botao.perigo { background: var(--vermelho); }
.botao.claro { background: #fff; color: var(--texto); border: 1px solid var(--linha); }
.aviso { margin: .5rem .75rem; padding: .6rem .8rem; border-radius: 8px; background: #dcfce7; color: #14532d; }
.aviso.erro { background: #fee2e2; color: #7f1d1d; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* login */
.pagina-centro { display: grid; place-items: center; min-height: 100dvh; padding: 1rem; background: linear-gradient(165deg, #0b2545 0%, #13315c 100%); }
.cartao { width: 100%; max-width: 380px; padding: 0 0 1.5rem; overflow: hidden; background: #fffdf6; border-radius: 12px; border-top: 4px solid var(--ouro); box-shadow: 0 6px 24px rgb(0 0 0 / .35); }
.identidade { padding: 1.5rem 1rem 1.2rem; text-align: center; background: var(--escuro); color: #fff; }
.identidade h1 { margin: .5rem 0 .15rem; font-size: min(1.45rem, 6.2vw); white-space: nowrap; color: var(--ouro-claro); letter-spacing: .01em; }
.identidade p { margin: 0; font-size: min(.78rem, 3.3vw); letter-spacing: .08em; text-transform: uppercase; color: #cbd5e1; }
.emblema-grande { height: 108px; width: auto; max-width: 100%; }
.cartao form, .cartao .aviso { margin: 1.2rem 1.5rem 0; }
.explicacao { margin: 1.1rem 1.5rem 0; font-size: .9rem; line-height: 1.45; color: var(--suave); }
.dica { margin: .9rem 0 0; text-align: center; font-size: .82rem; color: var(--suave); }
.cartao .explicacao + form, .cartao .explicacao + .aviso { margin-top: 1rem; }
.cartao .botao { width: 100%; }

/* mapa */
.pagina-mapa { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.barra { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; background: #fff; border-bottom: 1px solid var(--linha); }
.barra.evento { padding-bottom: 0; border-bottom: 0; }
.barra.evento select { margin: 0; padding: .5rem .7rem; }
.busca { display: flex; gap: .4rem; flex: 1; min-width: 0; }
.busca input { margin: 0; padding: .55rem .7rem; min-width: 0; }
.contagem { display: flex; align-items: center; gap: .25rem; font-variant-numeric: tabular-nums; }
.contagem b { margin-right: .4rem; }
.dot { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--livre); background: #fff; }
.dot.vendida { background: var(--vermelho); border-color: var(--vermelho-escuro); }
.zoom { display: flex; gap: .3rem; }
.zoom button { width: 2.6rem; height: 2.6rem; font-size: 1.4rem; line-height: 1; background: #fff; border: 1px solid var(--linha); border-radius: 8px; cursor: pointer; }
.mapa-area { user-select: none; -webkit-user-select: none; flex: 1; overflow: auto; overscroll-behavior: contain; background: #faf6ea; touch-action: pan-x pan-y pinch-zoom; }
#mapa { display: block; margin: 0 auto; height: auto; max-width: none; }
.mesa { cursor: pointer; outline: none; touch-action: none; }
.mesa circle { fill: #fff; stroke: var(--livre); }
.mesa text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 700; fill: var(--escuro); text-anchor: middle; dominant-baseline: central; pointer-events: none; user-select: none; }
.mesa.vendida circle { fill: var(--vermelho); stroke: var(--vermelho-escuro); }
.mesa.vendida text { fill: #fff; }
.mesa .anel { display: none; fill: none; stroke: var(--ouro); pointer-events: none; }
.mesa.sel .anel, .mesa:focus-visible .anel { display: block; }

/* editor de croqui */
.barra.edicao { flex-wrap: wrap; }
.titulo-croqui { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tamanho { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .85rem; }
.tamanho input { width: 6rem; margin: 0; padding: 0; }
.botao.ativo { background: var(--ouro); color: var(--escuro); border-color: var(--ouro); }
.pagina-mapa .folha .acoes { margin-top: .5rem; }
.pagina-mapa .folha label { margin-bottom: .5rem; }

/* folha de confirmação */
.folha { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 0 .75rem max(.75rem, env(safe-area-inset-bottom)); pointer-events: none; }
.folha[hidden] { display: none; }
.folha-miolo { position: relative; max-width: 480px; margin: 0 auto; padding: 1rem; background: #fff; border-radius: 14px; box-shadow: 0 -2px 18px rgb(0 0 0 / .3); pointer-events: auto; }
.folha .aviso { margin: .5rem 0; }
.folha p { margin: 0 0 .75rem; color: var(--suave); }
.fechar { position: absolute; top: .4rem; right: .5rem; width: 2.4rem; height: 2.4rem; font-size: 1.6rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--suave); }

/* páginas de gestão */
.conteudo { max-width: 760px; margin: 0 auto; padding: 1rem .75rem 3rem; }
.conteudo .aviso { margin: 0 0 1rem; }
.painel { padding: 1rem; margin-bottom: 1rem; background: #fffdf6; border-radius: 12px; border-top: 3px solid var(--ouro); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.lista { margin: 0; padding: 0; list-style: none; }
.lista li { padding: .75rem 0; border-bottom: 1px solid var(--linha); }
.lista li:last-child { border-bottom: 0; }
.lista .inativo strong { color: var(--suave); text-decoration: line-through; }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; }
.linha.suave { margin: .15rem 0 .35rem; color: var(--suave); font-size: .9rem; }
.etiqueta { display: inline-block; padding: .05rem .5rem; font-size: .75rem; font-weight: 700; border-radius: 99px; background: #e5e7eb; }
.etiqueta.admin { background: var(--ouro-claro); }
.etiqueta.gestor { background: #bcd0ea; }
.lista .acoes { margin-top: .4rem; }
.acoes { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.acoes .link { color: var(--azul); }
.acoes form { margin: 0; }
details summary { cursor: pointer; font-weight: 700; }
details[open] summary { margin-bottom: 1rem; }

/* relatório */
.seletor { display: flex; gap: .5rem; align-items: center; }
.seletor select { margin: 0; flex: 1; min-width: 0; }
.direita { margin-left: auto; font-variant-numeric: tabular-nums; }
.suave { color: var(--suave); }
.etiqueta.vendeu { background: #fecaca; }
.etiqueta.liberou { background: #bbf7d0; }

.local { margin: 0; padding: .15rem .75rem .4rem; background: #fff; color: var(--suave); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* tela inicial: módulos */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.conteudo.largo { max-width: 920px; }
.boas-vindas { margin-bottom: 1rem; }
.boas-vindas h1 { margin: 0 0 .2rem; font-size: 1.6rem; color: var(--escuro); }
.boas-vindas p { margin: 0; color: var(--suave); }
.modulos { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 560px) { .modulos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .modulos { grid-template-columns: 1fr 1fr 1fr; } }
.modulo { display: flex; align-items: center; gap: .9rem; padding: 1rem; color: var(--texto); text-decoration: none; background: #fffdf6; border-radius: 12px; border-top: 3px solid var(--ouro); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.modulo:hover, .modulo:focus-visible { box-shadow: 0 3px 10px rgb(11 37 69 / .25); transform: translateY(-1px); }
.modulo-icone { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--escuro); color: var(--ouro-claro); }
.icone { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.modulo-texto { display: flex; flex-direction: column; min-width: 0; }
.modulo-texto b { font-family: var(--serifa); font-size: 1.05rem; color: var(--escuro); }
.modulo-texto small { color: var(--suave); font-size: .85rem; line-height: 1.3; }

/* grupos: caixas de permissão */
.modulo-perm { margin: 0 0 .75rem; padding: .5rem .75rem .25rem; border: 1px solid var(--linha); border-radius: 8px; }
.modulo-perm legend { padding: 0 .4rem; font-weight: 700; font-size: .85rem; color: var(--escuro); }
.caixa { display: flex; align-items: flex-start; gap: .6rem; margin: 0; padding: .55rem 0; font-weight: 400; font-size: .95rem; cursor: pointer; }
.caixa input { flex: none; width: 1.3rem; height: 1.3rem; margin: .1rem 0 0; accent-color: var(--escuro); }
.caixa.desativada { opacity: .5; cursor: not-allowed; }

/* confirmação em duas etapas (venda e liberação) */
textarea { resize: vertical; min-height: 4.5rem; }
.folha .confirma-texto { margin: 0 0 .75rem; color: var(--texto); font-weight: 600; }
.folha .contador { margin: -.25rem 0 .75rem; font-size: .8rem; text-align: right; }
.folha label textarea { margin-bottom: .25rem; }
.confirma-botoes { display: flex; gap: .6rem; }
.confirma-botoes .botao { flex: 1; padding: .9rem .5rem; font-size: 1rem; }
.confirma-botoes #confirma-sim { flex: 2; }
.botao.perigo { background: var(--vermelho); }
.etiqueta + .motivo, .motivo { color: var(--texto); font-size: .9rem; }

/* nomes do comprador e dos membros */
.folha-miolo { max-height: 88dvh; overflow-y: auto; }
.folha .ocupantes { white-space: pre-line; color: var(--texto); font-weight: 600; margin: -.25rem 0 .75rem; }
.membros { margin: 0 0 .75rem; }
.membros summary { padding: .4rem 0; font-size: .95rem; }
.membros[open] summary { margin-bottom: .25rem; }
.membros input { margin: .35rem 0; }

/* filtros do relatório de movimentações */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.filtro { padding: .45rem .9rem; border: 1px solid var(--linha); border-radius: 99px; background: #fff; color: var(--texto); text-decoration: none; font-size: .9rem; }
.filtro.ativo { background: var(--escuro); border-color: var(--escuro); color: #fff; font-weight: 600; }

/* filtros do relatório de movimentações */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.filtro { padding: .45rem .9rem; border: 1px solid var(--linha); border-radius: 99px; background: #fff; color: var(--texto); text-decoration: none; font-size: .9rem; }
.filtro.ativo { background: var(--escuro); border-color: var(--escuro); color: #fff; font-weight: 600; }
.linha.motivo { display: block; }