/* ══════════════════════════════════════════════════════════════════
   O CALENDÁRIO

   A DECISÃO VISUAL QUE ATRAVESSA O ARQUIVO INTEIRO:

       FATO     — sólido, opaco, sem tracejado. Aconteceu.
       PREVISÃO — vazada, tracejada, ~70%. Ainda pode ser qualquer coisa.

   Os dias futuros não existem no banco; o servidor projeta a regra e
   marca cada ocorrência com `real`. Se as duas naturezas tiverem a mesma
   aparência, a tela mostra como consumado um dia que ainda nem chegou —
   e essa é a pior mentira que um calendário consegue contar.

   Não é preferência de estilo. É a integridade do que a tela afirma.
   ══════════════════════════════════════════════════════════════════ */

/* ── O TOPO ────────────────────────────────────────────────────── */
.cal-topo {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1rem;
}
.cal-mes { display: flex; align-items: baseline; gap: .5rem; margin-right: auto; }
.cal-mes h2 {
  margin: 0; font-family: var(--font-section);
  font-size: 1.25rem; font-weight: 700; color: var(--text-primary);
}
.cal-mes span { font-size: .9rem; color: var(--text-muted); }

.cal-nav, .cal-hoje {
  display: grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 .7rem;
  border-radius: 9px; cursor: pointer;
  font-family: var(--font-section); font-size: .8rem; font-weight: 600;
  color: var(--text-secondary);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  transition: border-color .18s, background .18s, color .18s;
}
.cal-nav { font-size: 1.15rem; line-height: 1; }
.cal-nav:hover, .cal-hoje:hover {
  color: var(--text-primary);
  border-color: rgba(124,58,237,.5);
  background: rgba(124,58,237,.1);
}

/* ── A GRADE ───────────────────────────────────────────────────── */
.cal-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;

  /* `start`, e NÃO o `stretch` padrão. Sem isto, abrir um dia estica
     TODOS os seis vizinhos da mesma linha junto — cada um vira uma
     moldura de 268px com três pastilhas no topo e um vazio enorme
     embaixo. Visto no navegador: parecia defeito, não intenção.

     Com `start`, cada célula fica na altura do próprio conteúdo e só a
     aberta cresce — ela se destaca da linha como um cartão que veio
     para a frente, que é o efeito que se queria. */
  align-items: start;
}
.cal-cab {
  padding: .3rem 0 .5rem;
  text-align: center;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
}

.cal-dia {
  display: flex; flex-direction: column;
  min-height: 108px;
  padding: .4rem .45rem .3rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.015);
  overflow: hidden;
  transition: border-color .18s, background .18s, transform .12s;
}
.cal-dia:not(.vazio) { cursor: pointer; }
.cal-dia:not(.vazio):hover {
  border-color: rgba(124,58,237,.4);
  background: rgba(124,58,237,.05);
  transform: translateY(-1px);
}
.cal-dia:focus-visible {
  outline: none;
  border-color: rgba(168,85,247,.7);
  box-shadow: 0 0 0 3px rgba(124,58,237,.18);
}
/* Dia de outro mês continua clicável, mas recua — a grade precisa das
   seis semanas para não mudar de altura ao trocar de mês. */
.cal-dia.fora { opacity: .35; }

/* ── O NÚMERO ──────────────────────────────────────────────────────
   Ele é a âncora da célula: é por ele que o olho encontra o dia antes
   de ler qualquer título. Pequeno e cinza, virava ruído — a pessoa
   varria a grade procurando a data.

   MARFIM, e não branco puro. `#fff` sobre fundo quase preto vibra na
   borda das letras e cansa numa grade de 42 repetições; o marfim tem a
   mesma presença sem o zumbido. A sombra dupla (uma escura colada, uma
   clara difusa) é o que o solta do fundo sem virar neon. */
.cal-num {
  font-family: var(--font-section);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: #f2ece0;
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 14px rgba(242,236,224,.18);
  margin-bottom: .4rem;
  transition: font-size .26s cubic-bezier(.22,1,.36,1),
              color .26s, opacity .26s, margin .26s;
}
.cal-dia.fora .cal-num { color: #8b857a; text-shadow: none; }

.cal-dia.hoje { border-color: rgba(168,85,247,.55); background: rgba(124,58,237,.08); }
.cal-dia.hoje .cal-num {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 18px rgba(168,85,247,.85);
}
.cal-dia.hoje .cal-num::after {
  content: 'hoje';
  margin-left: .4rem;
  font-size: .5rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple-glow, #a855f7);
  vertical-align: .32em;
  text-shadow: none;
}

/* ── A CÉLULA QUE ABRE ─────────────────────────────────────────────
   Clicar abre a própria célula em vez de jogar o conteúdo num painel
   longe dela. O número RECUA — ele já cumpriu o papel de âncora, e
   dentro do dia aberto quem importa são as missões.

   A linha inteira da grade cresce junto, porque itens de grade se
   esticam. Isso é proposital: vira um acordeão de semana, e o
   movimento é coerente em vez de um retângulo saltando sobre os
   vizinhos. */
.cal-dia.aberto {
  min-height: 268px;
  border-color: rgba(168,85,247,.5);
  background: rgba(124,58,237,.07);
  box-shadow: 0 0 0 1px rgba(168,85,247,.18), 0 8px 26px rgba(0,0,0,.45);
  cursor: default;
}
.cal-dia.aberto .cal-num {
  font-size: .78rem;
  opacity: .75;
  margin-bottom: .3rem;
}
.cal-dia.aberto:hover { transform: none; }

/* A gaveta: `grid-template-rows` de 0fr para 1fr é o truque que permite
   animar altura sem saber o tamanho do conteúdo de antemão. */
.cal-gaveta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.22,1,.36,1);
  min-height: 0;
}
.cal-dia.aberto .cal-gaveta { grid-template-rows: 1fr; }
.cal-gaveta > div { overflow: hidden; min-height: 0; }

.cal-rolo {
  display: grid; gap: 3px;
  max-height: 186px;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding-right: 2px;
}
.cal-rolo::-webkit-scrollbar { width: 4px; }
.cal-rolo::-webkit-scrollbar-track { background: rgba(0,0,0,.25); border-radius: 9px; }
.cal-rolo::-webkit-scrollbar-thumb { background: rgba(168,85,247,.5); border-radius: 9px; }

/* ── AS SETAS ──────────────────────────────────────────────────────
   Só aparecem quando há mais do que cabe. Uma seta permanentemente
   desenhada sobre uma lista que já cabe inteira é um convite a um
   clique que não faz nada. */
.cal-setas {
  display: none;
  justify-content: space-between;
  gap: .3rem;
  margin-top: .25rem;
}
.cal-dia.aberto.transborda .cal-setas { display: flex; }
.cal-seta {
  flex: 1 1 auto;
  height: 18px;
  display: grid; place-items: center;
  border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(168,85,247,.22);
  background: rgba(124,58,237,.1);
  color: var(--purple-glow, #a855f7);
  font-size: .62rem; line-height: 1;
  transition: background .16s, border-color .16s, opacity .16s;
}
.cal-seta:hover { background: rgba(124,58,237,.22); border-color: rgba(168,85,247,.5); }
.cal-seta:disabled { opacity: .25; cursor: default; }

.cal-conta {
  font-size: .56rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
  align-self: center; padding: 0 .3rem; white-space: nowrap;
}

/* Dentro da gaveta as pastilhas viram linhas clicáveis. */
.cal-rolo .cal-p { cursor: pointer; }
.cal-rolo .cal-p:hover { filter: brightness(1.35); }

/* ── AS PASTILHAS ──────────────────────────────────────────────── */
.cal-pastilhas { display: grid; gap: 3px; margin-bottom: auto; }

/* O resumo (as 3 primeiras + "+N") dá lugar à lista completa quando o
   dia abre. Some junto com a própria altura para a gaveta não empurrar
   a célula para baixo em vez de ocupar o espaço dela. */
.cal-resumo {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .26s cubic-bezier(.22,1,.36,1), opacity .18s;
  min-height: 0;
  margin-bottom: auto;
}
.cal-resumo > div { min-height: 0; }
.cal-dia.aberto .cal-resumo {
  grid-template-rows: 0fr;
  opacity: 0;
  margin-bottom: 0;
}
.cal-dia.aberto .cal-pastilhas { overflow: hidden; }

.cal-p {
  display: block;
  padding: .16rem .34rem;
  border-radius: 5px;
  font-size: .62rem; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid transparent;
  color: var(--text-secondary);
  background: rgba(255,255,255,.05);
}
.cal-p b { font-weight: 700; opacity: .85; margin-right: .15rem; }

/* A ORIGEM dá a cor: rotina roxa, portão âmbar, missão geral ciano.
   Três famílias bastam — mais cores viram ruído numa célula de 108px. */
.cal-p--rotina  { color:#c4b5fd; background:rgba(124,58,237,.16); border-color:rgba(124,58,237,.26); }
.cal-p--dungeon { color:#fcd34d; background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.28); }
.cal-p--tarefa  { color:#7dd3fc; background:rgba(56,189,248,.13); border-color:rgba(56,189,248,.26); }

/* A PREVISÃO. Fundo vazado e borda tracejada — o olho separa antes de
   ler. Um dia futuro cheio de pastilhas sólidas pareceria um dia já
   vivido. */
.cal-p.prev {
  background: transparent;
  border-style: dashed;
  opacity: .72;
}

/* O FATO consumado. Verde e vermelho só aqui, nunca no futuro: eles
   dizem resultado, e resultado é coisa do passado. */
.cal-p.ok {
  color:#6ee7b7; background:rgba(16,185,129,.14); border-color:rgba(16,185,129,.3);
}
.cal-p.ko {
  color:#fca5a5; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.3);
  text-decoration: line-through; text-decoration-color: rgba(239,68,68,.5);
}

.cal-mais {
  font-size: .58rem; color: var(--text-muted); padding-left: .34rem;
}

/* ── A DENSIDADE ───────────────────────────────────────────────────
   Uma barra de 3px no rodapé da célula. É ela que responde "que semana
   é essa?" antes de o olho ler um único título. */
.cal-densidade {
  display: flex; gap: 1px;
  height: 3px; margin-top: .3rem;
  border-radius: 99px; overflow: hidden;
}
.cal-densidade i { display: block; height: 100%; background: rgba(255,255,255,.14); }
.cal-densidade i.ok { background: #10b981; }
.cal-densidade i.ko { background: #ef4444; }

/* ── A LEGENDA ─────────────────────────────────────────────────── */
.cal-legenda {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  margin-top: 1rem; padding-top: .8rem;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: .68rem; color: var(--text-muted);
}
.cal-legenda span { display: inline-flex; align-items: center; gap: .35rem; }
.cal-am {
  width: 12px; height: 9px; border-radius: 3px;
  border: 1px solid transparent; flex: none;
}
.cal-am--rotina  { background:rgba(124,58,237,.35); border-color:rgba(124,58,237,.5); }
.cal-am--dungeon { background:rgba(245,158,11,.3);  border-color:rgba(245,158,11,.5); }
.cal-am--tarefa  { background:rgba(56,189,248,.3);  border-color:rgba(56,189,248,.5); }
.cal-am.prev { background: transparent; border: 1px dashed rgba(255,255,255,.4); }
.cal-sep { width: 1px; height: 14px; background: rgba(255,255,255,.1); }

.cal-vazio { color: var(--text-muted); font-size: .85rem; margin: 0; }

/* ── O PAINEL DO DIA ───────────────────────────────────────────────
   Sem botão de ação — o calendário é um mapa, e mapa não dirige. Cada
   item leva para a tela dona da missão. */
.cal-painel {
  display: none;
  margin-top: 1.25rem;
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  border: 1px solid rgba(124,58,237,.22);
  background:
    linear-gradient(140deg, rgba(124,58,237,.06), transparent 55%),
    var(--bg-card, rgba(13,13,26,.6));
}
.cal-painel.on { display: block; animation: cal-abre .22s ease-out; }
@keyframes cal-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.cal-painel-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: .9rem;
}
.cal-painel-cab h3 {
  margin: 0; font-family: var(--font-section);
  font-size: 1rem; color: var(--text-primary);
}
.cal-painel-cab p { margin: .15rem 0 0; font-size: .75rem; color: var(--text-muted); }
.cal-fechar {
  border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; padding: .2rem .4rem;
  border-radius: 6px;
}
.cal-fechar:hover { color: var(--text-primary); background: rgba(255,255,255,.06); }

.cal-itens { display: grid; gap: .4rem; }
.cal-item {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; text-align: left;
  padding: .5rem .7rem;
  border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
  color: var(--text-secondary);
  font-size: .84rem;
  transition: border-color .18s, background .18s, transform .12s;
}
.cal-item:hover {
  border-color: rgba(124,58,237,.4);
  background: rgba(124,58,237,.06);
  transform: translateX(2px);
}
/* Faixa na borda esquerda: mesma cor da pastilha, para o olho ligar a
   linha do painel ao quadradinho que ele acabou de clicar. */
.cal-item--rotina  { border-left: 3px solid rgba(124,58,237,.6); }
.cal-item--dungeon { border-left: 3px solid rgba(245,158,11,.6); }
.cal-item--tarefa  { border-left: 3px solid rgba(56,189,248,.6); }

.cal-it-hora {
  flex: none; min-width: 5.2rem;
  font-family: var(--font-section); font-size: .72rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.cal-it-hora.vazia { color: var(--text-muted); font-weight: 400; font-style: italic; }
.cal-it-txt { flex: 1 1 auto; min-width: 0; }
.cal-it-rank {
  flex: none; font-family: var(--font-section);
  font-size: .66rem; font-weight: 800; color: var(--gold-xp, #f59e0b);
}
.cal-it-selo {
  flex: none;
  font-size: .56rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .12rem .4rem; border-radius: 5px;
  color: var(--text-muted); background: rgba(255,255,255,.05);
}
.cal-it-selo.concluida { color:#6ee7b7; background:rgba(16,185,129,.14); }
.cal-it-selo.fracassada, .cal-it-selo.fracassada_fatal {
  color:#fca5a5; background:rgba(239,68,68,.12);
}
.cal-it-selo.prev {
  color: var(--text-muted); background: transparent;
  border: 1px dashed rgba(255,255,255,.2);
}

/* ── ESTREITO ──────────────────────────────────────────────────────
   Abaixo de 760px a grade de 7 colunas espreme cada dia em ~90px, e as
   pastilhas viram tarjas ilegíveis. Some com o texto e fica só o ponto
   colorido: a célula passa a dizer QUANTO e DE QUE TIPO, e o painel do
   dia diz o resto. */
/* ══════════════════════════════════════════════════════════════════
   A AGENDA — a tela do celular

   A primeira versão espremia a grade de sete colunas e trocava as
   pastilhas por pontinhos. Era inútil, e o Arquiteto disse por quê: os
   pontos mostram que EXISTE algo, nunca O QUÊ. Com 12 ocorrências por
   dia, os 42 quadradinhos ficavam idênticos — papel de parede, não
   calendário.

   Não há truque de layout que faça sete colunas de texto caberem em
   380px. O que cabe é UMA coluna, e uma coluna pede agenda.
   ══════════════════════════════════════════════════════════════════ */

/* ── A FAIXA ───────────────────────────────────────────────────────
   Devolve o panorama que a lista sozinha perde: dá para ver que a
   semana que vem é pesada sem rolar a agenda inteira. */
/* ══════════════════════════════════════════════════════════════════
   POR QUE A BARRA NÃO GRUDAVA — e a regra de CSS que explica

   A primeira versão tinha `position: sticky` e simplesmente não
   grudava. A causa não estava aqui — estava em TRÊS ancestrais no
   `pages.css`, todos com `overflow-x: hidden`:

       #main-app          (linha ~812)
       #content-area      (linha ~1132)
       .page  @media 900  (linha ~1359)

   Corrigi só o terceiro na primeira tentativa. Resolvia um terço do
   caminho, e o sintoma continuava idêntico — porque bastava UM deles
   de pé para prender o sticky.

   Existe uma regra do CSS que quase ninguém conhece: quando um eixo
   tem `overflow` diferente de `visible` e o outro está em `visible`,
   o navegador PROMOVE o segundo para `auto`. Ou seja, `overflow-x:
   hidden` faz o `overflow-y` virar `auto` sozinho — e o elemento vira
   um contêiner de rolagem.

   `position: sticky` gruda no contêiner de rolagem MAIS PRÓXIMO. Com
   a `.page` virando um deles, a barra passou a grudar nela em vez de
   na tela; e como a `.page` tem a altura do próprio conteúdo, ela
   nunca rola — a barra fica parada, parecendo que o sticky foi
   ignorado.

   `overflow-x: clip` corta igual e NÃO cria contêiner de rolagem.
   Medido no navegador do Arquiteto:

       overflow-x: hidden → overflow-y computado "auto"    → não gruda
       overflow-x: clip   → overflow-y computado "visible" → gruda

   A correção ficou no `pages.css`, nos três, e não aqui. Na primeira
   tentativa eu tinha escopado só o calendário para não mexer em telas
   que não conseguiria reconferir — mas o defeito não era do calendário:
   era de três contêineres de rolagem empilhados que nunca rolam, e
   qualquer coisa `sticky` em qualquer página do app cairia no mesmo
   buraco. `clip` corta exatamente como `hidden` cortava, então nenhuma
   outra tela muda de aparência: a única diferença é que os três param
   de se anunciar como rolagem.
   ══════════════════════════════════════════════════════════════════ */
/* ── UM NÚMERO SÓ PARA O TOPO ──────────────────────────────────────
   A barra gruda; o cabeçalho do dia gruda LOGO ABAIXO dela; e rolar
   até um dia tem de parar abaixo dos dois. São três medidas que
   precisam concordar — escritas à mão, uma delas fica para trás na
   primeira vez que a barra mudar de altura, e o resultado é conteúdo
   escondido atrás de um cabeçalho.

   No estreito há ainda o botão ☰, que é `position: fixed` no canto
   superior esquerdo (design-system.css). A barra rolando até `top: 0`
   passaria por baixo dele e a seta "‹" ficaria intocável. Os 56px
   descem a barra para logo abaixo do botão. */
#page-calendario {
  --cal-topo: 0px;
  --cal-barra-h: 62px;
}
@media (max-width: 900px) {
  #page-calendario { --cal-topo: 56px; }
}

/* A BARRA GRUDA NO TOPO. Ela é o controle de navegação da tela; rolar
   a agenda e perdê-la de vista significa ter de voltar ao topo só para
   trocar de dia. Fixa, ela vira o leme — e é isso que transforma a
   faixa de enfeite em ferramenta.

   `top: 0` com o fundo opaco: sem a cor, os itens da agenda passariam
   por trás dela e se veria texto sobreposto a texto. */
.cal-barra {
  position: sticky; top: var(--cal-topo, 0px); z-index: 6;
  display: flex; align-items: center; gap: 4px;
  margin: 0 -.2rem .6rem;
  padding: .25rem .2rem .4rem;
  background: rgba(8,8,14,.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.cal-faixa {
  display: flex; gap: 5px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto;
  padding: .2rem .1rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* A barra de rolagem some: quem navega são as setas e o dedo, e 3px
     de trilho debaixo dos dias só rouba altura da barra fixa. */
  scrollbar-width: none;
}
.cal-faixa::-webkit-scrollbar { display: none; }

/* ── AS SETAS ──────────────────────────────────────────────────────
   Elas movem a SELEÇÃO, não a rolagem da faixa. Rolar deixaria o dia
   escolhido para trás e a agenda parada — dois controles discordando
   um do outro na mesma tela. */
.cal-fseta {
  flex: 0 0 auto;
  width: 28px; height: 46px;
  display: grid; place-items: center;
  border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(168,85,247,.22);
  background: rgba(124,58,237,.1);
  color: var(--purple-glow, #a855f7);
  font-size: 1.1rem; line-height: 1;
  transition: background .16s, border-color .16s;
}
.cal-fseta:active { background: rgba(124,58,237,.3); }

.cal-fd {
  flex: 0 0 auto;
  width: 44px;
  scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: .35rem .2rem .3rem;
  border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  transition: border-color .18s, background .18s, transform .12s;
}
.cal-fd-sem {
  font-size: .52rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}
.cal-fd-num {
  font-family: var(--font-section);
  font-size: 1rem; font-weight: 700; line-height: 1;
  color: #f2ece0;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.cal-fd .cal-densidade { width: 100%; margin-top: .2rem; }
.cal-fd-nada {
  display: block; width: 100%; height: 3px; margin-top: .2rem;
  border-radius: 99px; background: rgba(255,255,255,.05);
}
.cal-fd.vazio { opacity: .45; }
.cal-fd.futuro .cal-fd-num { opacity: .8; }
.cal-fd.hoje {
  border-color: rgba(168,85,247,.6);
  background: rgba(124,58,237,.14);
}
.cal-fd.hoje .cal-fd-num { color: #fff; text-shadow: 0 0 14px rgba(168,85,247,.9); }
/* O DIA SELECIONADO é o mais forte da faixa — inclusive sobre o "hoje".
   Quando o hunter escolhe olhar o dia 24, é o 24 que ele está lendo, e
   a faixa tem de concordar com a agenda em vez de insistir no hoje. */
.cal-fd.sel {
  border-color: rgba(168,85,247,.9);
  background: rgba(124,58,237,.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(124,58,237,.3);
}
.cal-fd.sel .cal-fd-num { color: #fff; }
.cal-fd.sel .cal-fd-sem { color: var(--purple-glow, #a855f7); }

/* E o "hoje" continua marcado mesmo sem estar selecionado: é a âncora
   do mês, e perdê-la de vista ao navegar é perder a referência. */
.cal-fd.hoje::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--purple-glow, #a855f7);
  box-shadow: 0 0 6px rgba(168,85,247,.9);
}
.cal-fd { position: relative; }

/* ── A LISTA ───────────────────────────────────────────────────── */
.cal-agenda { display: grid; gap: .5rem; }

.cal-ag-dia {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.015);
  /* `overflow: hidden` MATARIA o sticky do cabeçalho — um ancestral com
     overflow vira o contêiner de rolagem, e o filho gruda nele em vez
     de na tela. O recorte dos cantos vem do `clip-path`, que não cria
     contexto de rolagem. */
  clip-path: inset(0 round 12px);
  /* Rolar até um dia tem de parar ABAIXO da barra fixa, senão o
     cabeçalho do dia fica escondido atrás dela justamente quando se
     acabou de pedir para vê-lo. */
  scroll-margin-top: calc(var(--cal-topo, 0px) + var(--cal-barra-h, 62px) + 8px);
}
.cal-ag-dia.hoje {
  border-color: rgba(168,85,247,.5);
  background: rgba(124,58,237,.07);
}
.cal-ag-dia.pisca { animation: cal-pisca .9s ease-out; }
@keyframes cal-pisca {
  0%   { box-shadow: 0 0 0 0 rgba(168,85,247,.5); }
  100% { box-shadow: 0 0 0 14px rgba(168,85,247,0); }
}

/* O CABEÇALHO GRUDA NO TOPO. Rolando uma lista de trinta dias, saber
   QUE DIA se está lendo é a única coisa que não pode sumir. */
/* GRUDA ABAIXO DA BARRA, não no topo da tela. Com `top: 0` os dois
   pregariam no mesmo lugar e o cabeçalho do dia passaria por baixo da
   faixa — que é opaca, então ele simplesmente sumiria. 62px é a altura
   da barra; os dois números vivem juntos porque um depende do outro. */
.cal-ag-cab {
  position: sticky;
  top: calc(var(--cal-topo, 0px) + var(--cal-barra-h, 62px));
  z-index: 2;
  display: flex; align-items: baseline; gap: .5rem;
  padding: .5rem .7rem;
  background: rgba(10,10,18,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cal-ag-num {
  font-family: var(--font-section);
  font-size: 1.3rem; font-weight: 700; line-height: 1;
  color: #f2ece0;
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 14px rgba(242,236,224,.16);
}
.cal-ag-dia.hoje .cal-ag-num {
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 18px rgba(168,85,247,.85);
}
.cal-ag-sem { font-size: .76rem; color: var(--text-muted); }
.cal-ag-selo {
  font-size: .52rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple-glow, #a855f7);
}
.cal-ag-conta {
  margin-left: auto;
  font-size: .62rem; font-weight: 700;
  color: var(--text-muted);
  padding: .1rem .4rem; border-radius: 99px;
  background: rgba(255,255,255,.06);
}

.cal-ag-itens { display: grid; }

/* O ITEM TEM ALTURA DE DEDO. 44px é o mínimo confortável para toque —
   e, mais importante, o título cabe inteiro em vez de virar reticência. */
.cal-ag-item {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; min-height: 44px;
  padding: .5rem .7rem;
  text-align: left; cursor: pointer;
  border: none; border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(255,255,255,.04);
  background: transparent;
  color: var(--text-secondary);
  font-size: .82rem; line-height: 1.35;
}
.cal-ag-item:last-child { border-bottom: none; }
.cal-ag-item:active { background: rgba(124,58,237,.12); }

.cal-ag-item--rotina  { border-left-color: rgba(124,58,237,.7); }
.cal-ag-item--dungeon { border-left-color: rgba(245,158,11,.7); }
.cal-ag-item--tarefa  { border-left-color: rgba(56,189,248,.7); }

/* PREVISÃO continua se declarando — a regra vale igual aqui. A borda
   tracejada à esquerda é o equivalente da pastilha vazada da grade. */
.cal-ag-item.prev {
  border-left-style: dashed;
  opacity: .78;
}
.cal-ag-item.ok .cal-ag-txt { color: #6ee7b7; }
.cal-ag-item.ko .cal-ag-txt {
  color: #fca5a5;
  text-decoration: line-through; text-decoration-color: rgba(239,68,68,.5);
}

.cal-ag-hora {
  flex: none; min-width: 4.6rem;
  font-family: var(--font-section);
  font-size: .7rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.cal-ag-item.prev .cal-ag-hora { color: var(--text-secondary); }
.cal-ag-txt { flex: 1 1 auto; min-width: 0; }
.cal-ag-rank {
  flex: none; font-family: var(--font-section);
  font-size: .68rem; font-weight: 800; color: var(--gold-xp, #f59e0b);
}

/* Os dias sem nada viram UMA linha em vez de trinta seções mortas que
   fazem a rolagem parecer o dobro do tamanho. */
.cal-ag-pulo {
  padding: .4rem .7rem;
  font-size: .68rem; letter-spacing: .06em;
  color: var(--text-muted);
  text-align: center;
  border-radius: 8px;
  border: 1px dashed rgba(255,255,255,.08);
}

@media (max-width: 760px) {
  /* A grade não é encolhida — ela simplesmente não é montada. */
  .cal-topo { flex-wrap: wrap; }
  .cal-mes h2 { font-size: 1.1rem; }
  .cal-painel { margin-top: .8rem; padding: .9rem 1rem; }
  .cal-it-hora { min-width: 4rem; }
}

/* Da tablet para cima a agenda some e a grade manda. */
@media (min-width: 761px) {
  .cal-barra, .cal-faixa, .cal-agenda { display: none; }
}