/* grade.css — lista dos 48 horários, seções e selos */
.bloco { margin-bottom: 16px; }
.bloco-head {
  display: flex; align-items: center; gap: 7px; padding: 0 4px 7px;
  color: var(--texto2); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em;
}
.bloco-head .ic { color: var(--acento2); }
.bloco-head span { color: var(--texto); font-weight: 700; font-size: .8rem; }
.bloco-head small { margin-left: auto; letter-spacing: 0; text-transform: none; }
.lista-slots { display: grid; gap: 7px; }

.slot {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 11px 13px; cursor: pointer; min-height: 46px;
  transition: transform .06s, border-color .15s, background .3s;
}
.slot:active { transform: scale(.985); }
.slot .hora {
  display: inline-flex; align-items: center; gap: 6px; width: 76px; flex: none;
  font-weight: 700; font-variant-numeric: tabular-nums; font-size: .95rem; color: var(--texto2);
}
.slot .hora .ic { color: var(--acento2); }
.slot .nome { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .reservar {
  flex: 1; display: inline-flex; align-items: center; gap: 6px;
  color: var(--acento); font-size: .85rem; font-weight: 600; opacity: .9;
}
.slot.cheio { border-color: #3d3f7e; background: linear-gradient(180deg, #24255f, var(--cartao)); }
.slot.cheio .hora { color: var(--texto); }
.slot.agora { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), 0 6px 18px -8px rgba(246,184,60,.5); }
.slot.agora .hora { color: var(--acento); }
.selo {
  flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700;
  background: var(--acento); color: #2a2200; border-radius: 999px; padding: 3px 9px;
  text-transform: uppercase; letter-spacing: .04em;
}
.selo.prox { background: none; border: 1px dashed var(--borda); color: var(--texto2); }