/* ============ roteiro.css — tela de escolha do roteiro + botão "Roteiro" ============
   Par do roteiro.js. Tudo com prefixo rt- porque o CSS do deck tem regra
   global (section{…}) e classes genéricas (.divider, .btn, .nm…).

   Cores: só as variáveis do deck — --brand e derivadas (styles.css) e as que
   o Apresentacao.php injeta: --cover-panel/--cover-fg (o painel da capa, que
   fica claro com texto escuro quando a marca é clara) e --brand-fg (texto
   legível SOBRE --brand). Texto de destaque sobre branco usa --brand-deep,
   que é sempre escuro o bastante.

   Mostrar/esconder é por [hidden]/display, nunca por transição de opacity
   (as transições do deck já congelaram em navegador lento). */

/* ---------- utilitário ---------- */
.rt-oculto{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* Rolagem da página travada enquanto a tela está aberta. */
html.rt-trava{overflow:hidden;}

/* ============ Tela de escolha ============ */
.rt-tela{
  /* --u = 1px no desenho de 1920×1080, encolhendo pelo eixo mais apertado da
     janela; o piso evita letra miúda em notebook pequeno. Só a versão larga
     (paisagem ≥ 900px) usa; no celular os tamanhos são fixos. */
  --u:clamp(0.62px, min(0.05208vw, 0.09259vh), 1.2px);
  --rt-ink:var(--ink, #0b1220);
  --rt-dest:var(--brand-deep, #1e3a8a);

  position:fixed; inset:0; z-index:2147483646;   /* acima do .rail-toggle (…640) e da barra do deck (…000) */
  display:block;
  overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  background:#fff; color:var(--rt-ink);
  font-family:var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size:16px; line-height:1.4; text-align:left;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
.rt-tela[hidden]{display:none !important;}
.rt-tela *, .rt-tela *::before, .rt-tela *::after{box-sizing:border-box;}
/* :where() zera a especificidade: o reset não pode vencer o margin-top das
   classes abaixo (.rt-h1, .rt-lead…). */
.rt-tela :where(p, h1, h2){margin:0;}
.rt-tela button{font-family:inherit; -webkit-tap-highlight-color:transparent;}
.rt-tela [hidden]{display:none !important;}

/* ---------- painel da marca ---------- */
.rt-marca{
  --rt-fg:var(--cover-fg, #fff);
  position:relative; overflow:hidden;
  padding:26px 20px 22px;
  background:var(--cover-panel, var(--brand-deep, #1e3a8a));
  color:var(--rt-fg);
}
.rt-deco{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.rt-deco span{
  position:absolute; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.10);
  border-color:color-mix(in srgb, var(--rt-fg) 10%, transparent);
}
.rt-deco span:nth-child(1){width:280px; height:280px; top:-130px; right:-120px;}
.rt-deco span:nth-child(2){width:180px; height:180px; top:-80px; right:-60px;}
.rt-deco span:nth-child(3){display:none;}

.rt-marca-topo{position:relative; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 12px;}
.rt-marca .wl-logo-img{max-height:36px; max-width:200px;}
.rt-marca .wl-logo-ph{gap:10px;}
.rt-marca .wl-logo-ph .mk{width:32px; height:32px;}
.rt-marca .wl-logo-ph .nm{font-size:19px; color:var(--rt-fg);}
.rt-marca .wl-logo-ph .nm small{
  font-size:9px; margin-top:2px; color:rgba(255,255,255,.6);
  color:color-mix(in srgb, var(--rt-fg) 62%, transparent);
}

.rt-fechar{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px;
  border-radius:999px; border:1.5px solid rgba(255,255,255,.35);
  border-color:color-mix(in srgb, var(--rt-fg) 35%, transparent);
  background:transparent; color:var(--rt-fg);
  font-size:14px; font-weight:600; line-height:1; cursor:pointer;
}
.rt-fechar:hover{background:rgba(255,255,255,.12); background:color-mix(in srgb, var(--rt-fg) 12%, transparent);}
.rt-fechar svg{width:18px; height:18px; flex:none;}
.rt-fechar-curto{display:none;}
@media (max-width:420px){
  .rt-fechar-longo{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}
  .rt-fechar-curto{display:inline;}
}

.rt-intro{position:relative; margin-top:28px;}
.rt-eyebrow{
  font-family:var(--font-mono, 'JetBrains Mono', monospace); font-size:11px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.72); color:color-mix(in srgb, var(--rt-fg) 78%, transparent);
}
.rt-h1{
  margin-top:10px;
  font-family:var(--font-display, 'Inter Tight', system-ui, sans-serif); font-weight:700;
  font-size:32px; line-height:1.05; letter-spacing:-.025em; color:var(--rt-fg);
}
.rt-lead{
  margin-top:8px; font-size:15px; line-height:1.45;
  color:rgba(255,255,255,.82); color:color-mix(in srgb, var(--rt-fg) 85%, transparent);
}

/* caminhos (rádio nativo escondido + cartão desenhado no irmão) */
.rt-caminhos{position:relative; margin-top:20px; display:flex; flex-direction:column; gap:8px;}
.rt-caminho{position:relative; display:block; cursor:pointer;}
.rt-caminho-caixa{
  display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 12px;
  border-radius:13px; border:1.5px solid rgba(255,255,255,.16);
  border-color:color-mix(in srgb, var(--rt-fg) 16%, transparent);
  background:transparent; color:var(--rt-fg);
}
.rt-caminho:hover .rt-caminho-caixa{border-color:color-mix(in srgb, var(--rt-fg) 42%, transparent);}
.rt-radio{
  flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); border-color:color-mix(in srgb, var(--rt-fg) 55%, transparent);
}
.rt-radio::after{content:""; display:none; width:10px; height:10px; border-radius:50%; background:var(--rt-fg);}
.rt-caminho-n{
  flex:none; order:3;   /* no celular o número vai para a ponta direita */
  font-family:var(--font-mono, monospace); font-size:12px; font-weight:700;
  color:rgba(255,255,255,.72); color:color-mix(in srgb, var(--rt-fg) 78%, transparent);
}
.rt-caminho-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.rt-caminho-t{
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px;
  font-family:var(--font-display, 'Inter Tight', system-ui, sans-serif); font-weight:700;
  font-size:17px; line-height:1.2;
}
.rt-caminho-s{
  font-size:13px; line-height:1.35;
  color:rgba(255,255,255,.76); color:color-mix(in srgb, var(--rt-fg) 82%, transparent);
}
.rt-caminho-custom{
  font-family:var(--font-mono, monospace); font-size:9.5px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 7px; border-radius:999px;
  background:rgba(255,255,255,.16); background:color-mix(in srgb, var(--rt-fg) 16%, transparent);
  color:var(--rt-fg);
}
.rt-caminho input:checked + .rt-caminho-caixa{
  background:rgba(255,255,255,.12); background:color-mix(in srgb, var(--rt-fg) 12%, transparent);
  border-color:var(--rt-fg);
}
.rt-caminho input:checked + .rt-caminho-caixa .rt-radio{border-color:var(--rt-fg);}
.rt-caminho input:checked + .rt-caminho-caixa .rt-radio::after{display:block;}
.rt-caminho input:focus-visible + .rt-caminho-caixa{outline:3px solid var(--rt-fg); outline-offset:3px;}

/* ---------- painel do roteiro ---------- */
.rt-roteiro{padding:22px 20px 28px; display:flex; flex-direction:column; min-width:0; background:#fff;}
.rt-eyebrow2{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono, monospace); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rt-dest);
}
.rt-traco{flex:none; width:22px; height:2px; border-radius:2px; background:currentColor;}
.rt-cab{margin-top:8px; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:4px 16px;}
.rt-h2{
  font-family:var(--font-display, 'Inter Tight', system-ui, sans-serif); font-weight:700;
  font-size:24px; line-height:1.15; letter-spacing:-.015em; color:var(--rt-ink);
}
.rt-restaurar{
  flex:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 6px;
  border:0; border-radius:10px; background:transparent; color:var(--rt-dest);
  font-size:14px; font-weight:600; cursor:pointer;
}
.rt-restaurar:hover{background:var(--brand-wash, #eff6ff);}
.rt-restaurar svg{width:15px; height:15px; flex:none;}

.rt-selos{margin-top:10px; display:flex; align-items:center; flex-wrap:wrap; gap:8px;}
.rt-total{
  font-family:var(--font-mono, monospace); font-size:12px; font-weight:500;
  padding:5px 10px; border-radius:999px;
  background:var(--brand-wash, #eff6ff); color:var(--rt-dest); border:1px solid var(--brand-line, #bfdbfe);
}
.rt-selo{
  font-family:var(--font-mono, monospace); font-size:10.5px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 9px; border-radius:999px;
}
.rt-selo--dedicada{border:1px solid #cbd5e1; color:#475569;}
.rt-selo--custom{background:#fffbeb; border:1px solid #fcd34d; color:#92400e;}
.rt-ajuda{margin-top:10px; font-size:13.5px; line-height:1.45; color:#475569;}

/* linhas das áreas */
.rt-lista{margin-top:14px; border-top:1px solid #e2e8f0;}
.rt-linha{display:flex; align-items:center; flex-wrap:wrap; gap:0 10px; min-height:44px; border-bottom:1px solid #e2e8f0;}
.rt-linha-rot{flex:1; min-width:0; display:flex; align-items:center; gap:10px; min-height:44px;}
.rt-cadeado{
  flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:6px;
  background:#f1f5f9; color:#64748b;
}
.rt-cadeado svg{width:12px; height:12px;}
.rt-linha-t{font-size:15.5px; line-height:1.25; font-weight:400; color:#475569;}
.rt-linha.is-on .rt-linha-t{font-weight:600; color:var(--rt-ink);}
.rt-nota{flex:none; font-family:var(--font-mono, monospace); font-size:11.5px; color:#64748b; white-space:nowrap;}
.rt-linha.is-on .rt-nota{color:#475569;}

.rt-alterna{position:relative; flex:1; min-width:0; display:block; cursor:pointer;}
.rt-alterna-caixa{display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 0; border-radius:8px;}
.rt-check{
  flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:6px;
  border:2px solid #64748b; background:#fff; color:var(--brand-fg, #fff);
}
.rt-check svg{width:13px; height:13px; visibility:hidden;}
.rt-alterna input:checked + .rt-alterna-caixa .rt-check{background:var(--brand); border-color:var(--brand);}
.rt-alterna input:checked + .rt-alterna-caixa .rt-check svg{visibility:visible;}
.rt-alterna:hover .rt-check{border-color:#334155;}
.rt-alterna:hover input:checked + .rt-alterna-caixa .rt-check{border-color:var(--brand);}
.rt-alterna input:focus-visible + .rt-alterna-caixa{outline:3px solid var(--rt-dest); outline-offset:2px;}

/* MRP: Fora / Resumo / Completo — no celular numa linha própria, alinhada ao texto */
.rt-modos{
  flex:0 0 calc(100% - 32px); margin:0 0 10px 32px;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:3px; padding:3px;
  border-radius:11px; background:#f1f5f9; border:1px solid #e2e8f0;
}
.rt-modo{position:relative; display:block; cursor:pointer;}
.rt-modo-txt{
  display:flex; align-items:center; justify-content:center; height:44px; padding:0 6px;   /* alvo de toque */
  border-radius:8px; font-family:var(--font-mono, monospace); font-size:11.5px; font-weight:500;
  color:#475569; white-space:nowrap;
}
.rt-modo:hover .rt-modo-txt{color:var(--rt-ink);}
.rt-modo input:checked + .rt-modo-txt{
  background:#fff; color:var(--rt-dest);
  box-shadow:0 1px 2px rgba(11,18,32,.14), 0 0 0 1px #e2e8f0;
}
.rt-modo input:focus-visible + .rt-modo-txt{outline:3px solid var(--rt-dest); outline-offset:1px;}

/* ações */
.rt-acoes{margin-top:20px; display:flex; flex-direction:column; gap:8px;}
.rt-acoes2{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px;}
.rt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:12px; font-weight:600; line-height:1.1; cursor:pointer; text-align:center;
}
.rt-btn svg{flex:none; width:18px; height:18px;}
.rt-btn--cta{
  height:50px; padding:0 18px; border:0;
  background:var(--brand); color:var(--brand-fg, #fff); font-size:16px;
}
.rt-btn--cta:hover{background:var(--brand-hover, var(--brand));}
.rt-btn--sec{
  min-height:48px; padding:0 12px; border:1.5px solid #cbd5e1;
  background:#fff; color:var(--rt-ink); font-size:14.5px;
}
.rt-btn--sec:hover{border-color:#94a3b8; background:#f8fafc;}
.rt-btn[disabled]{opacity:.45; cursor:not-allowed;}
.rt-btn--cta[disabled]:hover{background:var(--brand);}
.rt-btn--sec[disabled]:hover{border-color:#cbd5e1; background:#fff;}
.rt-btn[aria-busy="true"]{cursor:progress; opacity:.75;}
.rt-btn:focus-visible{outline:3px solid var(--rt-dest); outline-offset:3px;}
.rt-restaurar:focus-visible, .rt-fechar:focus-visible{outline:3px solid currentColor; outline-offset:2px;}
.rt-vazio{font-size:13.5px; color:#b45309; text-align:center;}
/* O aviso fica sempre no DOM (role=status: o leitor de tela anuncia quando o
   texto aparece). Vazio, sai do fluxo e do gap das ações — sem display:none,
   que o tiraria da árvore de acessibilidade. */
.rt-vazio:empty{position:absolute;}
.rt-status{min-height:1.45em; font-size:13.5px; line-height:1.45; color:#475569; text-align:center;}
.rt-status:empty{min-height:0;}
.rt-status.is-erro{color:#b91c1c;}

/* ---------- tablet em pé: a mesma coluna, mais folgada ---------- */
@media (min-width:600px){
  .rt-marca{padding:40px 48px 32px;}
  .rt-roteiro{padding:32px 48px 40px;}
  .rt-h1{font-size:40px;}
  .rt-lead{font-size:17px;}
  .rt-caminho-t{font-size:19px;}
  .rt-caminho-s{font-size:14px;}
  .rt-h2{font-size:30px;}
  .rt-linha-t{font-size:17px;}
  .rt-nota{font-size:12.5px;}
  .rt-modos{flex-basis:auto; margin:0; display:inline-grid; width:auto;}
  .rt-modo-txt{padding:0 14px;}
  .rt-acoes{flex-direction:row; flex-wrap:wrap; align-items:center;}
  .rt-acoes2{display:flex; gap:8px;}
  .rt-btn--sec{padding:0 18px;}
  .rt-vazio{order:3; text-align:left;}
  .rt-status{order:4; flex-basis:100%; text-align:left;}
}

/* ============ Versão larga: paisagem ≥ 900px — duas colunas, cada uma rolando ============
   Medidas do desenho a 1920×1080 multiplicadas por --u. */
@media (min-width:900px) and (orientation:landscape){
  .rt-tela{
    display:grid; grid-template-columns:minmax(0, 40.625fr) minmax(0, 59.375fr);
    grid-template-rows:minmax(0, 1fr); overflow:hidden;
  }
  .rt-tela[hidden]{display:none !important;}
  .rt-marca, .rt-roteiro{min-height:0; overflow-y:auto; overscroll-behavior:contain;}

  .rt-marca{
    display:flex; flex-direction:column;
    padding:calc(96 * var(--u)) calc(72 * var(--u)) calc(84 * var(--u)) calc(120 * var(--u));
  }
  .rt-deco span:nth-child(1){width:calc(640 * var(--u)); height:calc(640 * var(--u)); top:calc(-300 * var(--u)); right:calc(-320 * var(--u));}
  .rt-deco span:nth-child(2){width:calc(420 * var(--u)); height:calc(420 * var(--u)); top:calc(-190 * var(--u)); right:calc(-200 * var(--u));}
  .rt-deco span:nth-child(3){display:block; width:calc(900 * var(--u)); height:calc(900 * var(--u)); bottom:calc(-640 * var(--u)); left:calc(-360 * var(--u));}

  .rt-marca-topo{gap:12px 16px;}
  .rt-marca .wl-logo-img{max-height:max(40px, calc(64 * var(--u))); max-width:max(200px, calc(320 * var(--u)));}
  .rt-marca .wl-logo-ph{gap:max(10px, calc(14 * var(--u)));}
  .rt-marca .wl-logo-ph .mk{width:max(36px, calc(50 * var(--u))); height:max(36px, calc(50 * var(--u)));}
  .rt-marca .wl-logo-ph .nm{font-size:max(20px, calc(30 * var(--u)));}
  .rt-marca .wl-logo-ph .nm small{font-size:max(9px, calc(12 * var(--u))); margin-top:3px;}
  .rt-fechar{min-height:max(40px, calc(48 * var(--u))); font-size:max(14px, calc(16 * var(--u))); padding:0 max(14px, calc(18 * var(--u)));}

  .rt-intro{margin-top:calc(64 * var(--u));}
  .rt-eyebrow{font-size:max(12px, calc(22 * var(--u))); letter-spacing:.3em;}
  .rt-h1{margin-top:calc(22 * var(--u)); font-size:max(34px, calc(64 * var(--u))); line-height:1.03;}
  .rt-lead{margin-top:calc(20 * var(--u)); font-size:max(16px, calc(26 * var(--u))); line-height:1.4; max-width:26ch;}

  .rt-caminhos{margin-top:auto; padding-top:calc(40 * var(--u)); gap:calc(10 * var(--u));}
  .rt-caminho-caixa{gap:calc(18 * var(--u)); min-height:0; padding:max(10px, calc(13 * var(--u))) max(12px, calc(18 * var(--u))); border-radius:max(12px, calc(16 * var(--u)));}
  .rt-radio{width:max(20px, calc(26 * var(--u))); height:max(20px, calc(26 * var(--u)));}
  .rt-radio::after{width:max(9px, calc(12 * var(--u))); height:max(9px, calc(12 * var(--u)));}
  .rt-caminho-n{order:0; font-size:max(12px, calc(16 * var(--u)));}
  .rt-caminho-txt{gap:3px;}
  .rt-caminho-t{font-size:max(16px, calc(24 * var(--u))); line-height:1.15; letter-spacing:-.01em; gap:6px 12px;}
  .rt-caminho-s{font-size:max(13px, calc(16 * var(--u)));}
  .rt-caminho-custom{font-size:max(9.5px, calc(12 * var(--u))); padding:calc(4 * var(--u)) calc(9 * var(--u)); letter-spacing:.12em;}

  /* Sem padding embaixo: ele vai para as ações (ver .rt-acoes). O Chrome
     desconta o padding do contêiner no sticky, e a última linha ficaria por
     baixo da faixa das ações. */
  .rt-roteiro{padding:calc(88 * var(--u)) calc(120 * var(--u)) 0 calc(96 * var(--u));}
  .rt-eyebrow2{gap:calc(16 * var(--u)); font-size:max(12px, calc(20 * var(--u)));}
  .rt-traco{width:calc(40 * var(--u)); height:3px;}
  .rt-cab{margin-top:calc(14 * var(--u)); gap:8px 24px; flex-wrap:nowrap;}
  .rt-h2{font-size:max(26px, calc(48 * var(--u))); line-height:1.08; letter-spacing:-.022em;}
  .rt-restaurar{min-height:44px; padding:0 14px; gap:8px; border-radius:12px; font-size:max(14px, calc(18 * var(--u)));}
  .rt-restaurar svg{width:max(15px, calc(18 * var(--u))); height:max(15px, calc(18 * var(--u)));}
  .rt-selos{margin-top:calc(12 * var(--u)); gap:calc(10 * var(--u));}
  .rt-total{font-size:max(12px, calc(16 * var(--u))); padding:calc(7 * var(--u)) calc(13 * var(--u));}
  .rt-selo{font-size:max(10.5px, calc(14 * var(--u))); padding:calc(8 * var(--u)) calc(13 * var(--u));}
  .rt-ajuda{margin-top:calc(12 * var(--u)); font-size:max(13.5px, calc(18 * var(--u))); line-height:1.4;}

  .rt-lista{margin-top:calc(18 * var(--u));}
  .rt-linha{flex-wrap:nowrap; gap:calc(16 * var(--u)); min-height:max(40px, calc(52 * var(--u)));}
  .rt-linha-rot, .rt-alterna-caixa{gap:calc(16 * var(--u)); min-height:max(40px, calc(52 * var(--u))); padding:calc(8 * var(--u)) 0;}
  .rt-cadeado, .rt-check{width:max(22px, calc(28 * var(--u))); height:max(22px, calc(28 * var(--u))); border-radius:max(6px, calc(8 * var(--u)));}
  .rt-cadeado svg{width:max(12px, calc(15 * var(--u))); height:max(12px, calc(15 * var(--u)));}
  .rt-check svg{width:max(13px, calc(16 * var(--u))); height:max(13px, calc(16 * var(--u)));}
  .rt-linha-t{font-family:var(--font-display, 'Inter Tight', system-ui, sans-serif); font-size:max(15px, calc(22 * var(--u))); line-height:1.2; letter-spacing:-.01em;}
  .rt-nota{font-size:max(12px, calc(15 * var(--u)));}
  .rt-modos{flex:none; margin:0; display:inline-flex; width:auto; border-radius:12px;}
  .rt-modo-txt{height:max(32px, calc(36 * var(--u))); padding:0 max(10px, calc(14 * var(--u))); border-radius:9px; font-size:max(12px, calc(14 * var(--u)));}

  /* Ações presas no rodapé da coluna: em tela baixa (notebook 1280×609 com
     escala de 150%, 1366×657, zoom de 200%, celular grande deitado) a lista
     passa da altura e "Começar" ficaria abaixo da dobra, sem pista de que a
     coluna rola. Com folga, o sticky não muda nada (margin-top:auto já as
     leva para o fim). */
  .rt-acoes{
    margin-top:auto; padding-top:max(16px, calc(24 * var(--u))); padding-bottom:calc(72 * var(--u));
    position:sticky; bottom:0; z-index:1; background:#fff;
    flex-direction:row; flex-wrap:wrap; align-items:center; gap:calc(12 * var(--u));
  }
  .rt-acoes2{display:flex; gap:calc(12 * var(--u));}
  .rt-btn{gap:max(8px, calc(10 * var(--u))); border-radius:max(12px, calc(14 * var(--u)));}
  .rt-btn svg{width:max(16px, calc(20 * var(--u))); height:max(16px, calc(20 * var(--u)));}
  .rt-btn--cta{height:max(46px, calc(60 * var(--u))); padding:0 max(18px, calc(28 * var(--u))); gap:max(10px, calc(12 * var(--u))); font-size:max(15px, calc(20 * var(--u)));}
  .rt-btn--sec{min-height:max(46px, calc(60 * var(--u))); padding:0 max(14px, calc(22 * var(--u))); font-size:max(15px, calc(20 * var(--u)));}
  .rt-vazio{font-size:max(13px, calc(17 * var(--u)));}
  .rt-status{font-size:max(13px, calc(16 * var(--u)));}
}

/* ============ Botão "Roteiro" dentro da apresentação ============
   Paisagem: pílula fixa SOZINHA no canto inferior direito, com o mesmo
   visual do .rail-toggle (styles.css). No topo, ao lado do #railToggle, ela
   cobria a logo do licenciado no cabeçalho dos slides com as miniaturas
   ocultas. No canto de baixo não há texto, imagem nem tela de nenhum slide
   (medido em 1280×609 a 1920×1080, com e sem miniaturas); no encerramento
   ela fica sobre o fundo. O #railToggle não é tocado. */
.rt-trocar{
  position:fixed; bottom:14px; right:14px; z-index:2147483640;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 14px;
  border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background:rgba(18,18,18,.82); color:#fff; font-family:var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size:13px; font-weight:500; line-height:1; cursor:pointer; opacity:.5;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.rt-trocar:hover, .rt-trocar:focus-visible{opacity:1;}
.rt-trocar:focus-visible{outline:2px solid #fff; outline-offset:2px;}
.rt-trocar svg{width:16px; height:16px; flex:none;}
/* Tela estreita, ou celular pequeno deitado (o slide ocupa a largura toda e o
   canto tem texto): só o ícone (o rótulo continua como nome acessível). */
@media (max-width:640px), (max-height:500px) and (orientation:landscape){
  .rt-trocar{width:44px; height:44px; padding:0;}
  .rt-trocar-lbl{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}
}
/* Em pé o botão mora na barra do deck (roteiro.js põe html.rt-na-barra
   quando conseguiu); sem isso fica o flutuante — no topo, porque embaixo
   ele disputaria o espaço com a barra (que em pé fica visível). */
deck-stage[data-orient="retrato"] ~ .rt-trocar{top:14px; bottom:auto;}
html.rt-na-barra deck-stage[data-orient="retrato"] ~ .rt-trocar{display:none;}

/* ---------- movimento ---------- */
/* Só nos efeitos de hover. Caixa marcada, caminho escolhido e modo do MRP
   mudam NA HORA: uma transição congelada (já aconteceu no deck) deixaria a
   caixa pintada no estado errado. */
@media (prefers-reduced-motion:no-preference){
  .rt-trocar{transition:opacity .15s ease;}
  .rt-btn--sec, .rt-restaurar, .rt-fechar{transition:background-color .15s ease, border-color .15s ease;}
}

/* ---------- toque ---------- */
/* Sem hover, a pílula nunca sairia dos 50% de opacidade. */
@media (hover:none){
  .rt-trocar{opacity:1;}
}
/* Dedo: alvos de pelo menos 44px também na versão larga (celular grande
   deitado e tablet deitado caem nela). max() mantém o tamanho do desenho
   quando ele já é maior. Vem depois da versão larga para vencer na ordem. */
@media (pointer:coarse){
  .rt-modo-txt{height:44px;}
  .rt-linha, .rt-linha-rot, .rt-alterna-caixa{min-height:max(44px, calc(52 * var(--u)));}
  .rt-fechar{min-height:max(44px, calc(48 * var(--u)));}
  .rt-trocar{min-height:44px;}
}

/* ---------- Alto Contraste do Windows (cores forçadas) ----------
   O ponto do rádio é fundo (o sistema o pinta da cor do fundo), e caminho e
   modo marcados só se distinguem por fundo/sombra, que somem. Os arcos
   decorativos ganhariam traço sólido por cima dos cartões. */
@media (forced-colors:active){
  .rt-radio::after{forced-color-adjust:none; background:CanvasText;}
  .rt-caminho input:checked + .rt-caminho-caixa{outline:3px solid Highlight; outline-offset:-3px;}
  .rt-modo input:checked + .rt-modo-txt{outline:2px solid Highlight; outline-offset:-2px;}
  .rt-btn--cta{border:2px solid ButtonText;}
  .rt-deco{display:none;}
}

@media print{
  .rt-tela, .rt-trocar{display:none !important;}
}