/*
 * Tela 3 · Data e horário — cópia fiel do bloco "Tela 3 · Dias e horários" de
 * /mockup/agendador-cardapio-web.html.
 *
 * Duas diferenças, ambas por causa da troca de JavaScript por navegação real:
 * o dia e o horário livre são links (as regras a.dia / a.horario devolvem a
 * aparência que os <button> tinham), e o esqueleto de carregamento do mockup
 * não existe aqui — a página já chega com a agenda consultada.
 */

.barra-ferramentas{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.chip-pessoa{display:inline-flex;align-items:center;gap:10px;background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-full);padding:6px 16px 6px 6px;box-shadow:var(--sombra-sm)}
.chip-pessoa .avatar{width:32px;height:32px;font-size:12px;box-shadow:none}
.chip-pessoa b{font-size:13.5px;font-weight:700}
.chip-pessoa small{display:block;font-size:11px;color:var(--tinta-fraca);font-weight:500;line-height:1.2}

.controles{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.etiqueta{
  display:inline-flex;align-items:center;gap:8px;background:var(--papel);border:1px solid var(--linha);
  border-radius:var(--r-full);padding:8px 16px;font-size:13px;font-weight:500;color:var(--tinta-media);box-shadow:var(--sombra-sm);
}
.etiqueta svg{color:var(--lilas);flex:none}
.etiqueta b{font-weight:700;color:var(--tinta)}

/* dias */
.faixa-dias{position:relative;margin-bottom:20px}
.dias{display:flex;gap:9px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.dias::-webkit-scrollbar{height:6px}
.dias::-webkit-scrollbar-thumb{background:var(--linha-forte);border-radius:99px}
.dia{
  flex:none;scroll-snap-align:start;min-width:78px;padding:12px 8px;border-radius:var(--r-md);
  background:var(--papel);border:2px solid var(--linha);text-align:center;transition:var(--transicao);box-shadow:var(--sombra-sm);
}
/* Os dias esticam até a altura do cartão de hoje (que tem o selo "hoje"), e um
   <button> centraliza o próprio conteúdo nessa sobra. O <a> reproduz isso
   centralizando um único filho em bloco — dentro dele o fluxo continua sendo o
   mesmo do mockup, inclusive a linha do selo "hoje". */
a.dia{display:flex;flex-direction:column;justify-content:center;text-decoration:none;color:inherit}
.dia-conteudo{display:block;width:100%}
.dia:hover{border-color:var(--lilas);transform:translateY(-2px)}
.dia[aria-pressed="true"],.dia[aria-current="true"]{background:var(--roxo);border-color:var(--roxo);color:#fff;box-shadow:0 6px 18px rgba(89,50,122,.28)}
.dia .sem{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-fraca)}
.dia .num{display:block;font-size:21px;font-weight:800;letter-spacing:-.6px;margin:2px 0 1px}
.dia .mes{display:block;font-size:11px;font-weight:600;color:var(--tinta-fraca);text-transform:uppercase;letter-spacing:.05em}
.dia[aria-pressed="true"] .sem,.dia[aria-pressed="true"] .mes,
.dia[aria-current="true"] .sem,.dia[aria-current="true"] .mes{color:rgba(255,255,255,.78)}
.dia .hoje-tag{display:inline-block;margin-top:5px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--coral)}
.dia[aria-pressed="true"] .hoje-tag,.dia[aria-current="true"] .hoje-tag{color:var(--amarelo)}

/* horários */
.painel-horarios{padding:24px}
.painel-cabecalho{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.painel-cabecalho h3{font-size:17px;font-weight:700;letter-spacing:-.3px}
.contagem{font-size:13px;font-weight:600;color:var(--roxo);background:var(--lilas-suave);border-radius:var(--r-full);padding:4px 12px}
.legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--tinta-fraca);margin:10px 0 18px;padding-bottom:16px;border-bottom:1px solid var(--linha)}
.legenda i{display:inline-block;width:11px;height:11px;border-radius:4px;margin-right:6px;vertical-align:-1px}
.legenda .li-livre i{background:var(--papel);border:1.5px solid var(--linha-forte)}
.legenda .li-ocupado i{background:repeating-linear-gradient(45deg,#eceaf0,#eceaf0 3px,#e0dde5 3px,#e0dde5 6px)}

.grade-horarios{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.horario{
  padding:13px 8px;border-radius:var(--r-md);border:1.5px solid var(--linha-forte);
  background:var(--papel);font-size:14.5px;font-weight:700;letter-spacing:-.2px;
  transition:var(--transicao);position:relative;
}
a.horario{display:block;text-align:center;text-decoration:none;color:inherit}
.horario small{display:block;font-size:10.5px;font-weight:600;color:var(--tinta-fraca);letter-spacing:0;margin-top:2px}
.horario:hover:not(:disabled){border-color:var(--roxo);background:var(--lilas-suave);color:var(--roxo);transform:translateY(-2px);box-shadow:0 6px 16px rgba(89,50,122,.14)}
.horario:disabled{
  background:repeating-linear-gradient(45deg,#f4f2f7,#f4f2f7 4px,#eceaf0 4px,#eceaf0 8px);
  border-color:var(--linha);color:var(--tinta-fraca);text-decoration:line-through;
  text-decoration-thickness:1.5px;cursor:not-allowed;
}
.horario:disabled small{text-decoration:none;color:var(--tinta-fraca)}