/* ============================================================================
   PORTAL DO CLIENTE — folha de estilo única

   Antes disto, cada página do portal (portal.php, portalresultados.php,
   portalrequisicoes.php, exameevolucao.php) trazia seu próprio bloco <style>
   com uma cópia dos mesmos tokens — o #f2f5f8 do fundo estava repetido em
   quatro arquivos. Era por isso que nada ficava uniforme: não existia um lugar
   só que definisse o visual, então cada ajuste divergia.

   Aqui ficam os tokens e os componentes. As páginas não redefinem cor,
   espaçamento nem raio — só compõem.

   A cor de destaque (--pt-marca) é injetada pelo portal_header.php a partir de
   $_SESSION['app_color_rgb'] — a chave é essa, e vem da SUÍTE (tabela `app`),
   não da empresa. O CLAUDE.md cita 'app_color_hex', que não existe. Nunca
   escreva cor de marca fixa neste arquivo.
   ========================================================================= */

:root {
    --pt-bg:        #f2f5f8;   /* fundo da página (era repetido em 4 arquivos) */
    --pt-surface:   #ffffff;
    --pt-linha:     #e7ecf1;
    --pt-linha-sut: #f1f5f9;
    --pt-texto:     #34495e;
    --pt-suave:     #98a4b3;
    --pt-titulo:    #0f172a;

    --pt-ok-bg:     #ecfdf5;   --pt-ok-borda:   #d1fae5;   --pt-ok-txt:   #047857;
    --pt-aviso-bg:  #fff7ed;   --pt-aviso-borda:#fed7aa;   --pt-aviso-txt:#9a3412;
    --pt-perigo-bg: #fdf3f4;   --pt-perigo-borda:#fecdd3;  --pt-perigo-txt:#b91c1c;

    --pt-raio:      20px;  /* cartões, painéis e os cartões grandes do hub — mesmo
                              arredondamento da caixa de login */
    /* Botões e campos ficam menores de propósito: 20px num controle de 36px de altura
       vira cápsula e some a distinção entre botão e chip. */
    --pt-raio-sm:   7px;
    --pt-gap:       16px;
    --pt-marca:     #26c281;   /* sobrescrito pelo header com a cor da empresa */
}

body.portal {
    background: var(--pt-bg);
    color: var(--pt-texto);
    font-family: "Open Sans", system-ui, -apple-system, Arial, sans-serif;
    font-size: 14px;
    margin: 0;
}

/* ── Cabeçalho ─────────────────────────────────────────────────────────── */

.pt-topo      { background: var(--pt-surface); border-bottom: 1px solid var(--pt-linha); padding: 12px 0; }
.pt-topo-in   { max-width: 1060px; margin: 0 auto; padding: 0 15px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pt-topo img  { max-height: 38px; max-width: 170px; }
.pt-marca-txt { font-weight: 600; letter-spacing: .5px; color: var(--pt-titulo); }
.pt-quem      { margin-left: auto; font-size: 13px; color: var(--pt-suave); }
/* Selo do tipo, à esquerda do nome e na mesma linha. Cinza, e não verde: a pílula
   verde competia com os selos de estado dos laudos, que usam exatamente essa cor —
   duas coisas sem relação pintadas igual ensinam a ignorar a cor. */
.pt-tipo      { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px;
                background: #eef1f5; color: var(--pt-texto); border: 1px solid #e0e6ec;
                white-space: nowrap; flex-shrink: 0; }
/* Menu do usuário: o nome vira o gatilho, e as ações de conta ficam dentro dele.
   Antes o "Sair" ficava solto ao lado do nome e as outras ações moravam soltas na
   home — juntar tudo num lugar só evita procurar. */
.pt-menu      { position: relative; display: inline-block; }
/* Flex numa linha: selo, nome e seta lado a lado. O nome já vem cortado do servidor
   (PortalNomeCurto), então a largura é previsível e a seta não muda de lugar. */
.pt-menu-bt   { background: none; border: 0; padding: 4px 2px; cursor: pointer; color: inherit; font: inherit;
                display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.pt-menu-bt b { font-weight: 600; color: var(--pt-texto); }
.pt-menu-bt i { color: var(--pt-suave); font-size: 12px; }
/* max-width com viewport: o min-width de 210px sozinho estoura a tela em aparelho
   estreito, e o menu sairia cortado pela borda direita. */
.pt-menu-lista{ display: none; position: absolute; right: 0; top: 100%; margin-top: 8px;
                min-width: 210px; max-width: calc(100vw - 24px); z-index: 50;
                background: var(--pt-surface); border: 1px solid var(--pt-linha); border-radius: var(--pt-raio-sm);
                box-shadow: 0 4px 16px rgba(0,0,0,.12); overflow: hidden; text-align: left; }
.pt-menu.aberto .pt-menu-lista { display: block; }
.pt-menu-lista a { display: block; padding: 10px 14px; font-size: 13.5px; color: var(--pt-texto); text-decoration: none; }
.pt-menu-lista a:hover { background: var(--pt-bg); text-decoration: none; color: var(--pt-texto); }
.pt-menu-lista a i { width: 16px; color: var(--pt-suave); }
.pt-menu-lista .sep { border-top: 1px solid var(--pt-linha-sut); }
.pt-menu-lista a.sair:hover { color: var(--pt-perigo-txt); }
.pt-menu-lista a.sair:hover i { color: var(--pt-perigo-txt); }

/* Navegação: só aparece para quem tem mais de um destino (veterinário/clínica).
   O tutor navega pelo hub, não por menu. */
.pt-nav       { border-bottom: 1px solid var(--pt-linha); background: var(--pt-surface); }
.pt-nav-in    { max-width: 1060px; margin: 0 auto; padding: 0 15px; display: flex; gap: 4px; flex-wrap: wrap; }
.pt-nav a     { padding: 10px 14px; font-size: 13.5px; color: var(--pt-suave); text-decoration: none;
                border-bottom: 2px solid transparent; }
.pt-nav a:hover  { color: var(--pt-texto); text-decoration: none; }
.pt-nav a.ativo  { color: var(--pt-titulo); border-bottom-color: var(--pt-marca); }

/* ── Estrutura ─────────────────────────────────────────────────────────── */

.pt-wrap   { max-width: 1060px; margin: 0 auto; padding: 18px 15px 40px 15px; }
.pt-painel { background: var(--pt-surface); border: 1px solid var(--pt-linha); border-radius: var(--pt-raio); padding: var(--pt-gap); margin-bottom: var(--pt-gap); }
.pt-titulo { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--pt-suave); margin: 0 0 12px; }
.pt-vazio  { color: var(--pt-suave); font-size: 13.5px; padding: 18px 0; text-align: center; }

/* ── Cartões ───────────────────────────────────────────────────────────── */

.pt-card       { background: var(--pt-surface); border: 1px solid var(--pt-linha); border-radius: var(--pt-raio); padding: 12px 14px; margin-bottom: 10px; }
.pt-card.click { cursor: pointer; }
.pt-card.click:hover { border-color: var(--pt-marca); }
.pt-card.sel   { border-color: var(--pt-marca); box-shadow: inset 3px 0 0 0 var(--pt-marca); }
.pt-card-nome  { font-size: 16px; font-weight: 600; color: var(--pt-titulo); }
.pt-card-meta  { font-size: 12.5px; color: var(--pt-suave); margin-top: 2px; }
.pt-card-pe    { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--pt-linha-sut); font-size: 12.5px; }

/* ── Chips de exame ────────────────────────────────────────────────────── */

.pt-chip     { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px;
               font-size: 12px; margin: 0 5px 5px 0; border: 1px solid var(--pt-linha); background: var(--pt-surface); color: var(--pt-suave); }
.pt-chip.ok  { background: var(--pt-ok-bg); border-color: var(--pt-ok-borda); color: var(--pt-ok-txt); }

/* Prioridade não é "resolvido": é uma escolha. Por isso Normal selecionado fica
   neutro (escuro) e só Urgente pinta — verde aqui competiria com o verde de
   etapa concluída e o resumo perderia o sentido. */
.pt-chip.sel { background: #eef1f5; border-color: #dbe2ea; color: var(--pt-titulo); font-weight: 600; }
.pt-chip.urg { background: var(--pt-perigo-bg); border-color: var(--pt-perigo-borda); color: var(--pt-perigo-txt); font-weight: 600; }

/* ── Selos ─────────────────────────────────────────────────────────────── */

.pt-selo         { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; letter-spacing: .3px; }
.pt-selo.ok      { background: var(--pt-ok-bg);     color: var(--pt-ok-txt);     border: 1px solid var(--pt-ok-borda); }
.pt-selo.parcial { background: var(--pt-aviso-bg);  color: var(--pt-aviso-txt);  border: 1px solid var(--pt-aviso-borda); }
.pt-selo.urgente { background: var(--pt-perigo-bg); color: var(--pt-perigo-txt); border: 1px solid var(--pt-perigo-borda); }

/* ── Controles ─────────────────────────────────────────────────────────── */

.pt-busca    { width: 100%; border: 1px solid var(--pt-linha); border-radius: var(--pt-raio-sm); padding: 9px 12px; font-size: 13.5px; color: var(--pt-texto); }
.pt-busca:focus { outline: none; border-color: var(--pt-marca); }
.pt-bt       { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dfe3e8; background: var(--pt-surface);
               color: #525e64; padding: 7px 13px; border-radius: var(--pt-raio-sm); font-size: 13px; text-decoration: none; cursor: pointer; }
.pt-bt:hover { border-color: var(--pt-marca); color: var(--pt-texto); text-decoration: none; }
.pt-bt.forte { background: var(--pt-marca); border-color: var(--pt-marca); color: #fff; }
.pt-bt.forte:hover { color: #fff; opacity: .92; }
.pt-bt[disabled], .pt-bt.off { opacity: .45; pointer-events: none; }
.pt-filtros  { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }

/* ── Celular ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

    /* O nome fica À DIREITA do logo, na mesma linha. Antes havia um width:100% aqui
       que o empurrava para a linha de baixo, e o cabeçalho ocupava o dobro da altura
       logo onde a tela é mais curta.

       nowrap + min-width:0 é o par que faz isso funcionar: sem o min-width, um item
       flex não encolhe abaixo do conteúdo e o nome longo empurraria o logo para fora. */
    .pt-topo-in   { gap: 8px; flex-wrap: nowrap; }
    .pt-topo img  { max-height: 32px; max-width: 120px; flex-shrink: 0; }
    .pt-quem      { min-width: 0; }
    .pt-menu-bt   { max-width: 100%; }
    /* Sem truncamento por CSS aqui: o nome já chega cortado em 20 caracteres do
       servidor, o que mantém a seta sempre na mesma posição. */

    .pt-wrap    { padding: 12px 12px 30px 12px; }
    .pt-painel  { padding: 12px; }
    .pt-nav-in  { overflow-x: auto; flex-wrap: nowrap; }
    .pt-nav a   { white-space: nowrap; }
}


/* ── Login ─────────────────────────────────────────────────────────────────
   Página sem cabeçalho compartilhado (ainda não há sessão), mas usando os
   mesmos tokens — é o que faz o login parecer do mesmo produto que o resto. */

/* O login herda o visual do resultados.php: carrossel de fundo (backstretch),
   caixa branca translúcida por cima e o raio de 7px do tema. A translucidez é o
   que faz a imagem aparecer atrás sem atrapalhar a leitura. */
body.portal-login   { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px;
                      background-color: #e9ecf3; }
.pt-login           { width: 100%; max-width: 400px; }
.pt-login-caixa     { background: rgba(255, 255, 255, 0.88); border: 0; border-radius: 20px; padding: 30px;
                      box-shadow: 0 2px 18px rgba(0,0,0,.10); }
.pt-login-logo      { padding: 45px 0 55px 0; display: block; margin-left: auto; margin-right: auto;
                      width: 300px; max-width: 100%; }
.pt-login-marca     { text-align: center; font-size: 18px; font-weight: 600; color: var(--pt-titulo); margin-bottom: 20px; }
.pt-login-tit       { text-align: center; font-size: 18px; font-weight: 600; color: var(--pt-titulo); margin: 0 0 4px; }
.pt-login-sub       { text-align: center; font-size: 13.5px; color: var(--pt-suave); margin: 0 0 22px; line-height: 1.5; }

/* Campo com ícone: o ícone à esquerda diz o que se espera sem precisar de rótulo. */
.pt-campo           { position: relative; margin-bottom: 11px; }
.pt-campo i         { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--pt-suave); font-size: 15px; }
.pt-campo input     { width: 100%; box-sizing: border-box; border: 1px solid var(--pt-linha); border-radius: var(--pt-raio-sm);
                      padding: 12px 13px 12px 38px; font-size: 14.5px; color: var(--pt-texto); background: var(--pt-surface); }
.pt-campo input:focus   { outline: none; border-color: var(--pt-marca); box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
.pt-campo input::placeholder { color: #b6c0cb; }

/* Variante de texto longo. O ícone sai do centro vertical e sobe para a primeira
   linha — centrado num campo de 4 linhas ele flutuaria no meio do nada. */
.pt-campo.area i         { top: 15px; transform: none; }
.pt-campo textarea       { width: 100%; box-sizing: border-box; border: 1px solid var(--pt-linha);
                           border-radius: var(--pt-raio-sm); padding: 12px 13px 12px 38px; font-size: 14.5px;
                           color: var(--pt-texto); background: var(--pt-surface); font-family: inherit;
                           line-height: 1.5; resize: vertical; display: block; }
.pt-campo textarea:focus { outline: none; border-color: var(--pt-marca); box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
.pt-campo textarea::placeholder { color: #b6c0cb; }

.pt-login-bt        { width: 100%; border: 0; border-radius: var(--pt-raio-sm); background: var(--pt-marca); color: #fff;
                      padding: 12px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 6px; }
.pt-login-bt:hover  { opacity: .93; }
.pt-login-bt[disabled] { background: #e7ecf1; color: var(--pt-suave); cursor: default; }
.pt-login-bt[disabled]:hover { opacity: 1; }

.pt-login-sep       { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--pt-linha-sut); }
.pt-login-sep h4    { font-size: 14px; font-weight: 600; color: var(--pt-titulo); margin: 0 0 4px; }
.pt-login-sep p     { font-size: 12.5px; color: var(--pt-suave); margin: 0 0 12px; line-height: 1.55; }
.pt-login-links     { text-align: center; margin-top: 16px; font-size: 13px; }
.pt-login-links a   { color: var(--pt-suave); text-decoration: none; }
.pt-login-links a:hover { color: var(--pt-texto); }
/* ── Home ──────────────────────────────────────────────────────────────────
   Substitui o .pt-hub/.pt-big, que eram os dois cartões-menu. A saudação deixa de
   ser um bloco centralizado do tamanho da tela e divide a linha com a ação
   principal — que agora é um botão, não meia tela. */

.pt-home-topo   { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pt-home-topo h2{ font-size: 20px; font-weight: 600; color: var(--pt-titulo); margin: 0 0 2px; }
.pt-home-topo p { font-size: 13.5px; color: var(--pt-suave); margin: 0; }
.pt-home-topo .pt-bt { margin-left: auto; }

/* Três números derivados dos últimos atendimentos — o que a tela promete no texto.
   Contar o histórico inteiro custava 707 ms na maior clínica da base. */
.pt-kpis        { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.pt-kpi         { background: var(--pt-surface); border: 1px solid var(--pt-linha); border-radius: var(--pt-raio);
                  padding: 13px 15px; }
.pt-kpi b       { display: block; font-size: 23px; font-weight: 600; color: var(--pt-titulo); line-height: 1.15;
                  font-variant-numeric: tabular-nums; }
.pt-kpi b.ok    { color: var(--pt-ok-txt); }
.pt-kpi b.aviso { color: var(--pt-aviso-txt); }
.pt-kpi span    { font-size: 12.5px; color: var(--pt-suave); }

@media (max-width: 560px) {
    .pt-kpis { grid-template-columns: 1fr; gap: 8px; }
    .pt-home-topo .pt-bt { margin-left: 0; width: 100%; text-align: center; }
}

.pt-login-nota      { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pt-linha-sut);
                      font-size: 12.5px; color: var(--pt-suave); line-height: 1.55; text-align: center; }
.pt-login-rodape    { text-align: center; margin-top: 16px; font-size: 12.5px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.pt-login-rodape a  { color: #fff; text-decoration: underline; }
.pt-login-rodape a:hover { color: #fff; opacity: .85; }

.pt-aviso           { border-radius: var(--pt-raio-sm); padding: 11px 13px; font-size: 13.5px; margin-bottom: 14px; line-height: 1.5; }
.pt-aviso.erro      { background: var(--pt-perigo-bg); color: var(--pt-perigo-txt); border: 1px solid var(--pt-perigo-borda); }
.pt-aviso.ok        { background: var(--pt-ok-bg);     color: var(--pt-ok-txt);     border: 1px solid var(--pt-ok-borda); }

@media (max-width: 480px) {
    .pt-login-caixa { padding: 24px 20px; }
}


/* ── Busca com sugestão ────────────────────────────────────────────────────
   Substitui as listas de chips. Uma clínica tem 416 animais em média e a maior
   15.318 — nenhuma quantidade de chips resolve isso. */

.pt-sug        { position: relative; }
.pt-sug-lista  { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; max-height: 300px; overflow-y: auto;
                 background: var(--pt-surface); border: 1px solid var(--pt-linha); border-top: 0;
                 border-radius: 0 0 var(--pt-raio-sm) var(--pt-raio-sm); box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.pt-sug.aberto .pt-sug-lista { display: block; }
.pt-sug-item   { padding: 9px 12px; border-bottom: 1px solid var(--pt-linha-sut); cursor: pointer; }
.pt-sug-item:last-child { border-bottom: 0; }
.pt-sug-item:hover, .pt-sug-item.foco { background: var(--pt-bg); }
.pt-sug-item b { font-weight: 600; color: var(--pt-titulo); font-size: 13.5px; }
.pt-sug-item small { display: block; color: var(--pt-suave); font-size: 12px; margin-top: 1px; }
.pt-sug-aviso  { padding: 9px 12px; font-size: 12.5px; color: var(--pt-suave); }

/* Paciente já escolhido: os campos manuais somem, porque os dados vêm do cadastro. */
.pt-escolhido  { background: var(--pt-ok-bg); border: 1px solid var(--pt-ok-borda); border-radius: var(--pt-raio);
                 padding: 12px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pt-escolhido .nome { font-size: 16px; font-weight: 600; color: var(--pt-ok-txt); }
.pt-escolhido .meta { font-size: 12.5px; color: var(--pt-ok-txt); opacity: .85; }
.pt-escolhido .trocar { margin-left: auto; font-size: 12.5px; color: var(--pt-ok-txt); text-decoration: underline; cursor: pointer; }

/* ── Modal ─────────────────────────────────────────────────────────────────
   O laboratório tem 542 tipos de exame em 20 categorias (o maior da base, 821).
   Listar tudo na página é o que tornava a tela impossível. */

.pt-modal      { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,.45); padding: 20px; overflow-y: auto; }
.pt-modal.on   { display: block; }
.pt-modal-cx   { background: var(--pt-surface); border-radius: var(--pt-raio); max-width: 640px; margin: 30px auto;
                 box-shadow: 0 12px 40px rgba(0,0,0,.22); display: flex; flex-direction: column; max-height: calc(100vh - 60px); }
.pt-modal-topo { padding: 14px 16px; border-bottom: 1px solid var(--pt-linha); display: flex; align-items: center; gap: 10px; }
.pt-modal-topo b { font-size: 15px; font-weight: 600; color: var(--pt-titulo); }
.pt-modal-x    { margin-left: auto; cursor: pointer; color: var(--pt-suave); font-size: 18px; background: none; border: 0; }
.pt-modal-corpo{ padding: 14px 16px; overflow-y: auto; flex: 1; }
.pt-modal-pe   { padding: 12px 16px; border-top: 1px solid var(--pt-linha); display: flex; align-items: center; gap: 10px; }

/* Categoria dobrável: 20 delas abertas de uma vez recriam o problema em menor escala. */
.pt-cat        { border-bottom: 1px solid var(--pt-linha-sut); }
.pt-cat-bt     { width: 100%; text-align: left; background: none; border: 0; padding: 10px 2px; cursor: pointer;
                 font-size: 13.5px; font-weight: 600; color: var(--pt-texto); display: flex; align-items: center; gap: 8px; }
.pt-cat-bt i   { color: var(--pt-suave); font-size: 12px; width: 12px; }
.pt-cat-bt span{ margin-left: auto; font-weight: 400; font-size: 12px; color: var(--pt-suave); }
.pt-cat-itens  { display: none; padding: 2px 0 10px 0; }

/* Um exame por LINHA, não em chips que quebram: com nomes longos como
   ".Perfil Hepático 2 (ALT+AST+FA+GGT+PT+Alb+Glob)" os chips viravam blocos de
   larguras irregulares e ficava difícil correr o olho. Em linha, o nome alinha à
   esquerda e o preço à direita. */
.pt-exame      { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--pt-raio-sm);
                 cursor: pointer; border: 1px solid transparent; }
.pt-exame:hover{ background: var(--pt-bg); }
.pt-exame .marca { color: #c9d1d8; font-size: 15px; width: 15px; flex-shrink: 0; }
.pt-exame .txt   { flex: 1; min-width: 0; }
.pt-exame .nm    { font-size: 13.5px; color: var(--pt-texto); }
.pt-exame .txt small { display: block; font-size: 11.5px; color: var(--pt-suave); }
.pt-exame .preco { font-size: 13px; color: var(--pt-suave); white-space: nowrap; }
.pt-exame.ok     { background: var(--pt-ok-bg); border-color: var(--pt-ok-borda); }
.pt-exame.ok .marca { color: var(--pt-ok-txt); }
.pt-exame.ok .nm    { color: var(--pt-ok-txt); font-weight: 600; }
.pt-exame.ok .preco { color: var(--pt-ok-txt); }
.pt-cat.aberta .pt-cat-itens { display: block; }


/* ── Passos da requisição ──────────────────────────────────────────────────
   A tela anterior tinha tudo com o mesmo peso: nada guiava o olho. Aqui cada
   etapa é um bloco numerado que diz o que é e se já está resolvido.

   A cor marca ESTADO, não decora: verde = resolvido, âmbar = falta, cinza =
   neutro. Por isso o botão de enviar nasce apagado. */

.pt-passo        { background: var(--pt-surface); border: 1px solid var(--pt-linha); border-radius: var(--pt-raio);
                   padding: 16px; margin-bottom: 12px; }
.pt-passo.feito  { border-color: var(--pt-ok-borda); }
.pt-passo.atual  { border-color: var(--pt-marca); box-shadow: 0 0 0 3px rgba(0,0,0,.03); }

.pt-passo-cab    { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pt-passo-num    { width: 24px; height: 24px; border-radius: 50%; background: #eef1f5; color: var(--pt-suave);
                   display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.pt-passo.atual .pt-passo-num { background: var(--pt-marca); color: #fff; }
.pt-passo.feito .pt-passo-num { background: var(--pt-ok-bg); color: var(--pt-ok-txt); }
.pt-passo-tit    { font-size: 14.5px; font-weight: 600; color: var(--pt-titulo); }
.pt-passo-sit    { margin-left: auto; font-size: 12.5px; color: var(--pt-suave); text-align: right; }
.pt-passo.feito .pt-passo-sit { color: var(--pt-ok-txt); }

/* Resumo antes do envio: diz o que falta sem obrigar a rolar de volta. */
.pt-resumo       { border-top: 1px solid var(--pt-linha-sut); margin-top: 14px; padding-top: 12px; }
.pt-resumo h5    { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--pt-suave); margin: 0 0 8px; }
.pt-resumo-li    { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--pt-linha-sut); }
.pt-resumo-li:last-of-type { border-bottom: 0; }
.pt-resumo-li i  { width: 15px; font-size: 14px; color: #c9d1d8; }
.pt-resumo-li.ok i     { color: var(--pt-ok-txt); }
.pt-resumo-li.falta i  { color: var(--pt-aviso-txt); }
.pt-resumo-li .v { margin-left: auto; color: var(--pt-suave); font-size: 12.5px; text-align: right; }
.pt-resumo-li.ok    .v { color: var(--pt-ok-txt); }
.pt-resumo-li.falta .v { color: var(--pt-aviso-txt); }

/* Solicitante deixa de ser cartão: é lido uma vez e nunca mais. */
.pt-solicitante  { font-size: 12.5px; color: var(--pt-suave); margin-bottom: 14px; }
.pt-solicitante b { color: var(--pt-texto); }


/* ─────────────────────────────────────────────────────────────────────────
   SELECTIZE (requisição: espécie, raça e pelagem)

   O plugin vem com o visual do Metronic/bootstrap3 e destoaria dos campos ao
   lado. Aqui ele é vestido com os mesmos tokens dos outros campos do portal:
   mesma borda, mesmo raio, mesma altura e o mesmo recuo de 38px que deixa
   espaço para o ícone do .pt-campo.

   O seletor entra por .pt-campo para não alcançar nenhum selectize fora do
   portal.
   ───────────────────────────────────────────────────────────────────────── */
.pt-campo .selectize-control          { margin-bottom: 0; }
.pt-campo .selectize-input            { border: 1px solid var(--pt-linha); border-radius: var(--pt-raio-sm);
                                        padding: 12px 13px 12px 38px; font-size: 14.5px; color: var(--pt-texto);
                                        background: var(--pt-surface); box-shadow: none; line-height: 1.2; }
.pt-campo .selectize-input.focus      { border-color: var(--pt-marca); box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
.pt-campo .selectize-input.dropdown-active { border-radius: var(--pt-raio-sm) var(--pt-raio-sm) 0 0; }
.pt-campo .selectize-input input      { font-size: 14.5px; color: var(--pt-texto); }
.pt-campo .selectize-input > input::placeholder,
.pt-campo .selectize-control.single .selectize-input > .placeholder { color: #b6c0cb; }

/* A seta padrão do plugin é um triângulo CSS que fica fora do lugar com o
   padding acima. */
.pt-campo .selectize-control.single .selectize-input:after { right: 14px; border-color: var(--pt-suave) transparent transparent transparent; }

.pt-campo .selectize-dropdown         { border: 1px solid var(--pt-linha); border-top: 0;
                                        border-radius: 0 0 var(--pt-raio-sm) var(--pt-raio-sm); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.pt-campo .selectize-dropdown .option { padding: 10px 13px; font-size: 14px; color: var(--pt-texto); }
.pt-campo .selectize-dropdown .active { background: var(--pt-bg); color: var(--pt-texto); }
.pt-campo .selectize-dropdown .selected { background: var(--pt-ok-bg); color: var(--pt-ok-txt); }

/* O ícone do campo precisa ficar por cima do controle do plugin, senão some. */
.pt-campo i                           { z-index: 2; }