/* Fluxos de visita e indisponibilidade: seções sem card, contexto da etapa e ação no rodapé. */

.visit-flow {
  max-width: 760px;
  padding-bottom: calc(var(--space-12) * 2);
}

/* A barra preenche a parte da etapa (--flow-progress), escrita pelo servidor e pelos controllers de etapas (#297). */
.flow-progress {
  --flow-progress: 50%;

  margin: 0 0 var(--space-6);
  color: var(--accent);
  font-weight: 700;
}

.flow-progress::after {
  content: "";
  display: block;
  height: 4px;
  margin-top: var(--space-3);
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--accent) var(--flow-progress), var(--surface) var(--flow-progress));
}

.time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.custom-periods,
.custom-margin,
.custom-duration,
.custom-window {
  display: none;
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.adjust-periods:has(input[name="visit[adjust_periods]"]:checked) .custom-periods {
  display: block;
}

.second-period {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.custom-periods:not(:has(input[name="visit[add_second_period]"]:checked)) .second-period {
  display: none;
}

.edit-agreement {
  margin: var(--space-4) 0;
  padding: var(--space-3);
}

.edit-period {
  margin-bottom: var(--space-4);
  padding: 0 var(--space-3);
}

.margin-adjust summary {
  min-height: var(--control-min-height);
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}

/* Visita, etapa 2 (#297): período e margem numa linha de resumo; "Ajustar" abre os grupos no lugar. */
.schedule-defaults {
  margin-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.schedule-defaults > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  min-height: var(--control-min-height);
  padding-block: var(--space-3);
  cursor: pointer;
}

.schedule-defaults-line {
  font-weight: 700;
}

.schedule-defaults + .help {
  margin-top: 0;
}

.schedule-defaults[open] + .help {
  display: none;
}

.review-clock {
  display: block;
  font-size: var(--font-size-section);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.review-time small {
  display: block;
}

@media (width <= 760px) {
  .time-grid {
    grid-template-columns: 1fr;
  }
}

.flow-section {
  margin-top: var(--space-8);
}

.visit-flow h2,
.flow-section > h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-section);
}

.visit-flow .card h2 {
  font-size: var(--font-size-card);
}

.review-summary {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-6);
}

.review-summary dl {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

@media (width <= 760px) {
  .review-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .review-summary dl,
  .review-summary .badge {
    grid-column: 1;
    justify-self: start;
  }
}

.flow-section > h2 + p {
  margin: 0 0 var(--space-2);
}

.visit-flow .flow-progress {
  max-width: none;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-support);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.option-group:has(input[value="custom"]:checked) ~ :is(.custom-periods, .custom-margin, .custom-duration, .custom-window) {
  display: block;
}

.arrival-window {
  margin-block: var(--space-4);
}

.arrival-window > legend {
  margin-bottom: var(--space-2);
}

.arrival-window-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.arrival-window-times .field {
  margin-block: 0;
}

.arrival-window-times .field > label {
  color: var(--muted);
  font-size: var(--font-size-support);
}

.arrival-window .field-check {
  margin-block: var(--space-2) 0;
}

.custom-periods .field,
.custom-margin .field,
.custom-duration .field,
.custom-window .field {
  margin-block: var(--space-2);
}

.flow-section .time-grid {
  margin-block: var(--space-4);
  row-gap: var(--space-4);
}

.flow-section .time-grid .field {
  margin-block: 0;
}


.review-page .card + .card {
  margin-top: var(--space-4);
}

.review-page .card > h2 {
  margin-bottom: var(--space-2);
}

.affected-visits {
  margin-top: var(--space-6);
}