/* Calendário de período — compartilhado (wizard do hóspede + gestão).
   Herda a paleta de quem usa; os fallbacks são os tokens claros do
   docs/DESIGN.md. Célula ≥ 44×48 px, indisponível com hachura (não só cor). */

.cal {
  --cal-hachura: color-mix(in srgb, var(--text-muted, #4F6A74) 42%, transparent);
  --cal-faixa: color-mix(in srgb, var(--accent, #0B6E78) 14%, transparent);
  font-variant-numeric: tabular-nums;
  color: var(--text, #12303B);
}

.cal-semana {
  position: sticky;
  top: var(--cal-topo, 0);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(7, minmax(2.75rem, 1fr));
  padding-block: var(--s-2, .5rem);
  background: var(--cal-fundo, var(--bg, #FBF7F0));
  border-bottom: 1px solid var(--border, #E4DACA);
  font-size: .75rem;
  line-height: 1.45;
  letter-spacing: .04em;
  color: var(--text-muted, #4F6A74);
  text-align: center;
}

.cal-mes { padding-block: var(--s-4, 1rem) var(--s-2, .5rem); }
.cal-mes-titulo {
  margin: 0 0 var(--s-2, .5rem);
  padding-inline: var(--s-1, .25rem);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.006em;
}

.cal-linha[hidden] { display: none; }
.cal-linha {
  display: grid;
  grid-template-columns: repeat(7, minmax(2.75rem, 1fr));
}

.cal-dia,
.cal-vazio { min-height: 3rem; }

.cal-dia {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: var(--r-campo, 10px);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-press, 120ms) var(--ease-out, cubic-bezier(.23, 1, .32, 1));
}
.cal-dia:active { transform: scale(.94); }
.cal-dia:focus-visible {
  outline: 2px solid var(--accent-text, #0B6E78);
  outline-offset: -2px;
}

.cal-num {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
}
.cal-preco {
  position: relative;
  z-index: 1;
  min-height: .9rem;
  font-size: .6875rem;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--text-muted, #4F6A74);
}

.cal-dia.hoje .cal-num::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: currentColor;
}

/* Passado e mês ainda carregando: esmaecidos, sem hachura. */
.cal-dia.passado { cursor: default; color: var(--text-muted, #4F6A74); opacity: .5; }
.cal-dia.passado:active { transform: none; }
.cal-dia.pendente .cal-num { color: var(--text-muted, #4F6A74); }

/* Indisponível: número riscado + hachura diagonal. */
.cal-dia.indisp {
  cursor: not-allowed;
  background-image: repeating-linear-gradient(135deg, var(--cal-hachura) 0 1.5px, transparent 1.5px 6px);
}
.cal-dia.indisp .cal-num { text-decoration: line-through; color: var(--text-muted, #4F6A74); }

/* Meia célula: dia de saída de outra reserva (noite anterior ocupada, a do
   dia livre) — hachura só no triângulo de cima; serve como entrada. */
.cal-dia.meia-entrada::before,
.cal-dia.so-saida::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: repeating-linear-gradient(135deg, var(--cal-hachura) 0 1.5px, transparent 1.5px 6px);
}
.cal-dia.meia-entrada::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
/* O contrário: a noite do dia está ocupada mas a anterior não — só serve de saída. */
.cal-dia.so-saida::before { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.cal-dia.so-saida .cal-num { color: var(--text-muted, #4F6A74); }

/* Livre mas sem entrada (antecedência, dia de entrada da tarifa). */
.cal-dia.sem-entrada .cal-num { color: var(--text-muted, #4F6A74); }

/* Durante a escolha da saída: abaixo do mínimo, além da próxima noite ocupada. */
.cal-dia.esmaecido { opacity: .38; }

/* Período escolhido. */
.cal-dia.sel-meio { border-radius: 0; background-color: var(--cal-faixa); }
.cal-dia.sel-ini,
.cal-dia.sel-fim {
  background-color: var(--accent, #0B6E78);
  color: var(--on-accent, #FFFFFF);
  opacity: 1;
}
.cal-dia.sel-ini .cal-num,
.cal-dia.sel-fim .cal-num,
.cal-dia.sel-ini .cal-preco,
.cal-dia.sel-fim .cal-preco { color: inherit; text-decoration: none; }
.cal-dia.sel-ini.sel-par { border-start-end-radius: 0; border-end-end-radius: 0; }
.cal-dia.sel-fim { border-start-start-radius: 0; border-end-start-radius: 0; }
.cal-dia.sel-ini::before,
.cal-dia.sel-fim::before { display: none; }

/* Recusado pelo servidor agora há pouco. */
.cal-dia.conflito {
  outline: 2px solid var(--danger, #B3352F);
  outline-offset: -2px;
  --cal-hachura: color-mix(in srgb, var(--danger, #B3352F) 55%, transparent);
}

.cal-erro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2, .5rem);
  margin-top: var(--s-2, .5rem);
  font-size: .8125rem;
  color: var(--danger, #B3352F);
}
.cal-tentar {
  min-height: 2.75rem;
  padding: 0 var(--s-4, 1rem);
  border: 1px solid currentColor;
  border-radius: var(--r-campo, 10px);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Legenda (opcional; quem usa monta com estas classes). */
.cal-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2, .5rem) var(--s-4, 1rem);
  font-size: .8125rem;
  line-height: 1.45;
  letter-spacing: .005em;
  color: var(--text-muted, #4F6A74);
}
.cal-legenda span { display: inline-flex; align-items: center; gap: var(--s-2, .5rem); }
.cal-amostra {
  position: relative;
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 5px;
  border: 1px solid var(--border, #E4DACA);
  background: var(--surface, #FFFFFF);
}
.cal-amostra.indisp { background-image: repeating-linear-gradient(135deg, var(--cal-hachura, rgba(79, 106, 116, .42)) 0 1.5px, transparent 1.5px 5px); }
.cal-amostra.meia::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background-image: repeating-linear-gradient(135deg, var(--cal-hachura, rgba(79, 106, 116, .42)) 0 1.5px, transparent 1.5px 5px);
}
.cal-amostra.sel { background: var(--accent, #0B6E78); border-color: transparent; }

@media (hover: hover) and (pointer: fine) {
  .cal-dia:not(.passado):not(.indisp):not(.sel-ini):not(.sel-fim):hover {
    box-shadow: inset 0 0 0 1px var(--text-muted, #4F6A74);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cal-dia { transition: none; }
  .cal-dia:active { transform: none; }
}

/* Preço das noites dentro do período escolhido: texto cheio (o muted sobre a
   faixa da seleção dava 4,42:1, abaixo de AA — revisão de design D2). */
.cal-dia.sel-meio .cal-preco { color: var(--text, #12303B); }