/* ==========================================================================
   Correspondente — a jornada do médico que chega por um link de WhatsApp.

   Escopado em `.cor`: não encosta no admin, no manager nem no portal do
   cliente. Tem sistema próprio, e não é capricho: as telas do correspondente
   são as ÚNICAS que uma pessoa de fora vê antes de decidir se entrega CPF, CRM
   e certificado digital a esta casa. Elas têm um trabalho que nenhuma tela
   interna tem, que é parecer confiável para quem ainda não confia.

   A ideia que organiza tudo: o médico não está "preenchendo um cadastro", ele
   está CONSTRUINDO UMA CREDENCIAL. Por isso a peça central é uma carteira que
   nasce em branco e se preenche a cada prova aceita — o nome quando o CFM
   responde, a inscrição junto, o telefone quando o código confere, o selo
   quando o termo é aceito. É a mesma informação que estava numa <dl>; o que
   muda é que ela deixa de ser um recibo do que já passou e vira o objeto que
   ele está ganhando.

   Textura: as linhas finíssimas da carteira são guilhoché, o padrão do papel
   de segurança de diploma, carteira profissional e certificado. É o único
   ornamento do arquivo, está em um lugar só, e diz "documento oficial" melhor
   do que qualquer quantidade de azul.
   ========================================================================== */

.cor {
  /* Tinta escura azulada, e não preto: preto puro em tela de celular ao sol
     vira um buraco, e esta gente lê no corredor do consultório. */
  --c-ink: #101a2c;
  --c-ink-2: #55617a;
  --c-ink-3: #8a93a6;
  --c-paper: #f4f6fa;
  --c-surface: #ffffff;
  --c-line: #e3e8f1;
  --c-line-strong: #ccd4e2;

  /* Azul mais fundo que o do Bootstrap: o mesmo parentesco com a marca, com o
     peso institucional que a tela precisa ter. */
  --c-brand: #1b4fd8;
  --c-brand-dark: #143bab;
  --c-brand-wash: #eaf0fe;

  /* Verde de selo (conferido), âmbar de atenção (falta você), vermelho de
     parada. Três estados, e nenhum deles é decoração: cada um responde a uma
     pergunta diferente do médico. */
  --c-seal: #0f7a5a;
  --c-seal-wash: #e6f4ee;
  --c-attn: #9a4c17;
  --c-attn-wash: #fdf1e5;
  --c-stop: #b42318;
  --c-stop-wash: #fdecea;

  --c-radius: 14px;
  --c-radius-sm: 10px;
  --c-shadow: 0 1px 2px rgba(16, 26, 44, .05), 0 6px 20px rgba(16, 26, 44, .06);
  --c-shadow-lift: 0 2px 4px rgba(16, 26, 44, .06), 0 14px 34px rgba(16, 26, 44, .10);

  --c-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --c-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  color: var(--c-ink);
  font-size: 1rem;
  line-height: 1.55;
}

.cor::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--c-paper);
  z-index: -1;
}

/* Coluna única e estreita. O celular é o aparelho, e no desktop uma coluna
   larga só faria o médico procurar onde continuar. */
.cor-wrap {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

/* ---- Tipografia -------------------------------------------------------- */

.cor h1, .cor h2, .cor h3, .cor .cor-serif {
  font-family: var(--c-serif);
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--c-ink);
}
.cor h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 .35rem; }
.cor h2 { font-size: 1.12rem; line-height: 1.3; margin: 0 0 .3rem; }
.cor h3 { font-size: 1rem; margin: 0 0 .25rem; }

.cor p { margin: 0 0 .85rem; }
.cor p:last-child { margin-bottom: 0; }

/* O texto de apoio é o que mais se lê nestas telas: as explicações de por que
   pedimos cada coisa. Ele não pode ser cinza-fantasma. */
.cor .cor-nota {
  color: var(--c-ink-2);
  font-size: .875rem;
  line-height: 1.5;
}
.cor .cor-nota strong { color: var(--c-ink); font-weight: 600; }

/* Sobrancelha: diz que SEÇÃO é esta. Curta, espaçada, nunca uma frase. */
.cor-eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 2rem 0 .6rem;
}
.cor-eyebrow:first-child { margin-top: 0; }

/* Número de registro é dado, e dado se lê em tabular: CRM, CPF, chave Pix,
   data de validade, código de seis dígitos. */
.cor-dado {
  font-family: var(--c-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ---- A credencial ------------------------------------------------------ */

.cor-cred {
  position: relative;
  overflow: hidden;
  border-radius: var(--c-radius);
  background: linear-gradient(160deg, #16233b 0%, #0d1626 100%);
  color: #fff;
  padding: 1.15rem 1.15rem 1rem;
  box-shadow: var(--c-shadow-lift);
}

/* Guilhoché: o papel de segurança. Fica só aqui, e a opacidade é baixa de
   propósito — o padrão tem de se notar quando se olha, e sumir quando se lê. */
.cor-cred::after {
  content: "";
  position: absolute;
  inset: -50%;
  background:
    repeating-linear-gradient(58deg, rgba(255,255,255,.5) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-58deg, rgba(255,255,255,.5) 0 1px, transparent 1px 9px);
  opacity: .055;
  pointer-events: none;
}
.cor-cred > * { position: relative; z-index: 1; }

.cor-cred-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .9rem;
}
.cor-cred-rotulo {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.cor-cred-estado {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .2rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .8);
}
.cor-cred-estado.is-valida {
  background: rgba(45, 199, 143, .16);
  color: #7fe3bd;
}
.cor-cred-estado.is-vencida {
  background: rgba(255, 138, 122, .16);
  color: #ffb3a8;
}

.cor-cred-nome {
  font-family: var(--c-serif);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .15rem;
  color: #fff;
}
.cor-cred-nome.is-vazio {
  color: rgba(255, 255, 255, .3);
  font-style: italic;
  font-size: 1.05rem;
}

/* Grade dos campos. Rótulo minúsculo em cima, dado em mono embaixo: é a
   diagramação da carteira profissional, e ela funciona porque o olho procura o
   NÚMERO, não a palavra. */
.cor-cred-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .7rem .9rem;
  margin-top: .9rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.cor-cred-campo dt {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin: 0 0 .12rem;
}
.cor-cred-campo dd {
  margin: 0;
  font-family: var(--c-mono);
  font-size: .84rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .95);
  word-break: break-word;
}
.cor-cred-campo dd.is-vazio {
  color: rgba(255, 255, 255, .22);
  letter-spacing: .1em;
}
.cor-cred-campo dd .cor-cred-obs {
  display: block;
  font-family: inherit;
  font-size: .72rem;
  color: rgba(255, 255, 255, .5);
}
/* Campo que ocupa a linha toda (especialidades, que são texto e não número). */
.cor-cred-campo.is-largo { grid-column: 1 / -1; }
.cor-cred-campo.is-largo dd {
  font-family: inherit;
  font-size: .82rem;
  color: rgba(255, 255, 255, .8);
}

.cor-cred-rodape {
  margin-top: .85rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .72rem;
  color: rgba(255, 255, 255, .5);
}

/* ---- A trilha ---------------------------------------------------------- */
/* Numerada porque é MESMO uma sequência: o CFM tem de vir antes do termo, o
   e-mail antes da assinatura. A ordem carrega informação, e por isso ela
   aparece. */

.cor-trilha {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0 0 .25rem;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}
.cor-trilha li {
  flex: 1 1 0;
  position: relative;
  text-align: center;
  font-size: .62rem;
  line-height: 1.25;
  color: var(--c-ink-3);
  padding-top: 1.55rem;
}
/* O traço que liga um passo ao seguinte. Fica atrás da bolinha e para na
   borda, para não passar por baixo dela. */
.cor-trilha li::before {
  content: "";
  position: absolute;
  top: .59rem;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--c-line-strong);
}
.cor-trilha li:first-child::before { display: none; }
.cor-trilha li::after {
  counter-increment: passo;
  content: counter(passo);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--c-surface);
  border: 2px solid var(--c-line-strong);
  color: var(--c-ink-3);
  font-family: var(--c-mono);
  font-size: .66rem;
  font-weight: 600;
  line-height: calc(1.25rem - 4px);
}
.cor-trilha li.is-feito { color: var(--c-ink-2); }
.cor-trilha li.is-feito::before { background: var(--c-seal); }
.cor-trilha li.is-feito::after {
  content: "✓";
  background: var(--c-seal);
  border-color: var(--c-seal);
  color: #fff;
  font-size: .7rem;
}
.cor-trilha li.is-agora {
  color: var(--c-ink);
  font-weight: 700;
}
.cor-trilha li.is-agora::after {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
  box-shadow: 0 0 0 4px var(--c-brand-wash);
}
/* O traço que CHEGA no passo atual já foi percorrido. */
.cor-trilha li.is-agora::before { background: var(--c-seal); }

/* ---- Blocos ------------------------------------------------------------ */

.cor-bloco {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  padding: 1.15rem;
  margin-bottom: 1rem;
}

/* O bloco da vez. A barra à esquerda é o único lugar em que a tela levanta a
   voz, e ela existe porque o médico chega rolando: precisa achar em meio
   segundo o que tem de fazer. */
.cor-bloco.is-agora {
  border-color: #cfdcfb;
  box-shadow: var(--c-shadow-lift);
  position: relative;
  overflow: hidden;
}
.cor-bloco.is-agora::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--c-brand);
}

.cor-bloco > h2 { margin-bottom: .5rem; }
.cor-bloco > h2 + .cor-nota { margin-top: -.15rem; }

/* ---- Avisos ------------------------------------------------------------ */

.cor-aviso {
  border-radius: var(--c-radius-sm);
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  font-size: .885rem;
  line-height: 1.5;
  border: 1px solid;
}
.cor-aviso strong { font-weight: 700; }
.cor-aviso-info { background: var(--c-brand-wash); border-color: #cfdcfb; color: #16357f; }
.cor-aviso-ok { background: var(--c-seal-wash); border-color: #bfe3d4; color: #0b5c44; }
.cor-aviso-atencao { background: var(--c-attn-wash); border-color: #f2d6b8; color: var(--c-attn); }
.cor-aviso-parada { background: var(--c-stop-wash); border-color: #f6cdc8; color: var(--c-stop); }

/* ---- Botões ------------------------------------------------------------ */

.cor .btn {
  --bs-btn-border-radius: var(--c-radius-sm);
  font-weight: 600;
  padding: .68rem 1.1rem;
  border-width: 1px;
}
.cor .btn-lg { padding: .85rem 1.2rem; font-size: 1.02rem; }

.cor .btn-primary {
  --bs-btn-bg: var(--c-brand);
  --bs-btn-border-color: var(--c-brand);
  --bs-btn-hover-bg: var(--c-brand-dark);
  --bs-btn-hover-border-color: var(--c-brand-dark);
  --bs-btn-active-bg: var(--c-brand-dark);
  --bs-btn-active-border-color: var(--c-brand-dark);
  --bs-btn-disabled-bg: #97acdf;
  --bs-btn-disabled-border-color: #97acdf;
  box-shadow: 0 1px 2px rgba(20, 59, 171, .25);
}
.cor .btn-success {
  --bs-btn-bg: var(--c-seal);
  --bs-btn-border-color: var(--c-seal);
  --bs-btn-hover-bg: #0c6349;
  --bs-btn-hover-border-color: #0c6349;
  --bs-btn-active-bg: #0c6349;
  --bs-btn-active-border-color: #0c6349;
  --bs-btn-disabled-bg: #86c2ae;
  --bs-btn-disabled-border-color: #86c2ae;
}
.cor .btn-outline-primary {
  --bs-btn-color: var(--c-brand);
  --bs-btn-border-color: var(--c-line-strong);
  --bs-btn-hover-bg: var(--c-brand-wash);
  --bs-btn-hover-border-color: var(--c-brand);
  --bs-btn-hover-color: var(--c-brand-dark);
  --bs-btn-active-bg: var(--c-brand-wash);
  --bs-btn-active-color: var(--c-brand-dark);
  --bs-btn-active-border-color: var(--c-brand);
  background: var(--c-surface);
}
.cor .btn-outline-secondary {
  --bs-btn-color: var(--c-ink);
  --bs-btn-border-color: var(--c-line-strong);
  --bs-btn-hover-bg: #eef1f7;
  --bs-btn-hover-border-color: var(--c-line-strong);
  --bs-btn-hover-color: var(--c-ink);
  background: var(--c-surface);
}
.cor .btn-link {
  --bs-btn-color: var(--c-ink-2);
  --bs-btn-hover-color: var(--c-brand);
  font-weight: 500;
  text-decoration: none;
}
.cor .btn-link:hover { text-decoration: underline; }

/* Botão que ocupa a largura toda encosta no polegar; é a forma padrão aqui. */
.cor .btn.w-100 + .btn.w-100 { margin-top: .5rem; }

/* ---- Escolha (as portas do certificado, os destinos de pagamento) ------- */
/* Cartão clicável em vez de item de lista: a decisão é entre COISAS
   (certificadoras, contas), e cada uma precisa do seu nome e do seu detalhe. */

.cor-escolha {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  text-align: left;
  padding: .95rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.cor-escolha + .cor-escolha { margin-top: .6rem; }
.cor-escolha:hover,
.cor-escolha:focus-visible {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-wash);
  color: var(--c-ink);
}
@media (hover: hover) {
  .cor-escolha:hover { transform: translateY(-1px); }
}
.cor-escolha-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--c-radius-sm);
  background: var(--c-brand-wash);
  color: var(--c-brand);
  font-size: 1.25rem;
}
.cor-escolha-corpo { min-width: 0; flex: 1 1 auto; }
.cor-escolha-titulo { display: block; font-weight: 650; line-height: 1.25; }
.cor-escolha-detalhe {
  display: block;
  font-size: .8rem;
  color: var(--c-ink-2);
  line-height: 1.35;
}
.cor-escolha-seta { flex: none; color: var(--c-ink-3); font-size: 1.1rem; }

/* ---- Formulários ------------------------------------------------------- */

.cor .form-label {
  font-size: .8rem;
  font-weight: 650;
  color: var(--c-ink);
  margin-bottom: .3rem;
}
.cor .form-control,
.cor .form-select {
  border-color: var(--c-line-strong);
  border-radius: var(--c-radius-sm);
  padding: .62rem .8rem;
  font-size: 1rem;
  color: var(--c-ink);
  background-color: var(--c-surface);
}
.cor .form-control:focus,
.cor .form-select:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-wash);
}
.cor .form-control:disabled {
  background-color: #f1f3f8;
  color: var(--c-ink-2);
}
.cor .form-control::placeholder { color: var(--c-ink-3); }
.cor .form-text {
  font-size: .78rem;
  color: var(--c-ink-2);
  margin-top: .3rem;
}
.cor .form-control.is-invalid,
.cor .form-select.is-invalid { border-color: var(--c-stop); }
.cor .invalid-feedback { font-size: .78rem; color: var(--c-stop); }
.cor .form-check-input:checked {
  background-color: var(--c-brand);
  border-color: var(--c-brand);
}
.cor .form-check-input:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-wash);
}
.cor .form-check-label { font-size: .875rem; color: var(--c-ink); }

/* Campos que são um código, não uma palavra: CPF, CRM, data, os seis dígitos
   do WhatsApp. Em mono o médico confere o que digitou sem contar caractere. */
.cor .form-control.cor-campo-dado {
  font-family: var(--c-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.cor .form-control.cor-campo-codigo {
  font-family: var(--c-mono);
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: .45em;
  text-indent: .45em;  /* recentraliza: o tracking do último dígito empurra */
  padding: .6rem .5rem;
}

/* ---- Lista do que já foi feito ----------------------------------------- */

.cor-feitos {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .85rem;
}
.cor-feitos li {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .42rem 0;
  color: var(--c-ink-2);
  border-top: 1px solid var(--c-line);
}
.cor-feitos li:first-child { border-top: 0; }
.cor-feitos li::before {
  content: "✓";
  flex: none;
  color: var(--c-seal);
  font-weight: 700;
}

/* ---- Linha de dado (chave-valor fora da credencial) -------------------- */

.cor-linhas { margin: 0; }
.cor-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .5rem 0;
  border-top: 1px solid var(--c-line);
  font-size: .875rem;
}
.cor-linha:first-child { border-top: 0; padding-top: 0; }
.cor-linha dt { color: var(--c-ink-2); font-weight: 400; margin: 0; }
.cor-linha dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: var(--c-ink);
}

/* ---- Pílulas ----------------------------------------------------------- */

.cor-pilula {
  display: inline-block;
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.4;
  padding: .16rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.cor-pilula-ok { background: var(--c-seal-wash); color: var(--c-seal); }
.cor-pilula-atencao { background: var(--c-attn-wash); color: var(--c-attn); }
.cor-pilula-parada { background: var(--c-stop-wash); color: var(--c-stop); }
.cor-pilula-neutra { background: #eef1f7; color: var(--c-ink-2); }

/* ---- Perícia (o destino de toda a jornada) ----------------------------- */

.cor-pericia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  padding: .7rem 0;
  border-top: 1px solid var(--c-line);
}
.cor-pericia:first-of-type { border-top: 0; padding-top: 0; }
.cor-pericia-quando {
  font-family: var(--c-mono);
  font-weight: 600;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.cor-pericia-onde { font-size: .8rem; color: var(--c-ink-2); }

/* ---- Documento (o termo, as páginas em imagem) ------------------------- */

.cor-doc {
  border: 1px solid var(--c-line-strong);
  border-radius: var(--c-radius-sm);
  background: #eceff5;
  padding: .5rem;
  max-height: 55vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.cor-doc img {
  display: block;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(16, 26, 44, .16);
}
.cor-doc img + img { margin-top: .5rem; }

/* ---- Cabeçalho e rodapé da persona ------------------------------------- */

.cor-topo {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}
.cor-topo-inner {
  max-width: 34rem;
  margin: 0 auto;
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cor-marca {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--c-ink);
}
.cor-marca img { height: 26px; width: auto; }
.cor-marca span {
  font-family: var(--c-serif);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.01em;
}
.cor-quem {
  font-size: .78rem;
  color: var(--c-ink-2);
  text-align: right;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cor-quem strong { color: var(--c-ink); font-weight: 600; }

.cor-rodape {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 2.5rem;
  font-size: .76rem;
  color: var(--c-ink-3);
  text-align: center;
  line-height: 1.5;
}
.cor-rodape a { color: var(--c-ink-2); }

/* ---- Estado vazio ------------------------------------------------------ */

.cor-vazio {
  text-align: center;
  padding: 2.5rem 1rem;
}
.cor-vazio-icone {
  font-size: 2.25rem;
  color: var(--c-ink-3);
  line-height: 1;
  margin-bottom: .75rem;
}

/* ---- Piso de qualidade ------------------------------------------------- */

.cor a:focus-visible,
.cor button:focus-visible,
.cor .btn:focus-visible,
.cor .form-control:focus-visible,
.cor .form-select:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cor *, .cor *::before, .cor *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Telas estreitas de verdade (iPhone SE): a trilha de 5 passos aperta. Some o
   rótulo e ficam as bolinhas, que continuam dizendo onde ele está. */
@media (max-width: 22.5rem) {
  .cor-trilha li { font-size: 0; padding-top: 1.4rem; }
  .cor-cred { padding: 1rem .95rem .9rem; }
  .cor-cred-nome { font-size: 1.18rem; }
}

/* ---- Tela de estado (a página pública da perícia) ----------------------
   Ela tem 16 desfechos e um só formato: um símbolo, uma frase que diz o que
   houve, e o próximo passo. Antes cada desfecho remontava a estrutura à mão, e
   por isso 16 variações do mesmo cartão foram divergindo entre si -- umas com
   `alert-secondary`, outras com `bg-light`, umas em caixa alta de título,
   outras não. Aqui a estrutura é uma, e cada desfecho escolhe só o tom.

   O símbolo mora num círculo com o tom do estado, e não solto em 5rem de fonte:
   solto ele competia com o título pela primeira leitura. */

.cor-estado { text-align: center; }
.cor-estado-icone {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  margin: .5rem auto 1rem;
  border-radius: 999px;
  font-size: 1.75rem;
  line-height: 1;
}
.cor-estado h1 { margin-bottom: .5rem; }
.cor-estado-lead {
  font-size: 1.02rem;
  color: var(--c-ink-2);
  margin-bottom: 1.5rem;
}
.cor-estado-corpo { text-align: left; }

.cor-estado-ok .cor-estado-icone { background: var(--c-seal-wash); color: var(--c-seal); }
.cor-estado-acao .cor-estado-icone { background: var(--c-brand-wash); color: var(--c-brand); }
.cor-estado-atencao .cor-estado-icone { background: var(--c-attn-wash); color: var(--c-attn); }
.cor-estado-parada .cor-estado-icone { background: var(--c-stop-wash); color: var(--c-stop); }
.cor-estado-neutro .cor-estado-icone { background: #eef1f7; color: var(--c-ink-2); }

/* ---- Ficha da perícia (data, horário, endereço) ------------------------
   Era uma pilha de <div> com borda azul à esquerda, uma por campo. Vira lista
   de pares: o médico procura DOIS dados nesta tela, quando e onde, e uma lista
   os entrega em uma sacada. */
.cor-ficha {
  background: #f8fafd;
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-sm);
  padding: .35rem .9rem;
  margin-bottom: 1.25rem;
  text-align: left;
}
.cor-ficha .cor-linha { padding: .55rem 0; }

/* ---- Detalhe recolhível (recusar a perícia) ---------------------------- */
.cor-recolhivel > summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--c-ink-2);
  padding: .5rem 0;
  list-style: none;
}
.cor-recolhivel > summary::-webkit-details-marker { display: none; }
.cor-recolhivel > summary::before {
  content: "›";
  display: inline-block;
  margin-right: .4rem;
  transition: transform .15s ease;
}
.cor-recolhivel[open] > summary::before { transform: rotate(90deg); }
.cor-recolhivel > summary:hover { color: var(--c-brand); }

/* ---- A próxima perícia (o herói do painel do médico) -------------------
   A pergunta que traz o correspondente a esta tela é uma: "quando e onde é a
   minha próxima?". Por isso a data vem em corpo grande e na serifada, e o resto
   da tela se organiza abaixo dela. */

.cor-proxima {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-brand);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  padding: 1.1rem 1.15rem;
  margin-bottom: 1rem;
  transition: box-shadow .12s ease, transform .12s ease;
}
.cor-proxima:hover, .cor-proxima:focus-visible {
  color: inherit;
  box-shadow: var(--c-shadow-lift);
}
@media (hover: hover) { .cor-proxima:hover { transform: translateY(-1px); } }
.cor-proxima-data {
  font-family: var(--c-serif);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cor-proxima-hora {
  font-family: var(--c-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-ink-2);
}
.cor-proxima-onde { color: var(--c-ink-2); font-size: .9rem; margin-top: .4rem; }

/* ---- Lista de perícias ------------------------------------------------- */

.cor-lista { display: block; }
.cor-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .8rem 0;
  border-top: 1px solid var(--c-line);
  text-decoration: none;
  color: inherit;
}
.cor-item:first-child { border-top: 0; padding-top: 0; }
.cor-item:hover, .cor-item:focus-visible { color: var(--c-brand); }

/* Bloco de data: dia grande, mês pequeno. É como se lê uma agenda. */
.cor-item-data {
  flex: none;
  width: 3rem;
  text-align: center;
  line-height: 1.05;
}
.cor-item-dia {
  font-family: var(--c-serif);
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.cor-item-mes {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.cor-item-data.is-hoje .cor-item-dia { color: var(--c-stop); }

.cor-item-corpo { flex: 1 1 auto; min-width: 0; }
.cor-item-titulo {
  font-weight: 600;
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cor-item-sub {
  font-size: .8rem;
  color: var(--c-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cor-item-fim { flex: none; }

/* ---- Combinado / lista de instruções ----------------------------------- */

.cor-combinado { list-style: none; margin: 0; padding: 0; }
.cor-combinado li {
  position: relative;
  padding: .4rem 0 .4rem 1.4rem;
  font-size: .875rem;
  color: var(--c-ink-2);
  line-height: 1.5;
}
.cor-combinado li::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .95rem;
  width: .35rem;
  height: .35rem;
  border-radius: 999px;
  background: var(--c-brand);
}
.cor-combinado strong { color: var(--c-ink); font-weight: 650; }

/* ---- Números lado a lado (honorários) ---------------------------------- */

.cor-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1rem;
}
.cor-numero-valor {
  font-family: var(--c-serif);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cor-numero-valor.is-receber { color: var(--c-attn); }
.cor-numero-valor.is-recebido { color: var(--c-seal); }
.cor-numero-rotulo { font-size: .78rem; color: var(--c-ink-2); }

/* ---- Vídeo na lista ----------------------------------------------------
   A miniatura entra no lugar do ícone da `.cor-escolha`: num vídeo o quadro é
   a informação, e um ícone genérico não diz qual é qual. */
.cor-escolha-thumb {
  flex: none;
  position: relative;
  width: 5.5rem;
  height: 3.4rem;
  border-radius: 8px;
  overflow: hidden;
  background: #0d1626;
  display: grid;
  place-items: center;
}
.cor-escolha-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cor-escolha-thumb .bi {
  position: relative;
  color: #fff;
  font-size: 1.5rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

/* ---- Roteiro vertical (a preparação da perícia, a entrega) -------------
   Lista de passos com estado. Diferente da `.cor-trilha`, que é o progresso do
   CREDENCIAMENTO no alto da tela: aqui cada linha é uma coisa a fazer, algumas
   clicáveis, e o estado é feito/pendente. */

.cor-passos { list-style: none; margin: 0; padding: 0; }
.cor-passo {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .8rem 0;
  border-top: 1px solid var(--c-line);
  text-decoration: none;
  color: inherit;
}
.cor-passo:first-child { border-top: 0; padding-top: 0; }
a.cor-passo:hover .cor-passo-titulo,
a.cor-passo:focus-visible .cor-passo-titulo { color: var(--c-brand); }

.cor-passo-marca {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: .1rem;
  border-radius: 999px;
  font-family: var(--c-mono);
  font-size: .78rem;
  font-weight: 600;
  background: var(--c-brand-wash);
  color: var(--c-brand);
}
.cor-passo-marca.is-feito { background: var(--c-seal-wash); color: var(--c-seal); }
.cor-passo-marca.is-pendente { background: var(--c-attn-wash); color: var(--c-attn); }

.cor-passo-corpo { flex: 1 1 auto; min-width: 0; }
.cor-passo-titulo { font-weight: 600; color: var(--c-ink); line-height: 1.35; }
.cor-passo-sub { font-size: .82rem; color: var(--c-ink-2); line-height: 1.45; }
.cor-passo-seta { flex: none; color: var(--c-ink-3); align-self: center; }

/* ---- Hero da perícia --------------------------------------------------- */

.cor-hero {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-brand);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  padding: 1.15rem;
  margin-bottom: 1rem;
}
.cor-hero-data {
  font-family: var(--c-serif);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: .4rem 0 .15rem;
}
.cor-hero-hora {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--c-ink-2);
}
.cor-hero-extenso { color: var(--c-ink-2); font-size: .875rem; }
.cor-hero-onde {
  color: var(--c-ink-2);
  font-size: .9rem;
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px solid var(--c-line);
}

/* Cabeçalho de bloco com contagem à direita. */
.cor-bloco-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .6rem;
}
.cor-bloco-topo h2 { margin: 0; }

/* Nota de rodapé de um bloco (a regra que vale para a lista toda). */
.cor-rodape-bloco {
  margin: .85rem -1.15rem -1.15rem;
  padding: .7rem 1.15rem;
  border-top: 1px solid var(--c-line);
  background: #f8fafd;
  font-size: .8rem;
  color: var(--c-ink-2);
  border-radius: 0 0 var(--c-radius) var(--c-radius);
}
.cor-rodape-bloco.is-atencao {
  background: var(--c-attn-wash);
  color: var(--c-attn);
}