/* ============================================================
   missao-card.css — Cartão de Missão (Sistema)
   Componente de produção: classes + tokens, zero inline.
   Estados: PENDENTE · ATIVA · PAUSADA · CONCLUIDA · FRACASSADA · CANCELADA
   ============================================================ */

.mc {
  --mc-cor: var(--purple-glow);          /* trocada por JS conforme o rank */
  --mc-cor-suave: rgba(168,85,247,.14);
  position: relative;
  display: flex;
  gap: 1.1rem;
  padding: 1rem 1.2rem;
  margin-bottom: .7rem;
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--mc-cor-suave), transparent 55%),
    linear-gradient(145deg, #0b0916, #06060d);
  border: 1px solid rgba(148,163,184,.12);
  border-left: 3px solid var(--mc-cor);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.mc:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--mc-cor) 45%, transparent);
  box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 20px var(--mc-cor-suave);
}

/* Fio de energia no topo (só quando em curso) */
.mc-fio {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--mc-cor), #fff, var(--mc-cor), transparent);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity .3s;
}
.mc.st-ativa .mc-fio { opacity: 1; animation: mc-fio 2.4s linear infinite; }
@keyframes mc-fio { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ══════════════════════════════════════════════════════════
   CORRENTE DE ENERGIA — a missão EM CURSO se anuncia

   O fio de 2px no topo era o único sinal de "acontecendo agora", e a 2px de
   altura ele some numa lista. Faltava algo que se veja de relance, sem ler.

   POR QUE NÃO É VERDE: verde é reservado a missão cumprida (e vermelho, a
   fracassada). Uma missão em curso pintada de verde seria lida como já
   concluída — e lista se lê de relance, não com atenção. A corrente usa a
   COR DA PRÓPRIA MISSÃO, então além de dizer "está rodando" ela ainda diz
   de que prioridade é: crítica pulsa magenta, tranquila pulsa azul.

   Uma trama de chevrons repetida, deslizando pelo background-position. Um
   elemento, uma animação — duas animações no mesmo elemento se cancelam, e
   isso já custou uma tarde neste projeto.
   ══════════════════════════════════════════════════════════ */
.mc-corrente {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  /* Chevrons ">>>>" formados por duas faixas diagonais espelhadas. */
  background-image:
    repeating-linear-gradient(115deg,
      transparent 0 22px,
      color-mix(in srgb, var(--mc-cor) 22%, transparent) 22px 24px,
      transparent 24px 46px),
    repeating-linear-gradient(65deg,
      transparent 0 22px,
      color-mix(in srgb, var(--mc-cor) 22%, transparent) 22px 24px,
      transparent 24px 46px);
  background-size: 92px 100%;
  /* Esmaece nas bordas para não virar papel de parede: a energia atravessa
     o cartão, não o cobre. O texto precisa continuar sendo o assunto. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  animation: mc-corrente 2.8s linear infinite;
}
@keyframes mc-corrente {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 92px 0, -92px 0; }
}
/* O conteúdo sobe acima da corrente. Sem isto ela passaria por cima do
   texto — e a regra `overflow:hidden` do cartão não ajuda nisso. */
.mc-sigilo, .mc-corpo, .mc-acoes, .mc-recompensa, .mc-barra { position: relative; z-index: 1; }
/* No cartão compacto a faixa é baixa: a corrente fica mais discreta ainda. */
.mc-compacto .mc-corrente { opacity: .34; background-size: 74px 100%; }

/* ══════════════════════════════════════════════════════════
   PROTOCOLO — a missão passiva tem cara própria

   Ela precisa ser reconhecível ANTES da leitura, porque as regras dela são
   invertidas: quem confunde um protocolo com uma missão comum fica esperando
   um botão Concluir que nunca vem.

   A cor de prioridade continua mandando na borda esquerda e no sigilo — a
   urgência não deixa de existir por ser protocolo. O índigo entra como
   SEGUNDA camada: trama diagonal no fundo, borda superior tracejada e um
   halo no sigilo. Duas linguagens sobrepostas, cada uma dizendo uma coisa.
   ══════════════════════════════════════════════════════════ */
/* A COR DO PROTOCOLO É A COR DO CARTÃO.

   Aqui havia um índigo fixo (#6366f1) para TODO protocolo. A ideia
   era ter duas linguagens sobrepostas — prioridade na borda
   esquerda, índigo dizendo "isto é passivo".

   Não se sustentou: um protocolo CRÍTICO ficava índigo, e a cor
   parava de contar a urgência justamente onde ela mais importa. A
   marca de "passivo" não precisa da cor — ela está no TRACEJADO, na
   trama de fundo e na etiqueta. O tracejado sozinho já diz vigília;
   a cor pode voltar a dizer urgência.

   Uma linha resolve tudo: `--mc-vigilia` deixa de ser um valor e
   passa a apontar para `--mc-cor`. Todo o resto do arquivo já a
   usava, então dourado na Alta e vermelho na Crítica chegam de
   graça na moldura, na barra, no halo e no rótulo. */
.mc-passiva {
  --mc-vigilia: var(--mc-cor);
  border-top-color: color-mix(in srgb, var(--mc-vigilia) 42%, transparent);
  border-right-color: color-mix(in srgb, var(--mc-vigilia) 22%, transparent);
  border-bottom-color: color-mix(in srgb, var(--mc-vigilia) 22%, transparent);
  background:
    /* trama de protocolo: linhas finas, densas, estáticas — vigília não se
       move, ela permanece. É o oposto visual da corrente de energia. */
    repeating-linear-gradient(135deg,
      transparent 0 9px,
      color-mix(in srgb, var(--mc-cor) 7%, transparent) 9px 10px),
    radial-gradient(130% 150% at 100% 0%,
      color-mix(in srgb, var(--mc-cor) 15%, transparent), transparent 58%),
    radial-gradient(120% 140% at 0% 0%, var(--mc-cor-suave), transparent 55%),
    linear-gradient(145deg, #0b0916, #06060d);
}
.mc-passiva:hover {
  border-color: color-mix(in srgb, var(--mc-vigilia) 55%, transparent);
  border-left-color: var(--mc-cor);
  box-shadow: 0 8px 26px rgba(0,0,0,.5),
              0 0 24px color-mix(in srgb, var(--mc-cor) 28%, transparent);
}

/* ── A VIGÍLIA CERCA, NÃO ENCIMA ───────────────────────────

   Aqui havia uma faixa tracejada de 2px no TOPO do cartão. Lia como
   cabeçalho aceso, não como vigília — e a diferença importa: um
   protocolo não acontece numa borda, ele envolve a missão inteira.

   Agora o tracejado percorre o PERÍMETRO, em SVG. E devagar: 14
   segundos para dar uma volta, contra os 3,4s da faixa antiga. Uma
   vigília que corre é uma execução; o que se quer é presença.

   O SVG tem `preserveAspectRatio="none"` e o retângulo usa
   `pathLength="100"` — é isso que faz o mesmo tracejado servir a
   um cartão largo e a um estreito sem virar dois desenhos. */
.mc-passiva .mc-fio { display: none; }

.mc-vigia {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  pointer-events: none;
  z-index: 2;          /* acima da trama, abaixo do conteúdo */
  overflow: visible;
}
.mc-vigia rect {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  fill: none;
  stroke: var(--mc-vigilia, #6366f1);
  vector-effect: non-scaling-stroke;   /* o traço não estica com a caixa */
}
/* O HALO: o mesmo contorno, borrado e mais grosso, por baixo. Uma
   linha sozinha lê como borda; com o halo, lê como energia. */
.mc-vigia-halo {
  stroke-width: 3.5;
  opacity: .22;
  filter: blur(2.5px);
  stroke-dasharray: 2 2.6;
  stroke-dashoffset: 0;
}
.mc-vigia-fio {
  stroke-width: 1.4;
  opacity: .55;
  stroke-dasharray: 2 2.6;
  stroke-dashoffset: 0;
}
/* Só corre quando o protocolo está VALENDO. Fora da janela ele
   existe, apagado e parado — o que já é a informação certa. */
.mc-vigia.em-vigor .mc-vigia-fio  { animation: mc-vigilia 7s linear infinite; opacity: .85; }
.mc-vigia.em-vigor .mc-vigia-halo { animation: mc-vigilia 7s linear infinite; opacity: .38; }
.mc-vigia:not(.em-vigor) rect     { opacity: .18; }

@keyframes mc-vigilia {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -4.6; }   /* um período do tracejado */
}

/* ── O COMETA ──────────────────────────────────────────────
   O tracejado sozinho é discreto por natureza: traço curto, muito
   traço, movimento pequeno. Lê como vigília, mas não CHAMA.

   O cometa é a segunda leitura: um arco curto e brilhante que dá a
   volta completa no perímetro. `stroke-dasharray: 7 93` sobre um
   `pathLength` de 100 significa "7% aceso, 93% apagado" — um único
   risco de luz percorrendo a borda.

   Ele é rápido (4,2s) contra o tracejado lento (7s). É o contraste
   entre os dois que dá vida: a vigília permanece, e a energia
   passa. Se corressem juntos, viraria uma coisa só. */
.mc-vigia-cometa {
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 7 93;
  opacity: 0;
  filter: drop-shadow(0 0 5px var(--mc-cor));
}
.mc-vigia.em-vigor .mc-vigia-cometa {
  opacity: .95;
  animation: mc-cometa 4.2s linear infinite;
}
@keyframes mc-cometa {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -100; }   /* uma volta inteira */
}

/* ══════════════════════════════════════════════════════════
   A BARRA DO PROTOCOLO

   A única barra do app que enche sem o hunter fazer nada — e é
   justamente por isso que ela existe: a missão passiva se cumpre
   sozinha, e ver o progresso é o prêmio dela.
   ══════════════════════════════════════════════════════════ */
.mc-prot {
  position: relative;
  z-index: 1;
  margin-top: .75rem;
}
.mc-prot-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .3rem;
  font-family: var(--font-section);
  font-size: .56rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mc-prot-lbl {
  display: inline-flex; align-items: center; gap: .3rem;
  color: color-mix(in srgb, var(--mc-vigilia) 70%, #cbd5e1);
}
.mc-prot-lbl svg { max-width: none; }
/* O NÚMERO existe porque a barra é lenta demais para se ver andar:
   numa vigília de 13 horas, um minuto move menos de 0,2%. Ele é a
   prova de movimento que o olho não consegue dar. */
.mc-prot-pct {
  font-variant-numeric: tabular-nums;   /* o número não dança ao mudar */
  color: color-mix(in srgb, var(--mc-vigilia) 95%, #ffffff);
  text-shadow: 0 0 8px color-mix(in srgb, var(--mc-vigilia) 60%, transparent);
}

.mc-prot-calha {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
  /* `overflow: visible` de propósito: a aura PRECISA vazar da calha,
     senão ela vira só uma segunda barra por baixo. */
  overflow: visible;
}
/* Máscara do trilho: o corpo é recortado, a aura não. */
.mc-prot-calha::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--mc-vigilia) 18%, transparent);
  pointer-events: none;
}

.mc-prot-aura,
.mc-prot-fill {
  position: absolute;
  top: 0; left: 0; height: 100%;
  border-radius: 3px;
  /* 1,2s: a barra anda em passos discretos (o tique do prazo), e sem
     transição ela pularia. Longa o bastante para o passo virar
     deslize, curta o bastante para não atrasar a informação. */
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.mc-prot-aura {
  height: 200%;
  top: -50%;
  filter: blur(5px);
  opacity: .5;
  background: linear-gradient(90deg,
    transparent, color-mix(in srgb, var(--mc-vigilia) 70%, transparent));
}
.mc-prot-fill {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--mc-vigilia) 35%, #05040c),
    var(--mc-vigilia) 65%,
    color-mix(in srgb, var(--mc-vigilia) 40%, #ffffff));
  box-shadow: 0 0 10px color-mix(in srgb, var(--mc-vigilia) 55%, transparent);
}
/* A CABEÇA: o ponto de luz na frente do preenchimento. É ela que
   diz "isto está andando" quando o avanço é lento demais para se
   ver. Fica FORA do overflow do corpo, colada na ponta. */
.mc-prot-cabeca {
  position: absolute;
  right: -2px; top: 50%;
  width: 8px; height: 8px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    #ffffff 0 25%, color-mix(in srgb, var(--mc-vigilia) 85%, #fff) 45%, transparent 70%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--mc-vigilia) 90%, transparent);
  animation: mc-prot-pulso 2.6s ease-in-out infinite;
}
@keyframes mc-prot-pulso {
  0%, 100% { opacity: .75; transform: translateY(-50%) scale(.9); }
  50%      { opacity: 1;   transform: translateY(-50%) scale(1.25); }
}

/* ── O LUSTRO ──────────────────────────────────────────────
   Uma faixa clara que varre o trecho já cumprido, de ponta a
   ponta. É o que faz a barra parecer VIVA mesmo parada — e ela
   fica parada quase o tempo todo, porque anda 0,14% por minuto.

   Vai em `::after` do preenchimento, e não num terceiro elemento:
   o brilho precisa ser recortado pelo trecho cumprido, senão
   varreria a parte vazia também e a barra deixaria de ter fim.

   E SEM `overflow: hidden`. Eu havia posto — e cortaria a cabeça de
   luz, que mora dentro do preenchimento e precisa escapar pela
   ponta. Não faz falta: o fundo de um elemento já é recortado pela
   caixa dele, então o lustro nunca vaza para o trecho vazio. */
.mc-prot-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 35%,
    color-mix(in srgb, #ffffff 55%, transparent) 50%,
    transparent 65%);
  background-size: 260% 100%;
  animation: mc-prot-lustro 3.4s ease-in-out infinite;
}
@keyframes mc-prot-lustro {
  0%       { background-position: 180% 0; opacity: 0; }
  18%      { opacity: .9; }
  70%,100% { background-position: -60% 0; opacity: 0; }
}

/* A cabeça acima do lustro: ela é a ponta, e a ponta não pode
   piscar junto com a varredura. */
.mc-prot-cabeca { z-index: 2; }

/* Fora da janela a barra fica apagada: ela existe, mas ainda não
   está contando. Mostrar 0% brilhante seria prometer movimento. */
.mc-passiva.st-pendente .mc-prot-fill,
.mc-passiva.st-pendente .mc-prot-aura { opacity: .28; }
.mc-passiva.st-pendente .mc-prot-cabeca { display: none; }

/* ── NO COMPACTO ELA FICA. Eu tinha escondido, e errei. ───────

   Copiei a regra da barra comum (`.mc-compacto .mc-barra { display:
   none }`), com o raciocínio de que na lista o assunto é o conjunto
   e não o detalhe.

   Vale para a barra comum e NÃO vale para esta, por um motivo
   simples: numa missão comum a barra repete o que o prazo já diz em
   texto ao lado. Aqui ela é a única coisa que se move sozinha — o
   protocolo não tem botão, não tem cronômetro de execução, não tem
   nada acontecendo. Tirar a barra é tirar tudo o que ele mostra.

   O Extrato do Dashboard desenha em modo compacto. Ou seja: eu tinha
   construído a barra e escondido justamente do lugar onde ela ia
   viver.

   Fica, mais enxuta: sem o rótulo (o selo PROTOCOLO no canto já diz
   o que é), com a porcentagem colada na barra e altura menor. */
.mc-compacto .mc-prot {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .45rem;
  grid-column: 2;          /* na faixa do conteúdo, não sob o sigilo */
}
.mc-compacto .mc-prot-topo {
  margin: 0;
  order: 2;                /* o número vai para a DIREITA da barra */
  flex-shrink: 0;
}
.mc-compacto .mc-prot-lbl  { display: none; }
.mc-compacto .mc-prot-pct  { font-size: .58rem; }
.mc-compacto .mc-prot-calha { flex: 1; height: 5px; order: 1; }

/* Halo de vigília no sigilo — o anel índigo em volta do ícone da categoria. */
.mc-passiva .mc-sigilo::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--mc-vigilia) 50%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--mc-cor) 40%, transparent);
  pointer-events: none;
}

/* Enquanto o protocolo está de pé, a corrente de energia não aparece: ele
   não está "sendo executado", está sendo MANTIDO. São coisas diferentes e a
   tela precisa dizer isso. */
.mc-passiva .mc-corrente { display: none; }

/* Etiqueta PROTOCOLO no canto — o rótulo explícito, para quem ainda não
   aprendeu a ler a trama. */
.mc-passiva::after {
  content: 'PROTOCOLO';
  position: absolute;
  top: 8px; right: 10px;
  z-index: 1;
  font-family: var(--font-section);
  font-size: .46rem; font-weight: 700;
  letter-spacing: .2em;
  color: color-mix(in srgb, var(--mc-vigilia) 85%, white);
  opacity: .5;
  pointer-events: none;
}
.mc-compacto.mc-passiva::after { top: 4px; right: 8px; font-size: .42rem; }

/* Aguardando a hora: tudo esmaece. Ele existe, mas ainda não vale. */
.mc-selo-espera {
  color: var(--text-muted);
  background: rgba(148,163,184,.06);
  border: 1px solid rgba(148,163,184,.22);
}
/* (o `.mc-fio` da passiva agora é a moldura de vigília, tratada acima) */
.mc-passiva.st-pendente::after { opacity: .28; }

/* ── Sigilo (ícone cinético) ─────────────────────────────── */
.mc-sigilo {
  position: relative;
  width: 62px; height: 62px;
  flex-shrink: 0;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--mc-cor-suave), rgba(0,0,0,.45));
  border: 1px solid color-mix(in srgb, var(--mc-cor) 30%, transparent);
  box-shadow: inset 0 0 18px rgba(0,0,0,.6);
}
.mc-sigilo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mc-sigilo-anel { transform-origin: 50px 50px; animation: mc-girar 14s linear infinite; }
.mc-sigilo-arco { transform-origin: 50px 50px; animation: mc-girar 4.5s linear infinite; }
@keyframes mc-girar { to { transform: rotate(360deg); } }
/* Glifo de categoria — SVG de linha, claro e nítido sobre o sigilo. */
.mc-sigilo-ico {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.85));
}
.mc-sigilo-ico svg {
  width: 26px; height: 26px; max-width: none;   /* a regra global colapsaria */
  opacity: .92;
}
.mc.st-concluida .mc-sigilo-anel,
.mc.st-concluida .mc-sigilo-arco,
.mc.st-cancelada .mc-sigilo-anel,
.mc.st-cancelada .mc-sigilo-arco { animation: none; }

/* ── Corpo ───────────────────────────────────────────────── */
.mc-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.mc-topo { display: flex; align-items: flex-start; gap: 1rem; }
.mc-titulo {
  flex: 1; min-width: 0;
  font-family: var(--font-title);
  font-size: 1.05rem;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── Recompensa em destaque (canto superior direito) ─────── */
.mc-recompensa {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .6rem;
  border-radius: 100px;
  background: linear-gradient(100deg, rgba(251,191,36,.14), rgba(251,191,36,.05));
  border: 1px solid rgba(251,191,36,.35);
  font-family: 'Orbitron', monospace;
  color: var(--gold-bright);
  line-height: 1;
}
.mc-recompensa b { font-size: .95rem; font-weight: 700; text-shadow: 0 0 8px rgba(251,191,36,.4); }
.mc-rec-un { font-size: .58rem; letter-spacing: .1em; opacity: .8; margin-left: -.05rem; }
.mc-glifo-xp  { width: 14px; height: 14px; color: var(--gold-bright);
                filter: drop-shadow(0 0 4px rgba(251,191,36,.5)); }
.mc-glifo-moeda { width: 13px; height: 13px; color: var(--cyan-glow); }
.mc-rec-moeda { color: var(--cyan-glow); text-shadow: 0 0 8px rgba(34,211,238,.4); }
.mc-rec-sep { width: 1px; height: 12px; background: rgba(251,191,36,.3); margin: 0 .15rem; }

/* Realizado x prometido: o dourado é promessa. Quando a missão fecha, o selo
   troca de cor para o hunter distinguir de relance o que ele DE FATO levou
   (verde) do que ele DE FATO perdeu (vermelho). */
.mc-rec-ganho {
  background: linear-gradient(100deg, rgba(16,185,129,.16), rgba(16,185,129,.05));
  border-color: rgba(16,185,129,.4);
  color: #34d399;
}
.mc-rec-ganho b { text-shadow: 0 0 8px rgba(16,185,129,.45); }
.mc-rec-ganho .mc-glifo-xp { color: #34d399; filter: drop-shadow(0 0 4px rgba(16,185,129,.5)); }
.mc-rec-ganho .mc-rec-sep  { background: rgba(16,185,129,.32); }

.mc-rec-perda {
  background: linear-gradient(100deg, rgba(239,68,68,.16), rgba(239,68,68,.04));
  border-color: rgba(239,68,68,.4);
  color: #f87171;
}
.mc-rec-perda b { text-shadow: 0 0 8px rgba(239,68,68,.45); }
.mc-rec-perda .mc-glifo-xp { color: #f87171; filter: drop-shadow(0 0 4px rgba(239,68,68,.5)); }

/* Glifos miúdos (data, frequência, janela). max-width:none porque a regra
   global img,svg{max-width:100%} colapsaria um SVG sem largura própria. */
.mc-glifo-mini {
  width: 12px; height: 12px; max-width: none;
  flex-shrink: 0;
  opacity: .85;
}

.mc-prazo {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: 'Orbitron', monospace;
  font-size: .68rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
/* inline-flex pelo mesmo motivo dos chips: o glifo da ampulheta é um SVG e
   design-system.css dá `display:block` a todo SVG — dentro de um span comum
   ele quebraria a linha e sentaria ACIMA da palavra "Prazo". */
.mc-prazo .lbl {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-section); color: var(--mc-cor); letter-spacing: .1em;
}
.mc-prazo .lbl svg { max-width: none; flex: none; }
.mc-prazo.urgente { color: var(--red-crit); animation: mc-pulsar 1.2s ease-in-out infinite; }

/* VENCIDO — a dívida.
   Antes isto era um "Prazo vencido" apagado (opacity .8), como se a missão
   tivesse acabado. Ela não acabou: o contador segue correndo NEGATIVO até o
   hunter concluir. Então o estado ganha peso em vez de perder — fundo, borda
   e número em destaque. Um débito de 40 minutos precisa incomodar. */
.mc-prazo.vencido {
  color: var(--red-crit);
  background: rgba(225, 29, 72, .1);
  border: 1px solid rgba(225, 29, 72, .38);
  border-radius: 7px;
  padding: .1rem .5rem;
  font-weight: 700;
}
.mc-prazo.vencido .lbl { color: var(--red-crit); }

/* REERGUIDA — comprada de volta com Mana. Não é corrida nem dívida: é uma
   segunda chance sem recompensa, e a cor âmbar diz "atenção", não "erro". */
.mc-prazo.reerguida {
  color: #f59e0b;
  background: rgba(245, 158, 11, .09);
  border: 1px solid rgba(245, 158, 11, .32);
  border-radius: 7px;
  padding: .1rem .5rem;
}
.mc-prazo.reerguida .lbl { color: #f59e0b; }
@keyframes mc-pulsar { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ── Chips ───────────────────────────────────────────────── */
.mc-chips { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .5rem; }
.mc-chip {
  /* inline-flex porque o chip agora carrega um glifo antes do texto. Como
     caixa de texto simples, o SVG assentaria na linha de base e ficaria
     baixo demais em relação às maiúsculas. */
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-section);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 100px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

/* Glifos do alfabeto (js/glifos.js) dentro de chips, selos e botões.
   max-width:none pela armadilha de sempre — a regra global
   img,svg{max-width:100%} encolhe SVG dentro de caixa estreita.
   flex:none impede que o flex-shrink do container amasse o desenho. */
.mc-chip .glifo,
.mc-selo .glifo,
.mc-btn  .glifo {
  max-width: none;
  flex: none;
  opacity: .92;
}
.mc-chip-prior { color: var(--mc-cor); background: var(--mc-cor-suave); }
.mc-chip-rank  { color: #d8b4fe; border-color: rgba(168,85,247,.45); background: rgba(168,85,247,.1); }
.mc-chip-status { color: var(--text-muted); border-color: rgba(148,163,184,.3); background: rgba(148,163,184,.06); }
.mc-chip-cat { color: var(--text-secondary); border-color: rgba(148,163,184,.22); }

/* Chip de data — só aparece em missão que NÃO é de hoje. Fica em âmbar frio
   para não ser confundido com o chip de status. */
.mc-chip-data {
  display: inline-flex; align-items: center; gap: .3rem;
  color: #cbd5e1;
  border-color: rgba(203,213,225,.28);
  background: rgba(203,213,225,.06);
  font-variant-numeric: tabular-nums;
}
/* Estado da REGRA (agenda). Verde = agendando; cinza = suspensa. */
.mc-chip-estado.on  { color: #34d399; border-color: rgba(16,185,129,.42); background: rgba(16,185,129,.09); }
.mc-chip-estado.off { color: var(--text-muted); border-color: rgba(148,163,184,.28); background: rgba(148,163,184,.06); }
.mc-chip-tipo { color: #c4b5fd; border-color: rgba(124,58,237,.4); background: rgba(124,58,237,.1); }

.mc-div { width: 1px; height: 13px; background: rgba(148,163,184,.22); }
.mc-premio {
  font-family: var(--font-section);
  font-size: .78rem; font-weight: 700;
  color: var(--gold-bright);
  text-shadow: 0 0 8px rgba(251,191,36,.35);
  white-space: nowrap;
}
.mc-premio .moeda { color: var(--cyan-glow); text-shadow: 0 0 8px rgba(34,211,238,.35); }

/* ── Barra de progresso da janela ────────────────────────── */
.mc-barra {
  height: 3px;
  margin-top: .7rem;
  border-radius: 2px;
  background: rgba(255,255,255,.05);
  overflow: hidden;
}
.mc-barra-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mc-cor) 60%, #000), var(--mc-cor), #fff);
  background-size: 200% 100%;
  box-shadow: 0 0 8px var(--mc-cor);
  transition: width .8s ease;
}
.mc.st-ativa .mc-barra-fill { animation: mc-fio 2.6s linear infinite; }

/* ── Ações (máquina de estados) ──────────────────────────── */
.mc-acoes {
  display: flex; justify-content: flex-end; align-items: center;
  gap: .5rem; flex-wrap: wrap;
  margin-top: .8rem;
}
.mc-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-section);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .45rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid;
  transition: all .18s ease;
  white-space: nowrap;
}
.mc-btn:disabled { opacity: .45; cursor: not-allowed; }
.mc-btn:active { transform: scale(.96); }

.mc-btn-iniciar {
  color: #e9d5ff;
  background: linear-gradient(100deg, rgba(46,16,101,.9), rgba(30,27,75,.9));
  border-color: rgba(126,34,206,.7);
  box-shadow: inset 0 0 12px rgba(168,85,247,.15);
}
.mc-btn-iniciar:hover {
  background: linear-gradient(100deg, #3b0764, #581c87);
  box-shadow: inset 0 0 18px rgba(168,85,247,.4), 0 0 16px rgba(168,85,247,.35);
}
.mc-btn-concluir {
  color: #fff;
  background: linear-gradient(100deg, #3b0764, #581c87);
  border-color: #d8b4fe;
  box-shadow: inset 0 0 16px rgba(168,85,247,.45), 0 0 14px rgba(168,85,247,.35);
}
.mc-btn-concluir:hover {
  background: linear-gradient(100deg, #581c87, #7e22ce);
  box-shadow: inset 0 0 22px rgba(216,180,254,.7), 0 0 24px rgba(168,85,247,.7);
}
.mc-btn-neutro {
  color: var(--text-secondary);
  background: rgba(31,41,55,.7);
  border-color: rgba(75,85,99,.7);
}
.mc-btn-neutro:hover { background: #374151; color: #fff; }

/* REERGUER — âmbar, não verde nem vermelho.
   Verde é de missão cumprida e vermelho de fracassada; esta é a terceira
   coisa: uma segunda chance comprada. O âmbar sinaliza "custa algo" sem
   prometer vitória, e a moldura pontilhada reforça que é um remendo, não o
   caminho normal. */
.mc-btn-reerguer {
  color: #fbbf24;
  background: rgba(245, 158, 11, .1);
  border: 1px dashed rgba(245, 158, 11, .5);
}
.mc-btn-reerguer:hover {
  background: rgba(245, 158, 11, .2);
  border-style: solid;
  box-shadow: 0 0 14px rgba(245, 158, 11, .28);
}
.mc-btn-perigo {
  color: #fca5a5;
  background: linear-gradient(100deg, rgba(63,0,15,.85), rgba(33,0,8,.85));
  border-color: rgba(159,18,57,.7);
}
.mc-btn-perigo:hover { background: #70001a; box-shadow: inset 0 0 14px rgba(225,29,72,.45); }

/* Extinguir — poder do Arquiteto (dourado, discreto até o hover) */
.mc-btn-extinguir {
  color: var(--gold-bright);
  background: rgba(251,191,36,.06);
  border-color: rgba(251,191,36,.35);
  padding: .45rem .7rem;
  font-size: .85rem;
  line-height: 1;
  opacity: .55;
}
.mc-btn-extinguir:hover {
  opacity: 1;
  color: #fff;
  background: linear-gradient(100deg, rgba(120,53,15,.9), rgba(63,0,15,.9));
  border-color: var(--gold-bright);
  box-shadow: 0 0 16px rgba(251,191,36,.5), inset 0 0 12px rgba(239,68,68,.3);
  transform: scale(1.06);
}

/* Editar / Excluir — gestão discreta (delegada à página).
   Ícones pequenos e apagados; não competem com Iniciar/Concluir. */
.mc-btn-editar,
.mc-btn-excluir {
  padding: .4rem .55rem;
  font-size: .82rem;
  line-height: 1;
  color: var(--text-muted);
  background: rgba(148,163,184,.05);
  border-color: rgba(148,163,184,.2);
  opacity: .5;
}
.mc-btn-editar:hover {
  opacity: 1;
  color: #e9d5ff;
  background: rgba(168,85,247,.12);
  border-color: rgba(168,85,247,.5);
}
.mc-btn-excluir:hover {
  opacity: 1;
  color: #fca5a5;
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.5);
}

/* Dissolução ao extinguir */
.mc-extinguindo {
  pointer-events: none;
  animation: mc-dissolver .7s cubic-bezier(.4,0,.7,.2) forwards;
}
@keyframes mc-dissolver {
  0%   { opacity: 1; transform: scale(1) translateX(0); filter: blur(0) brightness(1); }
  25%  { opacity: 1; transform: scale(1.02); filter: blur(0) brightness(2.2); }
  100% { opacity: 0; transform: scale(.92) translateX(40px); filter: blur(8px) brightness(.3);
         margin-bottom: -80px; }
}

/* ── Estados do cartão ───────────────────────────────────── */
.mc.st-ativa      { border-color: color-mix(in srgb, var(--mc-cor) 40%, transparent); }
.mc.st-pausada    { opacity: .82; }
.mc.st-pausada .mc-sigilo-anel,
.mc.st-pausada .mc-sigilo-arco { animation-play-state: paused; }

.mc.st-concluida {
  border-left-color: var(--green-done);
  background: linear-gradient(145deg, rgba(6,26,20,.9), #06060d);
}
.mc.st-concluida .mc-titulo { color: var(--text-muted); text-decoration: line-through; }
.mc.st-concluida .mc-sigilo { border-color: rgba(16,185,129,.4); }

.mc.st-fracassada {
  border-left-color: var(--red-crit);
  background: linear-gradient(145deg, rgba(30,6,6,.9), #06060d);
}
.mc.st-fracassada .mc-titulo { color: #9ca3af; }

.mc.st-cancelada { opacity: .55; border-left-color: rgba(100,116,139,.6); }
.mc.st-cancelada .mc-titulo { color: var(--text-muted); }

/* ── Chegada ─────────────────────────────────────────────────
   Só o cartão RECÉM-CHEGADO recebe esta classe. É o contrário do que a tela
   fazia antes: a lista inteira reaparecia de uma vez, e o hunter não tinha
   como saber qual missão era a nova. Agora quem entra se anuncia, e quem já
   estava lá nem pisca — continua sendo o mesmo elemento no DOM. */
@keyframes mc-chegar {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.mc-entrando { animation: mc-chegar .3s cubic-bezier(.22,.9,.3,1) both; }

/* Selo de desfecho (canto direito) */
.mc-selo {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-section);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .9rem;
  border-radius: 8px;
}
.mc-selo-ok    { color: #34d399; background: rgba(16,185,129,.1);  border: 1px solid rgba(16,185,129,.35); }
.mc-selo-falha { color: #f87171; background: rgba(239,68,68,.08);  border: 1px solid rgba(239,68,68,.3); }
.mc-selo-neutro{ color: var(--text-muted); background: rgba(148,163,184,.06); border: 1px solid rgba(148,163,184,.2); }

/* MISSÃO PASSIVA — os dois estados que só ela tem.

   VIGÍLIA: o protocolo está de pé. Índigo, não roxo de ação: ele não pede
   nada do hunter, só existe. É o único cartão do app que está "vencendo"
   sem que ninguém faça nada.

   CONFESSADA: âmbar. Não é verde (não cumpriu) nem vermelho (não fracassou
   por descuido) — é a terceira coisa: alguém escolheu dizer a verdade quando
   podia ficar calado. Punir isso com a cor da derrota seria ensinar a mentir. */
/* O SELO acompanha a cor do cartão pelo mesmo motivo da moldura: um
   protocolo crítico com selo índigo esconderia a urgência atrás da
   natureza. Quem diz "isto é vigília" é a palavra e o tracejado. */
.mc-selo-vigilia {
  color: color-mix(in srgb, var(--mc-cor) 60%, #ffffff);
  background: color-mix(in srgb, var(--mc-cor) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--mc-cor) 38%, transparent);
}
.mc-selo-confessado {
  color: #fbbf24;
  background: rgba(245, 158, 11, .1);
  border: 1px solid rgba(245, 158, 11, .34);
}
.mc.st-confessada { opacity: .92; }
.mc.st-confessada .mc-fio {
  background: linear-gradient(90deg, transparent, #f59e0b, transparent);
}

/* O botão de confessar não convida nem ameaça: fica discreto até o hover.
   Um botão chamativo pressionaria o hunter a se declarar culpado; um botão
   escondido faria a mentira ser o caminho mais fácil. Meio-termo de
   propósito. */
.mc-btn-confessar {
  color: #fbbf24;
  background: transparent;
  border: 1px dashed rgba(245, 158, 11, .42);
}
.mc-btn-confessar:hover {
  background: rgba(245, 158, 11, .16);
  border-style: solid;
  box-shadow: 0 0 12px rgba(245, 158, 11, .26);
}

/* ── Cartão selado (editavel:false) ──────────────────────────
   Ocorrência de outro dia: registro histórico, não painel de controle.
   Some o convite ao clique (hover neutro) e o sigilo para de girar — o
   movimento é o que sugere "isto ainda está acontecendo". */
.mc-selado { opacity: .9; }
.mc-selado:hover {
  transform: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  border-color: rgba(148,163,184,.12);
}
.mc-selado .mc-sigilo-anel,
.mc-selado .mc-sigilo-arco { animation: none; }
.mc-selado .mc-fio { opacity: 0; }

/* ══════════════════════════════════════════════════════════
   MODO AGENDA — a REGRA, não a ocorrência.
   Irmão do cartão de missão: mesmo casco, sigilo, chips e selo de
   recompensa. Muda só o miolo: no lugar do contador de prazo entra
   uma FICHA de agendamento, com rótulos alinhados em coluna fixa —
   é um documento de cadastro, não uma ordem em curso.
   ══════════════════════════════════════════════════════════ */

/* Perfuração de pergaminho no topo: estática de propósito. O fio animado
   é a marca de "missão correndo agora"; regra nenhuma corre. */
.mc-agenda .mc-fio {
  opacity: .4;
  background: repeating-linear-gradient(90deg,
    var(--mc-cor) 0 7px, transparent 7px 14px);
  animation: none;
}
.mc-agenda {
  border-left-style: dashed;                 /* o tracejado separa regra de ocorrência */
  background:
    radial-gradient(120% 140% at 0% 0%, var(--mc-cor-suave), transparent 55%),
    linear-gradient(145deg, #0c0a17, #07060e);
}
.mc-agenda .mc-corpo { gap: .1rem; }

/* Descrição: a única linha de prosa do componente. Uma linha só —
   o cartão é índice, não leitura. */
.mc-ag-desc {
  margin-top: .5rem;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--text-secondary);
  opacity: .8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Ficha de agendamento. Coluna de rótulo FIXA para que Frequência,
   Próxima e Janela alinhem os valores no mesmo eixo vertical. */
.mc-ag-ficha {
  margin-top: .6rem;
  padding: .5rem .7rem;
  display: grid;
  gap: .3rem;
  border-radius: 9px;
  border: 1px solid rgba(124,58,237,.22);
  border-left: 2px solid rgba(168,85,247,.55);
  background: linear-gradient(120deg, rgba(124,58,237,.09), rgba(0,0,0,.25));
}
.mc-ag-linha {
  display: grid;
  grid-template-columns: 7.4rem 1fr;
  align-items: center;
  gap: .5rem;
}
.mc-ag-rot {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-section);
  font-size: .6rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: #a78bfa;
  white-space: nowrap;
}
.mc-ag-val {
  font-size: .82rem;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-ag-num { font-family: 'Orbitron', monospace; font-size: .76rem; font-variant-numeric: tabular-nums; }

/* Próxima ocorrência: hoje merece destaque, amanhã só um aceno. */
.mc-ag-val.ag-hoje {
  color: var(--gold-bright);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(251,191,36,.35);
}
.mc-ag-val.ag-breve   { color: #e9d5ff; }
.mc-ag-val.ag-suspensa{ color: var(--text-muted); font-style: italic; }

/* Regra suspensa: continua legível (ela existe), mas apagada — e o sigilo
   congela, sinal de que nada será gerado enquanto estiver assim. */
.mc-agenda.ag-pausada { opacity: .62; }
.mc-agenda.ag-pausada .mc-fio { opacity: .12; }
.mc-agenda.ag-pausada .mc-sigilo-anel,
.mc-agenda.ag-pausada .mc-sigilo-arco { animation-play-state: paused; }
.mc-agenda.ag-pausada .mc-ag-ficha { border-color: rgba(148,163,184,.18); border-left-color: rgba(148,163,184,.4); }
.mc-agenda.ag-pausada .mc-ag-rot   { color: var(--text-muted); }
.mc-agenda.ag-pausada:hover { opacity: .85; }

/* ══════════════════════════════════════════════════════════
   VARIANTE COMPACTA — faixa fina para o Extrato do Dashboard.
   Objetivo: ver muitas de relance sem perder a identidade.
   O sigilo encolhe, o corpo vira duas linhas curtas, as ações
   viram ícones à direita — a altura cai quase à metade.
   ══════════════════════════════════════════════════════════ */
.mc.mc-compacto {
  gap: .7rem;
  padding: .5rem .7rem;
  margin-bottom: 0;                 /* o espaçamento vem do gap do container */
  align-items: center;
  border-radius: 11px;
}
.mc-compacto .mc-sigilo { width: 40px; height: 40px; border-radius: 10px; }
.mc-compacto .mc-sigilo-ico svg { width: 18px; height: 18px; }

/* Corpo em duas linhas justas: título+recompensa em cima, chips embaixo */
.mc-compacto .mc-corpo { flex-direction: column; gap: .28rem; }
.mc-compacto .mc-topo { align-items: center; gap: .6rem; }
.mc-compacto .mc-titulo { font-size: .92rem; }
.mc-compacto .mc-recompensa { padding: .16rem .5rem; }
.mc-compacto .mc-recompensa b { font-size: .82rem; }

/* Chips menores; a barra de prazo some (o chip de prazo já informa) */
.mc-compacto .mc-chips { gap: .35rem; margin-top: 0; }
.mc-compacto .mc-chip { font-size: .55rem; padding: .14rem .45rem; }
.mc-compacto .mc-barra { display: none; }

/* Ações à DIREITA da faixa, na mesma linha do conteúdo — não empurram
   a altura para baixo. Ícones enxutos; os botões de texto encolhem. */
.mc-compacto {
  display: grid;
  grid-template-columns: auto 1fr auto;
}
.mc-compacto .mc-acoes {
  margin-top: 0;
  flex-wrap: nowrap;
  gap: .3rem;
  align-self: center;
}
.mc-compacto .mc-btn {
  font-size: .62rem;
  padding: .35rem .6rem;
  letter-spacing: .04em;
}
.mc-compacto .mc-selo { font-size: .6rem; padding: .3rem .6rem; }
.mc-compacto .mc-btn-editar,
.mc-compacto .mc-btn-excluir,
.mc-compacto .mc-btn-extinguir { padding: .3rem .42rem; font-size: .72rem; }
.mc-compacto .mc-fio { border-radius: 11px 11px 0 0; }

/* ══════════════════════════════════════════════════════════
   O CARTÃO MEDE A PRÓPRIA COLUNA, NÃO A JANELA

   O DEFEITO: a regra que empilhava o cartão compacto era
   `@media (max-width: 560px)` — largura da JANELA. Só que quem aperta o
   cartão não é a janela, é a COLUNA em que ele mora: no Dashboard a lista
   divide espaço com a barra de estatísticas à direita. Num monitor de
   1366px a janela tem folga, a media query não dispara, mas o cartão recebe
   uns 600px — e a faixa de três colunas (sigilo · conteúdo · ações) se
   espreme: o título é cortado com reticências, os chips quebram em três
   linhas e os botões sobem para o meio do cartão.

   Era por isso que ele ficava bonito no monitor grande e no celular, e
   quebrava exatamente no meio: a media query acertava as duas pontas e
   errava o miolo, porque estava medindo a coisa errada.

   `@container` mede o ancestral marcado com `container-type`. Agora o
   cartão responde ao espaço que REALMENTE tem, e o mesmo layout funciona
   dentro do Dashboard, de um modal estreito ou de uma coluna futura que
   ainda não existe — sem nenhum número de janela envolvido.
   ══════════════════════════════════════════════════════════ */
.mc-lista { container-type: inline-size; container-name: mclista; }

/* ── ~720px: as ações descem para a própria linha ─────────
   O primeiro aperto é sempre nos botões: "Cancelar hoje" + "Concluir" +
   ícones não cabem ao lado do conteúdo. Em vez de espremer o meio, eles
   descem inteiros e ficam à direita. */
@container mclista (max-width: 720px) {
  .mc.mc-compacto { grid-template-columns: auto 1fr; }
  .mc-compacto .mc-acoes {
    grid-column: 2 / -1;
    margin-top: .45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  /* O título para de ser cortado: com a linha inteira para si, ele cabe.
     Reticências num título de missão é perder a informação principal. */
  .mc-compacto .mc-titulo { white-space: normal; overflow: visible; }
  .mc-compacto .mc-topo { align-items: flex-start; }
}

/* ── ~520px: empilha de vez (a forma que já funciona no celular) ── */
@container mclista (max-width: 520px) {
  .mc.mc-compacto { grid-template-columns: 1fr; }
  .mc-compacto .mc-sigilo { display: none; }   /* o espaço vale mais que o ícone */
  .mc-compacto .mc-acoes { grid-column: 1 / -1; justify-content: flex-start; }
  .mc-compacto .mc-acoes .mc-btn { flex: 1 1 auto; justify-content: center; }
  .mc-compacto .mc-chips { gap: .28rem; }
}

/* REDE DE SEGURANÇA para navegador sem container query (Chrome < 105,
   Safari < 16). Ali a media query antiga volta a valer: pior que o ideal
   no monitor médio, mas nunca quebrado no celular. */
@supports not (container-type: inline-size) {
  @media (max-width: 720px) {
    .mc.mc-compacto { grid-template-columns: auto 1fr; }
    .mc-compacto .mc-acoes {
      grid-column: 2 / -1; margin-top: .45rem; flex-wrap: wrap; justify-content: flex-end;
    }
    .mc-compacto .mc-titulo { white-space: normal; overflow: visible; }
  }
  @media (max-width: 520px) {
    .mc.mc-compacto { grid-template-columns: 1fr; }
    .mc-compacto .mc-sigilo { display: none; }
    .mc-compacto .mc-acoes { grid-column: 1 / -1; justify-content: flex-start; }
  }
}

/* ── Responsivo do cartão CHEIO (Rotinas, Missões Gerais) ──
   Mesma correção do compacto: quem manda é a largura da COLUNA. A media
   query fica como rede de segurança para navegador antigo. */
@container mclista (max-width: 620px) {
  .mc { gap: .8rem; padding: .85rem .9rem; }
  .mc-sigilo { width: 50px; height: 50px; }
  .mc-titulo { font-size: .95rem; white-space: normal; overflow: visible; }
  .mc-topo { flex-direction: column; gap: .3rem; }
  .mc-acoes { justify-content: stretch; }
  .mc-acoes .mc-btn { flex: 1; justify-content: center; }
  /* Sem largura para a coluna de rótulos, a ficha vira rótulo-sobre-valor;
     alinhar à força espremeria "Frequência" em duas linhas. */
  .mc-ag-linha { grid-template-columns: 1fr; gap: .05rem; }
  .mc-ag-ficha { gap: .5rem; }
}

@media (max-width: 620px) {
  .mc { gap: .8rem; padding: .85rem .9rem; }
  .mc-sigilo { width: 50px; height: 50px; }
  .mc-titulo { font-size: .95rem; white-space: normal; }
  .mc-topo { flex-direction: column; gap: .3rem; }
  .mc-acoes { justify-content: stretch; }
  .mc-acoes .mc-btn { flex: 1; justify-content: center; }
  .mc-ag-linha { grid-template-columns: 1fr; gap: .05rem; }
  .mc-ag-ficha { gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-sigilo-anel, .mc-sigilo-arco, .mc-fio, .mc-barra-fill, .mc-prazo.urgente,
  .mc-entrando, .mc-corrente { animation: none !important; }
  /* A vigília e a cabeça da barra também param. A moldura FICA —
     ela é informação (isto é um protocolo), não enfeite; o que sai
     é só o movimento dela. */
  .mc-vigia rect, .mc-prot-cabeca, .mc-prot-fill::after { animation: none !important; }
  /* O cometa some por inteiro: ele e' um risco de luz correndo, e
     parado vira uma marca solta em cima da borda. */
  .mc-vigia-cometa { display: none !important; }
  .mc-prot-aura, .mc-prot-fill    { transition: none !important; }
  /* Sem movimento, a corrente vira ruído estático atrás do texto — some.
     A missão em curso continua identificada pelo fio, pelo cronômetro vivo
     e pelo chip de status: a animação era reforço, nunca a única pista. */
  .mc-corrente { display: none; }
}

/* ── CRONÔMETRO ───────────────────────────────────────────
   Quanto a missão levou. Fica ao lado dos chips, mas com peso
   próprio: é dado de execução, não rótulo de classificação.
   Números em fonte digital, como o resto dos contadores. */
.mc-crono {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .16rem .5rem;
  border-radius: var(--radius-sm, 6px);
  background: rgba(148,163,184,.1);
  border: 1px solid rgba(148,163,184,.18);
  font-family: var(--font-digits, monospace);
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--text-secondary, #94a3b8);
  white-space: nowrap;
}
.mc-crono svg { width: 11px; height: 11px; flex: none; opacity: .75; max-width: none; }
.mc-crono b { font-weight: 700; color: var(--text-primary, #e2e8f0); }
.mc-crono-seta { opacity: .5; margin: 0 .05rem; }

/* A duração é a informação que o hunter procura — destacada.

   `tabular-nums` importa desde que os segundos entraram: sem largura fixa
   por dígito, o "1h 10m 09s" viraria "1h 10m 10s" com largura diferente e o
   chip inteiro dançaria a cada segundo. Números que giram precisam de
   colunas fixas — é o mesmo motivo dos relógios digitais. */
.mc-crono-dur {
  margin-left: .12rem;
  padding: .04rem .3rem;
  border-radius: 4px;
  background: rgba(124,58,237,.2);
  color: #c4b5fd;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Toda a faixa em colunas fixas: a hora de início e a de fim também. */
.mc-crono { font-variant-numeric: tabular-nums; }

/* Terminada: tom sóbrio, é registro. */
.mc-crono-fim { border-color: rgba(148,163,184,.24); }
.mc-crono-fim .mc-crono-dur { background: rgba(16,185,129,.18); color: #6ee7b7; }

/* Em curso: o único elemento do cartão que pulsa, porque é o único
   que está mesmo acontecendo agora. */
.mc-crono-vivo {
  border-color: color-mix(in srgb, var(--mc-cor, #7c3aed) 45%, transparent);
  background: color-mix(in srgb, var(--mc-cor, #7c3aed) 12%, transparent);
}
.mc-crono-vivo svg {
  opacity: 1;
  color: var(--mc-cor, #7c3aed);
  animation: mc-crono-tic 2s ease-in-out infinite;
}
@keyframes mc-crono-tic {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* No cartão compacto o cronômetro encolhe, mas não some: é o dado
   que o extrato existe para mostrar. */
.mc-compacto .mc-crono { font-size: .58rem; padding: .12rem .4rem; }

@media (prefers-reduced-motion: reduce) {
  .mc-crono-vivo svg { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   ROTINA DE REPETIÇÕES

   Herda quase tudo do protocolo, e isso é de propósito: as duas
   são missões que não se "concluem" apertando um botão, e devem
   parecer da mesma família. A moldura da vigília é literalmente o
   mesmo SVG.

   `--mc-vigilia: var(--mc-cor)` de novo — dourado na Alta,
   avermelhado na Crítica. Uma linha, e a moldura, os segmentos, o
   número e o halo já chegam na cor certa do cartão.
   ══════════════════════════════════════════════════════════════ */
.mc-repeticao {
  --mc-vigilia: var(--mc-cor);
  border-top-color: color-mix(in srgb, var(--mc-vigilia) 38%, transparent);
  border-right-color: color-mix(in srgb, var(--mc-vigilia) 20%, transparent);
  border-bottom-color: color-mix(in srgb, var(--mc-vigilia) 20%, transparent);
  background:
    /* trama de CONTAGEM: barras verticais curtas, como marcas de
       parede. A passiva usa diagonais (permanência); esta usa
       traços em pé, que é como se conta à mão desde sempre. */
    repeating-linear-gradient(90deg,
      transparent 0 13px,
      color-mix(in srgb, var(--mc-cor) 6%, transparent) 13px 14px),
    radial-gradient(130% 150% at 100% 0%,
      color-mix(in srgb, var(--mc-cor) 13%, transparent), transparent 58%),
    radial-gradient(120% 140% at 0% 0%, var(--mc-cor-suave), transparent 55%),
    linear-gradient(145deg, #0b0916, #06060d);
}
.mc-repeticao .mc-fio { display: none; }
.mc-repeticao:hover {
  border-color: color-mix(in srgb, var(--mc-vigilia) 52%, transparent);
  border-left-color: var(--mc-cor);
  box-shadow: 0 8px 26px rgba(0,0,0,.5),
              0 0 24px color-mix(in srgb, var(--mc-cor) 26%, transparent);
}

/* ══════════════════════════════════════════════════════════════
   A MOLDURA DA CONTAGEM — exclusiva da repeticao

   A repeticao usava a moldura da passiva. O Arquiteto reportou, e o
   erro era de raciocinio: eu tratei "as duas nao se concluem
   apertando um botao" como parentesco visual. Duas naturezas com a
   mesma animacao nao parecem primas — parecem a mesma coisa.

   TUDO aqui e proprio. Nenhuma classe, nenhum keyframe e nenhum
   valor de `stroke-dasharray` e compartilhado com `.mc-vigia`:

                    PASSIVA                REPETICAO
     tracejado      2 2.6 (denso, par)     0.9 3.1 (esparso, tick)
     movimento      linear, continuo       steps(25), discreto
     periodo        7s + cometa de 4,2s    5s, sem cometa
     segunda leitura cometa dando a volta   a borda CRESCE por clique

   O `steps(25)` nao e decoracao. O tracejado tem periodo 4,0 sobre um
   `pathLength` de 100 — logo 25 ticks. Vinte e cinco passos avancam
   EXATAMENTE um tick por passo, e o anel "bate" como um contador
   mecanico em vez de deslizar. E a diferenca que se ve de relance.
   ══════════════════════════════════════════════════════════════ */
.mc-conta {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
.mc-conta rect {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  fill: none;
  stroke: var(--mc-vigilia, #0ea5e9);
  vector-effect: non-scaling-stroke;
}

/* O TRILHO: as marcas. Tick curto e muito espaco entre eles — a
   silhueta de contagem manual, nao a de energia correndo. */
.mc-conta-trilho {
  stroke-width: 1.6;
  stroke-linecap: butt;
  stroke-dasharray: 0.9 3.1;
  opacity: .5;
}
.mc-conta-halo {
  stroke-width: 3.6;
  stroke-dasharray: 0.9 3.1;
  opacity: .2;
  filter: blur(2.5px);
}
.mc-conta.contando .mc-conta-trilho {
  opacity: .88;
  animation: mc-contagem 5s steps(25, end) infinite;
}
.mc-conta.contando .mc-conta-halo {
  opacity: .34;
  animation: mc-contagem 5s steps(25, end) infinite;
}
/* Parada, ela some quase toda — meta cumprida nao pede atencao. */
.mc-conta:not(.contando) .mc-conta-trilho { opacity: .2; }
.mc-conta:not(.contando) .mc-conta-halo   { opacity: .08; }

@keyframes mc-contagem {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -4; }   /* um tick por passo */
}

/* O ARCO: a segunda leitura, e a que so a repeticao tem.

   No META a propria borda e a barra. Ela nao corre: CRESCE quando o
   hunter clica e fica onde parou. O cometa da passiva anda porque o
   tempo anda; aqui nada anda sozinho, porque nada acontece sozinho.

   A transicao e o que faz o clique valer: 0,45s de crescimento com
   desaceleracao, e a borda inteira do cartao registra o ato. */
.mc-conta-arco {
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: .95;
  filter: drop-shadow(0 0 6px var(--mc-cor));
  transition: stroke-dasharray .45s cubic-bezier(.22,1,.36,1);
}
/* Cumprida: o arco fecha a volta inteira e da UM brilho, uma vez. */
.mc-conta:not(.contando).com-alvo .mc-conta-arco {
  animation: mc-conta-fechou 1.1s ease-out 1;
}
@keyframes mc-conta-fechou {
  0%   { filter: drop-shadow(0 0 6px var(--mc-cor)); }
  30%  { filter: drop-shadow(0 0 16px var(--mc-cor)) brightness(1.6); }
  100% { filter: drop-shadow(0 0 6px var(--mc-cor)); }
}

@media (prefers-reduced-motion: reduce) {
  .mc-conta.contando .mc-conta-trilho,
  .mc-conta.contando .mc-conta-halo,
  .mc-conta.com-alvo .mc-conta-arco { animation: none; }
  .mc-conta-arco { transition: none; }
}

.mc-rep { margin-top: 10px; }
.mc-rep-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.mc-rep-lbl {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: color-mix(in srgb, var(--mc-vigilia) 70%, #cbd5e1);
}
.mc-rep-conta {
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  color: color-mix(in srgb, var(--mc-vigilia) 60%, #94a3b8);
}
.mc-rep-conta b {
  font-size: .95rem;
  color: color-mix(in srgb, var(--mc-vigilia) 95%, #ffffff);
  text-shadow: 0 0 8px color-mix(in srgb, var(--mc-vigilia) 55%, transparent);
}

/* ── A TRILHA SEGMENTADA ───────────────────────────────────
   `grid` com `--blocos` colunas iguais. Um `flex` com `gap`
   pareceria igual e não é: com 20 segmentos o arredondamento de
   subpixel deixaria alguns 1px mais largos, e o olho lê isso como
   "aquele ali é diferente" — exatamente a informação errada. */
.mc-rep-trilha {
  display: grid;
  grid-template-columns: repeat(var(--blocos, 5), 1fr);
  gap: 3px;
  height: 10px;
}
.mc-rep-seg {
  position: relative; overflow: hidden;
  border-radius: 3px;
  background: rgba(255,255,255,.05);
  border: 1px solid color-mix(in srgb, var(--mc-vigilia) 16%, transparent);
}
/* O preenchimento POR DENTRO: é o que faz o bloco de dezena
   funcionar. Em 68/100, o sétimo bloco está 80% cheio — e é essa
   fração que permite ler "setenta e poucos" sem contar. */
.mc-rep-seg::after {
  content: ''; position: absolute; inset: 0;
  width: var(--p, 0%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mc-vigilia) 95%, #ffffff),
    var(--mc-vigilia));
  box-shadow: 0 0 8px color-mix(in srgb, var(--mc-vigilia) 60%, transparent);
  transition: width .32s cubic-bezier(.22,1,.36,1);
}
.mc-rep-seg.cheio { border-color: color-mix(in srgb, var(--mc-vigilia) 55%, transparent); }
/* O bloco EM CURSO respira. Só ele: se todos pulsassem, nenhum
   seria "onde eu estou". */
.mc-rep-seg.meio::after { animation: mc-rep-pulso 1.9s ease-in-out infinite; }
@keyframes mc-rep-pulso {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.45); }
}

.mc-rep-continua {
  height: 10px; border-radius: 5px; overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid color-mix(in srgb, var(--mc-vigilia) 16%, transparent);
}
.mc-rep-continua i {
  display: block; height: 100%;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--mc-vigilia) 40%, #05040c), var(--mc-vigilia));
  box-shadow: 0 0 10px color-mix(in srgb, var(--mc-vigilia) 55%, transparent);
  transition: width .32s cubic-bezier(.22,1,.36,1);
}

/* Meta cumprida: a trilha inteira acende uma vez e a moldura para.
   O prêmio de terminar é o cartão deixar de pedir atenção. */
.mc-rep-pleno .mc-rep-trilha { animation: mc-rep-plena .9s ease-out 1; }
@keyframes mc-rep-plena {
  0%   { filter: brightness(1); }
  35%  { filter: brightness(1.9) saturate(1.3); }
  100% { filter: brightness(1); }
}

/* ── A CAIXA DO CONTADOR (modo BÔNUS) ──────────────────────
   Sem barra. O Arquiteto: "para o contador apenas um contador, uma
   box bonita com o número por extenso do que já foi feito".
   Barra aqui significaria "quanto falta" numa coisa sem fim.

   O CARTÃO ESTAVA GROSSO, e o Arquiteto reportou.

   O defeito não era a caixa: era o TOTAL numa linha própria embaixo
   dela. Isso dava cinco faixas empilhadas — título, chips, caixa,
   total, botões — contra as três de um cartão comum, e o contador
   ficava desproporcional na lista.

   Os dois viraram uma linha só. O total é informação SECUNDÁRIA
   ("quantas ao todo"), então ele acompanha o número principal em vez
   de disputar altura com ele — que era, aliás, o que a hierarquia já
   dizia e o layout contradizia.

   Com o número menor (1.45rem contra 1.85) e o padding mais justo,
   o miolo saiu de ~81px para ~44px. O `flex-wrap` devolve o
   empilhamento no celular, onde não há largura para os dois. */
.mc-rep-bonus {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 14px;
}
.mc-cont-caixa {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 1px; padding: 6px 16px 5px;
  border-radius: 10px;
  background:
    radial-gradient(120% 140% at 50% 0%,
      color-mix(in srgb, var(--mc-vigilia) 18%, transparent), transparent 70%),
    rgba(255,255,255,.035);
  border: 1px solid color-mix(in srgb, var(--mc-vigilia) 30%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
              0 0 18px color-mix(in srgb, var(--mc-vigilia) 16%, transparent);
}
.mc-cont-num {
  font-size: 1.45rem; font-weight: 800; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--mc-vigilia) 92%, #ffffff);
  text-shadow: 0 0 14px color-mix(in srgb, var(--mc-vigilia) 55%, transparent);
}
.mc-cont-unid {
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--mc-vigilia) 55%, #94a3b8);
}
.mc-cont-total {
  display: flex; align-items: center; gap: 5px;
  font-size: .7rem;
  color: color-mix(in srgb, var(--mc-vigilia) 45%, #94a3b8);
}
.mc-cont-total b {
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--mc-vigilia) 80%, #e2e8f0);
}

/* ── OS BOTÕES ─────────────────────────────────────────────
   O `+` é o único botão do app feito para ser apertado depressa,
   então tem alvo grande e resposta imediata ao toque. */
.mc-btn-mais {
  display: inline-flex; align-items: center; gap: 6px;
  border-color: color-mix(in srgb, var(--mc-vigilia) 45%, transparent);
  color: color-mix(in srgb, var(--mc-vigilia) 92%, #ffffff);
  background: color-mix(in srgb, var(--mc-vigilia) 13%, transparent);
  font-weight: 600;
}
.mc-btn-mais:hover:not(:disabled) {
  background: color-mix(in srgb, var(--mc-vigilia) 24%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--mc-vigilia) 35%, transparent);
}
/* O recuo no toque é o retorno tátil que o clique rápido precisa —
   sem ele, apertar dez vezes seguidas não dá sinal de nada. */
.mc-btn-mais:active:not(:disabled) { transform: scale(.94); }
.mc-btn-menos {
  color: #94a3b8;
  border-color: rgba(148,163,184,.28);
  background: transparent;
}
.mc-btn-menos:hover:not(:disabled) { color: #e2e8f0; border-color: rgba(148,163,184,.5); }
.mc-btn-menos:active:not(:disabled) { transform: scale(.94); }

/* ── COMPACTO (Extrato) ────────────────────────────────────
   O protocolo já foi escondido aqui uma vez por engano, e o
   Arquiteto reportou. A regra que sobrou: no compacto o miolo
   ENCOLHE, nunca some — é no Extrato que estes cartões vivem. */
.mc-compacto .mc-rep { margin-top: 7px; }
.mc-compacto .mc-rep-trilha { height: 7px; gap: 2px; }
.mc-compacto .mc-rep-lbl { font-size: .62rem; }
.mc-compacto .mc-rep-bonus { gap: 4px 11px; }
.mc-compacto .mc-cont-caixa { padding: 4px 12px 3px; border-radius: 8px; }
.mc-compacto .mc-cont-num { font-size: 1.15rem; }
.mc-compacto .mc-cont-unid { font-size: .54rem; }
/* Sem `margin-top` aqui: o total deixou de ser uma linha embaixo e
   passou a ser vizinho da caixa. Uma margem vertical sobrando teria
   desfeito, no Extrato, exatamente a altura que se foi cortar. */
.mc-compacto .mc-cont-total { font-size: .64rem; }

@media (prefers-reduced-motion: reduce) {
  .mc-rep-seg.meio::after,
  .mc-rep-pleno .mc-rep-trilha { animation: none; }
  .mc-rep-seg::after, .mc-rep-continua i { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   A PENITÊNCIA — O GIROFLEX

   TERCEIRA versão, e as duas primeiras erraram coisas diferentes.

   A primeira era GÉLIDA. O Arquiteto: "o user bateria o olho e acharia
   que era só mais uma missão rotineira". Eu tinha otimizado para
   semanticamente correto em vez de legível de relance.

   A segunda fazia o cartão INTEIRO trocar de vermelho para azul. Ele
   cortou de novo, e a correção é precisa:

     "o efeito de giroflex dá a sensação imediata das DUAS cores,
      ele tem que ficar pulsando nas duas"

   Ele está certo, e é assim que uma viatura funciona de verdade: as
   duas lâmpadas estão lá o tempo todo, lado a lado. O que alterna é
   QUAL ESTÁ ACESA. Um cartão que troca de cor inteiro não lê como
   giroflex — lê como um cartão indeciso.

   Então agora:

     · a borda é PERMANENTEMENTE bicolor — vermelha à esquerda, azul à
       direita. As duas cores existem mesmo com a animação parada;
     · o halo alterna qual lado domina, em contrafase;
     · e uma BARRA DE LUZ no topo, dividida ao meio, com as duas
       metades pulsando alternadas — é a peça que mais parece viatura.

   VELOCIDADE: 0,9s por ciclo (1,1 Hz), contra os 2,4s de antes. Ainda
   bem abaixo do limiar de 3 Hz que dispara risco fotossensível, e
   `prefers-reduced-motion` congela tudo com as duas cores acesas.

   CORES VIVAS, como ele pediu: #ff0a3c e #0a4cff puros, não os tons
   lavados da versão anterior.
   ══════════════════════════════════════════════════════════════ */
.mc-penitencia {
  --giro-vermelho: #ff0a3c;
  --giro-azul:     #0a4cff;
  --giro-ciclo:    .9s;
  --mc-cor: var(--giro-vermelho);
  position: relative;
  overflow: hidden;

  /* AS DUAS CORES, SEMPRE. Bordas opostas em cores opostas — mesmo
     com a animação congelada o cartão continua bicolor, e é isso que
     faz a leitura ser "giroflex" e não "cartão vermelho". */
  border: 1px solid transparent;
  border-left-color:  var(--giro-vermelho);
  border-right-color: var(--giro-azul);
  border-top-color:    color-mix(in srgb, var(--giro-vermelho) 45%, var(--giro-azul));
  border-bottom-color: color-mix(in srgb, var(--giro-azul) 45%, var(--giro-vermelho));
  border-left-width: 3px;
  border-right-width: 3px;

  background:
    radial-gradient(90% 130% at 0% 50%,
      color-mix(in srgb, var(--giro-vermelho) 15%, transparent), transparent 62%),
    radial-gradient(90% 130% at 100% 50%,
      color-mix(in srgb, var(--giro-azul) 15%, transparent), transparent 62%),
    linear-gradient(150deg, #10060b, #06040a);

  animation: mc-giro-sopro var(--giro-ciclo) ease-in-out infinite;
}
.mc-penitencia .mc-fio { display: none; }

/* O SOPRO: os dois halos existem SIMULTANEAMENTE, e o que muda é qual
   está forte. Nunca há um instante em que só uma cor esteja na tela. */
@keyframes mc-giro-sopro {
  0%, 100% {
    box-shadow:
      -16px 0 34px -8px color-mix(in srgb, var(--giro-vermelho) 92%, transparent),
       16px 0 34px -8px color-mix(in srgb, var(--giro-azul) 26%, transparent),
      inset  22px 0 40px -26px var(--giro-vermelho);
  }
  50% {
    box-shadow:
      -16px 0 34px -8px color-mix(in srgb, var(--giro-vermelho) 26%, transparent),
       16px 0 34px -8px color-mix(in srgb, var(--giro-azul) 92%, transparent),
      inset -22px 0 40px -26px var(--giro-azul);
  }
}

/* ── A BARRA DE LUZ ────────────────────────────────────────
   Duas metades, lado a lado, pulsando em contrafase. É a peça que
   mais parece viatura — e ela existe justamente porque a borda
   sozinha não dava o "as duas ao mesmo tempo". */
.mc-giroflex {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  display: flex;
  z-index: 4;
  pointer-events: none;
}
.mc-giroflex i { flex: 1; display: block; }
.mc-giro-r {
  background: var(--giro-vermelho);
  box-shadow: 0 0 16px 2px var(--giro-vermelho);
  animation: mc-giro-lampada var(--giro-ciclo) ease-in-out infinite;
}
.mc-giro-b {
  background: var(--giro-azul);
  box-shadow: 0 0 16px 2px var(--giro-azul);
  /* METADE DO CICLO ATRASADO — é a contrafase que faz uma acender
     enquanto a outra apaga. Em fase, as duas piscariam juntas e o
     efeito viraria um flash branco. */
  animation: mc-giro-lampada var(--giro-ciclo) ease-in-out infinite;
  animation-delay: calc(var(--giro-ciclo) / -2);
}
/* A lâmpada nunca apaga de todo: 0.22 no mínimo. Uma viatura tem as
   duas lentes visíveis mesmo quando escuras. */
@keyframes mc-giro-lampada {
  0%, 100% { opacity: 1;   filter: brightness(1.35); }
  50%      { opacity: .22; filter: brightness(.7); }
}

/* O TÍTULO acompanha o sopro, na mesma fase da borda esquerda. */
.mc-penitencia .mc-titulo {
  font-weight: 700;
  color: #fff;
  animation: mc-giro-texto var(--giro-ciclo) ease-in-out infinite;
}
@keyframes mc-giro-texto {
  0%, 100% { text-shadow: -3px 0 14px var(--giro-vermelho),  3px 0 10px color-mix(in srgb, var(--giro-azul) 40%, transparent); }
  50%      { text-shadow: -3px 0 10px color-mix(in srgb, var(--giro-vermelho) 40%, transparent),  3px 0 14px var(--giro-azul); }
}

/* O SELO. A animação sozinha pode ser erro de rede; a palavra fecha a
   leitura. Ele também carrega as duas cores num gradiente que desliza. */
.mc-penitencia .mc-corpo::before {
  content: 'PENITÊNCIA';
  position: absolute;
  top: 0; left: 0;
  padding: 3px 12px 4px;
  border-radius: 0 0 10px 0;
  font-family: var(--font-section, system-ui, sans-serif);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .2em;
  color: #fff;
  background: linear-gradient(90deg, var(--giro-vermelho), var(--giro-azul));
  animation: mc-giro-selo var(--giro-ciclo) ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
}
@keyframes mc-giro-selo {
  0%, 100% { box-shadow: 0 0 20px color-mix(in srgb, var(--giro-vermelho) 85%, transparent); }
  50%      { box-shadow: 0 0 20px color-mix(in srgb, var(--giro-azul) 85%, transparent); }
}
.mc-penitencia .mc-corpo { position: relative; padding-top: 1.75rem; }

/* ── A CAVEIRA ─────────────────────────────────────────────
   O losango é o desenho de TODO cartão. O que abre uma punição não
   pode ser a mesma figura que abre uma missão qualquer. */
.mc-sigilo-pen .mc-sigilo-caveira {
  animation: mc-giro-caveira var(--giro-ciclo) ease-in-out infinite;
}
@keyframes mc-giro-caveira {
  0%, 100% { filter: drop-shadow(0 0 7px var(--giro-vermelho)); }
  50%      { filter: drop-shadow(0 0 7px var(--giro-azul)); }
}

/* ── O CRONÔMETRO DA DÍVIDA ────────────────────────────────
   O único número do cartão que ANDA. Um chip estático se lê uma vez e
   vira paisagem; um contador que corre enquanto você olha é impossível
   de ignorar. */
.mc-chip-pen {
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid transparent;
  animation: mc-giro-chip var(--giro-ciclo) ease-in-out infinite;
}
@keyframes mc-giro-chip {
  0%, 100% { border-color: var(--giro-vermelho);
             background: color-mix(in srgb, var(--giro-vermelho) 26%, transparent); }
  50%      { border-color: var(--giro-azul);
             background: color-mix(in srgb, var(--giro-azul) 26%, transparent); }
}

.mc-pen { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
/* DE ONDE VEIO. Uma punição anônima é arbitrária; nomear a falha a
   torna justa — e a distância entre as duas (fio dental cobrado em
   abdominais) é o que faz o Sistema parecer uma entidade. */
.mc-pen-origem {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: .74rem; line-height: 1.5;
  color: rgba(255,255,255,.62);
}
.mc-pen-origem b { color: #fff; font-weight: 600; }
.mc-pen-reparo { font-size: .72rem; color: rgba(134,239,172,.8); }
.mc-pen-reparo b { color: #bbf7d0; }

.mc-btn-quitar {
  border-color: var(--giro-vermelho);
  color: #fff;
  background: color-mix(in srgb, var(--giro-vermelho) 26%, transparent);
  font-weight: 700;
}
.mc-btn-quitar:hover:not(:disabled) {
  background: color-mix(in srgb, var(--giro-vermelho) 42%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--giro-vermelho) 55%, transparent);
}

.mc-penitencia .mc-rep { --mc-vigilia: var(--giro-vermelho); }
.mc-penitencia .mc-rep-lbl { color: rgba(255,255,255,.82); }

/* ── QUITADA: A LÁPIDE ─────────────────────────────────────

   O PREFIXO É `st-`, NÃO `mc-`.

   A primeira versão desta regra mirava `.mc-penitencia.mc-concluida`,
   e essa classe NÃO EXISTE: o estado do cartão vem de `STATUS[x].classe`
   em missao-card.js, que usa `st-concluida`. Nada ficava cinza, e o
   Arquiteto viu na tela.

   O que torna o erro interessante é que O TESTE PASSOU. Ele lia o
   arquivo CSS, achava a regra escrita, e dava OK — provou que a REGRA
   EXISTE, nunca que ela CASA com algum cartão. Um teste que lê dois
   arquivos separados não percebe que eles não se falam.

   O assert certo renderiza o cartão e pergunta `el.matches(seletor)`,
   com o seletor EXTRAÍDO do CSS. É o que está no teste agora.

   O Arquiteto: "as penitências cumpridas apagariam o giroflex ficando
   em cinza, e um cinza também cobriria todas as cores vivas do meio do
   card, dando aquela sensação de coisa que foi VENCIDA."

   A primeira tentativa desligava o giroflex e pintava as bordas de
   verde — mas o MIOLO continuava vivo: a trilha vermelha, o chip azul,
   o selo de XP. O cartão ficava metade morto e metade em festa.

   `filter: grayscale(1)` resolve o problema inteiro numa linha, e é
   melhor que apagar cor por cor: ele alcança o que EU NÃO SEI que está
   lá. A trilha, o chip, o selo de XP, o glifo da categoria e qualquer
   coisa que um cartão de penitência ganhe no futuro — tudo cinza, sem
   eu precisar lembrar de cada peça.

   Com `opacity` e `brightness` por cima, o cartão vira lápide: ainda
   legível, claramente encerrado, e sem competir com as dívidas que
   ainda piscam ao lado. */
.mc-penitencia.st-concluida,
.mc-penitencia.st-cancelada,
.mc-penitencia.st-confessada {
  animation: none;
  filter: grayscale(1) brightness(.72) contrast(.92);
  opacity: .62;
  border-color: rgba(148,163,184,.28);
  border-left-color: rgba(148,163,184,.5);
  border-right-color: rgba(148,163,184,.28);
  border-left-width: 3px;
  border-right-width: 1px;
  background: linear-gradient(150deg, #0c0d10, #08090b);
  box-shadow: none;
  transition: filter .8s ease, opacity .8s ease;
}
/* Ao passar o olho, ela recobra um pouco de nitidez — o registro
   continua legível para quem quiser conferir o que pagou. */
.mc-penitencia.st-concluida:hover { opacity: .88; filter: grayscale(.8) brightness(.85); }

.mc-penitencia.st-concluida .mc-giroflex,
.mc-penitencia.st-cancelada .mc-giroflex { display: none; }

.mc-penitencia.st-concluida .mc-titulo,
.mc-penitencia.st-concluida .mc-corpo::before,
.mc-penitencia.st-concluida .mc-chip-pen,
.mc-penitencia.st-concluida .mc-sigilo-caveira,
.mc-penitencia.st-cancelada .mc-titulo,
.mc-penitencia.st-cancelada .mc-corpo::before,
.mc-penitencia.st-cancelada .mc-chip-pen { animation: none; }

/* O TÍTULO RISCADO. A missão comum já risca o título ao concluir; a
   penitência herda isso e o cinza completa a leitura — feito, e
   encerrado. */
.mc-penitencia.st-concluida .mc-titulo {
  color: #94a3b8;
  text-shadow: none;
}
.mc-penitencia.st-concluida .mc-corpo::before {
  content: 'QUITADA';
  background: #475569;
  box-shadow: none;
  letter-spacing: .22em;
}
.mc-penitencia.st-concluida .mc-chip-pen {
  color: #94a3b8;
  border-color: rgba(148,163,184,.28);
  background: rgba(148,163,184,.08);
}
/* A trilha cumprida para de pulsar: o `grayscale` tira a cor, mas o
   movimento continuaria — e movimento numa coisa encerrada é ruído. */
.mc-penitencia.st-concluida .mc-rep-seg.meio::after,
.mc-penitencia.st-concluida .mc-rep-pleno .mc-rep-trilha { animation: none; }
.mc-penitencia.st-concluida .mc-btn-quitar,
.mc-penitencia.st-concluida .mc-selo-ok {
  border-color: rgba(148,163,184,.3);
  background: rgba(148,163,184,.08);
  color: #94a3b8;
}

/* ── ACESSIBILIDADE ────────────────────────────────────────
   1,1 Hz já está bem abaixo do limiar fotossensível de 3 Hz, mas quem
   pediu ao sistema operacional para não animar nada recebe o cartão
   com AS DUAS CORES ACESAS e paradas. O sinal continua sendo giroflex;
   só para de girar. */
@media (prefers-reduced-motion: reduce) {
  .mc-penitencia,
  .mc-penitencia .mc-titulo,
  .mc-penitencia .mc-corpo::before,
  .mc-penitencia .mc-chip-pen,
  .mc-penitencia .mc-sigilo-caveira,
  .mc-giro-r, .mc-giro-b { animation: none; }
  .mc-penitencia {
    box-shadow: -16px 0 34px -8px color-mix(in srgb, var(--giro-vermelho) 70%, transparent),
                 16px 0 34px -8px color-mix(in srgb, var(--giro-azul) 70%, transparent);
  }
  .mc-giro-r, .mc-giro-b { opacity: 1; }
  .mc-penitencia .mc-titulo {
    text-shadow: -3px 0 12px var(--giro-vermelho), 3px 0 12px var(--giro-azul);
  }
  .mc-penitencia .mc-chip-pen {
    border-color: var(--giro-vermelho);
    background: color-mix(in srgb, var(--giro-vermelho) 26%, transparent);
  }
}

.mc-compacto .mc-pen { margin-top: 6px; }
.mc-compacto .mc-pen-origem { font-size: .68rem; }
.mc-compacto.mc-penitencia .mc-corpo { padding-top: 1.55rem; }
.mc-compacto.mc-penitencia .mc-corpo::before { font-size: .52rem; padding: 2px 9px 3px; }
.mc-compacto .mc-giroflex { height: 3px; }

/* ══════════════════════════════════════════════════════════════
   A PENITÊNCIA MAIS FINA — terceira passada

   O ESPAÇO ACIMA DO TÍTULO SOBREVIVEU A DUAS CORREÇÕES, e o motivo é
   especificidade. Eu escrevi:

       .mc-penitencia .mc-corpo { padding-top: 0 }        1 classe

   mas já existia, mais acima no arquivo:

       .mc-compacto.mc-penitencia .mc-corpo { 1.55rem }   2 classes

   Duas classes vencem uma, e o Extrato usa exatamente `mc-compacto`.
   Ou seja: os ~25px de espaço morto continuaram lá, e eu relatei duas
   vezes que os tinha removido. Estavam removidos só na variante que o
   Dashboard não usa.

   Lição: sobrescrever regra existente exige LER a regra existente. Eu
   procurei `.mc-penitencia .mc-corpo` e parei no primeiro resultado.

   O RÓTULO VOLTA AO TAMANHO ORIGINAL. Ao movê-lo para inline eu o
   encolhi de .58rem para .56rem e de 12px de padding para 10px, sem
   motivo — e ele perdeu presença. As medidas abaixo são as mesmas do
   pseudo-elemento original, conferidas no git.

   Nada aqui alcança o cartão de REPETIÇÃO: ele usa o mesmo `.mc-rep`,
   já estava aprovado, e todo seletor começa em `.mc-penitencia`.
   ══════════════════════════════════════════════════════════════ */

/* AS DUAS VARIANTES, porque as duas existiam. A segunda é a que o
   Extrato usa e a que eu tinha deixado passar. */
.mc-penitencia .mc-corpo::before,
.mc-compacto.mc-penitencia .mc-corpo::before { content: none; }
.mc-penitencia .mc-corpo,
.mc-compacto.mc-penitencia .mc-corpo { padding-top: 0; }

/* O RÓTULO — a ABA, não uma pílula.

   Eu tinha dado `border-radius: 7px` nos quatro cantos e virou um
   retângulo arredondado genérico. O original era `0 0 10px 0`: cantos
   retos, só o inferior-direito arredondado. Isso o faz ler como uma ABA
   ENCAIXADA no canto do bloco, e não como uma etiqueta flutuando — é a
   diferença que o Arquiteto viu comparando os dois prints.

   `align-self: flex-start` com o topo negativo encosta a aba na borda
   superior do corpo, que é onde ela ficava quando era absoluta. A
   diferença é que agora ela divide a linha com o título em vez de
   empurrá-lo para baixo. */
.mc-selo-pen {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: -1px;
  padding: 3px 12px 4px;
  border-radius: 0 0 10px 0;
  font-family: var(--font-section, system-ui, sans-serif);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, var(--giro-vermelho), var(--giro-azul));
  /* A MESMA animação do giroflex — é ela que faz o rótulo pertencer ao
     cartão, e é a única coisa que se move dentro dele. */
  animation: mc-giro-selo var(--giro-ciclo) ease-in-out infinite;
  white-space: nowrap;
}

/* O título e o rótulo dividem a MESMA linha. `nowrap` porque com
   `wrap` o título descia sozinho em tela média e devolvia a linha
   extra que este trabalho inteiro existe para eliminar. */
.mc-penitencia .mc-topo {
  flex-wrap: nowrap;
  /* `flex-start`, não `center`: a aba encosta no topo e o título
     alinha com ela. Com `center` a aba descia e deixava um respiro
     acima que era justamente o que estávamos eliminando. */
  align-items: flex-start;
  gap: .55rem;
}
/* O título desce o suficiente para a base dele alinhar com a da aba. */
.mc-penitencia .mc-titulo { margin-top: 1px; }
.mc-penitencia .mc-titulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O CONTADOR ao lado do botão. */
.mc-pen-conta {
  display: inline-flex; align-items: baseline; gap: 1px;
  margin-right: .4rem;
  font-family: var(--font-title, system-ui, sans-serif);
  font-size: .95rem;
  color: rgba(255,255,255,.5);
}
.mc-pen-conta b {
  font-size: 1.25rem;
  color: var(--giro-vermelho);
  text-shadow: 0 0 10px color-mix(in srgb, var(--giro-vermelho) 55%, transparent);
}
.mc-penitencia .mc-acoes { align-items: center; }

/* As duas frases lado a lado, separadas por ponto médio. */
.mc-penitencia .mc-pen {
  margin-top: 3px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}
.mc-penitencia .mc-pen-origem,
.mc-penitencia .mc-pen-reparo { font-size: .71rem; line-height: 1.3; }
.mc-penitencia .mc-pen-reparo::before {
  content: '·';
  margin-right: 8px;
  color: rgba(255,255,255,.3);
}

/* A barra sobe: sem a linha do topo, ela é o único conteúdo do bloco. */
.mc-penitencia .mc-rep { margin-top: 4px; }
.mc-penitencia .mc-rep-topo { display: none; }
.mc-penitencia .mc-rep-seg,
.mc-penitencia .mc-rep-continua { height: 5px; }

@media (max-width: 640px) {
  .mc-penitencia .mc-pen-reparo::before { content: none; }
  /* Em tela estreita o título pode quebrar: aqui a linha extra custa
     menos que um título ilegível. */
  .mc-penitencia .mc-topo { flex-wrap: wrap; }
  .mc-penitencia .mc-titulo { white-space: normal; }
}

/* ══════════════════════════════════════════════════════════════
   O GIROFLEX ENTRA NO CARTÃO

   O Arquiteto: "o da penitência tem um excelente efeito de giroflex que
   só está sendo executado nas bordas. Dentro do card também precisa ter
   um efeito enquanto ele estiver ativo."

   Ele está certo, e a razão é estrutural: `.mc-corrente` — a trama de
   chevrons que dá corpo às missões em curso — só é emitida quando
   `status === 'ATIVA'`. Uma penitência é PENDENTE até ser quitada, então
   ela nunca recebeu fundo nenhum. Por dentro o cartão era um gradiente
   parado; toda a vida dele estava na borda.

   O EFEITO É O PRÓPRIO GIROFLEX, não um segundo efeito. Um giroflex de
   verdade não pisca só na lâmpada: o feixe VARRE as superfícies em
   volta. Então o que atravessa o cartão é a luz que a borda emite —
   vermelha, depois azul, no mesmo ritmo.

   UM ELEMENTO, UMA ANIMAÇÃO. O comentário da `.mc-corrente` avisa que
   duas animações no mesmo elemento se cancelam nesta base de código e
   que isso já custou uma tarde. Por isso a varredura é UM gradiente
   largo deslizando por `background-position`, e não duas camadas
   alternando opacidade.

   O CICLO É O DOBRO do da borda de propósito: uma passada mostra a
   faixa vermelha e depois a azul, o que corresponde a dois piscares.
   Sincronizar 1:1 faria a luz atravessar o cartão duas vezes por
   piscada e viraria estroboscópio.
   ══════════════════════════════════════════════════════════════ */
.mc-giro-varredura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: .55;

  /* Duas faixas de luz separadas por vazio: a vermelha entra, sai, e a
     azul entra atrás. Larga e macia — feixe difuso numa parede, não
     listra de scanner. */
  background-image: linear-gradient(105deg,
    transparent 0%,
    color-mix(in srgb, var(--giro-vermelho) 20%, transparent) 12%,
    color-mix(in srgb, var(--giro-vermelho) 26%, transparent) 18%,
    transparent 30%,
    transparent 52%,
    color-mix(in srgb, var(--giro-azul) 20%, transparent) 64%,
    color-mix(in srgb, var(--giro-azul) 26%, transparent) 70%,
    transparent 84%);
  background-size: 220% 100%;
  background-repeat: repeat-x;
  animation: mc-giro-varrer calc(var(--giro-ciclo) * 2) linear infinite;
}
@keyframes mc-giro-varrer {
  from { background-position: 220% 0; }
  to   { background-position: -220% 0; }
}

/* UMA TRAMA SÓ NO FUNDO.

   Se a penitência ficar ATIVA ela recebe as DUAS: a `.mc-corrente`
   (chevrons, emitida para todo status ATIVA) e a varredura. Duas tramas
   deslizando em ritmos diferentes no mesmo fundo brigam entre si e o
   cartão vira ruído. A passiva já resolvia isso do mesmo jeito, logo
   acima neste arquivo — copiei a estrutura, não inventei outra. */
.mc-penitencia .mc-corrente { display: none; }

/* O conteúdo fica ACIMA da varredura. Sem isto o texto some sob a luz
   nos instantes em que a faixa passa por cima dele. */
.mc-penitencia .mc-corpo,
.mc-penitencia .mc-sigilo { position: relative; z-index: 1; }

/* A LÁPIDE NÃO TEM LUZ. Dívida quitada é coisa vencida — se a
   varredura continuasse, o cinza pareceria um cartão ainda vivo com o
   brilho quebrado. */
.mc-penitencia.st-concluida .mc-giro-varredura,
.mc-penitencia.st-cancelada .mc-giro-varredura,
.mc-penitencia.st-confessada .mc-giro-varredura { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* Fica o banho de luz parado: o cartão continua bicolor por dentro,
     sem nada se movendo. */
  .mc-giro-varredura {
    animation: none;
    background-position: 50% 0;
    opacity: .4;
  }
}