/* Peças visuais comuns de /reservar/, /painel/ e /cozinha/.
   Cores, tipos e espaços vêm de /base.css. Este bloco é o único ponto de ligação com ele. */
:root {
  --f-fundo: var(--fundo);
  --f-superficie: var(--superficie);
  --f-texto: var(--texto);
  --f-suave: var(--texto-suave);
  --f-marca: var(--musgo);
  --f-marca-escura: var(--mata);
  --f-destaque: var(--arenito);
  --f-borda: var(--linha);
  --f-fonte: var(--sans);
  --f-fonte-titulo: var(--serif);
  --f-raio: var(--raio);
  --f-esp: var(--margem);

  --f-verde: var(--sucesso);
  --f-verde-fundo: var(--sucesso-fundo);
  --f-amarelo: var(--alerta);
  --f-amarelo-fundo: var(--alerta-fundo);
  --f-vermelho: var(--erro);
  --f-vermelho-fundo: var(--erro-fundo);
  --f-cinza: var(--dia-fechado-texto);
  --f-cinza-fundo: var(--dia-fechado);
  --f-whats: var(--sucesso);
}

[hidden] { display: none !important; }

body { line-height: 1.45; overflow-wrap: anywhere; }

h1, h2, h3 { margin: 0 0 8px; }
h1 { font-size: 1.7rem; line-height: 1.15; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
h1:focus, h2:focus { outline: none; }
p { margin: 0 0 12px; }

.cabecalho {
  background: var(--f-marca-escura);
  color: #fff;
  padding: 12px var(--f-esp);
}
.cabecalho a { color: #fff; text-decoration: none; }
.cabecalho .marca { display: inline-block; }
.cabecalho .marca img { height: 36px; width: auto; }
.cabecalho :focus-visible { outline-color: var(--ouro-claro); }

.pagina { max-width: 620px; margin: 0 auto; padding: var(--f-esp); }

.suave { color: var(--f-suave); }
.pequeno { font-size: .92rem; }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid var(--f-marca);
  border-radius: var(--f-raio);
  background: var(--f-superficie);
  color: var(--f-marca-escura);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  overflow-wrap: normal;
  cursor: pointer;
  touch-action: manipulation;
}
.botao:hover { background: var(--f-fundo); }
.botao.primario { background: var(--f-marca-escura); border-color: var(--f-marca-escura); color: var(--espuma); }
.botao.primario:hover { background: var(--f-marca); }
.botao.whats { background: var(--f-whats); border-color: var(--f-whats); color: var(--espuma); }
.botao.whats:hover { background: var(--f-marca-escura); }
.botao.perigo { background: var(--f-superficie); border-color: var(--f-vermelho); color: var(--f-vermelho); }
.botao.perigo:hover { background: var(--f-vermelho-fundo); }
.botao.perigo-cheio { background: var(--f-vermelho); border-color: var(--f-vermelho); color: var(--espuma); }
.botao.perigo-cheio:hover { background: var(--f-vermelho); }
.botao.largo { width: 100%; }
.botao.pequeno { min-height: 44px; padding: 8px 12px; }
.botao[disabled], .botao[aria-disabled="true"], .botao[disabled]:hover {
  opacity: 1;
  background: var(--f-cinza-fundo);
  border-color: var(--f-cinza-fundo);
  color: var(--f-cinza);
  cursor: not-allowed;
}
.botao-texto {
  background: none;
  border: 0;
  color: var(--f-marca-escura);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
  padding: 8px 4px;
}
.linha-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.linha-botoes > .botao { flex: 1 1 130px; }

.campo { margin-bottom: 16px; gap: 4px; }
.rotulo { display: block; font-weight: 600; margin-bottom: 4px; }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="date"], .campo input[type="time"],
.campo input[type="number"], .campo input[type="password"], .campo select, .campo textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  font-size: 17px;
  -webkit-appearance: none;
  appearance: none;
}
.campo textarea { min-height: 84px; }

.caixa-marcar {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--f-borda);
  border-radius: var(--f-raio);
  background: var(--f-superficie);
  cursor: pointer;
  margin-bottom: 16px;
}
.caixa-marcar input { width: 24px; height: 24px; margin: 1px 0 0; flex: none; accent-color: var(--f-marca); }

/* Campo de número com botões de menos e mais. */
.contador { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 8px; }
.contador button {
  min-height: 52px;
  border: 2px solid var(--f-marca);
  border-radius: var(--f-raio);
  background: var(--f-superficie);
  color: var(--f-marca-escura);
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.contador input { text-align: center; font-size: 1.3rem !important; font-weight: 700; min-height: 52px !important; }

.aviso { border-left-width: 5px; margin-bottom: 14px; }
.aviso.ok { border-color: var(--f-verde); background: var(--f-verde-fundo); }
.aviso.erro { border-color: var(--f-vermelho); background: var(--f-vermelho-fundo); }
.aviso.neutro { border-color: var(--f-cinza); background: var(--f-superficie); }
.aviso p:last-child { margin-bottom: 0; }

.cartao {
  background: var(--f-superficie);
  border: 1px solid var(--f-borda);
  border-radius: var(--f-raio);
  padding: 14px;
  margin-bottom: 12px;
}

.vazio { text-align: center; color: var(--f-suave); padding: 28px 12px; }

.carregando { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--f-suave); padding: 28px 12px; }
.carregando::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 3px solid var(--f-borda);
  border-top-color: var(--f-marca-escura);
  border-radius: 50%;
  animation: giro 1s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }

.selo {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  background: var(--f-cinza-fundo);
  color: var(--f-cinza);
  white-space: nowrap;
}
.selo.pendente { background: var(--f-amarelo-fundo); color: var(--f-amarelo); }
.selo.confirmada { background: var(--f-verde-fundo); color: var(--f-verde); }
.selo.reconfirmada { background: var(--f-verde); color: var(--espuma); }
.selo.chegou { background: var(--f-marca-escura); color: var(--espuma); }
.selo.faltou, .selo.recusada { background: var(--f-vermelho-fundo); color: var(--f-vermelho); }

.rodape-ajuda { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--f-borda); color: var(--f-suave); font-size: .95rem; }

dialog.folha {
  border: 0;
  padding: var(--f-esp);
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  border-radius: 14px;
  background: var(--f-superficie);
  color: var(--f-texto);
}
dialog.folha::backdrop { background: rgba(20, 30, 25, .55); }

@media (prefers-reduced-motion: reduce) {
  .carregando::before { animation-duration: 3s !important; animation-iteration-count: infinite !important; }
}