/* ============================================================================
   LaudoGestão — o CSS que é SÓ desta ponta.

   `tokens.css`, `login.css` e `app.css` são cópia do radiogestao (contrato §4:
   "é o RadioGestão com outro miolo") e NÃO devem ser editados aqui — divergir a
   casca entre as duas pontas do mesmo produto seria o defeito. O que vive neste
   arquivo é o que o radiogestao não tem:

   · o seletor de contexto do header — no radio ele mora num `<style>` inline do
     `index.html`, não no `app.css`, então o porte dos 3 arquivos não o trouxe.
     Copiado dali, com o mesmo visual, trocando Grupo/CNPJ por Clínica;
   · a VITRINE da Fase 2 (seção "Em breve", selo "em obra") — decisão comercial
     do Lucas, existe só no app do radiologista;
   · o contador de notificações não lidas na sidebar;
   · a nota do login que explica que o acesso vem de convite.
   ============================================================================ */

/* ── o seletor de contexto SAIU daqui em 18/08 ───────────────────────────────
   Ele era uma cópia à mão do <style> inline do index.html do radiogestao. Naquele
   dia o inline foi movido para o app.css (proposta 4 do padrão visual), então o
   porte da casca já o traz — e duas cópias do mesmo componente eram exatamente o
   problema que a proposta resolveu.
   ────────────────────────────────────────────────────────────────────────── */

/* ── login: nome do produto e a nota do convite ──────────────────────────── */
.lbox-produto {
  margin: 0 0 16px 0; font-size: 19px; font-weight: 700; letter-spacing: -.2px;
  color: var(--navy, #14243C); text-align: center;
}
.lbox-produto span { color: var(--gold, #C9A227); }
.lbox-nota {
  margin: 16px 0 0 0; padding-top: 14px; border-top: 1px solid var(--border, #E2E8F0);
  font-size: 12px; line-height: 1.5; color: var(--text2, #4A5568);
}

/* ── sidebar: seção da vitrine + selo "em obra" ──────────────────────────── */
.sb-secao {
  margin: 18px 0 6px 0; padding: 0 18px; font-size: 9px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.38);
}
/* Item de vitrine: legível, mas visivelmente de outra categoria — o radiologista
   não deve clicar esperando função e se frustrar. Ele clica esperando ver o que
   vem, que é o efeito comercial pretendido. */
.sb-obra { opacity: .72; }
.sb-obra:hover { opacity: 1; }
.sb-selo {
  margin-left: auto; font-size: 8.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; padding: 2px 6px; border-radius: 999px;
  background: rgba(201,162,39,.18); color: var(--gold, #C9A227);
  border: 1px solid rgba(201,162,39,.35); white-space: nowrap;
}
/* Sidebar recolhida (monograma): esconde o selo "em obra" e o título da seção.
   ⚠️ A classe é `.collapsed` — é a que o app.css da casca usa. Eu havia escrito
   `.fechada` (nome inventado) e por isso nada acontecia: o seletor nunca casava. */
.sidebar.collapsed .sb-selo,
.sidebar.collapsed .sb-secao { display: none; }

/* ── contador de notificações não lidas ──────────────────────────────────── */
.sb-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; border-radius: 999px;
  background: var(--red, #C0392B); color: #fff;
}

/* ── a tela da vitrine (Fase 2) ──────────────────────────────────────────── */
.obra-card {
  max-width: 620px; margin: 8px auto 0; text-align: center; padding: 36px 28px;
  background: var(--white, #fff); border: 1px solid var(--border, #E2E8F0);
  border-radius: 10px;
}
.obra-icone { font-size: 34px; line-height: 1; margin-bottom: 14px; }
.obra-card h2 { margin: 0 0 8px 0; font-size: 20px; color: var(--navy, #14243C); }
.obra-card p { margin: 0 0 6px 0; color: var(--text2, #4A5568); font-size: 13.5px; line-height: 1.6; }
.obra-lista {
  margin: 18px auto 0; padding: 16px 18px; max-width: 420px; text-align: left;
  background: var(--bg, #F7FAFC); border-radius: 8px;
  font-size: 13px; color: var(--text2, #4A5568);
}
.obra-lista strong { color: var(--navy, #14243C); }

/* ── nota explicativa abaixo do título de uma seção ──────────────────────── */
/* O operador do LaudoGestão é um profissional de saúde, não de sistema: a tela
   diz o que a coluna significa e o que ele deve fazer, em vez de esperar que ele
   descubra. Mesma escolha das telas do radiogestao. */
.tela-nota {
  margin: 0 0 12px 0; font-size: 12.5px; line-height: 1.55;
  color: var(--text2, #4A5568); max-width: 900px;
}

/* ── Meu Perfil ──────────────────────────────────────────────────────────── */
.perfil-linha {
  display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid var(--border, #E2E8F0); font-size: 13.5px;
}
.perfil-linha:last-child { border-bottom: 0; }
.perfil-rot { color: var(--text2, #4A5568); }
.perfil-val { color: var(--navy, #14243C); font-weight: 600; text-align: right; }

/* ── a linha editável do laudo (a ÚNICA coisa que o radiologista escreve) ────── */
/*
   ⚠️ `.laudo-fin-input` CARREGA COMPORTAMENTO, não só aparência: o
   `laudos-meus.js` liga nela o handler que grava a data de finalização e, no
   `blur`, REDESENHA a tela. Em 24/08 eu reusei essa classe nos campos do
   formulário de lançamento só para herdar o estilo — e o formulário se apagava
   sozinho no meio do preenchimento, porque cada saída de campo disparava o
   redesenho. O insert nunca acontecia, e a tela não dizia por quê.

   `.ln-input` é a mesma aparência SEM o comportamento. Campo de formulário usa
   esta; a linha da tabela usa aquela. É a mesma lição da sidebar em 18/08
   ("portar casca é portar comportamento, não só CSS"), por outro caminho.
*/
.laudo-fin-input,
.ln-input {
  border: 1px solid var(--border, #E2E8F0); border-radius: 5px; padding: 4px 7px;
  font-family: var(--font-base, inherit); font-size: 12.5px; width: 132px;
  color: var(--text, #14243C); background: var(--white, #fff);
}
.laudo-fin-input:focus,
.ln-input:focus { border-color: var(--navy-l, #233E6B); outline: none; }
/* salvo/erro na própria linha: o radiologista precisa saber que gravou, sem toast */
.laudo-fin-ok { border-color: #2E9E5B; box-shadow: 0 0 0 2px rgba(46,158,91,.14); }
.laudo-fin-err { border-color: var(--red, #C0392B); box-shadow: 0 0 0 2px rgba(192,57,43,.14); }

/* ── aviso de dado inválido (data de finalização anterior ao exame) ────────── */
/* Existe porque o dado errado, sem aviso, apenas DESAPARECE do índice no prazo:
   o radiologista veria o índice mudar sem entender por quê. O aviso diz o que é, o
   que acontece enquanto não for corrigido, e onde corrigir. */
.aviso-invalido {
  margin: 0 0 14px 0; padding: 12px 14px; border-radius: 8px;
  background: #FCF0F1; border: 1px solid #F0C4CA;
  color: var(--neg, #C6303E); font-size: 13px; line-height: 1.55;
}
.aviso-invalido strong { color: var(--neg, #C6303E); }

/* ── campo do código de 6 dígitos (MFA) ───────────────────────────────────── */
/* Fonte mono e espaçamento largo: código de 6 dígitos se confere olhando, e
   dígito por dígito. Com a fonte de texto, 0/O e 1/l brigam. */
.campo-mfa { margin: 12px 0 4px; }
.campo-mfa label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text3); margin-bottom: 4px;
}
.campo-mfa input {
  width: 160px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--white); color: var(--text);
  font-family: var(--font-mono); font-size: 20px; font-weight: 700;
  letter-spacing: 5px; text-align: center;
}
.campo-mfa input:focus { outline: none; border-color: var(--navy-l); }
/* o campo do login usa os estilos do login.css; só a régua dos dígitos vem daqui */
#mfaLoginCodigo {
  font-family: var(--font-mono); font-size: 20px; font-weight: 700;
  letter-spacing: 5px; text-align: center;
}

/* ── Recorte da fila (busca + status) — 21/08/2026 ─────────────────────────
   Nasce aqui, e não no app.css: aquele arquivo é cópia VERBATIM do radiogestao
   (tests/casca-portada.test.mjs reprova divergência), e esta tela só existe neste
   app. Casca é casca; tela é tela.

   Cor sempre por TOKEN: o app tem um só tema hoje, mas hex cravado é o que torna
   caro mudar isso depois. */
.lm-recorte {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 4px 0 14px;
}
.lm-busca {
  flex: 0 1 320px;
  height: 34px;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
}
.lm-busca:focus { border-color: var(--navy-l); box-shadow: 0 0 0 2px var(--navy-050); }
.lm-busca::placeholder { color: var(--text3); }
/* a contagem do recorte: número primeiro, rótulo depois (padrão dos cards) */
.lm-conta { font-size: 12px; color: var(--text2); }
.lm-conta b { color: var(--text); }
/* o "N de M" ao lado do título da tabela de entregues */
.lm-sub {
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Minhas clínicas de fora (cadastro do radiologista) — 24/08/2026 ───────────
   Aqui e não no app.css: aquele é cópia verbatim do radiogestao e o teste de
   casca reprova divergência. Esta tela só existe neste app. */
.ce-nova { margin: 14px 0 4px; }
.ce-campos {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.ce-campos label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text3);
}
.ce-campos input { min-width: 190px; }
.ln-campos .ln-input, .ce-campos .ln-input { width: auto; }
.ce-campos label:nth-child(4) input { min-width: 110px; }
.ce-acoes { display: flex; gap: 8px; align-items: center; }
.ce-erro { font-size: 12.5px; color: var(--neg); }
/* O par do .ce-erro. Convite é ação que sai do sistema (manda e-mail para uma
   pessoa), e sem confirmação a admin fica sem saber se reenviar — o silêncio
   depois de "Enviar" é o que faz alguém clicar três vezes. */
.ce-ok { font-size: 12.5px; color: var(--pos, #0E8A4C); font-weight: 600; }
/* clínica inativa continua legível: ela guarda histórico, não é lixo — some da
   escolha ao lançar, não da lista */
.ce-inativa td { opacity: .55; }
.ce-inativa td:first-child { font-style: italic; }

/* ── Lançar laudo de clínica de fora — 24/08/2026 ──────────────────────────── */
.ln-barra {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.ln-dica { font-size: 12px; color: var(--text2); }
.ln-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin: 0 0 16px;
}
.ln-campos {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ln-campos label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text3);
}
.ln-campos input, .ln-campos select { min-width: 150px; }
/* qtde e prazo são números curtos: campo largo aqui sugere texto */
.ln-campos label:nth-last-child(1) input,
.ln-campos label:nth-last-child(2) input { min-width: 90px; }
/* o aviso do mascaramento não é rodapé: ele evita que a pessoa ache que o sistema
   comeu o nome que ela digitou */
.ln-nota {
  margin: 12px 0 10px;
  padding: 9px 12px;
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  max-width: 760px;
}
.ln-acoes { display: flex; gap: 8px; align-items: center; }
.ln-erro { font-size: 12.5px; color: var(--neg); }

/* ── preço que não precifica nada (24/08) ─────────────────────────────────── */
/* Linha (sem tipo + "só normal") gravada antes de 24/08: a cascata nunca chega
   nela. A linha continua na tabela — apagar dado do radiologista pelas costas não é
   nossa alçada — mas ela DIZ que está morta e diz a saída. Sem isso o radiologista
   olharia um preço cadastrado e concluiria que o fechamento vai usá-lo. */
.preco-morto {
  display: inline-block; margin-top: 3px; font-size: 11.5px; line-height: 1.45;
  color: var(--neg, #C6303E);
}

/* ── área da LM: convidar radiologista (24/08) ────────────────────────────────── */
/* Reusa a forma do cadastro de clínica de fora de propósito: é o mesmo gesto
   ("um formulário curto que abre sob um botão"), e dois desenhos para o mesmo
   gesto fariam a pessoa reaprender. Só o nome da classe muda. */
.lm-nova { margin: 14px 0 4px; }

/* ── `hidden` na sidebar tem de VALER (24/08) ─────────────────────────────── */
/*
   ⚠️ `.sb-item { display: flex }` vem do app.css da casca e GANHA do
   `[hidden] { display: none }` do navegador — regra de autor bate regra de UA. Então
   `btn.hidden = true` marcava o atributo e o botão continuava na tela.

   Medido na prova do fluxo 12: os 5 itens de radiologista com `hidden:true` e
   `display:flex`. Sem esta regra, a seção "LM" — que nasce escondida e é revelada
   só para a equipe — apareceria para TODO radiologista em produção. Clicar levaria a uma
   tela vazia (a RPC devolve zero linhas para quem não é staff), então não seria
   vazamento de dado; seria o produto oferecendo ao cliente uma tela que não é dele.

   É a MESMA armadilha do ADR de 21/08 no radiogestão ("o botão antigo piscava na
   tela: o `hidden` nunca escondeu nada"), no outro app, pela mesma causa.
*/
.sb-item[hidden], .sb-secao[hidden] { display: none !important; }

/* ── "Não consigo entrar": a ajuda do login, recolhida (24/08) ────────────── */
/*
   Era um parágrafo de 9 linhas embaixo do formulário. Quem chega nesta tela quer
   ENTRAR; explicação de exceção no caminho de todo mundo tem o efeito contrário do
   pretendido — vira parede e ninguém lê, inclusive quem precisava.

   `<details>` nativo: sem JS, com teclado, e o estado fechado é o padrão certo.
   O `summary` é estilizado como link porque é o que ele é — uma pergunta que abre
   uma resposta, não um controle de sistema.
*/
.lbox-ajuda {
  margin: 18px 0 0 0; padding-top: 14px;
  border-top: 1px solid var(--border, #E2E8F0);
}
.lbox-ajuda > summary {
  cursor: pointer; list-style: none; font-size: 13px; font-weight: 600;
  color: var(--navy-l, #233E6B); text-align: center; padding: 2px 0;
}
.lbox-ajuda > summary::-webkit-details-marker { display: none; }
.lbox-ajuda > summary::after { content: ' ▾'; font-size: 10px; opacity: .7; }
.lbox-ajuda[open] > summary::after { content: ' ▴'; }
.lbox-ajuda > summary:hover { text-decoration: underline; }
.lbox-ajuda p {
  margin: 12px 0 0 0; font-size: 12.5px; line-height: 1.55;
  color: var(--text2, #4A5568);
}

/* ── contato do admin na linha da central (27/08) ─────────────────────────── */
/* A central não loga: quem entra é o admin. Sem o contato na linha, a equipe LM
   veria o nome da organização e a contagem de membros, e não teria a quem
   escrever no suporte nem para quem reenviar o acesso. */
.lm-contato { font-size: 11.5px; color: var(--text2, #4A5568); }
.lm-alerta { color: var(--neg, #C6303E); font-weight: 600; }

/* "sem preço" na coluna Valor da fila. Itálico e apagado de propósito: é a
   ausência de um cadastro, não um valor. Zero seria dizer "este laudo não vale
   nada"; o motor devolve null justamente para a tela poder dizer outra coisa. */
.lm-sem-preco { color: var(--text2, #4A5568); font-style: italic; font-weight: 400;
                white-space: nowrap; }

/* ── o valor EDITÁVEL de uma linha (25/09) ─────────────────────────────────
   O campo vazio mostra o combinado como placeholder; valor digitado é exceção
   daquela linha. Por isso o placeholder NÃO é apagado como placeholder costuma
   ser: ele é o número que vale de verdade enquanto ninguém digitar nada, e
   esmaecê-lo faria a coluna parecer vazia numa fila inteira de preço normal. */
.lm-valor-input {
  width: 6.4em; text-align: right; font-variant-numeric: tabular-nums;
  padding: 2px 4px; border: 1px solid var(--linha, #E2E8F0); border-radius: 4px;
  background: transparent; font-size: 12.5px; color: inherit;
}
.lm-valor-input::placeholder { color: var(--text, #1A202C); opacity: .72; }
.lm-valor-input:focus { border-color: var(--acc, #2B6CB0); outline: none; }

/* a linha tem exceção: a marca é discreta e PERMANENTE — quem olha a fila
   precisa distinguir "combinado" de "alguém decidiu este número aqui" sem
   passar o mouse em cada célula */
.lm-valor-excecao { border-color: var(--acc, #2B6CB0); font-weight: 600; }

/* gravou / falhou: mesmo vocabulário do campo de finalização desta tela */
.lm-valor-ok  { border-color: var(--pos, #2F855A); }
.lm-valor-err { border-color: var(--neg, #C6303E); }

/* o total, quando a linha representa mais de um laudo (qtde > 1): o campo edita
   o valor UNITÁRIO, e sem isto a coluna mostraria um número que não é o que
   entra na fatura */
.lm-valor-total { display: block; font-size: 11px; color: var(--text2, #4A5568);
                  white-space: nowrap; }