/*
 * A Agenda (semana, mês, ano), o Histórico e as Notas.
 * Os valores vêm de tokens.css; aqui só se usa o nome. Pares de cor: só os que `conferir_contraste.py` já mede
 * (texto sobre cartão/fundo, `-texto` da cor sobre o `-fundo` dela, leve-texto sobre leve-fundo).
 * Sem movimento nenhum nestas telas. Celular primeiro: a semana e o mês viram lista de dias; a grade volta no computador.
 */

/* A semana pede largura: sete colunas por hora. As outras telas seguem na coluna de leitura. */
.app--larga {
  --miolo: 84rem;
}

/* ---------- Comum: o ponto de cor (sempre ao lado de texto) e a estrela da data importante ---------- */
.ponto {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.4em;
  border-radius: 50%;
  background: var(--c);
}
.marca-estado .icone {
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.15em;
  vertical-align: -0.1em;
}

/* ---------- A barra da Agenda: a visão, e o período com os botões de andar no tempo ---------- */
.agenda-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3) var(--esp-6);
}
.vistas {
  list-style: none;
  display: inline-flex;
  gap: var(--esp-1);
  padding: var(--esp-1);
  border-radius: var(--raio-botao);
  background: var(--leve-fundo);
}
.vistas__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
  padding-inline: var(--esp-5);
  border-radius: var(--raio-botao);
  color: var(--leve-texto);
  font-family: var(--fonte-titulo);
  font-weight: 500;
  text-decoration: none;
}
/* A visão atual vira um "botão" branco e em negrito: o negrito e o fundo dizem, além da cor. */
.vistas__link[aria-current="page"] {
  background: var(--cartao);
  color: var(--link);
  font-weight: 600;
  box-shadow: var(--sombra-cartao);
}
.agenda-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}
.agenda-periodo__titulo {
  margin: 0;
  min-width: 10ch;
  font-size: var(--tipo-medio);
  text-align: center;
}
.agenda-periodo__hoje {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
  font-weight: 700;
}
@media (max-width: 39.99rem) {
  .agenda-periodo__titulo {
    flex: 1 1 100%;
    order: -1;
    text-align: left;
  }
}
@media (hover: hover) {
  .vistas__link:not([aria-current="page"]):hover {
    background: var(--cartao);
  }
}

/* ---------- A semana: no celular, um cartão por dia; no computador, sete colunas por hora ---------- */
.semana {
  --hora-h: 4rem;
  --cabeca: 3.5rem;
  display: grid;
  gap: var(--esp-3);
}
.semana__horas {
  display: none;
}
.semana__dia {
  min-width: 0;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-cartao);
  background: var(--cartao);
  box-shadow: var(--sombra-cartao);
}
.semana__dia[data-hoje] {
  border-left: 6px solid var(--link);
}
.semana__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-2);
  font-size: var(--tipo-base);
}
.semana__cabeca b {
  font-family: var(--fonte-titulo);
  font-size: var(--tipo-medio);
}
.semana__hoje {
  padding: 2px var(--esp-3);
  border-radius: var(--raio-botao);
  background: var(--primario);
  color: var(--sobre-primario);
  font-size: var(--tipo-pequeno);
  font-weight: 700;
}
.semana__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-1) var(--esp-3);
  margin-bottom: var(--esp-2);
}
.semana__topo .semana__cabeca {
  margin: 0;
}
.semana__nova {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
  font-size: var(--tipo-pequeno);
  font-weight: 700;
}
.semana__vagas {
  display: none;
}
.semana__eventos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
}
.semana__nada {
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--tipo-pequeno);
}
.ev {
  min-width: 0;
  border-left: 6px solid var(--c);
  border-radius: var(--raio-icone);
  background: var(--c-fundo);
  color: var(--c-texto);
}
/* O link é o bloco inteiro: o alvo de clique e de toque é a área toda, e ele abre o painel de editar. */
.ev__link,
.item-link {
  color: inherit;
  text-decoration: none;
}
.ev__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-1) var(--esp-3);
  height: 100%;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-icone);
}
.ev__link:focus-visible {
  outline-offset: -3px;
}
 (hover: hover) {
  .ev__link:hover,
  .item-link:hover {
    text-decoration: underline;
  }
}
.ev__hora {
  font-size: var(--tipo-pequeno);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ev__titulo {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 64rem) {
  .semana {
    --cabeca: 4.75rem;
    grid-template-columns: 3rem repeat(7, minmax(0, 1fr));
    align-items: start;
    gap: 0;
  }
  .semana__horas {
    display: block;
    padding-top: var(--cabeca);
  }
  .semana__horas span {
    display: block;
    height: var(--hora-h);
    color: var(--texto-suave);
    font-size: var(--tipo-pequeno);
    font-variant-numeric: tabular-nums;
  }
  .semana__dia {
    padding: 0;
    border-left: 1px solid var(--borda);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .semana__dia[data-hoje] {
    border-left: 1px solid var(--borda);
  }
  .semana__topo {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: var(--cabeca);
    margin: 0;
    color: var(--texto-suave);
    font-size: var(--tipo-pequeno);
  }
  .semana__cabeca {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--tipo-pequeno);
  }
  .semana__nova {
    min-height: 1.75rem;
  }
  .semana__dia[data-hoje] .semana__topo {
    border-radius: var(--raio-icone) var(--raio-icone) 0 0;
    background: var(--leve-fundo);
    color: var(--leve-texto);
  }
  .semana__pista {
    position: relative;
    height: calc(var(--horas) * var(--hora-h));
    border-top: 1px solid var(--borda);
    background: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--hora-h) - 1px),
      var(--borda) calc(var(--hora-h) - 1px),
      var(--borda) var(--hora-h)
    );
  }
  .semana__nada {
    display: none;
  }
  /* Os horários vazios ficam por baixo dos blocos: clicar num deles abre o painel Nova naquele dia e hora. */
  .semana__vagas {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: repeat(var(--horas), var(--hora-h));
  }
  .semana__vaga {
    cursor: pointer;
  }
  @media (hover: hover) {
    .semana__vaga:hover {
      background: var(--leve-fundo);
    }
  }
  /* O bloco fica na hora e na altura da duração; quem se sobrepõe divide a largura em faixas. */
  .semana__eventos {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
  }
  .ev {
    position: absolute;
    top: calc(var(--de) / 60 * var(--hora-h) + 1px);
    left: calc(100% / var(--faixas) * var(--faixa) + 2px);
    width: calc(100% / var(--faixas) - 4px);
    height: calc(var(--dur) / 60 * var(--hora-h) - 3px);
    border-left-width: 4px;
    overflow: hidden;
    font-size: var(--tipo-pequeno);
    line-height: 1.25;
    pointer-events: auto;
  }
  .ev__link {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: var(--esp-1) var(--esp-2);
  }
}

/* ---------- O mês: no celular, só os dias que têm algo; no computador, a grade ---------- */
.mes,
.mes tbody,
.mes tr,
.mes td {
  display: block;
}
.mes thead {
  display: none;
}
.mes tr {
  display: grid;
  gap: var(--esp-3);
}
.mes tr + tr {
  margin-top: var(--esp-3);
}
.mes__dia {
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-cartao);
  background: var(--cartao);
  box-shadow: var(--sombra-cartao);
}
.mes__dia--fora,
.mes__dia--vazio:not(.mes__dia--hoje) {
  display: none;
}
.mes__num {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-1);
  font-weight: 700;
}
.mes__hoje {
  padding: 2px var(--esp-3);
  border-radius: var(--raio-botao);
  background: var(--primario);
  color: var(--sobre-primario);
  font-size: var(--tipo-pequeno);
}
.mes__itens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-1);
}
.mes__item {
  display: flex;
  gap: var(--esp-2);
  align-items: baseline;
  font-size: var(--tipo-pequeno);
  line-height: 1.3;
}
.mes__texto {
  min-width: 0;
  overflow-wrap: anywhere;
}
.mes__hora {
  margin-right: var(--esp-1);
  color: var(--texto-suave);
}
.mes__item--importante .mes__texto {
  font-weight: 700;
}
.mes__mais {
  color: var(--texto-suave);
  font-size: var(--tipo-pequeno);
}

@media (min-width: 48rem) {
  .mes {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  .mes thead {
    display: table-header-group;
  }
  .mes tbody {
    display: table-row-group;
  }
  .mes tr {
    display: table-row;
  }
  .mes tr + tr {
    margin-top: 0;
  }
  .mes th {
    padding: var(--esp-2);
    color: var(--texto-suave);
    font-size: var(--tipo-pequeno);
    text-align: left;
  }
  .mes th abbr {
    text-decoration: none;
  }
  .mes td,
  .mes__dia--fora,
  .mes__dia--vazio:not(.mes__dia--hoje) {
    display: table-cell;
  }
  .mes__dia {
    height: 7.5rem;
    padding: var(--esp-2);
    border: 1px solid var(--borda);
    border-radius: 0;
    box-shadow: none;
    vertical-align: top;
  }
  .mes__dia--fora {
    background: var(--fundo);
    color: var(--texto-suave);
  }
  .mes__nome-do-dia {
    display: none;
  }
  /* Hoje: o fundo leve, o "hoje" escrito e o número em negrito; tudo na cor que passa de 4,5:1 sobre ele. */
  .mes__dia--hoje {
    background: var(--leve-fundo);
    color: var(--leve-texto);
  }
  .mes__dia--hoje .mes__hora,
  .mes__dia--hoje .mes__mais,
  .mes__dia--hoje .marca-estado {
    color: inherit;
  }
}

/* ---------- O ano: doze cartões e o "Vem aí" ao lado ---------- */
.ano {
  display: grid;
  gap: var(--esp-6);
  align-items: start;
}
.ano__meses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* No celular, dois meses por linha: o ano inteiro cabe em seis linhas em vez de doze. */
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
  gap: var(--esp-3);
}
.ano__mes {
  display: grid;
  align-content: start;
  gap: var(--esp-2);
  min-height: 4.5rem;
  padding: var(--esp-4);
  border-radius: var(--raio-cartao);
  background: var(--cartao);
  box-shadow: var(--sombra-cartao);
}
.ano__mes h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-2);
  margin: 0;
}
/* O mês de agora ganha um anel e a palavra "agora": nunca só um deles. */
.ano__mes--agora {
  box-shadow:
    0 0 0 3px var(--link),
    var(--sombra-cartao);
}
.ano__agora {
  padding: 2px var(--esp-3);
  border-radius: var(--raio-botao);
  background: var(--primario);
  color: var(--sobre-primario);
  font-family: var(--fonte-texto);
  font-size: var(--tipo-pequeno);
  font-weight: 700;
}
.ano__marcas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-1);
}
.marca {
  display: flex;
  gap: var(--esp-2);
  align-items: baseline;
  font-size: var(--tipo-pequeno);
  line-height: 1.3;
}
.ano__mais {
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--tipo-pequeno);
}
.vem-ai {
  display: grid;
  gap: var(--esp-3);
}
.vem-ai h2 {
  margin: 0;
}
.vem-ai__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-3);
}
.vem-ai__item {
  display: flex;
  gap: var(--esp-3);
  align-items: center;
}
.vem-ai__dias {
  flex: none;
  width: 3.75rem;
  color: var(--c-texto);
  font-family: var(--fonte-titulo);
  font-size: var(--tipo-medio);
  font-weight: 600;
  text-align: center;
}
.vem-ai__nova {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--alvo-minimo);
  font-weight: 700;
}
@media (min-width: 48rem) {
  .ano__meses {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  }
  .ano__mes {
    min-height: 6rem;
  }
}
@media (min-width: 64rem) {
  .ano {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
  .ano__meses {
    grid-row: 1;
    grid-column: 1;
  }
  .vem-ai {
    grid-row: 1;
    grid-column: 2;
  }
}

/* ---------- O histórico: a busca no alto, o "Filtrar" recolhido e uma linha por registro ---------- */
.busca {
  display: grid;
  gap: var(--esp-3);
}
.busca__linha {
  display: flex;
  gap: var(--esp-3);
}
.busca__campo {
  position: relative;
  flex: 1;
  min-width: 0;
}
.busca__campo .icone {
  position: absolute;
  left: var(--esp-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-suave);
  pointer-events: none;
}
.busca .busca__campo > input.busca__entrada[type="search"] {
  min-height: 3.25rem;
  padding-left: calc(var(--esp-4) + 1.25rem + var(--esp-3));
  border-color: var(--primario);
  border-radius: var(--raio-cartao);
  font-size: max(1.125rem, 16px);
}
.filtrar > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
  padding: var(--esp-2) var(--esp-5);
  border-radius: var(--raio-botao);
  background: var(--leve-fundo);
  color: var(--leve-texto);
  font-family: var(--fonte-titulo);
  font-weight: 500;
  cursor: pointer;
}
.filtrar[open] > summary {
  margin-bottom: var(--esp-3);
}
.filtrar__campos {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--esp-4);
  padding: var(--esp-4);
  border-radius: var(--raio-cartao);
  background: var(--cartao);
  box-shadow: var(--sombra-cartao);
}
.filtrar__campos .campo {
  display: grid;
  gap: var(--esp-1);
  flex: 1 1 14rem;
}
.filtrar__campos > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
  font-weight: 700;
}
.historico__grupo h2 {
  margin: 0 0 var(--esp-2);
  font-size: var(--tipo-medio);
}
.historico__grupo + .historico__grupo {
  margin-top: var(--esp-5);
}
.historico {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
}
.registro {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  grid-template-areas:
    "icone nome estado"
    "icone data valor";
  gap: var(--esp-1) var(--esp-3);
  align-items: center;
  padding: var(--esp-3) var(--esp-4);
  border-left: 6px solid var(--c);
  border-radius: var(--raio-cartao);
  background: var(--cartao);
  box-shadow: var(--sombra-cartao);
}
.registro__data {
  grid-area: data;
  color: var(--texto-suave);
  font-size: var(--tipo-pequeno);
}
.registro__icone {
  grid-area: icone;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--raio-icone);
  background: var(--c-fundo);
  color: var(--c-texto);
}
.registro__nome {
  grid-area: nome;
  min-width: 0;
  overflow-wrap: anywhere;
}
.registro__estado {
  grid-area: estado;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 2px var(--esp-3);
  border-radius: var(--raio-botao);
  background: var(--c-fundo);
  color: var(--c-texto);
  font-size: var(--tipo-pequeno);
  font-weight: 700;
  white-space: nowrap;
}
.registro__estado--nao-feita {
  background: var(--insistindo-fundo);
  color: var(--insistindo-texto);
}
.registro__valor {
  grid-area: valor;
  justify-self: end;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 40rem) {
  .registro {
    grid-template-columns: 7.5rem 2.5rem minmax(0, 1fr) auto 7rem;
    grid-template-areas: "data icone nome estado valor";
  }
}
.historico__rodape {
  margin-top: var(--esp-6);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--borda);
  color: var(--texto-suave);
  font-size: var(--tipo-pequeno);
}

/* ---------- As notas: o campo fixo no alto e a lista por data ---------- */
.nota-nova {
  display: grid;
  gap: var(--esp-3);
}
.nota-nova textarea {
  min-height: 5.5rem;
  resize: vertical;
}
.nota-nova .erro {
  display: flex;
  gap: var(--esp-2);
  align-items: flex-start;
  margin: 0;
  padding: var(--esp-2) var(--esp-3);
  border-left: 4px solid var(--erro-texto);
  border-radius: var(--raio-icone);
  background: var(--erro-fundo);
  color: var(--erro-texto);
  font-weight: 700;
}
.nota-nova__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-4);
}
.nota-nova__rodape p {
  margin: 0;
  font-size: var(--tipo-pequeno);
}
@media (min-width: 48rem) {
  .nota-nova {
    position: sticky;
    top: var(--esp-3);
    z-index: 2;
  }
}
.notas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-3);
}
.nota {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--raio-cartao);
  background: var(--cartao);
  box-shadow: var(--sombra-cartao);
}
.nota > p {
  margin: 0;
}
.nota__texto {
  overflow-wrap: anywhere;
}
.nota__data {
  color: var(--texto-suave);
  font-size: var(--tipo-pequeno);
}
.nota__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}
.nota__apagar > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
  padding-inline: var(--esp-3);
  color: var(--perigo);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.nota__apagar form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-icone);
  background: var(--erro-fundo);
  color: var(--erro-texto);
}
.nota__apagar form p {
  margin: 0;
  font-weight: 700;
}

@media (forced-colors: active) {
  .ev,
  .registro,
  .nota,
  .ano__mes,
  .mes__dia,
  .semana__dia {
    border: 1px solid CanvasText;
  }
  .vistas__link[aria-current="page"] {
    outline: 2px solid Highlight;
  }
}