/* ==========================================================================
   Portal de apoio à decisão clínica — CSS da aplicação
   ==========================================================================
   Carrega DEPOIS do core.min.css do DS Gov BR, então qualquer regra daqui com
   a mesma especificidade de uma do core vence. Isso é útil (é como se anula o
   cap de largura do select) e é armadilha (é como se mata sem querer o estado
   ativo de um componente) — ver o comentário de cada bloco.

   No HTML original havia ~4.987 linhas de CSS distribuídas em oito blocos
   <style>, com quase metade repetida entre páginas. O que sobrou aqui é o que
   o DS Gov BR não entrega: o hero da inicial, a vitrine de ferramentas e os
   blocos clínicos das calculadoras.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Rawline — a fonte do DS Gov BR
   --------------------------------------------------------------------------
   **O pacote @govbr-ds/core NÃO empacota `@font-face` nem os arquivos da
   fonte** — conferido no core.css 3.7.0: zero declarações. O token
   `--font-family-base: Rawline, Raleway, sans-serif` cai, sem isto, no
   `sans-serif` do sistema, e a aplicação inteira renderiza fora do padrão sem
   nada acusar. Vale para toda app Dathi que instala o core e para por aí.

   Servida do próprio domínio, nunca de CDN: o egress do servidor de
   homologação é lista de permissão, e `fonts.googleapis.com` não está nela.
   Os arquivos vieram de `~/dathi/cdc/public/assets/fonts/rawline/`, que já
   resolvia isso.

   Três pesos, não os nove que o DS tokeniza: o portal usa 400 (corpo), 600
   (`--font-weight-semi-bold`) e 700 (`--font-weight-bold`). Os demais existem
   só em utilitários que esta aplicação não usa — trazer 1 MB de fonte para
   cobri-los seria pagar caro por nada.

   `font-display: swap` mostra o texto na fonte de sistema enquanto a Rawline
   carrega. Numa ferramenta de dose, texto legível de imediato vale mais do que
   evitar o reflow. */
@font-face {
    font-family: 'Rawline';
    src: url('/assets/fonts/rawline/rawline-400.woff2') format('woff2'),
         url('/assets/fonts/rawline/rawline-400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rawline';
    src: url('/assets/fonts/rawline/rawline-600.woff2') format('woff2'),
         url('/assets/fonts/rawline/rawline-600.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rawline';
    src: url('/assets/fonts/rawline/rawline-700.woff2') format('woff2'),
         url('/assets/fonts/rawline/rawline-700.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Correções obrigatórias do DS Gov BR
   -------------------------------------------------------------------------- */

/* O DS impõe max-width: 400px no .br-select (select-default, _mixins.scss).
   Num grid de 12 colunas isso deixa o select visivelmente mais curto que os
   inputs da mesma linha. Anular aqui, uma vez — nunca .w-100 repetido no
   markup de cada select.
   .br-select-pendente entra junto: é a classe que o select.js usa para
   esconder os selects do core-init até instanciá-los guardando a referência. */
.br-select,
.br-select-pendente {
    max-width: none;
}

/* Sem isto a lista pisca aberta no carregamento: o display:none da .br-list
   vem da regra .br-select .br-list, e enquanto a classe está trocada ela não
   casa. */
.br-select-pendente {
    min-width: 100px;
    position: relative;
}

.br-select-pendente .br-list {
    display: none;
}

/* Ícone de collapse por CSS, a partir do aria-expanded do acionador — nunca
   por JS. Com o Font Awesome carregado como JS as tags <i> viram <svg>, e
   qualquer referência guardada aponta para um nó que saiu do DOM. */
[data-toggle="collapse"] .collapse-icon-collapsed {
    display: none;
}

[data-toggle="collapse"][aria-expanded="false"] .collapse-icon-expanded {
    display: none;
}

[data-toggle="collapse"][aria-expanded="false"] .collapse-icon-collapsed {
    display: inline-block;
}

/* --------------------------------------------------------------------------
   2. Cores por área temática — os laços das campanhas
   --------------------------------------------------------------------------
   A cor de cada área é a do laço da campanha correspondente: vermelho para
   HIV/Aids, tuberculose e IST; amarelo para hepatites virais; verde para
   leishmaniose; laranja para dengue. Malária e "outras infecções" não têm cor
   de campanha consolidada e ficam com o verde neutro herdado.

   **São dois tokens por área, e o motivo é contraste.** `--area` é o
   preenchimento sólido (círculo do ícone), que carrega ícone branco e precisa
   de luminância baixa; `--area-realce` é o traço fino no topo do cartão, que
   não carrega texto e pode usar a cor da campanha em cheio.

   O amarelo é o caso que obriga essa separação: o amarelo da campanha
   (#ffcd07) com ícone branco por cima dá contraste ~1,4:1 — ilegível. O
   preenchimento usa o âmbar escuro do DS (#947100, ~4,9:1) e o realce mantém o
   amarelo vivo. Os valores saem todos da paleta do DS Gov BR. */
:root {
    /* Laço vermelho — HIV/Aids, tuberculose, IST */
    --campanha-vermelho: var(--red-vivid-60, #b50909);
    --campanha-vermelho-realce: var(--red-vivid-50, #e52207);

    /* Laço amarelo — hepatites virais */
    --campanha-amarelo: var(--yellow-vivid-50, #947100);
    --campanha-amarelo-realce: var(--yellow-vivid-20, #ffcd07);

    /* Laço verde — leishmaniose */
    --campanha-verde: var(--green-cool-vivid-60, #216e1f);
    --campanha-verde-realce: var(--green-cool-vivid-40, #00a91c);

    /* Laranja — dengue */
    --campanha-laranja: var(--orange-vivid-50, #c05600);
    --campanha-laranja-realce: var(--orange-warm-vivid-50, #cf4900);

    /* Neutro — outras infecções e malária, sem cor de campanha consolidada */
    --campanha-neutro: var(--green-cool-vivid-70, #154c21);
    --campanha-neutro-realce: var(--green-cool-vivid-50, #168821);
}

.categoria-hiv,
.categoria-tb,
.categoria-ist {
    --area: var(--campanha-vermelho);
    --area-realce: var(--campanha-vermelho-realce);
}

.categoria-hepatites {
    --area: var(--campanha-amarelo);
    --area-realce: var(--campanha-amarelo-realce);
}

.categoria-outras {
    --area: var(--campanha-neutro);
    --area-realce: var(--campanha-neutro-realce);
}

/* Ferramentas com cor própria, que sobrepõe a da categoria.
   Vêm depois das regras de categoria de propósito: mesma especificidade, e
   quem vence é a última — que aqui é a mais específica em intenção. */
.ferramenta-leishmaniose-visceral {
    --area: var(--campanha-verde);
    --area-realce: var(--campanha-verde-realce);
}

.ferramenta-dengue {
    --area: var(--campanha-laranja);
    --area-realce: var(--campanha-laranja-realce);
}

/* --------------------------------------------------------------------------
   3. Cabeçalho e navegação
   -------------------------------------------------------------------------- */

.portal-header .header-institucional {
    color: var(--gray-60, #636363);
    line-height: 1.35;
    max-width: 26rem;
    text-align: right;
}

@media (max-width: 574px) {
    .portal-header .header-institucional {
        display: none;
    }
}

.portal-header .header-title a {
    color: inherit;
    text-decoration: none;
}

.portal-breadcrumb {
    padding-top: var(--spacing-scale-2x, 1rem);
}

.portal-main {
    padding-bottom: var(--spacing-scale-5x, 2.5rem);
    padding-top: var(--spacing-scale-3x, 1.5rem);
}

/* --------------------------------------------------------------------------
   3.1. Shell: menu lateral + conteúdo
   --------------------------------------------------------------------------
   O comportamento por tamanho de tela é do próprio DS (menu.css):

     < 576px   `.br-menu.active .menu-container` vira `position: fixed` com
               inset 0 — o menu cobre a tela, como um drawer de celular. O
               `.menu-header` (com o X de fechar) aparece só nessa faixa.
     ≥ 576px   `position: static` e `--menu-zindex: 0` — o menu entra no fluxo.
               É aqui que o `push` empurra, e só funciona porque o menu é IRMÃO
               da coluna de conteúdo dentro desta linha.

   O que falta ao DS é a largura da coluna: sem as regras abaixo, o menu no
   fluxo ocuparia a linha inteira e jogaria o conteúdo para baixo em vez de
   para o lado.

   O seletor usa `:has()` para reagir ao estado do próprio menu, sem uma segunda
   fonte de verdade — é o mesmo padrão do `govbr-base`. Onde `:has()` não for
   suportado, o menu ainda abre: cai no comportamento de bloco acima do
   conteúdo, que é degradação aceitável. */
.portal-shell-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.portal-coluna-conteudo {
    flex: 1 1 0;
    /* Sem isto, uma tabela larga dentro de um item flex estica a coluna além
       da linha em vez de rolar dentro do próprio wrapper. */
    min-width: 0;
}

@media (min-width: 576px) {
    .portal-shell-row:has(#main-navigation.br-menu.push.active) {
        align-items: start;
        display: grid;
        gap: var(--spacing-scale-3x, 1.5rem);
        grid-template-columns: 17rem minmax(0, 1fr);
    }

    #main-navigation.br-menu.push.active,
    #main-navigation.br-menu.push.active .menu-container {
        width: 17rem;
    }

    /* O painel acompanha a rolagem: numa ferramenta longa (a malária tem cinco
       etapas e tabelas de referência), um menu que sobe junto com o conteúdo
       obrigaria a voltar ao topo para trocar de ferramenta. */
    #main-navigation.br-menu.push.active .menu-panel {
        height: auto;
        max-height: calc(100vh - 5rem);
        overflow-x: hidden;
        overflow-y: auto;
        position: sticky;
        top: var(--spacing-scale-2x, 1rem);
    }
}

/* --------------------------------------------------------------------------
   4. Hero da página inicial
   -------------------------------------------------------------------------- */

.portal-hero {
    border-bottom: 1px solid var(--gray-10, #e6e6e6);
    margin-bottom: var(--spacing-scale-5x, 2.5rem);
    padding-bottom: var(--spacing-scale-4x, 2rem);
}

.portal-hero-eyebrow {
    color: var(--gray-60, #636363);
    font-size: var(--font-size-scale-down-01, 0.875rem);
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

/* Sem font-size, font-weight, font-family nem color próprios: quem define é a
   classe `text-up-05` do DS e o tema. Antes esta regra impunha 700 e um azul
   próprio, e o título da inicial saía diferente dos títulos das telas de
   ferramenta — que é exatamente o "padrão de fonte" que ele deve seguir. */
.portal-hero-titulo {
    line-height: 1.1;
    margin: 0.25rem 0 0.5rem;
}

.portal-hero-linha {
    color: var(--gray-70, #4f4f4f);
    margin: 0;
}

/* Os três números ficam centralizados, com respiro do texto acima — a faixa
   verde-amarela que antes fazia essa separação saiu. */
/* Os três números como blocos de destaque (stat tiles).
   --------------------------------------------------------------------------
   Antes eram texto solto flutuando no branco, sem peso visual. Como bloco, o
   trio passa a ser lido como um grupo — que é o que ele é — e o número ganha a
   escala que o justifica.

   Grid de três colunas iguais, e não flex com `gap` grande: as colunas
   precisam ter a mesma largura porque os valores têm larguras muito
   diferentes ("8", "5" e "2026"). Em flex, o bloco do ano ficaria bem mais
   largo que os outros dois e o conjunto pareceria desalinhado.

   `max-width` no contêiner impede que os blocos se esparramem por toda a
   largura numa tela grande — a partir de certo ponto, mais espaço entre eles
   não os destaca, só os separa. */
.portal-hero-numeros {
    display: grid;
    gap: var(--spacing-scale-2x, 1rem);
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: var(--spacing-scale-4x, 2rem) 0 0;
    max-width: 46rem;
    padding: 0;
}

.portal-hero-numeros li {
    background: var(--gray-2, #f8f8f8);
    border-radius: var(--surface-rounder-sm, 8px);
    border-top: 3px solid var(--blue-warm-vivid-70, #1351b4);
    padding: var(--spacing-scale-3x, 1.5rem) var(--spacing-scale-2x, 1rem);
    text-align: center;
}

.portal-hero-numeros strong {
    color: var(--blue-warm-vivid-80, #0c326f);
    display: block;
    font-size: var(--font-size-scale-up-06, 2.6rem);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1;
}

/* Rótulo em caixa alta com entreletra: separa hierarquicamente do número sem
   precisar de mais uma cor, e é o tratamento padrão de legenda de indicador. */
.portal-hero-numeros span {
    color: var(--gray-70, #4f4f4f);
    display: block;
    font-size: var(--font-size-scale-down-01, 0.875rem);
    font-weight: var(--font-weight-semi-bold, 600);
    letter-spacing: 0.04em;
    line-height: 1.3;
    margin-top: var(--spacing-scale-base, 0.5rem);
    text-transform: uppercase;
}

/* Entre 576 e 767px os três blocos cabem, mas o número precisa ceder um pouco
   para o rótulo não quebrar em três linhas. */
@media (max-width: 767px) {
    .portal-hero-numeros strong {
        font-size: var(--font-size-scale-up-04, 2rem);
    }
}

/* No celular os três empilham, um abaixo do outro. Lado a lado numa tela
   estreita, "Ferramentas disponíveis" e "Protocolos atualizados" quebram em
   três linhas cada e os blocos ficam de alturas diferentes. */
@media (max-width: 575px) {
    .portal-hero-numeros {
        grid-template-columns: 1fr;
        max-width: none;
    }

    /* Empilhados, cada bloco tem a largura toda: número e rótulo lado a lado
       aproveitam melhor a linha do que centralizados um sobre o outro. */
    .portal-hero-numeros li {
        align-items: baseline;
        display: flex;
        gap: var(--spacing-scale-2x, 1rem);
        padding: var(--spacing-scale-2x, 1rem);
        text-align: left;
    }

    .portal-hero-numeros strong {
        flex-shrink: 0;
        min-width: 3.5rem;
    }

    .portal-hero-numeros span {
        margin-top: 0;
    }
}

/* --------------------------------------------------------------------------
   5. Seções e acesso rápido
   -------------------------------------------------------------------------- */

.portal-secao {
    margin-bottom: var(--spacing-scale-5x, 2.5rem);
}

/* O cabeçalho de seção É o h2 — o ícone mora dentro dele (ver o comentário na
   view). Sem flex e sem centralização: o ícone herda font-size e line-height do
   título e assenta na mesma linha de base do texto, que é como texto e glifo se
   alinham sem intervenção.
   O `margin-right` no ícone faz o papel que o `gap` fazia no flex. */
.portal-secao-cabecalho {
    margin: 0 0 var(--spacing-scale-2x, 1rem);
}

.portal-secao-cabecalho i {
    color: var(--blue-warm-vivid-70, #1351b4);
    margin-right: var(--spacing-scale-base, 0.5rem);
}

/* Acesso rápido: até 5 cartões por linha nas telas largas.
   Colunas FIXAS, não `auto-fit`: com auto-fit o número de colunas depende da
   largura disponível, e em telas intermediárias a quebra mudaria sozinha a cada
   dezena de pixels — 5 em cima e 4 embaixo, ou 6 e 3.

   **O número não está mais cravado aqui.** Ele vem em `--rapido-colunas` e
   `--rapido-colunas-md`, que o `portal/inicio.php` calcula a partir de quantos
   cartões a página tem — porque isso deixou de ser fixo: produção publica
   quatro ferramentas e homologação, nove, e este arquivo é estático e igual
   nos dois. A regra que o PHP aplica é não deixar cartão sozinho na última
   linha; o comentário dela está lá.

   Os valores de reserva do `var()` são os que valiam quando o catálogo tinha
   nove: se o atributo sumir da marcação, a página volta ao 5 → 3 → 2 → 1 de
   antes em vez de desmontar.

   **5 é o teto, e quem o define é o nome mais longo do catálogo, não o total de
   ferramentas.** Em 6 colunas `Leishmaniose Visceral` deixa de caber em uma
   linha, e a segunda fileira fica mais alta que a primeira. Ao acrescentar
   ferramenta com nome curto, o 5 continua valendo; o que obrigaria a rever é um
   `nomeCurto` mais longo que o da leishmaniose. */
.portal-rapido {
    display: grid;
    gap: var(--spacing-scale-2x, 1rem);
    grid-template-columns: repeat(var(--rapido-colunas, 5), 1fr);
}

/* Abaixo de 1200 o teto cai para 3, sem passar por 4: com 9 ferramentas, 4 e 3
   colunas dão as MESMAS três linhas — mas em 4 a última fica com um cartão só.
   Com 4 ferramentas o cálculo do PHP entrega 2 aqui, e as duas linhas fecham
   cheias. */
@media (max-width: 1199px) {
    .portal-rapido {
        grid-template-columns: repeat(var(--rapido-colunas-md, 3), 1fr);
    }
}

@media (max-width: 767px) {
    .portal-rapido {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .portal-rapido {
        grid-template-columns: 1fr;
    }
}

.portal-rapido-item {
    align-items: center;
    background: var(--pure-0, #fff);
    border: 1px solid var(--gray-10, #e6e6e6);
    border-radius: var(--surface-rounder-sm, 8px);
    border-top: 4px solid var(--area-realce, var(--area, var(--blue-warm-vivid-70, #1351b4)));
    color: var(--gray-80, #333);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-scale-base, 0.5rem);
    justify-content: center;
    padding: var(--spacing-scale-2x, 1rem);
    text-align: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Os cartões inteiros são âncoras, e o sublinhado atravessava texto, ícone e
   tag dentro deles.
   O culpado é `.main-content a { text-decoration: underline }` do core — que
   tem especificidade (0,1,1). Uma regra `.portal-rapido-item` sozinha é (0,1,0)
   e perde, mesmo carregando depois. Por isso o prefixo `.main-content` aqui:
   (0,2,1) vence pela especificidade, sem precisar de `!important`.
   Vale para os dois tipos de cartão e para os descendentes, porque a regra do
   DS alcança o conteúdo da âncora. */
.main-content a.portal-rapido-item,
.main-content a.portal-rapido-item *,
.main-content a.portal-rapido-item:hover,
.main-content a.portal-rapido-item:hover *,
.main-content a.portal-rapido-item:focus,
.main-content a.portal-rapido-item:focus *,
.main-content a.portal-rapido-item:focus-visible,
.main-content a.portal-ferramenta,
.main-content a.portal-ferramenta *,
.main-content a.portal-ferramenta:hover,
.main-content a.portal-ferramenta:hover *,
.main-content a.portal-ferramenta:focus,
.main-content a.portal-ferramenta:focus *,
.main-content a.portal-ferramenta:focus-visible {
    text-decoration: none;
}

.portal-rapido-item:hover,
.portal-rapido-item:focus-visible {
    box-shadow: var(--surface-shadow-md, 0 3px 6px rgba(0, 0, 0, 0.16));
    transform: translateY(-2px);
}

.portal-rapido-icone {
    align-items: center;
    background: var(--area, var(--blue-warm-vivid-70, #1351b4));
    border-radius: 50%;
    color: var(--pure-0, #fff);
    display: inline-flex;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.portal-rapido-nome {
    font-weight: var(--font-weight-semi-bold, 600);
    line-height: 1.25;
}

/* Tag da área (HIV, TB, HCV, LV, ARBO, MAL) preenchida na cor da campanha.
   Texto branco sobre `--area`: todos os tokens de campanha foram escolhidos
   escuros o bastante para isso — o mais claro é o âmbar das hepatites
   (#947100), em ~4,9:1. Era justamente por causa desse contraste que o amarelo
   da campanha (#ffcd07) ficou só no traço de realce do topo do cartão.
   O `.br-tag` do DS traz fundo e cor próprios, então a classe da aplicação
   entra junto no seletor para vencer por especificidade. */
.br-tag.portal-rapido-area {
    background: var(--area, var(--gray-60, #636363));
    color: var(--pure-0, #fff);
    font-weight: var(--font-weight-semi-bold, 600);
}

/* --------------------------------------------------------------------------
   6. Grid de categorias
   -------------------------------------------------------------------------- */

.portal-apresentacao .card-content h2 {
    margin-top: 0;
}

/* As 5 categorias em 3 colunas: 3 na primeira linha, 2 na segunda.
   Três colunas dão largura confortável para o título da categoria e a lista de
   ferramentas, sem a compressão que 5 colunas causariam.
   Escada até o celular: 3 → 2 → 1. */
.portal-categorias {
    display: grid;
    gap: var(--spacing-scale-3x, 1.5rem);
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991px) {
    .portal-categorias {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .portal-categorias {
        grid-template-columns: 1fr;
    }
}

.portal-categoria {
    border-top: 4px solid var(--area-realce, var(--area, var(--blue-warm-vivid-70, #1351b4)));
}

.portal-categoria-cabecalho {
    align-items: center;
    display: flex;
    gap: var(--spacing-scale-2x, 1rem);
}

.portal-categoria-cabecalho h3,
.portal-categoria-cabecalho p {
    margin: 0;
}

.portal-categoria-cabecalho p {
    color: var(--gray-60, #636363);
}

.portal-categoria-icone {
    align-items: center;
    background: var(--area, var(--blue-warm-vivid-70, #1351b4));
    border-radius: 50%;
    color: var(--pure-0, #fff);
    display: inline-flex;
    flex-shrink: 0;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.portal-ferramentas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.portal-ferramentas li + li {
    border-top: 1px solid var(--gray-10, #e6e6e6);
}

.portal-ferramenta {
    align-items: center;
    color: var(--gray-80, #333);
    display: flex;
    gap: var(--spacing-scale-base, 0.5rem);
    padding: var(--spacing-scale-base, 0.5rem) 0;
    text-decoration: none;
}

a.portal-ferramenta:hover,
a.portal-ferramenta:focus-visible {
    color: var(--blue-warm-vivid-70, #1351b4);
}

.portal-ferramenta-icone {
    color: var(--gray-40, #9e9e9e);
    width: 1.25rem;
}

.portal-ferramenta-icone.ativo {
    color: var(--area, var(--blue-warm-vivid-70, #1351b4));
}

.portal-ferramenta-nome {
    flex: 1;
    line-height: 1.3;
}

.portal-ferramenta.indisponivel {
    color: var(--gray-50, #888);
}

/* --------------------------------------------------------------------------
   7. Barra de outras ferramentas e rodapé
   -------------------------------------------------------------------------- */

.portal-outras {
    background: var(--gray-2, #f8f8f8);
    border-top: 1px solid var(--gray-10, #e6e6e6);
    padding: var(--spacing-scale-3x, 1.5rem) 0;
}

.portal-outras-titulo {
    color: var(--gray-70, #4f4f4f);
    margin: 0 0 var(--spacing-scale-2x, 1rem);
}

.portal-outras-lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-base, 0.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Rodapé na anatomia do componente footer do DS: aqui fica só o que o
   componente não resolve sozinho. */

/* Colunas de links. O BRFooter do DS só reconhece a coluna pela classe `col-2`,
   cravada no _showList do footer.js: com outra classe, o toque no título não
   abre a sanfona no celular. No DS a `col-2` tem 1/6 da largura, pensada para
   seis categorias; com três, cada uma fica com um terço. */
@media (min-width: 768px) {
    .portal-footer .br-list.horizontal > .col-2 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    /* O JS do DS fecha as listas até 992px, mas o CSS do DS já esconde a seta
       da sanfona a partir de 768px. Entre os dois, as listas ficariam fechadas
       e sem como abrir. Daqui para cima, elas ficam sempre abertas. */
    .portal-footer .br-list.horizontal > .col-2 > .br-list {
        display: block !important;
    }
}

/* Linha de apoio: botão de instalar à esquerda, assinaturas à direita. Visível
   também no celular, ao contrário do exemplo do DS, que a esconde abaixo de
   576px: é justamente no celular que instalar faz sentido. */
.portal-footer-apoio {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-4x, 2rem);
    justify-content: space-between;
    padding: var(--spacing-scale-4x, 2rem) 0;
}

.portal-footer-instalar p {
    margin: var(--spacing-scale-base, 0.5rem) 0 0;
    max-width: 22rem;
}

/* Ícone de "abre em outra aba", discreto ao lado do texto. */
.portal-footer-externo {
    font-size: 0.75em;
    margin-left: var(--spacing-scale-half, 0.25rem);
    opacity: 0.7;
}

.portal-footer-versao {
    white-space: nowrap;
}

/* As três assinaturas com a MESMA ALTURA DE DESENHO.

   O DS limita `.assigns img` a 46 × 180px. Com esse teto cada marca sairia
   com um tamanho visível diferente, porque cada arte ocupa uma fração diferente
   da própria imagem. Por isso o teto é desligado e a altura vem da
   --altura-marca, com um fator por arquivo.

   Medido na página renderizada, com as artes exportadas do Canva em 18/09/2026
   (altura do desenho, do ponto mais alto ao mais baixo, não da caixa):
   - governoBranco.svg: desenho em 90,7% da imagem, na caixa de 0.655 × a
     medida. É a referência: 0.655 × 90,7% = 59,4%;
   - svsa.svg: desenho em 53,6%, daí 1.109 = 59,4 / 53,6;
   - dathi.svg: desenho em 59,6%, contando a bolinha verde do "i", daí 1.0.

   Com a medida em 70px, as três ficam com ~42px de desenho, o tamanho de
   assinatura do DS. Se algum arquivo for trocado, remedir. */
.portal-footer .assigns {
    --altura-marca: 70px;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-5x, 2.5rem);
    justify-content: flex-end;
    margin-left: auto;
}

.portal-footer .assigns img {
    height: var(--altura-marca);
    max-height: none;
    max-width: 100%;
    width: auto;
}

.portal-footer .assigns img[src*="svsa"] {
    height: calc(var(--altura-marca) * 1.109);
}

.portal-footer .assigns img[src*="governoBranco"] {
    height: calc(var(--altura-marca) * 0.655);
}

/* No celular tudo centralizado, em coluna; as assinaturas quebram linha. */
@media (max-width: 767px) {
    .portal-footer-apoio {
        flex-direction: column;
        text-align: center;
    }

    .portal-footer .assigns {
        --altura-marca: 60px;
        gap: var(--spacing-scale-3x, 1.5rem);
        justify-content: center;
        margin-left: 0;
    }

    .portal-footer-instalar p {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Sobre o Portal. O histórico de versões vai da mais nova para a mais antiga,
   ligado por um traço à esquerda, como uma linha do tempo; a versão em uso
   leva o traço verde. Largura de leitura limitada: é texto corrido. */
.portal-sobre-texto,
.portal-sobre-versoes {
    margin-top: var(--spacing-scale-4x, 2rem);
    max-width: 48rem;
}

/* Subtítulos da página em negrito: no peso padrão do DS eles se confundiam com
   o texto corrido logo abaixo. O título da página (h1) fica no padrão do DS. */
.portal-sobre-titulo {
    font-weight: var(--font-weight-bold, 700);
}

.portal-versoes {
    list-style: none;
    margin: var(--spacing-scale-3x, 1.5rem) 0 0;
    padding: 0;
}

.portal-versao {
    border-left: 3px solid var(--border-color, #cccccc);
    padding: 0 0 var(--spacing-scale-3x, 1.5rem) var(--spacing-scale-3x, 1.5rem);
}

.portal-versao.atual {
    border-left-color: var(--success, #168821);
}

.portal-versao-titulo {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-base, 0.5rem);
    margin: 0;
}

.portal-versao-data {
    margin: var(--spacing-scale-half, 0.25rem) 0 var(--spacing-scale-base, 0.5rem);
    opacity: 0.75;
}

.portal-versao ul {
    margin: 0;
}


/* Idealizador: foto ao lado do nome e da formação. */
.portal-sobre-autor {
    align-items: center;
    display: flex;
    gap: var(--spacing-scale-3x, 1.5rem);
}

.portal-sobre-autor-nome {
    margin: 0;
}

.portal-sobre-autor-formacao {
    list-style: none;
    margin: var(--spacing-scale-half, 0.25rem) 0 0;
    padding: 0;
}

/* No celular a foto vai para cima do texto: lado a lado, a formação ficaria
   espremida em poucas palavras por linha. */
@media (max-width: 575px) {
    .portal-sobre-autor {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   8. Blocos clínicos das ferramentas
   --------------------------------------------------------------------------
   Vocabulário comum às sete calculadoras. Estava repetido em cada <style> do
   HTML original — é a metade duplicada que a migração eliminou. */

/* Passo de fluxo: pergunta + opções. */
.clinico-passo {
    margin-bottom: var(--spacing-scale-4x, 2rem);
}

.clinico-passo-titulo {
    align-items: baseline;
    display: flex;
    gap: var(--spacing-scale-base, 0.5rem);
    margin-bottom: var(--spacing-scale-2x, 1rem);
}

.clinico-passo-numero {
    align-items: center;
    background: var(--blue-warm-vivid-70, #1351b4);
    border-radius: 50%;
    color: var(--pure-0, #fff);
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--font-size-scale-down-01, 0.875rem);
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
}

/* Resultado de cálculo — o destino de toda calculadora. */
.clinico-resultado {
    background: var(--blue-warm-10, #c5d4eb);
    border-left: 4px solid var(--blue-warm-vivid-70, #1351b4);
    border-radius: var(--surface-rounder-sm, 8px);
    margin-top: var(--spacing-scale-3x, 1.5rem);
    padding: var(--spacing-scale-3x, 1.5rem);
}

.clinico-resultado[hidden] {
    display: none;
}

.clinico-resultado-titulo {
    color: var(--blue-warm-vivid-80, #0c326f);
    margin: 0 0 var(--spacing-scale-base, 0.5rem);
}

.clinico-dose {
    font-size: var(--font-size-scale-up-02, 1.25rem);
    font-weight: var(--font-weight-bold, 700);
}

/* Esquema terapêutico. */
.clinico-esquema {
    background: var(--pure-0, #fff);
    border: 1px solid var(--gray-10, #e6e6e6);
    border-radius: var(--surface-rounder-sm, 8px);
    margin-bottom: var(--spacing-scale-2x, 1rem);
    padding: var(--spacing-scale-2x, 1rem);
}

.clinico-esquema-nome {
    color: var(--blue-warm-vivid-80, #0c326f);
    font-weight: var(--font-weight-semi-bold, 600);
}

/* Tabela de dados clínicos.
   NUNCA class="br-table": o BRTable do core-init exige estrutura interna
   específica e gera TypeError. Wrapper próprio, com rolagem horizontal para o
   conteúdo largo não empurrar o body. */
.clinico-tabela-wrapper {
    margin-bottom: var(--spacing-scale-2x, 1rem);
    overflow-x: auto;
}

.clinico-tabela {
    border-collapse: collapse;
    min-width: 32rem;
    width: 100%;
}

.clinico-tabela th,
.clinico-tabela td {
    border-bottom: 1px solid var(--gray-10, #e6e6e6);
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.clinico-tabela thead th {
    background: var(--gray-2, #f8f8f8);
    color: var(--gray-80, #333);
    font-weight: var(--font-weight-semi-bold, 600);
}

/* Grupo de botões de ação de uma etapa. */
.clinico-acoes {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-scale-base, 0.5rem);
    margin-top: var(--spacing-scale-2x, 1rem);
}

@media (min-width: 576px) {
    .clinico-acoes {
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* --------------------------------------------------------------------------
   9. Tela de ferramenta — cabeçalho, painéis de passo e critérios
   -------------------------------------------------------------------------- */

.clinico-cabecalho {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-2x, 1rem);
    justify-content: space-between;
    margin-bottom: var(--spacing-scale-3x, 1.5rem);
}

.clinico-cabecalho h1 {
    margin: 0 0 0.25rem;
}

.clinico-cabecalho p {
    color: var(--gray-70, #4f4f4f);
    margin: 0;
    max-width: 56ch;
}

/* O br-step precisa de respiro do conteúdo que vem abaixo. */
.br-step {
    margin-bottom: var(--spacing-scale-4x, 2rem);
}

/* Etapas com o nome embaixo do número (data-label="bottom"), hoje só no
   Chagas. O rótulo do DS sai em fonte grande e numa linha só; com sete etapas,
   "Diagnóstico laboratorial" invade a vizinha. Colunas de largura igual, e o
   nome longo quebra dentro da sua; sem isso cada etapa cresce conforme o
   tamanho do próprio nome e os números ficam desalinhados. */
.br-step[data-label=bottom] .step-progress-btn {
    flex-basis: 0;
}

.br-step[data-label=bottom] .step-info {
    font-size: var(--font-size-scale-down-01, 0.875rem);
    line-height: 1.3;
    padding-left: var(--spacing-scale-half, 0.25rem);
    padding-right: var(--spacing-scale-half, 0.25rem);
    text-align: center;
}

/* No celular não cabem sete nomes lado a lado. Ficam só os números: o título
   visível do painel, logo abaixo, já diz em que etapa se está. */
@media (max-width: 575px) {
    .br-step[data-label=bottom] .step-info {
        display: none;
    }
}

.clinico-painel[hidden] {
    display: none;
}

/* Título de painel existe para o leitor de tela: visualmente quem nomeia o
   passo é o próprio br-step, e repetir o rótulo na tela seria ruído. */
.sr-only {
    clip: rect(0, 0, 0, 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.clinico-card-titulo {
    align-items: center;
    display: flex;
    gap: var(--spacing-scale-2x, 1rem);
}

.clinico-card-titulo h3 {
    margin: 0;
}

.clinico-card-icone {
    align-items: center;
    border-radius: 50%;
    color: var(--pure-0, #fff);
    display: inline-flex;
    flex-shrink: 0;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.clinico-card-icone.sucesso { background: var(--green-cool-vivid-50, #168821); }
.clinico-card-icone.perigo { background: var(--red-vivid-50, #e52207); }
.clinico-card-icone.info { background: var(--blue-warm-vivid-70, #1351b4); }
.clinico-card-icone.alerta { background: var(--orange-vivid-20, #a8300c); }
.clinico-card-icone.destaque { background: var(--blue-warm-vivid-80, #0c326f); }

/* Critério de elegibilidade: br-checkbox com rótulo de duas linhas.
   O DS estiliza <label> como texto simples; aqui o <strong> é o critério e o
   <small> a nota de rodapé dele. */
.clinico-criterio {
    padding: var(--spacing-scale-base, 0.5rem) 0;
}

.clinico-criterio + .clinico-criterio {
    border-top: 1px solid var(--gray-10, #e6e6e6);
}

.clinico-criterio label strong {
    display: block;
    font-weight: var(--font-weight-semi-bold, 600);
}

.clinico-criterio label small {
    color: var(--gray-60, #636363);
    display: block;
    font-size: var(--font-size-scale-down-02, 0.75rem);
    line-height: 1.45;
    margin-top: 0.15rem;
}

.clinico-notas {
    color: var(--gray-60, #636363);
    font-size: var(--font-size-scale-down-02, 0.75rem);
    line-height: 1.6;
    margin-top: var(--spacing-scale-2x, 1rem);
}

.clinico-notas p {
    margin: 0 0 0.35rem;
}

/* Bloco de destaque colorido (vacinação, interrupção segura). */
.clinico-destaque {
    border-left: 4px solid;
    border-radius: var(--surface-rounder-sm, 8px);
    padding: var(--spacing-scale-2x, 1rem);
}

.clinico-destaque h4 {
    margin: 0 0 var(--spacing-scale-base, 0.5rem);
}

.clinico-destaque ul {
    margin: 0;
    padding-left: 1.25rem;
}

.clinico-destaque.atencao {
    background: var(--yellow-warm-5, #fdf9e8);
    border-color: var(--yellow-vivid-20, #ffcd07);
    color: var(--orange-warm-70, #7b4b13);
}

.clinico-destaque.sucesso {
    background: var(--green-cool-5, #eef7ef);
    border-color: var(--green-cool-vivid-50, #168821);
    color: var(--green-cool-80, #12481a);
}

.clinico-colunas {
    display: grid;
    gap: var(--spacing-scale-2x, 1rem);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.clinico-colunas p {
    margin: 0.15rem 0 0;
}

/* Cartões de escolha (modalidade). <button>, não <div>: recebe foco, responde
   a Enter/Espaço e o aria-pressed anuncia a seleção. */
.clinico-opcoes {
    display: grid;
    gap: var(--spacing-scale-2x, 1rem);
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    margin-top: var(--spacing-scale-2x, 1rem);
}

.clinico-opcao {
    background: var(--pure-0, #fff);
    border: 2px solid var(--gray-10, #e6e6e6);
    border-radius: var(--surface-rounder-sm, 8px);
    cursor: pointer;
    font: inherit;
    padding: var(--spacing-scale-2x, 1rem);
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.clinico-opcao:hover {
    border-color: var(--blue-warm-40, #5992ed);
}

.clinico-opcao[aria-pressed="true"] {
    border-color: var(--blue-warm-vivid-70, #1351b4);
    box-shadow: 0 0 0 3px var(--blue-warm-10, #c5d4eb);
}

.clinico-opcao h4 {
    margin: 0 0 0.5rem;
}

.clinico-opcao p {
    color: var(--gray-70, #4f4f4f);
    margin: 0;
}

.clinico-opcao ul {
    color: var(--gray-60, #636363);
    font-size: var(--font-size-scale-down-01, 0.875rem);
    margin: 0.5rem 0 0.75rem;
    padding-left: 1.25rem;
}

/* Posologia: sequência de tomadas, com seta entre os passos. */
.clinico-posologia {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-3x, 1.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.clinico-posologia li {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
    text-align: center;
}

.clinico-posologia li + li::before {
    color: var(--gray-40, #9e9e9e);
    content: "\2192";
    left: calc(var(--spacing-scale-3x, 1.5rem) * -1);
    position: absolute;
    top: 0.75rem;
}

.clinico-comprimidos {
    color: var(--blue-warm-vivid-70, #1351b4);
    display: flex;
    font-size: 1.5rem;
    gap: 0.25rem;
}

.clinico-posologia-rotulo {
    color: var(--gray-70, #4f4f4f);
    font-size: var(--font-size-scale-down-01, 0.875rem);
    max-width: 14rem;
}

/* Pontos-chave em destaque. */
.clinico-pontos {
    display: grid;
    gap: var(--spacing-scale-2x, 1rem);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin-top: var(--spacing-scale-2x, 1rem);
}

.clinico-ponto {
    align-items: flex-start;
    background: var(--gray-2, #f8f8f8);
    border-radius: var(--surface-rounder-sm, 8px);
    display: flex;
    gap: var(--spacing-scale-base, 0.5rem);
    padding: var(--spacing-scale-2x, 1rem);
}

.clinico-ponto > i {
    color: var(--blue-warm-vivid-70, #1351b4);
    margin-top: 0.2rem;
}

.clinico-ponto p {
    color: var(--gray-60, #636363);
    margin: 0.15rem 0 0;
}

/* Referências ao pé da ferramenta. */
.clinico-referencias {
    border-top: 1px solid var(--gray-10, #e6e6e6);
    color: var(--gray-60, #636363);
    margin-top: var(--spacing-scale-5x, 2.5rem);
    padding-top: var(--spacing-scale-2x, 1rem);
}

.clinico-referencias h2 {
    color: var(--gray-70, #4f4f4f);
    margin: 0 0 var(--spacing-scale-base, 0.5rem);
}

.clinico-referencias p {
    margin: 0 0 0.35rem;
}

/* --------------------------------------------------------------------------
   10. Grupos de escolha, fases de tratamento e fluxograma
   -------------------------------------------------------------------------- */

.clinico-grupo {
    border: 0;
    margin: 0 0 var(--spacing-scale-2x, 1rem);
    padding: 0;
}

.clinico-grupo legend {
    font-weight: var(--font-weight-semi-bold, 600);
    margin-bottom: var(--spacing-scale-base, 0.5rem);
    padding: 0;
}

/* Escolhas em grade: os br-radio/br-checkbox do DS empilham por padrão, e com
   7 condições especiais a coluna única fica longa demais para ler de uma vez. */
/* Grade de opções. `auto-fit` com piso de 18rem: uma opção longa ("Paciente
   crítico/UTI sem TGI funcionante") não cabe em coluna estreita, e um grupo de
   duas opções curtas não deve ocupar a largura toda em duas colunas gigantes. */
.clinico-escolhas {
    display: grid;
    gap: var(--spacing-scale-base, 0.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

/* Densidade compacta, para grupos de rótulo curto (Sim/Não, Com risco/Sem risco). */
.clinico-escolhas.compacta {
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

/* A opção como cartão clicável. O DS entrega o radio "nu", sobre o fundo da
   página; num assistente com 7 ou 8 alternativas o cartão delimita a área de
   toque — que no celular é o que separa acertar de errar a opção.
   `align-items: start` porque o `.br-checkbox` do DS é `display: flex`: sem
   isso o label esticaria na altura do cartão e o quadrado sairia do lugar. */
.clinico-escolha {
    align-items: start;
    background: var(--pure-0, #fff);
    border: 1px solid var(--gray-20, #ccc);
    border-radius: var(--surface-rounder-sm, 8px);
    padding: var(--spacing-scale-2x, 1rem);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* O `+ .br-radio` do DS acrescenta margem entre opções irmãs. Dentro do grid
   quem espaça é o `gap`, e a margem extra desalinharia as linhas. */
.clinico-escolhas .clinico-escolha + .clinico-escolha {
    margin-top: 0;
}

.clinico-escolha:hover {
    border-color: var(--blue-warm-40, #5992ed);
}

/* :has() dá o realce de selecionado sem JS. Onde não houver suporte o campo
   segue funcionando — só não ganha a borda azul. */
.clinico-escolha:has(input:checked) {
    border-color: var(--blue-warm-vivid-70, #1351b4);
    box-shadow: 0 0 0 2px var(--blue-warm-10, #c5d4eb);
}

/* O foco do teclado precisa aparecer no CARTÃO: o input real do DS é
   `opacity: 0; position: absolute`, então o anel de foco do navegador cairia
   num elemento invisível e a navegação por Tab ficaria sem rastro. */
.clinico-escolha:has(input:focus-visible) {
    outline: 2px solid var(--blue-warm-vivid-70, #1351b4);
    outline-offset: 2px;
}

/* O label do DS é `inline-block`; como cartão, ele precisa ocupar a linha
   inteira para a área clicável cobrir todo o bloco. */
.clinico-escolha > label {
    display: block;
    width: 100%;
}

/*
 * ESTE É O PONTO QUE DESALINHAVA TUDO.
 *
 * O círculo do radio é um `::before` absoluto ancorado em `top: -1px` com
 * `height: var(--radio-size)` — 24px. Ele NÃO acompanha um label que cresce:
 * o DS pressupõe rótulo de uma linha só (ver radio-default.html).
 *
 * Como as ferramentas clínicas precisam da descrição por opção, a primeira
 * linha do label tem a altura travada em `--radio-size`. Assim o texto do
 * título e o círculo ocupam a mesma faixa de 24px e centralizam um no outro,
 * independentemente de quantas linhas a descrição tiver embaixo.
 *
 * O checkbox não sofria do mesmo mal — o `::before` dele não declara `top` e
 * fica na posição estática, junto da primeira linha. Por isso o PrEP, que usa
 * checkbox, parecia certo enquanto os demais pareciam tortos.
 */
.clinico-escolha-titulo {
    display: block;
    font-weight: var(--font-weight-semi-bold, 600);
    line-height: var(--radio-size, 24px);
}

.br-checkbox.clinico-escolha .clinico-escolha-titulo {
    line-height: var(--checkbox-size, 24px);
}

.clinico-escolha-ajuda {
    color: var(--gray-60, #636363);
    display: block;
    font-size: var(--font-size-scale-down-02, 0.75rem);
    font-weight: var(--font-weight-regular, 400);
    line-height: 1.45;
    margin-top: 0.15rem;
}

/* Rótulo e texto de apoio do grupo. */
.clinico-grupo-ajuda {
    color: var(--gray-60, #636363);
    margin: -0.15rem 0 var(--spacing-scale-base, 0.5rem);
}

.clinico-campo-peso {
    max-width: 15rem;
}

/* Fase de tratamento (intensiva / manutenção). */
.clinico-fase {
    background: var(--pure-0, #fff);
    border: 1px solid var(--gray-10, #e6e6e6);
    border-radius: var(--surface-rounder-sm, 8px);
    margin-bottom: var(--spacing-scale-2x, 1rem);
    padding: var(--spacing-scale-2x, 1rem);
}

.clinico-fase > p {
    margin: 0.25rem 0 0;
}

.clinico-fase-cabecalho {
    align-items: center;
    display: flex;
    gap: var(--spacing-scale-2x, 1rem);
    margin-bottom: var(--spacing-scale-base, 0.5rem);
}

.clinico-fase-cabecalho p {
    color: var(--gray-60, #636363);
    margin: 0;
}

.clinico-fase-icone {
    align-items: center;
    border-radius: 50%;
    color: var(--pure-0, #fff);
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--font-size-scale-down-01, 0.875rem);
    font-weight: var(--font-weight-bold, 700);
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.clinico-fase-icone.intensiva { background: var(--blue-warm-vivid-70, #1351b4); }
.clinico-fase-icone.manutencao { background: var(--green-cool-vivid-50, #168821); }

/* Sigla do fármaco (R, H, Z, E, Lfx...). */
.clinico-farmaco {
    align-items: center;
    background: var(--gray-60, #636363);
    border-radius: var(--surface-rounder-sm, 8px);
    color: var(--pure-0, #fff);
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--font-size-scale-down-02, 0.75rem);
    font-weight: var(--font-weight-bold, 700);
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.2rem 0.4rem;
}

.clinico-farmaco.r { background: #b8321f; }
.clinico-farmaco.h { background: #0c5a9e; }
.clinico-farmaco.z { background: #7a5a00; }
.clinico-farmaco.e { background: #1d6b2c; }
.clinico-farmaco.lfx { background: #0277bd; }
.clinico-farmaco.mfx { background: #6a1b9a; }
.clinico-farmaco.lzd { background: #c62828; }
.clinico-farmaco.am { background: #2e7d32; }
.clinico-farmaco.cb { background: #a15200; }

/* Linha de fármaco: sigla + nome/dose + valor calculado. */
.clinico-linha-farmaco {
    align-items: center;
    border-bottom: 1px solid var(--gray-10, #e6e6e6);
    display: flex;
    gap: var(--spacing-scale-2x, 1rem);
    padding: var(--spacing-scale-base, 0.5rem) 0;
}

.clinico-linha-farmaco:last-child {
    border-bottom: 0;
}

.clinico-linha-info {
    flex: 1;
}

.clinico-linha-info strong {
    display: block;
}

.clinico-linha-info small {
    color: var(--gray-60, #636363);
    display: block;
    font-size: var(--font-size-scale-down-02, 0.75rem);
}

.clinico-linha-valor {
    font-weight: var(--font-weight-bold, 700);
    white-space: nowrap;
}

.clinico-linha-valor.destaque {
    color: var(--blue-warm-vivid-70, #1351b4);
    font-size: var(--font-size-scale-up-02, 1.25rem);
}

.clinico-destaque.perigo {
    background: var(--red-warm-10, #f9e0dd);
    border-color: var(--red-vivid-50, #e52207);
    color: var(--red-warm-70, #6f2116);
}

.clinico-alerta-texto {
    color: var(--red-vivid-50, #e52207);
}

.clinico-preferencial {
    color: var(--green-cool-vivid-50, #168821);
    font-weight: var(--font-weight-semi-bold, 600);
}

.clinico-restrito {
    color: var(--red-vivid-50, #e52207);
    font-weight: var(--font-weight-semi-bold, 600);
}

.clinico-resultado-card {
    border-left: 4px solid var(--blue-warm-vivid-70, #1351b4);
}

/* Fluxograma como lista ordenada: o leitor de tela percorre as etapas em
   ordem, em vez de encontrar caracteres de seta soltos entre divs. */
.clinico-fluxo {
    list-style: none;
    margin: var(--spacing-scale-2x, 1rem) 0;
    padding: 0;
}

.clinico-fluxo > li {
    background: var(--gray-2, #f8f8f8);
    border: 1px solid var(--gray-10, #e6e6e6);
    border-radius: var(--surface-rounder-sm, 8px);
    margin-bottom: var(--spacing-scale-3x, 1.5rem);
    padding: var(--spacing-scale-2x, 1rem);
    position: relative;
    text-align: center;
}

.clinico-fluxo > li:not(:last-child)::after {
    bottom: calc(var(--spacing-scale-3x, 1.5rem) * -1);
    color: var(--gray-40, #9e9e9e);
    content: "\2193";
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}

.clinico-fluxo > li.inicio {
    background: var(--blue-warm-vivid-70, #1351b4);
    border-color: var(--blue-warm-vivid-70, #1351b4);
    color: var(--pure-0, #fff);
}

.clinico-fluxo > li.fim {
    background: var(--green-cool-vivid-50, #168821);
    border-color: var(--green-cool-vivid-50, #168821);
    color: var(--pure-0, #fff);
}

.clinico-fluxo > li.decisao {
    border-color: var(--yellow-vivid-20, #ffcd07);
    border-width: 2px;
    font-weight: var(--font-weight-semi-bold, 600);
}

.clinico-fluxo-ramos {
    display: grid;
    gap: var(--spacing-scale-2x, 1rem);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    list-style: none;
    margin: var(--spacing-scale-2x, 1rem) 0 0;
    padding: 0;
}

.clinico-fluxo-ramos li {
    background: var(--pure-0, #fff);
    border: 1px solid var(--gray-10, #e6e6e6);
    border-radius: var(--surface-rounder-sm, 8px);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: var(--spacing-scale-base, 0.5rem);
}

.clinico-fluxo-rotulo {
    border-radius: var(--surface-rounder-sm, 8px);
    font-size: var(--font-size-scale-down-02, 0.75rem);
    font-weight: var(--font-weight-bold, 700);
    padding: 0.15rem 0.5rem;
}

.clinico-fluxo-rotulo.negativo {
    background: var(--green-cool-5, #eef7ef);
    color: var(--green-cool-80, #12481a);
}

.clinico-fluxo-rotulo.positivo {
    background: var(--yellow-warm-5, #fdf9e8);
    color: var(--orange-warm-70, #7b4b13);
}

/* Ao imprimir a recomendação, o que interessa é o resultado — não o cabeçalho,
   o stepper, as abas nem a barra de outras ferramentas. */
@media print {
    .portal-header,
    .portal-breadcrumb,
    .portal-outras,
    .portal-footer,
    .br-skiplink,
    .br-step,
    .tab-nav,
    .clinico-acoes {
        display: none !important;
    }

    .tab-panel {
        display: block !important;
    }
}

/* --------------------------------------------------------------------------
   11. Cartões de critério, prescrições e resumo clínico
   -------------------------------------------------------------------------- */

.clinico-dados-pessoa {
    display: grid;
    gap: var(--spacing-scale-2x, 1rem);
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    /* Alinhar pelo topo: .br-input e .br-select têm alturas diferentes acima do
       campo, e ancorar pelo fundo empurraria o mais baixo para cima. */
    align-items: start;
}

.clinico-criterio-card {
    border-left: 4px solid var(--gray-20, #ccc);
    transition: border-color 0.2s ease;
}

/* O realce do cartão segue o nível da opção escolhida, como as classes
   safe/risk/blocked do original — só que derivado do :has(), sem JS. */
.clinico-criterio-card:has(.nivel-seguro input:checked) {
    border-left-color: var(--green-cool-vivid-50, #168821);
}

.clinico-criterio-card:has(.nivel-risco input:checked) {
    border-left-color: var(--yellow-vivid-20, #ffcd07);
}

.clinico-criterio-card:has(.nivel-perigo input:checked) {
    border-left-color: var(--red-vivid-50, #e52207);
}

.clinico-criterio-cabecalho {
    align-items: center;
    display: flex;
    gap: var(--spacing-scale-2x, 1rem);
}

.clinico-criterio-cabecalho h3,
.clinico-criterio-cabecalho p {
    margin: 0;
}

.clinico-criterio-cabecalho p {
    color: var(--gray-60, #636363);
}

.clinico-criterio-cabecalho > div:nth-child(2) {
    flex: 1;
}

.clinico-criterio-numero {
    align-items: center;
    background: var(--gray-2, #f8f8f8);
    border-radius: 50%;
    color: var(--gray-50, #888);
    display: inline-flex;
    flex-shrink: 0;
    font-weight: var(--font-weight-bold, 700);
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
}

/* Escolhas compactas: opções curtas ("Com risco", "HIV +") não precisam de
   18rem cada, e em coluna larga ficariam longe umas das outras. */
.clinico-escolhas.compactas {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.clinico-escolhas.compactas .br-radio {
    padding: var(--spacing-scale-base, 0.5rem) var(--spacing-scale-2x, 1rem);
}

/* Lista de exames a solicitar. */
.clinico-exames {
    display: grid;
    gap: var(--spacing-scale-base, 0.5rem);
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.clinico-exames li {
    align-items: center;
    background: var(--gray-2, #f8f8f8);
    border-radius: var(--surface-rounder-sm, 8px);
    display: flex;
    gap: var(--spacing-scale-half, 0.25rem);
    padding: var(--spacing-scale-base, 0.5rem);
}

.clinico-exames li i {
    color: var(--gray-40, #9e9e9e);
    font-size: 0.4rem;
}

.clinico-exames li.destaque {
    background: var(--blue-warm-10, #c5d4eb);
    font-weight: var(--font-weight-semi-bold, 600);
}

.clinico-exames li.destaque i {
    color: var(--blue-warm-vivid-70, #1351b4);
}

/* Prescrição: lista numerada de fármacos. */
.clinico-rx {
    background: var(--pure-0, #fff);
    border: 1px solid var(--gray-10, #e6e6e6);
    border-radius: var(--surface-rounder-sm, 8px);
    list-style: none;
    margin: var(--spacing-scale-2x, 1rem) 0;
    padding: var(--spacing-scale-2x, 1rem);
}

.clinico-rx-titulo {
    border-bottom: 1px solid var(--gray-10, #e6e6e6);
    color: var(--gray-60, #636363);
    font-size: var(--font-size-scale-down-01, 0.875rem);
    font-weight: var(--font-weight-semi-bold, 600);
    margin-bottom: var(--spacing-scale-base, 0.5rem);
    padding-bottom: var(--spacing-scale-base, 0.5rem);
    text-transform: uppercase;
}

.clinico-rx-item {
    align-items: flex-start;
    display: flex;
    gap: var(--spacing-scale-2x, 1rem);
    padding: var(--spacing-scale-base, 0.5rem) 0;
}

.clinico-rx-item + .clinico-rx-item {
    border-top: 1px solid var(--gray-10, #e6e6e6);
}

.clinico-rx-numero {
    align-items: center;
    background: var(--blue-warm-vivid-70, #1351b4);
    border-radius: 50%;
    color: var(--pure-0, #fff);
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--font-size-scale-down-02, 0.75rem);
    font-weight: var(--font-weight-bold, 700);
    height: 1.5rem;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0 0.3rem;
}

.clinico-rx-corpo {
    display: flex;
    flex-direction: column;
}

.clinico-rx-dose {
    color: var(--blue-warm-vivid-80, #0c326f);
    font-weight: var(--font-weight-semi-bold, 600);
}

.clinico-rx-corpo small {
    color: var(--gray-60, #636363);
    font-size: var(--font-size-scale-down-02, 0.75rem);
}

/* Pílulas de resumo de conduta. */
.clinico-pilulas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-base, 0.5rem);
    margin-bottom: var(--spacing-scale-2x, 1rem);
}

.clinico-pilula {
    border-radius: 100px;
    font-size: var(--font-size-scale-down-01, 0.875rem);
    font-weight: var(--font-weight-semi-bold, 600);
    padding: 0.25rem 0.75rem;
}

.clinico-pilula.sim {
    background: var(--blue-warm-vivid-70, #1351b4);
    color: var(--pure-0, #fff);
}

.clinico-pilula.nao {
    background: var(--gray-10, #e6e6e6);
    color: var(--gray-70, #4f4f4f);
}

/* Modal de prescrições: mais largo que o padrão do DS, porque carrega tabela
   de prescrição e resumo para prontuário. */
.clinico-modal {
    max-height: 88vh;
    max-width: 52rem;
    overflow-y: auto;
    width: 92vw;
}

.clinico-prescricao {
    margin-bottom: var(--spacing-scale-3x, 1.5rem);
}

.clinico-prescricao h3 {
    align-items: center;
    display: flex;
    gap: var(--spacing-scale-base, 0.5rem);
    flex-wrap: wrap;
}

/* Resumo clínico — pensado para ser copiado ao prontuário. */
.clinico-resumo-secao {
    border-top: 1px solid var(--gray-10, #e6e6e6);
    margin-top: var(--spacing-scale-2x, 1rem);
    padding-top: var(--spacing-scale-2x, 1rem);
}

.clinico-resumo-secao h4 {
    color: var(--blue-warm-vivid-80, #0c326f);
    font-size: var(--font-size-scale-down-01, 0.875rem);
    letter-spacing: 0.04em;
    margin: 0 0 var(--spacing-scale-base, 0.5rem);
    text-transform: uppercase;
}

.clinico-resumo-secao p {
    line-height: 1.65;
    margin: 0 0 0.5rem;
}

.clinico-resumo-linha {
    display: flex;
    gap: var(--spacing-scale-base, 0.5rem);
    justify-content: space-between;
    padding: 0.15rem 0;
}

.clinico-resumo-linha span {
    color: var(--gray-60, #636363);
}

/* Texto de ajuda abaixo do rótulo de um grupo de radios. */
.clinico-ajuda {
    color: var(--gray-60, #636363);
    margin: -0.25rem 0 var(--spacing-scale-base, 0.5rem);
}

.clinico-destaque.info {
    background: var(--blue-warm-5, #e8eef8);
    border-color: var(--blue-warm-vivid-70, #1351b4);
    color: var(--blue-warm-vivid-80, #0c326f);
}

/* --------------------------------------------------------------------------
   12. Grupos de risco da dengue
   -------------------------------------------------------------------------- */

.clinico-grupo-dengue {
    border-left: 4px solid var(--grupo, var(--gray-40, #9e9e9e));
    border-radius: var(--surface-rounder-sm, 8px);
    background: var(--gray-2, #f8f8f8);
    padding: var(--spacing-scale-2x, 1rem);
}

.clinico-grupo-dengue h3,
.clinico-grupo-dengue h4 {
    color: var(--grupo, var(--gray-70, #4f4f4f));
    margin: 0 0 0.35rem;
}

.clinico-grupo-dengue p {
    margin: 0;
}

/* O cartao do resultado e o mesmo componente da legenda, so que em destaque. */
.clinico-grupo-dengue.destaque {
    background: var(--pure-0, #fff);
    border: 1px solid var(--gray-10, #e6e6e6);
    border-left: 6px solid var(--grupo, var(--gray-40, #9e9e9e));
    margin-bottom: var(--spacing-scale-3x, 1.5rem);
    padding: var(--spacing-scale-3x, 1.5rem);
}

.clinico-grupo-dengue.grupo-a { --grupo: var(--green-cool-vivid-50, #168821); }
.clinico-grupo-dengue.grupo-b { --grupo: var(--blue-warm-vivid-70, #1351b4); }
.clinico-grupo-dengue.grupo-c { --grupo: var(--orange-vivid-20, #a8300c); }
.clinico-grupo-dengue.grupo-d { --grupo: var(--red-vivid-50, #e52207); }

/* --------------------------------------------------------------------------
   13. Fórmulas, escores e resumo de prontuário
   -------------------------------------------------------------------------- */

/* Fórmula exibida como referência (APRI), na tipografia do DS. Antes era
   monoespaçada sobre fundo cinza, um bloco que não existe no padrão gov.br e
   que só a hepatite C usava. */
.clinico-formula {
    margin: 0 0 var(--spacing-scale-2x, 1rem);
}

/* Texto de apoio abaixo de um campo, sem o peso de um `feedback` do DS. */
.clinico-ajuda-campo {
    color: var(--gray-60, #636363);
    display: block;
    font-size: var(--font-size-scale-down-02, 0.75rem);
    line-height: 1.35;
    margin-top: 0.25rem;
}

/* Escore com classificação ao lado (Child-Pugh). */
.clinico-escore {
    align-items: center;
    background: var(--gray-2, #f8f8f8);
    border-radius: var(--surface-rounder-sm, 8px);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-3x, 1.5rem);
    justify-content: center;
    margin-top: var(--spacing-scale-2x, 1rem);
    padding: var(--spacing-scale-3x, 1.5rem);
}

.clinico-escore-numero {
    text-align: center;
}

.clinico-escore-numero strong {
    display: block;
    font-size: var(--font-size-scale-up-05, 2.2rem);
    line-height: 1;
}

.clinico-escore-numero span {
    color: var(--gray-60, #636363);
    font-size: var(--font-size-scale-down-02, 0.75rem);
}

.clinico-escore-classe {
    border-radius: var(--surface-rounder-sm, 8px);
    color: var(--pure-0, #fff);
    font-size: var(--font-size-scale-up-02, 1.25rem);
    font-weight: var(--font-weight-bold, 700);
    padding: 0.6rem 1.5rem;
}

.clinico-escore-classe.child-a { background: var(--green-cool-vivid-50, #168821); }
.clinico-escore-classe.child-b { background: var(--orange-vivid-20, #a8300c); }
.clinico-escore-classe.child-c { background: var(--red-vivid-50, #e52207); }

.clinico-escore-descricao {
    color: var(--gray-70, #4f4f4f);
    flex-basis: 100%;
    text-align: center;
}

/* Resumo para colar no prontuário: texto puro, largura preservada, rolagem
   própria para o bloco longo não empurrar a página. */
.clinico-prontuario {
    background: var(--gray-2, #f8f8f8);
    border: 1px solid var(--gray-10, #e6e6e6);
    border-radius: var(--surface-rounder-sm, 8px);
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: var(--font-size-scale-down-02, 0.75rem);
    line-height: 1.5;
    margin: 0;
    max-height: 26rem;
    overflow: auto;
    padding: var(--spacing-scale-2x, 1rem);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* --------------------------------------------------------------------------
   14. Leishmaniose visceral — progresso, escores, recomendação e cronograma
   -------------------------------------------------------------------------- */

/* Indicador de progresso — NÃO é navegação. Ver o comentário na view sobre por
   que aqui não se usa o `br-step` do DS. */
.clinico-progresso {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-2x, 1rem);
    list-style: none;
    margin: 0 0 var(--spacing-scale-4x, 2rem);
    padding: 0;
}

.clinico-progresso li {
    align-items: center;
    color: var(--gray-50, #888);
    display: flex;
    flex: 1 1 8rem;
    gap: var(--spacing-scale-base, 0.5rem);
}

.clinico-progresso .numero {
    align-items: center;
    background: var(--gray-10, #e6e6e6);
    border-radius: 50%;
    color: var(--gray-60, #636363);
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--font-size-scale-down-01, 0.875rem);
    font-weight: var(--font-weight-bold, 700);
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
}

.clinico-progresso li.ativo {
    color: var(--gray-80, #333);
}

.clinico-progresso li.ativo .numero {
    background: var(--blue-warm-vivid-70, #1351b4);
    color: var(--pure-0, #fff);
}

.clinico-progresso li.completo .numero {
    background: var(--green-cool-vivid-50, #168821);
    color: var(--pure-0, #fff);
}

/* Critérios de idade aplicados automaticamente — leitura, não interação. */
.clinico-criterios-auto {
    list-style: none;
    margin: 0 0 var(--spacing-scale-2x, 1rem);
    padding: 0;
}

.clinico-criterios-auto li {
    align-items: center;
    color: var(--gray-70, #4f4f4f);
    display: flex;
    gap: var(--spacing-scale-base, 0.5rem);
    padding: 0.35rem 0;
}

.clinico-criterios-auto li i {
    color: var(--green-cool-vivid-50, #168821);
}

.clinico-criterios-auto li[hidden] {
    display: none;
}

#idade-sem-pontos i {
    color: var(--gray-40, #9e9e9e);
}

/* Pontuação do critério, à direita do rótulo. */
.clinico-pontos {
    background: var(--gray-10, #e6e6e6);
    border-radius: 100px;
    color: var(--gray-70, #4f4f4f);
    font-size: var(--font-size-scale-down-02, 0.75rem);
    font-weight: var(--font-weight-bold, 700);
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
}

/* Painel dos dois escores. */
.clinico-escores {
    display: grid;
    gap: var(--spacing-scale-2x, 1rem);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    margin-top: var(--spacing-scale-3x, 1.5rem);
}

.clinico-escore-box {
    border-left: 4px solid var(--gray-20, #ccc);
    border-radius: var(--surface-rounder-sm, 8px);
    background: var(--gray-2, #f8f8f8);
    padding: var(--spacing-scale-2x, 1rem);
    text-align: center;
}

.clinico-escore-box .rotulo {
    color: var(--gray-60, #636363);
    display: block;
    font-size: var(--font-size-scale-down-01, 0.875rem);
}

.clinico-escore-box strong {
    display: block;
    font-size: var(--font-size-scale-up-05, 2.2rem);
    line-height: 1.1;
}

.clinico-escore-box .interpretacao {
    display: block;
    font-weight: var(--font-weight-semi-bold, 600);
}

.clinico-escore-box.seguro { border-left-color: var(--green-cool-vivid-50, #168821); }
.clinico-escore-box.seguro strong,
.clinico-escore-box.seguro .interpretacao { color: var(--green-cool-vivid-50, #168821); }

.clinico-escore-box.alerta { border-left-color: var(--yellow-vivid-20, #ffcd07); }
.clinico-escore-box.alerta strong,
.clinico-escore-box.alerta .interpretacao { color: var(--orange-warm-70, #7b4b13); }

.clinico-escore-box.perigo { border-left-color: var(--red-vivid-50, #e52207); }
.clinico-escore-box.perigo strong,
.clinico-escore-box.perigo .interpretacao { color: var(--red-vivid-50, #e52207); }

/* Resumo numérico do paciente. */
.clinico-resumo-numeros {
    display: grid;
    gap: var(--spacing-scale-2x, 1rem);
    grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
    margin-bottom: var(--spacing-scale-3x, 1.5rem);
}

.clinico-resumo-numeros div {
    background: var(--gray-2, #f8f8f8);
    border-radius: var(--surface-rounder-sm, 8px);
    padding: var(--spacing-scale-2x, 1rem);
    text-align: center;
}

.clinico-resumo-numeros strong {
    color: var(--blue-warm-vivid-70, #1351b4);
    display: block;
    font-size: var(--font-size-scale-up-03, 1.5rem);
    line-height: 1.1;
}

.clinico-resumo-numeros span {
    color: var(--gray-60, #636363);
    font-size: var(--font-size-scale-down-02, 0.75rem);
}

/* Caixa da droga recomendada. */
.clinico-recomendacao {
    background: var(--blue-warm-5, #e8eef8);
    border-left: 5px solid var(--blue-warm-vivid-70, #1351b4);
    border-radius: var(--surface-rounder-sm, 8px);
    padding: var(--spacing-scale-3x, 1.5rem);
}

.clinico-recomendacao.alerta {
    background: var(--yellow-warm-5, #fdf9e8);
    border-left-color: var(--yellow-vivid-20, #ffcd07);
}

.clinico-recomendacao.perigo {
    background: var(--red-warm-10, #f9e0dd);
    border-left-color: var(--red-vivid-50, #e52207);
}

.clinico-recomendacao-cabecalho {
    align-items: center;
    display: flex;
    gap: var(--spacing-scale-2x, 1rem);
}

.clinico-recomendacao-cabecalho i {
    color: var(--blue-warm-vivid-70, #1351b4);
    font-size: var(--font-size-scale-up-03, 1.5rem);
}

.clinico-recomendacao-cabecalho .rotulo {
    color: var(--gray-60, #636363);
    display: block;
    font-size: var(--font-size-scale-down-01, 0.875rem);
}

.clinico-recomendacao-cabecalho strong {
    font-size: var(--font-size-scale-up-02, 1.25rem);
    line-height: 1.2;
}

.clinico-recomendacao-motivo {
    margin: var(--spacing-scale-2x, 1rem) 0 0;
}

/* Alternativas terapêuticas. */
.clinico-alternativa {
    background: var(--pure-0, #fff);
    border: 1px solid var(--gray-10, #e6e6e6);
    border-radius: var(--surface-rounder-sm, 8px);
    margin-bottom: var(--spacing-scale-base, 0.5rem);
    padding: var(--spacing-scale-2x, 1rem);
}

.clinico-alternativa strong {
    display: block;
}

.clinico-alternativa span {
    color: var(--gray-60, #636363);
    font-size: var(--font-size-scale-down-01, 0.875rem);
}

.clinico-alternativa.contraindicada {
    background: var(--red-warm-10, #f9e0dd);
    border-color: var(--red-vivid-50, #e52207);
}

.clinico-alternativa.contraindicada strong {
    color: var(--red-vivid-50, #e52207);
}

/* Cartão de dose de um fármaco. */
.clinico-dose-card {
    border: 1px solid var(--gray-10, #e6e6e6);
    border-radius: var(--surface-rounder-sm, 8px);
    margin-bottom: var(--spacing-scale-3x, 1.5rem);
    padding: var(--spacing-scale-3x, 1.5rem);
}

.clinico-dose-card[hidden] {
    display: none;
}

.clinico-dose-card > header {
    border-bottom: 1px solid var(--gray-10, #e6e6e6);
    margin-bottom: var(--spacing-scale-2x, 1rem);
    padding-bottom: var(--spacing-scale-base, 0.5rem);
}

.clinico-dose-card > header h3,
.clinico-dose-card > header p {
    margin: 0;
}

.clinico-dose-card > header p {
    color: var(--gray-60, #636363);
}

.clinico-dose-principal {
    color: var(--blue-warm-vivid-80, #0c326f);
    margin: 0 0 var(--spacing-scale-2x, 1rem);
    text-align: center;
}

.clinico-dose-principal strong {
    font-size: var(--font-size-scale-up-06, 2.6rem);
    line-height: 1;
}

.clinico-dose-detalhes {
    display: grid;
    gap: var(--spacing-scale-base, 0.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}

.clinico-dose-detalhes div {
    background: var(--gray-2, #f8f8f8);
    border-radius: var(--surface-rounder-sm, 8px);
    padding: var(--spacing-scale-base, 0.5rem);
    text-align: center;
}

.clinico-dose-detalhes span {
    color: var(--gray-60, #636363);
    display: block;
    font-size: var(--font-size-scale-down-02, 0.75rem);
}

.clinico-dose-detalhes strong {
    display: block;
}

/* Cronograma diário de doses. */
.clinico-cronograma {
    display: grid;
    gap: var(--spacing-scale-base, 0.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
    margin-bottom: var(--spacing-scale-2x, 1rem);
}

.clinico-cronograma-titulo {
    color: var(--gray-70, #4f4f4f);
    font-weight: var(--font-weight-semi-bold, 600);
    grid-column: 1 / -1;
    margin: var(--spacing-scale-base, 0.5rem) 0 0;
}

.clinico-cronograma-dia {
    background: var(--pure-0, #fff);
    border: 1px solid var(--gray-10, #e6e6e6);
    border-radius: var(--surface-rounder-sm, 8px);
    padding: var(--spacing-scale-base, 0.5rem);
    text-align: center;
}

.clinico-cronograma-dia .rotulo {
    color: var(--gray-60, #636363);
    display: block;
    font-size: var(--font-size-scale-down-02, 0.75rem);
}

.clinico-cronograma-dia strong {
    display: block;
    font-size: var(--font-size-scale-up-01, 1.05rem);
}

.clinico-cronograma-dia .frascos {
    color: var(--gray-60, #636363);
    font-size: var(--font-size-scale-down-02, 0.75rem);
}

/* Dias ajustados em relação à dose base — o profissional precisa ver qual dia
   recebeu frasco a mais ou a menos, não só o total. */
.clinico-cronograma-dia.extra {
    border-color: var(--blue-warm-vivid-70, #1351b4);
    border-width: 2px;
}

.clinico-cronograma-dia.reduzido {
    border-color: var(--yellow-vivid-20, #ffcd07);
    border-width: 2px;
}

.clinico-cronograma-dia.parcial {
    background: var(--yellow-warm-5, #fdf9e8);
    border-color: var(--yellow-vivid-20, #ffcd07);
}

/* --------------------------------------------------------------------------
   15. Malária — comprimidos, cronograma diário, opções e receituário
   -------------------------------------------------------------------------- */

/* Faixa de identificação do resultado. */
.malaria-banner {
    background: var(--blue-warm-5, #e8eef8);
    border-left: 5px solid var(--blue-warm-vivid-70, #1351b4);
    border-radius: var(--surface-rounder-sm, 8px);
    margin-bottom: var(--spacing-scale-3x, 1.5rem);
    padding: var(--spacing-scale-3x, 1.5rem);
}

.malaria-banner.grave {
    background: var(--red-warm-10, #f9e0dd);
    border-left-color: var(--red-vivid-50, #e52207);
}

.malaria-banner h3 {
    margin: var(--spacing-scale-base, 0.5rem) 0;
}

.malaria-banner p {
    margin: 0;
}

.malaria-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-half, 0.25rem);
    margin-top: var(--spacing-scale-2x, 1rem);
}

/* Metadados do esquema selecionado (tabela do Guia, faixa, critério). */
.malaria-meta {
    display: grid;
    gap: var(--spacing-scale-base, 0.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    margin-bottom: var(--spacing-scale-2x, 1rem);
}

.malaria-meta div {
    background: var(--gray-2, #f8f8f8);
    border-radius: var(--surface-rounder-sm, 8px);
    padding: var(--spacing-scale-base, 0.5rem);
}

.malaria-meta span {
    color: var(--gray-60, #636363);
    display: block;
    font-size: var(--font-size-scale-down-02, 0.75rem);
}

/* Comprimido: a "pílula" que representa uma unidade do medicamento.
   Uma por unidade prescrita — 3 comprimidos de Cloroquina são 3 pílulas, e não
   um "3×". É o que o profissional vê na cartela, e a contagem visual reduz o
   erro de leitura da posologia. */
.malaria-pill {
    align-items: center;
    border-radius: 100px;
    color: var(--pure-0, #fff);
    display: inline-flex;
    font-size: var(--font-size-scale-down-02, 0.75rem);
    font-weight: var(--font-weight-bold, 700);
    justify-content: center;
    margin: 0.1rem;
    min-width: 2.2rem;
    padding: 0.2rem 0.5rem;
}

.malaria-pill.cq { background: #1351b4; }
.malaria-pill.pq5 { background: #a8300c; }
.malaria-pill.pq15 { background: #7b2d00; }
.malaria-pill.tq { background: #6a1b9a; }
.malaria-pill.asmqp { background: #0b6b3a; }
.malaria-pill.asmqa { background: #12481a; }
.malaria-pill.al { background: #7a5a00; }

.malaria-sem-dose {
    color: var(--gray-50, #888);
    font-size: var(--font-size-scale-down-01, 0.875rem);
    font-style: italic;
}

/* Cronograma dia a dia. */
.malaria-dias {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-scale-base, 0.5rem);
    margin-bottom: var(--spacing-scale-2x, 1rem);
}

.malaria-dia {
    align-items: center;
    background: var(--pure-0, #fff);
    border: 1px solid var(--gray-10, #e6e6e6);
    border-radius: var(--surface-rounder-sm, 8px);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-2x, 1rem);
    padding: var(--spacing-scale-2x, 1rem);
}

.malaria-dia.vazio {
    opacity: 0.55;
}

.malaria-dia.fase {
    background: var(--blue-warm-5, #e8eef8);
    border-color: var(--blue-warm-vivid-70, #1351b4);
}

.malaria-dia-rotulo {
    flex: 0 0 11rem;
    font-weight: var(--font-weight-semi-bold, 600);
}

.malaria-dia-rotulo em {
    color: var(--gray-60, #636363);
    display: block;
    font-size: var(--font-size-scale-down-02, 0.75rem);
    font-style: normal;
    font-weight: var(--font-weight-regular, 400);
}

.malaria-dia-doses {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: var(--spacing-scale-2x, 1rem);
}

.malaria-tomada .hora {
    color: var(--gray-60, #636363);
    display: block;
    font-size: var(--font-size-scale-down-02, 0.75rem);
}

.malaria-legenda {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: var(--spacing-scale-2x, 1rem);
}

.malaria-legenda-item {
    align-items: center;
    color: var(--gray-70, #4f4f4f);
    display: flex;
    font-size: var(--font-size-scale-down-01, 0.875rem);
    gap: var(--spacing-scale-base, 0.5rem);
}

/* Abas de opção terapêutica (ASMQ × AL, por exemplo).
   Não é `br-tab`: o BRTab do DS troca painéis pelo `data-panel`, e aqui o
   conteúdo é re-renderizado por JS a cada troca, com dose recalculada. */
.malaria-opcoes {
    display: grid;
    gap: var(--spacing-scale-base, 0.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    margin-bottom: var(--spacing-scale-2x, 1rem);
}

.malaria-opcao {
    background: var(--pure-0, #fff);
    border: 2px solid var(--gray-10, #e6e6e6);
    border-radius: var(--surface-rounder-sm, 8px);
    cursor: pointer;
    font: inherit;
    font-weight: var(--font-weight-semi-bold, 600);
    padding: var(--spacing-scale-2x, 1rem);
    text-align: left;
}

.malaria-opcao em {
    color: var(--gray-60, #636363);
    display: block;
    font-size: var(--font-size-scale-down-02, 0.75rem);
    font-style: normal;
    font-weight: var(--font-weight-regular, 400);
}

.malaria-opcao:hover {
    border-color: var(--blue-warm-40, #5992ed);
}

.malaria-opcao.ativa {
    background: var(--blue-warm-5, #e8eef8);
    border-color: var(--blue-warm-vivid-70, #1351b4);
}

/* Índice da aba de referência. */
.malaria-indice {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-base, 0.5rem);
    margin-bottom: var(--spacing-scale-3x, 1.5rem);
}

.malaria-indice a {
    background: var(--gray-2, #f8f8f8);
    border: 1px solid var(--gray-10, #e6e6e6);
    border-radius: 100px;
    color: var(--gray-80, #333);
    font-size: var(--font-size-scale-down-01, 0.875rem);
    padding: 0.25rem 0.85rem;
    text-decoration: none;
}

.malaria-indice a:hover {
    background: var(--blue-warm-5, #e8eef8);
    border-color: var(--blue-warm-vivid-70, #1351b4);
}

/* FAQ e eventos adversos: <details> nativo, sem JS.
   O marcador padrão é substituído por um chevron que gira ao abrir. */
.malaria-faq {
    border-bottom: 1px solid var(--gray-10, #e6e6e6);
}

.malaria-faq > summary {
    cursor: pointer;
    font-weight: var(--font-weight-semi-bold, 600);
    list-style: none;
    padding: var(--spacing-scale-2x, 1rem) 2rem var(--spacing-scale-2x, 1rem) 0;
    position: relative;
}

.malaria-faq > summary::-webkit-details-marker {
    display: none;
}

.malaria-faq > summary::after {
    content: "\203A";
    color: var(--blue-warm-vivid-70, #1351b4);
    font-size: 1.5rem;
    line-height: 1;
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transition: transform 0.2s ease;
}

.malaria-faq[open] > summary::after {
    transform: translateY(-50%) rotate(270deg);
}

.malaria-faq > summary:focus-visible {
    outline: 2px solid var(--blue-warm-vivid-70, #1351b4);
    outline-offset: 2px;
}

.malaria-faq-corpo {
    color: var(--gray-70, #4f4f4f);
    padding-bottom: var(--spacing-scale-2x, 1rem);
}

.malaria-faq-corpo p {
    margin: 0 0 0.5rem;
}

/* Receituário. */
.malaria-receita {
    border-left: 4px solid var(--blue-warm-vivid-70, #1351b4);
}

.malaria-receita-secao {
    margin-bottom: var(--spacing-scale-3x, 1.5rem);
}

.malaria-receita-config {
    background: var(--gray-2, #f8f8f8);
    border-radius: var(--surface-rounder-sm, 8px);
    margin-bottom: var(--spacing-scale-2x, 1rem);
    padding: var(--spacing-scale-2x, 1rem);
}

.malaria-receita-config label {
    display: block;
    font-weight: var(--font-weight-semi-bold, 600);
    margin-bottom: 0.35rem;
}

.malaria-receita-config small {
    color: var(--gray-60, #636363);
    display: block;
    margin-top: 0.35rem;
}

/* <select> nativo, e não BRSelect: este campo nasce dentro do receituário
   gerado por JS, e o BRSelect precisa ser instanciado depois de inserido no
   DOM. Para um seletor de conveniência dentro de um bloco descartável, o
   controle nativo é o que não deixa estado pendurado. */
.malaria-select-simples {
    background: var(--pure-0, #fff);
    border: 1px solid var(--gray-20, #ccc);
    border-radius: var(--surface-rounder-sm, 8px);
    font: inherit;
    padding: 0.4rem 0.6rem;
}

.malaria-receita-rodape {
    border-top: 1px solid var(--gray-10, #e6e6e6);
    color: var(--gray-60, #636363);
    font-size: var(--font-size-scale-down-02, 0.75rem);
    line-height: 1.6;
    margin-top: var(--spacing-scale-2x, 1rem);
    padding-top: var(--spacing-scale-2x, 1rem);
}

/* Linha destacada numa tabela de referência (faixa de peso do paciente). */
.clinico-tabela tr.destaque {
    background: var(--blue-warm-10, #c5d4eb);
    font-weight: var(--font-weight-semi-bold, 600);
}

/* Impressão só do receituário: o `imprimirReceituario()` põe esta classe no
   <body>, imprime e a remove. Sem ela, o @media print geral do portal.css
   imprimiria a página inteira. */
@media print {
    body.imprimindo-receita .portal-header,
    body.imprimindo-receita .portal-breadcrumb,
    body.imprimindo-receita .portal-outras,
    body.imprimindo-receita .portal-footer,
    body.imprimindo-receita .br-skiplink,
    body.imprimindo-receita .br-step,
    body.imprimindo-receita .clinico-cabecalho,
    body.imprimindo-receita #resultado,
    body.imprimindo-receita .clinico-referencias,
    body.imprimindo-receita .malaria-receita .clinico-acoes,
    body.imprimindo-receita .malaria-receita-config {
        display: none !important;
    }

    body.imprimindo-receita .clinico-painel[hidden] {
        display: none !important;
    }
}

/* Grupo de escolha com erro de validação — a borda vermelha reforça o campo
   que o feedback textual aponta, para quem varre a tela sem ler. */
.clinico-grupo-invalido .clinico-escolhas {
    border-left: 3px solid var(--red-vivid-50, #e52207);
    padding-left: var(--spacing-scale-2x, 1rem);
}

/* Sigla de fármaco combinado (RHZ, RH): mais larga que a de fármaco único. */
.clinico-farmaco.combinado {
    background: var(--blue-warm-vivid-80, #0c326f);
    border-radius: 100px;
    min-width: 3.2rem;
    padding: 0.2rem 0.7rem;
}

/* Resultado que encaminha à atenção terciária: vermelho, não azul — a leitura
   rápida precisa distinguir "prescreva isto" de "não prescreva, encaminhe". */
.clinico-resultado-card.bloqueio {
    border-left-color: var(--red-vivid-50, #e52207);
}

/* ==========================================================================
   16. PWA — tarja de "sem conexão" e área segura do iPhone
   ==========================================================================
   Só entra em cena quando o portal está instalado ou offline. Em uso normal,
   nada deste bloco pinta pixel.
   ========================================================================== */

/* Tarja fixa no rodapé da janela.
   Rodapé e não topo: no topo ela empurraria o conteúdo ou cobriria o
   cabeçalho justo quando o usuário está lendo uma dose. Embaixo ela é vista
   sem disputar espaço com a tarefa. */
.portal-sem-conexao {
    align-items: center;
    background: var(--yellow-vivid-20, #ffcd07);
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    color: var(--gray-90, #1c1c1c);
    display: flex;
    font-size: var(--font-size-scale-down-01, 0.875rem);
    gap: 0.75rem;
    left: 0;
    line-height: 1.4;
    /* O padding de baixo soma a barra do iPhone: instalado na tela inicial, o
       indicador de home fica por cima do conteúdo. `env()` vale 0 em todo
       navegador que não tem entalhe, então não há ramo separado. */
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    position: fixed;
    right: 0;
    /* Acima do conteúdo, abaixo do scrim do menu (que o DS põe em 1000). */
    z-index: 900;
}

.portal-sem-conexao i {
    flex: 0 0 auto;
    font-size: 1.25rem;
}

/* Mesma razão do padding da tarja: instalado, o rodapé é a última coisa da
   página e encosta no indicador de home. */
.portal-footer {
    padding-bottom: calc(var(--spacing-scale-4x, 2rem) + env(safe-area-inset-bottom, 0px));
}


/* ==========================================================================
   17. Aviso de ambiente — homologação e local
   ==========================================================================
   O mesmo aviso do SisDJUD: o `feedback danger` do DS, fixo no canto
   inferior direito. O layout só o emite fora de produção.
   ========================================================================== */

.portal-ambiente {
    bottom: calc(var(--spacing-scale-2x, 1rem) + env(safe-area-inset-bottom, 0px));
    max-width: calc(100% - 2 * var(--spacing-scale-2x, 1rem));
    /* Deixa o clique passar: o aviso fica por cima do conteúdo e, sem isto,
       tomaria o clique do botão "Próximo" ou "Imprimir" que estiver embaixo. */
    pointer-events: none;
    position: fixed;
    right: var(--spacing-scale-2x, 1rem);
    /* Abaixo da tarja de "sem conexão" (900): se as duas aparecerem juntas, a
       falta de conexão é o que o usuário precisa ler primeiro. */
    z-index: 890;
}

.portal-ambiente .feedback {
    border-radius: var(--surface-rounder-md, 8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    margin: 0;
    padding: var(--spacing-scale-base, 0.5rem) var(--spacing-scale-2x, 1rem);
}

/* Na tela, sim; no papel, não. Uma receita impressa em homologação não deve
   sair com uma tarja sobreposta ao texto da prescrição. */
@media print {
    .portal-ambiente {
        display: none !important;
    }
}