/*
 * As telas do app: a Hoje, os Ajustes e o painel Nova/editar.
 * Os valores vêm de tokens.css; aqui só se usa o nome. O movimento (o painel entrando) só roda com `no-preference`.
 */

/* ---------- A Hoje: o cartão "agora" no céu alto ---------- */
.agora__acao {
  display: contents;
}
.agora__acao button {
  min-height: var(--alvo-minimo);
}

/* ---------- A linha do tempo: a hora, o bloco, e as ações do bloco ---------- */
.secao__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-1) var(--esp-4);
  margin-bottom: var(--esp-3);
}
.secao__cabeca h2 {
  margin: 0;
}
.secao__cabeca .apoio {
  margin: 0;
}
.bloco[data-feita] {
  opacity: 0.8;
}
.bloco {
  position: relative;
  flex-wrap: wrap;
  /* O lápis fica no canto, sobre o bloco: reserva o lugar dele para o texto não passar por baixo. */
  padding-right: calc(var(--alvo-minimo) + var(--esp-2));
}
.bloco__editar {
  position: absolute;
  top: var(--esp-1);
  right: var(--esp-1);
  display: grid;
  place-items: center;
  width: var(--alvo-minimo);
  height: var(--alvo-minimo);
  border-radius: var(--raio-icone);
  color: var(--texto-suave);
}
@media (hover: hover) {
  .bloco__editar:hover {
    color: var(--c-texto);
    background: var(--c-fundo);
  }
}
/* No celular as ações ficam embaixo do texto e podem usar a largura toda: o lápis mora no canto de cima. */
.bloco__acoes {
  flex: 1 1 100%;
  flex-wrap: wrap;
  margin-top: var(--esp-1);
  margin-right: calc((var(--alvo-minimo) + var(--esp-2)) * -1);
}

/* O "adiar" é um menu que abre por cima do bloco, e não empurra o resto da tela. */
.adiar {
  position: relative;
}
.adiar__menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--esp-1));
  z-index: 3;
  display: grid;
  gap: var(--esp-1);
  min-width: 13rem;
  padding: var(--esp-2);
  border-radius: var(--raio-cartao);
  background: var(--cartao);
  box-shadow: var(--sombra-alta);
}
.adiar__menu form {
  display: grid;
  gap: var(--esp-1);
}
.adiar__menu button {
  justify-content: flex-start;
  width: 100%;
  background: none;
  color: var(--texto);
  font-weight: 500;
}
.adiar[open] summary {
  margin-bottom: 0;
}
@media (hover: hover) {
  .adiar__menu button:hover {
    background: var(--leve-fundo);
    color: var(--leve-texto);
  }
}

.dia__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3) var(--esp-6);
  margin-top: var(--esp-6);
  font-weight: 700;
}
.dia__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--alvo-minimo);
}

/* No computador, o Feita e o Adiar ficam à direita do texto, como no desenho. */
@media (min-width: 40rem) {
  .bloco__corpo {
    flex: 1 1 14rem;
  }
  .bloco__acoes {
    flex: 0 0 auto;
    margin-top: 0;
    margin-right: 0;
    align-self: center;
  }
}

/* ---------- Os Ajustes: um cartão por assunto, com o estado em uma frase ---------- */
.ajustes {
  list-style: none;
  display: grid;
  gap: var(--esp-3);
}
.ajuste {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  min-height: 4.5rem;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-cartao);
  background: var(--cartao);
  box-shadow: var(--sombra-cartao);
  color: var(--texto);
  text-decoration: none;
}
.ajuste__icone {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--raio-icone);
  background: var(--leve-fundo);
  color: var(--leve-texto);
}
.ajuste__texto {
  flex: 1;
  min-width: 0;
}
.ajuste__nome {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
}
.ajuste__frase {
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--tipo-pequeno);
}
.ajuste__seta {
  color: var(--texto-suave);
}
/* O vermelho é só para o que parou: o cartão diz, com texto, o que houve. */
.ajuste--alerta {
  border-left: 6px solid var(--erro-texto);
}
.ajuste--alerta .ajuste__icone {
  background: var(--erro-fundo);
  color: var(--erro-texto);
}
.ajuste--alerta .ajuste__frase {
  color: var(--erro-texto);
  font-weight: 700;
}
@media (hover: hover) {
  a.ajuste:hover {
    background: var(--leve-fundo);
  }
}
.ajustes__sair {
  margin-top: var(--esp-6);
}
.voltar {
  margin-bottom: var(--esp-2);
}
.voltar a {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--alvo-minimo);
  font-weight: 700;
}

/* ---------- O painel Nova/editar: lateral direita no computador, folha de baixo no celular ---------- */
.painel {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: min(30rem, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: none;
  padding: 0;
  border: 0;
  background: var(--cartao);
  color: var(--texto);
  box-shadow: var(--sombra-alta);
  overscroll-behavior: contain;
  overflow-y: auto;
}
.painel::backdrop {
  background: rgba(35, 32, 58, 0.4);
}
body:has(dialog.painel[open]) {
  overflow: hidden;
}
@media (max-width: 47.99rem) {
  .painel {
    inset: auto 0 0 0;
    width: 100%;
    height: auto;
    max-height: 92dvh;
    border-radius: var(--raio-cartao) var(--raio-cartao) 0 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .painel[open] {
    animation: painel-entra 0.2s ease-out;
  }
  .painel[open]::backdrop {
    animation: painel-fundo 0.2s ease-out;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 47.99rem) {
  .painel[open] {
    animation-name: painel-sobe;
  }
}
@keyframes painel-entra {
  from {
    opacity: 0;
    transform: translateX(2rem);
  }
}
@keyframes painel-sobe {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
}
@keyframes painel-fundo {
  from {
    opacity: 0;
  }
}

.painel__interno {
  display: grid;
  gap: var(--esp-5);
  padding: var(--esp-6) var(--esp-6) 0;
}
.painel__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
}
.painel__cabeca h2 {
  margin: 0;
  font-size: var(--tipo-grande);
  overflow-wrap: anywhere;
}
.painel__fechar {
  display: grid;
  place-items: center;
  width: var(--alvo-minimo);
  height: var(--alvo-minimo);
  padding: 0;
  flex: none;
  border-radius: var(--raio-icone);
  background: var(--leve-fundo);
  color: var(--leve-texto);
}

/* A página cheia (sem JavaScript) usa o mesmo formulário, num cartão. */
.painel-pagina {
  max-width: 34rem;
}
.painel-pagina .painel__interno {
  padding: 0;
}
.painel-pagina .painel__rodape {
  margin-inline: 0;
  padding-inline: 0;
}

.painel__form {
  display: grid;
  gap: var(--esp-5);
  max-width: none;
}
.painel__form > div,
.painel__form > fieldset {
  display: grid;
  gap: var(--esp-2);
}
.painel__form label:has(> input[type="checkbox"]),
.painel__form .so-rotina fieldset label:has(> input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--alvo-minimo);
  font-weight: 400;
}
.painel__titulo input {
  min-height: 3.25rem;
  padding: var(--esp-3) var(--esp-4);
  border-color: var(--primario);
  border-radius: var(--raio-cartao);
  font-size: max(1.125rem, 16px);
}
.painel__quando {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3);
}
.painel__quando .campo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-1);
  min-width: 0;
}
/* O campo de data do navegador tem largura mínima própria: sem o `min-width: 0` ele invade a hora no celular. */
.painel__quando input[type="time"],
.painel__quando input[type="date"] {
  min-width: 0;
  max-width: none;
}

/* A prévia do que a pessoa escolheu: só aparece com JavaScript (o painel preenche). */
.previa {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-cartao);
  background: var(--fundo);
}
.previa[hidden] {
  display: none;
}
.previa__icone {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--raio-icone);
  background: var(--c-fundo);
  color: var(--c-texto);
}
.previa__texto {
  min-width: 0;
}
.previa__texto p {
  margin: 0;
}
.previa__rotulo,
.previa__detalhe {
  color: var(--texto-suave);
  font-size: var(--tipo-pequeno);
}

/* O tipo: quatro cartões numa grade; os que ainda não existem aparecem apagados, com "em breve". */
.tipos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-2);
}
.tipo {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--esp-1);
  min-height: var(--alvo-minimo);
  padding: var(--esp-3) var(--esp-4);
  border: 2px solid var(--borda);
  border-radius: var(--raio-cartao);
  font-weight: 400;
  cursor: pointer;
}
.tipo input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.tipo strong {
  font-family: var(--fonte-titulo);
}
.tipo__frase {
  color: var(--texto-suave);
  font-size: var(--tipo-pequeno);
}
.tipo:has(input:checked) {
  border-color: var(--primario);
  background: var(--leve-fundo);
}
.tipo:has(input:focus-visible) {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}
.tipo:has(input:disabled),
.tipo:has(input:disabled) input {
  cursor: not-allowed;
}
.tipo:has(input:disabled) {
  border-style: dashed;
}
.tipo:has(input:disabled) strong {
  color: var(--texto-suave);
}

/* Os campos só da rotina aparecem quando a pessoa escolhe "rotina". Sem `:has`, aparecem sempre. */
.painel__form:not(:has(input[name="tipo"][value="rotina"]:checked)) .so-rotina {
  display: none;
}
.so-rotina {
  display: grid;
  gap: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--borda);
}
.so-rotina fieldset {
  display: grid;
  gap: var(--esp-1);
}
/* Os dias da semana só valem para "toda semana", e o dia do mês só para "todo mês": o resto fica escondido. */
.so-rotina:not(:has(input[name="preset"][value="semanal"]:checked)) fieldset:has(input[name="dias"]),
.so-rotina:not(:has(input[name="preset"][value="mensal"]:checked)) .campo:has([name="dia_do_mes"]) {
  display: none;
}

/* "Mais opções": o segundo nível, nunca um terceiro. */
.mais {
  border-top: 1px solid var(--borda);
  padding-top: var(--esp-3);
}
.mais > summary {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--alvo-minimo);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.mais > summary::-webkit-details-marker {
  display: none;
}
/* A seta diz que abre: aponta para baixo fechada e para cima aberta. */
.mais > summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.mais[open] > summary {
  margin-bottom: var(--esp-3);
}
.mais[open] > summary::after {
  margin-top: 0.25rem;
  transform: rotate(-135deg);
}
.mais__conteudo {
  display: grid;
  gap: var(--esp-5);
}

/* O rodapé gruda embaixo: o Guardar fica sempre à vista, e o Apagar longe dele, em texto. O `.painel__form >` vence
   a grade que os outros blocos do formulário usam: aqui o Cancelar e o Guardar ficam lado a lado. */
.painel__form > .painel__rodape {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--esp-3);
  margin-inline: calc(var(--esp-6) * -1);
  padding: var(--esp-4) var(--esp-6) calc(var(--esp-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borda);
  background: var(--cartao);
}
.botao--texto {
  background: none;
  color: var(--perigo);
  padding-inline: 0;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.painel__erros:focus {
  outline: none;
}
.aviso-consentimento {
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-icone);
  background: var(--leve-fundo);
  color: var(--leve-texto);
}
.aviso-consentimento a {
  color: inherit;
  font-weight: 700;
}

/* ---------- Lugar ainda em construção: diz a verdade e leva de volta ---------- */
.em-construcao {
  display: grid;
  gap: var(--esp-3);
  justify-items: start;
}
.em-construcao h2,
.em-construcao p {
  margin: 0;
}

@media (forced-colors: active) {
  .painel {
    border: 1px solid CanvasText;
  }
  .tipo:has(input:checked) {
    outline: 3px solid Highlight;
  }
  .ajuste {
    border: 1px solid CanvasText;
  }
}