/* A agenda.
   Nenhuma cor nova: tudo sai das variáveis do tema, para que trocar a marca
   continue custando uma linha. */

.agenda-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.agenda-periodo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* O período aberto fica marcado — e por atributo, não por classe, para que o
   leitor de tela saiba o mesmo que quem vê. */
.agenda-periodo [aria-current="date"] {
  text-decoration: underline;
  font-weight: 600;
}

/* O intervalo na tela: sem ele, ‹ e › movem a lista sem dizer para onde. */
.agenda-faixa {
  font-size: 0.95rem;
  color: var(--ink);
  opacity: 0.8;
}

.agenda-escolher-dia {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}

/* O título do prazo é um botão que abre o dia dele, e precisa parecer com o
   título que era antes — não com um botão. */
.agenda-abrir-dia {
  font: inherit;
  text-align: left;
  padding: 0;
}

.agenda-estado {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: var(--ink);
  opacity: 0.8;
}

.agenda-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.agenda-dia {
  margin-top: 0.75rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  border-bottom: 1px solid rgb(22 36 61 / 15%);
  padding-bottom: 0.25rem;
}

.agenda-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.75rem;
  border: 1px solid rgb(22 36 61 / 12%);
  border-radius: 10px;
  background: var(--paper);
}

/* Prazo é o que dói perder: a faixa existe para ele saltar na varredura. */
.agenda-prazo-marca,
.agenda-item.agenda-prazo {
  border-left: 4px solid var(--accent);
}

.agenda-corpo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 12rem;
  flex: 1 1 16rem;
}

.agenda-detalhe,
.agenda-local,
.agenda-origem {
  font-size: 0.9rem;
  opacity: 0.85;
}

.agenda-acoes {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* 🔴 A linha de aviso ocupa a largura toda.
   Visto em navegador real a 390 px, em 25/09/2026: `.deadline-list li` é uma
   grade de `48px 1fr auto`, e um `li` só com texto caía na primeira coluna —
   a frase saía UMA PALAVRA POR LINHA. Valia para "Nenhum prazo nos próximos
   30 dias", que é o estado normal de quem não tem prazo, e ninguém tinha
   visto porque o DOM simulado não faz layout. */
.agenda-vazio {
  grid-column: 1 / -1;
  font-size: 0.95rem;
  opacity: 0.8;
}

/* ------------------------------------------------------------- formulário */

.agenda-dialogo {
  width: min(32rem, 92vw);
}

.agenda-campo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

/* 🔴 O `select` não herdava fonte e caía no padrão do navegador: 13,3 px,
   abaixo do piso de 14 do projeto. Medido a 390 px em 25/09/2026 — os demais
   campos já vinham de `.agenda-campo`, só ele ficava de fora. */
.agenda-campo select,
.agenda-campo input,
.agenda-campo textarea {
  font: inherit;
  font-size: max(0.95rem, 14px);
}

.agenda-campo input[type='checkbox'] {
  width: 1.15rem;
  height: 1.15rem;
  align-self: flex-start;
}

/* 0,875rem = 14px com a raiz padrão. Abaixo disso o projeto não vai: a dica do
   prazo é justamente o que precisa ser lido. */
.agenda-dica {
  font-size: 0.875rem;
  opacity: 0.8;
}

.agenda-horas {
  display: flex;
  gap: 0.75rem;
}

/* 🔴 O `hidden` precisa vencer o `display: flex` acima.
   Visto em navegador real em 25/09/2026, e não em teste: com o tipo "prazo",
   `agenda-horas.hidden` ficava `true` e os campos Início e Fim CONTINUAVAM na
   tela — `[hidden] { display: none }` do navegador perde para uma regra de
   classe. A pessoa preenchia hora num prazo, que é dia civil e não tem hora.
   O DOM simulado dos testes não calcula estilo, então nada disso aparecia.
   Especificidade resolve; `!important` seria desnecessário aqui. */
.agenda-horas[hidden] {
  display: none;
}

.agenda-horas > .agenda-campo {
  flex: 1;
}

.agenda-aviso:empty {
  display: none;
}

.agenda-aviso {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: var(--ink);
  border-left: 4px solid var(--accent);
  padding-left: 0.6rem;
}

.agenda-form-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* No celular (390 px) as ações passam a ocupar a linha inteira: botão de
   0,75 rem de lado não se acerta com o polegar. */
@media (width <= 30rem) {
  .agenda-item {
    flex-direction: column;
  }

  .agenda-acoes {
    width: 100%;
    justify-content: space-between;
  }

  .agenda-horas {
    flex-direction: column;
    gap: 0;
  }
}