/* Project D — estilos. Azul bem claro no fundo, cartões brancos e texto marinho;
   laranja e verde ficam para os estados, e as cores fortes, para as trilhas. */

:root {
  color-scheme: light dark;
  --fundo: #edf3fa;
  --fundo-topo: #dce9f6;
  --superficie: #ffffff;
  --superficie-2: #e1ebf5;
  --borda: #d5e1ee;
  --borda-forte: #b4c6da;
  --texto: #162033;
  --texto-2: #4f5f78;
  --texto-3: #7f90a7;
  --primario: #1c2738;
  --sobre-primario: #ffffff;
  --marca: #3a8fd9;
  --acento: #e8632b;
  --acento-suave: #fde9dd;
  --acento-texto: #a5400f;
  --sucesso: #0b6b2b;
  --sucesso-suave: #dff3e6;
  --perigo: #c0392b;
  --sobre-perigo: #ffffff;
  --link: #1d5fb8;
  --grafico: #2a78d6;
  --sobre-grafico: #000000;
  --grade: #dde7f1;
  --eixo: #b4c6da;
  --sombra: 0 1px 2px rgba(22, 32, 51, 0.04), 0 6px 18px rgba(40, 80, 130, 0.07);
  --raio: 16px;
  --nav-largura: 232px;

  /* Cores das trilhas (paleta categórica validada) e a cor do texto em cima de cada uma. */
  --trilha-1: #2a78d6; --sobre-1: #000000; /* nem branco nem tinta chegam a 4,5:1 neste azul; preto chega */
  --trilha-2: #eb6834; --sobre-2: #0b0b0b;
  --trilha-3: #1baf7a; --sobre-3: #0b0b0b;
  --trilha-4: #eda100; --sobre-4: #0b0b0b;
  --trilha-5: #e87ba4; --sobre-5: #0b0b0b;
  --trilha-6: #008300; --sobre-6: #ffffff;
  --trilha-7: #4a3aa7; --sobre-7: #ffffff;
  --trilha-8: #e34948; --sobre-8: #0b0b0b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0d1420;
    --fundo-topo: #122036;
    --superficie: #152030;
    --superficie-2: #202e44;
    --borda: #26354c;
    --borda-forte: #3b4d69;
    --texto: #e8eef7;
    --texto-2: #a0b0c6;
    --texto-3: #6f8199;
    --primario: #d6e6f7;
    --sobre-primario: #0d1420;
    --marca: #62aef0;
    --acento: #ff8a5c;
    --acento-suave: #3b2318;
    --acento-texto: #ffb08f;
    --sucesso: #5fd08a;
    --sucesso-suave: #14301f;
    --perigo: #ef7a6d;
    --sobre-perigo: #1a0d0b;
    --link: #8ab8f7;
    --grafico: #3987e5;
    --sobre-grafico: #0b0b0b;
    --grade: #26354c;
    --eixo: #3b4d69;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.35);

    --trilha-1: #3987e5; --sobre-1: #0b0b0b;
    --trilha-2: #d95926; --sobre-2: #0b0b0b;
    --trilha-3: #199e70; --sobre-3: #0b0b0b;
    --trilha-4: #c98500; --sobre-4: #0b0b0b;
    --trilha-5: #d55181; --sobre-5: #0b0b0b;
    --trilha-6: #008300; --sobre-6: #ffffff;
    --trilha-7: #9085e9; --sobre-7: #0b0b0b;
    --trilha-8: #e66767; --sobre-8: #0b0b0b;
  }
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--fundo-topo), var(--fundo) 420px) no-repeat var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body.sem-nav { padding-bottom: 0; padding-left: 0; }
body.sem-nav .nav { display: none; }

h1 { margin: 0; font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.01em; }
h2, h3 { margin: 0; }
p { margin: 0 0 10px; }
a { color: inherit; }
small { font-size: 0.82em; }

:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.pular {
  position: absolute; left: 8px; top: -60px; z-index: 60;
  background: var(--primario); color: var(--sobre-primario);
  padding: 10px 14px; border-radius: 10px; font-weight: 600;
}
.pular:focus { top: 8px; }

.icone { flex: none; display: block; }
.logo { display: block; border-radius: 22%; }
/* A marca escrita acompanha o logo: peso firme e o D inclinado para a frente, no azul da marca. */
.marca { font-weight: 700; letter-spacing: -0.02em; }
.marca b { font-weight: 800; font-style: italic; color: var(--marca); padding-right: 0.06em; }
.centro { text-align: center; margin: 14px 0; }

/* ------------------------------------------------------------------ estrutura */

.conteudo {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(20px + env(safe-area-inset-top)) 16px 24px;
  outline: none;
}

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-logo { display: none; }
.nav-lista { display: flex; margin: 0; padding: 0; list-style: none; }
.nav-lista li { flex: 1; min-width: 0; }
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 60px; padding: 8px 2px 6px;
  color: var(--texto-2); text-decoration: none; font-size: 0.7rem; font-weight: 600;
}
.nav-item[aria-current="page"] { color: var(--texto); }
.nav-icone {
  position: relative; display: grid; place-items: center;
  width: 52px; height: 28px; border-radius: 14px;
}
.nav-item[aria-current="page"] .nav-icone { background: var(--primario); color: var(--sobre-primario); }
.nav-ponto {
  position: absolute; top: 1px; right: 10px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 2px var(--superficie);
}

@media (min-width: 900px) {
  body { padding-bottom: 0; padding-left: var(--nav-largura); }
  .nav {
    top: 0; right: auto; width: var(--nav-largura);
    border-top: 0; border-right: 1px solid var(--borda);
    padding: 26px 14px;
  }
  .nav-logo {
    display: flex; align-items: center; gap: 10px;
    padding: 0 10px 22px;
    color: var(--texto); text-decoration: none; font-weight: 700; font-size: 1.1rem;
  }
  .nav-lista { flex-direction: column; gap: 4px; }
  .nav-item {
    flex-direction: row; gap: 12px; min-height: 44px; padding: 8px 10px;
    border-radius: 12px; font-size: 0.95rem;
  }
  .nav-item[aria-current="page"] { background: var(--primario); color: var(--sobre-primario); }
  .nav-item[aria-current="page"] .nav-icone { background: none; }
  .nav-icone { width: 26px; }
  .nav-ponto { right: -2px; }
  .conteudo { max-width: 1040px; padding: 36px 32px 48px; }
}

/* ------------------------------------------------------------------ cabeçalhos e cartões */

.topo { margin: 4px 4px 18px; }
.topo-data { margin: 0 0 2px; color: var(--texto-2); font-size: 0.9rem; }
.topo-data::first-letter { text-transform: uppercase; }
.topo-sub { margin: 8px 0 0; color: var(--texto-2); max-width: 62ch; }
.topo-sub--solto { margin: -10px 4px 16px; }
.topo--barra { display: flex; align-items: center; gap: 6px; margin-left: -6px; }
.topo-titulo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 1.35rem; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px;
  margin: 0 0 14px;
}
.cartao-titulo { font-size: 1.05rem; margin: 0 0 4px; }
.cartao-subtitulo { font-size: 0.9rem; margin: 18px 0 10px; }
.cartao-sub { color: var(--texto-2); font-size: 0.88rem; margin: 0 0 12px; }
.cartao > :last-child { margin-bottom: 0; }

.rotulo {
  display: block; margin: 0 0 8px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-2);
}
.secao-titulo {
  margin: 22px 4px 10px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-2);
}

.grade-2 { display: grid; gap: 14px; margin-bottom: 14px; }
.grade-2 > .cartao { margin: 0; min-width: 0; }
@media (min-width: 900px) {
  .grade-2 { grid-template-columns: 1fr 1fr; align-items: start; }
}

.nota {
  background: var(--superficie-2); border-radius: 12px;
  padding: 10px 14px; margin: 0 0 14px; font-size: 0.92rem;
}

.vazio { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 44px 16px; }
.vazio--tela { min-height: 80dvh; align-content: center; }
.vazio-titulo { margin: 0; font-weight: 700; font-size: 1.1rem; }
.vazio-texto { margin: 0 0 8px; color: var(--texto-2); max-width: 42ch; }

/* ------------------------------------------------------------------ botões */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: 12px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.botao:disabled { opacity: 0.6; cursor: default; }
.botao-primario { background: var(--primario); color: var(--sobre-primario); }
.botao-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.botao-perigo { background: var(--perigo); color: var(--sobre-perigo); }
.botao-grande { min-height: 52px; padding: 0 24px; font-size: 1.02rem; }
.botao-pequeno { min-height: 36px; padding: 0 12px; font-size: 0.88rem; }

.botao-icone {
  flex: none; display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 12px; background: transparent; color: var(--texto);
  cursor: pointer; text-decoration: none;
}
.botao-icone:hover { background: var(--superficie-2); }
.botao-icone:disabled, .botao-icone[aria-disabled="true"] { opacity: 0.3; cursor: default; background: transparent; }
.botao-icone--cor { background: color-mix(in srgb, var(--cor) 20%, var(--superficie)); }
.botao-icone--cor:hover { background: color-mix(in srgb, var(--cor) 32%, var(--superficie)); }

.botao-texto {
  min-height: 44px; padding: 0 8px;
  border: 0; background: none; color: var(--texto-2);
  font: inherit; font-weight: 600; cursor: pointer;
}
.botao-texto--perigo { color: var(--perigo); }

.link {
  padding: 0; border: 0; background: none;
  color: var(--link); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.link:hover { text-decoration: underline; }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.acoes--trilha { margin: 0 0 14px; }

/* ------------------------------------------------------------------ chips e segmentos */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--pequenos { margin-top: 2px; }
.chips--rolagem {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px 6px; padding: 2px 16px 10px;
}
.chips--rolagem::-webkit-scrollbar { display: none; }

.chip { position: relative; display: inline-flex; max-width: 100%; }
.chip input, .segmento input, .cor input, .sugestao input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.chip > span, .chip-botao {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--borda-forte); border-radius: 999px;
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 0.92rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.chips--pequenos .chip-botao { min-height: 36px; padding: 0 12px; font-variant-numeric: tabular-nums; }
.chip-botao--emoji { padding: 0 10px; font-size: 1.1rem; }
/* Chips de trilha (rádio): um nome longo quebra a linha em vez de estourar o cartão. */
.chip > span { white-space: normal; padding-block: 6px; }
.chip input:checked + span, .chip-botao[aria-pressed="true"] {
  background: var(--primario); border-color: var(--primario); color: var(--sobre-primario);
}
.chip input:focus-visible + span, .segmento input:focus-visible + span,
.cor input:focus-visible + span, .sugestao:has(input:focus-visible) {
  outline: 2px solid var(--link); outline-offset: 2px;
}

.segmentado {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px;
  padding: 3px; border-radius: 12px; background: var(--superficie-2);
}
.segmentado--abas { margin-bottom: 14px; }
.segmento { position: relative; display: block; }
.segmento > span, .segmento-botao {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 40px; padding: 0 8px;
  border: 0; border-radius: 10px; background: none; color: var(--texto-2);
  font: inherit; font-size: 0.92rem; font-weight: 600; text-align: center; cursor: pointer;
}
.segmento input:checked + span, .segmento-botao[aria-pressed="true"] {
  background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
.segmento input:disabled + span { opacity: 0.55; }

/* ------------------------------------------------------------------ formulários */

.formulario { display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.campo-rotulo { padding: 0; font-weight: 600; font-size: 0.92rem; }
.campo-rotulo small, .alternador small { margin-left: 4px; font-weight: 400; color: var(--texto-2); }
.campo-ajuda { margin: 0; color: var(--texto-2); font-size: 0.85rem; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], textarea {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--borda-forte); border-radius: 12px;
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 16px; /* 16px evita o zoom automático do iOS */
}
textarea { min-height: 84px; resize: vertical; }
::placeholder { color: var(--texto-3); opacity: 1; }
.campo-emoji { max-width: 110px; text-align: center; font-size: 1.3rem; }

.erro { margin: 0; color: var(--perigo); font-weight: 600; font-size: 0.92rem; }

.alternador { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.alternador input { flex: none; width: 20px; height: 20px; accent-color: var(--primario); }

.cores { display: flex; flex-wrap: wrap; gap: 10px; }
.cor { position: relative; display: block; }
.cor > span {
  display: block; width: 40px; height: 40px; border-radius: 50%;
  background: var(--cor); border: 3px solid var(--superficie);
  box-shadow: 0 0 0 1px var(--borda-forte);
}
.cor input:checked + span { box-shadow: 0 0 0 3px var(--texto); }

.sugestoes { display: grid; gap: 8px; }
@media (min-width: 600px) { .sugestoes { grid-template-columns: 1fr 1fr; } }
.sugestao {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--borda-forte); border-radius: 14px; cursor: pointer;
}
.sugestao:has(input:checked) { border-color: var(--texto); }
.sugestao-texto { flex: 1; min-width: 0; display: grid; }
.sugestao-texto small { color: var(--texto-2); }
.sugestao-marca {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border: 2px solid var(--borda-forte); border-radius: 50%; color: transparent;
}
.sugestao input:checked ~ .sugestao-marca {
  background: var(--primario); border-color: var(--primario); color: var(--sobre-primario);
}

/* ------------------------------------------------------------------ trilhas (tela Hoje) */

.trilhas { display: grid; gap: 12px; }
@media (min-width: 900px) { .trilhas { grid-template-columns: 1fr 1fr; } }

.trilha {
  display: grid; gap: 12px; min-width: 0;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 14px;
}
.trilha-cabeca { display: flex; align-items: center; gap: 8px; }
.trilha-corpo {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  color: inherit; text-decoration: none; border-radius: 12px;
}
.trilha-emoji {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 14px; background: color-mix(in srgb, var(--cor, var(--texto-3)) 20%, var(--superficie));
  font-size: 1.3rem; font-weight: 700; line-height: 1;
}
.trilha-emoji--pequeno { width: 34px; height: 34px; border-radius: 10px; font-size: 1rem; }
.trilha-info { display: grid; min-width: 0; }
.trilha-nome { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trilha-resumo { color: var(--texto-2); font-size: 0.88rem; }
.trilha-acoes { display: flex; gap: 6px; }
.trilha-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

.semana { display: flex; align-items: center; gap: 5px; margin: 0; padding: 0; list-style: none; }
.dia {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 50%; background: var(--superficie-2); color: var(--texto-2);
  font: inherit; font-size: 0.68rem; font-weight: 700;
}
button.dia { width: 34px; height: 34px; cursor: pointer; }
.dia--feito { background: var(--cor); color: var(--sobre-cor); }
.dia--hoje { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--texto-3); }
.dia--futuro { opacity: 0.45; }

.estado {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
  border-radius: 999px; background: var(--superficie-2); color: var(--texto-2);
  font-size: 0.8rem; font-weight: 700; white-space: nowrap;
}
.estado--batida, .estado--feito { background: var(--sucesso-suave); color: var(--sucesso); }
.estado--atrasada { background: var(--acento-suave); color: var(--acento-texto); }

.botao-check {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 2px solid var(--borda-forte); border-radius: 50%;
  background: var(--superficie); color: var(--texto-3); cursor: pointer;
}
.botao-check--feito { background: var(--cor); border-color: var(--cor); color: var(--sobre-cor); }

/* Barra de progresso: a pista é um tom mais claro da mesma cor. */
.barra {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--cor, var(--grafico)) 18%, var(--superficie-2));
}
.barra > span { display: block; height: 100%; border-radius: inherit; background: var(--cor, var(--grafico)); }

/* ------------------------------------------------------------------ coach e índice */

.recados { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.recado { display: flex; align-items: flex-start; gap: 12px; }
.recado-icone {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 12px; background: var(--superficie-2); font-size: 1.05rem;
}
.recado-texto { min-width: 0; }
.recado-texto p { margin: 0 0 2px; }
.foco-semana { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--borda); }

.indice { display: flex; align-items: center; gap: 18px; }
.indice-info { min-width: 0; }
.indice-texto { margin: 0 0 4px; font-weight: 700; font-size: 1.05rem; }
.indice-sub { margin: 0 0 6px; color: var(--texto-2); font-size: 0.9rem; }

.anel { flex: none; }
.anel-pista { stroke: var(--superficie-2); }
.anel-valor { stroke: var(--marca); }
.anel-rotulo { fill: var(--texto); font-size: 24px; font-weight: 700; }
.anel-sub { fill: var(--texto-2); font-size: 11px; }

/* ------------------------------------------------------------------ cronômetro */

.faixa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; padding: 12px 16px; border-radius: var(--raio);
  background: var(--primario); color: var(--sobre-primario);
  font-weight: 600; text-decoration: none;
}
.faixa-texto { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.faixa-relogio { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pendente { border-color: var(--acento); }

.foco { display: grid; gap: 18px; justify-items: center; text-align: center; padding: 26px 16px; }
.foco .chips { justify-content: center; }
.foco-trilha { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; font-size: 1.1rem; }
.foco-estado { margin: 0; color: var(--texto-2); }
.foco-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.relogio {
  font-size: clamp(3.4rem, 18vw, 5.5rem); font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.relogio--pausado { color: var(--texto-3); }

/* ------------------------------------------------------------------ números e listas */

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  display: grid; gap: 4px; align-content: start; min-width: 0; padding: 12px 14px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.tile-rotulo {
  color: var(--texto-2); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.tile-valor { font-size: 1.45rem; font-weight: 700; line-height: 1.15; }
.tile-valor--menor { font-size: 1rem; line-height: 1.3; margin-bottom: 4px; }
.tile-sub { color: var(--texto-2); font-size: 0.8rem; }

.lista { margin: 0; padding: 0; list-style: none; }
.lista > li + li { border-top: 1px solid var(--borda); }
.lista--cartao {
  padding: 2px 14px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.item {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0;
  color: inherit; text-decoration: none;
}
.item--linha { gap: 6px; }
.item--linha .item-corpo { margin-left: 6px; }
.item--linha .botao-icone { width: 38px; }
.item-corpo { flex: 1; min-width: 0; display: grid; gap: 1px; }
.item-titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-sub { color: var(--texto-2); font-size: 0.85rem; }
.item-notas {
  color: var(--texto-2); font-size: 0.85rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.item-valor { flex: none; display: inline-flex; font-weight: 700; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.item-valor--check { color: var(--sucesso); }

.mes-titulo {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 20px 4px 8px; font-size: 0.95rem;
}
.mes-titulo span:first-child::first-letter { text-transform: uppercase; }
.mes-total { color: var(--texto-2); font-size: 0.88rem; font-weight: 600; }

.diario { display: grid; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
.diario p { margin: 2px 0 0; white-space: pre-line; }
/* Um link ou código comprido colado nas notas não pode estourar o cartão. */
.diario p, .item-notas, .foco-semana, .porque, .recado-texto, .nota { overflow-wrap: anywhere; }
.diario-quando { color: var(--texto-2); font-size: 0.8rem; font-weight: 600; }

.sequencias { margin: 4px 0 0; padding: 0; list-style: none; }
.sequencias li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: 0.92rem;
}
.sequencias li + li { border-top: 1px solid var(--borda); }
.sequencias li > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sequencias strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

.porque {
  margin: 0 4px 14px; padding-left: 12px; border-left: 3px solid var(--cor);
  color: var(--texto-2); font-style: italic;
}
.marco-linha { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 0.9rem; font-weight: 600; }
.marco-linha .rotulo { margin: 0; }

.resumo-topo { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.resumo-lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.resumo-linha { display: flex; align-items: center; gap: 10px; }
.resumo-corpo { flex: 1; min-width: 0; display: grid; gap: 5px; }
.resumo-nome { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; font-size: 0.92rem; font-weight: 600; }
.resumo-valor { color: var(--texto-2); white-space: nowrap; }

.versao { margin: 14px 0 0; color: var(--texto-2); font-size: 0.8rem; }

/* ------------------------------------------------------------------ gráficos */

.colunas { --altura: 150px; margin-top: 6px; }
.colunas-area {
  position: relative; display: flex; align-items: flex-end; gap: 2px;
  height: var(--altura); border-bottom: 1px solid var(--eixo);
}
.coluna {
  position: relative; flex: 1; min-width: 0; height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  border-radius: 6px 6px 0 0; outline-offset: -2px;
}
.coluna-barra {
  width: min(24px, 72%); border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--cor, var(--grafico)) 45%, var(--superficie));
}
.coluna--atual .coluna-barra { background: var(--cor, var(--grafico)); }
.coluna:hover, .coluna:focus-visible { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.colunas-meta {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px solid var(--texto-3); pointer-events: none;
}
.colunas-meta span {
  position: absolute; left: 0; bottom: 2px; padding-right: 4px;
  background: var(--superficie); color: var(--texto-2); font-size: 0.68rem; font-weight: 600;
}
.colunas-eixo { display: flex; gap: 2px; margin-top: 6px; }
.colunas-eixo span {
  flex: 1; min-width: 0; display: flex; justify-content: center;
  color: var(--texto-2); font-size: 0.68rem; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.colunas-eixo span:last-child { justify-content: flex-end; }

.hbarras { display: grid; gap: 12px; }
.hbarra {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: baseline;
}
.hbarra-rotulo { grid-area: 1 / 1; font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbarra-emoji { margin-right: 6px; }
.hbarra-texto { grid-area: 1 / 2; font-size: 0.88rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hbarra-pista { grid-area: 2 / 1 / 3 / -1; height: 10px; }
.hbarra-valor { display: block; height: 100%; min-width: 3px; border-radius: 0 4px 4px 0; background: var(--cor); }

.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-mes { font-weight: 600; }
.cal-mes::first-letter { text-transform: uppercase; }
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cab { padding-bottom: 2px; text-align: center; color: var(--texto-2); font-size: 0.68rem; font-weight: 700; }
.cal-dia {
  display: grid; place-items: center; width: 100%; height: 36px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--texto-2);
  font: inherit; font-size: 0.78rem; font-variant-numeric: tabular-nums;
  /* Dia sem registro: só o contorno (um preenchimento claro se confundiria com "pouco"). */
  box-shadow: inset 0 0 0 1px var(--borda);
}
button.cal-dia { cursor: pointer; }
.cal-fora { box-shadow: none; }
/* Uma cor só, do claro ao forte. Até o nível 3 o número usa a cor de texto (contraste ≥ 4,5:1 em
   todas as cores de trilha, nos dois temas); no nível 4, a cor de texto própria de cada trilha. */
.cal-n1, .cal-n2, .cal-n3, .cal-n4 { box-shadow: none; color: var(--texto); }
.cal-n1 { background: color-mix(in srgb, var(--cor, var(--grafico)) 18%, var(--superficie)); }
.cal-n2 { background: color-mix(in srgb, var(--cor, var(--grafico)) 36%, var(--superficie)); }
.cal-n3 { background: color-mix(in srgb, var(--cor, var(--grafico)) 54%, var(--superficie)); }
.cal-n4 { background: var(--cor, var(--grafico)); color: var(--sobre-cor, var(--sobre-grafico)); }
.cal-dia.cal-hoje { box-shadow: inset 0 0 0 2px var(--texto); }

.dica {
  position: fixed; z-index: 50; padding: 6px 10px; border-radius: 8px;
  background: var(--texto); color: var(--fundo);
  font-size: 0.8rem; font-weight: 600; white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* ------------------------------------------------------------------ avisos, diálogo, sincronização */

.avisos {
  position: fixed; left: 0; right: 0; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 40;
  display: grid; gap: 8px; justify-items: center; padding: 0 16px; pointer-events: none;
}
.aviso {
  max-width: 100%; padding: 10px 16px; border-radius: 12px;
  background: var(--texto); color: var(--fundo); font-size: 0.92rem; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  animation: subir 0.2s ease-out;
}
.aviso--erro { background: var(--perigo); color: var(--sobre-perigo); }
.aviso--saindo { opacity: 0; transition: opacity 0.25s; }
@media (min-width: 900px) { .avisos { left: var(--nav-largura); bottom: 28px; } }

.dialogo {
  width: min(420px, calc(100vw - 32px)); padding: 0; border: 0;
  background: transparent; color: var(--texto);
}
.dialogo::backdrop { background: rgba(10, 12, 18, 0.55); }
.dialogo-cartao {
  padding: 22px; border-radius: 20px; background: var(--superficie);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
.dialogo-titulo { margin: 0 0 8px; font-size: 1.15rem; }
.dialogo-mensagem { margin: 0 0 18px; color: var(--texto-2); }
.dialogo-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.sinc {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; z-index: 30;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 6px 14px;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie);
  box-shadow: var(--sombra); font-size: 0.82rem; font-weight: 600;
  width: max-content; max-width: calc(100vw - 16px); /* em telas estreitas, quebra em duas linhas */
}
/* "Salvando…" só aparece se a gravação demorar. */
.sinc--enviando { animation: aparecer 0.2s 1.2s both; }
.sinc--alerta { border-color: var(--acento); }
.sinc-repetir {
  padding: 4px; border: 0; background: none; color: var(--link);
  font: inherit; font-weight: 700; cursor: pointer;
}

/* ------------------------------------------------------------------ entrada e arranque */

.login {
  display: grid; align-content: center; justify-items: center; gap: 6px;
  min-height: calc(100dvh - 80px); max-width: 320px; margin: 0 auto; text-align: center;
}
.login-logo { margin-bottom: 10px; }
.login-sub { margin: 0; color: var(--texto-2); }
.login-form { display: grid; gap: 14px; width: 100%; margin-top: 22px; text-align: left; }
.login-form input { text-align: center; font-size: 1.3rem; letter-spacing: 0.3em; }

.arranque {
  display: grid; place-content: center; justify-items: center; gap: 14px;
  min-height: 80dvh; color: var(--texto-2); text-align: center;
}
.arranque p { margin: 0; }

@keyframes subir { from { opacity: 0; transform: translateY(8px); } }
@keyframes aparecer { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==================================================================================================
   ACABAMENTO — a camada de estilo por cima da base acima: fundos com profundidade, vidro na
   navegação, o cabeçalho de destaque (herói) na linguagem do logo, e o movimento do app.
   Tudo aqui refina regras que já existem; a estrutura e os nomes das classes são os mesmos.
   ================================================================================================== */

:root {
  --raio: 20px;
  --raio-botao: 14px;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* O azul profundo do logo (herói, cronômetro em andamento, tela de entrada). */
  --heroi-de: #2466b3;
  --heroi-meio: #17386b;
  --heroi-para: #0d1b36;
  --heroi-texto: #ffffff;
  --heroi-texto-2: #e3effb;
  --heroi-destaque: #9ad0f5;

  /* Botão primário e item ativo do menu: marinho com um leve degradê. */
  --ativo-de: #2b3d59;
  --ativo-para: #162033;

  --vidro: rgba(255, 255, 255, 0.78);
  --vidro-borda: rgba(255, 255, 255, 0.75);
  --brilho-1: rgba(58, 143, 217, 0.26);
  --brilho-2: rgba(154, 208, 245, 0.6);
  --brilho-3: rgba(58, 143, 217, 0.12);
  --ponto: rgba(22, 32, 51, 0.09);
  --sombra: 0 1px 2px rgba(22, 32, 51, 0.04), 0 8px 24px rgba(36, 80, 140, 0.08);
  --sombra-alta: 0 2px 4px rgba(22, 32, 51, 0.05), 0 16px 40px rgba(36, 80, 140, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --heroi-de: #2a6fc0;
    --heroi-meio: #173a70;
    --heroi-para: #0b1730;
    --ativo-de: #eaf3fd;
    --ativo-para: #c3dbf3;
    --vidro: rgba(21, 32, 48, 0.74);
    --vidro-borda: rgba(255, 255, 255, 0.08);
    --brilho-1: rgba(58, 143, 217, 0.22);
    --brilho-2: rgba(36, 102, 179, 0.26);
    --brilho-3: rgba(98, 174, 240, 0.08);
    --ponto: rgba(255, 255, 255, 0.05);
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.25);
    --sombra-alta: 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 44px rgba(0, 0, 0, 0.4);
  }
}

/* ------------------------------------------------------------------ fundos */

/* Duas camadas fixas atrás de tudo (não rolam com a página): manchas de luz azul e uma
   malha de pontos que some para baixo. Ficam em pseudo-elementos para não repintar ao rolar. */
body { background: var(--fundo); }
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before {
  z-index: -2;
  background:
    radial-gradient(60% 50% at 8% -8%, var(--brilho-1), transparent 70%),
    radial-gradient(45% 40% at 100% 0%, var(--brilho-2), transparent 70%),
    radial-gradient(50% 45% at 70% 108%, var(--brilho-3), transparent 70%),
    var(--fundo);
}
body::after {
  z-index: -1;
  background-image: radial-gradient(var(--ponto) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 62%);
  mask-image: linear-gradient(180deg, #000, transparent 62%);
}

/* Telas sem navegação (abertura, entrada por PIN, falha ao abrir): o azul profundo do logo. */
body.sem-nav::before {
  background:
    radial-gradient(60% 50% at 10% 0%, rgba(98, 174, 240, 0.38), transparent 70%),
    radial-gradient(50% 45% at 100% 100%, rgba(58, 143, 217, 0.28), transparent 70%),
    linear-gradient(135deg, var(--heroi-de), var(--heroi-meio) 55%, var(--heroi-para));
}
body.sem-nav::after { background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.4px); }

/* ------------------------------------------------------------------ tipografia e cabeçalhos */

h1 { font-weight: 800; letter-spacing: -0.02em; }
.cartao-titulo { font-weight: 700; letter-spacing: -0.01em; }

.secao-titulo { display: flex; align-items: center; gap: 12px; }
.secao-titulo::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--borda-forte), transparent);
}

/* ------------------------------------------------------------------ navegação em vidro */

.nav-item, .nav-icone { transition: background-color 0.25s, color 0.25s, transform 0.2s var(--curva); }
.nav-item:active { transform: scale(0.96); }
.nav-item[aria-current="page"] .nav-icone {
  background: linear-gradient(135deg, var(--ativo-de), var(--ativo-para));
  box-shadow: 0 6px 14px rgba(22, 32, 51, 0.22);
}

@media (max-width: 899px) {
  /* Barra flutuante, solta das bordas. */
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.sem-nav { padding-bottom: 0; }
  .nav {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding-bottom: 0;
    border: 1px solid var(--vidro-borda); border-radius: 24px;
    background: var(--vidro);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: var(--sombra-alta);
  }
  .nav-item { min-height: 62px; }
  .avisos { bottom: calc(98px + env(safe-area-inset-bottom)); }
}

@media (min-width: 900px) {
  .nav {
    background: var(--vidro);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  }
  .nav-logo { gap: 12px; padding-bottom: 26px; font-size: 1.2rem; }
  .nav-item:hover:not([aria-current]) {
    background: color-mix(in srgb, var(--marca) 11%, transparent); color: var(--texto);
  }
  .nav-item[aria-current="page"] {
    background: linear-gradient(135deg, var(--ativo-de), var(--ativo-para));
    box-shadow: 0 8px 18px rgba(22, 32, 51, 0.22);
  }
  .nav-item[aria-current="page"] .nav-icone { background: none; box-shadow: none; }
}

/* ------------------------------------------------------------------ cartões */

.cartao, .trilha, .tile, .lista--cartao {
  border-color: color-mix(in srgb, var(--borda) 75%, transparent);
}
.cartao { padding: 18px; }

.trilha {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 8%, var(--superficie)), var(--superficie) 72px);
  transition: transform 0.3s var(--curva), box-shadow 0.3s;
}
.tile { position: relative; overflow: hidden; padding-top: 18px; transition: transform 0.3s var(--curva), box-shadow 0.3s; }
.tile::before {
  content: ""; position: absolute; left: 14px; top: 0; width: 28px; height: 4px;
  border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--marca), var(--heroi-destaque));
}
.tile-valor { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.tile-valor--menor { font-size: 1rem; font-weight: 700; letter-spacing: 0; }

@media (hover: hover) {
  .trilha:hover, .tile:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
}

.trilha-emoji {
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor, var(--texto-3)) 24%, transparent);
}
.trilha-emoji--pequeno { border-radius: 11px; }

.barra { height: 10px; }
.barra > span {
  background: linear-gradient(90deg, color-mix(in srgb, var(--cor, var(--grafico)) 72%, #ffffff), var(--cor, var(--grafico)));
}

.coach {
  background: linear-gradient(180deg, color-mix(in srgb, var(--marca) 7%, var(--superficie)), var(--superficie) 110px);
}
.recado-icone { box-shadow: inset 0 0 0 1px var(--borda); background: var(--superficie); }

/* ------------------------------------------------------------------ botões e controles */

.botao {
  border-radius: var(--raio-botao);
  transition: transform 0.18s var(--curva), box-shadow 0.25s, background-color 0.2s, border-color 0.2s;
}
.botao:active:not(:disabled) { transform: scale(0.97); }
.botao-primario {
  background: linear-gradient(135deg, var(--ativo-de), var(--ativo-para));
  box-shadow: 0 6px 16px rgba(22, 32, 51, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.botao-secundario { background: color-mix(in srgb, var(--superficie) 88%, transparent); }
@media (hover: hover) {
  .botao-primario:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(22, 32, 51, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
  .botao-secundario:hover:not(:disabled) { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 7%, var(--superficie)); }
}

.botao-icone, .botao-check, .chip > span, .chip-botao, .segmento > span, .segmento-botao, .dia, .cal-dia, .cor > span, .sugestao, .sugestao-marca {
  transition: transform 0.18s var(--curva), background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.botao-icone:active:not(:disabled), .botao-check:active, .chip-botao:active, button.dia:active, button.cal-dia:active { transform: scale(0.9); }
.botao-icone { border-radius: 14px; }
.botao-check--feito { box-shadow: 0 6px 16px color-mix(in srgb, var(--cor) 40%, transparent); }

input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], textarea {
  border-radius: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 22%, transparent);
}

.link { transition: color 0.2s; }

/* ------------------------------------------------------------------ herói (tela Hoje) */

.heroi {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 18px; align-items: center;
  margin: 0 0 16px; padding: 22px 20px;
  border-radius: 26px; color: var(--heroi-texto);
  background: linear-gradient(135deg, var(--heroi-de) 0%, var(--heroi-meio) 55%, var(--heroi-para) 100%);
  box-shadow: 0 18px 44px rgba(18, 48, 96, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
/* Lâminas inclinadas, como os cortes do logo, e um clarão no canto. */
.heroi::before {
  content: ""; position: absolute; z-index: -1; inset: -40% -12% -40% 44%;
  transform: skewX(-14deg);
  background: linear-gradient(90deg,
    transparent 0 8%, rgba(255, 255, 255, 0.07) 8% 30%, transparent 30% 38%,
    rgba(255, 255, 255, 0.045) 38% 72%, transparent 72%);
}
.heroi::after {
  content: ""; position: absolute; z-index: -1; right: -90px; top: -130px; width: 330px; height: 330px;
  border-radius: 50%; background: radial-gradient(circle, rgba(98, 174, 240, 0.5), transparent 65%);
}
.heroi-data { margin: 0 0 4px; color: var(--heroi-texto-2); font-size: 0.9rem; }
.heroi-data::first-letter { text-transform: uppercase; }
.heroi h1 { font-size: clamp(1.7rem, 5.4vw, 2.3rem); }
.heroi-sub { margin: 8px 0 0; color: var(--heroi-texto-2); }
.heroi-selos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.selo {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); color: var(--heroi-texto);
  font-size: 0.82rem; font-weight: 700; text-decoration: none;
  transition: background-color 0.2s, transform 0.18s var(--curva);
}
a.selo:hover { background: rgba(255, 255, 255, 0.22); }
a.selo:active { transform: scale(0.96); }
.heroi-indice { display: flex; align-items: center; gap: 14px; }
.heroi-indice-rotulo {
  color: var(--heroi-texto-2); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1.35;
}
.anel--claro .anel-pista { stroke: rgba(255, 255, 255, 0.17); }
.anel--claro .anel-valor { stroke: var(--heroi-destaque); }
.anel--claro .anel-rotulo { fill: var(--heroi-texto); }
.heroi :focus-visible { outline-color: #ffffff; }
@media (min-width: 700px) {
  .heroi { grid-template-columns: 1fr auto; gap: 28px; padding: 28px 30px; }
  .heroi-indice { flex-direction: column; gap: 8px; text-align: center; }
}

/* ------------------------------------------------------------------ cronômetro em andamento */

.faixa {
  background: linear-gradient(135deg, var(--heroi-de), var(--heroi-para)); color: var(--heroi-texto);
  box-shadow: 0 10px 26px rgba(18, 48, 96, 0.28);
}
.foco--ativo {
  position: relative; isolation: isolate; overflow: hidden; border: 0; color: var(--heroi-texto);
  background: linear-gradient(160deg, var(--heroi-de), var(--heroi-meio) 55%, var(--heroi-para));
  box-shadow: 0 18px 44px rgba(18, 48, 96, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  padding-block: 34px;
}
.foco--ativo::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: 360px; height: 360px;
  margin: -180px 0 0 -180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(98, 174, 240, 0.42), transparent 62%);
  opacity: 0.5;
}
.foco--rodando::before { animation: pulso 2.6s ease-in-out infinite; }
.foco--ativo .foco-estado { color: var(--heroi-texto-2); }
.foco--ativo .relogio--pausado { color: rgba(255, 255, 255, 0.6); }
.foco--ativo .trilha-emoji { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.foco--ativo .botao-primario { background: #ffffff; color: #162033; box-shadow: 0 8px 20px rgba(4, 12, 28, 0.3); }
.foco--ativo .botao-secundario { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.32); color: #ffffff; }
.foco--ativo .botao-texto--perigo { color: #ffc6bd; }
.foco--ativo .alternador input { accent-color: var(--heroi-destaque); }
.foco--ativo :focus-visible { outline-color: #ffffff; }

/* ------------------------------------------------------------------ entrada, abertura e falha */

.login h1, .arranque, .vazio--tela .vazio-titulo { color: var(--heroi-texto); }
.login-sub, .arranque-texto, .vazio--tela .vazio-texto { color: var(--heroi-texto-2); }
.login .marca b { color: var(--heroi-destaque); }
.login h1 { font-size: 2rem; }
.login-logo .logo, .arranque .logo { box-shadow: 0 18px 40px rgba(4, 12, 28, 0.5); }
.login-logo .logo { animation: flutuar 5s ease-in-out infinite; }
.login-form {
  padding: 20px; border-radius: 22px; background: var(--superficie); color: var(--texto);
  box-shadow: 0 24px 60px rgba(4, 12, 28, 0.45);
}
.vazio--tela .botao-primario, .arranque .botao-primario {
  background: #ffffff; color: #162033; box-shadow: 0 8px 20px rgba(4, 12, 28, 0.3);
}
body.sem-nav :focus-visible { outline-color: #ffffff; }
body.sem-nav .login-form :focus-visible { outline-color: var(--link); }

/* ------------------------------------------------------------------ avisos, diálogo, sincronização */

.aviso { border-radius: 14px; }
.dialogo-cartao { border-radius: 24px; }
.dialogo[open] .dialogo-cartao { animation: dialogo-entra 0.28s var(--curva) both; }
.dialogo::backdrop { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialogo[open]::backdrop { animation: aparecer 0.2s ease both; }
.sinc {
  background: var(--vidro);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.sinc--alerta { animation: descer 0.32s var(--curva) both; }
.dica { border-radius: 10px; animation: aparecer 0.15s ease both; }

/* ------------------------------------------------------------------ movimento */

@keyframes entra { from { opacity: 0; transform: translateY(14px); } }
@keyframes crescer-x { from { transform: scaleX(0); } }
@keyframes crescer-y { from { transform: scaleY(0); } }
@keyframes anel-desenhar { from { stroke-dashoffset: var(--volta); } }
@keyframes pop { 0% { transform: scale(0.8); } 55% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes pulso { 0%, 100% { opacity: 0.4; transform: scale(0.94); } 50% { opacity: 0.85; transform: scale(1.08); } }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
@keyframes descer { from { opacity: 0; transform: translate(-50%, -14px); } }

/* Entrada de tela. A classe só existe quando a rota muda (não a cada atualização dos dados). */
.sem-vt .tela--entrando > * { animation: entra 0.42s var(--curva) both; }
.sem-vt .tela--entrando > :nth-child(2) { animation-delay: 40ms; }
.sem-vt .tela--entrando > :nth-child(3) { animation-delay: 80ms; }
.sem-vt .tela--entrando > :nth-child(4) { animation-delay: 120ms; }
.sem-vt .tela--entrando > :nth-child(5) { animation-delay: 160ms; }
.sem-vt .tela--entrando > :nth-child(n + 6) { animation-delay: 200ms; }

/* Os itens de uma grade chegam em sequência. */
.tela--entrando :is(.trilhas, .tiles, .grade-2, .sugestoes) > * { animation: entra 0.46s var(--curva) both; }
.tela--entrando :is(.trilhas, .tiles, .grade-2, .sugestoes) > :nth-child(1) { animation-delay: 70ms; }
.tela--entrando :is(.trilhas, .tiles, .grade-2, .sugestoes) > :nth-child(2) { animation-delay: 120ms; }
.tela--entrando :is(.trilhas, .tiles, .grade-2, .sugestoes) > :nth-child(3) { animation-delay: 170ms; }
.tela--entrando :is(.trilhas, .tiles, .grade-2, .sugestoes) > :nth-child(4) { animation-delay: 220ms; }
.tela--entrando :is(.trilhas, .tiles, .grade-2, .sugestoes) > :nth-child(n + 5) { animation-delay: 270ms; }

/* Barras enchem, colunas sobem e o anel se desenha. */
.tela--entrando .barra > span { transform-origin: left; animation: crescer-x 0.8s var(--curva) 0.25s both; }
.tela--entrando .hbarra-valor { transform-origin: left; animation: crescer-x 0.8s var(--curva) 0.2s both; }
.tela--entrando .coluna-barra { transform-origin: bottom; animation: crescer-y 0.6s var(--curva) both; }
.tela--entrando .coluna:nth-child(3n + 1) .coluna-barra { animation-delay: 60ms; }
.tela--entrando .coluna:nth-child(3n + 2) .coluna-barra { animation-delay: 120ms; }
.tela--entrando .coluna:nth-child(3n) .coluna-barra { animation-delay: 180ms; }
.tela--entrando .anel-valor { animation: anel-desenhar 1s var(--curva) 0.15s both; }

/* O "feito" recém-marcado dá um pulo. */
.pulsando { animation: pop 0.38s var(--curva); }

/* Troca de tela com a View Transitions API (onde existe): o menu fica parado e só o conteúdo se move.
   html[data-transicao] diz o sentido: "avancar" (entra pela direita), "voltar" (pela esquerda), "trocar" (sobe). */
.nav { view-transition-name: nav; }
.conteudo { view-transition-name: conteudo; }
::view-transition { pointer-events: none; }
::view-transition-old(conteudo) { animation: 0.16s ease-in both vt-sai; }
::view-transition-new(conteudo) { animation: 0.34s var(--curva) both vt-entra; }
html[data-transicao="avancar"]::view-transition-old(conteudo) { animation-name: vt-sai-esquerda; }
html[data-transicao="avancar"]::view-transition-new(conteudo) { animation-name: vt-entra-direita; }
html[data-transicao="voltar"]::view-transition-old(conteudo) { animation-name: vt-sai-direita; }
html[data-transicao="voltar"]::view-transition-new(conteudo) { animation-name: vt-entra-esquerda; }
@keyframes vt-sai { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(16px); } }
@keyframes vt-sai-esquerda { to { opacity: 0; transform: translateX(-28px); } }
@keyframes vt-entra-direita { from { opacity: 0; transform: translateX(40px); } }
@keyframes vt-sai-direita { to { opacity: 0; transform: translateX(28px); } }
@keyframes vt-entra-esquerda { from { opacity: 0; transform: translateX(-40px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}