/* A folha de estilo do mesapronta — 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).
 */

:root {
  --tinta: #1c1f24;
  --tinta-fraca: #5b6472;
  --papel: #f6f7f9;
  --papel-alto: #ffffff;
  --borda: #d8dde5;
  --acento: #1c5d99;
  --acento-escuro: #14446f;
  --sucesso-fundo: #e3f5e8;
  --sucesso-borda: #7cc494;
  --erro: #a3242b;
  --erro-fundo: #fdeaea;
  --erro-borda: #e0a1a4;
  --inativo: #8a919c;
  /* 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: #b06a00;
  --pendente-fundo: #fdf3e3;
  --raio: 6px;
  --gap: 1rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, 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: logo (mesa para dois, vazado) + 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 vivem no próprio SVG
 * (verde-água e rosa), 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);
}

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

.marca-nome {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* 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: 2.25rem;
}

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

/* A versão no canto inferior direito, em toda página logada. Discreta (cor
 * fraca), fixa no canto e sem capturar clique — é referência, não elemento com
 * que se interage. O número vem do context processor, nunca escrito à mão. */
.versao-rodape {
  position: fixed;
  right: 0.75rem;
  bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--tinta-fraca);
  pointer-events: none;
}

.topo-faixa {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
}

.topo-casa {
  font-size: 1.05rem;
  font-weight: 600;
  margin-right: auto;
}

.topo-casa small {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--tinta-fraca);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.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:hover {
  background: var(--papel);
}

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

/* 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;
}

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,
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  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);
}

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;
}

.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.4rem;
  align-items: center;
}

.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;
}