/* Agenda do dia: cabeçalho com a ação principal, calendário, linha de resumo e visitas. */

.day-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.day-heading h1 {
  margin-bottom: var(--space-2);
}

.day-heading .day-actions {
  margin-top: 0;
}

.day-actions .icon-action {
  width: var(--control-min-height);
  padding: 0;
  flex: none;
}

.icon-action svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.date {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-support);
}

/* Primeiro dia organizado (#297): o Aviso de sucesso fica entre "Meu dia" e o calendário, visível sem rolar. */
.first-day {
  margin-bottom: var(--space-6);
}

.day-summary {
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font-size: var(--font-size-support);
}

.unavailability {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.day-board .actions-stack {
  margin-top: var(--space-6);
}

.day-board h2 {
  font-size: var(--font-size-card);
}

/* Pendências e Configure o Ajeito: uma única superfície, sem card, na mesma coluna do calendário e do dia.
   Cada linha (#296) tem o texto à esquerda e no máximo uma ação à direita, sem recuo; até 760 px, empilha. */
.booking-attention {
  margin-bottom: var(--space-6);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--surface);
}

.booking-attention:has(> section[hidden]:only-child) {
  display: none;
}

.booking-attention > section {
  padding-block: var(--space-2);
}

.booking-attention > section + section {
  border-top: 1px solid var(--line);
}

.booking-attention h2 {
  margin: var(--space-2) 0;
  font-size: var(--font-size-card);
}

.attention-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.attention-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: start;
  gap: 0 var(--space-4);
  min-height: var(--control-min-height);
}

/* A ação vem logo depois do texto (decisão de Julio, #296): o olho lê motivo e ação numa varredura só,
   sem atravessar a coluna de 852 px até a borda direita. */

.attention-line a:not(.text-action) {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min-height);
}

.attention-line > p {
  margin: 0;
}

.attention-text > p {
  margin-bottom: var(--space-2);
}

/* Configure o Ajeito: título à esquerda e as ações à direita, na mesma linha. */
.setup-line h2 {
  flex: 0 1 auto;
  margin-right: var(--space-2);
}

.setup-line .secondary {
  border: 1px solid var(--line);
}

/* Instruções do iPhone: abaixo da linha do título e das ações, que fica inteira. */
.setup-line [data-pwa-target="instructions"] {
  display: grid;
  flex: 1 1 100%;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

.setup-line [data-pwa-target="instructions"] p {
  margin: 0;
}

@media (width <= 760px) {
  .day-heading {
    flex-direction: column;
    align-items: start;
    gap: var(--space-3);
  }

  .day-heading .actions {
    width: 100%;
  }

  .day-heading .date {
    margin-bottom: 0;
  }

  .day-heading .day-actions > * {
    flex: none;
  }

  .attention-line {
    flex-direction: column;
    align-items: start;
  }

  .setup-line {
    flex-flow: row wrap;
    align-items: center;
    justify-content: start;
  }

  .setup-line h2 {
    flex-basis: 100%;
  }
}

@media (forced-colors: active) {
  .booking-attention {
    border: 1px solid CanvasText;
  }
}