/* A folha de estilo do mesagarantida — uma só, escrita à mão, sem framework.
 *
 * Por quê: a próxima superfície é a planta baixa num tablet touch, que precisa
 * de SVG, cor por estado e alvo de dedo. Um framework de CSS chegaria com opinião
 * sobre grade, cor e componente que teríamos de desfazer justamente lá. Aqui é
 * formulário e tabela — HTML puro faz bem, desde que espaçamento, alvo clicável e
 * contraste sejam decididos de propósito, que é o que este arquivo faz.
 *
 * As medidas de toque já valem aqui: nada clicável abaixo de 44px de altura, que
 * é o mínimo confortável para dedo (e não atrapalha nada no PC).
 */

html {
  /* T-056: sem zoom por duplo-toque e sem o atraso de ~300ms do toque no
   * tablet; o pinch continua valendo (acessibilidade). */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --tinta: #212529;
  --tinta-fraca: #5c636a;
  --papel: #f3f4f6;
  --papel-alto: #ffffff;
  --borda: #dee2e6;
  --acento: #7a2230;
  --acento-escuro: #5c1a24;
  --sucesso-fundo: #e3f5e8;
  --sucesso-borda: #7cc494;
  --erro: #a3242b;
  --erro-fundo: #fdeaea;
  --erro-borda: #e0a1a4;
  --inativo: #8a919c;
  /* Componentes RGB do `--acento` (#7a2230), para o hover da nav (T-043)
   * escrever `rgba(var(--acento-rgb), .22)` — o mesmo padrão do
   * `--bs-primary-rgb` do rackplan, que é de onde a medida ".22" veio. */
  --acento-rgb: 122, 34, 48;
  /* A ocupação pendente. Âmbar, e não o vermelho da recusa: pendente não é erro
   * do sistema nem negativa ao cliente — é uma marcação que falta, e quem tem de
   * agir é a recepção. Vermelho aqui ensinaria a ignorar o vermelho de verdade. */
  --pendente: #9a5b00;
  --pendente-fundo: #fdf3e3;
  --raio: 6px;
  --gap: 1rem;

  /* As cores da planta da operação (T-025) — seis estados, seis cores, e
   * NENHUMA delas é a única forma de saber o estado: o rótulo em texto vai
   * junto em toda mesa e na legenda (spec 1: "o texto mora no HTML, nunca só
   * na cor"). `--pendente` acima é reaproveitada de propósito — é a MESMA
   * pendência da agenda do dia, e duas cores para a mesma ideia confundiria. */
  --planta-livre: #2a8048;
  --planta-com-hora: #36749a;
  --planta-reservada-proxima: #6b4fa0;
  --planta-ocupada: #3a414b;
  /* Bloqueada (T-084): fundo claro com texto escuro e contorno tracejado
   * (`--planta-bloqueada-traco`), porque o cinza médio antigo ficava perto
   * demais do grafite da ocupada. O vermelho antigo da ocupada saiu: agora
   * é a cor da marca e do erro. Contrastes do texto sobre o fundo (WCAG):
   * livre 4,91:1, com hora 5,10:1, reservada próxima 6,46:1, ocupada 10,31:1,
   * bloqueada (--tinta) 13,01:1, pendente 5,43:1 — todos com texto branco,
   * menos a bloqueada. */
  --planta-bloqueada: #e9ecef;
  --planta-bloqueada-traco: #5b6472;

  /* Área e parede desenhadas na planta (T-047) — não são estado de mesa, são
   * o traço FIXO do salão (não muda com o relógio nem com ocupação), por isso
   * cores neutras e bem longe das seis acima: misturar as duas paletas faria
   * uma área parecer um sétimo estado de mesa. */
  --planta-area: #dfe7ef;
  --planta-parede: #3a3f47;

  /* O mapa de calor dos relatórios (T-035): escala SEQUENCIAL de uma cor só —
   * o bordô da marca (`#5C1A24`, ver `logo.svg`) clareando até o fundo —,
   * nunca um semáforo de cores diferentes por faixa (spec de relatórios, "O
   * mapa de calor é uma tabela HTML"). As cinco faixas SOBEM em saturação, não
   * descem: célula mais cheia é célula mais escura, célula vazia (0–20%) é
   * quase a cor do papel. O texto (escuro ou branco, ver abaixo de cada
   * variável) foi conferido pela fórmula de luminância relativa do WCAG —
   * nenhuma faixa fica abaixo de 4.5:1, o mínimo de AA para texto normal. */
  --mapa-calor-0-20: #f8ecee; /* texto --tinta: contraste 13,39:1 */
  --mapa-calor-20-40: #ebc4cb; /* texto --tinta: contraste 9,76:1 */
  --mapa-calor-40-60: #d18c98; /* texto --tinta: contraste 5,81:1 */
  --mapa-calor-60-80: #a8445a; /* texto BRANCO: contraste 5,77:1 */
  --mapa-calor-80-100: #5c1a24; /* texto BRANCO: contraste 12,90:1 */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
}

a {
  color: var(--acento);
}

/* --- cabeçalho e navegação ---------------------------------------------- */

.topo {
  background: var(--papel-alto);
  border-bottom: 1px solid var(--borda);
}

/* A marca do produto: símbolo (mesa vista de cima com o check, em bordô) + o
 * wordmark "Mesa Garantida". Fica à esquerda da faixa, antes do nome da casa —
 * produto e contexto do usuário são coisas distintas. As cores do símbolo vivem
 * no próprio SVG, então aqui só o tamanho e o alinhamento. */
.marca-produto {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--tinta);
}

/* O nome da casa, ao lado do wordmark (T-043) — mesmo lugar do "Cadastro de
 * energia" no cabeçalho do rackplan: texto secundário, mais fraco e menor que
 * a marca, para não competir com ela. Ao contrário do nome do usuário (no
 * menu, abaixo), este NÃO some em tela pequena — a tarefa só previu esconder
 * o nome do usuário abaixo de 600px. */
.topo-casa-nome {
  color: var(--tinta-fraca);
  font-weight: 400;
  font-size: 0.85rem;
  white-space: nowrap;
}

.marca-logo {
  display: block;
  height: 2.5rem;
  width: 2.5rem;
}

/* O wordmark: o mesmo desenho de `.mk-palavra` do INFRA (peso 800, caixa alta,
 * espaçamento largo; o `padding-left` compensa o espaço que o último caractere
 * deixa à direita), com "Garantida" na cor da marca. */
.marca-nome {
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  padding-left: 0.34em;
  line-height: 1;
  white-space: nowrap;
}

.marca-nome span {
  color: var(--acento);
}

/* A assinatura, no login, abaixo do wordmark. */
.marca-assinatura {
  color: var(--tinta-fraca);
  font-size: 0.9rem;
  margin: -0.75rem 0 1.25rem;
}

/* No login não há cabeçalho (não há casa no contexto), então a marca aparece no
 * corpo e um pouco maior — é o primeiro que quem chega vê. */
.marca-produto-login {
  margin-bottom: 1.25rem;
}

.marca-produto-login .marca-logo {
  height: 3rem;
  width: 3rem;
}

.marca-produto-login .marca-nome {
  font-size: 1.15rem;
}

/* Crédito da Vorgen (T-068): no fluxo, depois do <main>, nunca fixo — no tablet
 * fica abaixo da dobra e não rouba altura da planta. */
.rodape-credito {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 1.25rem 2rem;
  font-size: 0.8rem;
  color: var(--tinta-fraca);
  text-align: center;
}

.rodape-credito img {
  width: 120px;
  height: auto;
}


/* A versão no fim do rodapé, em toda página. Discreta (cor fraca e pequena) e
 * NO FLUXO: já foi fixa no canto, e no celular cobria botões e texto (T-089).
 * O número vem do context processor, nunca escrito à mão. */
.versao-rodape {
  display: block;
  margin: -1.25rem 0 0;
  padding: 0 1rem 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--tinta-fraca);
}

/* T-043: a faixa do cabeçalho virou DUAS linhas explícitas (marca+menu, depois
 * a nav) em vez de um único `flex-wrap` que empilhava em três quando a nav e
 * os botões de conta não cabiam juntos — o que o dono via como "troca senha e
 * sair na linha debaixo". Cada linha cuida do seu próprio espaçamento. */
.topo-faixa {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.topo-linha1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

.nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
}

/* Em tela estreita a barra rola na horizontal em vez de quebrar (T-106). */
@media (max-width: 40rem) {
  .nav {
    overflow-x: auto;
  }

  .nav > a,
  .menu-configurar {
    flex: none;
  }
}

/* "Configurar" (T-106): o cadastro, num `<details>` sem JavaScript — o mesmo padrão de
 * `.menu-usuario`. O `summary` imita um link da barra. */
.menu-configurar {
  position: relative;
  flex: none;
}

.menu-configurar summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border-radius: var(--raio);
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.menu-configurar summary::marker,
.menu-configurar summary::-webkit-details-marker {
  display: none;
}

.menu-configurar summary::after {
  content: "\25BE";
  margin-left: 0.35rem;
}

.menu-configurar summary[aria-current="page"] {
  background: var(--acento);
  color: #fff;
}

.menu-configurar summary:hover {
  background: rgba(var(--acento-rgb), 0.22);
  color: var(--tinta);
}

.menu-configurar-cartao {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 14rem;
  padding: 0.5rem;
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.menu-configurar-cartao a {
  white-space: nowrap;
}

/* Dentro da barra que rola, um cartão `absolute` seria cortado: em tela estreita ele sai do
 * fluxo com `fixed` (sem `top`, fica logo abaixo do `summary`). */
@media (max-width: 40rem) {
  .menu-configurar-cartao {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: auto;
  }
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border-radius: var(--raio);
  text-decoration: none;
  color: var(--tinta);
}

.nav a[aria-current="page"] {
  background: var(--acento);
  color: #fff;
}

/*
  T-043 — hover dos itens da navegação, copiado do rackplan
  (`templates/base.html`, comentário "T-101 — hover dos itens da navegação"):
  "o mesmo quadrado de quando selecionado, mais claro" (spec do dono). Três
  decisões, na mesma ordem de lá:

  - `:not([aria-current="page"])` — o item ativo já é o quadrado sólido; um
    hover por cima dele seria um segundo estado para a mesma coisa;
  - o texto mantém a cor normal (`--tinta`), nunca branco: o hover lê como
    PRÉVIA do selecionado, não como um segundo item ativo;
  - `@media (hover: hover)` — em tela de toque não existe "passar o mouse":
    sem a guarda, o navegador do celular deixaria o último item TOCADO pintado
    até o próximo toque, parecendo um segundo item ativo.

  `.22` de opacidade e `6px` de raio são os mesmos valores medidos no rackplan
  (T-101 de lá, 2026-08-17): o `--raio` deste projeto já é `6px`, então só o
  fundo precisou ser calculado (`--acento-rgb` acima).
*/
@media (hover: hover) {
  .nav a:not([aria-current="page"]):hover {
    background: rgba(var(--acento-rgb), 0.22);
    border-radius: var(--raio);
    color: var(--tinta);
  }
}

/* --- o menu do usuário (T-043) ---------------------------------------------
 *
 * `<details>` nativo, sem JavaScript — o navegador já abre/fecha pelo clique
 * no `<summary>` e cuida do teclado (Enter/Espaço) e do "clique fora" não é
 * garantido nativamente, e a tarefa dispensou esse polimento explicitamente.
 */

.menu-usuario {
  position: relative;
  flex: none;
}

.menu-usuario summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--papel-alto);
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

/* Firefox/Chrome desenham o marcador padrão (triângulo) de dois jeitos
 * diferentes — `list-style: none` sozinho não basta no Chrome, que usa um
 * pseudo-elemento `::-webkit-details-marker` à parte. */
.menu-usuario summary::marker,
.menu-usuario summary::-webkit-details-marker {
  display: none;
}

.menu-usuario summary:hover {
  background: var(--papel);
}

.menu-usuario-icone {
  flex: none;
}

/* O nome do usuário some abaixo de 600px, ficando só o ícone — mesmo recurso
 * do `d-none d-sm-inline` do rackplan, para a linha 1 continuar cabendo numa
 * linha só no celular (spec da tarefa, item 4). */
@media (max-width: 37.4rem) {
  .menu-usuario-nome {
    display: none;
  }
}

.menu-usuario-cartao {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 1;
  min-width: 14rem;
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.menu-usuario-cabecalho {
  margin: 0 0 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--borda);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinta-fraca);
  white-space: nowrap;
}

/* "Trocar senha" (link) e "Sair" (botão do form) precisam ler como a MESMA
 * família de item de menu, embora um seja `<a>` e o outro `<button>` — por
 * isso os dois levam esta classe, e nenhum usa `.botao`/`button` genérico
 * (que os pintaria como botão de ação cheio, fora de lugar num menu). */
.menu-usuario-item {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.35rem 0;
  border: none;
  background: none;
  color: var(--tinta);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-usuario-item:hover {
  color: var(--acento);
}

.menu-usuario-divisor {
  margin: 0.25rem 0;
  border: none;
  border-top: 1px solid var(--borda);
}

.menu-usuario form {
  margin: 0;
}

/* Segundo nível de navegação (as quatro telas da agenda). Existe para as quatro
 * não subirem para o menu principal: lá elas empurrariam "Ambientes" e "Mesas"
 * para o canto e esconderiam que respondem todas à mesma pergunta. */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--borda);
}

.subnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border-radius: var(--raio);
  text-decoration: none;
  color: var(--tinta);
}

.subnav a:hover {
  background: var(--papel-alto);
}

.subnav a[aria-current="page"] {
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  font-weight: 600;
}

/* --- conteúdo ------------------------------------------------------------ */

.conteudo {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

/* T-117: só o editor da planta sai do limite de largura. */
.conteudo--larga {
  max-width: none;
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
}

h2 {
  font-size: 1.15rem;
  margin: 2rem 0 0.5rem;
}

.legenda {
  color: var(--tinta-fraca);
  margin: 0 0 1.5rem;
}

.cartao {
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

/* Explicação de decisão de produto (por que não se apaga um ambiente, por
 * exemplo). Fica visível de propósito: esconder o motivo faz a ausência do
 * botão parecer esquecimento. */
.nota {
  border-left: 3px solid var(--borda);
  padding: 0.25rem 0 0.25rem 0.9rem;
  color: var(--tinta-fraca);
  margin: 0 0 1.25rem;
}

/* --- mensagens ----------------------------------------------------------- */

.avisos {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.avisos li {
  border: 1px solid var(--sucesso-borda);
  background: var(--sucesso-fundo);
  border-radius: var(--raio);
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
}

.avisos li.error,
.avisos li.warning {
  border-color: var(--erro-borda);
  background: var(--erro-fundo);
}

/* "nada mudou, e não é erro" — retomar um dia que já estava normal, a segunda
 * aba. Verde diria que algo foi feito; vermelho, que algo quebrou. */
.avisos li.info {
  border-color: var(--borda);
  background: var(--papel-alto);
}

/* --- formulários --------------------------------------------------------- */

form p {
  margin: 0 0 1rem;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

input[type="text"],
input[type="number"],
input[type="password"],
/* `time` e `date` dão ao operador o relógio e o calendário do sistema dele — um
 * seletor de hora escrito à mão seria peça nova para resolver o que o navegador
 * já resolve, e pior no toque. */
input[type="time"],
input[type="date"],
select {
  width: 100%;
  max-width: 22rem;
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  font: inherit;
  color: inherit;
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  vertical-align: -0.15rem;
}

.helptext {
  display: block;
  max-width: 32rem;
  font-size: 0.85rem;
  color: var(--tinta-fraca);
}

.errorlist {
  list-style: none;
  margin: 0 0 0.4rem;
  padding: 0;
  color: var(--erro);
  font-size: 0.9rem;
}

button,
input[type="submit"],
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: 0 1.1rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--acento);
  border: 1px solid var(--acento-escuro);
  border-radius: var(--raio);
  text-decoration: none;
  cursor: pointer;
}

button:hover,
.botao:hover {
  background: var(--acento-escuro);
}

/* T-056: no toque não existe hover, então o :active é o único retorno de que o
 * dedo acertou. Afunda e escurece; vale para botão, link-botão e mesa. */
button:active,
input[type="submit"]:active,
.botao:active {
  background: var(--acento-escuro);
  transform: translateY(1px) scale(0.98);
  filter: brightness(0.9);
}

button.discreto,
.botao.discreto {
  color: var(--tinta);
  background: var(--papel-alto);
  border-color: var(--borda);
  font-weight: 400;
}

button.discreto:hover,
.botao.discreto:hover {
  background: var(--papel);
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Campos que só valem para uma das opções do formulário (o horário da exceção de
 * data, que o banco só aceita no modo "janela própria"). O `fieldset` diz no
 * rótulo a que modo serve, em vez de a tela pedir o que será recusado. */
fieldset.condicional {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0.75rem 1rem 0.25rem;
  margin: 0 0 1rem;
}

fieldset.condicional legend {
  padding: 0 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
}

fieldset.condicional .legenda {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
}

/* --- o desfecho de um lançamento de reserva -------------------------------
 *
 * Os quatro desfechos do motor têm peso diferente e por isso cor diferente: a
 * oferta é convite (acento), a recusa é negativa (vermelho), o encaminhamento é
 * "outro caminho", NÃO recusa — e pintá-lo de vermelho ensinaria a recepção a
 * ler "não deu" onde a resposta é "esse caso é atendido de outro jeito".
 *
 * Nenhum deles gravou nada, e é isso que a caixa precisa deixar visível antes de
 * qualquer outra coisa: o texto "Nada foi reservado" mora no HTML, não na cor —
 * cor sozinha não é informação para quem não a distingue.
 */

.desfecho {
  border: 1px solid var(--borda);
  border-left-width: 4px;
  border-radius: var(--raio);
  background: var(--papel-alto);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.desfecho h2 {
  margin-top: 0;
}

.desfecho.recusa,
.desfecho.disputa {
  border-left-color: var(--erro);
  background: var(--erro-fundo);
}

.desfecho.oferta {
  border-left-color: var(--acento);
}

.desfecho.encaminhamento {
  border-left-color: var(--acento);
  background: var(--papel);
}

/* --- o relatório do bloqueio (T-020) --------------------------------------
 *
 * Reusa a caixa `.desfecho` porque é a mesma coisa: a resposta do sistema ao que
 * acabou de ser enviado, acima do formulário. As duas cores novas dizem o que a
 * frase já diz, e nunca sozinhas:
 *
 * - `parcial` — âmbar, o mesmo da pendência: parte entrou, parte ficou de fora, e
 *   quem precisa agir é o operador. NÃO é vermelho — bloquear um ambiente numa
 *   noite com reservas marcadas é o caso normal, e o resultado parcial é o
 *   correto, não uma falha.
 * - `completo` — acento, sem fundo: entrou tudo que havia para entrar.
 *
 * O caso em que NADA entrou continua usando `.recusa` (vermelho), como no
 * lançamento de reserva.
 */

.desfecho.parcial {
  border-left-color: var(--pendente);
  background: var(--pendente-fundo);
}

.desfecho.completo {
  border-left-color: var(--acento);
}

.desfecho ul {
  margin: 0.25rem 0 0.75rem;
  padding-left: 1.2rem;
}

/* A garantia da spec cumprida ("nada disso foi tocado"). Fica visível junto da
 * lista do que ficou de fora: é ela que responde a pergunta que o operador faria
 * em seguida — "então o bloqueio comeu a reserva das 20h?". */
.desfecho .garantia {
  border-left: 3px solid var(--borda);
  padding: 0.25rem 0 0.25rem 0.9rem;
  color: var(--tinta-fraca);
}

/* A tabela que separa "bloquear mesas" de "suspender o dia". É a única tabela do
 * projeto que carrega FRASE em vez de dado, e por isso é a única que quebra
 * linha: com `nowrap` ela ficaria mais larga que a página e a coluna da direita —
 * a suspensão, justamente a metade que se confunde com a outra — sairia do campo
 * de visão atrás da rolagem. */
.comparacao th,
.comparacao td {
  white-space: normal;
  vertical-align: top;
  max-width: 20rem;
}

/* Uma opção da oferta. É um FORMULÁRIO, não um link: aceitar passa pelo motor de
 * novo (ver o comentário no template). */
.alternativa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--papel-alto);
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.5rem;
}

/* --- tabelas -------------------------------------------------------------
 *
 * Tabela é onde uma tela sem framework vira parede de texto. O que a impede:
 * cabeçalho destacado, linhas alternadas, números alinhados e um `overflow-x`
 * no invólucro para a página nunca rolar de lado no tablet.
 */

.tabela-rolavel {
  overflow-x: auto;
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

table {
  width: 100%;
  border-collapse: collapse;
}

caption {
  text-align: left;
  padding: 0.75rem 0.9rem;
  font-weight: 600;
  color: var(--tinta-fraca);
  border-bottom: 1px solid var(--borda);
}

th,
td {
  padding: 0.6rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}

thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tinta-fraca);
}

tbody tr:nth-child(even) {
  background: var(--papel);
}

tbody tr:last-child td {
  border-bottom: none;
}

td.numero,
th.numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.marca-inativo {
  display: inline-block;
  padding: 0 0.5rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--inativo);
}

/* "cruza a meia-noite". NÃO é marca de erro — é confirmação de que o sistema
 * entendeu a janela que fecha depois das 00h. Por isso lê como aviso calmo e não
 * como vermelho de recusa: o dono precisa ficar tranquilo, não alarmado. */
.marca-atencao {
  display: inline-block;
  padding: 0 0.5rem;
  border: 1px solid var(--acento);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--acento);
  white-space: nowrap;
}

.vazio {
  color: var(--tinta-fraca);
  font-style: italic;
}

/* --- a agenda do dia -----------------------------------------------------
 *
 * A ocupação PENDENTE (período vencido, ocupação ainda viva) é o que esta tela
 * existe para não deixar passar: é o sinal de que alguém esqueceu de marcar, e
 * esquecer é o maior risco do produto. Por isso ela ganha cor, borda à esquerda
 * e uma chamada no topo da página — mas o texto "pendente" e a frase que diz QUAL
 * pendência é moram no HTML, nunca só na cor: cor sozinha não é informação para
 * quem não a distingue, e num salão a tela é lida de relance.
 */

.linha-pendente {
  background: var(--pendente-fundo);
  box-shadow: inset 4px 0 0 var(--pendente);
}

/* A listra alternada das tabelas ganharia da regra acima em metade das linhas —
 * e uma pendência que aparece em algumas linhas e não em outras é pior que
 * nenhuma. */
tbody tr.linha-pendente:nth-child(even) {
  background: var(--pendente-fundo);
}

/* Ocupação morta (concluída, cancelada, não-compareceu) continua na lista: "por
 * que a reserva das 20h sumiu?" é a pergunta que a tela responde. Fica apagada
 * para não competir com o que ainda precisa de ação. */
.linha-morta {
  color: var(--tinta-fraca);
}

.marca-pendente {
  display: inline-block;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--pendente);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* T-080: a reserva que o cliente fez sozinho, no celular. Contorno e texto no acento da marca
 * (10:1 sobre branco), para não parecer estado de mesa nem pendência. */
.selo-online {
  display: inline-block;
  padding: 0 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--acento);
  color: var(--acento);
  background: var(--papel-alto);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.desfecho.pendencia {
  border-left-color: var(--pendente);
  background: var(--pendente-fundo);
}

.desfecho.pendencia ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

/* A tabela do dia quebra linha, ao contrário das outras. As demais são curtas e
 * o `nowrap` as deixa legíveis; esta carrega nome, telefone, motivo e o porquê da
 * pendência, e com `nowrap` ela fica larga o bastante para empurrar a ÚLTIMA
 * coluna — a das ações — para fora da tela, atrás da rolagem horizontal. O botão
 * de que a noite inteira depende não pode depender de alguém descobrir que a
 * tabela rola. */
.tabela-do-dia td {
  white-space: normal;
  vertical-align: top;
}

/* O horário é a exceção: "23h30 às 01h de 25/07" partido no meio vira duas
 * frases que não são a mesma coisa. */
.tabela-do-dia td.sem-quebra {
  white-space: nowrap;
}

/* Segunda linha da célula (o ambiente da mesa, o telefone, o tempo real, o
 * porquê da pendência): é contexto, e o `small` a separa sem custar mais uma
 * coluna. */
td small {
  display: block;
  font-size: 0.8rem;
  color: var(--tinta-fraca);
  white-space: normal;
  max-width: 16rem;
}

/* Os botões da noite, cada um num formulário próprio (POST, porque gravam).
 *
 * O `flex` mora numa DIV dentro da célula, e não na célula: `display: flex` num
 * `<td>` tira dele o `display: table-cell` — a célula sai do layout da tabela e
 * o fundo da linha (o âmbar da pendência, a listra alternada) para de alcançá-la.
 * Foi o que apareceu ao abrir a tela: metade da última coluna sem a cor da linha.
 */
.acoes-da-linha .botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* T-056: ação destrutiva (Desistiu, Não veio, Cancelar, Não compareceu) fica
 * separada das positivas e à direita da linha de ações. */
.acoes-da-linha .botoes > .acao-destrutiva {
  margin-left: auto;
}

.acoes-da-linha .botoes > .acao-destrutiva ~ .acao-destrutiva {
  margin-left: 0;
}

.acao-destrutiva.discreto,
.acao-destrutiva .discreto {
  color: var(--erro);
  border-color: var(--erro-borda);
}

.acoes-da-linha form {
  margin: 0;
}

/* Botão de linha: mais estreito que o de formulário (cabem dois lado a lado numa
 * coluna de tabela), e ainda com os 44px de altura que o dedo precisa. */
.acoes-da-linha button,
.acoes-da-linha .botao {
  padding: 0 0.7rem;
}

.seletor-de-dia p:last-of-type {
  margin-bottom: 0.75rem;
}

/* O botão que APAGA um compromisso (cancelar, registrar falta). Vermelho só na
 * página de confirmação — na lista, essas duas ações são links discretos, para o
 * dedo não encontrá-las no caminho de "Chegou" e "Saiu". */
button.destrutivo {
  background: var(--erro);
  border-color: var(--erro);
}

button.destrutivo:hover {
  background: #7d1b21;
}

.confirmacao-linha {
  font-size: 1.05rem;
}

/* --- o editor de layout da planta baixa (T-022) ---------------------------
 *
 * A primeira tela que precisa de SVG e da primeira ilha de JavaScript do
 * projeto (`static/js/planta.js`). O CSS aqui só cuida de aparência — quem
 * desenha os retângulos e os "chips" é o JavaScript, depois que a página
 * carrega; por isso `.planta-mesa` e `.planta-chip` não existem no HTML
 * servido, só no que o JS cria.
 */

/* T-058: a barra fica fixa no rodapé da janela enquanto a planta está à vista. */
.planta-barra {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.75rem 0;
  background: var(--papel);
  border-top: 1px solid var(--borda);
}

.planta-zoom {
  display: inline-flex;
  gap: 0.25rem;
}

/* Com zoom, o fundo do mapa arrasta a vista. */
.planta-svg--ampliado .planta-grade {
  cursor: move;
}

.planta-atalhos {
  margin-left: auto;
  color: var(--tinta-fraca);
  font-size: 0.85rem;
}

.planta-status {
  color: var(--tinta-fraca);
}

.planta-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: flex-start;
}

/* T-117: só no editor o desenho ocupa a largura toda e a lateral (mesas fora,
 * painéis) vai para baixo. A planta da operação (`/salao/`) não muda. */
.planta-layout--editor {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

.planta-layout--editor .planta-canvas-moldura,
.planta-layout--editor .planta-lateral {
  flex: none;
}

.planta-canvas-moldura {
  flex: 1 1 26rem;
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  /* `background-image` em grade fina é o guia visual do encaixe — a mesma
   * grade de 20 unidades que `planta.js` usa para arredondar a posição
   * arrastada, para o olho ver o mesmo encaixe que o servidor grava. */
  background-image:
    linear-gradient(to right, var(--papel) 1px, transparent 1px),
    linear-gradient(to bottom, var(--papel) 1px, transparent 1px);
  background-size: 20px 20px;
}

.planta-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Alvo de MOUSE, não de dedo — esta tela é PC (spec 1, "Duas superfícies"). A
 * planta da operação em tablet, quando existir, é que segue a regra de alvo de
 * dedo e ausência de hover. */
.planta-mesa {
  cursor: grab;
}

.planta-mesa:active {
  cursor: grabbing;
}

.planta-mesa rect,
.planta-mesa ellipse {
  /* No editor o JS põe `--cor-ambiente` na mesa; sem ele (ambiente sem cor), o acento. */
  fill: var(--cor-ambiente, var(--acento));
  stroke: var(--acento-escuro);
  stroke-width: 2;
}

.planta-mesa-codigo {
  fill: #fff;
  font-weight: 700;
  font-size: 15px;
}

.planta-mesa-capacidade {
  fill: #fff;
  font-size: 11px;
}

.planta-operacao .planta-mesa-codigo {
  font-size: 18px;
}

.planta-operacao .planta-mesa-capacidade {
  font-size: 13px;
}

/* T-057: a hora dentro da mesa (só na operação). 13 unidades x ~1,1 de escala
 * do tablet de 820px = ~14px na tela. */
.planta-mesa-hora {
  fill: #fff;
  font-size: 13px;
  font-weight: 600;
}

/* Fundo do ambiente na operação: a cor dele bem clara (o fill-opacity vem no SVG) e o nome
 * discreto num canto. Sem evento: o toque é da mesa. */
.planta-ambiente-fundo {
  pointer-events: none;
}

.planta-ambiente-nome {
  font-size: 22px;
  font-weight: 700;
  opacity: 0.7;
}

/* Alvo de toque invisível em volta da mesa (ver `_geometria_da_mesa`). */
.planta-mesa rect.planta-mesa-alvo {
  fill: transparent;
  stroke: none;
}

/* A operação usa a largura toda e empilha: a planta em cima (cabendo na altura visível, sem
 * rolar) e a lista "sem posição" recolhida embaixo. */
.planta-operacao .planta-layout {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

.planta-operacao .planta-canvas-moldura {
  flex: none;
}

.planta-operacao details.planta-fora summary {
  cursor: pointer;
  font-weight: 600;
}

.planta-operacao .planta-svg {
  max-height: calc(100dvh - 14rem);
}

/* A planta de UM ambiente cabe na altura visível SEM rolar a página (spec 1, T-138): a página vira
 * uma coluna de altura exata (100dvh) — topo, cabeçalho e legenda ficam com o tamanho deles e o SVG
 * ocupa o que sobra (`meet` centra e mantém a proporção). Só nas telas com a classe
 * `planta-operacao--encaixada`; a visão geral em cartões continua rolando. */
body:has(.planta-operacao--encaixada) {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

body:has(.planta-operacao--encaixada) > .conteudo {
  flex: 1;
  min-height: 0;
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.planta-operacao--encaixada {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.planta-operacao--encaixada > p,
.planta-operacao--encaixada > h1,
.planta-operacao--encaixada > .planta-legenda {
  margin-top: 0;
  margin-bottom: 0.25rem;
}

.planta-operacao--encaixada .planta-legenda {
  gap: 0.25rem 1rem;
}

.planta-operacao--encaixada .planta-layout {
  flex: 1;
  min-height: 0;
}

.planta-operacao--encaixada .planta-canvas-moldura {
  flex: 1;
  min-height: 0;
}

.planta-operacao--encaixada .planta-svg {
  height: 100%;
  max-height: none;
}

/* O viewBox já é só o ambiente + margem: sem a grade do editor estendendo-se em branco. */
.planta-operacao--encaixada .planta-canvas-moldura {
  background-image: none;
}

/* "Atualizado às" e o "agora" dividem a linha; o crédito e a versão encolhem para sobrar altura. */
.planta-operacao--encaixada .planta-atualizado,
.planta-operacao--encaixada .planta-agora {
  display: inline-block;
  margin: 0 1rem 0.25rem 0;
}

body:has(.planta-operacao--encaixada) > .rodape-credito {
  flex-direction: row;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.25rem 1rem;
}

body:has(.planta-operacao--encaixada) > .rodape-credito img {
  width: 70px;
}

body:has(.planta-operacao--encaixada) > .versao-rodape {
  margin: 0;
  padding: 0 1rem 0.25rem;
}

/* Mesa inativa continua na planta (ela existe fisicamente), mas não é ofertada
 * pelo motor — o mesmo cinza de `.marca-inativo` na listagem de mesas. */
.planta-mesa-inativa rect,
.planta-mesa-inativa ellipse {
  fill: var(--papel);
  stroke: var(--inativo);
  stroke-dasharray: 4 3;
}

.planta-mesa-inativa .planta-mesa-codigo,
.planta-mesa-inativa .planta-mesa-capacidade {
  fill: var(--inativo);
}

.planta-lateral {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.planta-fora {
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1rem;
}

/* T-058: o editor desenha a grade DENTRO do SVG (`<pattern>`), que escala junto com
 * a planta; a grade em CSS da moldura é só da planta da operação. */
.planta-canvas-moldura--editor {
  background-image: none;
  /* Fora do mapa (zoom abaixo de 100%): o fundo de fora; o mapa é `.planta-mapa-fundo`. */
  background-color: var(--papel);
}

.planta-mapa-fundo {
  fill: var(--papel-alto);
  stroke: var(--inativo);
  stroke-width: 2;
  pointer-events: none;
}

.planta-grade-linha {
  fill: none;
  stroke: var(--borda);
  stroke-width: 1;
}

.planta-grade {
  pointer-events: all;
}

/* Retângulo do ambiente no editor: o fundo não recebe o mouse (a vista e as mesas por cima
 * continuam arrastáveis); só a borda e o nome movem o ambiente. */
.planta-ambiente-corpo {
  pointer-events: none;
}

.planta-ambiente-borda {
  fill: none;
  stroke-width: 8;
  pointer-events: stroke;
  cursor: grab;
}

.planta-ambiente-rotulo {
  font-size: 22px;
  font-weight: 700;
  cursor: grab;
  user-select: none;
}

/* A amostra de cor do ambiente, nos formulários e na lista. */
.amostra-de-cor {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 3px;
  vertical-align: -0.15em;
  border: 1px solid var(--borda);
}

.planta-fora h2 {
  margin-top: 0;
}

.planta-fora-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* O "chip" de uma mesa sem posição. Arrastável (`draggable`, em `planta.js`) e
 * com o alvo mínimo de 44px por consistência com o resto da folha, embora esta
 * tela seja de mouse — não custa nada aqui e evita uma exceção só para ela. */
.planta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  cursor: grab;
  font-size: 0.9rem;
}

.planta-chip-inativa {
  color: var(--inativo);
  border-style: dashed;
}

/* --- áreas e paredes (T-047) ------------------------------------------------
 *
 * `.planta-area`/`.planta-parede` vão no `<g>` (editor e operação); o
 * `<rect>` do corpo leva a classe própria `.planta-elemento-corpo` para não
 * herdar a cor por engano na alça de redimensionar (que também é um `<rect>`
 * dentro do mesmo `<g>`, só que no editor).
 */

.planta-area .planta-elemento-corpo {
  fill: var(--planta-area);
  stroke: var(--acento);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.planta-parede .planta-elemento-corpo {
  fill: var(--planta-parede);
  stroke: var(--planta-parede);
}

.planta-area-rotulo {
  fill: var(--tinta);
  font-size: 12px;
  font-weight: 600;
}

/* Só existem no editor (`static/js/planta.js`) — a planta da operação não
 * arrasta nem redimensiona nada. */
.planta-area,
.planta-parede {
  cursor: grab;
}

.planta-area:active,
.planta-parede:active {
  cursor: grabbing;
}

/* T-058: mesa selecionada e mesas sobrepostas (alerta, não bloqueia o salvar). */
.planta-mesa--selecionada rect,
.planta-mesa--selecionada ellipse {
  stroke: var(--tinta);
  stroke-width: 4;
}

.planta-mesa--selecionada {
  filter: drop-shadow(0 0 4px var(--acento));
}

.planta-mesa--sobreposta rect,
.planta-mesa--sobreposta ellipse {
  stroke: #c0392b;
  stroke-width: 3;
  stroke-dasharray: 6 3;
}

.planta-alerta {
  color: #c0392b;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.planta-mesa-dados {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.75rem;
}

.planta-mesa-dados dt {
  color: var(--tinta-fraca);
}

.planta-mesa-dados dd {
  margin: 0;
}

.planta-elemento--selecionado .planta-elemento-corpo {
  stroke: var(--acento);
  stroke-width: 3;
  stroke-dasharray: none;
}

.planta-alca {
  fill: var(--acento);
  cursor: nwse-resize;
}

/* O painel de edição do elemento selecionado (`#planta-elemento` no editor) —
 * mesmo cartão visual de `.planta-fora`, para não inventar um terceiro
 * estilo de caixa nesta tela. */
.planta-elemento-painel {
  max-width: 18rem;
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1rem;
  margin-top: 1rem;
}

.planta-elemento-painel h2 {
  margin-top: 0;
}

.planta-elemento-painel label {
  display: block;
  margin-top: 0.5rem;
}

.planta-elemento-painel input,
.planta-elemento-painel select {
  width: 100%;
  min-height: 44px;
}

.planta-elemento-painel button {
  margin-top: 1rem;
}

/* --- a planta baixa da OPERAÇÃO — tablet touch (T-025) ---------------------
 *
 * Zero JavaScript aqui: cada mesa é um <a> dentro do SVG, e o navegador já o
 * torna focável e tocável sem nada além de CSS. O que muda do editor (acima)
 * é a regra do topo do arquivo: ALVO DE DEDO, e por isso SEM `:hover` com
 * função — em tela de toque ele não existe, e uma interface que dependesse
 * dele ficaria com função invisível.
 */

.planta-mesa-toque {
  cursor: pointer;
}

.planta-mesa-toque:hover .planta-mesa rect,
.planta-mesa-toque:hover .planta-mesa ellipse,
.planta-mesa-toque:focus-visible .planta-mesa rect,
.planta-mesa-toque:focus-visible .planta-mesa ellipse {
  stroke-width: 3;
}

/* T-032: mesa que não serve para o grupo da fila (`?fila=<id>`) — sem `href`
 * no template, o navegador já não a torna focável nem clicável; isto só
 * ajusta a leitura visual para não parecer uma mesa tocável igual às outras
 * (spec 2, "mesa menor que o grupo não é ofertada"). */
.planta-mesa-toque-desabilitada {
  cursor: default;
}

.planta-mesa-toque-desabilitada .planta-mesa rect,
.planta-mesa-toque-desabilitada .planta-mesa ellipse {
  opacity: 0.4;
}

.planta-chip-desabilitada {
  opacity: 0.4;
  pointer-events: none;
}

/* Cor por estado — sempre calculada no SERVIDOR (salao/views.py:
 * _estado_e_ocupacao_relevante), nunca gravada. As seis classes servem TRÊS
 * lugares com a mesma cor: o retângulo na planta, o "chip" de fora da planta
 * e o quadradinho da legenda — por isso elas não têm `rect`/`background`
 * fixo aqui, e sim nas regras específicas de cada lugar, abaixo. */
.planta-mesa--livre rect,
.planta-mesa--livre ellipse {
  fill: var(--planta-livre);
  stroke: var(--planta-livre);
}

.planta-mesa--com-hora rect,
.planta-mesa--com-hora ellipse {
  fill: var(--planta-com-hora);
  stroke: var(--planta-com-hora);
}

.planta-mesa--reservada-proxima rect,
.planta-mesa--reservada-proxima ellipse {
  fill: var(--planta-reservada-proxima);
  stroke: var(--planta-reservada-proxima);
}

.planta-mesa--ocupada rect,
.planta-mesa--ocupada ellipse {
  fill: var(--planta-ocupada);
  stroke: var(--planta-ocupada);
}

.planta-mesa--bloqueada rect,
.planta-mesa--bloqueada ellipse {
  fill: var(--planta-bloqueada);
  stroke: var(--planta-bloqueada-traco);
  stroke-dasharray: 5 3;
}

.planta-mesa--bloqueada .planta-mesa-codigo,
.planta-mesa--bloqueada .planta-mesa-capacidade,
.planta-mesa--bloqueada .planta-mesa-hora {
  fill: var(--tinta);
}

.planta-mesa--pendente rect,
.planta-mesa--pendente ellipse {
  fill: var(--pendente);
  stroke: var(--pendente);
}

.planta-chip--livre {
  border-color: var(--planta-livre);
  color: var(--planta-livre);
}

.planta-chip--com-hora {
  border-color: var(--planta-com-hora);
  color: var(--planta-com-hora);
}

.planta-chip--reservada-proxima {
  border-color: var(--planta-reservada-proxima);
  color: var(--planta-reservada-proxima);
}

.planta-chip--ocupada {
  border-color: var(--planta-ocupada);
  color: var(--planta-ocupada);
}

.planta-chip--bloqueada {
  border-color: var(--planta-bloqueada-traco);
  border-style: dashed;
  color: var(--tinta);
  background: var(--planta-bloqueada);
}

.planta-chip--pendente {
  border-color: var(--pendente);
  color: var(--pendente-fundo);
  background: var(--pendente);
}

/* O quadradinho da legenda (T-046) — o terceiro lugar prometido pelo
 * comentário acima das regras `.planta-mesa--*`. Mesmas variáveis das regras
 * `rect` correspondentes, para as duas nunca divergirem de novo (ver
 * `LegendaDaCorNaPlantaTest` em `salao/tests.py`). */
.planta-legenda-cor.planta-mesa--livre {
  background: var(--planta-livre);
}

.planta-legenda-cor.planta-mesa--com-hora {
  background: var(--planta-com-hora);
}

.planta-legenda-cor.planta-mesa--reservada-proxima {
  background: var(--planta-reservada-proxima);
}

.planta-legenda-cor.planta-mesa--ocupada {
  background: var(--planta-ocupada);
}

.planta-legenda-cor.planta-mesa--bloqueada {
  background: var(--planta-bloqueada);
  border: 1px dashed var(--planta-bloqueada-traco);
}

.planta-legenda-cor.planta-mesa--pendente {
  background: var(--pendente);
}

/* A marca "porta" (T-037) por cima da cor de estado — nunca no lugar dela: a
 * mesa `so_porta` continua livre/ocupada/etc. como qualquer outra, o motor é
 * que nunca a oferece sozinha. Fundo e texto fixos (não seguem a cor do
 * estado) para ler igual em qualquer uma das seis cores por trás. */
/* O seletor leva `.planta-mesa rect` de propósito: sem isso a regra da cor do
 * estado (`.planta-mesa--bloqueada rect`, de fundo claro desde a T-084) pinta
 * o fundo do selo e o "porta" branco some. */
.planta-mesa rect.planta-mesa-porta-fundo {
  fill: #1f1f1f;
  fill-opacity: 0.72;
  stroke: none;
  stroke-dasharray: none;
}

.planta-mesa-porta-marca {
  fill: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.planta-chip-porta {
  border-style: dashed;
}

.planta-legenda-porta {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  background: #1f1f1f;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.planta-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.planta-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.planta-legenda-cor {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.planta-ultima-acao {
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.planta-desfazer {
  display: block;
  margin: 0;
}

.planta-ultima-acao p {
  margin: 0 0 0.5rem;
}

.planta-ultima-acao > :last-child {
  margin-bottom: 0;
}

.planta-hora {
  color: var(--tinta-fraca);
  font-size: 0.85rem;
}

/* O seletor numérico de pessoas: SÓ botões, nunca teclado (spec 1, "A
 * quantidade de pessoas não é campo opcional... num seletor numérico"). Alvo
 * de dedo — 56px de lado, acima do mínimo de 48px que a tarefa pede, porque é
 * o botão que mais se toca depressa numa noite cheia. */
.planta-seletor-botoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.75rem;
}

.planta-seletor-botoes button {
  width: 100%;
  height: 72px;
  font-size: 1.6rem;
}

/* T-064: as combinações de "juntar mesas" — botões grandes, um por combinação. */
.planta-juntar-opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.planta-juntar-opcoes button,
.planta-juntar-opcoes .botao {
  width: 100%;
  min-height: 72px;
  font-size: 1.4rem;
}

/* O seletor de pessoas leva a página das combinações quando o número é um link. */
.planta-seletor-botoes a.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  font-size: 1.6rem;
  text-decoration: none;
}

/* T-064: a ligação entre mesas juntas na planta, na cor de ocupada. */
.planta-juncao {
  stroke: var(--planta-ocupada);
  stroke-width: 14;
  stroke-linecap: round;
  pointer-events: none;
}

/* T-060: a ação principal do estado (Chegou / Saiu) é o primeiro botão da mesa
 * e grande; as secundárias (Ficam mais) ficam abaixo, no tom discreto. */
.planta-operacao .acoes--principal {
  flex-direction: column;
  align-items: stretch;
}

.planta-operacao .acoes--principal button {
  width: 100%;
  min-height: 72px;
  font-size: 1.4rem;
}

.planta-operacao .acoes--principal button.discreto {
  min-height: 56px;
  font-size: 1rem;
}

/* O segundo grupo do seletor ("mais que N", T-042, revisão de 15/09/2026):
 * `<details>` nativo — recolhido por padrão, sem JavaScript nenhum — com o
 * `<summary>` num tom mais fraco para não competir com o destaque de cima. */
.planta-seletor-mais {
  margin-top: 0.75rem;
}

.planta-seletor-mais summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--tinta-fraca);
}

.planta-seletor-mais .planta-seletor-botoes {
  margin-top: 0.5rem;
}

/* Alvo de dedo, não de mouse (spec 1) — 48px é o mínimo desta tarefa, acima
 * do mínimo geral de 44px do resto da folha (pensado para mouse e dedo
 * ocasional). Escopado a `.planta-operacao`, as duas telas desta tarefa, para
 * não inflar botão nenhum da gestão (PC) por engano. */
.planta-operacao .planta-chip {
  min-height: 48px;
}

.planta-chip:active,
.planta-mesa:active {
  filter: brightness(0.85);
}

/* O "agora" no cabeçalho da planta touch (T-035) — a MESMA função
 * (`salao.relatorios.agora`) que a tela de relatórios mostra na última seção.
 * Discreto (mesmo tom de `.legenda`), porque a cor da planta é o que precisa
 * saltar aos olhos primeiro; este número é contexto, não ação. */
.planta-atualizado {
  color: var(--tinta-fraca);
  font-size: 0.85rem;
  margin: -0.5rem 0 0.5rem;
}

.planta-agora {
  color: var(--tinta-fraca);
  margin: 0 0 1rem;
}

/* --- os relatórios de ocupação (T-035) -------------------------------------
 *
 * O mapa de calor é uma TABELA comum (spec: "sem biblioteca, sem JS, sem
 * canvas"), dentro do mesmo `.tabela-rolavel` das outras tabelas do projeto —
 * ele é a única que pode passar de 48 colunas numa casa que abre o dia
 * inteiro, e é exatamente aí que a rolagem horizontal existe para servir.
 */

.mapa-calor th[scope="col"] {
  text-align: center;
}

/* Centralizado, e não alinhado à direita como `.numero` no resto do projeto:
 * numa tabela comum o número é dado para comparar entre linhas; aqui a
 * CÉLULA inteira é a unidade de leitura (a cor por trás do número), e um bloco
 * de números alinhados à direita quebraria esse efeito de grade. */
.mapa-calor-celula {
  text-align: center;
  min-width: 3.5rem;
  font-weight: 600;
  color: var(--tinta);
}

.mapa-calor-celula.mapa-calor--0-20 {
  background: var(--mapa-calor-0-20);
}

.mapa-calor-celula.mapa-calor--20-40 {
  background: var(--mapa-calor-20-40);
}

.mapa-calor-celula.mapa-calor--40-60 {
  background: var(--mapa-calor-40-60);
}

.mapa-calor-celula.mapa-calor--60-80 {
  background: var(--mapa-calor-60-80);
}

.mapa-calor-celula.mapa-calor--80-100 {
  background: var(--mapa-calor-80-100);
  color: #fff;
}

/* A listra alternada de `tbody tr:nth-child(even)` (regra geral de tabela)
 * ganharia de qualquer faixa sem isto — uma célula "0–20%" ficaria com o fundo
 * cinza da listra em vez do rosa quase branco da própria faixa, e a
 * linha par pareceria "mais cheia" só por ser par. O mapa de calor não tem
 * listra: a cor de CADA célula já é a informação. */
.mapa-calor tbody tr:nth-child(even) {
  background: transparent;
}

.mapa-calor-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 1.5rem;
  font-size: 0.9rem;
  color: var(--tinta-fraca);
}

.mapa-calor-legenda li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.mapa-calor-cor {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--borda);
}

.mapa-calor-cor.mapa-calor--0-20 {
  background: var(--mapa-calor-0-20);
}

.mapa-calor-cor.mapa-calor--20-40 {
  background: var(--mapa-calor-20-40);
}

.mapa-calor-cor.mapa-calor--40-60 {
  background: var(--mapa-calor-40-60);
}

.mapa-calor-cor.mapa-calor--60-80 {
  background: var(--mapa-calor-60-80);
}

.mapa-calor-cor.mapa-calor--80-100 {
  background: var(--mapa-calor-80-100);
}

/* "Fechado": SEM cor nenhuma (a mesma regra da célula fechada na tabela — vazio
 * é "a casa não abria", nunca "0%"), só o contorno para o quadrado aparecer na
 * legenda em cima do fundo branco do cartão. */
.mapa-calor-cor.mapa-calor--fechado {
  background: var(--papel-alto);
}

/* --- a fila pública e a gestão da fila (T-031) -----------------------------
 *
 * `.fila-publica` é o corpo das três telas SEM login (`templates/fila/entrar.html`,
 * `acompanhar.html`, `sair_confirmar.html`): coluna estreita, fonte maior que a
 * do resto do site — "alvo de dedo, fonte grande" (spec 2) — porque quem lê
 * está de pé, na porta, com o celular numa mão só.
 */

.fila-publica {
  max-width: 26rem;
  margin: 0 auto;
  font-size: 1.1rem;
}

/* O `h1` global só tem 0.25rem de margem inferior (pensada para o resto do
 * site, onde uma legenda vem logo abaixo) — nesta tela ele encosta direto no
 * `.cartao` do status, sem respiro (revisão de 15/09/2026, T-042). */
.fila-publica h1 {
  margin-bottom: 1rem;
}

.fila-publica .cartao {
  text-align: center;
}

.fila-publica .botao,
.fila-publica button {
  width: 100%;
  min-height: 52px;
  font-size: 1.05rem;
}

/* T-049: o botão nasce desabilitado enquanto `static/js/fila-entrar.js` não confirma a
 * posição — sem contraste nenhum ele pareceria só mais devagar, e a pessoa tocaria de
 * novo achando que não funcionou. */
.fila-publica button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* O status da localização ("Confirmando…", "Localização confirmada.") fica acima do
 * formulário, discreto — não é erro nem sucesso do PRODUTO, é só o que o navegador está
 * fazendo. */
#fila-localizacao-status {
  margin-bottom: 1rem;
}

/* O número/estado que a pessoa procura primeiro ao abrir a página — "Você é
 * o 3º", "Sua mesa está pronta!". Precisa ser a maior coisa na tela: é a
 * ÚNICA informação que muda sozinha, a cada 30s (spec 2, "a página que se
 * atualiza sozinha"). */
.fila-posicao {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

/* "Sua mesa está pronta": o alerta que a spec chama de promessa do produto —
 * cor de destaque, não de erro (`--acento`, a mesma do botão primário, nunca
 * `--erro`: nada deu errado, é o contrário). */
.fila-chamada {
  border-color: var(--acento);
  background: #eaf2f9;
}

/* O seletor de pessoas do formulário público: RADIO estilizado como botão
 * (`fila/forms.py:EntrarNaFilaForm.pessoas`, `RadioSelect`) — não é
 * `<select>` nem campo livre, é o mesmo "botões 1 a 8" da planta touch
 * (`.planta-seletor-botoes`), só que os oito precisam conviver num único
 * `<form>` com nome e telefone, o que ali (um `<form>` por botão) não
 * permitiria. O `input` real fica ESCONDIDO mas ainda focável/clicável — é
 * ele quem recebe o clique; o rótulo em volta é só a pintura. */
.selecao-pessoas {
  border: 0;
  padding: 0;
  margin: 0 0 1.25rem;
}

.selecao-pessoas legend {
  font-weight: 600;
  margin-bottom: 0.5rem;
  padding: 0;
}

.selecao-pessoas-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.selecao-pessoas-opcao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 52px;
  font-size: 1.2rem;
  font-weight: 600;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--papel-alto);
  cursor: pointer;
}

/* O radio fica por cima do rótulo inteiro (não só do círculo padrão), então o
 * alvo de toque é o QUADRADO todo — não o ponto minúsculo que um radio nativo
 * desenharia. */
.selecao-pessoas-opcao input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.selecao-pessoas-opcao:has(input:checked) {
  background: var(--acento);
  color: #fff;
  border-color: var(--acento-escuro);
}

.selecao-pessoas-opcao:has(input:focus-visible) {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* --- o cartaz do QR (T-031, T-102) ------------------------------------------
 *
 * O parcial `_cartaz_qr.html` (fila e reserva). Tudo nele é medido em `cqw` (1% da largura do
 * cartaz), então a prévia na tela e a folha A4 têm a MESMA composição, só em escala. A folha é
 * 194 x 280 mm dentro de uma margem de 8 mm (`@page`), para nunca vazar para uma segunda página.
 */

.cartaz-pagina {
  max-width: 34rem;
  margin: 0 auto;
}

.cartaz {
  aspect-ratio: 194 / 280;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  /* % e não `cqw`: `cqw` no padding do próprio contêiner vira % da janela (T-103). */
  padding: 7% 8% 5%;
  background: var(--papel-alto);
  color: var(--tinta);
  text-align: center;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 0.5rem 1.5rem rgba(33, 37, 41, 0.12);
  overflow: hidden;
}

.cartaz-miolo {
  container-type: inline-size;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 0;
}

.cartaz-casa {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 16cqw;
}

.cartaz-logo {
  display: block;
  max-height: 16cqw;
  max-width: 60cqw;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cartaz-nome {
  margin: 0;
  font-size: 5.5cqw;
  font-weight: 800;
  line-height: 1.1;
  text-wrap: balance;
}

.cartaz-chamada {
  margin: 5cqw 0 0;
  font-size: 10cqw;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--acento);
  text-wrap: balance;
}

.cartaz-qr {
  flex: none;
  width: 68cqw;
  margin: 6cqw 0 0;
  padding: 2.5cqw;
  background: #fff;
  border: 1.2cqw solid var(--acento);
  border-radius: 4cqw;
}

.cartaz-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.cartaz-passos {
  flex: none;
  display: flex;
  gap: 3cqw;
  width: 100%;
  margin: 7cqw 0 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.cartaz-passos li {
  flex: 1;
  counter-increment: passo;
  font-size: 3.3cqw;
  line-height: 1.3;
  text-wrap: balance;
}

.cartaz-passos li::before {
  content: counter(passo);
  display: block;
  width: 6cqw;
  height: 6cqw;
  margin: 0 auto 1.2cqw;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-size: 3.6cqw;
  font-weight: 800;
  line-height: 6cqw;
}

.cartaz-endereco {
  flex: none;
  margin: 7cqw 0 0;
  font-size: 3.6cqw;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cartaz-rodape {
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  margin-top: auto;
  padding-top: 3cqw;
  color: var(--tinta-fraca);
}

.cartaz-rodape img {
  width: 5cqw;
  height: 5cqw;
}

.cartaz-rodape .marca-nome {
  font-size: 2cqw;
}

@page {
  size: A4;
  margin: 8mm;
}

@media print {
  /* Sai SÓ o cartaz — cabeçalho, avisos, botões, crédito e versão não servem a quem vai
   * colar isto na porta. */
  .topo,
  .versao-rodape,
  .rodape-credito,
  .avisos,
  .fila-qr-no-imprimir {
    display: none;
  }

  body {
    background: #fff;
  }

  .conteudo {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .cartaz-pagina {
    max-width: none;
  }

  .cartaz {
    width: 194mm;
    height: 280mm;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* T-056: abaixo de 900px cada linha de `.tabela-do-dia` vira um cartão
 * empilhado (fila e agenda do dia), em grade, sem rótulo de campo (T-061). */
@media (max-width: 900px) {
  /* Só o invólucro da tabela que VIRA cartão larga a rolagem; as demais (o mapa de
   * calor, por exemplo) continuam rolando dentro dele e não alargam a página (T-089). */
  .tabela-rolavel:has(.tabela-do-dia) {
    background: transparent;
    border: 0;
    overflow-x: visible;
  }

  .tabela-do-dia,
  .tabela-do-dia tbody,
  .tabela-do-dia tr,
  .tabela-do-dia td {
    display: block;
    width: 100%;
  }

  .tabela-do-dia thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .tabela-do-dia tr {
    margin-bottom: 0.75rem;
    background: var(--papel-alto);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
  }

  /* T-061: cada cartão tem no máximo TRÊS faixas -- principal, secundária
   * (pequena) e ações --, montadas em grade. Sem rótulo de campo visível. */
  .tabela-do-dia td {
    display: block;
    white-space: normal;
    padding: 0.25rem 0.5rem;
    border: 0;
  }

  .tabela-do-dia td small {
    max-width: none;
    display: inline;
  }

  .tabela-fila tr,
  .tabela-agenda tr {
    display: grid;
    align-items: center;
    padding: 0.25rem 0.25rem 0;
  }

  .tabela-fila td,
  .tabela-agenda td {
    width: auto;
    min-width: 0;
  }

  .tabela-fila tr {
    grid-template-columns: 4.75rem auto 1fr auto;
  }

  .tabela-fila .c-pos { grid-area: 1 / 1; font-weight: 700; font-size: 1.1rem; }
  .tabela-fila .c-nome { grid-area: 1 / 2 / 2 / 4; font-weight: 700; font-size: 1.1rem; }
  .tabela-fila .c-pessoas { grid-area: 1 / 4; text-align: right; }
  .tabela-fila .c-espera { grid-area: 2 / 1 / 3 / 2; font-size: 0.85rem; color: var(--tinta-fraca); }
  .tabela-fila .c-estado { grid-area: 2 / 2; font-size: 0.85rem; }
  .tabela-fila .c-aviso { grid-area: 2 / 3 / 3 / 5; font-size: 0.85rem; }
  .tabela-fila .acoes-da-linha { grid-area: 3 / 1 / 4 / 5; }

  .tabela-agenda tr {
    grid-template-columns: auto auto 1fr;
  }

  .tabela-agenda .c-quando { grid-area: 1 / 1; font-weight: 700; font-size: 1.1rem; }
  .tabela-agenda .c-quem { grid-area: 1 / 2 / 2 / 4; font-weight: 700; }
  .tabela-agenda .c-mesa { grid-area: 2 / 1; font-size: 0.85rem; color: var(--tinta-fraca); }
  .tabela-agenda .c-tipo { grid-area: 2 / 2; font-size: 0.85rem; color: var(--tinta-fraca); }
  .tabela-agenda .c-situacao { grid-area: 2 / 3; font-size: 0.85rem; }
  .tabela-agenda .acoes-da-linha { grid-area: 3 / 1 / 4 / 4; }

  .tabela-do-dia .c-pessoas .num {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
  }

  .tabela-do-dia .c-pessoas .un {
    font-size: 0.8rem;
    color: var(--tinta-fraca);
  }

  .tabela-agenda .c-quem small {
    font-weight: 400;
    color: var(--tinta-fraca);
    margin-left: 0.4rem;
  }

  .selo {
    display: inline-block;
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
    background: var(--papel);
    border: 1px solid var(--borda);
  }

  .selo-chamada {
    background: #fff3cd;
    border-color: #e0b94a;
    color: #5c4300;
  }

  .selo-esperando {
    background: #e3eefb;
    border-color: #9db9e0;
    color: #1d3a63;
  }

  .tabela-do-dia td.sem-conteudo {
    display: none;
  }

  .tabela-do-dia td small {
    max-width: none;
  }

  .tabela-do-dia td.acoes-da-linha {
    display: block;
    border-bottom: 0;
    background: var(--papel);
  }

  .tabela-do-dia td.acoes-da-linha .botoes {
    justify-content: flex-start;
  }

  .tabela-do-dia td.acoes-da-linha > .botoes > * {
    text-align: initial;
  }
}

/* T-082: o link e o QR da reserva em /casa/. */
.casa-link-reserva input[type="text"] {
  max-width: 32rem;
  margin-right: 0.5rem;
}

.casa-qr-reserva svg {
  display: block;
  width: 12rem;
  max-width: 100%;
  height: auto;
}

/* T-075: a observação do cliente na agenda do dia e no painel da mesa — o lápis
 * (decorativo) mais o texto; o "Observação:" é só para leitor de tela. */
.observacao {
  display: block;
  color: var(--tinta);
  font-style: italic;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.busca-de-reserva {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.busca-de-reserva input[type="search"] {
  flex: 1 1 14rem;
  min-height: 44px;
}

.lista-de-busca {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.lista-de-busca li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--borda);
}

.lista-de-busca small {
  display: block;
  color: var(--tinta-fraca);
}

.so-impressao {
  display: none;
}

/* T-075: a agenda do dia no papel. Some tudo que é navegação, formulário e botão; sobra o
 * cabeçalho "Casa — dia" e a tabela, sem a coluna de ações. */
@media print {
  .topo,
  .subnav,
  .rodape-credito,
  .versao-rodape,
  .nao-imprimir,
  .avisos,
  .conteudo > h1 {
    display: none !important;
  }

  .so-impressao {
    display: block;
  }

  .cabecalho-impressao {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
  }

  body {
    background: #fff;
    color: #000;
  }

  .tabela-agenda {
    font-size: 11pt;
  }
}

/* --- a reserva pública pelo celular (T-080) ----------------------------------
 *
 * Uma coluna, em celular de 360 px: nada de grade em duas colunas, nada de rolagem lateral. Campos
 * com 16 px (abaixo disso o iOS dá zoom ao focar), alvos de toque de 48 a 52 px. As cores são as
 * da marca (`--acento`) e os neutros do resto do site; sem fonte nova.
 */

.reserva-publica {
  max-width: 26rem;
  margin: 0 auto;
}

.reserva-casa {
  margin-bottom: 1.25rem;
}

.reserva-casa h1 {
  margin-bottom: 0.25rem;
}

.reserva-casa p {
  margin: 0;
  color: var(--tinta-fraca);
}

.reserva-telefone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.reserva-publica h2 {
  margin: 1.5rem 0 0.5rem;
}

.reserva-publica h3 {
  font-size: 1rem;
  margin: 1rem 0 0.5rem;
}

.reserva-publica input[type="text"],
.reserva-publica input[type="tel"] {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 48px;
  font-size: 1rem;
}

.reserva-publica .acao-principal {
  width: 100%;
  min-height: 52px;
  font-size: 1.05rem;
}

.reserva-publica .acoes {
  align-items: stretch;
}

.reserva-publica .acoes > .acao-principal,
.reserva-publica .acoes > form {
  flex: 1 1 100%;
}

.reserva-publica .acoes > form > .acao-principal {
  width: 100%;
}

.reserva-grande {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}

.reserva-assinatura {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 2rem 0 0;
  font-size: 0.8rem;
  color: var(--tinta-fraca);
}

.reserva-resumo {
  margin: 0 0 0.75rem;
}

.reserva-resumo div {
  display: flex;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--borda);
}

.reserva-resumo dt {
  flex: 0 0 5.5rem;
  color: var(--tinta-fraca);
}

.reserva-resumo dd {
  margin: 0;
  font-weight: 600;
}

.reserva-pronto h2 {
  margin-top: 0;
}

.reserva-pronto-acoes {
  margin-bottom: 1rem;
}

.reserva-aceite label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 400;
}

.reserva-aceite input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0.1rem 0 0;
}

.reserva-reenvio {
  margin: 0 0 0.5rem;
}

/* O campo do código é a única coisa da tela: grande, centrado, dígitos de largura igual. */
.reserva-publica .campo-codigo {
  min-height: 60px;
  text-align: center;
  font-size: 1.75rem;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  font-variant-numeric: tabular-nums;
}

/* O calendário: tabela de 7 colunas iguais; cada dia é um botão de 48 px de altura. Dia
 * indisponível fica riscado e sem borda, com o motivo em `aria-label`/`title`. */
.calendario-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.calendario-seta {
  min-width: 48px;
  padding: 0;
}

.calendario-seta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.calendario {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 2px;
}

.calendario th {
  padding: 0.25rem 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  color: var(--tinta-fraca);
}

.calendario abbr {
  text-decoration: none;
}

.calendario td {
  padding: 0;
}

.calendario .dia {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0;
  font-weight: 600;
  color: var(--tinta);
  background: var(--papel-alto);
  border: 1px solid var(--borda);
}

.calendario button.dia:not(:disabled):hover {
  color: #fff;
}

.calendario .dia-hoje {
  border-color: var(--acento);
  box-shadow: inset 0 -3px 0 var(--acento);
}

.calendario .dia-indisponivel {
  font-weight: 400;
  color: var(--tinta-fraca);
  background: transparent;
  border-color: transparent;
  text-decoration: line-through;
  cursor: default;
}

.calendario .dia-indisponivel:hover {
  background: transparent;
}

.reserva-publica button:focus-visible,
.reserva-publica .botao:focus-visible,
.reserva-publica input:focus-visible,
.reserva-publica a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* Os horários: grade de 3 por linha, botão de 52 px. */
.horarios-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

/* T-095: o painel da plataforma reaproveita a gestão inteira; só duas peças são dele. A senha
 * provisória digitada na própria linha do usuário, e a mensagem do contato (texto livre de quem
 * escreveu), que quebra linha em vez de esticar a tabela. */
.senha-inline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.senha-inline input[type="password"] {
  width: 10rem;
}

.tabela-rolavel + .acoes,
.tabela-rolavel + .nota {
  margin-top: 1.25rem;
}

.mensagem-do-lead {
  white-space: normal;
  min-width: 14rem;
  max-width: 28rem;
}

.horario-botao {
  min-height: 52px;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.botao.discreto.horario-botao:hover,
.botao.discreto.horario-botao:active,
.calendario button.dia:not(:disabled):active {
  color: #fff;
  background: var(--acento);
}

/* T-101: o logo da casa nas páginas do cliente e na prévia de /casa/. Sem Pillow não há
   redimensionamento: a altura é contida aqui e a largura segue a proporção (sem distorcer). */
.casa-logo {
  display: block;
  max-height: 5rem;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.casa-logo-titulo {
  margin: 0 0 0.25rem;
  line-height: 1;
}

.casa-logo-bloco {
  margin: 0 0 1rem;
}

/* --- o painel da operação (T-112) -------------------------------------------
 *
 * Cartões `<dl>` em grade fluida: cada um é um rótulo (`dt`) e um número (`dd`). O estado vive
 * sempre em TEXTO no `dt`; a borda âmbar só reforça a pendência (`--pendente`), nunca a carrega.
 */

.painel-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--gap);
  margin-bottom: 1.5rem;
}

.painel-cartao {
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0.75rem 1rem;
  margin: 0;
}

.painel-cartao dt {
  color: var(--tinta-fraca);
  font-size: 0.85rem;
}

.painel-cartao dd {
  margin: 0.25rem 0 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.painel-cartao meter {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
}

.painel-alerta {
  border-color: var(--pendente);
  background: var(--pendente-fundo);
}

/* T-120: a visao geral dos ambientes no tablet. O cartao inteiro e um link; a miniatura e
 * so para olhar (as mesas dentro dela nao sao alvo de toque). */
.ambientes-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ambiente-cartao {
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.ambiente-cartao-link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  min-height: 3rem;
  color: inherit;
  text-decoration: none;
}

.ambiente-cartao-nome {
  font-weight: 700;
  font-size: 1.15rem;
}

.ambiente-cartao-svg {
  pointer-events: none;
}

/* T-124: Configurar > Mesas, um bloco recolhivel por ambiente. */
.ambiente-recolhivel {
  margin-bottom: 1rem;
}

.ambiente-recolhivel > summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.5rem 0;
}

/* Faixa fixa da pré-visualização do editor: avisa que nada do que se vê é gravado. */
.planta-previa-faixa {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 0 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-weight: 600;
}

/* Tipos de mesa: o desenho (mesa + cadeiras). As marcas não recebem toque nem arraste. */
.tipo-desenho {
  width: 96px;
  height: 72px;
  display: block;
}

.tipo-desenho-grande .tipo-desenho {
  width: 220px;
  height: 160px;
  margin-bottom: 1rem;
}

.tipo-desenho-mesa {
  fill: var(--papel-alto);
  stroke: var(--tinta-fraca);
  stroke-width: 2;
}

.cadeira {
  fill: var(--tinta-fraca);
  pointer-events: none;
}

.cadeira--extra {
  fill: none;
  stroke: var(--tinta-fraca);
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
}

.form-em-linha {
  display: inline;
  margin: 0;
}

/* Cadeiras em volta da mesa na planta (editor e tablet ampliado). O seletor leva
 * `.planta-mesa rect` de propósito, como o do selo "porta": sem ele a cor de estado
 * (`.planta-mesa--livre rect`) pintaria a cadeira. Cor neutra (a tinta do tema) que serve
 * a qualquer `--acento`; nunca recebem evento — o alvo de toque e de arraste é a mesa. */
.planta-mesa rect.cadeira {
  fill: var(--tinta-fraca);
  stroke: none;
  pointer-events: none;
}

.planta-mesa rect.cadeira--extra {
  fill: none;
  stroke: var(--tinta-fraca);
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
}

/* T-139: item de referência (cozinha, banheiro...): cinza neutro, só desenho, sem toque. */
.planta-referencia .planta-elemento-corpo {
  fill: #c9ced4;
  stroke: #8a919c;
  stroke-width: 2;
}

.planta-referencia-nome {
  fill: var(--tinta);
  font-size: 18px;
  font-weight: 600;
  pointer-events: none;
}

.planta-referencia {
  cursor: grab;
}

.planta-operacao .planta-referencia {
  cursor: default;
  pointer-events: none;
}

.planta-legenda-referencias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  color: var(--tinta-fraca);
  font-size: 0.9rem;
}

.planta-legenda-referencia-marca {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  background: #c9ced4;
  border: 1px solid #8a919c;
  vertical-align: -0.1em;
}

/* T-140: os botões "Distribuir N mesas sem posição" do editor. */
.planta-distribuir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
}

.planta-distribuir form {
  margin: 0;
}

/* T-141: a escolha de dono da parte em comum, na própria página. */
.planta-sobreposicao-linha {
  margin-bottom: 0.75rem;
}

.planta-sobreposicao-linha button {
  margin-right: 0.5rem;
}

.planta-sobreposicao-linha button.escolhido {
  outline: 3px solid var(--acento);
}