/* ============================================================
   TELA · FOCO DO DIA
   ============================================================
   Nome da funcionalidade na LP: Foco do Dia · segundo item da barra
   lateral do produto. Uma funcionalidade, três rotas, três estados:

     hub     → /atividades    · Foco do Dia (estado principal da LP)
     painel  → /rotina        · Painel do Dia (as 4 cotas)
     foco    → /rotina/foco   · Modo Foco, jornada lead a lead

   Origens:
     src/app/(app)/rotina/painel-dia.tsx      (Painel do Dia)
     src/app/(app)/atividades/routine.css     (tokens e superfícies do Hub)
     src/app/(app)/atividades/hub.tsx         (estrutura do Hub)
     src/app/(app)/rotina/foco/foco.css       (rail do Modo Foco)
     src/app/(app)/rotina/foco/foco-journey.tsx
     src/components/marketing/screens/Rotina.tsx (timeline do loop)

   Medidas em cqw, escala de referência 1600px (1cqw = 16px).
   Regras marcadas /* DEMO */ /* não existem no produto.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   TOKENS DA ROTINA
   Origem: src/app/(app)/atividades/routine.css → :root

   ACHADO: esta rota declara um TERCEIRO amarelo. O produto tem
   #FFD400 (marca), #F5C518 (/mentor e painel-dia) e #FFD60A (aqui).
   Registrado em documentation/missing-information.md, item 9.
   ───────────────────────────────────────────────────────────── */
/* Os tokens ficam no nível da TELA (e não de .rotina) porque o Modo Foco
   é irmão da moldura do app, não filho dela · no produto ele é
   `position: fixed; inset: 0` por cima de tudo (foco.css:18-21). */
.tela[data-tela="foco-do-dia"] {
  --rm-yellow: #ffd60a;
  --rm-yellow-soft: #fff5b0;
  --rm-yellow-dim: #b89c00;
  --rm-black: #11110f;
  --rm-black-2: #1a1a16;
  --rm-black-3: #1f1f1a;
  --rm-line: #2a2a24;
  --rm-paper: #f6f5f1;
  --rm-paper-2: #ecebe5;
  --rm-ink: #1a1a16;
  --rm-ink-soft: #66635a;
  --rm-on-dark: #f6f5f1;
  --rm-on-dark-soft: #c8c7c0;
  --rm-on-dark-dim: #8a8780;

  /* Cores por categoria de atividade · routine.css:34-39 */
  --cat-wa: #c7b8ff;
  --cat-meet: #9be0d5;
  --cat-prop: #e8d8b0;
  --cat-react: #ffb0c8;

  /* Painel do Dia · painel-dia.tsx usa #F5C518 e derivados */
  --pd-yellow: #f5c518;
  --pd-yellow-deep: #b58900;
  --pd-ink: #17150f;
  --pd-ink-soft: #57554d;
  --pd-ink-mute: #8a887e;
  --pd-line: #e8e6df;
  --pd-paper: #f5f4f0;
  --pd-orange: #f5a623;
  --pd-green: #46c46b;
  --pd-blue: #4a9be5;
}

.rotina {
  position: absolute;
  inset: 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--pd-ink);
  background: var(--pd-paper);
  overflow: hidden;
}
.rotina *, .rotina *::before, .rotina *::after { box-sizing: border-box; }
.rotina button, .foco button { font-family: inherit; cursor: pointer; }
.foco *, .foco *::before, .foco *::after { box-sizing: border-box; }

/* ============================================================
   ESTADO 1 · PAINEL DO DIA (/rotina)
   ============================================================ */
.pd {
  position: absolute;
  inset: 0;
  padding: 1.4cqw 1.6cqw;
  display: flex;
  gap: 1.2cqw;
  overflow: hidden;
}
.pd-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Saudação + Meta do dia */
.pd-topo { display: flex; align-items: flex-start; gap: 1.2cqw; }
.pd-topo .saud { flex: 1; }
.pd-saudacao {
  font-size: 1.9cqw;
  font-weight: 900;
  letter-spacing: -0.05cqw;
  color: var(--pd-ink);
}
.pd-data { font-size: 0.85cqw; color: var(--pd-ink-mute); margin-top: 0.2cqw; }
.pd-missao { font-size: 0.95cqw; color: var(--pd-ink-soft); margin-top: 0.5cqw; }
.pd-missao b { color: var(--pd-yellow-deep); }

.pd-meta {
  width: 15cqw;
  background: #fff;
  border: 0.06cqw solid var(--pd-line);
  border-radius: 0.9cqw;
  padding: 0.8cqw 0.9cqw;
}
.pd-meta .rot {
  font-size: 0.55cqw;
  font-weight: 800;
  letter-spacing: 0.05cqw;
  text-transform: uppercase;
  color: var(--pd-ink-mute);
}
.pd-meta .pct {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 2cqw;
  font-weight: 900;
  color: var(--pd-ink);
  letter-spacing: -0.05cqw;
  line-height: 1;
  margin: 0.2cqw 0 0.4cqw;
}
.pd-meta .segs { display: flex; gap: 0.25cqw; }
.pd-meta .segs span {
  flex: 1;
  height: 0.55cqw;
  border-radius: 999px;
  background: #e4e2db;
}
.pd-meta .nota { font-size: 0.6cqw; color: var(--pd-ink-mute); margin-top: 0.4cqw; }

/* Stat cards */
.pd-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8cqw;
  margin-top: 1.1cqw;
}
.pd-stat {
  background: #fff;
  border: 0.06cqw solid var(--pd-line);
  border-radius: 0.8cqw;
  padding: 0.8cqw;
}
.pd-stat .linha { display: flex; align-items: center; gap: 0.5cqw; }
.pd-stat .ic {
  width: 1.5cqw; height: 1.5cqw;
  border-radius: 0.4cqw;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.pd-stat .ic svg { width: 0.9cqw; height: 0.9cqw; }
.pd-stat .ic.amarelo { background: rgba(245,197,24,.15); color: var(--pd-yellow-deep); }
.pd-stat .ic.azul    { background: rgba(74,155,229,.14); color: var(--pd-blue); }
.pd-stat .ic.laranja { background: rgba(245,166,35,.15); color: var(--pd-orange); }
.pd-stat .ic.verde   { background: rgba(70,196,107,.14); color: var(--pd-green); }
.pd-stat .val { font-size: 1.2cqw; font-weight: 900; color: var(--pd-ink); white-space: nowrap; }
.pd-stat .rot { font-size: 0.62cqw; color: var(--pd-ink-mute); margin-top: 0.4cqw; }

/* Título das 4 atividades */
.pd-titulo {
  font-size: 0.85cqw;
  font-weight: 800;
  color: var(--pd-ink);
  text-transform: uppercase;
  margin: 1.1cqw 0 0.7cqw;
}
.pd-titulo span { color: var(--pd-ink-mute); font-weight: 600; }

/* As 4 atividades */
.pd-ativs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8cqw; flex: 1; min-height: 0; }
.pd-ativ {
  position: relative;
  background: #fff;
  border: 0.06cqw solid var(--pd-line);
  border-radius: 0.9cqw;
  padding: 0.85cqw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* A atividade 1 é a ativa · card amarelo cheio */
.pd-ativ.ativa { background: var(--pd-yellow); border-color: var(--pd-yellow); }
.pd-ativ .cab { display: flex; align-items: center; gap: 0.4cqw; }
.pd-ativ .num { font-size: 1.5cqw; font-weight: 900; color: #c9c7be; }
.pd-ativ.ativa .num { color: var(--pd-ink); }
.pd-ativ .ordem {
  font-size: 0.5cqw; font-weight: 800; text-transform: uppercase; color: var(--pd-ink-mute);
}
.pd-ativ.ativa .ordem { color: #5a4a0a; }
.pd-ativ .nome {
  font-size: 0.85cqw; font-weight: 900; color: var(--pd-ink);
  line-height: 1.15; margin: 0.3cqw 0 0.5cqw; text-transform: uppercase;
}
.pd-ativ .alvo { font-size: 0.6cqw; color: var(--pd-ink-mute); margin-bottom: 0.5cqw; }
.pd-ativ.ativa .alvo { color: #5a4a0a; }
.pd-ativ .anel-linha { display: flex; align-items: center; gap: 0.5cqw; margin-bottom: 0.6cqw; }
.pd-anel { position: relative; width: 2.6cqw; height: 2.6cqw; flex-shrink: 0; }
.pd-anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pd-anel .valor {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 0.6cqw; font-weight: 800; color: var(--pd-ink);
}
/* Anéis das atividades 2-4 · círculo simples com borda, sem SVG (painel-dia
   usa o mesmo Ring, a vitrine simplifica · seguimos a vitrine aqui) */
.pd-anel.simples {
  border-radius: 50%;
  border: 0.18cqw solid var(--pd-yellow);
  display: grid; place-items: center;
  font-size: 0.6cqw; font-weight: 800; color: var(--pd-ink-soft);
}
.pd-ativ .contagem { font-size: 0.62cqw; font-weight: 700; color: var(--pd-ink-soft); }
.pd-ativ.ativa .contagem { color: var(--pd-ink); }
.pd-ativ .contagem span { font-weight: 600; color: var(--pd-ink-mute); }
.pd-ativ.ativa .contagem span { color: #5a4a0a; }
.pd-ativ .sub { font-size: 0.58cqw; font-weight: 800; color: var(--pd-ink); margin-bottom: 0.3cqw; }
.pd-ativ .sug { font-size: 0.62cqw; font-weight: 700; color: var(--pd-ink); line-height: 1.3; }
.pd-ativ .sug em { font-style: normal; font-size: 0.55cqw; color: #5a4a0a; font-weight: 600; display: block; }
.pd-ativ .txt { font-size: 0.6cqw; color: var(--pd-ink-soft); line-height: 1.5; }
.pd-ativ .linhas { font-size: 0.6cqw; color: var(--pd-ink-soft); line-height: 1.5; }
.pd-ativ .mais { font-size: 0.55cqw; color: #5a4a0a; margin-top: 0.35cqw; }
.pd-ativ .cta {
  margin-top: auto;
  padding-top: 0.7cqw;
}
.pd-ativ .cta > span {
  display: flex; align-items: center; justify-content: center;
  background: var(--pd-paper); color: var(--pd-ink-soft);
  font-size: 0.6cqw; font-weight: 800; text-transform: uppercase;
  border-radius: 0.5cqw; padding: 0.55cqw;
}
.pd-ativ.ativa .cta > span { background: var(--pd-ink); color: var(--pd-yellow); }
/* Toast "+1 conversa" · canto do card ativo */
.pd-toast {
  position: absolute; top: 0.7cqw; right: 0.7cqw;
  display: flex; align-items: center; gap: 0.25cqw;
  background: var(--pd-ink); color: var(--pd-green);
  font-size: 0.55cqw; font-weight: 800;
  border-radius: 999px; padding: 0.2cqw 0.5cqw;
  opacity: 0;
}
.pd-toast svg { width: 0.7cqw; height: 0.7cqw; }

/* Funil + alertas */
.pd-baixo { display: flex; flex-direction: column; gap: 0.8cqw; margin-top: 0.9cqw; }
.pd-bloco {
  background: #fff;
  border: 0.06cqw solid var(--pd-line);
  border-radius: 0.9cqw;
  padding: 0.9cqw;
}
.pd-bloco .cab {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.6cqw;
}
.pd-bloco .cab h3 {
  margin: 0; font-size: 0.72cqw; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--pd-ink);
}
.pd-bloco .cab a { font-size: 0.62cqw; font-weight: 600; color: var(--pd-yellow-deep); text-decoration: none; }
.pd-funil { display: flex; align-items: stretch; }
/* Setas do funil por clip-path · painel-dia.tsx:628-635 */
.pd-etapa {
  margin-right: -0.12cqw;
  min-width: 6.5cqw;
  flex: 1;
  border: 0.06cqw solid var(--pd-line);
  background: var(--pd-paper);
  padding: 0.6cqw 0.5cqw;
  text-align: center;
}
.pd-etapa:first-child { clip-path: polygon(0 0, calc(100% - 0.75cqw) 0, 100% 50%, calc(100% - 0.75cqw) 100%, 0 100%); }
.pd-etapa:last-child  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0.75cqw 50%); margin-right: 0; }
.pd-etapa:not(:first-child):not(:last-child) {
  clip-path: polygon(0 0, calc(100% - 0.75cqw) 0, 100% 50%, calc(100% - 0.75cqw) 100%, 0 100%, 0.75cqw 50%);
}
.pd-etapa .nome {
  font-size: 0.5cqw; font-weight: 800; text-transform: uppercase;
  color: var(--pd-ink-mute); margin-bottom: 0.3cqw;
}
.pd-etapa .n {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.3cqw; font-weight: 900; line-height: 1; color: var(--pd-ink);
}
.pd-etapa .v { font-size: 0.58cqw; font-weight: 600; color: var(--pd-yellow-deep); margin-top: 0.25cqw; }
.pd-vazio {
  border: 0.06cqw dashed var(--pd-line);
  border-radius: 0.7cqw;
  padding: 1.6cqw 0.8cqw;
  text-align: center;
  font-size: 0.7cqw;
  color: var(--pd-ink-mute);
}
.pd-alertas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2cqw; }
.pd-alerta {
  display: flex; align-items: flex-start; gap: 0.4cqw;
  padding: 0.3cqw 0;
  font-size: 0.65cqw; line-height: 1.4; color: var(--pd-ink-soft);
}
.pd-alerta svg { width: 0.8cqw; height: 0.8cqw; flex-shrink: 0; margin-top: 0.1cqw; }
.pd-alerta.warn svg { color: var(--pd-orange); }
.pd-alerta.ok svg   { color: var(--pd-green); }

/* Trilho direito */
.pd-trilho { width: 15cqw; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.9cqw; }
.pd-missao-card {
  background: #fbf7e6;
  border: 0.06cqw solid #ede4c4;
  border-radius: 0.9cqw;
  padding: 0.85cqw;
}
.pd-missao-card .rot {
  font-size: 0.55cqw; font-weight: 800; letter-spacing: 0.05cqw;
  text-transform: uppercase; color: var(--pd-yellow-deep);
}
.pd-missao-card .frase {
  font-size: 0.9cqw; font-weight: 800; color: var(--pd-ink);
  line-height: 1.3; margin: 0.3cqw 0 0.5cqw;
}
/* Assinatura manuscrita · --font-script = Caveat (tailwind.config.ts) */
.pd-missao-card .assina { font-family: "Caveat", cursive; font-size: 1.2cqw; color: var(--pd-yellow-deep); }

.pd-gpt {
  flex: 1;
  background: #0e0e11;
  border-radius: 0.9cqw;
  padding: 0.85cqw;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pd-gpt .cab {
  display: flex; align-items: center; gap: 0.4cqw;
  font-size: 0.6cqw; font-weight: 800; text-transform: uppercase; color: var(--pd-yellow);
}
.pd-gpt .cab svg { width: 0.9cqw; height: 0.9cqw; }
.pd-gpt .perg { font-size: 0.95cqw; font-weight: 800; color: #f6f5f1; margin: 0.4cqw 0 0.5cqw; }
.pd-gpt .campo {
  display: flex; align-items: center; gap: 0.4cqw;
  background: #141417; border: 0.06cqw solid #26262c;
  border-radius: 0.55cqw; padding: 0.5cqw 0.6cqw;
}
.pd-gpt .campo span:first-child { flex: 1; font-size: 0.65cqw; color: #5a5852; }
.pd-gpt .campo .seta {
  width: 1.4cqw; height: 1.4cqw; border-radius: 0.4cqw;
  background: var(--pd-yellow); color: #0a0a0b;
  display: grid; place-items: center; flex-shrink: 0;
}
.pd-gpt .campo .seta svg { width: 0.85cqw; height: 0.85cqw; }
.pd-gpt .rot-chips {
  font-size: 0.55cqw; font-weight: 800; text-transform: uppercase;
  color: var(--pd-ink-mute); margin: 0.7cqw 0 0.4cqw;
}
.pd-gpt .chips { display: flex; flex-direction: column; }
.pd-gpt .chip {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4cqw;
  border-bottom: 0.06cqw solid rgba(255,255,255,.1);
  padding: 0.4cqw 0;
  font-size: 0.68cqw; color: #c7c5bc;
}
.pd-gpt .chip svg { width: 0.7cqw; height: 0.7cqw; color: #5a5852; flex-shrink: 0; }
.pd-gpt .todas {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 0.5cqw; font-size: 0.68cqw; font-weight: 700; color: var(--pd-yellow);
}
.pd-gpt .todas svg { width: 0.7cqw; height: 0.7cqw; }

/* ============================================================
   ESTADO 2 · HUB DA ROTINA COMERCIAL (/atividades)
   ============================================================ */
/* O Hub rola no produto (é uma página inteira). Na moldura travada de
   1600x900 a lista de ações fica abaixo da dobra · o scroll a alcança. */
.hub { position: absolute; inset: 0; background: var(--rm-paper); overflow-y: auto; }

/* Banner de geração · routine.css:77 */
.rt-genbar {
  display: flex; align-items: center; gap: 0.75cqw;
  padding: 0.625cqw 1.5cqw;
  background: #fff;
  border-bottom: 0.06cqw solid #e6e4dc;
  font-size: 0.75cqw;
  color: var(--rm-ink-soft);
}
.rt-genbar-mark {
  width: 1.375cqw; height: 1.375cqw;
  border-radius: 0.44cqw;
  background: linear-gradient(135deg, var(--rm-yellow) 0%, var(--cat-react) 100%);
  color: var(--rm-black);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.rt-genbar-mark svg { width: 0.75cqw; height: 0.75cqw; }
.rt-genbar strong { color: var(--rm-ink); font-weight: 600; }
.rt-pill {
  display: inline-flex; align-items: center; gap: 0.3cqw;
  border: 0.06cqw solid #e6e4dc; border-radius: 999px;
  padding: 0.2cqw 0.55cqw; font-size: 0.68cqw;
}
.rt-livedot { width: 0.375cqw; height: 0.375cqw; border-radius: 999px; background: #10b981; }
.rt-ghost {
  display: inline-flex; align-items: center; gap: 0.3cqw;
  padding: 0.375cqw 0.625cqw;
  background: transparent; color: var(--rm-ink-soft);
  border: 0.06cqw solid #e6e4dc; border-radius: 0.4cqw;
  font-size: 0.68cqw; font-weight: 500;
  transition: background 0.15s ease;
}
.rt-ghost:hover { background: var(--rm-paper-2); color: var(--rm-ink); }
.rt-ghost svg { width: 0.75cqw; height: 0.75cqw; }

.rt-hub { padding: 1.1cqw 2cqw 1.5cqw; max-width: 77.5cqw; margin: 0 auto; }

/* HERO preto */
.rt-hero {
  position: relative;
  border-radius: 1.375cqw;
  padding: 1.6cqw 2cqw 1.5cqw;
  background: var(--rm-black);
  color: var(--rm-on-dark);
  overflow: hidden;
}
.rt-hero-grid { display: grid; grid-template-columns: 1fr 17cqw; gap: 2cqw; align-items: start; }
.rt-hero-meta {
  display: flex; align-items: center; gap: 0.5cqw;
  font-size: 0.72cqw; color: var(--rm-on-dark-soft);
}
.rt-hero-meta svg { width: 0.875cqw; height: 0.875cqw; color: var(--rm-yellow); }
.rt-hero-meta-dot { width: 0.2cqw; height: 0.2cqw; border-radius: 999px; background: var(--rm-on-dark-dim); }
.rt-hero h1 {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.9cqw; font-weight: 700; letter-spacing: -0.02em;
  margin: 0.5cqw 0 0.3cqw;
}
.rt-hero .linha { color: var(--rm-on-dark-soft); font-size: 0.9cqw; margin: 0 0 1cqw; }
.rt-bignum {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 4.5cqw; font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; color: var(--rm-yellow);
}
.rt-bigsub { font-size: 1cqw; color: var(--rm-on-dark-soft); }
.rt-hero .criticas { color: var(--rm-on-dark-soft); font-size: 0.85cqw; margin: 0.5cqw 0 1.2cqw; }
.rt-emph-y { color: var(--rm-yellow); font-weight: 600; }

.rt-progress { margin-bottom: 1.1cqw; max-width: 30cqw; }
.rt-progress-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.72cqw; color: var(--rm-on-dark-soft); margin-bottom: 0.4cqw;
}
.rt-progress-pct { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 600; color: var(--rm-on-dark); }
.rt-progress-track { height: 0.5cqw; border-radius: 999px; background: var(--rm-black-3); overflow: hidden; }
.rt-progress-fill {
  height: 100%; border-radius: 999px; background: var(--rm-yellow);
  transition: width 0.4s ease;
}
.rt-cta {
  display: inline-flex; align-items: center; gap: 0.625cqw;
  padding: 0.875cqw 1.5cqw;
  background: var(--rm-yellow); color: var(--rm-black);
  border: 0; border-radius: 0.75cqw;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 600; font-size: 0.94cqw;
  box-shadow: 0 0.375cqw 1.125cqw rgba(255, 214, 10, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rt-cta:hover,
/* .rt-cta-press aplica o MESMO estado :hover por script · usado no loop
   da LP pra mostrar a causa do takeover que vem em seguida. Não é efeito
   novo: é o hover que já existe em routine.css:253. */
.rt-cta.rt-cta-press { transform: translateY(-0.06cqw); box-shadow: 0 0.625cqw 1.375cqw rgba(255, 214, 10, 0.34); }
.rt-cta svg { width: 1.125cqw; height: 1.125cqw; }

/* Painel de sequência */
.rt-streak {
  border: 0.06cqw solid var(--rm-line);
  border-radius: 1cqw;
  background: var(--rm-black-2);
  padding: 1.1cqw;
}
.rt-streak-label {
  display: flex; align-items: center; gap: 0.375cqw;
  font-size: 0.75cqw; color: var(--rm-on-dark-soft); margin-bottom: 0.5cqw;
}
.rt-streak-label svg { width: 0.875cqw; height: 0.875cqw; color: var(--rm-yellow); }
.rt-streak-num {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 2.4cqw; font-weight: 700; line-height: 1; color: var(--rm-yellow);
}
.rt-streak-row { display: flex; gap: 0.25cqw; margin: 0.9cqw 0 0.6cqw; }
.rt-streak-row > div { display: flex; flex-direction: column; align-items: center; gap: 0.25cqw; flex: 1; }
.rt-streak-dot {
  width: 0.75cqw; height: 0.75cqw; border-radius: 999px;
  background: var(--rm-black-3); border: 0.06cqw solid var(--rm-line);
}
.rt-streak-dot.on { background: var(--rm-yellow); border-color: var(--rm-yellow); }
.rt-streak-dot.today { box-shadow: 0 0 0 0.19cqw rgba(255, 214, 10, 0.2); }
.rt-streak-row span { font-size: 0.56cqw; color: var(--rm-on-dark-dim); font-weight: 600; }
.rt-streak-note { font-size: 0.68cqw; color: var(--rm-on-dark-dim); line-height: 1.5; }

/* Banner de retomada */
.rt-resume-banner {
  display: flex; align-items: center; gap: 0.5cqw;
  margin-top: 1.1cqw;
  background: var(--rm-yellow-soft);
  border: 0.06cqw solid var(--rm-yellow);
  border-radius: 0.75cqw;
  padding: 0.625cqw 0.875cqw;
  font-size: 0.75cqw;
  color: var(--rm-ink);
}
.rt-resume-banner svg { width: 0.875cqw; height: 0.875cqw; flex-shrink: 0; }
.rt-resume-banner button {
  margin-left: auto;
  border: 0; background: var(--rm-black); color: var(--rm-yellow);
  border-radius: 0.4cqw; padding: 0.31cqw 0.625cqw;
  font-size: 0.68cqw; font-weight: 700;
}

/* Breakdown por tipo */
.rt-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75cqw; margin-top: 1.1cqw; }
.rt-stat-card {
  background: #fff; border: 0.06cqw solid #e6e4dc;
  border-radius: 0.875cqw; padding: 0.875cqw;
}
.rt-stat-ic {
  width: 1.75cqw; height: 1.75cqw; border-radius: 0.5cqw;
  display: grid; place-items: center; color: var(--rm-ink);
  margin-bottom: 0.5cqw;
}
.rt-stat-ic svg { width: 1cqw; height: 1cqw; }
.rt-stat-num {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.6cqw; font-weight: 700; line-height: 1; color: var(--rm-ink);
  font-variant-numeric: tabular-nums;
}
.rt-stat-lbl { font-size: 0.68cqw; color: var(--rm-ink-soft); margin-top: 0.25cqw; }

/* Prioridade nº 1 */
.rt-priority {
  margin-top: 1.1cqw;
  background: #fff; border: 0.06cqw solid #e6e4dc;
  border-radius: 1cqw; padding: 1.1cqw 1.25cqw;
  display: grid; grid-template-columns: 1fr auto; gap: 1.5cqw; align-items: center;
}
.rt-spark {
  width: 1.75cqw; height: 1.75cqw; border-radius: 0.5cqw;
  background: linear-gradient(135deg, var(--rm-yellow) 0%, var(--cat-react) 100%);
  color: var(--rm-black); display: grid; place-items: center; flex-shrink: 0;
}
.rt-spark svg { width: 1cqw; height: 1cqw; }
.rt-priority-tag {
  display: inline-flex; align-items: center; gap: 0.31cqw;
  font-size: 0.68cqw; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--rm-yellow-dim);
}
.rt-priority h2 {
  margin: 0; font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.25cqw; font-weight: 700; letter-spacing: -0.02em; color: var(--rm-ink);
}
.rt-priority .rt-co { color: var(--rm-ink-soft); font-weight: 500; }
.rt-priority .meta {
  display: flex; align-items: center; gap: 0.5cqw;
  margin-top: 0.375cqw; font-size: 0.72cqw; color: var(--rm-ink-soft);
}
.rt-pill.warn {
  border-color: #f5a623; color: #b06a00; background: rgba(245,166,35,.12);
  gap: 0.25cqw;
}
.rt-pill.warn svg { width: 0.68cqw; height: 0.68cqw; }

/* Lista de ações */
.rt-list { margin-top: 1.1cqw; background: #fff; border: 0.06cqw solid #e6e4dc; border-radius: 1cqw; overflow: hidden; }
.rt-list-head { padding: 0.875cqw 1.25cqw; border-bottom: 0.06cqw solid #e6e4dc; }
.rt-list-head h3 {
  margin: 0; font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.94cqw; font-weight: 700; color: var(--rm-ink);
}
.rt-row {
  display: flex; align-items: center; gap: 0.75cqw;
  padding: 0.75cqw 1.25cqw;
  border-bottom: 0.06cqw solid #f0efe9;
  transition: background 0.1s ease;
}
.rt-row:last-child { border-bottom: 0; }
.rt-row:hover { background: var(--rm-paper); }
.rt-row-num {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.85cqw; font-weight: 700; color: #c4c1b6;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.rt-row-ic {
  width: 1.5cqw; height: 1.5cqw; border-radius: 0.44cqw;
  display: grid; place-items: center; flex-shrink: 0; color: var(--rm-ink);
}
.rt-row-ic svg { width: 0.85cqw; height: 0.85cqw; }
.rt-row-body { flex: 1; min-width: 0; }
.rt-row-title { font-size: 0.82cqw; font-weight: 600; color: var(--rm-ink); }
.rt-row-sub { font-size: 0.68cqw; color: var(--rm-ink-soft); margin-top: 0.12cqw; }
.rt-row-time {
  font-size: 0.72cqw; color: var(--rm-ink-soft);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.rt-row-arrow { color: #c4c1b6; flex-shrink: 0; }
.rt-row-arrow svg { width: 0.85cqw; height: 0.85cqw; }
.rt-list-vazio { padding: 2cqw 1.25cqw; text-align: center; font-size: 0.8cqw; color: var(--rm-ink-soft); }

/* Comemoração de conclusão · routine.css:1228 */
.rt-burst {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: rgba(17, 17, 15, 0.5);
  animation: rt-burst-bg 600ms ease-out both;
}
.rt-burst-check {
  width: 7.5cqw; height: 7.5cqw; border-radius: 50%;
  background: #10b981; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 1.875cqw 5cqw rgba(16,185,129,.4),
              0 0 0 0.75cqw rgba(16,185,129,.15),
              0 0 0 1.5cqw rgba(16,185,129,.08);
  animation: rt-burst-pop 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.rt-burst-check svg {
  width: 3.5cqw; height: 3.5cqw;
  animation: rt-burst-tick 400ms 80ms cubic-bezier(0.5, 0, 0.2, 1) both;
}

/* ============================================================
   ESTADO 3 · MODO FOCO (/rotina/foco)
   ============================================================
   Takeover de tela cheia: esconde topbar e sidebar
   (foco.css:8 · body.painel-foco-active [data-app-chrome]).
   Grid de 3 colunas: rail 280px | chat 1fr | copiloto 380px.
   ============================================================ */
.foco {
  position: absolute; inset: 0; z-index: 20;
  display: grid;
  grid-template-columns: 17.5cqw minmax(0, 1fr) 23.75cqw;
  grid-template-rows: minmax(0, 1fr);
}
/* Quando o Modo Foco está ativo, a moldura do app some (visibility, como
   no produto · o espaço continua ocupado, não é display:none) */
.tela[data-estado-ativo="foco"] .app-topbar,
.tela[data-estado-ativo="foco"] .app-sidebar { visibility: hidden; }

.pf-rail {
  background: #0a0a0b;
  color: #f4f3f0;
  display: flex; flex-direction: column;
  padding: 1.375cqw 1.25cqw;
  border-right: 0.06cqw solid #1f1f23;
  min-height: 0; overflow: hidden;
}
.pf-rail-top { display: flex; align-items: center; gap: 0.625cqw; margin-bottom: 1.5cqw; }
.pf-exit {
  width: 2.125cqw; height: 2.125cqw;
  display: grid; place-items: center;
  border-radius: 0.56cqw;
  border: 0.06cqw solid #2a2a2e; background: #161618; color: #c2c0b8;
  flex-shrink: 0;
}
.pf-exit:hover { background: #1f1f23; color: #fff; }
.pf-exit svg { width: 1.125cqw; height: 1.125cqw; }
.pf-brand {
  font-size: 0.78cqw; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: #8b8980;
}
.pf-progress { margin-bottom: 1.625cqw; }
.pf-progress-num {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 2.5cqw; font-weight: 800; line-height: 1;
  letter-spacing: -0.02em; color: #f5c518;
}
.pf-progress-num span {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.94cqw; font-weight: 600; color: #8b8980;
}
.pf-progress-bar {
  margin-top: 0.75cqw; height: 0.375cqw;
  border-radius: 999px; background: #222226; overflow: hidden;
}
.pf-progress-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: #f5c518; transition: width 0.25s ease;
}
.pf-lead-name { font-size: 1.19cqw; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.pf-lead-sub { margin-top: 0.19cqw; font-size: 0.81cqw; color: #8b8980; }
.pf-deal {
  margin-top: 1cqw;
  border: 0.06cqw solid #2a2a2e; border-radius: 0.75cqw;
  background: #161618; padding: 0.75cqw 0.875cqw;
}
.pf-deal-title { font-size: 0.84cqw; font-weight: 700; color: #f4f3f0; line-height: 1.25; }
.pf-deal-meta { margin-top: 0.19cqw; font-size: 0.78cqw; font-weight: 600; color: #f5c518; }
.pf-rail-actions { margin-top: auto; display: flex; flex-direction: column; gap: 0.5cqw; padding-top: 1.25cqw; }
.pf-next {
  display: flex; align-items: center; justify-content: center; gap: 0.375cqw;
  width: 100%; padding: 0.81cqw;
  border: 0; border-radius: 0.69cqw;
  background: #f5c518; color: #0a0a0b;
  font-size: 0.875cqw; font-weight: 800;
  transition: filter 0.12s;
}
.pf-next:hover { filter: brightness(1.05); }
.pf-next svg { width: 1cqw; height: 1cqw; }
.pf-skip {
  display: flex; align-items: center; justify-content: center; gap: 0.375cqw;
  width: 100%; padding: 0.56cqw;
  border: 0; background: transparent; color: #8b8980;
  font-size: 0.81cqw; font-weight: 600;
}
.pf-skip:hover { color: #f4f3f0; }
.pf-skip svg { width: 0.875cqw; height: 0.875cqw; }
.pf-hint { margin-top: 0.875cqw; font-size: 0.69cqw; line-height: 1.6; color: #5e5c55; }
.pf-hint b { color: #8b8980; }

/* Coluna 2 · chat */
.pf-chat {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: #efe9df;
  overflow: hidden;
}
.pf-chat-head {
  display: flex; align-items: center; gap: 0.625cqw;
  padding: 0.75cqw 1.25cqw;
  background: #fff;
  border-bottom: 0.06cqw solid #e6e4dc;
  flex-shrink: 0;
}
.pf-chat-head .av {
  width: 2cqw; height: 2cqw; border-radius: 50%;
  background: #d8d4ca; color: #5e5c55;
  display: grid; place-items: center;
  font-size: 0.7cqw; font-weight: 700;
}
.pf-chat-head .nm { font-size: 0.85cqw; font-weight: 700; color: var(--rm-ink); }
.pf-chat-head .sb { font-size: 0.66cqw; color: var(--rm-ink-soft); }
.pf-chat-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 1cqw 1.5cqw;
  display: flex; flex-direction: column; gap: 0.4cqw;
}
.pf-day {
  align-self: center;
  background: #fff; border: 0.06cqw solid #e6e4dc;
  font-size: 0.6cqw; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rm-ink-soft);
  padding: 0.19cqw 0.625cqw; border-radius: 999px; margin: 0.25cqw 0;
}
.pf-bubble {
  max-width: 70%;
  padding: 0.5cqw 0.75cqw 0.375cqw;
  font-size: 0.8cqw; line-height: 1.45; border-radius: 0.75cqw;
}
.pf-bubble.in {
  background: #fff; align-self: flex-start;
  border-bottom-left-radius: 0.19cqw; color: var(--rm-ink);
}
.pf-bubble.out {
  background: #d8f0d6; align-self: flex-end;
  border-bottom-right-radius: 0.19cqw; color: var(--rm-ink);
}
.pf-bubble .h { font-size: 0.56cqw; color: var(--rm-ink-soft); margin-left: 0.375cqw; }
.pf-composer {
  flex-shrink: 0;
  background: #fff;
  border-top: 0.06cqw solid #e6e4dc;
  padding: 0.75cqw 1.25cqw;
  display: flex; align-items: center; gap: 0.625cqw;
}
.pf-composer .campo {
  flex: 1;
  background: var(--rm-paper); border: 0.06cqw solid #e6e4dc;
  border-radius: 0.75cqw; padding: 0.56cqw 0.75cqw;
  font-size: 0.8cqw; color: var(--rm-ink-soft);
}
.pf-composer .env {
  width: 2cqw; height: 2cqw; border-radius: 0.56cqw;
  background: #f5c518; color: #11110f;
  display: grid; place-items: center; border: 0; flex-shrink: 0;
}
.pf-composer .env svg { width: 0.875cqw; height: 0.875cqw; }
.pf-empty {
  display: grid; place-items: center;
  padding: 1.5cqw; text-align: center;
  background: #f6f5f1; color: #8b8980; font-size: 0.875cqw;
  height: 100%;
}

/* ─────────────────────────────────────────────────────────────
   LOOP DO MODO FOCO (peça animada da LP)
   ------------------------------------------------------------
   Encadeia três movimentos que já existem no produto:
     1. `rt-slide-in` · o conteúdo do próximo lead entra deslizando
        da direita (routine.css:1216 · 320ms)
     2. a barra da jornada anda (foco.css:130 · 250ms ease)
     3. o burst verde de conclusão (routine.css:1254 · disparado por
        showBurstThen em focus.tsx:216, que navega em 340ms e some
        em 700ms)

   O LOOP EM SI NÃO EXISTE NO PRODUTO · lá quem avança é o vendedor.
   O que está encadeado aqui é a sequência real, na ordem real, com
   as durações reais. Registrado em animation-specs.md.
   ───────────────────────────────────────────────────────────── */
.pf-anim { animation: rt-slide-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* O burst vive dentro do Modo Foco · cobre as três colunas */
.foco .rt-burst { position: absolute; inset: 0; z-index: 40; }

/* Coluna 3 · copiloto */
.pf-ai {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: #fff;
  border-left: 0.06cqw solid #e6e4dc;
  overflow: hidden;
}
.pf-ai-head {
  display: flex; align-items: center; gap: 0.5cqw;
  padding: 0.875cqw 1cqw;
  border-bottom: 0.06cqw solid #e6e4dc;
  font-size: 0.8cqw; font-weight: 700; color: var(--rm-ink);
}
.pf-ai-head svg { width: 0.94cqw; height: 0.94cqw; color: var(--pd-yellow-deep); }
.pf-ai-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1cqw; }
.pf-sug {
  position: relative;
  background: rgba(245,197,24,.2);
  border: 0.09cqw dashed #d9a800;
  border-radius: 0.75cqw;
  padding: 0.875cqw;
  margin-top: 0.75cqw;
  font-size: 0.8cqw; line-height: 1.5; color: var(--rm-ink);
}
.pf-sug::before {
  content: "PROPOSTA DO JORDÃO";
  position: absolute; top: -0.56cqw; right: 0.625cqw;
  background: #1a1814; color: #f5c518;
  font-size: 0.5cqw; font-weight: 800; letter-spacing: 0.14em;
  padding: 0.125cqw 0.44cqw; border-radius: 0.25cqw;
}
.pf-ctx {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5cqw;
  padding: 0.75cqw 0; margin-top: 0.875cqw;
  border-top: 0.06cqw solid #e6e4dc;
  border-bottom: 0.06cqw solid #e6e4dc;
}
.pf-ctx .lbl {
  display: block;
  font-size: 0.56cqw; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: #b5afa3; margin-bottom: 0.12cqw;
}
.pf-ctx .val { font-size: 0.8cqw; font-weight: 700; color: var(--rm-ink); }
.pf-ai-actions { display: flex; flex-direction: column; gap: 0.375cqw; margin-top: 0.875cqw; }

/* ============================================================
   DEMO · troca de estado
   ============================================================ */
[data-estado]:not(.mostrar) { display: none; }

/* Cascata do loop · só no estado painel */
.tela[data-estado-ativo="painel"] [data-passo] { opacity: 0; }
.tela[data-estado-ativo="painel"] [data-passo="crd1"] { animation: rot-crd1 4.5s infinite; }
.tela[data-estado-ativo="painel"] [data-passo="crd2"] { animation: rot-crd2 4.5s infinite; }
.tela[data-estado-ativo="painel"] [data-passo="crd3"] { animation: rot-crd3 4.5s infinite; }
.tela[data-estado-ativo="painel"] [data-passo="crd4"] { animation: rot-crd4 4.5s infinite; }
.tela[data-estado-ativo="painel"] [data-passo="act1"] { animation: rot-act1 4.5s infinite; }
.tela[data-estado-ativo="painel"] [data-passo="act2"] { animation: rot-act2 4.5s infinite; }
.tela[data-estado-ativo="painel"] [data-passo="act3"] { animation: rot-act3 4.5s infinite; }
.tela[data-estado-ativo="painel"] [data-passo="act4"] { animation: rot-act4 4.5s infinite; }
.tela[data-estado-ativo="painel"] .pd-toast { animation: rot-toast 4.5s infinite; }
.tela[data-estado-ativo="painel"] .pd-segA { animation: rot-segA 4.5s infinite; }
.tela[data-estado-ativo="painel"] .pd-segB { animation: rot-segB 4.5s infinite; }
.tela[data-estado-ativo="painel"] .pd-segC { animation: rot-segC 4.5s infinite; }
.tela[data-estado-ativo="painel"] .pd-anel-fill { animation: rot-ringfill 4.5s infinite; }
.tela[data-estado-ativo="painel"] .pd-ativ.ativa { animation: rot-act1 4.5s infinite, rot-btnpulse 4.5s infinite; }

/* Fora do loop, tudo parado e visível */
.tela:not([data-estado-ativo="painel"]) [data-passo] { opacity: 1; }
.tela:not([data-estado-ativo="painel"]) .pd-toast { opacity: 0; }
.tela:not([data-estado-ativo="painel"]) .pd-segA,
.tela:not([data-estado-ativo="painel"]) .pd-segB,
.tela:not([data-estado-ativo="painel"]) .pd-segC { background: var(--pd-yellow); }
.tela:not([data-estado-ativo="painel"]) .pd-anel-fill { stroke-dashoffset: 55; }

.oculto { display: none !important; }