/* ==========================================================================
   CONTÁGIO 2026 · FORMS — a cara do Hub, com o evento por cima
   --------------------------------------------------------------------------
   O ESQUELETO É O DO HUB (apps/web/styles/liquid-glass.css e o painel Hoje):
   superfície sólida com fio de 1 px, nada de vidro nem desfoque, Montserrat
   900 nos títulos, Inter no texto, a linha com pastilha de ícone à esquerda e
   ação à direita, o rótulo de seção em caixa alta pequena, tema claro e
   escuro com os mesmos valores do Hub. Quem usa o Hub reconhece; quem não usa
   não precisa aprender nada.

   O QUE É SÓ DO EVENTO: o fio azul embaixo do topo,
   números em Orbitron (bloco, nota, contagem, fase), o anel de progresso dos
   9 blocos, a régua de 0 a 10 com o degradê de "dói" a "saudável" e a borda
   azul no bloco liberado — é o que a pessoa tem de achar com o polegar no meio
   da palestra. Sem neon: nada de brilho nem sombra colorida (29/10).

   Feito para o celular: alvo de toque de 52 px ou mais, nada abaixo de 12 px.
   O @media print do fim é o PDF (sai do navegador, não da VM).
   ========================================================================== */
:root {
    color-scheme: dark;
    --fundo: #080E1C;
    --sup: #10182B;
    --sup-alta: #17213A;
    --sup-funda: #0D1526;
    --fio: #243049;
    --fio-forte: #33425F;
    --texto: #F8FAFC;
    --mute: #A3B2C7;
    --fraco: #6B7A93;
    --royal: #2563EB;
    --royal-escuro: #1D4ED8;
    --royal-texto: #60A5FA;
    --ciano: #06B6D4;
    --ok: #10B981;
    --atencao: #F59E0B;
    --erro: #EF4444;
    --sombra: 0 12px 28px -22px rgba(0, 0, 0, 0.72);
    --sombra-alta: 0 18px 40px -24px rgba(0, 0, 0, 0.85);
    /* Sem neon (pedido de 29/10): o acento é o azul royal do Hub, sólido, e o
       que marca seleção é a borda, não brilho. */
    --evento: #2563EB;
    --tinta: rgba(37, 99, 235, 0.14);
    --brilho: 0 0 0 1px #3B82F6;
    --titulo: "Montserrat", "Inter", system-ui, sans-serif;
    --corpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --numero: "Orbitron", "Montserrat", system-ui, sans-serif;
    --raio: 18px;
    /* O logo do Hub é preto: no escuro vira branco, como no ios-layer.css. */
    --logo-filtro: brightness(0) invert(1);
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --fundo: #EEF3FA;
        --sup: #FFFFFF;
        --sup-alta: #FFFFFF;
        --sup-funda: #F4F7FC;
        --fio: #D7E0EC;
        --fio-forte: #C3CFE0;
        --texto: #0B132B;
        --mute: #55637A;
        --fraco: #8592A8;
        --royal-texto: #1D4ED8;
        --sombra: 0 10px 24px -20px rgba(15, 23, 42, 0.28);
        --sombra-alta: 0 14px 30px -22px rgba(15, 23, 42, 0.34);
        --tinta: rgba(37, 99, 235, 0.08);
        --brilho: 0 0 0 1px #2563EB;
        --logo-filtro: none;
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--fundo);
    color: var(--texto);
    font: 400 16px/1.5 var(--corpo);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { width: 20px; height: 20px; flex: none; }

/* ------------------------------------------------------------------ topo -- */
.topo {
    position: sticky; top: 0; z-index: 5; max-width: 588px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: max(10px, env(safe-area-inset-top)) 14px 10px;
    background: linear-gradient(180deg, var(--fundo) 78%, transparent);
}
.topo::before {
    /* O cartão do topo, como o header do Hub, com a faixa do evento embaixo. */
    content: ""; position: absolute; inset: max(10px, env(safe-area-inset-top)) 14px 10px;
    background: var(--sup); border: 1px solid var(--fio); border-radius: 22px; box-shadow: var(--sombra); z-index: -1;
}
.topo::after {
    content: ""; position: absolute; left: 38px; right: 38px; bottom: 10px; height: 2px; border-radius: 2px;
    background: var(--evento); opacity: 0.85;
}
.topo-marca { display: flex; align-items: center; gap: 12px; padding: 10px 0 10px 10px; min-width: 0; }
.logo-box {
    width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center;
    background: var(--sup-alta); border: 1px solid var(--fio);
}
.logo-box img { width: 28px; height: 28px; object-fit: contain; filter: var(--logo-filtro); }
.kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--royal-texto); line-height: 1.2; }
.topo-titulo { font: 900 17.5px/1.15 var(--titulo); letter-spacing: -0.01em; white-space: nowrap; }
.topo-titulo span { color: var(--royal-texto); }
.salvando {
    margin-right: 12px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
    color: var(--mute); background: var(--sup-alta); border: 1px solid var(--fio);
}
.salvando:empty { display: none; }
.salvando::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ok); vertical-align: 1px; }
.salvando.off { color: var(--atencao); }
.salvando.off::before { background: var(--atencao); }

.app { max-width: 560px; margin: 0 auto; padding: 10px 18px calc(36px + env(safe-area-inset-bottom)); }
.carregando { color: var(--mute); text-align: center; margin-top: 30vh; }

h1, h2 { font-family: var(--titulo); font-weight: 900; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 10px; }
h1 { font-size: 26px; }
h2 { font-size: 19px; }
p { margin: 0 0 14px; }
.mute { color: var(--mute); }
.pequeno { font-size: 13.5px; }
.secao { margin: 22px 2px 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }

/* ---------------------------------------------------------------- botões -- */
.btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 54px; padding: 14px 18px; margin: 0 0 10px;
    border: 0; border-radius: 16px;
    background: var(--royal);
    color: #fff; font-weight: 800; font-size: 16px; letter-spacing: 0.005em;
    transition: transform 0.08s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: scale(0.985); }
.btn:disabled { opacity: 0.38; box-shadow: none; cursor: default; }
.btn.sec { background: var(--sup); border: 1px solid var(--fio-forte); color: var(--texto); box-shadow: none; font-weight: 700; }
.btn.link { background: none; box-shadow: none; min-height: 44px; color: var(--royal-texto); font-weight: 700; }
.btn .ui-icon { width: 18px; height: 18px; }
.acoes { margin-top: auto; padding-top: 18px; }

/* ----------------------------------------------------- a linha do Hub --
   Pastilha de ícone, texto em duas linhas, ação à direita. É a mesma peça
   para os blocos do início e para as opções das perguntas. */
.linha {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 11px 12px; text-align: left;
    background: var(--sup-alta); border: 1px solid var(--fio); border-radius: var(--raio);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.08s ease;
}
.linha:active:not(:disabled) { transform: scale(0.99); }
.linha:disabled { cursor: default; }
.pastilha {
    width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center;
    background: var(--sup-funda); border: 1px solid var(--fio); color: var(--fraco);
}
.pastilha .ui-icon { width: 20px; height: 20px; }
.txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.txt b { font-size: 15px; font-weight: 700; line-height: 1.3; }
.txt small { font-size: 12.5px; color: var(--mute); line-height: 1.35; }
.go { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--royal-texto); white-space: nowrap; }
.go .ui-icon { width: 16px; height: 16px; }

/* Os 9 blocos: bloqueado apagado, liberado brilhando, respondido verde. */
.blocos { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.linha.bloqueado { background: var(--sup); }
.linha.bloqueado .txt b { color: var(--mute); }
.linha.bloqueado .go { color: var(--fraco); }
.linha.liberado { border-color: transparent; box-shadow: var(--brilho); background: linear-gradient(var(--tinta), var(--tinta)), var(--sup-alta); }
.linha.liberado .pastilha { background: var(--evento); border: 0; color: #fff; }
.linha.respondido .pastilha { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.35); color: var(--ok); }
.linha.respondido .go { color: var(--ok); }
.num { font: 900 11px/1 var(--numero); letter-spacing: 0.06em; color: var(--fraco); margin-right: 6px; }
.linha.liberado .num { color: var(--royal-texto); }

/* -------------------------------------------------------------- cartões -- */
.cartao {
    background: var(--sup); border: 1px solid var(--fio); border-radius: 22px; box-shadow: var(--sombra);
    padding: 18px; margin: 0 0 14px;
}
.cartao.destaque { border-color: transparent; box-shadow: var(--brilho); background: linear-gradient(var(--tinta), var(--tinta)), var(--sup); }
.cartao h2 { margin-bottom: 6px; }
.cartao .btn.link { width: auto; min-height: 40px; margin: 0; padding: 4px 0; justify-content: flex-start; }

/* O progresso: o anel do evento com a contagem em Orbitron. */
.progresso { display: flex; align-items: center; gap: 16px; }
.anel {
    --p: 0; width: 76px; height: 76px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(from -90deg, var(--royal) calc(var(--p) * 1%), var(--sup-funda) 0);
}
.anel > div { width: 62px; height: 62px; border-radius: 50%; background: var(--sup); display: grid; place-items: center; text-align: center; line-height: 1; }
.anel b { font: 900 22px/1 var(--numero); }
.anel small { display: block; font-size: 10.5px; color: var(--mute); margin-top: 3px; }
.progresso .txt b { font-size: 16px; }
.sorteio { display: flex; align-items: center; gap: 12px; }
.sorteio .pastilha { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.4); color: var(--atencao); }
.cartao.ok { border-color: rgba(16, 185, 129, 0.45); }

/* A entrada: o que vai acontecer nos dois dias, em três linhas. */
.lista-passos { display: grid; gap: 10px; margin: 18px 0 6px; }
.lista-passos .linha { min-height: 58px; background: var(--sup); }
.lista-passos .pastilha { color: var(--royal-texto); }

/* ---------------------------------------------------- a tela da pergunta -- */
.passo { min-height: calc(100dvh - 120px); display: flex; flex-direction: column; }
.passo .corpo { flex: 1; }
.contexto { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 2px 0 8px; }
.voltar { display: inline-flex; align-items: center; gap: 6px; background: var(--sup); border: 1px solid var(--fio); border-radius: 999px;
    color: var(--texto); font-weight: 700; font-size: 13px; padding: 7px 12px 7px 10px; min-height: 36px; }
.voltar .ui-icon { width: 15px; height: 15px; color: var(--royal-texto); }
.onde { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.onde b { font-family: var(--numero); font-weight: 900; color: var(--texto); letter-spacing: 0.04em; }
.barra { height: 6px; border-radius: 3px; background: var(--sup-alta); overflow: hidden; margin: 0 0 22px; }
.barra i { display: block; height: 100%; background: var(--evento); border-radius: 3px; transition: width 0.3s ease; }
.pergunta { font: 800 21px/1.3 var(--titulo); letter-spacing: -0.01em; margin: 4px 0 6px; }
.frase { font: 800 22px/1.32 var(--titulo); letter-spacing: -0.01em; margin: 6px 0 0; }
.selo-fase {
    display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--mute); line-height: 1.4;
    background: var(--sup); border: 1px solid var(--fio); border-radius: 14px; padding: 10px 12px; margin-bottom: 18px;
}
.selo-fase .ui-icon { width: 16px; height: 16px; color: var(--royal-texto); margin-top: 1px; }

/* As opções: a linha do Hub com um círculo que vira check. Nada vem marcado. */
.opcoes { display: grid; gap: 10px; margin: 18px 0 8px; }
.opcao { min-height: 58px; font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.opcao .marca {
    width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--fio-forte);
    display: grid; place-items: center; color: transparent; transition: all 0.15s ease;
}
.opcao .marca .ui-icon { width: 14px; height: 14px; stroke-width: 3; }
.opcao.marcada { border-color: transparent; box-shadow: var(--brilho); background: linear-gradient(var(--tinta), var(--tinta)), var(--sup-alta); }
.opcao.marcada .marca { background: var(--evento); border-color: transparent; color: #fff; }

/* A régua de 0 a 10: números em Orbitron e, embaixo, o degradê do que dói
   (0) ao saudável (10). O degradê é legenda, não marca nada. */
/* 11 botões em 6 + 5: a segunda linha centrada, para o 10 não ficar sozinho num canto. */
.regua { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 10px; }
.regua .nota {
    flex: 0 0 calc((100% - 40px) / 6);
    min-height: 52px; border-radius: 14px; border: 1px solid var(--fio); background: var(--sup-alta);
    font: 900 17px/1 var(--numero); transition: all 0.12s ease;
}
.regua .nota.marcada { background: var(--evento); border-color: transparent; color: #fff; }
.termometro { height: 4px; border-radius: 2px; margin: 6px 0 8px; background: linear-gradient(90deg, var(--erro), var(--atencao) 45%, #3B82F6 75%, var(--ok)); opacity: 0.8; }
.regua-rotulos { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; color: var(--mute); line-height: 1.35; }
.regua-rotulos span:last-child { text-align: right; }
.regua-rotulos b { font-family: var(--numero); color: var(--texto); }

/* --------------------------------------------------------------- campos -- */
.campo {
    width: 100%; min-height: 54px; padding: 14px 16px; margin: 14px 0 6px;
    border: 1px solid var(--fio-forte); border-radius: 16px; background: var(--sup);
    font-size: 17px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo::placeholder { color: var(--fraco); }
.campo:focus { border-color: var(--royal); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.22); }
textarea.campo { min-height: 140px; line-height: 1.5; resize: vertical; }
textarea.visao { min-height: 260px; }
.contador { font: 700 12px/1.4 var(--corpo); color: var(--mute); text-align: right; }
.contador b { font-family: var(--numero); color: var(--texto); }
.erro { color: var(--erro); font-size: 14px; font-weight: 600; margin: 6px 0 0; min-height: 1px; }
.aceite { display: flex; gap: 14px; align-items: flex-start; padding: 16px; margin: 16px 0;
    border: 1px solid var(--fio); border-radius: var(--raio); background: var(--sup-alta); font-size: 15px; line-height: 1.45; }
.aceite input { width: 24px; height: 24px; flex: none; accent-color: var(--royal); margin-top: 1px; }

/* -------------------------------------------------------- telas de fecho -- */
.fecho { text-align: center; padding-top: 8vh; }
.fecho .pastilha { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 18px; background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.4); color: var(--ok); }
.fecho .pastilha .ui-icon { width: 30px; height: 30px; stroke-width: 2.5; }
.fecho p { color: var(--mute); max-width: 380px; margin-left: auto; margin-right: auto; }

/* -------------------------------------------------------------- a fase -- */
.piramide { display: grid; gap: 6px; justify-items: center; margin: 14px 0 22px; }
.piramide div {
    height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px;
    font: 900 11px/1.1 var(--numero); letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
    background: var(--sup-alta); color: var(--fraco); border: 1px solid var(--fio);
}
.piramide .n4 { width: 44%; } .piramide .n3 { width: 62%; } .piramide .n2 { width: 81%; } .piramide .n1 { width: 100%; }
.piramide .acesa { background: var(--evento); color: #fff; border-color: transparent; }
.nome-fase { font: 900 28px/1.1 var(--titulo); letter-spacing: -0.02em; margin: 0 0 8px; }
.lema { font-weight: 600; font-size: 16.5px; color: var(--royal-texto); }

/* ------------------------------------------------------------- o plano -- */
.visao-linha { font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 4px; }
.visao-linha.aberta { white-space: pre-wrap; }
.cartao-plano label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); margin: 14px 0 0; }
.cartao-plano .campo { margin-top: 6px; font-size: 15.5px; min-height: 48px; background: var(--sup-funda); }
.cartao-plano textarea.campo { min-height: 72px; }
.porque { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--royal-texto); }
.porque b { font: 900 12px/1 var(--numero); width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center;
    background: var(--evento); color: #fff; }
.checkin-meta .pergunta { font-size: 17px; }
.avancos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.avancos button { min-height: 46px; border-radius: 12px; border: 1px solid var(--fio); background: var(--sup-alta); font: 900 12.5px/1 var(--numero); }
.avancos button.marcada { background: var(--evento); border-color: transparent; color: #fff; }

/* ---------------------------------------------------------------- aviso -- */
.aviso {
    position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    width: calc(100% - 32px); max-width: 520px; padding: 13px 16px; border-radius: 16px; font-size: 14.5px; font-weight: 600;
    background: var(--sup-alta); border: 1px solid var(--fio-forte); box-shadow: var(--sombra-alta); z-index: 10;
}

/* ------------------------------------------------------------ relatório --
   Um cartão por bloco do documento (A a O), na ordem da fase. A borda da
   esquerda é o único destaque: vermelha no choque de realidade (C), âmbar no
   "não fazer agora" (H), como pede o documento. */
.r-barra { display: flex; justify-content: space-between; gap: 10px; margin: 2px 0 14px; }
.relatorio .cartao { padding: 20px 18px; }
.r-abre { margin: 6px 2px 18px; }
.r-abre h1 { font-size: 25px; }
.r-forte { font-weight: 600; font-size: 16.5px; line-height: 1.45; }
.relatorio .frase { margin-bottom: 12px; }
.cartao.alerta { border-left: 4px solid var(--erro); }
.cartao.atencao { border-left: 4px solid var(--atencao); }
.r-fase { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.r-fase .nome-fase { margin-bottom: 2px; }
.nota-geral { flex: none; text-align: center; padding: 10px 14px; border-radius: 16px; background: var(--sup-alta); border: 1px solid var(--fio); }
.nota-geral b { display: block; font: 900 24px/1 var(--numero); }
.nota-geral small { font-size: 11px; color: var(--mute); }
.nota-num { font-family: var(--numero); color: var(--texto); }

.radar { display: block; width: 100%; max-width: 360px; margin: 4px auto 6px; overflow: visible; }
.r-grade { fill: none; stroke: var(--fio); stroke-width: 1; }
.r-forma { fill: rgba(37, 99, 235, 0.18); stroke: var(--royal); stroke-width: 2; stroke-linejoin: round; }
.r-nome { font: 700 12px var(--corpo); fill: var(--texto); }
.r-nome.apagado { fill: var(--fraco); }
.r-valor { font: 900 12px var(--numero); }
.areas { display: grid; gap: 6px; margin-top: 8px; }
.area-linha { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--sup-alta); border: 1px solid var(--fio); font-weight: 600; font-size: 14.5px; }
.area-linha span:first-child { flex: 1; }
.area-linha .leitura { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fraco); }
.area-linha b { font: 900 15px/1 var(--numero); min-width: 34px; text-align: right; }

.ponto-forte { margin-top: 6px; background: var(--sup-funda); }
.ponto-forte .pastilha { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.35); color: var(--ok); }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.duas div { padding: 12px; border-radius: 14px; background: var(--sup-alta); border: 1px solid var(--fio); display: grid; gap: 2px; }
.duas small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); }
.duas span { font: 900 18px/1 var(--numero); }
.erros { margin: 0; padding: 0; list-style: none; counter-reset: erro; display: grid; gap: 12px; }
.erros li { counter-increment: erro; display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; }
.erros li::before { content: counter(erro); grid-row: span 2; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
    background: var(--sup-alta); border: 1px solid var(--fio); font: 900 12px/1 var(--numero); color: var(--royal-texto); }
.erros b { font-size: 15px; }
.erros span { color: var(--mute); font-size: 14.5px; }
.r-visao { white-space: pre-wrap; font-style: italic; font-size: 16px; line-height: 1.55; padding-left: 14px; border-left: 3px solid var(--royal); }
.lista-k { display: grid; gap: 8px; }
.lista-k .linha { min-height: 52px; background: var(--sup); }
.lista-k .pastilha { color: var(--royal-texto); width: 34px; height: 34px; }
.portao { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.portao li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: 15px; }
.portao li small { display: block; font-weight: 500; font-size: 12.5px; color: var(--fraco); }
.portao .marca { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--fio-forte); display: grid; place-items: center; }
.portao li.sim .marca { background: var(--ok); border-color: var(--ok); color: #fff; }
.portao .marca .ui-icon { width: 14px; height: 14px; stroke-width: 3; }
.prioridade { padding: 14px 0; border-bottom: 1px solid var(--fio); }
.prioridade:last-of-type { border-bottom: 0; margin-bottom: 8px; }
.prioridade .r-forte { margin: 8px 0 4px; }
/* P, Q, R e S: os blocos montados com as respostas da pessoa. */
.r-resumo { float: right; color: var(--royal-texto); letter-spacing: 0.04em; }
.fatos li.meio .marca { border-color: var(--atencao); }
.fatos li.ruim .marca { border-color: var(--erro); background: rgba(239, 68, 68, 0.12); }
.q-area { padding: 14px 0; border-bottom: 1px solid var(--fio); }
.q-area:last-child { border-bottom: 0; padding-bottom: 0; }
.q-topo { display: flex; align-items: baseline; gap: 10px; }
.q-topo b { font: 900 17px/1.2 var(--titulo); }
.q-topo .leitura { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.q-nota { margin-left: auto; font: 900 20px/1 var(--numero); }
.q-perg { margin: 8px 0 2px; color: var(--mute); font-size: 14px; }
.q-resp { margin: 0 0 6px; }
.q-degrau, .q-alto { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; font-size: 14.5px; }
.q-degrau .ui-icon { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--royal-texto); }
.q-alto .ui-icon { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--ok); }
.q-alto { color: var(--mute); }
.q-aberta { margin: 8px 0 0; padding-left: 12px; border-left: 3px solid var(--royal); font-style: italic; }
.q-aberta small { display: block; font-style: normal; font-size: 12px; color: var(--fraco); margin-top: 2px; }
.r-diverge + .r-diverge { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--fio); }
.r-diverge .duas { margin: 8px 0; }
.s-areas { display: grid; gap: 10px; margin-top: 6px; }
.s-area { display: grid; grid-template-columns: 86px 1fr 62px; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; }
.s-barras { display: grid; gap: 4px; }
.s-barras i { display: block; height: 8px; border-radius: 4px; max-width: 100%; }
.s-barras i.sala { height: 5px; background: var(--fraco); opacity: 0.6; }
.s-num { text-align: right; line-height: 1.1; }
.s-num b { font: 900 15px/1 var(--numero); display: block; }
.s-num small { font-size: 11px; color: var(--fraco); }
.r-fecho { text-align: center; padding: 18px 0 8px; }
.r-fecho p { font: 900 22px/1.2 var(--titulo); margin-bottom: 6px; }
.r-fecho small { font: 900 12px var(--numero); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }

/* -------------------------------------------------------------- o telão --
   Para o LED do palco: lido de longe, então números enormes e nada mais. */
/* O telão não rola: tudo cabe na altura da tela, por isso as medidas vêm de
   vh e do menor entre largura e altura. Sem o topo do celular. */
body.modo-telao .topo { display: none; }
body.modo-telao .app { max-width: 1600px; padding: 2.4vh 3vw; }
.telao { display: grid; gap: 1.8vh; }
.telao small { display: block; font-size: clamp(12px, min(1.1vw, 1.9vh), 22px); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-bottom: 1.2vh; }
.telao em { font-style: normal; color: var(--royal-texto); }
.telao-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6vw; }
.telao-numeros div { background: var(--sup); border: 1px solid var(--fio); border-radius: 22px; padding: 1.6vh 1.6vw; }
.telao-numeros b { display: block; font: 900 clamp(30px, min(4.4vw, 7.4vh), 110px)/1 var(--numero); }
.telao-numeros span { display: block; font-size: clamp(12px, min(1.2vw, 2.1vh), 24px); color: var(--mute); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.telao-meio, .telao-baixo { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.6vw; }
.telao-caixa { background: var(--sup); border: 1px solid var(--fio); border-radius: 22px; padding: 1.8vh 1.6vw; min-width: 0; }
.telao-fases, .telao-areas { display: grid; gap: 1vh; }
.telao-fase, .telao-area { display: grid; grid-template-columns: minmax(120px, 13vw) 1fr minmax(70px, 6.5vw); gap: 1.2vw; align-items: center; }
.telao-nome { font: 900 clamp(15px, min(1.7vw, 3vh), 34px)/1.1 var(--titulo); }
.telao-barra { display: block; height: clamp(14px, 3vh, 44px); border-radius: 14px; background: var(--sup-alta); border: 1px solid var(--fio); overflow: hidden; }
.telao-barra.fina { height: clamp(8px, 1.6vh, 20px); margin-top: 1vh; }
.telao-barra i { display: block; height: 100%; background: var(--evento); border-radius: 14px; transition: width 0.8s ease; }
.telao-pct { text-align: right; }
.telao-pct b { display: block; font: 900 clamp(20px, min(2.6vw, 4.4vh), 56px)/1 var(--numero); }
.telao-pct small { margin: 0; letter-spacing: 0; text-transform: none; font-weight: 600; }
.telao-vazio { color: var(--fraco); font-size: clamp(14px, 1.4vw, 26px); }
.telao-gargalo { background: var(--sup); border: 1px solid var(--fio); border-left: 6px solid var(--atencao); border-radius: 22px; padding: 1.8vh 1.6vw; min-width: 0; }
.telao-gargalo b { display: flex; align-items: baseline; gap: 1vw; font: 900 clamp(22px, min(3vw, 5vh), 60px)/1.1 var(--titulo); margin: 0 0 0.6vh; }
.telao-gargalo b em { font: 900 0.7em/1 var(--numero); }
.telao-gargalo p { margin: 0; font-size: clamp(14px, min(1.5vw, 2.6vh), 30px); font-weight: 600; color: var(--mute); }
.telao-outros, .telao-segmentos { display: flex; flex-wrap: wrap; gap: 0.7vh 0.8vw; margin-top: 1.2vh; }
.telao-outros span, .telao-segmentos span { padding: 0.5vh 0.8vw; border-radius: 999px; background: var(--sup-alta); border: 1px solid var(--fio);
    font-size: clamp(12px, min(1.1vw, 1.9vh), 22px); font-weight: 700; }
.telao-bloco { display: flex; align-items: baseline; gap: 1vw; }
.telao-bloco b { font: 900 clamp(28px, min(3.6vw, 6vh), 76px)/1 var(--numero); }
.telao-bloco span { font-size: clamp(14px, min(1.4vw, 2.4vh), 28px); color: var(--mute); font-weight: 600; }
.telao-ritmo { display: flex; align-items: center; gap: 0.8vw; margin: 1.2vh 0 0; font-size: clamp(13px, min(1.3vw, 2.2vh), 26px); font-weight: 600; color: var(--mute); }
.telao-ritmo i { width: 1.2vh; height: 1.2vh; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--ok); animation: telao-pulso 1.6s ease-in-out infinite; }
@keyframes telao-pulso { 50% { opacity: 0.25; } }

/* ---------------------------------------------------------------- o PDF --
   "Baixar PDF" imprime esta página. Folha branca, sem topo, sem botões, e
   nenhum cartão partido no meio. */
@media print {
    :root { --fundo: #fff; --sup: #fff; --sup-alta: #F4F7FC; --sup-funda: #F4F7FC; --fio: #D7E0EC; --fio-forte: #C3CFE0;
        --texto: #0B132B; --mute: #55637A; --fraco: #8592A8; --royal-texto: #1D4ED8; --logo-filtro: none; }
    @page { size: A4; margin: 14mm; }
    body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .topo, .r-barra, .btn, .aviso, .salvando { display: none !important; }
    .app { max-width: none; padding: 0; }
    .cartao { box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
    .radar { max-width: 300px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }