/* ---- tira de dias ---- */
.tira{
  display:flex;align-items:center;gap:.4rem;margin-bottom:1.25rem;
}
.tira-seta{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;
  border:1px solid var(--linha);background:var(--superficie);
  color:var(--tinta-suave);font-size:.85rem;
}
.tira-seta:hover{border-color:var(--verde);color:var(--tinta)}
.tira-seta.inativo{opacity:.3}

.tira-dias{
  flex:1;min-width:0;display:flex;gap:.4rem;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;scroll-padding:0 .4rem;padding:2px;
}
.tira-dias::-webkit-scrollbar{display:none}

.td-dia{
  flex:0 0 auto;width:56px;padding:.5rem 0 .45rem;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  border:1px solid var(--linha);border-radius:14px;
  background:var(--superficie);font:inherit;color:var(--tinta-suave);
  cursor:pointer;position:relative;
}
.td-nome{font-size:.65rem;text-transform:lowercase;letter-spacing:.02em}
.td-num{font-size:1.15rem;font-weight:700;color:var(--tinta);line-height:1.1}
.td-mes{font-size:.6rem;text-transform:lowercase}

.td-dia.ativo{background:var(--verde);border-color:var(--verde-escuro);color:#fff}
.td-dia.ativo .td-num{color:#fff}
.td-dia.esgotado{opacity:.45}
.td-dia.esgotado .td-num{font-weight:600}

/* Ponto verde quando esse dia ja tem horas escolhidas. */
.td-dia.tem::after{
  content:'';position:absolute;top:5px;right:6px;
  width:6px;height:6px;border-radius:50%;background:var(--verde-escuro);
}
.td-dia.ativo.tem::after{background:#fff}

/* ---- horas do dia ---- */
.grelha-horas{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
}
@media (min-width:520px){
  .grelha-horas{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:820px){
  .grelha-horas{grid-template-columns:repeat(6,1fr)}
}

.slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:.7rem .3rem;min-height:60px;border-radius:12px;
  border:1px solid var(--linha);background:var(--superficie);
  font:inherit;text-decoration:none;color:var(--tinta);
}
.s-hora{font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.s-info{font-size:.72rem;color:var(--tinta-suave)}

.slot.livre{background:var(--livre);border-color:#dcebcd;cursor:pointer}
.slot.livre .s-info{color:var(--verde-escuro);font-weight:600}
.slot.livre:hover{border-color:var(--verde)}
.slot.livre.escolhida{background:var(--verde);border-color:var(--verde-escuro);color:#fff}
.slot.livre.escolhida .s-info{color:#fff}

.slot.ocupado{background:#f6f7f5;color:var(--tinta-suave)}
.slot.ocupado .s-hora{font-weight:600}
.slot.passado{background:#eceeeb;border-color:#e0e3de;color:#9aa398}
.slot.passado .s-hora{font-weight:600}
.slot.passado .s-info{color:#9aa398}

.painel-dia[hidden]{display:none}

/* ---- pedido de horario fixo ---- */
.passo{margin-bottom:2rem}
.passo h2{font-size:1.05rem;margin:0 0 .2rem}
.passo .sub{margin-bottom:.85rem}

.escolha-dias{display:flex;gap:.4rem;flex-wrap:wrap}
.ed-dia{
  flex:1 1 60px;min-height:48px;display:grid;place-items:center;
  border:1px solid var(--linha);border-radius:12px;background:var(--superficie);
  text-decoration:none;color:var(--tinta-suave);font-size:.85rem;
  text-transform:lowercase;
}
.ed-dia:hover{border-color:var(--verde)}
.ed-dia.ativo{background:var(--verde);border-color:var(--verde-escuro);color:#fff;font-weight:600}

.slot.parcial{border-style:dashed}

/* Resposta do staff: dois botoes grandes, para responder na rua. */
.botoes-resposta{display:flex;flex-direction:column;gap:.6rem}
.botoes-resposta .botao-simples{
  text-align:center;min-height:52px;display:flex;
  align-items:center;justify-content:center;
}
.botoes-resposta .botao-principal{min-height:56px;font-size:1.05rem}

/* Os estilos da lista de pessoal vivem em pessoal.css — e backoffice,
   e o backoffice nao carrega esta folha. */

/* Nome de quem tem sessao, dentro da barra de pedido de festa. */
.em-nome-curto{display:flex;flex-direction:column;justify-content:center;line-height:1.25}
.em-nome-curto .etiqueta{font-size:.7rem;color:var(--tinta-suave)}
.em-nome-curto strong{font-size:.95rem}
.em-nome-curto[hidden]{display:none}

.bloco-outro{
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  flex:1 1 auto;min-width:0;
}
.troca-nome{
  display:inline-flex;align-items:center;gap:.45rem;margin:0;
  font-size:.82rem;color:var(--tinta-suave);cursor:pointer;white-space:nowrap;
}
/* Mais especifico do que a regra global "form input", que poe tudo
   em bloco e a 100% de largura — o que descentrava a caixa. */
.troca-nome input[type="checkbox"]{
  display:inline-block;width:20px;height:20px;min-width:20px;
  flex:0 0 auto;margin:0;padding:0;accent-color:var(--verde);
}
.campos-outro{display:flex;gap:.5rem;flex-wrap:wrap;flex:1 1 220px;min-width:0}
.campos-outro[hidden]{display:none}
.campos-outro input{margin:0;flex:1 1 130px;min-width:0}
.resumo-pedido{
  background:var(--livre);border:1px solid #dcebcd;border-radius:var(--raio);
  padding:.9rem 1.1rem;margin-bottom:1rem;
}
.resumo-pedido strong{display:block;font-size:1.1rem}
.resumo-pedido .sub{display:block;margin-top:.15rem}