/* === SAUR - Tema Urgencia Renal === */
/* Paleta SAUR: azul #1a4d8f (primaria), ouro #f5a623, verde #2d8546 */

/* === Fonte Inter, AUTO-HOSPEDADA (2026-08-04) ===
   Antes vinha de fonts.googleapis.com/fonts.gstatic.com em TODA pagina. Tres
   motivos para trazer para casa, nesta ordem:
     1. LGPD: cada carregamento enviava o IP do usuario (servidor publico ou
        equipe de hospital) a um terceiro fora do pais, sem finalidade
        necessaria - transferencia internacional de dado pessoal;
     2. disponibilidade: era folha de estilo render-blocking, entao rede de
        hospital lenta ou bloqueio ao Google atrasava a primeira pintura;
     3. custo zero: 3 arquivos woff2 (subset latin), ~148 KB no total,
        servidos pelo mesmo nginx, com o cache por hash de conteudo que o
        projeto ja tem (spring.web.resources.chain.strategy.content).
   Subset latin basta para portugues. font-display:swap mantem o texto
   visivel com a fonte de sistema enquanto a Inter carrega. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter-400-260c81a4759baf163c025001c4f27872.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter-600-260c81a4759baf163c025001c4f27872.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter-700-260c81a4759baf163c025001c4f27872.woff2') format('woff2');
}

:root {
    --rs-blue: #1a4d8f;
    --rs-blue-rgb: 26,77,143;       /* componentes do --rs-blue, para uso em rgba() */
    --rs-blue-light: #e3edf7;
    --rs-blue-dark: #0f3163;
    --rs-blue-darker: #061a33;      /* 3o stop do gradiente de fundo de login/esqueci-senha */
    --rs-chart-blue: #0d6efd;       /* NAO usar --rs-blue em grafico categorico: falha no
                                        teste de faixa de luminosidade (L=0.424, fora de
                                        0.43-0.77) do validador da skill de dataviz -
                                        node scripts/validate_palette.js "#38a169,#c62828,#0d6efd" */
    --rs-gold: #f5a623;
    --rs-gold-light: #fef3e2;
    --rs-gold-dark: #755a12;        /* texto de badge/alert ouro com contraste AA */
    --rs-green: #2d8546;
    --rs-green-light: #e8f5ed;
    --rs-green-dark: #1f6b36;       /* texto de badge/alert verde com contraste AA */
    --rs-green-bright: #38a169;     /* acento da barra de progresso concluida */
    --rs-red: #c62828;
    --rs-red-light: #fce8e8;
    --rs-red-dark: #8b1a1a;         /* texto de alert vermelho */
    --rs-info-light: #e8f0fe;
    --rs-info-dark: #003366;
    --rs-gray-50: #f8fafc;
    --rs-gray-100: #f1f5f9;
    --rs-gray-200: #e2e8f0;
    --rs-gray-300: #cbd5e1;
    --rs-gray-400: #94a3b8;
    --rs-gray-500: #64748b;
    --rs-gray-600: #475569;
    --rs-gray-700: #334155;
    --rs-gray-800: #1e293b;
    --rs-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --rs-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --rs-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    --rs-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    /* Lista explicita (nao 'all') para nao animar propriedades de layout */
    --rs-transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;

    /* === Design system - tokens semanticos (2026-08-05) ===
       Nivel 2: intencao, nao cor. Cada token aponta para um primitivo --rs-*
       ja existente acima - trocar a paleta algum dia exige mudar so os
       --rs-* (nivel 1), esses tokens continuam validos. Ver secao "Design
       system - regua de tokens" no CLAUDE.md. Infraestrutura desta leva:
       ainda NAO consumidos em massa pelos componentes existentes (isso e
       trabalho de uma leva futura, template a template) - so os poucos
       lugares reescritos abaixo (border-radius/font-size) passaram a usar. */
    --saur-surface: #fff;
    --saur-surface-sunken: var(--rs-gray-50);
    --saur-text: var(--rs-gray-800);
    /* gray-600, nao gray-400/500: e o unico dos tres ja validado com 7.58:1
       de contraste sobre branco (ver comentario em .timeline-item.pendente
       .timeline-title mais abaixo, WCAG AA exige 4.5:1). */
    --saur-text-muted: var(--rs-gray-600);
    --saur-border: var(--rs-gray-200);
    --saur-action: var(--rs-blue);
    --saur-state-ok: var(--rs-green);
    --saur-state-attention: var(--rs-gold);
    --saur-state-danger: var(--rs-red);
    --saur-state-neutral: var(--rs-gray-500);
    /* "Aguardando" (pendencia interna do sistema, ex.: medico ainda nao
       votou) - padronizacao de cores 2026-08-06, distinto de "attention"
       (amarelo, reservado para "Solicita informacao"). Ver
       docs/IDEIA-PADRONIZACAO-CORES-SOLICITA-INFO-AGUARDANDO-2026-08.md. */
    --saur-state-aguardando: var(--rs-blue);

    /* Nivel 3: escalas discretas (espacamento/raio/fonte) */
    --saur-space-1: .25rem;
    --saur-space-2: .5rem;
    --saur-space-3: .75rem;
    --saur-space-4: 1rem;
    --saur-space-5: 1.5rem;
    --saur-space-6: 2rem;
    --saur-radius-sm: 8px;
    --saur-radius-md: 12px;
    --saur-radius-lg: 16px;
    --saur-radius-pill: 999px;
    --saur-font-xs: .75rem;
    --saur-font-sm: .875rem;
    --saur-font-md: 1rem;
    --saur-font-lg: 1.25rem;
    --saur-font-xl: 1.75rem;

    /* === Design system - nivel 2, leva de redesign visual do Portal do
       Solicitante (2026-08-06, docs/RELATORIO-REDESIGN-VISUAL-SOLICITANTE-2026-08.md,
       Anexo B) ===
       Elevacao em 3 degraus. Regra de uso: no MAXIMO um elemento por tela usa
       elev-2 - se dois cartoes "importam", nenhum importa. */
    --saur-elev-0: none;                  /* superficie de apoio (sunken) */
    --saur-elev-1: var(--rs-shadow);      /* cartao padrao - o que existe hoje */
    --saur-elev-2: var(--rs-shadow-md);   /* o cartao que importa na tela */

    /* Superficies tintadas + a cor de texto OBRIGATORIA sobre cada uma.
       Nunca usar a variante base (--rs-green/--rs-gold/...) como texto sobre a
       superficie clara correspondente: ver Anexo C do relatorio - o dourado
       da 1,85:1 e o verde 4,11:1, ambos reprovam em WCAG AA. As variantes
       -dark existem exatamente para isto. */
    --saur-surface-ok: var(--rs-green-light);          --saur-on-ok: var(--rs-green-dark);
    --saur-surface-danger: var(--rs-red-light);        --saur-on-danger: var(--rs-red-dark);
    --saur-surface-attention: var(--rs-gold-light);    --saur-on-attention: var(--rs-gold-dark);
    --saur-surface-info: var(--rs-blue-light);         --saur-on-info: var(--rs-blue);

    /* Degrau tipografico acima do --saur-font-xl (1.75rem) - infraestrutura
       do Anexo B; nao consumido em nenhum lugar nesta leva (o titulo do
       cartao de resultado usa --saur-font-xl, nao este). */
    --saur-font-2xl: 2.25rem;
}

/* === Densidade por portal (design system, 2026-08-05) ===
   layout.html seta data-densidade no <html> via GlobalModelAdvice.
   densidadeAtual() + o script inline no inicio do fragment navbar. Redefine
   so os tokens de nivel 3 mais sensiveis a volume de informacao por tela -
   os componentes que ja usam esses tokens (novos ou migrados numa leva
   futura) reagem automaticamente, sem CSS extra por componente. */
[data-densidade="operacional"] {
    --saur-font-md: .875rem;
    --saur-space-4: .75rem;
    --saur-radius-md: 8px;
}
[data-densidade="confortavel"] {
    --saur-font-md: 1rem;
    --saur-space-4: 1.25rem;
    --saur-radius-md: 12px;
}

/* Container estreito para formularios/detalhes de leitura focada (ex.: Portal
   do Solicitante, triagem de solicitacao online) - evita repetir
   style="max-width: 760px;" inline em cada template. */
.container-narrow {
    max-width: 760px;
}

/* Container das listas do Portal do Solicitante/Avaliador - substitui o
   style="max-width: 980px;" antes repetido inline nesses templates. */
.container-portal {
    max-width: 980px;
}

/* Texto livre digitado pelo usuario (justificativa clinica, detalhe de
   situacao etc.) que precisa preservar quebras de linha - substitui o
   style="white-space: pre-wrap;" repetido inline. `overflow-wrap: anywhere`
   (bug real relatado em producao em 2026-08-06, solicitacao #12): sem isso,
   um trecho digitado sem espaco algum (ex. um valor colado, uma URL) nao
   quebra e estoura a largura do card em vez de virar linha - o mesmo
   problema ja resolvido em #pane-envio .list-group-item > span. */
.text-pre-wrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Area de rolagem do chat (Portal do Solicitante/processo) - substitui o
   style="max-height:250px;overflow-y:auto;" antes inline. */
.chat-box {
    max-height: 350px;
    overflow-y: auto;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: linear-gradient(135deg, var(--rs-gray-50) 0%, var(--rs-gray-100) 100%);
    min-height: 100vh;
    color: var(--rs-gray-800);
    /* display:flex + flex-direction:column faz o "mt-auto" do rodape
       (layout :: footer) empurrar de verdade para o fim da tela em paginas
       com pouco conteudo - sem isso mt-auto nao tem efeito algum, porque o
       body nao e um flex container. */
    display: flex;
    flex-direction: column;
}

/* === Navbar === */
.navbar-sgpur {
    background: linear-gradient(135deg, var(--rs-blue) 0%, var(--rs-blue-dark) 100%);
    box-shadow: 0 2px 8px rgba(var(--rs-blue-rgb),.35);
    border-bottom: 2px solid var(--rs-gold);
}

.navbar-sgpur .navbar-brand {
    letter-spacing: -0.02em;
    color: #fff;
}

/* Fontes claras sobre o fundo azul forte do menu (o Bootstrap padrao usaria
   links escuros, quase ilegiveis). navbar-dark ja ajuda; reforcamos o contraste. */
.navbar-sgpur .nav-link {
    position: relative;
    transition: var(--rs-transition);
    color: rgba(255,255,255,.85);
}

.navbar-sgpur .nav-link:hover,
.navbar-sgpur .nav-link.active {
    color: #fff;
}

.navbar-sgpur .nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--rs-gold);
    transition: width .2s ease;  /* animacao intencional de largura do sublinhado */
    transform: translateX(-50%);
}

.navbar-sgpur .nav-link:hover::after,
.navbar-sgpur .nav-link.active::after { width: 80%; }

.navbar-sgpur .nav-link:hover { opacity: .9; }

/* Marcador de status padrao do sistema (fragments layout :: status / statusNa).
   Alinhamento e tamanho consistentes do icone em qualquer contexto. Fundo em
   "quadradinho" (pill) para destacar Pendente/Concluido igual ao badge usado
   no anexo da solicitacao original - mesmo visual em todo o sistema. */
.status-mark {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: var(--saur-radius-pill);
    font-size: var(--saur-font-xs);
}
.status-mark.text-danger { background: var(--rs-red-light); }
.status-mark.text-success { background: var(--rs-green-light); }
.status-mark.text-secondary { background: var(--rs-gray-100); }
.status-mark i {
    /* 1.05rem: sem token proximo o bastante (entre md=1rem e lg=1.25rem,
       mais perto de md, mas o icone precisa ficar visivelmente maior que o
       texto ao lado dele - manter literal). */
    font-size: 1.05rem;
    vertical-align: -0.1em;
    line-height: 1;
}
/* O "x" (pendente) do bootstrap-icons e visualmente mais fino que o "check":
   engrossa o traco com text-shadow (icone de fonte nao tem variante bold). */
.status-mark .bi-x-lg {
    font-size: var(--saur-font-lg);
    text-shadow: 0 0 .4px currentColor, 0 0 .4px currentColor;
}

/* Linha de membro/usuario inativo: fundo cinza visivel + faixa lateral e texto
   atenuado, para distinguir claramente na listagem sem ser gritante.
   !important vence a cor de fundo que o Bootstrap aplica na tabela (--bs-table-bg). */
tr.linha-inativa > td {
    background-color: var(--rs-gray-200) !important;
    color: var(--rs-gray-600);
}

tr.linha-inativa > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--rs-gray-400);
}

/* === Cards aprimorados === */
.card {
    /* raio via variaveis do Bootstrap: o proprio .card-header herda o
       inner-radius e nao precisa mais de border-radius com !important */
    --bs-card-border-radius: var(--saur-radius-md);
    /* 11px, nao var(--saur-radius-md) (12px): intencional, nao arredondamento
       acidental - o Bootstrap exige o raio INTERNO 1px menor que o externo
       para o .card-header nao vazar um pixel de canto reto por baixo do raio
       do .card. Se --saur-radius-md mudar de valor no futuro, recalcular
       este -1px junto. */
    --bs-card-inner-border-radius: 11px;
    /* Card padrao e "sem moldura", mas NAO se pode zerar border-style/width
       aqui: as utilitarias .border-primary/.border-success/... do Bootstrap 5.3
       so definem border-COLOR (!important) e herdam a espessura/estilo do
       proprio .card. Com "border: none" (ou "border: 0") elas viravam borda
       invisivel - os 4 cards de resumo de /controle-urgencias ficavam todos
       brancos e identicos e o card "Atrasados" de /avaliador perdia a moldura
       vermelha. Deixando so a COR transparente, o 1px solid do Bootstrap
       continua valendo e as utilitarias de cor voltam a funcionar. */
    border-color: transparent;
    box-shadow: var(--rs-shadow);
    transition: var(--rs-transition);
}

.card:hover { box-shadow: var(--rs-shadow-md); }

.card-header {
    background: linear-gradient(135deg, var(--rs-gray-50), var(--rs-gray-100));
    border-bottom: 1px solid var(--rs-gray-200);
    font-weight: 600;
    font-size: var(--saur-font-sm);
    padding: .75rem 1rem;
}

/* === Tabela de pareceres (respostas dos avaliadores) === */
.tabela-pareceres {
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    /* .8125rem: empate exato entre xs (.75rem, diff .0625) e sm (.875rem,
       diff .0625) - literal mantido de proposito, sem token mais proximo. */
    font-size: .8125rem;
}
.tabela-pareceres thead th {
    padding: .45rem .6rem;
    font-size: var(--saur-font-xs);
    text-transform: uppercase;
    letter-spacing: .03em;
    /* gray-600 (5.74:1 sobre gray-100). gray-500 dava 4.34:1 - reprova em AA
       para texto pequeno, que e exatamente o caso aqui (--saur-font-xs
       maiusculo, era ".7rem" literal antes da migracao para tokens). */
    color: var(--rs-gray-600);
    background: var(--rs-gray-100);
    border-bottom: 2px solid var(--rs-gray-200);
    white-space: nowrap;
}
.tabela-pareceres tbody td {
    padding: .5rem .6rem;
    vertical-align: middle;
    line-height: 1.35;
    border-bottom: 1px solid var(--rs-gray-200);
}
.tabela-pareceres tbody tr:hover td {
    background: var(--rs-gray-100);
}
.tabela-pareceres th:first-child,
.tabela-pareceres td:first-child {
    padding-left: .75rem;
}
.tabela-pareceres th:last-child,
.tabela-pareceres td:last-child {
    padding-right: .75rem;
}
/* Coluna Medico: nome inteiro sem quebra agressiva, com peso visual */
.tabela-pareceres td:first-child {
    font-weight: 600;
    min-width: 160px;
}
.tabela-pareceres th:nth-child(2),
.tabela-pareceres td:nth-child(2) {
    white-space: normal;
    min-width: 110px;
}
/* Colunas Data / Origem / Resposta: nao deixar espremer */
.tabela-pareceres th:nth-child(3),
.tabela-pareceres td:nth-child(3),
.tabela-pareceres th:nth-child(4),
.tabela-pareceres td:nth-child(4) {
    white-space: nowrap;
}
.tabela-pareceres .badge {
    font-size: var(--saur-font-xs);
    font-weight: 600;
    padding: .3em .55em;
}
/* Tipografia/espacamento compactos dos controles: ver bloco ".acao-form"
   (layout flex) mais abaixo, na secao "Acao column na tabela de pareceres". */
.tabela-pareceres .btn-sm {
    font-size: var(--saur-font-xs);
    padding: .25rem .5rem;
}

/* === Wizard horizontal (passo a passo) === */
.wizard {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 1.5rem 0 .5rem;
    margin-bottom: 1.5rem;
}

.wizard::before {
    content: '';
    position: absolute;
    top: 2.25rem;
    left: 3rem;
    right: 3rem;
    height: 3px;
    background: var(--rs-gray-200);
    z-index: 0;
}

/* Badge de contagem (favoraveis) dentro do passo 2 do wizard horizontal.
   Substitui o style="font-size:.55rem" inline que existia em
   processos/detalhe.html (item D3/Passo 5 do relatorio de redesign,
   2026-08-05) - mesmo padrao ja usado para .badge-encerramento-xs acima. */
.wizard-badge-count { font-size: .55rem; }

.wizard-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    cursor: pointer;
    text-decoration: none;
}

.wizard-step .wizard-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--saur-font-sm);
    font-weight: 700;
    transition: var(--rs-transition);
    border: 3px solid var(--rs-gray-200);
    background: #fff;
    color: var(--rs-gray-400);
    margin-bottom: .4rem;
}

.wizard-step .wizard-label {
    font-size: var(--saur-font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: center;
    color: var(--rs-gray-400);
    transition: var(--rs-transition);
    line-height: 1.2;
}

/* Concluida */
.wizard-step.concluida .wizard-circle {
    background: var(--rs-green);
    border-color: var(--rs-green);
    color: #fff;
}

.wizard-step.concluida .wizard-label { color: var(--rs-green); }

/* Atual */
.wizard-step.atual .wizard-circle {
    background: var(--rs-blue);
    border-color: var(--rs-blue);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--rs-blue-rgb),.2);
    animation: pulse-ring 2s infinite;
}

.wizard-step.atual .wizard-label { color: var(--rs-blue); font-weight: 700; }

/* Foco por teclado visivel na navegacao do wizard */
.wizard-step:focus-visible { outline: none; }
.wizard-step:focus-visible .wizard-circle {
    box-shadow: 0 0 0 3px rgba(var(--rs-blue-rgb),.35);
}

/* Bloqueada: opacidade so no circulo (indicador visual de "desabilitado");
   o rotulo usa uma cor fixa mais escura em vez de depender da opacidade
   herdada, que deixava o texto com contraste baixo demais sobre fundo claro. */
.wizard-step.bloqueada { cursor: not-allowed; }

.wizard-step.bloqueada .wizard-circle { background: var(--rs-gray-100); opacity: .6; }

.wizard-step.bloqueada .wizard-label { color: var(--rs-gray-600); }

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(var(--rs-blue-rgb),.4); }
    70% { box-shadow: 0 0 0 10px rgba(var(--rs-blue-rgb),0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--rs-blue-rgb),0); }
}

/* === Timeline vertical === */
.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--rs-gray-200);
}

.timeline-item {
    position: relative;
    padding-bottom: 1.25rem;
    padding-left: .15rem;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-dot {
    position: absolute;
    left: -1.65rem;
    top: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--saur-font-xs);
    border: 2px solid var(--rs-gray-200);
    background: #fff;
    color: var(--rs-gray-400);
    transition: var(--rs-transition);
    z-index: 1;
}

.timeline-item.concluida .timeline-dot {
    background: var(--rs-green);
    border-color: var(--rs-green);
    color: #fff;
}

.timeline-item.atual .timeline-dot {
    background: var(--rs-blue);
    border-color: var(--rs-blue);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(var(--rs-blue-rgb),.2);
    animation: pulse-ring 2s infinite;
}

.timeline-item.pendente .timeline-dot { background: var(--rs-gray-100); }

/* Desfecho negativo (ex.: solicitacao devolvida/cancelada) - mesma estrutura
   da timeline, so muda a cor para vermelho em vez do verde de "concluida". */
.timeline-item.negativa .timeline-dot {
    background: var(--rs-red);
    border-color: var(--rs-red);
    color: #fff;
}

.timeline-item .timeline-title {
    font-weight: 600;
    /* .85rem: sem token proximo o bastante (entre sm=.875rem e md=1rem,
       mais perto de sm mas a diferenca de .025rem importa aqui - e o titulo
       principal da timeline, mantido literal). */
    font-size: .85rem;
    margin-bottom: .15rem;
}

.timeline-item.concluida .timeline-title { color: var(--rs-green); }

.timeline-item.atual .timeline-title { color: var(--rs-blue); }

/* gray-600 (7.58:1 sobre branco), nao gray-400 (2.56:1 - reprova em WCAG AA,
   que exige 4.5:1). E o texto que diz o que ainda falta no processo, o mais
   consultado do cartao "Progresso". Mesma correcao ja aplicada ao rotulo de
   passo bloqueado do wizard (.wizard-step.bloqueada .wizard-label). */
.timeline-item.pendente .timeline-title { color: var(--rs-gray-600); }

.timeline-item.negativa .timeline-title { color: var(--rs-red); }

.timeline-item .timeline-desc {
    font-size: var(--saur-font-xs);
    color: var(--rs-gray-500);
}

/* === Badges com cor === */
.badge-rs-blue { background: var(--rs-blue-light); color: var(--rs-blue); }
.badge-rs-gold { background: var(--rs-gold-light); color: var(--rs-gold-dark); }
.badge-rs-green { background: var(--rs-green-light); color: var(--rs-green-dark); }
.badge-rs-red { background: var(--rs-red-light); color: var(--rs-red); }

/* Card de pausa "Aguardando informacao complementar" (processos/detalhe.html,
   #info-complementar): o border-warning padrao do Bootstrap e um contorno de
   1px bem palido, que some visualmente logo abaixo do cabecalho solido
   bg-warning - o corpo do card ficava branco puro, sem nenhuma pista de
   "atencao/pausa" alem do cabecalho. Reforcado com borda mais grossa e
   saturada + fundo tingido no corpo, na mesma paleta ouro (--rs-gold) ja
   usada no resto do sistema para estados de atencao. */
#info-complementar { border-width: 2px; border-color: var(--rs-gold); }
#info-complementar > .card-body { background: var(--rs-gold-light); }

/* Badge de encerramento (layout :: badgeEncerramento) na planilha do Painel:
   a celula ja tem o badge de status acima, entao o segundo entra menor para
   nao competir com ele. Substitui o style="font-size:.65rem" inline que
   existia no dashboard antes de o badge virar fragment compartilhado.
   .65rem: abaixo do menor token (xs=.75rem) de proposito - e um badge
   SECUNDARIO sobreposto a outro badge de status, precisa ficar visualmente
   menor que --saur-font-xs para nao competir com ele; mantido literal. */
.badge-encerramento-xs .badge { font-size: .65rem; }

/* Bug real reproduzido em 2026-08-27 (processo 11/2026 em producao,
   "Status e Medico 1 se sobrepondo" no Painel): o Bootstrap aplica
   `white-space: nowrap` em TODO `.badge` por padrao. Um badge curto
   ("Reaberto 2x") cabe na largura de `mw-10rem` da celula Status sem
   problema, mas um mais longo (badgeRegraDecisao, "Voto único do
   Coordenador CET-RS") nao quebra linha e ULTRAPASSA a borda direita da
   propria celula (table-cell nao recalcula a largura da coluna so por
   causa de conteudo inline-block que nao quebra) - visualmente invade a
   celula "Medico 1" ao lado, dando a impressao de sobreposicao/CSS
   quebrado. So os badges SECUNDARIOS empilhados abaixo do badge de status
   principal (encerramento/regra de decisao/reaberturas) precisam poder
   quebrar em mais de uma linha dentro da largura da propria celula. */
.badge-encerramento-xs .badge { white-space: normal; word-break: break-word; }

/* === Animacoes === */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in { animation: fadeInUp .4s ease both; }

.animate-fade-in-d1 { animation: fadeInUp .4s ease .1s both; }
.animate-fade-in-d2 { animation: fadeInUp .4s ease .2s both; }
.animate-fade-in-d3 { animation: fadeInUp .4s ease .3s both; }
/* .animate-fade-in-d4/-d5 e .count-animate/countUp existiam aqui e nunca
   foram referenciadas por nenhum template/JS do projeto (confirmado por
   grep em src/ inteiro antes de remover, 2026-08-05) - removidas como
   classes/keyframe fantasma. .animate-fade-in-d1..d3 continuam em uso. */

/* === Link com hover na cor institucional (ex.: "Esqueci minha senha") === */
.link-hover-primary:hover { color: var(--rs-blue) !important; }

/* Texto branco atenuado sobre o gradiente azul do login/esqueci-senha.
   O .text-white-50 do Bootstrap da 3.35:1 sobre --rs-blue (o ponto mais
   claro do gradiente) - reprova em WCAG AA, que exige 4.5:1 para texto
   pequeno. Com 70% de opacidade sobe para 5.03:1, mantendo o efeito de
   hierarquia visual. */
.text-white-70 { color: rgba(255, 255, 255, .7) !important; }

/* === Botoes com gradiente ===
   Redefine as variaveis --bs-btn-* para que TODOS os estados (hover, active,
   disabled, focus) usem a paleta SAUR, e nao o azul padrao do Bootstrap. */
.btn-primary {
    --bs-btn-bg: var(--rs-blue);
    --bs-btn-border-color: var(--rs-blue);
    --bs-btn-hover-bg: var(--rs-blue-dark);
    --bs-btn-hover-border-color: var(--rs-blue-dark);
    --bs-btn-active-bg: var(--rs-blue-dark);
    --bs-btn-active-border-color: var(--rs-blue-dark);
    --bs-btn-disabled-bg: var(--rs-blue);
    --bs-btn-disabled-border-color: var(--rs-blue);
    --bs-btn-focus-shadow-rgb: var(--rs-blue-rgb);
    /* usa background-image (nao o shorthand) para o --bs-btn-*-bg continuar
       existindo por baixo do gradiente */
    background-image: linear-gradient(135deg, var(--rs-blue), var(--rs-blue-dark));
    border: none;
    box-shadow: 0 2px 4px rgba(var(--rs-blue-rgb),.25);
    transition: var(--rs-transition);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(var(--rs-blue-rgb),.35);
}

/* No clique/desabilitado remove o gradiente para o --bs-btn-*-bg aparecer
   (feedback visivel de :active e estado disabled) */
.btn-primary:active,
.btn-primary:disabled,
.btn-primary.disabled {
    background-image: none;
    transform: none;
}

.btn-outline-primary {
    --bs-btn-color: var(--rs-blue);
    --bs-btn-border-color: var(--rs-blue);
    --bs-btn-hover-bg: var(--rs-blue);
    --bs-btn-hover-border-color: var(--rs-blue);
    --bs-btn-active-bg: var(--rs-blue-dark);
    --bs-btn-active-border-color: var(--rs-blue-dark);
    --bs-btn-disabled-color: var(--rs-blue);
    --bs-btn-disabled-border-color: var(--rs-blue);
    --bs-btn-focus-shadow-rgb: var(--rs-blue-rgb);
    transition: var(--rs-transition);
}

.btn-outline-primary:hover { transform: translateY(-1px); }
.btn-outline-primary:active { transform: none; }

/* === Tabelas === */
.table thead th {
    background: var(--rs-gray-100);
    font-weight: 600;
    font-size: var(--saur-font-xs);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--rs-gray-600);
    border-bottom: 2px solid var(--rs-gray-200);
}

.table tbody tr {
    transition: var(--rs-transition);
}

/* Hover so em tabelas que optaram por .table-hover, via variavel do Bootstrap
   (nao afeta .table-striped nem as variantes .table-* e sem !important) */
.table-hover { --bs-table-hover-bg: var(--rs-blue-light); }

/* Forms dentro de tabela (aba Respostas): controles nao vazam da celula */
.table td form { min-width: 0; }
.table td form .form-select,
.table td form .form-control { width: 100%; }

/* Excecao: dentro de um .input-group (ex.: chat operador<->avaliador da
   aba Respostas, docs/RELATORIO-CHAT-MEMBROS-OPERADORES-2026-08.md), o
   Bootstrap ja controla a largura do campo via flex-basis (".input-group
   > .form-control { width: 1% }", para o campo dividir a linha com o
   botao ao lado). A regra generica acima tem especificidade MAIOR
   (2 classes + 2 tipos vs. 2 classes do Bootstrap) e vencia mesmo vindo
   antes no arquivo, forcando width:100% no campo de texto - com
   flex-wrap:wrap (padrao do .input-group), isso faz o campo ocupar a
   linha inteira sozinho e o botao "Enviar" quebrar para a linha de
   baixo, alinhado a esquerda (bug real relatado em producao em
   2026-08-07: "botao de enviar do lado esquerdo" no chat com o
   avaliador). Precisa de especificidade igual ou maior que a regra
   acima para vencer - reafirma o width:1% do Bootstrap explicitamente
   em vez de confiar em cascata/ordem. */
.table td form .input-group > .form-control { width: 1%; }

/* Evita estouro de conteúdo em células da tabela: quebra palavras longas e permite wrap */
.table td { overflow-wrap: break-word; white-space: normal; }

/* ...MAS a regra acima (especificidade 0-1-1) vence o `.text-truncate` do
   Bootstrap (0-1-0, sem !important) e devolve white-space:normal - a célula
   que deveria cortar numa linha só com reticências passa a quebrar em várias
   linhas, empurrando a altura da linha. Restaura o nowrap com especificidade
   igual + a própria classe. Usado em auditoria/lista, processos/lista e
   processos/mensagens-avaliadores-lista (todas com th:title = texto completo
   no hover). */
.table td.text-truncate { white-space: nowrap; }

/* === Form controls === */
.form-control, .form-select {
    border-radius: var(--saur-radius-sm);
    border-color: var(--rs-gray-200);
    transition: var(--rs-transition);
    font-size: var(--saur-font-sm);
}

.form-control:focus, .form-select:focus {
    border-color: var(--rs-blue);
    box-shadow: 0 0 0 3px rgba(var(--rs-blue-rgb),.25);
}

/* === Progress bar === */
.progress {
    background: var(--rs-gray-100);
    /* 100px, nao --saur-radius-pill (999px): valor historico equivalente na
       pratica (o raio real e sempre limitado a metade da altura do elemento,
       que aqui e bem menor que 100px) - normalizado para o mesmo token do
       .status-mark, mesma intencao visual de "pilula". */
    border-radius: var(--saur-radius-pill);
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--rs-blue), var(--rs-green));
    transition: width .6s ease;
}

.progress-bar.complete { background: linear-gradient(90deg, var(--rs-green), var(--rs-green-bright)); }

/* === Alertas === */
.alert {
    border: none;
    /* 10px: entre sm (8px) e md (12px), mesma distancia dos dois -
       arredondado para sm (diferenca de 2px imperceptivel num alerta). */
    border-radius: var(--saur-radius-sm);
    box-shadow: var(--rs-shadow-sm);
}

.alert-success { background: var(--rs-green-light); color: var(--rs-green-dark); }
.alert-danger { background: var(--rs-red-light); color: var(--rs-red-dark); }
.alert-warning { background: var(--rs-gold-light); color: var(--rs-gold-dark); }
.alert-info { background: var(--rs-info-light); color: var(--rs-info-dark); }

/* === Paginacao === */
.page-link {
    --bs-pagination-border-radius: var(--saur-radius-sm);
    margin: 0 2px;
    border: 1px solid var(--rs-gray-200);
    color: var(--rs-gray-600);
    transition: var(--rs-transition);
}

.page-link:hover {
    background: var(--rs-blue-light);
    border-color: var(--rs-blue);
    color: var(--rs-blue);
}

.page-item.active .page-link {
    background: var(--rs-blue);
    border-color: var(--rs-blue);
}

/* === Footer === */
.footer-sgpur {
    background: var(--rs-gray-800);
    color: var(--rs-gray-400);
    font-size: var(--saur-font-xs);
    padding: 1rem;
    text-align: center;
    border-top: 2px solid var(--rs-gold);
}

/* === Card estatisticas === */
.stat-card {
    border-radius: var(--saur-radius-lg);
    padding: 1.25rem;
    transition: var(--rs-transition);
    cursor: pointer;
    border: none;
    --stat-bg: #fff;
    --stat-border: var(--rs-gray-200);
    --stat-text: var(--rs-gray-800);
    --stat-icon-bg: var(--rs-gray-100);
    --stat-icon-color: var(--rs-gray-500);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--rs-shadow-lg);
}

/* As cores saem das variaveis --stat-* definidas pela variante
   (.stat-card-total/andamento/deferido/...). Ate 2026-08-04 essa ligacao era
   feita com style="color:var(--stat-text)" repetido em CADA elemento de CADA
   card do Painel - 52 dos 128 style= inline do sistema estavam ali. */
.stat-card .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--saur-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--saur-font-lg);
    background: var(--stat-icon-bg);
    color: var(--stat-icon-color);
}

.stat-card .stat-number {
    font-size: var(--saur-font-xl);
    font-weight: 800;
    line-height: 1;
    color: var(--stat-text);
}

.stat-card .stat-label {
    font-size: var(--saur-font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: .25rem;
    color: var(--stat-text);
    line-height: 1.5;
    /* rem, nao em: em seria relativo ao proprio font-size (.75rem) deste
       elemento, dando 1.6875rem - menor que a altura real de 2 linhas
       (2 * 1.5 * .75rem = 2.25rem) e nao resolveria a inconsistencia entre
       cards com rotulo curto x longo. */
    min-height: 2.25rem;
}

/* === Secao de wizard content com fade === */
.wizard-content {
    animation: fadeInUp .3s ease both;
}

/* === Aba Envio: evita quebra visual por nomes longos de anexos === */
#pane-envio .list-group-item {
    gap: .75rem;
    flex-wrap: wrap;
}

#pane-envio .list-group-item > span {
    min-width: 0;
    flex: 1 1 320px;
    overflow-wrap: anywhere;
}

#pane-envio .list-group-item form {
    flex: 0 0 auto;
}

/* === Acao column na tabela de pareceres - quebra em vez de cortar/espremer ===
   (tipografia + layout dos controles ficam juntos aqui) */
.tabela-pareceres .acao-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
}
.tabela-pareceres .acao-form .form-select-sm,
.tabela-pareceres .acao-form .form-control-sm {
    font-size: var(--saur-font-xs);
    padding: .2rem .4rem;
    width: auto;
}
.tabela-pareceres .acao-form .form-select-sm {
    min-width: 110px;
    flex: 1 1 110px;
}
.tabela-pareceres .acao-form .form-control-sm {
    min-width: 120px;
    flex: 1 1 120px;
}
.tabela-pareceres .acao-form .btn-sm {
    flex: 0 0 auto;
    white-space: nowrap;
}
.tabela-pareceres .btn-lembrete-avaliador {
    white-space: nowrap;
}

/* === Variantes de stat-card para o Painel ===
   Usam as --rs-* colors em vez de hex cru, para nao duplicar a paleta (o
   bloco base de --stat-* fica junto com o resto de .stat-card, la em cima). */
.stat-card-total     { --stat-bg: #fff; --stat-border: var(--rs-gray-200); --stat-text: var(--rs-gray-800); --stat-icon-bg: var(--rs-gray-100); --stat-icon-color: var(--rs-gray-500); }
.stat-card-andamento { --stat-bg: var(--rs-gold-light); --stat-border: var(--rs-gold); --stat-text: var(--rs-gold-dark); --stat-icon-bg: var(--rs-gold-light); --stat-icon-color: var(--rs-gold); }
.stat-card-deferido  { --stat-bg: var(--rs-green-light); --stat-border: var(--rs-green); --stat-text: var(--rs-green-dark); --stat-icon-bg: var(--rs-green-light); --stat-icon-color: var(--rs-green); }
.stat-card-indeferido{ --stat-bg: var(--rs-red-light); --stat-border: var(--rs-red); --stat-text: var(--rs-red-dark); --stat-icon-bg: var(--rs-red-light); --stat-icon-color: var(--rs-red); }
.stat-card-cancelado { --stat-bg: #fff; --stat-border: var(--rs-gray-300); --stat-text: var(--rs-gray-600); --stat-icon-bg: var(--rs-gray-100); --stat-icon-color: var(--rs-gray-500); }
.stat-card-membros   { --stat-bg: var(--rs-blue-light); --stat-border: var(--rs-blue); --stat-text: var(--rs-blue); --stat-icon-bg: var(--rs-blue-light); --stat-icon-color: var(--rs-blue); }
/* Achado A4 da auditoria de 2026-08-27: tinha a MESMA cor de .stat-card-membros,
   com quem fica lado a lado no Painel e no Portal do Avaliador ("Preemptivos
   avaliados" x "Atribuidos a mim") - viola a regra fixa "cada opcao lado a
   lado usa sua propria cor semantica". Trocado para dourado, coerente com o
   badge de tipo "Preemptivo" (bg-warning text-dark, usado em ~11 telas). */
.stat-card-preemptivo{ --stat-bg: var(--rs-gold-light); --stat-border: var(--rs-gold); --stat-text: var(--rs-gold-dark); --stat-icon-bg: var(--rs-gold-light); --stat-icon-color: var(--rs-gold); }
.stat-card-tempo     { --stat-bg: #fff; --stat-border: var(--rs-gray-200); --stat-text: var(--rs-gray-800); --stat-icon-bg: var(--rs-gray-100); --stat-icon-color: var(--rs-gray-500); }

/* Estilo base repetido inline nos cards de resumo do Portal do Solicitante
   (background/border/border-radius/box-shadow via variaveis --stat-*
   definidas por .stat-card-total/andamento/deferido/indeferido/cancelado
   acima) — extraido para evitar duplicar o mesmo style="..." em cada card. */
.stat-card-portal {
    background: var(--stat-bg);
    border: 1px solid var(--stat-border);
    border-radius: var(--saur-radius-lg);
    box-shadow: var(--rs-shadow);
}

/* Cards de resumo tambem clicaveis (filtro da lista do solicitante,
   static/js/solicitante-lista.js): sinaliza qual filtro esta ativo, ja que
   sao <button> agora (nao mais <div> puramente decorativo). */
.stat-card-filtro {
    cursor: pointer;
    transition: var(--rs-transition);
}
.stat-card-filtro:hover {
    box-shadow: var(--rs-shadow-md);
}
.stat-card-filtro.active {
    outline: 2px solid var(--stat-border);
    outline-offset: 1px;
}

/* Cartao de numero SEM acao nenhuma (nao e link, nao filtra, nao clica pra
   nada) - ex.: os 4 resumos de /controle-urgencias e o cartao de tempo medio
   de /membros, que sao <div> puros. Sem esta classe, .stat-card sozinho
   promete uma acao (cursor:pointer + hover que "levanta" o cartao) que nao
   existe - a mao do mouse mentindo pro operador. NAO aplicar em cartoes que
   ja sao link/botao de verdade (.stat-card-portal do Painel/Portal do
   Solicitante, .stat-card-filtro) - so nos que sao puramente informativos. */
.stat-card.stat-card-estatico {
    cursor: default;
}
.stat-card.stat-card-estatico:hover {
    transform: none;
    box-shadow: var(--rs-shadow);
}

/* Tabela do dashboard: scroll vertical so em desktop (evita cortar conteudo em mobile) */
@media (min-width: 768px) {
    .dashboard-tabela-scroll { max-height: 70vh; overflow-y: auto; }
}

/* === Toast de notificacao (feedback nao-intrusivo) === */
.toast-container-sgpur {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
}
.toast-sgpur {
    pointer-events: auto;
    min-width: 280px;
    max-width: 420px;
    background: #fff;
    border-radius: var(--saur-radius-md);
    box-shadow: var(--rs-shadow-lg);
    border-left: 4px solid var(--rs-gray-400);
    padding: .875rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    animation: toastIn .3s ease both;
    font-size: var(--saur-font-sm);
}
.toast-sgpur.toast-success { border-left-color: var(--rs-green); }
.toast-sgpur.toast-error   { border-left-color: var(--rs-red); }
.toast-sgpur.toast-info    { border-left-color: var(--rs-blue); }
.toast-sgpur .toast-icon   { font-size: var(--saur-font-lg); line-height: 1; flex-shrink: 0; }
.toast-sgpur .toast-body   { flex: 1; min-width: 0; }
.toast-sgpur .toast-close  {
    background: none; border: none; font-size: var(--saur-font-md); line-height: 1;
    cursor: pointer; color: var(--rs-gray-400); padding: 0; flex-shrink: 0;
}
.toast-sgpur .toast-close:hover { color: var(--rs-gray-700); }
/* Toast clicavel (mostrarToast com 3o argumento onClick, 2026-08-07): usado
   pelo aviso de mensagem nova de chat, que leva direto ao card do chat. */
.toast-sgpur-clicavel { cursor: pointer; }
.toast-sgpur-clicavel:hover { box-shadow: 0 4px 14px rgba(0,0,0,.16); }
@keyframes toastIn {
    from { opacity: 0; transform: translateX(100%); }
    to   { opacity: 1; transform: translateX(0); }
}

/* === Scrollbar personalizada (apenas desktop) === */
@media (min-width: 768px) {
    /* Firefox */
    * { scrollbar-width: thin; scrollbar-color: var(--rs-gray-300) var(--rs-gray-100); }
    /* WebKit/Blink */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: var(--rs-gray-100); }
    /* 3px: sem token proximo (sm=8px e mais que o dobro) - a barra de rolagem
       em si tem so 6px de largura, um raio maior estouraria visualmente o
       proprio elemento; mantido literal de proposito. */
    ::-webkit-scrollbar-thumb { background: var(--rs-gray-300); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--rs-gray-400); }
}

/* === Responsivo: wizard vira scroll horizontal em mobile ===
   767.98px (nao 768px): com "max-width: 768px" esta regra e a
   "@media (min-width: 768px)" acima valiam AO MESMO TEMPO em exatamente
   768px - que e a largura CSS do iPad em retrato. Mesma convencao ja usada
   no "max-width: 991.98px" mais abaixo. */
@media (max-width: 767.98px) {
    .wizard {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 1rem;
        padding-top: 1rem;
        gap: 0;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .wizard-step {
        min-width: 85px;
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding: 0 .25rem;
    }
    .wizard::before { display: none; }
    .wizard-step .wizard-circle { width: 40px; height: 40px; font-size: var(--saur-font-xs); }
    /* .6rem: abaixo do menor token (xs=.75rem) de proposito - rotulo do
       wizard em scroll horizontal mobile, precisa ficar bem pequeno para
       caber em max-width:85px sem cortar mais que o necessario. */
    .wizard-step .wizard-label { font-size: .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 85px; }
    /* Sombra sutil indicando que ha mais passos para scroll */
    .wizard-wrapper { position: relative; }
    .wizard-wrapper::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to left, rgba(255,255,255,.8), transparent);
        pointer-events: none;
        opacity: 0;
        transition: opacity .3s;
    }
    .wizard-wrapper.can-scroll::after { opacity: 1; }

    /* Em telas estreitas, deixa as colunas Data/Origem/Resposta quebrarem
       para reduzir a largura minima da tabela de pareceres */
    .tabela-pareceres th:nth-child(3),
    .tabela-pareceres td:nth-child(3),
    .tabela-pareceres th:nth-child(4),
    .tabela-pareceres td:nth-child(4) {
        white-space: normal;
    }

    #pane-envio .list-group-item {
        align-items: flex-start !important;
    }
}

/* PDF do avaliador (votar.html): calc(100vh - 220px) so faz sentido no
   layout split-pane lado a lado (>=992px, col-lg-7/col-lg-5 em votar.html).
   Abaixo do breakpoint lg do Bootstrap as colunas empilham, e esse calculo
   deixava o iframe alto demais, empurrando o formulario de voto (que fica
   logo abaixo) para muito longe do topo. */
.pdf-avaliador-frame {
    height: calc(100vh - 220px);
    min-height: 400px;
}
@media (max-width: 991.98px) {
    .pdf-avaliador-frame {
        height: 60vh;
        min-height: 320px;
    }
}
/* Celular (<576px): iframe de PDF embutido e o ponto mais fragil da tela em
   mobile (Safari iOS/Chrome Android variam muito na renderizacao inline) -
   reduz um pouco a altura do iframe para dar mais destaque visual ao botao
   "Abrir PDF em nova aba" (btn-primary, w-100, ver votar.html) que fica logo
   acima dele. */
@media (max-width: 575.98px) {
    .pdf-avaliador-frame {
        height: 45vh;
        min-height: 280px;
    }
}

/* Cartao selecionavel do voto do avaliador (votar.html): alvo de toque
   ~16px (so o circulo do radio) virou o cartao inteiro, minimo 44px de
   altura (WCAG 2.5.5), para a decisao IRREVERSIVEL mais importante do
   sistema. O <input type="radio"> continua visivel e real dentro do
   <label> (nao usar o padrao btn-check do Bootstrap, que esconde o input
   via clip/position:absolute - o Playwright falha ao .check() um
   elemento nao acionavel; ver e2e/pages/AvaliadorPage.java). */
.voto-opcao {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-height: 44px;
    padding: .75rem 1rem;
    border: 2px solid var(--rs-gray-200);
    border-radius: var(--saur-radius-md);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.voto-opcao:hover {
    border-color: var(--rs-gray-400, #adb5bd);
}
.voto-opcao:has(.voto-opcao-radio:checked) {
    border-color: var(--rs-blue);
    background: var(--rs-blue-light);
}
/* Cada caixa de voto usa a cor do proprio resultado, nao um azul generico -
   pedido do usuario: "cada um tem uma cor... as caixas devem ter a mesma cor
   do respectivo voto". Em repouso/hover, so a borda fica tingida (o fundo
   continua branco, para nao competir visualmente antes da escolha); ao
   marcar, a caixa inteira assume a cor do voto (fundo + borda), substituindo
   o azul generico acima nesses 3 casos especificos. */
.voto-opcao-favoravel:hover { border-color: var(--rs-green); }
.voto-opcao-favoravel:has(.voto-opcao-radio:checked) {
    border-color: var(--rs-green);
    background: var(--rs-green-light);
}
.voto-opcao-nao-favoravel:hover { border-color: var(--rs-red); }
.voto-opcao-nao-favoravel:has(.voto-opcao-radio:checked) {
    border-color: var(--rs-red);
    background: var(--rs-red-light);
}
.voto-opcao-solicita-info:hover { border-color: var(--rs-gold); }
.voto-opcao-solicita-info:has(.voto-opcao-radio:checked) {
    border-color: var(--rs-gold);
    background: var(--rs-gold-light);
}
.voto-opcao-radio {
    margin-top: .2rem;
    flex-shrink: 0;
    transform: scale(1.3);
}
.voto-opcao-conteudo {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.voto-opcao-titulo {
    font-weight: 600;
}

/* === Responsivo: celulares pequenos (< 576px) ===
   575.98px, nao 576px: mesma convencao do resto do arquivo (ver 767.98px e
   991.98px acima) - com "max-width: 576px" esta regra valeria ao mesmo tempo
   que qualquer "@media (min-width: 576px)" existente, exatamente em 576px. */
@media (max-width: 575.98px) {
    /* Reduz tamanho dos stat-cards no dashboard */
    .stat-card .stat-number { font-size: var(--saur-font-lg); }
    .stat-card .stat-icon { width: 36px; height: 36px; font-size: var(--saur-font-md); }
    .stat-card { padding: .75rem; }

    /* Toast ocupa largura total com margem */
    .toast-container-sgpur { left: .5rem; right: .5rem; }
    .toast-sgpur { max-width: 100%; min-width: 0; }

    /* Reduz padding de cards */
    .card-body { padding: .75rem; }

    /* Cards de resumo no controle-urgencias: texto dos badges menor */
    .badge.fs-5 { font-size: var(--saur-font-md) !important; }
}

/* === Chat recolhivel: chevron gira ao colapsar === */
/* Bug real reportado em producao (2026-08-08, /processos/15#respostas): o
   icone nunca girava visualmente, apesar de o Bootstrap alternar a classe
   ".collapsed" corretamente (confirmado por getComputedStyle e por
   screenshot real via Playwright antes desta correcao). Causa raiz: <i> e
   "display: inline" por padrao, e a especificacao de CSS Transforms nao
   aplica "transform" visualmente a elementos inline nao substituidos -
   getComputedStyle().transform ja reportava a matriz de rotacao correta
   (a REGRA era aplicada), mas o navegador nao pintava a rotacao na tela.
   Reproduzido nos 3 lugares que usam .chevron-collapse (card "Todos os
   anexos", card "Conversa com o solicitante" e o botao "Conversa" por
   avaliador em "Respostas dos Avaliadores") - nao era exclusivo do botao
   do avaliador, so foi ali que o usuario reparou. "display: inline-block"
   resolve: o elemento passa a formar sua propria caixa, que o transform
   pode girar de verdade (verificado via screenshot com o fix aplicado). */
[data-bs-toggle="collapse"] .chevron-collapse {
    display: inline-block;
    transition: transform 0.2s ease;
}
[data-bs-toggle="collapse"].collapsed .chevron-collapse {
    transform: rotate(180deg);
}

/* === Chat: botao de apagar mensagem (renderizado via chat-solicitacao.js) ===
   Antes vinha com opacity:0.3 inline (quase invisivel, sem contraste na
   bolha azul "de voce") - agora um estado padrao legivel + hover/focus a
   100% de opacidade. Tamanho um pouco maior que o texto ao redor (small)
   pra nao virar um alvo de clique minusculo. */
.btn-apagar-msg-chat {
    font-size: var(--saur-font-md);
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.btn-apagar-msg-chat:hover,
.btn-apagar-msg-chat:focus-visible {
    opacity: 1;
}
/* Na bolha "de voce" (bg-primary, fundo azul) o vermelho padrao some contra
   o azul - usa um vermelho claro (contraste alto sobre --rs-blue) que fica
   branco puro no hover/focus. */
.bg-primary .btn-apagar-msg-chat {
    color: #ffc9c9;
}
.bg-primary .btn-apagar-msg-chat:hover,
.bg-primary .btn-apagar-msg-chat:focus-visible {
    color: #fff;
}

/* === Acessibilidade: respeita 'reduzir movimento' do sistema ===
   Desliga a animacao infinita (pulse-ring) e neutraliza as entradas com fade. */
@media (prefers-reduced-motion: reduce) {
    .wizard-step.atual .wizard-circle,
    .timeline-item.atual .timeline-dot {
        animation: none;
    }
    .animate-fade-in,
    .animate-fade-in-d1,
    .animate-fade-in-d2,
    .animate-fade-in-d3,
    .wizard-content {
        animation-duration: .01ms;
        animation-iteration-count: 1;
    }
    * { transition-duration: .01ms !important; }
}

/* === Sub-passo de etapa (aba Envio e aba Finalizacao) ===
   Relatorio de clareza (2026-08-05), item 4.1: os sub-passos usavam borda
   lateral FIXA por posicao (1o sempre azul, 2o sempre verde),
   independentemente de estarem concluidos ou pendentes - o operador podia
   ver "verde" num passo que ainda nao tinha feito. Aqui a cor e SEMPRE
   funcao do estado (.subpasso-atual/.subpasso-ok/.subpasso-bloqueado),
   nunca da posicao. Reusa as variaveis --rs-* e o fragment
   layout :: status(ok) ja existentes - sem Bootstrap novo, sem JS. */
.subpasso            { border-left: 3px solid var(--rs-gray-300);
                       padding: .25rem 0 .25rem 1rem; margin-bottom: 1.5rem; }
.subpasso-atual      { border-left-color: var(--rs-blue); }
.subpasso-ok         { border-left-color: var(--rs-green); }
.subpasso-bloqueado  { border-left-color: var(--rs-gray-200); opacity: .65; }

.subpasso-head       { display: flex; align-items: center; gap: .5rem;
                       margin-bottom: .5rem; }
.subpasso-num        { width: 1.6rem; height: 1.6rem; border-radius: 50%;
                       display: inline-flex; align-items: center;
                       justify-content: center; font-weight: 700;
                       font-size: var(--saur-font-xs); background: var(--rs-gray-200);
                       color: var(--rs-gray-700); flex-shrink: 0; }
.subpasso-atual .subpasso-num { background: var(--rs-blue);  color: #fff; }
.subpasso-ok    .subpasso-num { background: var(--rs-green); color: #fff; }
.subpasso-head .status-mark   { margin-left: auto; }

/* Regra de seguranca dentro de um sub-passo: precisa de destaque proprio,
   distinto do alert generico (nao e um aviso qualquer, e a informacao mais
   importante do bloco - relatorio item 4.2/P5: "seguranca encurta e sobe,
   nunca sai"). */
.subpasso-regra {
    background: var(--rs-red-light);
    border-left: 3px solid var(--rs-red);
    color: var(--rs-red-dark);
    padding: .5rem .75rem;
    /* .25rem (4px): sem token proximo (sm=8px e o dobro) - raio pequeno de
       proposito para um bloco de destaque com borda lateral grossa (3px),
       um raio maior destoaria da borda; mantido literal. */
    border-radius: .25rem;
    margin-bottom: .5rem;
}

/* <details>/<summary> nativo para o contexto secundario dentro de um
   sub-passo (item 4.2/P5: "o porque e o como o sistema funciona descem
   para um <details> expansivel"). Nativo = acessivel por padrao, sem JS. */
.subpasso-ajuda summary { cursor: pointer; color: var(--rs-blue); }
.subpasso-ajuda summary:hover { text-decoration: underline; }

/* === Portal do Avaliador: eliminacao de style= inline (2026-08-05) === */

/* Mini grafico de barra empilhada dos votos pessoais (avaliador/lista.html).
   As larguras individuais de cada segmento continuam via th:style (flex
   dinamico calculado no servidor a partir da contagem de votos) - so a
   estrutura fixa e as cores dos 3 resultados viraram classe. */
.grafico-barra-votos {
    height: 8px;
    border-radius: var(--saur-radius-sm, 4px);
    overflow: hidden;
    background: var(--rs-gray-200);
    gap: var(--saur-space-1, 2px);
}
.grafico-barra-votos .barra-favoravel { background: var(--rs-green-bright); }
.grafico-barra-votos .barra-nao-favoravel { background: var(--rs-red); }
.grafico-barra-votos .barra-solicita-info { background: var(--rs-chart-blue); }

/* Bootstrap nao tem utilitaria de min-width:0 - necessaria para o
   text-truncate funcionar dentro de um flex item (avaliador/votar.html,
   nome do PDF anonimizado no cabecalho de cada material de analise). */
.min-w-0 { min-width: 0; }

/* Offset do painel de voto sticky (avaliador/votar.html), acompanhando a
   rolagem do PDF na coluna ao lado. */
.sticky-offset-top { top: var(--saur-space-4, 1rem); }

/* === Impressao ===
   Fluxo de trabalho com oficio e protocolo: imprimir a tela de um processo e
   comum. Ate 2026-08-04 nao havia nenhuma regra de impressao, entao saia tudo -
   menu, wizard, conversa, botoes, rodape escuro -, gastando tinta e empurrando
   o conteudo util para a 2a pagina.
   Os documentos OFICIAIS continuam sendo os PDFs gerados pelo sistema (oficio,
   relatorio final); isto e so para a impressao ocasional da tela. */
@media print {
    /* Cromo de navegacao e acoes nao fazem sentido no papel */
    .navbar, .footer-sgpur, .wizard-wrapper, .toast-container-sgpur,
    .modal, .btn, form, .pagination, .alert-dismissible .btn-close,
    #chatBox, .chat-box {
        display: none !important;
    }

    /* Fundo branco e texto preto: economiza tinta e melhora a leitura */
    body {
        background: #fff !important;
        color: #000;
        display: block;   /* desfaz o flex column da tela */
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #999 !important;
        break-inside: avoid;
    }

    .card-header {
        background: none !important;
        border-bottom: 1px solid #999;
    }

    /* Abas: no papel nao ha como clicar, entao mostra TODAS as etapas */
    .tab-content > .tab-pane {
        display: block !important;
        opacity: 1 !important;
        break-inside: avoid;
    }

    /* Badges e status precisam sobreviver a impressao em preto e branco */
    .badge, .status-mark {
        border: 1px solid #666 !important;
        color: #000 !important;
        background: none !important;
    }

    /* <details> fechado por padrao (item 4.2/4.4 do relatorio de clareza,
       2026-08-05): no papel nao ha como clicar em <summary>, entao o
       conteudo precisa aparecer sempre, mesmo colapsado na tela. */
    details, details > * { display: block !important; }
    details > summary { display: none !important; }

    a[href]::after { content: ""; }   /* nao poluir com a URL de cada link */
}

/* === Utilitarios extraidos de style= inline (lote UI operador/admin,
   2026-08-05: dashboard, listas e formularios do painel do operador,
   EXCETO processos/detalhe.html). Aditivo ao final do arquivo para nao
   colidir com o lote em paralelo que tambem mexe neste CSS. Usa os tokens
   --saur-font-*/--saur-space-*/--saur-radius-* definidos por esse outro
   lote quando o padrao repete em 2+ lugares; senao o valor ficou inline
   por ser genuinamente unico. */

/* Texto auxiliar bem pequeno (datas, legendas, "nao definido"), repetido
   varias vezes no Painel com o mesmo valor de font-size inline. */
.text-detail-xs { font-size: var(--saur-font-xs); }
.text-detail-sm { font-size: var(--saur-font-sm); }

/* Truncamento de celula de tabela com largura maxima fixa (Painel):
   cada coluna tem sua propria largura, mas o par text-truncate+max-width
   inline se repetia identico em varias celulas. */
.mw-9rem  { max-width: 9rem; }
.mw-10rem { max-width: 10rem; }
.mw-12rem { max-width: 12rem; }
.mw-14rem { max-width: 14rem; }
.mw-15rem { max-width: 15rem; }
.mw-16rem { max-width: 16rem; }
.mw-9-12rem { min-width: 9rem; max-width: 12rem; }

/* Legenda de cor da tabela do Painel (bolinha de 10px por situacao do
   parecer) - 4 ocorrencias identicas na estrutura, so a cor muda. */
.legend-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
}
.legend-dot-favoravel   { background: var(--rs-green); }
.legend-dot-desfavoravel{ background: var(--rs-red); }
/* Padronizacao de cores 2026-08-06: "Aguardando" = azul (nao mais dourado -
   ver docs/IDEIA-PADRONIZACAO-CORES-SOLICITA-INFO-AGUARDANDO-2026-08.md). */
.legend-dot-aguardando  { background: var(--rs-blue); }
.legend-dot-sem-medico  { background: var(--rs-gray-300); }

/* <select> compacto usado nos filtros de ano/avaliador dos relatorios
   (relatorios/anual.html, relatorios/avaliador.html) - mesmo valor
   220px repetido nas duas telas. */
.select-compact-220 { max-width: 220px; }

/* Bloco de texto que preserva quebras de linha digitadas pelo usuario
   (SQL de correcao de CHECK constraint no Painel). `.text-pre-wrap` (mesma
   funcao para texto livre em geral) foi consolidada numa unica definicao,
   ja com overflow-wrap, la no topo do arquivo - esta segunda declaracao
   idêntica e sem overflow-wrap foi removida em 2026-08-06 (dava a falsa
   impressao de que a regra de quebra de palavra longa nao se aplicava a
   ela, quando na verdade a cascata so pegava a ultima declaracao mesmo). */
.pre-wrap-break { white-space: pre-wrap; word-break: break-word; }

/* Cor de texto em cinza/azul do design system, para substituir
   style="color:var(--rs-gray-800)" etc. repetido em titulos do Painel. */
.text-rs-gray-800 { color: var(--rs-gray-800); }
.text-rs-gray-700 { color: var(--rs-gray-700); }
.text-rs-blue     { color: var(--rs-blue); }

/* Borda de destaque de 5px a esquerda de um alerta (usada no aviso tecnico
   de CHECK constraint desatualizada, so ADMIN, Painel). */
.alert-border-start-red { border-left: 5px solid var(--rs-red, #dc3545) !important; }

/* Transicao suave ao passar o mouse sobre uma linha de tabela hover
   (Painel) - mesmo token --rs-transition ja usado no restante do design
   system, so que aqui precisava ser aplicado por linha via th:each. */
.tr-transition { transition: var(--rs-transition); }

/* Tela de login/esqueci-senha: paleta de fundo em gradiente + cartao
   translucido, repetidos IDENTICOS inline em login.html e
   esqueci-senha.html - extraidos para nao divergir entre as duas telas. */
.auth-page-bg {
    background: linear-gradient(135deg, var(--rs-blue) 0%, var(--rs-blue-dark) 50%, var(--rs-blue-darker) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-page-wrap {
    max-width: 420px;
    padding: 2rem;
}
.auth-icon-badge {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(4px);
}
.auth-heading { letter-spacing: -.02em; }
.auth-subtitle { letter-spacing: .02em; }
.auth-card {
    border: none;
    border-radius: 16px;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, .95);
}
.text-tiny-70 { font-size: .7rem; }
.text-tiny-75 { font-size: .75rem; }

/* Icone grande de status na pagina de erro (error.html) - mesmo tamanho
   para os 4 casos, so a cor muda por faixa de status HTTP. */
.error-icon { font-size: 3rem; }
.text-rs-gold { color: var(--rs-gold); }
.text-rs-red  { color: var(--rs-red); }

.min-vh-60 { min-height: 60vh; }

/* ============================================================================
   === Redesign visual do Portal do Solicitante (2026-08-06) ===
   docs/RELATORIO-REDESIGN-VISUAL-SOLICITANTE-2026-08.md - plano faseado V1-V6.
   V1 (tokens) fica no bloco :root, no topo do arquivo. Daqui pra baixo: as
   classes de componente de cada fase seguinte, na ordem em que foram
   implementadas. ============================================================
   ============================================================================ */

/* === V2 - M5: estados vazios desenhados, com acao ===
   Mesma estrutura que indisponivel.html ja provava funcionar: icone grande
   dentro de um circulo tintado, titulo, uma linha de orientacao e a acao
   (quando existir). Substitui os 4 tratamentos divergentes (um <td> cinza
   sem icone, um <p> com icone fs-3, dois blocos so de texto) por um unico
   padrao. Nenhum asset novo - bootstrap-icons dentro de um token circular,
   o mesmo mecanismo que .stat-card .stat-icon ja usa. */
.estado-vazio {
    text-align: center;
    padding: 3rem 1.5rem;
}
.estado-vazio-icone {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background: var(--ev-bg, var(--rs-gray-100));
    color: var(--ev-ic, var(--rs-gray-500));
}
/* Variante tintada de azul - usada no estado vazio PRINCIPAL da tela (ex.:
   "voce ainda nao enviou nenhuma solicitacao"), quando ha uma acao primaria
   associada. A cinza (default) e para estados vazios secundarios/neutros
   (filtro sem resultado, sem documentos, sem mensagens). */
.estado-vazio-icone.ev-info { --ev-bg: var(--saur-surface-info); --ev-ic: var(--saur-on-info); }
.estado-vazio h3 {
    font-size: var(--saur-font-lg);
    font-weight: 600;
    margin-bottom: .35rem;
}
.estado-vazio p {
    color: var(--rs-gray-600);
    font-size: var(--saur-font-sm);
    max-width: 44ch;
    margin: 0 auto 1.1rem;
}

/* Variante compacta - estados vazios secundarios DENTRO de um cartao que ja
   tem outro conteudo ao redor (documentos/mensagens em detalhe.html), sem
   competir visualmente com o estado vazio principal da tela. */
.estado-vazio-compacto {
    padding: 1.25rem .5rem;
}
.estado-vazio-compacto .estado-vazio-icone {
    width: 56px;
    height: 56px;
    font-size: 1.35rem;
    margin-bottom: .6rem;
}
.estado-vazio-compacto h3 {
    font-size: var(--saur-font-md);
    margin-bottom: .2rem;
}

/* === V3 - M1(a): faixa de cabecalho de pagina, variante SUAVE ===
   Fundo --saur-surface-info (azul institucional bem claro) com texto na
   variante -on (azul solido, 7,08:1 de contraste - ver Anexo C do
   relatorio). Usada em lista.html e nova.html; detalhe.html ganha a
   variante SOLIDA na fase V4, junto com o cartao de resultado (M6) - ver
   .pagina-cabecalho-solida mais abaixo. O container real (largura maxima)
   fica a cargo de quem inclui o fragmento, via .container-portal/
   .container-narrow aplicada junto de .pc-inner - nao duplicar o valor de
   max-width aqui. */
.pagina-cabecalho {
    position: relative;
    overflow: hidden;
    background: var(--saur-surface-info);
    border-bottom: 1px solid rgba(var(--rs-blue-rgb), .18);
}
.pagina-cabecalho .pc-inner {
    margin: 0 auto;
    padding: 1.6rem 1rem 1.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}
/* Marca d'agua (decisao 5 do §10, aprovada): o SVG de layout::marcaSvg,
   grande e quase transparente, alinhado ao canto superior direito da
   faixa - nunca compete com o titulo (z-index 0, atras do .pc-inner). */
.pagina-cabecalho .pc-marca {
    position: absolute;
    right: -14px;
    top: -26px;
    width: 170px;
    height: 170px;
    opacity: .06;
    pointer-events: none;
    z-index: 0;
    color: var(--rs-blue);
}
/* O <svg> em si vem de layout::marcaSvg sem width/height (th:replace troca a
   tag inteira - um class="..." no elemento chamador seria descartado junto,
   por isso o dimensionamento/posicionamento vive no <div> acima, envolvendo
   um <svg> "puro"). Sem isso o SVG cai no tamanho replaced-element padrao do
   navegador (300x150, ou maior dentro de um flex container) - bug real visto
   na 1a captura de tela desta fase, uma gota solida cobrindo quase a tela
   inteira. */
.pagina-cabecalho .pc-marca svg {
    width: 100%;
    height: 100%;
    display: block;
}
.pagina-titulo {
    font-size: var(--saur-font-xl);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--saur-on-info);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    line-height: 1.15;
    margin: 0;
}
.pagina-contexto {
    font-size: var(--saur-font-sm);
    color: var(--rs-blue-dark);
    opacity: .85;
    margin-top: .2rem;
}

/* === V3 - M2: escala tipografica de verdade ===
   Titulo de secao saia de h6 text-muted (1rem cinza, igual ao corpo) para
   estes dois degraus - o rotulo (opcional, maiusculas pequenas) so entra
   em templates que precisarem dele (ex.: fase V4 de detalhe.html); o
   titulo sozinho ja resolve a maior parte do achado (§4.1 do relatorio). */
.secao-rotulo {
    font-size: var(--saur-font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--rs-gray-600);
    margin-bottom: .35rem;
}
.secao-titulo {
    font-size: var(--saur-font-lg);
    font-weight: 600;
    color: var(--rs-gray-800);
    margin-bottom: .6rem;
}

/* === V4 - M1(b): faixa de cabecalho de pagina, variante SOLIDA ===
   Usada no detalhe do Portal do Solicitante e na tela de voto do Portal do
   Avaliador - a faixa carrega o "chip de protocolo" e faz o papel de capa
   do processo (ver §5.5 do relatorio).

   BUG REAL CORRIGIDO (2026-08-11, relatado pelo dono do produto olhando
   /solicitante/{id} em producao: "o fundo esta igual do comeco da pagina"):
   ate entao esta faixa herdava LITERALMENTE o gradiente da navbar
   (linear-gradient(135deg, --rs-blue, --rs-blue-dark), identico ao
   .navbar-sgpur) - as duas emendavam num unico bloco azul do topo da tela
   ate o fim do cabecalho, sem nenhuma pista visual de onde o menu termina e
   o conteudo da pagina comeca (a borda dourada de 2px da navbar era a unica
   separacao, e some no meio da massa azul). Confirmado por captura de tela
   real em desktop e celular, nao por leitura do CSS.

   Correcao: MESMA paleta institucional (nenhuma cor nova - continua sendo o
   par --rs-blue/--rs-blue-dark), so clareada por uma camada branca
   translucida fixa por cima do MESMO gradiente. Isso cria um degrau tonal
   claro entre navbar e faixa mantendo a identidade e o texto branco: o tom
   resultante fica em ~5,6:1 de contraste com #fff na ponta mais clara
   (aprova em WCAG AA). O filete branco no topo (inset box-shadow) marca a
   emenda com a navbar mesmo em telas de brilho baixo. */
.pagina-cabecalho-solida {
    background:
        linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)),
        linear-gradient(135deg, var(--rs-blue) 0%, var(--rs-blue-dark) 100%);
    color: #fff;
    border-bottom: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.pagina-cabecalho-solida .pagina-titulo { color: #fff; }
.pagina-cabecalho-solida .pagina-contexto { color: rgba(255, 255, 255, .78); }
/* Opacidade maior que a variante suave (.06): sobre azul solido, .06 ficava
   quase invisivel - .10 e o mesmo valor calibrado no mockup. */
.pagina-cabecalho-solida .pc-marca { color: #fff; opacity: .10; }
.pagina-cabecalho-voltar {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    font-size: var(--saur-font-sm);
}
.pagina-cabecalho-voltar:hover,
.pagina-cabecalho-voltar:focus { color: #fff; }

/* Chip de protocolo: o numero do processo (a chave que a equipe usa ao
   telefone) promovido de <span class="text-muted"> discreto a destaque
   junto do titulo. Variante padrao (translucida) para uso sobre fundo
   solido/escuro (dentro de .pagina-cabecalho-solida); .claro para uso sobre
   fundo branco/cinza (ex.: contagem de documentos anexados). */
.chip-protocolo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    padding: .18rem .6rem;
    border-radius: var(--saur-radius-pill);
    border: 1px solid rgba(255, 255, 255, .28);
    vertical-align: middle;
}
.chip-protocolo.claro {
    background: var(--rs-gray-100);
    color: var(--rs-gray-700);
    border-color: var(--rs-gray-200);
}

/* === V4 - M3: superficie de apoio ===
   Sem sombra (elev-0) + fundo levemente afundado - para os cartoes que NAO
   sao o cartao de resultado (que segue sendo o unico elev-2 da tela): dados
   cadastrais, andamento/timeline, documentos vazios. Reduz a contagem de
   caixas brancas identicas sem remover nenhuma informacao (§6/M3 do
   relatorio). */
.superficie-apoio {
    background: var(--rs-gray-50);
    border: 1px solid var(--rs-gray-200);
    border-radius: var(--saur-radius-md);
    box-shadow: var(--saur-elev-0);
}

/* === V4 - M4(i) + M6: cartao de resultado ===
   Substitui a borda esquerda de 4px por superficie tintada em largura
   total, com icone em token circular de 64px. E o UNICO elemento por tela
   que usa --saur-elev-2 (M3) - o cartao que responde a pergunta que o
   solicitante veio buscar. .cartao-resultado-destaque (M6) escala o titulo
   para 1,75rem SO quando o resultado e final (Deferido/Indeferido) -
   "simetria estrutural com assimetria cromatica" (decisao 2 do §10,
   aprovada): mesmo layout para os dois, mudando so cor/icone. */
.cartao-resultado {
    border-radius: var(--saur-radius-lg);
    box-shadow: var(--saur-elev-2);
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.25rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: var(--r-bg);
    border: 1px solid var(--r-bd);
    color: var(--r-tx);
}
/* min-width:0 no filho de conteudo (.flex-grow-1 do template) - SEM isso o
   cartao estourava a tela em ate 282px num celular de 360px, e o solicitante
   precisava rolar de lado para ler a propria decisao (bug real reportado:
   "tinha texto saindo da tela", vistoria de 2026-08-11).

   Causa: item de flex nasce com `min-width: auto`, ou seja, NAO encolhe
   abaixo da largura min-content do proprio conteudo. As mensagens deste
   cartao carregam o e-mail institucional da equipe solicitante
   (ex. "nefrologia.transplante.renal@hospital...com.br"), um token sem
   espaco algum - a largura min-content virava ~519px fixos, independente da
   viewport, e o documento inteiro passava a ter 642px de largura. `flex-grow`
   nao ajuda aqui: ele so distribui sobra, nunca autoriza encolhimento.
   O `overflow-wrap: anywhere` abaixo e o par obrigatorio do min-width:0 -
   um sem o outro nao resolve (o primeiro permite encolher, o segundo permite
   quebrar o token dentro do espaco ja encolhido). Mesmo remedio que
   .text-pre-wrap ja aplica na justificativa clinica. */
.cartao-resultado > *:not(.cartao-resultado-icone) {
    min-width: 0;
}
.cartao-resultado h2,
.cartao-resultado p,
.cartao-resultado-detalhe {
    overflow-wrap: anywhere;
}
/* Rotulo longo ("Baixar comprovante de inserção no SNT") num btn-lg nao pode
   forcar a largura do cartao: sem isso o proprio botao media 446px numa tela
   de 360px. */
.cartao-resultado .btn {
    white-space: normal;
}
.cartao-resultado-icone {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: rgba(255, 255, 255, .75);
    color: var(--r-tx);
}
.cartao-resultado h2 {
    font-size: var(--saur-font-lg);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    margin-bottom: .5rem;
    color: var(--r-tx);
}
.cartao-resultado p { margin-bottom: .75rem; }
.cartao-resultado p:last-child { margin-bottom: 0; }
.cartao-resultado-detalhe {
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--r-bd);
    border-radius: var(--saur-radius-sm);
    padding: .7rem .85rem;
    font-size: .9rem;
    margin-bottom: .9rem;
    /* O detalhe carrega texto escrito por gente (motivo do indeferimento,
       observacoes da triagem e o pedido de informacao complementar do
       avaliador, que pode vir numerado quando ha mais de um) - as quebras
       de linha do autor precisam sobreviver, como ja acontece no card de
       Respostas do operador. */
    white-space: pre-wrap;
}
.cartao-resultado-destaque h2 { font-size: var(--saur-font-xl); }

/* Variantes de cor - texto SEMPRE na variante -dark/-on (Anexo C do
   relatorio: --rs-green sobre --rs-green-light da 4,11:1 e reprova WCAG AA;
   --rs-gold sobre --rs-gold-light da 1,85:1 e reprova gravemente). */
.r-ok        { --r-bg: var(--saur-surface-ok);        --r-bd: rgba(45, 133, 70, .32);       --r-tx: var(--saur-on-ok); }
.r-danger    { --r-bg: var(--saur-surface-danger);    --r-bd: rgba(198, 40, 40, .28);       --r-tx: var(--saur-on-danger); }
.r-attention { --r-bg: var(--saur-surface-attention); --r-bd: var(--rs-gold);               --r-tx: var(--saur-on-attention); }
.r-info      { --r-bg: var(--saur-surface-info);      --r-bd: rgba(var(--rs-blue-rgb), .3); --r-tx: var(--saur-on-info); }
.r-neutral   { --r-bg: var(--rs-gray-100);            --r-bd: var(--rs-gray-300);           --r-tx: var(--rs-gray-700); }

/* Botao de download do cartao de resultado (comprovante SNT / oficio) -
   variante -dark da cor, mesma regra de contraste das superficies acima. */
.btn-resultado-ok {
    background: var(--rs-green-dark);
    border-color: var(--rs-green-dark);
    color: #fff;
}
.btn-resultado-ok:hover,
.btn-resultado-ok:focus { background: var(--rs-green-dark); color: #fff; filter: brightness(1.1); }
.btn-resultado-danger {
    background: var(--rs-red-dark);
    border-color: var(--rs-red-dark);
    color: #fff;
}
.btn-resultado-danger:hover,
.btn-resultado-danger:focus { background: var(--rs-red-dark); color: #fff; filter: brightness(1.1); }
/* Completa a familia acima para a superficie .r-attention, usada pelo cartao
   de chamada do Portal do Avaliador ("voce tem N pareceres pendentes").
   btn-warning do Bootstrap (fundo --rs-gold puro) sobre --rs-gold-light da
   praticamente o mesmo matiz do proprio cartao e some; a variante -dark e a
   mesma regra de contraste do Anexo C do relatorio de redesign. */
.btn-resultado-attention {
    background: var(--rs-gold-dark);
    border-color: var(--rs-gold-dark);
    color: #fff;
}
.btn-resultado-attention:hover,
.btn-resultado-attention:focus { background: var(--rs-gold-dark); color: #fff; filter: brightness(1.15); }

/* === V5 - M4(ii) + M3: faixa de resumo (lista.html) === */
/* O numero do card de resumo (1.75rem) competia com --saur-font-xl do
   .pagina-titulo (mesmo tamanho do nome da tela). Escopo restrito a
   .stat-card-portal (usada só no Portal do Solicitante) - não mexe no
   .stat-card genérico compartilhado com o Painel/outras telas do operador
   (decisão 6 do §10, aprovada: mudança restrita ao Portal do Solicitante
   por ora). */
.stat-card-portal .stat-number { font-size: 1.5rem; }

/* Utilitário genérico de elevação (M3): usado no ÚNICO cartão que "importa"
   quando ele é a única coisa na tela (o card de estado vazio de
   lista.html, quando o solicitante ainda não tem nenhuma solicitação). */
.elev-2 { box-shadow: var(--saur-elev-2); }

/* === V6 - zona de upload (nova.html) ===
   So CSS ao redor do <input type="file"> que ja existia - o input real
   continua visivel/focavel/nativo (nunca escondido atras de um <label>
   proxy, que quebraria tabulacao e leitor de tela). Fundo afundado +
   borda tracejada + icone, para a area de anexar exames parar de parecer
   um campo de texto qualquer (era um <input class="form-control"> do
   mesmo tamanho/aparencia do campo "Nome do paciente"). */
.zona-upload {
    background: var(--saur-surface-sunken);
    border: 2px dashed var(--rs-gray-300);
    border-radius: var(--saur-radius-md);
    padding: 1.25rem;
    text-align: center;
}
.zona-upload-icone {
    display: block;
    font-size: 1.75rem;
    color: var(--rs-blue);
    margin-bottom: .4rem;
}
.zona-upload .form-control {
    max-width: 420px;
    margin: 0 auto;
}
.zona-upload .form-text { max-width: 420px; margin: .35rem auto 0; }

/* ============================================================================
   === Responsividade do Portal do Solicitante (vistoria de 2026-08-11) ===
   docs/RELATORIO-RESPONSIVIDADE-CORES-SOLICITANTE-2026-08.md

   O bloco de redesign V1-V6 acima foi escrito SEM nenhuma media query: todo
   espacamento, tamanho de icone e escala tipografica era fixo, calibrado no
   mockup de desktop. Em celular isso se manifestava como cartoes com pouca
   area util (o icone de 64px + gap de 1.25rem comem 84px de uma tela de
   390px), faixa de cabecalho alta demais e a marca d'agua de 170px por cima
   do titulo. As regras abaixo sao a unica camada responsiva desses
   componentes - nao ha equivalente no Bootstrap, porque sao classes proprias.

   Os cortes seguem os breakpoints padrao do Bootstrap e usam sempre `.98`
   para nunca coincidir com um `min-width` existente no mesmo pixel (armadilha
   real ja documentada no CLAUDE.md: `max-width: 768px` e `min-width: 768px`
   valendo ao mesmo tempo em exatamente 768px). ==============================
   ============================================================================ */

/* --- Tablet retrato e abaixo (< 768px) --- */
@media (max-width: 767.98px) {
    .pagina-cabecalho .pc-inner {
        padding: 1.25rem 1rem 1.15rem;
    }
    /* A marca d'agua e decorativa (aria-hidden): em tela estreita ela ocupava
       quase metade da largura atras do titulo. Fica menor e mais para fora. */
    .pagina-cabecalho .pc-marca {
        width: 120px;
        height: 120px;
        top: -18px;
        right: -20px;
    }
    .estado-vazio {
        padding: 2.25rem 1rem;
    }
    .cartao-resultado {
        padding: 1.15rem 1.15rem;
        gap: 1rem;
    }
}

/* --- Celular (< 576px) --- */
@media (max-width: 575.98px) {
    /* O cartao de resultado passa a EMPILHAR: em 360px, icone (64px) + gap
       (20px) sobravam ~250px de coluna de texto, deixando ate o titulo
       "Devolvida para correcao" quebrado em duas linhas. Empilhado, o texto
       usa a largura inteira e o icone continua sendo a primeira coisa que o
       olho encontra. */
    .cartao-resultado {
        flex-direction: column;
        gap: .85rem;
        padding: 1.1rem 1rem;
        border-radius: var(--saur-radius-md);
    }
    .cartao-resultado-icone {
        width: 52px;
        height: 52px;
        font-size: 1.6rem;
    }
    /* 1.75rem (--saur-font-xl) num container de ~330px quebrava o titulo do
       resultado em 3 linhas. */
    .cartao-resultado-destaque h2 {
        font-size: 1.35rem;
    }
    .cartao-resultado h2 {
        font-size: 1.15rem;
    }
    /* Acao principal do cartao (baixar comprovante/oficio, enviar informacao
       complementar, nova solicitacao) ocupa a largura toda - alvo de toque
       confortavel e sem competir por espaco horizontal. */
    .cartao-resultado .btn {
        width: 100%;
    }
    .pagina-titulo {
        font-size: 1.35rem;
    }
    .pagina-cabecalho .pc-inner {
        padding: 1.1rem .9rem 1rem;
    }
    .pagina-cabecalho .pc-marca {
        width: 96px;
        height: 96px;
        top: -12px;
        right: -16px;
    }
    .estado-vazio {
        padding: 1.75rem .9rem;
    }
    .estado-vazio-icone {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    .secao-titulo {
        font-size: 1.1rem;
    }
    .zona-upload {
        padding: 1rem .75rem;
    }
}

/* Utilitario que o Bootstrap 5 NAO traz por padrao: as utilities de largura
   (.w-100/.w-auto) nao tem variante responsiva gerada, entao "w-sm-auto" nao
   existiria e o w-100 valeria em TODAS as larguras. Usado no botao "Enviar
   solicitação" (nova.html), que deve ocupar a largura toda so no celular. */
@media (min-width: 576px) {
    .w-sm-auto {
        width: auto !important;
    }
}