/* ============================================================
   ROTEM na Prática — folha de estilo

   Duas regras para manter isto legível ao longo do tempo:

   1. NENHUMA cor literal fora do bloco de temas abaixo. Cor sempre por token
      semântico (o que a cor significa), nunca por valor. Foi a ausência disso
      que impediu o modo claro de existir: a paleta estava espalhada em 137
      hexadecimais soltos, sem alavanca para trocar.

   2. NENHUM tamanho de fonte literal. Só os degraus da escala. Antes eram 25
      tamanhos distintos, quase todos separados por meio pixel — o olho não
      consegue montar hierarquia com isso e a tela inteira parece competir
      por atenção.

   As cores dos canais (EXTEM/INTEM/FIBTEM/HEPTEM/APTEM) são convenção do
   equipamento e têm um par por tema: mesmo matiz reconhecível, luminância
   recalibrada para o fundo.
   ============================================================ */

/* ---------- escala tipográfica: 8 degraus ---------- */
:root{
  /* Tipografia */
  --fs-2xs: clamp(10px, 1.5vw, 11px);
  --fs-xs: clamp(11.5px, 1.8vw, 13px);
  --fs-sm: clamp(13px, 2vw, 14.5px);
  --fs-base: clamp(15px, 2.2vw, 16.5px);
  --fs-md: clamp(16px, 2.5vw, 18px);
  --fs-lg: clamp(19px, 3vw, 22px);
  --fs-xl: clamp(24px, 4vw, 30px);
  --fs-display: clamp(34px, 5vw, 44px);

  /* Espaçamento (Escala Fluida / Apple) */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Formas (Raios mais arredondados / Squircle vibe) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 9999px;
}

/* ---------- TEMA ESCURO (padrão) ---------- */
:root, [data-theme="dark"]{
  color-scheme:dark;

  --bg:#0e1116;
  --surface-1:#161b22;      /* card */
  --surface-2:#1c2430;      /* controle sobre o card */
  --surface-3:#0a0d12;      /* recesso: input, caixa de dado */
  --border:#2a3441;
  --border-soft:#1e2530;

  --text-1:#e6edf3;         /* corpo */
  --text-2:#9fb0c2;         /* secundário */
  --text-3:#8a9cb0;         /* rótulo */
  --text-4:#5c6c7e;         /* nota de rodapé, referência */
  --text-strong:#ffffff;    /* destaque dentro de parágrafo */

  --accent:#7c9cff;
  --accent-on:#0b1020;      /* texto sobre o accent */
  --accent-soft:#86a7ff;    /* accent como texto sobre fundo escuro */
  --accent-line:#4c74c0;

  --ok-bg:#12261a;   --ok-border:#245c33;  --ok-text:#7ee0a1;  --ok:#3fb950;  --ok-on:#06210d;
  --warn-bg:#2b2413; --warn-border:#5c4d1f;--warn-text:#e8c766;--warn:#e3b341; --warn-on:#2a1f00;
  --bad-bg:#2b1517;  --bad-border:#5c2b2f; --bad-text:#ff9a94; --bad:#f85149;
  --info-bg:#1a2740; --info-border:#2f4a78;--info-text:#9dc0ff;--info-bg-deep:#141c2b;
  --tag-bg:#22304a;  --tag-text:#9dc0ff;

  /* canais — convenção do equipamento */
  --ex:#3fb950; --in:#58a6ff; --fib:#f85149; --hep:#2ddede; --ap:#e3b341;

  /* traçado */
  --canvas-grid:#1e2530; --canvas-axis:#2a3441; --canvas-label:#5c6c7e;
  --canvas-guide:#8899aa88; --canvas-mcf:#ffffff33;

  --shadow-lift: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-card: 0 24px 64px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.3);
  --gate-glow-a:#1d3155; --gate-glow-b:#172f2b;
}

/* ---------- TEMA CLARO ---------- */
[data-theme="light"]{
  color-scheme:light;

  --bg:#f4f7fa;
  --surface-1:#ffffff;
  --surface-2:#eef2f7;
  --surface-3:#f7f9fc;
  --border:#d3dce6;
  --border-soft:#e7ecf2;

  --text-1:#0f1620;
  --text-2:#46596d;
  --text-3:#5b6f85;
  --text-4:#7d8ea1;
  --text-strong:#000000;

  --accent:#2f4bbd;
  --accent-on:#ffffff;
  --accent-soft:#26409f;
  --accent-line:#7d97e0;

  --ok-bg:#e7f6ec;   --ok-border:#9ecfae;  --ok-text:#10632c;  --ok:#1a7f37;  --ok-on:#ffffff;
  /* âmbar preenchido: claro com texto escuro. Escurecer o âmbar para caber texto branco
     produz um marrom pesado que destoa do resto da paleta clara. */
  --warn-bg:#fdf4e0; --warn-border:#dfc888;--warn-text:#7a5504;--warn:#f0a72a; --warn-on:#3b2900;
  --bad-bg:#fdeceb;  --bad-border:#efb0aa; --bad-text:#a01c14; --bad:#cf222e;
  --info-bg:#e9f1fe; --info-border:#b2c8f2;--info-text:#1c468f;--info-bg-deep:#eff4fe;
  --tag-bg:#e2eafb;  --tag-text:#1c468f;

  --ex:#1a7f37; --in:#0969da; --fib:#cf222e; --hep:#0b7f7f; --ap:#9a6700;

  --canvas-grid:#e7ecf2; --canvas-axis:#c6d2e0; --canvas-label:#7d8ea1;
  --canvas-guide:#8899aa99; --canvas-mcf:#00000026;

  --shadow-lift: 0 8px 24px rgba(15,22,32,0.06);
  --shadow-card: 0 24px 64px rgba(15,22,32,0.08), 0 8px 24px rgba(15,22,32,0.04);
  --gate-glow-a:#dbe6fb; --gate-glow-b:#dcefe9;
}

*{box-sizing:border-box}

/* ---------- o "travamento" que não era travamento ----------
   No iPhone, dois toques seguidos num controle — apertar e apertar de novo por
   impaciência — o Safari lê como duplo-toque e amplia a página. Os controles
   fixos (transporte, abas) ficam então ancorados a um viewport maior que a área
   visível, saem da tela pelas bordas, e a impressão é de aplicativo travado.

   touch-action:manipulation desliga SÓ o duplo-toque-para-ampliar nestes
   elementos. O gesto de pinça continua funcionando na página inteira, que é o
   que importa para quem precisa aumentar os números. */
button, label, summary, a, .tabbtn, .caseitem, .opt, .mecopt, .predopt, .answer{
  touch-action:manipulation;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body{margin:0;background:var(--bg);color:var(--text-1);
  font:var(--fs-base)/1.6 'Inter', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;border:none;border-radius:var(--r-sm);transition:.12s}
button:disabled{opacity:.32;cursor:not-allowed}
h1,h2,h3,h4{margin:0;font-weight:600}
.wrap{max-width:1500px;margin:0 auto;padding:var(--space-md)}

/* acesso e identidade */
.access-gate{min-height:100vh;display:grid;place-items:center;padding:var(--space-lg);
  background:radial-gradient(circle at 18% 12%,var(--gate-glow-a) 0,transparent 34%),
             radial-gradient(circle at 82% 82%,var(--gate-glow-b) 0,transparent 31%),var(--bg)}
.access-card{width:min(540px,100%);background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:var(--space-xl);box-shadow:var(--shadow-card)}
/* A arte foi recortada na própria silhueta, então esta altura é a da marca em si,
   não de um quadrado com margem embutida. O tema decide qual arquivo buscar: só
   o do tema ativo é baixado. */
.access-brand{margin:0 auto 16px;height:124px;
  background-repeat:no-repeat;background-position:center;background-size:contain}
/* O ?v= não é enfeite: a hospedagem só manda no-cache para js, css e html, então
   uma imagem trocada com o mesmo nome continuaria velha no navegador de quem já
   visitou. Suba o número sempre que a arte mudar. */
html[data-theme="light"] .access-brand{background-image:url('../img/logo-light.png?v=2')}
html[data-theme="dark"]  .access-brand{background-image:url('../img/logo-dark.png?v=2')}
html[data-theme="dark"] .light-only{display:none !important;}
html[data-theme="light"] .dark-only{display:none !important;}
.access-kicker{margin-top:var(--space-lg);color:var(--accent-soft);text-transform:uppercase;letter-spacing:1.5px;font-size:var(--fs-2xs);font-weight:800}
.access-card h1{font-size:var(--fs-xl);line-height:1.16;letter-spacing:-.6px;margin:7px 0 12px}
.access-lead{color:var(--text-2);font-size:var(--fs-md);line-height:1.7;margin:0 0 23px}
.checkout-area{text-align:center;margin-bottom:var(--space-xl)}
.checkout-btn{
  width:100%;font-size:var(--fs-md);padding:16px;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--text-1);color:var(--bg);
  font-weight:800;letter-spacing:0.5px;
  border-radius:var(--r-xl);
  box-shadow:0 8px 24px -6px var(--text-2);
  transition:all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn.checkout-btn:hover:not(:disabled){
  transform:translateY(-3px) scale(1.015);
  box-shadow:0 12px 32px -8px var(--text-2);
  background:var(--text-1);color:var(--bg);
}
.checkout-btn:active{transform:translateY(1px) scale(0.98);box-shadow:var(--shadow-lift)}
.checkout-note{font-size:var(--fs-xs);color:var(--text-3);margin-top:var(--space-sm)}
.access-divider{display:flex;align-items:center;text-align:center;color:var(--text-4);font-size:var(--fs-xs);margin:var(--space-xl) 0 var(--space-md)}
.access-divider::before, .access-divider::after{content:'';flex:1;border-bottom:1px solid var(--border-soft)}
/* :not() é pseudo-CLASSE (dois-pontos simples) e vai no elemento, não no
   pseudo-elemento — dois pseudo-elementos também não se encadeiam. Escrito como
   ::not(...)::before, o seletor era inválido e o navegador descartava as duas
   regras: o texto do divisor encostava nas linhas. */
.access-divider:not(:empty)::before{margin-right:12px}
.access-divider:not(:empty)::after{margin-left:12px}
.access-actions{display:grid;gap:var(--space-sm)}
/* únicas cores literais do arquivo: identidade visual exigida por Google e Apple,
   que não muda com o tema do app */
.auth-btn{width:100%;padding:11px 14px;border:1px solid var(--border);background:#fff;color:#17202a;
  font-weight:750;display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}
.auth-btn span{font-size:var(--fs-md);line-height:1}.auth-btn.apple{background:#07090c;color:#fff;border-color:#3d4653}
.auth-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.activation-form{border-top:1px solid var(--border);margin-top:18px;padding-top:16px}
.activation-form label{display:block;font-size:var(--fs-sm);color:var(--text-2);margin-bottom:7px}
.activation-form>div{display:flex;gap:7px}.activation-form input{min-width:0;flex:1;background:var(--surface-3);
  border:1px solid var(--border);color:var(--text-1);border-radius:var(--r-sm);padding:9px 10px;font:inherit;text-transform:uppercase}
.access-status{min-height:22px;color:var(--text-2);font-size:var(--fs-sm);line-height:1.55;margin-top:var(--space-md)}
.access-status.error{color:var(--bad-text)}.access-status.ok{color:var(--ok-text)}
.access-legal{color:var(--text-4);font-size:var(--fs-2xs);line-height:1.6;margin:22px 0 0}
.local-preview{margin-top:7px;width:100%}
.account-area{margin-left:auto;display:flex;align-items:center;gap:var(--space-sm);padding-left:8px}
.account-area>div{display:flex;flex-direction:column;line-height:1.25;text-align:right;max-width:190px}
.account-area b{font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-area small{font-size:var(--fs-2xs);color:var(--text-3)}
.account-area .btn{font-size:var(--fs-2xs);padding:6px var(--space-sm)}
@media(max-width:620px){
  .access-card{padding:25px}
  .access-card h1{font-size:var(--fs-lg)}
  .account-area > div{display:none}
}

/* ---------- topbar: navegação em cima, simulação embaixo ----------
   Eram cinco classes de controle na mesma linha (seção, consulta, modo,
   conta, relógio). Separadas, cada faixa responde a uma pergunta só. */
/* O fundo sólido vem primeiro de propósito: color-mix() só existe no Safari 16.2+
   e no Chrome 111+. Sem essa linha, um iPhone mais antigo descarta a declaração
   inteira e a barra fica transparente, com o conteúdo passando por baixo dela ao
   rolar. Quem entende color-mix simplesmente sobrescreve. */
.topbar{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;
  background:var(--surface-1);
  background:color-mix(in srgb, var(--surface-1) 85%, transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--space-xs) var(--space-sm);margin-bottom:var(--space-sm);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.topbar::-webkit-scrollbar{display:none}
.topbar .nav-group{display:flex;gap:var(--space-3xs);padding:var(--space-2xs);background:var(--surface-2);border-radius:var(--r-md);flex-shrink:0}
.topbar .util-group{margin-left:auto;display:flex;align-items:center;gap:var(--space-xs);flex-shrink:0}
.brand{font-size:var(--fs-md);font-weight:700;letter-spacing:.3px;margin-right:4px}
.brand span{color:var(--accent)}
.pilot-badge{display:inline-block;margin-left:6px;padding:2px 7px;border:1px solid var(--accent-line);
  border-radius:var(--r-pill);color:var(--info-text);background:var(--info-bg);font-size:var(--fs-2xs);font-weight:800;
  letter-spacing:.8px;text-transform:uppercase;vertical-align:2px}

/* barra de simulação: aparece só dentro de um caso */
.simbar{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;
  background:var(--surface-1);
  background:color-mix(in srgb, var(--surface-1) 85%, transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--space-xs) var(--space-sm);margin-bottom:var(--space-sm);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.simbar::-webkit-scrollbar{display:none}
.simbar .lbl{font-size:var(--fs-2xs);letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3);font-weight:700}
.simbar.pre .spd,.simbar.pre #seedChip{display:none}   /* antes de iniciar: só a escolha de modo */

/* ---------- controles de transporte flutuantes ----------
   Pausar e adiantar são as ações que mais se repetem durante a leitura de um caso.
   Presas no topo, exigiam subir a página inteira — e no celular ainda rolar a barra
   para o lado. Aqui elas acompanham a rolagem, no desktop e no celular. */
.simfloat{position:fixed;z-index:900;display:flex;align-items:center;gap:var(--space-2xs);
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:6px;box-shadow:var(--shadow-card);
  right:var(--space-md);bottom:calc(var(--space-md) + env(safe-area-inset-bottom))}
.simfloat .clockface{font-size:var(--fs-md);min-width:76px;padding:4px 10px;border:none;background:transparent}
.simfloat .btn{min-height:38px;padding:8px var(--space-sm);font-size:var(--fs-sm);border-radius:var(--r-pill)}
.simfloat .btn#btnPlay{background:var(--accent);color:var(--accent-on);font-weight:700}
.simfloat .btn#btnPlay.rodando{background:var(--surface-2);color:var(--text-1);font-weight:600}
body.modal-open .simfloat{display:none}     /* o modal é a única coisa que aceita toque */

/* ---------- aviso de marco ----------
   Aparece logo acima do transporte, quando o parâmetro fica pronto em todos os
   canais. É um convite a decidir, não um bloqueio: as duas saídas ficam à mão. */
.marco{position:fixed;z-index:901;background:var(--info-bg);border:1px solid var(--accent-line);
  border-radius:var(--r-lg);padding:var(--space-sm) var(--space-md);box-shadow:var(--shadow-card);
  right:var(--space-md);bottom:calc(var(--space-md) + 62px + env(safe-area-inset-bottom));
  max-width:min(420px,calc(100vw - 2 * var(--space-md)))}
.marco-txt{font-size:var(--fs-sm);line-height:1.5;color:var(--info-text);margin-bottom:var(--space-xs)}
.marco-txt b{color:var(--text-1)}
.marco-acoes{display:flex;gap:var(--space-xs);flex-wrap:wrap;justify-content:flex-end}
body.modal-open .marco{display:none}
@media(max-width:1250px){
  .marco{left:14px;right:14px;max-width:none;
    bottom:calc(84px + 62px + env(safe-area-inset-bottom))}
  .marco-acoes .btn{flex:1 1 auto}
}
@media(max-width:1250px){
  /* acima da pílula de abas, que ocupa o rodapé no celular */
  .simfloat{left:14px;right:14px;justify-content:center;
    bottom:calc(84px + env(safe-area-inset-bottom))}
}
.clock{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}
.clockface{font-variant-numeric:tabular-nums;font-size:var(--fs-lg);font-weight:700;
  background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:3px 12px;min-width:104px;text-align:center}
.spd{display:flex;gap:var(--space-3xs)}
.spd button{background:var(--surface-2);color:var(--text-2);padding:var(--space-xs) var(--space-sm);font-size:var(--fs-sm);border:1px solid transparent;border-radius:var(--r-pill)}
.spd button.on{background:var(--accent);color:var(--accent-on);font-weight:700;border-color:transparent;box-shadow:var(--shadow-lift)}
.btn{background:var(--surface-2);color:var(--text-1);padding:var(--space-sm) var(--space-md);border:1px solid transparent;border-radius:var(--r-pill);min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.btn:hover:not(:disabled){background:var(--surface-3)}
.btn.primary{background:var(--accent);color:var(--accent-on);font-weight:700;border-color:transparent;box-shadow:var(--shadow-lift)}
.btn.go{background:var(--ok);color:var(--ok-on);font-weight:700;border-color:transparent;box-shadow:var(--shadow-lift)}
.btn.warn{background:var(--warn);color:var(--warn-on);font-weight:700;border-color:transparent;box-shadow:var(--shadow-lift)}
.btn.ghost{background:transparent}
.btn-icon{padding:var(--space-xs) var(--space-sm);line-height:1;border-radius:var(--r-md)}
.btn-sm{padding:var(--space-2xs) var(--space-sm);min-height:34px;font-size:var(--fs-xs)}
/* rótulo de parâmetro que abre a explicação clínica: é um botão, mas precisa
   ler como rótulo de tabela — sem caixa, sem fundo, só o pontilhado de dica */
.btn-tip{background:none;padding:0;border:none;color:var(--text-3);font:inherit;
  font-size:var(--fs-xs);letter-spacing:.4px;text-align:left;min-height:0;
  border-bottom:1px dotted var(--border);border-radius:0}
.btn-tip:hover{color:var(--accent-soft);border-bottom-color:var(--accent-line)}
.btn-tip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.grid{display:grid;grid-template-columns:330px 1fr 322px;gap:var(--space-md);align-items:start}

/* Tab System Mobile/Tablet */
.mobile-tabs{display:none}

@media(max-width:1250px){
  /* Modo Celular / Tablet Portrait */
  .grid { display: block; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .tab-pane { display: none; }
  .tab-pane.active { display: block; animation: fadeIn .3s ease; }

  .mobile-tabs {
    display: flex;
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 14px;
    right: 14px;
    z-index: 1000;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 5px;
    gap: 4px;
    box-shadow: var(--shadow-card);
  }
  
  /* Removemos o sticky do card principal para não engolir a tela */
  #col-paciente .card:first-child {
    position: relative;
    z-index: 1;
    box-shadow: none;
  }

  .tabbtn {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 10px 4px;
    border-radius: 100px;
    min-height: 40px;
  }
  .tabbtn.on { 
    background: var(--surface-1); 
    color: var(--text-1); 
    font-weight: 700;
    box-shadow: var(--shadow-lift); 
  }
}

@media(max-width:760px){
  /* Reduzir o topbar/simbar em telas bem pequenas para economizar espaço */
  .topbar { padding: 5px 8px; gap: 6px; }
  .topbar .brand { display: none; } /* Oculta a logo para salvar espaço, mas mantém a navegação e o tema */
  .topbar .nav-group { margin-left: 0; }
  .topbar .navbtn { padding: 4px 8px; font-size: var(--fs-xs); }
  .simbar { padding: 5px 8px; margin-bottom: 6px; gap: 6px; }
  /* A barra tinha de rolar para o lado num aparelho estreito. O rótulo é
     decorativo e o código do caso reaparece no cabeçalho da análise — sem os
     dois, o que resta (modo e ritmo) cabe inteiro na tela. */
  .simbar .lbl { display: none; }
  .simbar #seedChip { display: none; }
  .chanbody{grid-template-columns:1fr}
  .params{border-left:none!important;border-top:1px solid var(--border)}
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.card{background:var(--surface-1);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--space-lg);margin-bottom:var(--space-lg)}
.card h3{font-size:var(--fs-xs);letter-spacing:1.4px;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--space-sm)}
.vinheta{font-size:var(--fs-base);line-height:1.62}
.vinheta b{color:var(--text-strong)}
.tagrow{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-bottom:var(--space-sm)}
.tag{font-size:var(--fs-2xs);letter-spacing:.6px;text-transform:uppercase;font-weight:700;
  padding:var(--space-3xs) var(--space-xs);border-radius:var(--r-pill);background:var(--tag-bg);color:var(--tag-text)}
.tag.ctx{background:var(--ok-bg);color:var(--ok-text)}
.tag.lvl{background:var(--warn-bg);color:var(--warn-text)}
.tag.r2{background:var(--info-bg-deep);color:var(--accent-soft)}

table.kv{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.kv td{padding:var(--space-2xs) 0;border-bottom:1px solid var(--border-soft)}
table.kv td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.f-hi{color:var(--bad)} .f-lo{color:var(--warn)} .f-ok{color:var(--text-2)}
.locked{color:var(--text-3);font-style:italic;font-weight:400!important}
.nr{color:var(--text-2);font-weight:600}
.sang{background:var(--surface-3);border:1px solid transparent;border-radius:var(--r-md);padding:var(--space-xs) var(--space-sm);margin-top:var(--space-xs);font-size:var(--fs-sm)}
.sang b{color:var(--text-strong)}

/* plataforma */
.plat{display:flex;gap:var(--space-xs);margin-bottom:10px}
.plat button{flex:1;padding:7px 5px;background:var(--surface-2);border:1px solid var(--border);
  color:var(--text-2);font-size:var(--fs-sm);font-weight:700}
.plat button.on{background:var(--info-bg);border-color:var(--accent);color:var(--info-text)}
.assaybtns{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.assaybtns button{padding:10px 6px;background:var(--surface-2);border:1px solid var(--border);
  color:var(--text-1);font-weight:700;font-size:var(--fs-base);display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center}
.assaybtns button small{font-weight:400;font-size:var(--fs-2xs);color:var(--text-3);letter-spacing:.2px}
.assaybtns button:hover:not(:disabled){border-color:var(--accent)}
.assaybtns button.done{background:var(--ok-bg);border-color:var(--ok-border);color:var(--text-2)}
.assaybtns button[data-a="EXTEM"]{border-left:3px solid var(--ex)}
.assaybtns button[data-a="INTEM"]{border-left:3px solid var(--in)}
.assaybtns button[data-a="FIBTEM"]{border-left:3px solid var(--fib)}
.assaybtns button[data-a="HEPTEM"]{border-left:3px solid var(--hep)}
.assaybtns button[data-a="APTEM"]{border-left:3px solid var(--ap)}
.assaybtns button.cart{grid-column:1/-1;flex-direction:column;padding:10px}
.slots{font-size:var(--fs-xs);color:var(--text-3);margin:9px 0 0;line-height:1.6}
.slots b{color:var(--warn-text)}

.chan{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:var(--space-md);overflow:hidden}
.chan.r2{border-color:var(--accent-line)}
.chanhd{display:flex;align-items:center;gap:var(--space-sm);padding:8px 13px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.chanhd .nm{font-weight:700;letter-spacing:.6px;font-size:var(--fs-base)}
.chanhd .sub{font-size:var(--fs-xs);color:var(--text-3)}
.chanhd .rt{margin-left:auto;font-size:var(--fs-xs);color:var(--text-2);font-variant-numeric:tabular-nums;text-align:right}
.chanbody{display:grid;grid-template-columns:1fr 226px;gap:0}
@media(max-width:760px){
  .chanbody{grid-template-columns:1fr}
  .params{border-left:none!important;border-top:1px solid var(--border)}
  /* a faixa de referência é alinhada à direita para a coluna estreita do desktop;
     na largura toda do celular ela ficava longe do próprio rótulo */
  .params .ref{display:inline;text-align:left;margin-left:7px}
}
.chanbody canvas{width:100%;height:auto;display:block}
.params{border-left:1px solid var(--border);padding:var(--space-sm) var(--space-md)}
.params table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.params td{padding:2.5px 0}
.params td:first-child{color:var(--text-3);font-size:var(--fs-xs);letter-spacing:.4px}
.params td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.ref{font-size:var(--fs-2xs);color:var(--text-4);text-align:right;display:block;font-weight:400;letter-spacing:0}
.delta{font-size:var(--fs-2xs);font-weight:600;margin-left:4px}
.d-up{color:var(--ok-text)}.d-dn{color:var(--bad-text)}
.empty{padding:var(--space-xl) 16px;text-align:center;color:var(--text-3);font-size:var(--fs-base);line-height:1.7}
.rodsep{display:flex;align-items:center;gap:var(--space-sm);margin:16px 0 10px}
.rodsep span{font-size:var(--fs-xs);letter-spacing:1.4px;text-transform:uppercase;color:var(--text-3);font-weight:700}
.rodsep i{flex:1;height:1px;background:var(--border)}

.opt-group{margin-bottom:var(--space-md)}
.opt-group-title{font-size:var(--fs-2xs);text-transform:uppercase;color:var(--text-3);margin-bottom:5px;
  font-weight:700;letter-spacing:1px;border-bottom:1px solid var(--border);padding-bottom:3px}
.opt{display:flex;align-items:flex-start;gap:var(--space-sm);padding:9px 11px;border-radius:var(--r-md);cursor:pointer;
  font-size:var(--fs-sm);border:1px solid transparent;min-height:48px}
.opt:hover{background:var(--surface-2)}
.opt input{margin-top:2px;accent-color:var(--accent);flex:none}
.opt.sel{background:var(--info-bg);border-color:var(--info-border)}
.opt.given{background:var(--ok-bg);border-color:var(--ok-border);opacity:.85}
.opt.given::after{content:"administrado";font-size:var(--fs-2xs);color:var(--ok-text);margin-left:auto;
  text-transform:uppercase;letter-spacing:.5px;font-weight:700;white-space:nowrap}
.opt em{display:block;font-style:normal;color:var(--text-3);font-size:var(--fs-xs)}
textarea{width:100%;background:var(--surface-3);border:1px solid var(--border);color:var(--text-1);
  border-radius:var(--r-sm);padding:8px;font:inherit;font-size:var(--fs-sm);resize:vertical;min-height:48px}

/* ---------- painel modal ----------
   O z-index precisa ficar ACIMA da barra de abas do celular (1000). Enquanto ele
   valia 50, a pílula flutuante "Cenário / ROTEM / Conduta" cobria justamente a
   faixa onde ficam os botões do modal: o toque caía na aba, o modal não fechava
   e o aplicativo parecia travado. A barra também some enquanto há um modal aberto —
   não existe navegação de aba a decidir enquanto uma pergunta está na frente. */
.ovl{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1200;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:none;
  padding:var(--space-lg) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.ovl.on{display:block}
body.modal-open{overflow:hidden}
body.modal-open .mobile-tabs{display:none}
.sheet{max-width:940px;margin:0 auto;background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--space-lg);box-shadow:var(--shadow-card)}
/* No celular a folha é mais alta que a tela. Duas âncoras impedem que a saída
   fique escondida no fim de uma rolagem longa: a pergunta gruda a faixa de ação
   no rodapé; a análise, que é um documento de leitura, gruda o cabeçalho — e com
   ele o "Fechar" — no topo. */
.sheet-head{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-md)}
.sheet-actions{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-top:var(--space-md)}
@media(max-width:760px){
  .sheet{padding:var(--space-md)}
  .sheet-head{position:sticky;top:calc(-1 * var(--space-md));z-index:3;background:var(--surface-1);
    margin:calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-sm);
    padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border)}
  .sheet-actions{position:sticky;bottom:0;background:var(--surface-1);z-index:2;
    margin:var(--space-md) calc(-1 * var(--space-md)) calc(-1 * var(--space-md));
    padding:10px var(--space-md) calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--border)}
  .sheet-actions .btn{flex:1 1 46%;min-width:132px;padding:var(--space-sm) var(--space-xs);
    font-size:var(--fs-sm);line-height:1.25;text-align:center}
  /* fim de documento: já está no fim da rolagem, não precisa grudar */
  .sheet-actions.fim{position:static;margin:var(--space-md) 0 0;padding:0;border-top:none}
}
.verdict{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-md);border-radius:var(--r-lg);margin-bottom:var(--space-md)}
.verdict .sc{font-size:var(--fs-display);font-weight:800;font-variant-numeric:tabular-nums;flex:none;line-height:1}
.v-ok{background:var(--ok-bg);border:1px solid transparent}
.v-mid{background:var(--warn-bg);border:1px solid transparent}
.v-bad{background:var(--bad-bg);border:1px solid transparent}
.sec{margin-bottom:var(--space-md)}
.sec h4{font-size:var(--fs-xs);letter-spacing:1.4px;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--space-xs)}
.sec p,.sec li{font-size:var(--fs-base);line-height:1.68}
.sec ul,.sec ol{margin:0;padding-left:var(--space-lg)}
.pill{display:inline-block;padding:3px 9px;border-radius:var(--r-pill);font-size:var(--fs-xs);margin:2px 4px 2px 0;font-weight:600}
.p-ok{background:var(--ok-bg);color:var(--ok-text);border:1px solid var(--ok-border)}
.p-miss{background:var(--bad-bg);color:var(--bad-text);border:1px solid var(--bad-border)}
.p-extra{background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-border)}
.p-nice{background:var(--info-bg);color:var(--info-text);border:1px solid var(--info-border)}
.box{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--space-sm) var(--space-md);font-size:var(--fs-base);line-height:1.65}
.box.key{border-left:3px solid var(--accent)}
.box.trap{border-left:3px solid var(--warn)}
.box.fatal{border-left:3px solid var(--bad)}
.box.good{border-left:3px solid var(--ok)}
.ref-cite{font-size:var(--fs-xs);color:var(--text-3);line-height:1.6}
.pred-porque{font-size:var(--fs-xs);color:var(--text-2);line-height:1.6}
code{background:var(--surface-3);padding:1px 5px;border-radius:4px;font-size:var(--fs-sm);color:var(--accent-soft)}
.chip{font-size:var(--fs-xs);color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);
  padding:2px 8px;border-radius:var(--r-pill);display:inline-block;margin:2px 3px 2px 0}
.chip.bad{border-color:var(--bad-border);color:var(--bad-text)}
.chip.accent{border-color:var(--accent-line);color:var(--info-text)}
.prov{font-weight:400;color:var(--text-4)}
.prov-note{font-size:var(--fs-2xs);color:var(--text-4);padding-top:5px}
.igual{font-weight:400;color:var(--text-4)}

.caselist{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:var(--space-sm)}
.caseitem{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--space-sm) var(--space-md);
  cursor:pointer;text-align:left;color:var(--text-1)}
.caseitem:hover{border-color:var(--accent)}
.caseitem .n{font-weight:700;font-size:var(--fs-base);margin-bottom:3px}
.caseitem .d{font-size:var(--fs-xs);color:var(--text-3);line-height:1.6}
.caseitem.seen{opacity:.62}
.caseitem.seen .n::after{content:" ✓";color:var(--ok)}
/* posição na trilha: numeração discreta, para a ordem se ler sem explicação */
.caseitem-pos{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;
  border-radius:50%;background:var(--surface-3);border:1px solid var(--border);
  color:var(--text-3);font-size:var(--fs-2xs);font-weight:700;margin-right:7px;vertical-align:1px}
.caseitem.sugerido{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-line);opacity:1}
.caseitem.sugerido .caseitem-pos{background:var(--accent);color:var(--accent-on);border-color:transparent}
/* a retomada é mapa retrospectivo: só existe em caso já resolvido */
.caseitem-retoma{margin-top:7px;padding-top:7px;border-top:1px solid var(--border-soft);
  font-size:var(--fs-2xs);color:var(--text-3);line-height:1.5;white-space:normal}
.foot{text-align:center;color:var(--text-3);font-size:var(--fs-xs);padding:18px 8px;line-height:1.7}
.notice{background:var(--info-bg);border:1px solid var(--info-border);border-radius:var(--r-md);padding:var(--space-sm) var(--space-md);
  font-size:var(--fs-sm);color:var(--info-text);line-height:1.55;margin-bottom:var(--space-md)}
.banner{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text);border-radius:var(--r-md);
  padding:9px 13px;font-size:var(--fs-sm);display:none;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md)}
.banner.on{display:flex}
.predbox{background:var(--info-bg-deep);border:1px solid var(--info-border);border-radius:var(--r-md);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-md)}
.predbox h5{margin:0 0 4px;font-size:var(--fs-xs);letter-spacing:1.2px;text-transform:uppercase;color:var(--info-text)}
.predq{margin-bottom:12px}
.predq .lab{font-weight:700;font-size:var(--fs-base);margin-bottom:5px}
.predq .lab small{font-weight:400;color:var(--text-3);letter-spacing:.2px;display:block}
.predopt{display:block;padding:6px 9px;border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:4px;
  cursor:pointer;font-size:var(--fs-sm);background:var(--surface-2)}
.predopt:hover{border-color:var(--accent)}
.predopt.on{background:var(--info-bg);border-color:var(--accent-line)}
.predopt input{margin-right:7px;accent-color:var(--accent)}
.mec{background:var(--info-bg-deep);border:1px solid var(--info-border);border-radius:var(--r-md);padding:10px 12px;margin-bottom:var(--space-md)}
.mec h5{margin:0 0 6px;font-size:var(--fs-xs);letter-spacing:1.2px;text-transform:uppercase;color:var(--info-text)}
.mec .hint{font-size:var(--fs-xs);color:var(--text-3);line-height:1.5;margin-bottom:7px}
.mecopt{display:inline-block;padding:4px 10px;border:1px solid var(--border);border-radius:var(--r-pill);margin:2px 3px 2px 0;
  cursor:pointer;font-size:var(--fs-sm);background:var(--surface-2)}
.mecopt.on{background:var(--info-bg);border-color:var(--accent-line);color:var(--info-text);font-weight:600}
.mecopt input{position:absolute;opacity:0;pointer-events:none}
.mecopt:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.subsc{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:14px}
.subsc div{flex:1;min-width:130px;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:9px 11px}
.subsc .t{font-size:var(--fs-2xs);letter-spacing:1.1px;text-transform:uppercase;color:var(--text-3)}
.subsc .v{font-size:var(--fs-lg);font-weight:800;font-variant-numeric:tabular-nums}
.subsc .ok{color:var(--ok)} .subsc .bad{color:var(--bad)} .subsc .mid{color:var(--warn)}
.db-layer{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);margin:0 0 12px;overflow:hidden}
.db-layer>summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:750;color:var(--text-1)}
.db-layer>summary::-webkit-details-marker{display:none}
.db-layer>summary::after{content:"+";float:right;color:var(--accent);font-size:var(--fs-md);line-height:1}
.db-layer[open]>summary::after{content:"−"}
.db-layer>.db-body{border-top:1px solid var(--border);padding:var(--space-md)}
.pilot-intro{border-left:3px solid var(--accent)}
.pilot-intro h2{font-size:var(--fs-md);margin-bottom:5px}
.pilot-intro p{margin:0;color:var(--text-2);line-height:1.65}
table.pred{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.pred td{padding:5px 6px;border-bottom:1px solid var(--border-soft);vertical-align:top}
table.pred td:first-child{font-weight:700;white-space:nowrap}
.warnline{background:var(--bad-bg);border:1px solid var(--bad-border);color:var(--bad-text);border-radius:var(--r-md);
  padding:8px 11px;font-size:var(--fs-sm);line-height:1.5;margin:10px 0;display:none}
.warnline.on{display:block}
@keyframes flash{0%,100%{box-shadow:0 0 0 0 rgba(248,81,73,0)}
  35%{box-shadow:0 0 0 4px rgba(248,81,73,.45)}}
.flash{animation:flash .9s ease-out 2}
.predbox.falta{border-color:var(--bad-border);background:var(--bad-bg)}
.mec.vazio{border-color:var(--warn-border);background:var(--warn-bg)}
.mec .obrig{float:right;font-size:var(--fs-2xs);letter-spacing:.6px;color:var(--warn-text);font-weight:700}

/* academia */
.navbtn{background:transparent;border:1px solid transparent;color:var(--text-2);padding:6px 12px}
.navbtn:hover:not(.on){color:var(--text-1)}
.navbtn.on{background:var(--surface-1);border-color:var(--border);color:var(--text-1);font-weight:700;box-shadow:var(--shadow-lift)}
.academy{max-width:1180px;margin:0 auto}
.academy-hero{display:grid;grid-template-columns:1.45fr .75fr;gap:var(--space-md);margin-bottom:var(--space-md)}
.academy-hero .lead{font-size:var(--fs-md);line-height:1.7;color:var(--text-2);max-width:760px;margin:8px 0 0}
.eyebrow{font-size:var(--fs-2xs);letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-soft);font-weight:800}
.academy h1{font-size:var(--fs-xl);line-height:1.15;margin-top:4px;letter-spacing:-.5px}
.ready{display:flex;align-items:center;gap:15px;height:100%}
.ready-num{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:8px solid var(--border);background:var(--surface-3);font-size:var(--fs-lg);font-weight:800}
.ready-num.good{border-color:var(--ok-border);color:var(--ok-text)}
.ready-num.mid{border-color:var(--warn-border);color:var(--warn-text)}
.ready-copy b{display:block;font-size:var(--fs-md);margin-bottom:3px}.ready-copy span{font-size:var(--fs-xs);color:var(--text-2);line-height:1.6}
.flow-steps{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-top:10px}
.flow-step{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:9px 10px;font-size:var(--fs-xs);color:var(--text-2)}
.flow-step b{display:block;color:var(--text-1);font-size:var(--fs-sm);margin-bottom:2px}
/* Um destino só, com o motivo ao lado. Antes eram três botões, dois deles
   chamando a mesma coisa — escolha que não era escolha. */
.proximo-passo{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;
  margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);
  background:var(--info-bg);border:1px solid var(--info-border);border-radius:var(--r-md)}
.proximo-motivo{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px}
.proximo-motivo b{font-size:var(--fs-2xs);letter-spacing:1.1px;text-transform:uppercase;color:var(--info-text)}
.proximo-motivo span{font-size:var(--fs-sm);color:var(--text-2);line-height:1.5}
.proximo-passo .btn{flex:none}
@media(max-width:600px){ .proximo-passo .btn{width:100%} }
.academy-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-md)}
.academy-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:var(--space-md);align-items:start}
.module-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.module{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:13px;position:relative}
.module:hover{border-color:var(--accent-line)}.module.done{border-color:var(--ok-border);background:var(--ok-bg)}
.module .step{font-size:var(--fs-2xs);color:var(--accent-soft);text-transform:uppercase;letter-spacing:1px;font-weight:800}
.module h4{font-size:var(--fs-base);margin:3px 0 4px}.module p{font-size:var(--fs-xs);color:var(--text-2);line-height:1.55;margin:0 0 10px}
.module-foot{display:flex;align-items:center;gap:var(--space-sm)}.module-foot .btn{margin-left:auto;padding:5px 10px;font-size:var(--fs-xs)}
.bar{height:6px;background:var(--surface-3);border-radius:10px;overflow:hidden;flex:1;min-width:70px;border:1px solid var(--border-soft)}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:10px}.done .bar>i{background:var(--ok)}
.barlabel{font-size:var(--fs-2xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.skill-list{display:flex;flex-direction:column;gap:var(--space-sm)}
.skill-row{display:grid;grid-template-columns:112px 1fr 47px;gap:var(--space-sm);align-items:center;font-size:var(--fs-xs)}
.skill-row .nm{font-weight:650}.skill-row .pct{text-align:right;color:var(--text-2);font-variant-numeric:tabular-nums}
.review-card{border-left:3px solid var(--accent)}
.review-card .big{font-size:var(--fs-lg);font-weight:800;line-height:1}.review-card p{color:var(--text-2);font-size:var(--fs-sm);line-height:1.55}
.academy-note{font-size:var(--fs-xs);color:var(--text-2);line-height:1.65}
.academy-note b{color:var(--text-1)}
/* Na coluna larga o texto ocupa a linha e a ação fica na ponta: um botão pequeno
   centralizado num card de ~800px ficaria solto no meio do vazio. */
.academy-footer{display:flex;align-items:center;gap:var(--space-md)}
.academy-footer>div{flex:1;min-width:0}
.academy-footer .btn{flex:none}
@media(max-width:600px){.academy-footer{flex-direction:column;align-items:stretch;gap:var(--space-sm)}}

.lesson-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:var(--space-md)}.lesson-head .btn{margin-left:auto}
.lesson-head h2{font-size:var(--fs-lg);margin:2px 0 3px}.lesson-head p{margin:0;color:var(--text-2);font-size:var(--fs-sm)}
.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--space-md);align-items:start}
.concept-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm);margin-top:11px}
.concept{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 11px}
.concept b{display:block;font-size:var(--fs-sm);margin-bottom:3px}.concept span{font-size:var(--fs-xs);color:var(--text-2);line-height:1.6}
.qmeta{display:flex;align-items:center;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.qcount{margin-left:auto;font-size:var(--fs-xs);color:var(--text-3)}
.question{font-size:var(--fs-md);line-height:1.55;margin:0 0 7px}.qcontext{color:var(--text-2);font-size:var(--fs-base);line-height:1.62;margin-bottom:var(--space-md)}
.data-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:7px;margin:12px 0}
.data-point{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:8px 10px}
.data-point b{display:block;font-size:var(--fs-2xs);color:var(--text-3);letter-spacing:.7px}.data-point span{font-size:var(--fs-md);font-weight:750;font-variant-numeric:tabular-nums}
.answer-list{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.answer{display:flex;gap:var(--space-sm);align-items:flex-start;text-align:left;color:var(--text-1);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;width:100%;line-height:1.55;font-size:var(--fs-base)}
.answer:hover:not(:disabled){border-color:var(--accent)}.answer.selected{border-color:var(--accent);background:var(--info-bg)}
.answer.correct{border-color:var(--ok-border);background:var(--ok-bg)}.answer.wrong{border-color:var(--bad-border);background:var(--bad-bg)}
.answer .letter{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--text-2);font-size:var(--fs-2xs);flex:none}
.confidence{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px solid var(--border)}
.confidence span{font-size:var(--fs-xs);color:var(--text-2);margin-right:2px}.confbtn{padding:6px var(--space-sm);background:var(--surface-2);border:1px solid var(--border);color:var(--text-2)}
.confbtn.on{border-color:var(--accent);background:var(--info-bg);color:var(--info-text)}
.qactions{display:flex;gap:var(--space-sm);justify-content:flex-end;margin-top:13px;flex-wrap:wrap}
.feedback{margin-top:var(--space-md);border-radius:var(--r-md);padding:12px 14px;border:1px solid var(--border);line-height:1.62}
.feedback.ok{background:var(--ok-bg);border-color:var(--ok-border)}.feedback.bad{background:var(--bad-bg);border-color:var(--bad-border)}
.feedback h4{font-size:var(--fs-base);margin-bottom:3px}.feedback p{margin:0;font-size:var(--fs-sm);color:var(--text-1)}
.feedback .chain{margin-top:8px;color:var(--text-2);font-size:var(--fs-xs)}
.session-result{text-align:center;padding:22px 12px}.session-result .score{font-size:var(--fs-display);font-weight:850;line-height:1}
.session-result h2{font-size:var(--fs-lg);margin:7px 0}.session-result p{max-width:560px;margin:0 auto 16px;color:var(--text-2);line-height:1.65}
.mini-stat{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-bottom:9px}
.mini-stat>div{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:9px}.mini-stat b{display:block;font-size:var(--fs-md)}.mini-stat span{font-size:var(--fs-2xs);color:var(--text-3)}
.due-list{font-size:var(--fs-xs);color:var(--text-2);line-height:1.7}
.offline-badge{font-size:var(--fs-2xs);color:var(--ok-text);margin-left:auto}
@media(max-width:900px){.academy-hero,.academy-grid,.lesson-layout{grid-template-columns:1fr}.academy-hero .card{margin-bottom:0}.module-grid{grid-template-columns:1fr}}
@media(max-width:600px){.academy h1{font-size:var(--fs-lg)}.concept-list,.flow-steps{grid-template-columns:1fr}.lesson-head{flex-wrap:wrap}.lesson-head .btn{margin-left:0}.skill-row{grid-template-columns:96px 1fr 42px}.ready{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* ================= tutorial de entrada =================
   Vive dentro do modal de sempre (#ovl/#sheet). As classes internas dos SVG
   levam prefixo tt- porque .step, .chip, .clock, .score, .sub, .dot, .foot e
   .brand já significam outra coisa aqui — e o cruzamento aconteceria nos dois
   sentidos. Nenhuma cor literal: toda figura herda os tokens dos dois temas. */
.tut-art{background:var(--bg);border:1px solid var(--border-soft);
  border-radius:var(--r-lg);padding:12px;margin-bottom:var(--space-md)}
.tut-art svg{display:block;width:100%;height:auto}
.tut-art svg text{font-family:inherit;fill:var(--text-2)}
.tut-step{font-size:var(--fs-2xs);color:var(--text-4);text-transform:uppercase;
  letter-spacing:1.4px;font-weight:800;margin-bottom:6px}
.tut-copy h2{font-size:var(--fs-lg);margin:0 0 8px;letter-spacing:-.4px;line-height:1.25}
.tut-copy p{margin:0;color:var(--text-2);font-size:var(--fs-sm);line-height:1.7;max-width:64ch}
.tut-foot{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;
  margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--border-soft)}
.tut-dots{display:flex;gap:7px}
.tut-dot{width:8px;height:8px;border-radius:999px;border:none;background:var(--border);
  cursor:pointer;padding:0;transition:width .18s ease,background .18s ease}
.tut-dot.on{background:var(--accent);width:22px}
.tut-sp{display:flex;gap:var(--space-xs);margin-left:auto}
/* No celular a faixa de botões vira uma linha própria: com os pontos ao lado,
   "Próxima" espremia até virar duas linhas de texto dentro do botão. */
/* O cabeçalho do modal quebra linha por padrão, e aqui isso jogava o "×"
   sozinho para uma segunda linha inteira. Título e fechar dividem a mesma. */
.tut-head{flex-wrap:nowrap}
.tut-head>div:first-child{min-width:0}
.tut-head h3{overflow-wrap:anywhere}
.tut-dica{display:none}
@media(max-width:600px){
  .tut-sp{margin-left:0;width:100%}
  .tut-sp .btn{flex:1 1 0;min-width:0;padding:9px 6px}
  .tut-copy h2{font-size:var(--fs-md)}
  /* A figura tem 640 unidades de largura. Encolhida para os 267px que sobram num
     celular, um rótulo de 10px vira 4px — a ilustração existe, mas não se lê.
     Abaixo de 600px ela mantém um tamanho mínimo legível e a moldura desliza. */
  .tut-art{overflow-x:auto;padding:10px;scrollbar-width:thin}
  .tut-art svg{min-width:560px}
  .tut-dica{display:block;font-size:var(--fs-2xs);color:var(--text-4);
    margin:-14px 0 var(--space-md);text-align:center}
}
/* --- classes internas das ilustrações --- */
.tut-art .tt-brand{font-size:13px;font-weight:800;fill:var(--text-1)}
.tut-art .tt-brand2{fill:var(--text-3);font-weight:500}
.tut-art .tt-pill-on rect{fill:var(--accent);opacity:.16}
.tut-art .tt-pill-t{font-size:10.5px;fill:var(--text-3);text-anchor:middle;font-weight:600}
.tut-art .tt-pill-t.tt-on{fill:var(--accent-soft);font-weight:800}
.tut-art .tt-col{font-size:9.5px;fill:var(--text-4);letter-spacing:1.3px;font-weight:800}
.tut-art .tt-col.tt-acc{fill:var(--accent-soft)}
.tut-art .tt-tiny{font-size:10px;fill:var(--text-3)}
.tut-art .tt-ctr{text-anchor:middle}
.tut-art .tt-sub{font-size:8.6px;fill:var(--text-3)}
.tut-art .tt-chip-l{font-size:9.5px;font-weight:800}
.tut-art .tt-chip-r{font-size:8.6px;fill:var(--text-3);text-anchor:end}
.tut-art .tt-small{font-size:12px;fill:var(--text-2)}
.tut-art .tt-b{font-weight:800;fill:var(--text-1)}
.tut-art .tt-assay{font-size:13px;font-weight:800;text-anchor:middle}
.tut-art .tt-ex{fill:var(--ex)} .tut-art .tt-in{fill:var(--in)}
.tut-art .tt-fib{fill:var(--fib)} .tut-art .tt-hep{fill:var(--hep)}
.tut-art .tt-mut{fill:var(--text-4)}
.tut-art .tt-acc{fill:var(--accent-soft)} .tut-art .tt-acc-on{fill:var(--accent-on)}
.tut-art .tt-ok-t{fill:var(--ok)} .tut-art .tt-warn-t{fill:var(--warn-text)}
.tut-art .tt-bad-t{fill:var(--bad-text)} .tut-art .tt-warn-on{fill:var(--warn-on)}
.tut-art .tt-btn-t{font-size:10px;text-anchor:middle;font-weight:700}
.tut-art .tt-clock{font-size:22px;font-weight:800;fill:var(--text-1);text-anchor:middle;
  font-variant-numeric:tabular-nums}
.tut-art .tt-sub-t{font-size:8.5px;fill:var(--text-4);letter-spacing:1.1px;font-weight:800}
.tut-art .tt-sub-v{font-size:15px;font-weight:800}
.tut-art .tt-score{font-size:34px;font-weight:800;text-anchor:middle;font-variant-numeric:tabular-nums}
/* Resgate no celular: a barra lateral, e com ela o cartão "Como funciona",
   desce para depois da grade de módulos em 900px e fica enterrada. Acima disso
   o link seria ruído ao lado do cartão que já está visível. */
.tutorial-inline,.tutorial-primeira{background:none;border:none;padding:0;cursor:pointer;
  font:inherit;font-size:var(--fs-xs);color:var(--accent);text-decoration:underline;
  text-underline-offset:3px}
.tutorial-inline:hover,.tutorial-primeira:hover{color:var(--accent-soft)}
.tutorial-inline{display:none;margin-top:var(--space-sm)}
@media(max-width:900px){ .tutorial-inline{display:inline-block} }
/* Na faixa de prontidão o link entra depois de um botão, então precisa de ar à
   esquerda e da liberdade de cair para a linha de baixo em telas estreitas. */
.tutorial-primeira{margin-left:8px;display:inline-block}

/* ---------- faixa da amostra gratuita ----------
   Um convite, não um anúncio: fica no topo da tela de estudo, é dispensável com
   a rolagem, e não se repete em nenhuma outra tela. Quem está testando já sabe
   que está testando — repetir isso a cada clique irrita mais do que converte. */
.amostra-faixa{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap;
  border-left:3px solid var(--accent)}
.amostra-faixa .btn{white-space:nowrap;flex-shrink:0}
@media(max-width:700px){
  .amostra-faixa{gap:var(--space-md)}
  .amostra-faixa .btn{width:100%}
}

/* ---------- campos: 16px no celular, por último de propósito ----------
   O iOS amplia a página sozinho ao focar um campo com fonte abaixo de 16px. O
   campo de justificativa da conduta tinha 13px, então bastava tocar nele para a
   tela inteira se deslocar — o mesmo efeito que fazia o aplicativo parecer travado.
   Esta regra fica no fim do arquivo porque a definição base de `textarea` vem
   depois do topo e, com especificidade igual, quem vem por último vence. */
@media(max-width:760px){
  textarea, input[type="text"], input:not([type]), select{ font-size:16px }
}