/*
 * 23_sequencia.css — LEVA 2309 (docs/GUSTAVO-2309.md §2.5, §2.6, §2.9) · dono: pacote P2 sequencia.
 * ═══════════════════════════════════════════════════════════════════════════
 * A chama da sequência (`.sequencia`), o anel da meta do dia (`.meta-do-dia`)
 * e a tela /preferencias-de-estudo (`.preferencias`). Três blocos BEM com
 * prefixo próprio: nada aqui estiliza classe de outra folha, então nada vaza
 * para outra tela.
 *
 * Não precisa de @import: o layout usa `stylesheet_link_tag :app` e o
 * Propshaft emite um <link> por folha, em ordem alfabética.
 *
 * ── AS TRÊS REGRAS DE MOVIMENTO (§2.9 e MARCA.md §2) ──────────────────────
 *
 * 1. Só `transform` e `opacity`. O anel NÃO anima `stroke-dashoffset`: ele
 *    nasce no valor final (o HTML traz o número) e o que se move é a entrada
 *    do anel inteiro (escala) e o halo (opacidade de um segundo traço).
 * 2. O estado de repouso de cada regra é o estado FINAL: a animação só
 *    descreve o caminho até ele (`both`). Com `prefers-reduced-motion`, o
 *    02_base.css encurta toda animação para 0,01 ms e o bloco do fim desta
 *    folha tira as nossas de vez — em qualquer dos dois casos o que fica na
 *    tela é exatamente o mesmo conteúdo, parado.
 * 3. A informação nunca espera: o número da sequência e o percentual do anel
 *    nunca começam invisíveis (o "pop" do número é só escala).
 *
 * ── A COR DO FOGO ─────────────────────────────────────────────────────────
 * Nenhum hex aqui (01_tokens.css é a única camada com valor literal). A
 * labareda é a MISTURA do amarelo dos pontos com o coral dos tokens, que dá o
 * laranja; o miolo é o amarelo puro. As duas acompanham o tema claro sozinhas.
 */

/* ═══ A CHAMA DA SEQUÊNCIA ═══════════════════════════════════════════════ */

.sequencia {
  --chama-fora: color-mix(in oklab, var(--cor-pontos) 52%, var(--cor-reprovado));
  --chama-dentro: var(--cor-pontos);
  --chama-apagada: var(--fundo-fundo);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "topo" "frase" "semana" "link";
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
  padding: var(--esp-5) var(--esp-5) var(--esp-3);
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-4);
}
/* O brilho de fundo é estático (gradiente fixo): acende junto com a classe,
   sem custo de quadro nenhum. */
.sequencia--acesa {
  background:
    radial-gradient(circle at 3.25rem 3.25rem, color-mix(in srgb, var(--chama-fora) 16%, transparent), transparent 11rem),
    var(--fundo-cartao);
  border-color: color-mix(in srgb, var(--chama-fora) 35%, var(--borda));
}

.sequencia__topo {
  grid-area: topo;
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  min-width: 0;
}

.sequencia__chama { flex: none; width: 4rem; height: 4rem }
.sequencia__svg { display: block; width: 100%; height: 100%; overflow: visible }

.sequencia__halo { fill: var(--chama-fora); opacity: 0 }
.sequencia__fogo {
  transform-box: fill-box;
  transform-origin: 50% 100%;   /* fogo cresce da base */
}
.sequencia__labareda {
  fill: var(--chama-apagada);
  stroke: var(--borda-forte);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.sequencia__miolo { fill: var(--borda) }

/* Aguardando: a chama está "desenhada" na cor do fogo, esperando o dia de
   hoje. Não é cinza — cinza seria o "apagou", e ela não apagou. */
.sequencia--aguardando .sequencia__labareda { stroke: var(--chama-fora); stroke-dasharray: 4 3 }
.sequencia--aguardando .sequencia__miolo { fill: color-mix(in srgb, var(--chama-fora) 30%, var(--chama-apagada)) }

/* Folga e pausa: a chama descansa acesa, em fogo baixo. */
.sequencia--folga .sequencia__labareda,
.sequencia--viagem .sequencia__labareda {
  fill: color-mix(in srgb, var(--chama-fora) 45%, var(--chama-apagada));
  stroke: none;
}
.sequencia--folga .sequencia__miolo,
.sequencia--viagem .sequencia__miolo { fill: color-mix(in srgb, var(--chama-dentro) 55%, var(--chama-apagada)) }

.sequencia--acesa .sequencia__labareda { fill: var(--chama-fora); stroke: none }
.sequencia--acesa .sequencia__miolo { fill: var(--chama-dentro) }
.sequencia--acesa .sequencia__halo {
  opacity: 0.14;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: sequencia-halo 900ms var(--curva-entrada) both;
}
/* ACENDER: da base, passando do ponto uma vez (curva elástica = "deu
   certo"), e depois o tremular — tão pequeno que só se sente. O tremular
   começa quando o acender termina, e os dois terminam em `scale(1)`. */
.sequencia--acesa .sequencia__fogo {
  animation:
    sequencia-acender 640ms var(--curva-elastica) both,
    sequencia-tremular 2.6s ease-in-out 640ms infinite;
}

@keyframes sequencia-acender {
  from { opacity: 0; transform: scale(0.35) }
  45%  { opacity: 1 }
  to   { opacity: 1; transform: scale(1) }
}
@keyframes sequencia-tremular {
  0%, 100% { transform: scale(1, 1) }
  50%      { transform: scale(0.97, 1.035) }
}
@keyframes sequencia-halo {
  from { opacity: 0; transform: scale(0.4) }
  40%  { opacity: 0.55 }
  to   { opacity: 0.14; transform: scale(1) }
}

.sequencia__placar { min-width: 0 }
.sequencia__titulo {
  margin: 0;
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.sequencia__numero {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  margin: var(--esp-1) 0 0;
}
.sequencia__valor {
  display: inline-block;
  font-size: var(--texto-4xl);
  font-weight: var(--peso-forte);
  line-height: 1;
  letter-spacing: var(--espacamento-titulo);
  color: var(--texto);
}
.sequencia--acesa .sequencia__valor {
  color: var(--chama-dentro);
  animation: sequencia-numero 520ms var(--curva-elastica) 180ms both;
}
@keyframes sequencia-numero {
  from { transform: scale(0.8) }
  to   { transform: scale(1) }
}
.sequencia__unidade { font-size: var(--texto-md); color: var(--texto-suave) }

.sequencia__recorde {
  align-self: flex-start;
  margin-left: auto;
  padding: var(--esp-1) var(--esp-3);
  font-size: var(--texto-xs);
  color: var(--texto-tenue);
  border: 1px solid var(--borda);
  border-radius: var(--raio-redondo);
  white-space: nowrap;
}

.sequencia__frase {
  grid-area: frase;
  margin: 0;
  font-size: var(--texto-md);
  line-height: var(--altura-normal);
  color: var(--texto-suave);
}
.sequencia--acesa .sequencia__frase { color: var(--texto) }

/* ── A faixa da semana ─────────────────────────────────────────────────── */
.sequencia__semana {
  grid-area: semana;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--esp-1);
  margin: var(--esp-1) 0 0;
  padding: 0;
  list-style: none;
}
.sequencia__dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-1);
}
.sequencia__bolinha {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--raio-redondo);
  border: 2px solid var(--borda);
  color: var(--texto-tenue);
}
.sequencia__bolinha svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sequencia__inicial {
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  color: var(--texto-tenue);
}

.sequencia__dia--estudou .sequencia__bolinha {
  background: var(--chama-fora);
  border-color: var(--chama-fora);
  color: var(--cor-pontos-contraste);
}
.sequencia__dia--folga .sequencia__bolinha { border-style: dashed }
.sequencia__dia--folga .sequencia__bolinha svg { fill: currentColor; stroke: none }
.sequencia__dia--viagem .sequencia__bolinha {
  background: var(--cor-ritmo-suave);
  border-color: var(--cor-ritmo-forte);
  color: var(--cor-ritmo);
}
/* "Sem estudo" é neutro de propósito: ponto discreto, nunca vermelho. */
.sequencia__dia--faltou .sequencia__bolinha svg { fill: var(--borda-forte); stroke: none }
.sequencia__dia--hoje .sequencia__bolinha {
  border-color: var(--cor-marca);
  box-shadow: 0 0 0 3px var(--cor-marca-tenue);
}
.sequencia__dia--futuro .sequencia__bolinha { border-color: var(--borda-tenue) }
.sequencia__dia--e-hoje .sequencia__inicial { color: var(--texto); font-weight: var(--peso-forte) }

/* A bolinha de HOJE, quando conta, entra junto com a chama. */
.sequencia--acesa .sequencia__dia--e-hoje .sequencia__bolinha {
  animation: sequencia-bolinha 480ms var(--curva-elastica) 260ms both;
}
@keyframes sequencia-bolinha {
  from { transform: scale(0.5) }
  to   { transform: scale(1) }
}

.sequencia__preferencias {
  grid-area: link;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--alvo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-marca);
  text-decoration: none;
}
.sequencia__preferencias:hover { text-decoration: underline }
.sequencia__preferencias svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  transition: transform var(--tempo-rapido) var(--curva-padrao);
}
.sequencia__preferencias:hover svg { transform: rotate(-12deg) }

@media (min-width: 48rem) {
  .sequencia {
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    grid-template-areas: "topo semana" "frase link";
    align-items: center;
    column-gap: var(--esp-8);
    padding: var(--esp-6) var(--esp-6) var(--esp-4);
  }
  .sequencia__semana { margin: 0 }
  .sequencia__preferencias { justify-self: end }
}

/* ═══ O ANEL DA META DO DIA ══════════════════════════════════════════════ */

.meta-do-dia {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  margin-bottom: var(--esp-8);
  padding: var(--esp-4) var(--esp-5);
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-4);
}
.meta-do-dia--cumprida { border-color: color-mix(in srgb, var(--cor-aprovado) 35%, var(--borda)) }

.meta-do-dia__anel {
  position: relative;
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  animation: meta-entrar var(--tempo-lento) var(--curva-entrada) both;
}
@keyframes meta-entrar {
  from { opacity: 0.2; transform: scale(0.85) rotate(-20deg) }
  to   { opacity: 1; transform: scale(1) rotate(0) }
}
.meta-do-dia__svg { display: block; width: 100%; height: 100%; overflow: visible }
.meta-do-dia__svg circle { fill: none; stroke-width: 7 }
.meta-do-dia__trilho { stroke: var(--fundo-fundo) }
.meta-do-dia__traco { stroke: var(--cor-marca); stroke-linecap: round }
.meta-do-dia--zerada .meta-do-dia__traco { opacity: 0 }
.meta-do-dia__brilho { stroke: var(--cor-aprovado); stroke-width: 14; opacity: 0 }

/* FECHA E BRILHA: o traço vira verde (já cheio, o HTML diz 100), o halo
   acende por opacidade e o anel dá UM pulso elástico. */
.meta-do-dia--cumprida .meta-do-dia__traco { stroke: var(--cor-aprovado) }
.meta-do-dia--cumprida .meta-do-dia__brilho {
  opacity: 0.22;
  animation: meta-brilho 1100ms var(--curva-entrada) 200ms both;
}
.meta-do-dia--cumprida .meta-do-dia__anel {
  animation:
    meta-entrar var(--tempo-lento) var(--curva-entrada) both,
    meta-pulso 520ms var(--curva-elastica) 380ms both;
}
@keyframes meta-brilho {
  from { opacity: 0 }
  35%  { opacity: 0.7 }
  to   { opacity: 0.22 }
}
@keyframes meta-pulso {
  from { transform: scale(1) }
  40%  { transform: scale(1.08) }
  to   { transform: scale(1) }
}

.meta-do-dia__centro {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.meta-do-dia__percentual {
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  color: var(--texto);
}
.meta-do-dia__percentual small { font-size: var(--texto-xs); color: var(--texto-tenue); font-weight: var(--peso-medio) }
.meta-do-dia__visto {
  fill: none;
  stroke: var(--cor-aprovado);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: meta-visto 420ms var(--curva-elastica) 420ms both;
}
@keyframes meta-visto {
  from { opacity: 0; transform: scale(0.4) }
  to   { opacity: 1; transform: scale(1) }
}

.meta-do-dia__texto { min-width: 0 }
.meta-do-dia__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-2);
}
.meta-do-dia__titulo {
  margin: 0;
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}
/* O chip do nível leva à escolha da meta. 32 px de altura com a folga do
   padding: acima dos 24 px da WCAG 2.5.8, e não compete com o texto. */
.meta-do-dia__nivel {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--esp-3);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  color: var(--cor-marca);
  background: var(--cor-marca-suave);
  border-radius: var(--raio-redondo);
  text-decoration: none;
  transition: transform var(--tempo-rapido) var(--curva-padrao);
}
.meta-do-dia__nivel:hover { text-decoration: underline }
.meta-do-dia__nivel:active { transform: scale(0.96) }
.meta-do-dia__falta {
  margin: var(--esp-1) 0 0;
  font-size: var(--texto-md);
  font-weight: var(--peso-medio);
  color: var(--texto);
}
.meta-do-dia--cumprida .meta-do-dia__falta { color: var(--cor-aprovado) }
.meta-do-dia__cobre {
  margin: var(--esp-1) 0 0;
  font-size: var(--texto-sm);
  color: var(--texto-tenue);
}

.meta-do-dia__partes { display: none }

@media (min-width: 48rem) {
  .meta-do-dia { padding: var(--esp-5) var(--esp-6); gap: var(--esp-5) }
  .meta-do-dia__partes {
    display: flex;
    gap: var(--esp-3);
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
  }
  .meta-do-dia__parte {
    display: grid;
    gap: var(--esp-1);
    min-width: 9.5rem;
    padding: var(--esp-3) var(--esp-4);
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio-3);
    font-size: var(--texto-xs);
    color: var(--texto-tenue);
  }
  .meta-do-dia__parte strong { font-size: var(--texto-lg); color: var(--texto) }
  .meta-do-dia__parte--feita { border-color: color-mix(in srgb, var(--cor-aprovado) 40%, var(--borda)) }
  .meta-do-dia__parte--feita strong { color: var(--cor-aprovado) }
}

/* ═══ /preferencias-de-estudo ════════════════════════════════════════════ */

.preferencias { max-width: 56rem }

.preferencias__voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  min-height: 2.75rem;
  margin-bottom: var(--esp-1);
  font-size: var(--texto-sm);
  color: var(--texto-suave);
  text-decoration: none;
}
.preferencias__voltar:hover { color: var(--texto) }
.preferencias__voltar svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--tempo-rapido) var(--curva-padrao);
}
.preferencias__voltar:hover svg { transform: translateX(-3px) }
.preferencias__cabecalho { margin-bottom: var(--esp-6) }

.preferencias__grupo {
  min-width: 0;
  margin: 0 0 var(--esp-4);
  padding: var(--esp-5);
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-4);
}
.preferencias__grupo--com-erro { border-color: var(--cor-reprovado) }
/* `<legend>` flutuando deixa de morar na borda do `<fieldset>` e vira um
   título comum — o truque mais antigo e o único que funciona em todos. */
legend.preferencias__titulo { float: left; width: 100%; padding: 0 }
.preferencias__titulo {
  margin: 0 0 var(--esp-1);
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  color: var(--texto);
}
.preferencias__ajuda {
  clear: both;
  margin: 0 0 var(--esp-4);
  font-size: var(--texto-sm);
  line-height: var(--altura-normal);
  color: var(--texto-tenue);
}

.preferencias__opcoes { display: grid; gap: var(--esp-3) }

/* ── O rádio nativo, vestido de cartão ──────────────────────────────────── */
.preferencias__opcao { position: relative; display: block; cursor: pointer }
/* Fora da vista, DENTRO da árvore: continua focável, anda com as setas e é
   lido como rádio. `display: none` tiraria tudo isso. */
.preferencias__radio {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.preferencias__cartao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--esp-1) var(--esp-3);
  min-height: var(--alvo-grande);
  padding: var(--esp-4);
  background: var(--fundo);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-3);
  transition:
    border-color var(--tempo-rapido) var(--curva-padrao),
    background-color var(--tempo-rapido) var(--curva-padrao),
    transform var(--tempo-rapido) var(--curva-padrao);
}
.preferencias__opcao:hover .preferencias__cartao { border-color: var(--borda-forte) }
.preferencias__opcao:active .preferencias__cartao { transform: scale(0.985) }
.preferencias__radio:focus-visible + .preferencias__cartao {
  outline: 3px solid var(--cor-marca-tenue);
  outline-offset: 2px;
  border-color: var(--cor-marca);
}
.preferencias__radio:checked + .preferencias__cartao {
  background: var(--cor-marca-suave);
  border-color: var(--cor-marca);
}

/* A bolinha de marcação: redonda como um rádio, porque É um rádio. */
.preferencias__marca {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  width: 1.375rem;
  height: 1.375rem;
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio-redondo);
  transition: background-color var(--tempo-rapido) var(--curva-padrao), border-color var(--tempo-rapido) var(--curva-padrao);
}
.preferencias__marca::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.17rem;
  width: 0.35rem;
  height: 0.65rem;
  border: solid var(--cor-marca-contraste);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.4);
  transition: opacity var(--tempo-rapido) var(--curva-padrao), transform var(--tempo-normal) var(--curva-elastica);
}
.preferencias__radio:checked + .preferencias__cartao .preferencias__marca {
  background: var(--cor-marca-forte);
  border-color: var(--cor-marca-forte);
}
.preferencias__radio:checked + .preferencias__cartao .preferencias__marca::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.preferencias__nome {
  grid-row: 1;
  grid-column: 2;
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  color: var(--texto);
}
.preferencias__detalhe {
  grid-column: 2 / -1;
  font-size: var(--texto-sm);
  color: var(--texto-suave);
}
.preferencias__detalhe--tenue { color: var(--texto-tenue) }

/* A semana em miniatura: o que "5 dias" quer dizer, desenhado. */
.preferencias__semana { grid-row: 1; grid-column: 3; display: flex; gap: 3px }
.preferencias__dia {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  line-height: 1;
  color: var(--texto-tenue);
  border: 1px dashed var(--borda);
  border-radius: var(--raio-redondo);
}
.preferencias__dia--estuda {
  color: var(--cor-marca-contraste);
  background: var(--cor-marca-forte);
  border: 1px solid var(--cor-marca-forte);
}

/* O anel em miniatura: quanto cada meta pede, relativo à puxada. */
.preferencias__anel { grid-row: 1; grid-column: 3; display: block }
.preferencias__anel circle { fill: none; stroke-width: 5 }
.preferencias__anel-trilho { stroke: var(--fundo-fundo) }
.preferencias__anel-traco { stroke: var(--cor-marca); stroke-linecap: round }

/* ── O lembrete ─────────────────────────────────────────────────────────── */
.preferencias__lembrete {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--esp-2) var(--esp-2);
  max-width: 22rem;
}
.preferencias__sino {
  fill: none;
  stroke: var(--cor-marca);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.preferencias__lembrete-rotulo {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-suave);
}
.preferencias__hora { grid-column: 1 / -1; cursor: pointer }
/* O <select> do produto é `appearance: none`; a seta volta aqui, desenhada
   com borda (sem imagem, sem hex) e sem roubar o toque. */
.preferencias__lembrete::after {
  content: "";
  position: absolute;
  right: var(--esp-4);
  bottom: 1.3rem;
  width: 0.5rem;
  height: 0.5rem;
  border: solid var(--texto-suave);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}

.preferencias__salvar { margin: var(--esp-2) 0 var(--esp-8) }
.preferencias__botao { width: 100% }

/* ── A pausa ────────────────────────────────────────────────────────────── */
.preferencias__pausa--ativa { border-color: color-mix(in srgb, var(--cor-ritmo) 40%, var(--borda)) }
.preferencias__cota { margin-bottom: var(--esp-5) }
.preferencias__cota-texto {
  margin: 0 0 var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-suave);
}
.preferencias__cota-regua {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  max-width: 22rem;
}
.preferencias__cota-dia { height: 0.375rem; border-radius: var(--raio-redondo); background: var(--fundo-fundo) }
.preferencias__cota-dia--usado { background: var(--cor-ritmo) }

.preferencias__pausa-ativa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  color: var(--cor-ritmo);
  background: var(--cor-ritmo-suave);
  border-radius: var(--raio-3);
}
.preferencias__pausa-ativa svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round }
.preferencias__pausa-ativa p { flex: 1 1 12rem; margin: 0; font-weight: var(--peso-medio); color: var(--texto) }
.preferencias__data { max-width: 22rem }
.preferencias__pausa-form .campo { margin-bottom: var(--esp-4) }
/* No celular o botão desce para a linha de baixo, largo; no desktop fica à
   direita da frase. */
.preferencias__voltei-form { flex: 1 1 100% }
.preferencias__voltei { width: 100% }

@media (min-width: 48rem) {
  .preferencias__grupo { padding: var(--esp-6) }
  .preferencias__opcoes { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  /* Três colunas: o cartão vira vertical — marca e desenho em cima, nome e
     regra embaixo. */
  .preferencias__cartao {
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    gap: var(--esp-2) var(--esp-3);
    height: 100%;
  }
  .preferencias__semana,
  .preferencias__anel { grid-row: 1; grid-column: 2; justify-self: end }
  .preferencias__nome { grid-row: 2; grid-column: 1 / -1; margin-top: var(--esp-2) }
  .preferencias__detalhe { grid-column: 1 / -1 }
  .preferencias__botao { width: auto }
  .preferencias__pausa-form .botao--largo { width: auto }
  .preferencias__voltei-form { flex: none }
  .preferencias__voltei { width: auto }
}

/* ═══ Movimento reduzido ═════════════════════════════════════════════════
   O MESMO conteúdo, parado: a chama já acesa, o anel já fechado e com o
   halo no brilho de repouso. Tira as animações de vez (em vez de só
   encurtá-las, como o 02_base) porque o tremular é infinito. O simulador
   `[data-movimento="reduzido"]` do 03_movimento vale igual. */
@media (prefers-reduced-motion: reduce) {
  .sequencia *,
  .meta-do-dia,
  .meta-do-dia *,
  .preferencias * { animation: none !important; transition: none !important }
}
[data-movimento="reduzido"] .sequencia *,
[data-movimento="reduzido"] .meta-do-dia *,
[data-movimento="reduzido"] .preferencias * { animation: none !important; transition: none !important }