/* RJ Saúde — shell visual compartilhado (barra superior + menu lateral + componentes).
   Usado por todas as telas internas pra uma identidade única e profissional. */
:root{
  --verde:#0f9d6e;--verde-esc:#0a7a55;--verde-claro:#e8f7f1;--verde-claro2:#dbf0e6;
  --tinta:#16271f;--cinza:#5b6b64;--borda:#e5ede9;--bg:#f5f8f7;--branco:#fff;
  --amarelo-bg:#fdf0d8;--amarelo:#8a5b00;--vermelho-bg:#fbe9e9;--vermelho:#b3271f;--azul:#185fa5;
  --topo-h:56px;--rail-w:76px;
  /* ===== LARGURA DA PÁGINA — uma medida só para a plataforma inteira (13/08) =====
     Cada tela vinha escolhendo a sua (980, 1000, 1040, 1080…), então as margens não batiam de
     uma tela para outra e sobrava uma faixa vazia enorme nos monitores largos. A direção viu:
     "olha o visual, margens, espaços — nosso site é sério, profissional". Agora é esta:
     aproveita o monitor, com teto para a linha de texto não ficar longa demais de ler. */
  --rj-larg:min(1560px,96vw);

  /* ===== Camada 6 do padrão: COR DE MARCA ≠ COR DE SIGNIFICADO =====
     `--verde` acima é a cor da RJ Saúde: barra do topo, botão de ação, menu ativo. Ela aparece
     em tela o tempo todo e NÃO quer dizer nada sobre o estado de um exame.
     As cores abaixo são as de SIGNIFICADO. A regra da direção, que o motor já aplica em
     src/entrega.js, aqui vira visual:

        VERDE DE ESTADO = exclusivo de CONFIRMADO NO DESTINO. Nada mais.

     Era exatamente isso que fazia "enviado" parecer "entregue": o mesmo verde servia de marca,
     de botão e de selo de ok. Por isso o verde de estado é um tom PRÓPRIO, mais escuro que o
     da marca — para não se confundir com o botão que está do lado. */
  --st-confirmado:#0a7a55;   --st-confirmado-bg:#dbf0e6;   /* SÓ com evidência no destino */
  --st-enviado:#185fa5;      --st-enviado-bg:#e6f0fa;      /* saiu daqui; ninguém confirmou lá */
  --st-andamento:#185fa5;    --st-andamento-bg:#e6f0fa;    /* identificado, realizado, liberado */
  --st-espera:#8a5b00;       --st-espera-bg:#fdf0d8;       /* em laudo, bloqueado — precisa de alguém */
  --st-erro:#b3271f;         --st-erro-bg:#fbe9e9;         /* falhou, com motivo acionável */
  --st-neutro:#5b6b64;       --st-neutro-bg:#eef2f0;       /* recebido, cancelado, duplicado */
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,system-ui,Arial,sans-serif;background:var(--bg);color:var(--tinta);-webkit-font-smoothing:antialiased}

/* ===== Barra superior ===== */
.rj-top{position:sticky;top:0;z-index:40;height:var(--topo-h);background:var(--verde);display:flex;align-items:center;gap:14px;padding:0 16px;color:#fff}
.rj-top .brand{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:600;white-space:nowrap}
.rj-top .brand .mk{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden}
.rj-top .brand .mk img{width:100%;height:100%;object-fit:cover}
.rj-top .brand .chip{font-size:10px;background:rgba(255,255,255,.18);padding:3px 9px;border-radius:20px;font-weight:600;letter-spacing:.02em}
.rj-search{flex:1;max-width:380px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border-radius:9px;padding:0 11px;height:36px}
.rj-search i{font-size:17px;color:#eafaf3}
.rj-search input{flex:1;border:0;background:transparent;color:#fff;font-size:13.5px;outline:none;height:100%;min-width:0}
.rj-search input::placeholder{color:#d3f0e5}
.rj-top .right{margin-left:auto;display:flex;align-items:center;gap:15px}
.rj-top .ic{font-size:20px;color:#fff;cursor:pointer;background:none;border:0;display:flex;align-items:center}
.rj-user{display:flex;align-items:center;gap:9px;cursor:pointer}
.rj-user .av{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--verde-esc);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 30px}
.rj-user .nm{font-size:13px;line-height:1.15;white-space:nowrap}
.rj-user .nm small{display:block;opacity:.88;font-size:11px;text-transform:capitalize}

/* ===== Corpo + menu lateral ===== */
.rj-body{display:flex;align-items:flex-start}
.rj-side{width:var(--rail-w);flex:0 0 var(--rail-w);background:#fff;border-right:1px solid var(--borda);padding:10px 0;display:flex;flex-direction:column;gap:2px;position:sticky;top:var(--topo-h);height:calc(100vh - var(--topo-h));overflow-y:auto}
.rj-nav{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px;margin:0 8px;border-radius:11px;color:var(--cinza);text-decoration:none;font-size:10px;text-align:center;line-height:1.15;cursor:pointer;transition:background .12s}
.rj-nav i{font-size:21px}
.rj-nav:hover{background:var(--verde-claro)}
.rj-nav.on{background:var(--verde-claro);color:var(--verde-esc);font-weight:600}
.rj-main{flex:1;min-width:0;padding:20px 22px 64px}
/* O conteúdo de QUALQUER tela nasce com a mesma largura e as mesmas margens: o olho percebe
   a diferença quando um cartão termina 60px antes do outro na tela ao lado. */
.rj-main > *{max-width:var(--rj-larg);margin-left:auto;margin-right:auto}
.rj-pagehead{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.rj-pagehead h1{font-size:20px;font-weight:600;margin:0}
.rj-pagehead .sub{font-size:13px;color:var(--cinza)}

/* ===== Componentes ===== */
.rj-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:18px}
.rj-kpi{background:#fff;border:1px solid var(--borda);border-radius:13px;padding:13px 15px}
.rj-kpi .lbl{font-size:12.5px;color:var(--cinza);margin-bottom:5px}
.rj-kpi .val{font-size:25px;font-weight:600;color:var(--tinta)}
.rj-kpi .val.verde{color:var(--verde)}.rj-kpi .val.amarelo{color:var(--amarelo)}
.rj-card{background:#fff;border:1px solid var(--borda);border-radius:14px;overflow:auto}
.rj-bar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:16px}
.rj-bar label{font-size:12px;font-weight:600;color:#33453d;display:block;margin-bottom:4px}
.rj-bar input,.rj-bar select{padding:9px 11px;border:1px solid var(--borda);border-radius:10px;font-size:14px;outline:none;background:#fff}
.rj-btn{background:var(--verde);color:#fff;border:none;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.rj-btn:hover{background:var(--verde-esc)}
.rj-btn.ghost{background:#fff;color:var(--verde-esc);border:1px solid #d4e6db;box-shadow:inset 3px 0 0 0 var(--verde)}

/* ===== Botões — PADRÃO ÚNICO da plataforma (design system) =====
   Primário = verde cheio. Secundário (.b2/.b.s) = branquinho com faixa de cor na pontinha.
   Definido aqui p/ valer em TODAS as telas; as páginas não redefinem mais .b/.b2. */
.b{background:var(--verde);color:#fff;border:none;border-radius:10px;padding:9px 15px;font-weight:600;font-size:13.5px;cursor:pointer;line-height:1.3;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;vertical-align:middle;transition:background .12s}
.b:hover{background:var(--verde-esc)}
.b:disabled{opacity:.5;cursor:not-allowed}
.b.g{padding:11px 19px;font-size:15px}   /* ação principal (maior) */
.b.sm{padding:6px 11px;font-size:12px}    /* compacto */
/* secundário: branco + pontinha de cor (verde padrão) */
.b.s,.b.b2,.b2{background:#fff;color:var(--verde-esc);border:1px solid #d4e6db;box-shadow:inset 3px 0 0 0 var(--verde)}
.b.s:hover,.b.b2:hover,.b2:hover{background:var(--verde-claro)}
.b.s.azul,.b.b2.azul,.b2.azul{color:var(--azul);border-color:#c7d7ef;box-shadow:inset 3px 0 0 0 var(--azul)}
.b.s.vermelho,.b.b2.vermelho,.b2.vermelho{color:var(--vermelho);border-color:#f0cdc9;box-shadow:inset 3px 0 0 0 #c0392b}
.b.s.ambar,.b.b2.ambar,.b2.ambar{color:var(--amarelo);border-color:#f0dca8;box-shadow:inset 3px 0 0 0 #b8730a}
table.rj-tb{width:100%;border-collapse:collapse;font-size:13.5px}
table.rj-tb th{text-align:left;color:var(--cinza);font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:11px 14px;border-bottom:1px solid var(--borda);white-space:nowrap;background:#fafcfb}
table.rj-tb td{padding:11px 14px;border-bottom:1px solid #f0f4f2;vertical-align:top}
table.rj-tb tr:last-child td{border-bottom:none}
table.rj-tb tbody tr:hover td,table.rj-tb tr:hover td{background:#f7fbf9}
.rj-pac{font-weight:600}.rj-cpf{font-size:11px;color:var(--cinza)}
.rj-pill{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;display:inline-block}
.rj-pill.apto{background:var(--verde-claro);color:var(--verde-esc)}
.rj-pill.pend{background:var(--amarelo-bg);color:var(--amarelo)}
.rj-pill.inapto{background:var(--vermelho-bg);color:var(--vermelho)}
.rj-pill.out{background:#eef1f0;color:var(--cinza)}
.rj-vazio{text-align:center;color:var(--cinza);padding:34px;font-size:14px}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#16271f;color:#fff;padding:11px 18px;border-radius:11px;font-size:13.5px;opacity:0;pointer-events:none;transition:.25s;z-index:200;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:640px){
  :root{--rail-w:60px}
  .rj-nav{font-size:0;gap:0}.rj-nav i{font-size:22px}
  .rj-user .nm{display:none}
  .rj-main{padding:16px 13px 60px}
  .rj-top .brand .chip{display:none}
}

/* ===== Menu lateral CONTEXTUAL (itens/funções da própria tela) ===== */
.rj-side.ctx{width:176px;flex:0 0 176px;padding:14px 10px;gap:1px}
.rj-side .cap{font-size:10.5px;color:#8a9b93;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px 9px;font-weight:600}
.rj-navc{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--cinza);text-decoration:none;font-size:13px;cursor:pointer;line-height:1.2;transition:background .12s}
.rj-navc i{font-size:19px;flex:0 0 20px;text-align:center}
.rj-navc:hover{background:var(--verde-claro)}
.rj-navc.on{background:var(--verde-claro);color:var(--verde-esc);font-weight:600}
@media(max-width:760px){
  .rj-side.ctx{width:58px;flex:0 0 58px;padding:12px 6px}
  .rj-side .cap{display:none}
  .rj-navc{justify-content:center;padding:10px 0}
  .rj-navc span{display:none}
}

/* ===== Camada 5 do padrão: VOCABULÁRIO ÚNICO DE STATUS =====
   Uma palavra e uma cor por estado, iguais em toda a plataforma. Os nomes são os mesmos do
   ciclo oficial em src/entrega.js — motor e tela passam a falar a mesma língua.

   Uso:  <span class="rj-st confirmado">Confirmado no portal</span>
         <span class="rj-st erro" title="motivo acionável">Erro</span>

   REGRA INEGOCIÁVEL: .confirmado só entra quando há evidência no destino. Se o código não
   sabe se chegou, o estado é `enviado` — nunca `confirmado`. */
.rj-st{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap;
  background:var(--st-neutro-bg);color:var(--st-neutro)}
.rj-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}

.rj-st.confirmado{background:var(--st-confirmado-bg);color:var(--st-confirmado)}
.rj-st.enviado   {background:var(--st-enviado-bg);color:var(--st-enviado)}
.rj-st.identificado,.rj-st.realizado,.rj-st.liberado{background:var(--st-andamento-bg);color:var(--st-andamento)}
.rj-st.em_laudo,.rj-st.bloqueado,.rj-st.pendente{background:var(--st-espera-bg);color:var(--st-espera)}
.rj-st.erro      {background:var(--st-erro-bg);color:var(--st-erro)}
.rj-st.recebido,.rj-st.cancelado,.rj-st.duplicado,.rj-st.incerto{background:var(--st-neutro-bg);color:var(--st-neutro)}

/* Motivo acionável andando junto do estado: o Termo proíbe "erro" sem dizer o que fazer. */
.rj-st-motivo{display:block;font-size:11.5px;color:var(--cinza);margin-top:3px;max-width:52ch}

/* ===== Camada 3 do padrão: TIPOGRAFIA — cinco tamanhos, e só =====
   Título de página · título de seção · corpo/tabela · rótulo · número. */
.rj-t-pagina {font-size:20px;font-weight:700;line-height:1.25;color:var(--tinta)}
.rj-t-secao  {font-size:15px;font-weight:600;line-height:1.35;color:var(--tinta)}
.rj-t-corpo  {font-size:14px;font-weight:400;line-height:1.5}
.rj-t-rotulo {font-size:12px;font-weight:600;line-height:1.4;color:var(--cinza);
  text-transform:uppercase;letter-spacing:.03em}
/* Número que se alinha em coluna usa espaçamento tabular: sem isto a lista longa "dança"
   na vertical porque o "1" é mais estreito que o "8". */
.rj-t-numero,.rj-num,td.num,th.num{font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;text-align:right}

/* ═══════════════════════════════════════════════════════════════════════════
   PADRÃO "DOCUMENTO RJ" — pedido da direção em 13/08/2026 ("quero esse padrão
   de estrutura do site"), a partir das propostas em HTML que ela aprovou.
   São 7 peças. Qualquer tela pode usar; nada aqui altera componente existente.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · SEÇÃO NUMERADA — "3 · Visão geral", com o filete curto embaixo.
   O número sai de um contador do CSS: seções escondidas não deixam buraco na
   numeração, e ninguém precisa renumerar na mão ao inserir uma no meio. */
.rj-doc{counter-reset:rjsec}
.rj-sec{counter-increment:rjsec;font-size:19px;font-weight:700;color:var(--verde-esc,#0a7a55);
  margin:30px 0 14px;padding-bottom:7px;position:relative;line-height:1.3}
.rj-sec::before{content:counter(rjsec) " · "}
.rj-sec::after{content:"";position:absolute;left:0;bottom:0;width:118px;height:3px;
  background:#c8922f;border-radius:2px}
.rj-sec.verde::after{background:var(--verde,#0f9d6e)}
.rj-sec + .rj-sub{margin:-8px 0 14px;font-size:13.5px;color:var(--cinza,#6b7d75);max-width:80ch}

/* 2 · CARTÃO DE DOCUMENTO — borda colorida no topo, selo, título e corpo. */
.rj-dcard{background:#fff;border:1px solid var(--borda,#e2ece7);border-radius:14px;
  padding:16px 18px;border-top:4px solid var(--verde,#0f9d6e);box-shadow:0 2px 10px rgba(0,0,0,.04)}
.rj-dcard.ambar{border-top-color:#c8922f}
.rj-dcard.vermelho{border-top-color:#c0392b}
.rj-dcard > h4{margin:8px 0 8px;font-size:15px;font-weight:700;color:var(--verde-esc,#0a7a55)}
.rj-dcard ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.6;color:#2a3a32}
.rj-dcard li{margin-bottom:5px}
/* selo do cartão (FASE 1 — …) */
.rj-selo{display:inline-block;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:20px;
  background:var(--verde-claro,#e7f6ec);color:var(--verde-esc,#0a7a55)}
.rj-selo.ambar{background:#fdf3e0;color:#8a5a12}
.rj-selo.vermelho{background:#fbeaea;color:#a4282a}
/* linha de apoio, cinza e menor — "Pronto quando: …" */
.rj-quando{font-size:12px;color:var(--cinza,#93a29b);margin-top:8px}

/* 3 · ITEM COM SELO À ESQUERDA — as fases F0…F5 do roadmap. */
.rj-fase{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--borda,#e2ece7);
  border-radius:14px;padding:14px 16px;margin-bottom:10px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.rj-fase .cod{flex:none;width:54px;height:54px;border-radius:12px;display:grid;place-items:center;
  background:var(--verde-esc,#0a7a55);color:#fff;font-weight:800;font-size:15px}
.rj-fase.futuro .cod{background:#c8922f}
.rj-fase .txt{min-width:0}
.rj-fase .txt b{display:block;font-size:15px;color:var(--verde-esc,#0a7a55);margin-bottom:3px}
.rj-fase .txt p{margin:0;font-size:13.5px;color:#2a3a32;line-height:1.55}

/* 4 · PASSO A PASSO — círculos numerados em fila (1 Chegada → 7 Entrega). */
.rj-passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.rj-passo{background:#fff;border:1px solid var(--borda,#e2ece7);border-radius:12px;padding:14px 10px;text-align:center}
.rj-passo .n{width:30px;height:30px;border-radius:50%;background:var(--verde,#0f9d6e);color:#fff;
  font-weight:700;font-size:13.5px;display:grid;place-items:center;margin:0 auto 8px}
.rj-passo b{display:block;font-size:13.5px;color:var(--verde-esc,#0a7a55);margin-bottom:3px}
.rj-passo span{font-size:12px;color:var(--cinza,#6b7d75);line-height:1.45}

/* 5 · CAMADA — caixa com legenda em maiúsculas e as peças dentro. */
.rj-camada{background:#fff;border:1px solid var(--borda,#e2ece7);border-radius:14px;padding:14px 16px;margin-bottom:8px}
.rj-camada > .cap{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cinza,#6b7d75);margin-bottom:10px}
.rj-camada .pecas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.rj-peca{border:1px solid #cfe3d6;border-radius:10px;padding:10px 12px;text-align:center;background:#fff}
.rj-peca b{display:block;font-size:13px;color:var(--verde-esc,#0a7a55)}
.rj-peca span{font-size:11.5px;color:var(--cinza,#6b7d75)}
.rj-peca.cheia{background:var(--verde-esc,#0a7a55);border-color:var(--verde-esc,#0a7a55)}
.rj-peca.cheia b,.rj-peca.cheia span{color:#fff}
.rj-peca.futuro{border-style:dashed;color:var(--cinza,#93a29b)}
.rj-seta{text-align:center;font-size:15px;color:var(--verde,#0f9d6e);font-weight:700;margin:2px 0 6px}

/* 6 · RISCO — cartão com o filete vermelho na lateral + linha de mitigação. */
.rj-risco{background:#fff;border:1px solid var(--borda,#e2ece7);border-left:4px solid #c0392b;
  border-radius:10px;padding:11px 14px;margin-bottom:8px}
.rj-risco b{display:block;font-size:13.5px;color:#a4282a;margin-bottom:2px}
.rj-risco span{font-size:12.5px;color:#5b6b64}

/* 7 · JANELA — maquete de tela: barra verde com o ponto + corpo em campos. */
.rj-janela{background:#fff;border:1px solid var(--borda,#e2ece7);border-radius:14px;overflow:hidden}
.rj-janela > .barra{background:var(--verde-esc,#0a7a55);color:#fff;font-size:13.5px;font-weight:600;
  padding:10px 14px;display:flex;align-items:center;gap:8px}
.rj-janela > .barra::before{content:"";width:9px;height:9px;border-radius:50%;background:#e8b84b;flex:none}
.rj-janela > .corpo{padding:14px}
.rj-campo{border:1px solid var(--borda,#e2ece7);border-radius:9px;padding:8px 11px}
.rj-campo .r{font-size:11.5px;color:var(--cinza,#6b7d75);display:block}
.rj-campo .v{font-size:14px;font-weight:700;color:#12241d}
.rj-alerta-pill{display:inline-block;background:#fbeaea;color:#a4282a;font-size:12.5px;font-weight:600;
  padding:6px 13px;border-radius:20px}
.rj-alerta-pill.ok{background:var(--verde-claro,#e7f6ec);color:var(--verde-esc,#0a7a55)}