/* ═══════════════════════════════════════════════════════════════════════
   O PRONTUÁRIO ODONTOLÓGICO
   ═══════════════════════════════════════════════════════════════════════
   Todo seletor começa em `.cli-det-odonto`. É a mesma regra que o jurídico
   segue e pela mesma razão: um estilo de consultório não pode alcançar a
   ficha de um advogado nem a de uma corretora. Há teste guardando isso do
   lado do jurídico, e este arquivo entra no mesmo contrato.

   ── A COR DIZ O ESTADO, E A FORMA TAMBÉM ────────────────────────────────
   Azul para o que foi feito, vermelho para o que falta — a convenção que os
   softwares de consultório usam. Mas ausente e extração indicada levam TAMBÉM
   um X: cor sozinha não sobrevive a uma impressão em preto e branco nem a
   quem não distingue vermelho de verde, e um prontuário é impresso.
   ═══════════════════════════════════════════════════════════════════════ */

.cli-det-odonto{
  --odo-linha:rgba(255,255,255,.16);
  --odo-dente:rgba(255,255,255,.05);
  --odo-raiz:rgba(255,255,255,.10);
  --odo-num:rgba(240,240,240,.45);
  --odo-sel:#2f7ff2;
}
html[data-theme="light"] .cli-det-odonto{
  --odo-linha:#b6c9de;
  --odo-dente:#fff;
  --odo-raiz:#eaf1f9;
  --odo-num:#71869d;
  --odo-sel:#2f7ff2;
}

/* ── O MAPA ────────────────────────────────────────────────────────────── */
.cli-det-odonto .odo-mapa{
  display:flex;flex-direction:column;gap:16px;
  padding:18px 10px 14px;
  overflow-x:auto;
}
.cli-det-odonto .odo-arco{
  display:flex;align-items:flex-end;justify-content:center;gap:0;
}
/* A arcada inferior espelha a superior: as raízes apontam para fora da boca
   nos dois casos, e é isso que faz o desenho parecer uma boca. */
.cli-det-odonto .odo-arco-inf{align-items:flex-start;}
.cli-det-odonto .odo-quadrante{display:flex;gap:3px;}
/* A LINHA MÉDIA. Sem ela, 11 e 21 encostam e a leitura do quadrante se perde
   justamente onde ela mais importa. */
.cli-det-odonto .odo-meio{
  width:1px;align-self:stretch;margin:6px 9px;
  background:var(--odo-linha);
}

.cli-det-odonto .odo-dente{
  border:0;background:none;padding:2px 1px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  border-radius:7px;transition:background .14s,transform .14s;
}
.cli-det-odonto .odo-arco-inf .odo-dente{flex-direction:column-reverse;}
.cli-det-odonto .odo-dente:hover{background:rgba(47,127,242,.10);transform:translateY(-1px);}
.cli-det-odonto .odo-arco-inf .odo-dente:hover{transform:translateY(1px);}
.cli-det-odonto .odo-dente.sel{
  background:rgba(47,127,242,.16);
  box-shadow:inset 0 0 0 1.5px var(--odo-sel);
}
.cli-det-odonto .odo-dente-svg{width:38px;height:78px;display:block;}
.cli-det-odonto .odo-num{
  font-family:'JetBrains Mono',monospace;font-size:.62rem;
  color:var(--odo-num);line-height:1;
}
.cli-det-odonto .odo-dente.marcado .odo-num{color:var(--light-ink,#f0f0f0);font-weight:700;}

.cli-det-odonto .odo-raiz{fill:var(--odo-raiz);stroke:var(--odo-linha);stroke-width:1;}
.cli-det-odonto .odo-coroa{fill:var(--odo-dente);stroke:var(--odo-linha);stroke-width:1.2;}
/* A face começa invisível: pintar as cinco de cinza faria todo dente hígido
   parecer um mosaico marcado. Ela aparece no hover, para dizer que é
   clicável, e fica quando marcada. */
.cli-det-odonto .odo-face{fill:transparent;stroke:var(--odo-linha);stroke-width:.5;cursor:pointer;}
.cli-det-odonto .odo-face:hover{fill:rgba(47,127,242,.28);}
.cli-det-odonto .odo-face.marcada{stroke-width:.6;}
.cli-det-odonto .odo-x{stroke-width:2;stroke-linecap:round;fill:none;}

.cli-det-odonto .odo-mapa.deciduos .odo-dente-svg{width:30px;height:62px;}
.cli-det-odonto .odo-mapa.deciduos .odo-num{font-size:.56rem;}

/* ── A LEGENDA ─────────────────────────────────────────────────────────── */
.cli-det-odonto .odo-legenda{
  display:flex;flex-wrap:wrap;gap:7px 16px;
  padding:10px 14px 4px;border-top:1px solid var(--odo-linha);
}
.cli-det-odonto .odo-leg-item{
  display:flex;align-items:center;gap:6px;
  font-size:.72rem;color:var(--light-muted,rgba(240,240,240,.6));
}
.cli-det-odonto .odo-leg-item i{
  width:10px;height:10px;border-radius:3px;flex-shrink:0;
}

/* ── O PAINEL DO DENTE SELECIONADO ─────────────────────────────────────── */
.cli-det-odonto .odo-ficha{
  border:1px solid var(--odo-linha);border-radius:13px;
  padding:14px 16px;margin-top:12px;
  background:var(--light-surface,rgba(255,255,255,.03));
}
.cli-det-odonto .odo-ficha-cab{
  display:flex;align-items:center;gap:11px;margin-bottom:12px;
}
.cli-det-odonto .odo-ficha-num{
  font-family:'JetBrains Mono',monospace;font-size:1.32rem;font-weight:700;
  color:var(--light-ink,#f0f0f0);
}
.cli-det-odonto .odo-ficha-tipo{
  font-size:.74rem;color:var(--light-muted,rgba(240,240,240,.6));
}
.cli-det-odonto .odo-ficha-x{
  margin-left:auto;border:0;background:none;cursor:pointer;
  color:var(--light-faint,rgba(240,240,240,.4));font-size:1rem;padding:2px 6px;
}
.cli-det-odonto .odo-estados{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.cli-det-odonto .odo-estado{
  padding:6px 12px;border-radius:16px;cursor:pointer;
  border:1px solid var(--odo-linha);background:none;
  font-family:inherit;font-size:.74rem;font-weight:600;
  color:var(--light-muted,rgba(240,240,240,.6));
  display:flex;align-items:center;gap:7px;
}
.cli-det-odonto .odo-estado i{width:9px;height:9px;border-radius:3px;}
.cli-det-odonto .odo-estado:hover{border-color:var(--odo-sel);}
.cli-det-odonto .odo-estado.on{
  border-color:currentColor;font-weight:700;
}
.cli-det-odonto .odo-faces-rot{
  font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--light-faint,rgba(240,240,240,.4));margin:4px 0 7px;
}
.cli-det-odonto .odo-nota{
  width:100%;min-height:56px;resize:vertical;
  border:1px solid var(--odo-linha);border-radius:9px;padding:9px 11px;
  background:var(--light-surface-soft,rgba(255,255,255,.03));
  color:var(--light-ink,#f0f0f0);
  font-family:'Inter',sans-serif;font-size:.8rem;line-height:1.5;
}

/* ── O RESUMO ──────────────────────────────────────────────────────────── */
.cli-det-odonto .odo-resumo{display:flex;flex-wrap:wrap;gap:8px;}
.cli-det-odonto .odo-kpi{
  flex:1;min-width:120px;
  border:1px solid var(--odo-linha);border-radius:11px;padding:10px 13px;
  background:var(--light-surface,rgba(255,255,255,.03));
}
.cli-det-odonto .odo-kpi b{
  display:block;font-size:1.35rem;line-height:1.1;
  color:var(--light-ink,#f0f0f0);
}
.cli-det-odonto .odo-kpi span{
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--light-faint,rgba(240,240,240,.42));
}
.cli-det-odonto .odo-kpi.pendente b{color:#c2334a;}
.cli-det-odonto .odo-kpi.tratado b{color:#0b7f59;}

/* ── EXAMES E FOTOS ─────────────────────────────────────────────────────
   Duas faixas abaixo do mapa, com a mesma moldura dos cartões da ficha para
   que a tela continue sendo UMA página, e não três blocos empilhados de
   origens diferentes. */
.cli-det-odonto .odo-faixa{
  margin-top:16px;padding-top:14px;
  border-top:1px solid var(--odo-linha);
}
.cli-det-odonto .odo-faixa-cab{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:10px;
}
.cli-det-odonto .odo-faixa-tit{
  margin:0;font-size:.72rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--light-faint,rgba(240,240,240,.5));
}
.cli-det-odonto .odo-exame-tipos{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;
}
.cli-det-odonto .odo-exame-tipo{
  border:1px solid var(--odo-linha);border-radius:999px;
  padding:5px 11px;cursor:pointer;
  background:var(--light-surface-soft,rgba(255,255,255,.05));
  font-family:'Inter',sans-serif;font-size:.7rem;font-weight:600;
  color:var(--light-muted,rgba(240,240,240,.72));
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.cli-det-odonto .odo-exame-tipo{
  display:inline-flex;align-items:center;gap:7px;
}
.cli-det-odonto .odo-exame-tipo:hover{
  border-color:#2f7ff2;color:#2f7ff2;background:rgba(47,127,242,.08);
}
/* ── O CHIP QUE JÁ TEM IMAGEM ───────────────────────────────────────────
   A capa é a última imagem anexada a um exame daquele tipo, e o número diz
   quantas há. Juntos, eles respondem "já fizemos essa?" antes de qualquer
   clique — que é a pergunta que se faz olhando uma lista de tipos. */
.cli-det-odonto .odo-exame-tipo.tem-foto{
  padding-left:5px;border-color:#2f7ff2;color:var(--light-ink,#f0f0f0);
}
.cli-det-odonto .odo-exame-tipo-rot{white-space:nowrap;}
.cli-det-odonto .odo-exame-capa{
  width:26px;height:20px;border-radius:5px;object-fit:cover;display:block;
  background:#0b1626;flex-shrink:0;
}
.cli-det-odonto .odo-exame-conta{
  min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#2f7ff2;color:#fff;font-size:.62rem;font-weight:800;
}
/* Durante o arrasto, o chip sob o ponteiro é o único que se acende: com
   oito acesos, não daria para saber onde a imagem vai cair. */
.cli-det-odonto .odo-exame-tipo.alvo{
  border-color:#2f7ff2;background:rgba(47,127,242,.16);color:#2f7ff2;
  transform:translateY(-1px);
}
.cli-det-odonto .odo-exame-tipo.gravando{opacity:.55;pointer-events:none;}
.cli-det-odonto .odo-exame-lista{display:flex;flex-direction:column;gap:6px;}
.cli-det-odonto .odo-exame{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  border:1px solid var(--odo-linha);border-radius:10px;padding:9px 12px;
  background:var(--light-surface,rgba(255,255,255,.03));
}
.cli-det-odonto .odo-exame-nome{
  font-size:.8rem;font-weight:600;color:var(--light-ink,#f0f0f0);
}
.cli-det-odonto .odo-exame-st{
  font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--odo-linha);border-radius:999px;padding:2px 8px;
  color:var(--light-muted,rgba(240,240,240,.72));
}
.cli-det-odonto .odo-exame-det{
  font-size:.72rem;color:var(--light-faint,rgba(240,240,240,.5));
}
.cli-det-odonto .odo-exame-doc{
  margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;
  font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;
  color:#2f7ff2;text-decoration:underline;text-underline-offset:2px;
}
.cli-det-odonto .odo-faixa-mais{
  margin-top:8px;border:0;background:transparent;cursor:pointer;padding:0;
  font-family:'Inter',sans-serif;font-size:.74rem;font-weight:600;color:#2f7ff2;
}

/* A foto é o exame que se lê de relance: a grade é de miniatura grande, e não
   de lista com nome, porque ninguém reconhece uma radiografia pelo nome do
   arquivo. */
.cli-det-odonto .odo-fotos{
  display:grid;gap:9px;
  grid-template-columns:repeat(auto-fill,minmax(116px,1fr));
}
.cli-det-odonto .odo-foto{
  display:flex;flex-direction:column;gap:5px;padding:0;cursor:pointer;
  border:1px solid var(--odo-linha);border-radius:11px;overflow:hidden;
  background:var(--light-surface,rgba(255,255,255,.03));
  transition:border-color .15s ease,transform .15s ease;
}
.cli-det-odonto .odo-foto:hover{border-color:#2f7ff2;transform:translateY(-2px);}
.cli-det-odonto .odo-foto-img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  background:var(--light-surface-soft,rgba(255,255,255,.04));
}
/* Sem bytes para mostrar, a moldura não pode virar um retângulo vazio sem
   explicação: some a imagem e fica o nome, que ainda é clicável. */
.cli-det-odonto .odo-foto.sem-imagem .odo-foto-img{display:none;}
.cli-det-odonto .odo-foto.sem-imagem{min-height:70px;justify-content:center;}
.cli-det-odonto .odo-foto-nome{
  padding:0 8px 8px;font-family:'Inter',sans-serif;font-size:.68rem;
  line-height:1.35;color:var(--light-muted,rgba(240,240,240,.72));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── O VISOR ────────────────────────────────────────────────────────────
   A imagem escolhida fica ACIMA das arcadas, e não num modal: o dentista
   compara a panorâmica com o mapa, e uma janela por cima cobre justamente o
   que se quer comparar.

   Vazio, ele não ocupa espaço nenhum — só existe quando há imagem. */
.cli-det-odonto .odo-visor{display:none;}
.cli-det-odonto .odo-visor.tem{
  display:block;margin:0 0 14px;
  border:1px solid var(--odo-linha);border-radius:13px;overflow:hidden;
  background:var(--light-surface-soft,rgba(255,255,255,.04));
}
.cli-det-odonto .odo-visor-barra{
  display:flex;align-items:center;gap:10px;padding:8px 10px 8px 13px;
  border-bottom:1px solid var(--odo-linha);
}
.cli-det-odonto .odo-visor-nome{
  flex:1;min-width:0;font-size:.76rem;font-weight:600;
  color:var(--light-ink,#f0f0f0);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cli-det-odonto .odo-visor-btn{
  border:1px solid var(--odo-linha);border-radius:8px;padding:4px 10px;
  background:var(--light-surface,rgba(255,255,255,.05));cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;
  color:var(--light-muted,rgba(240,240,240,.72));
}
.cli-det-odonto .odo-visor-btn:hover{border-color:#2f7ff2;color:#2f7ff2;}
.cli-det-odonto .odo-visor-x{
  padding:2px 9px;font-size:1rem;line-height:1.2;
}
/* Radiografia é escura e larga: `contain` mostra a imagem inteira, e o fundo
   escuro é o negatoscópio — sobre branco, uma panorâmica perde as raízes. */
.cli-det-odonto .odo-visor-img{
  display:block;width:100%;max-height:330px;object-fit:contain;
  background:#0b1626;
}
.cli-det-odonto .odo-foto.sel{
  border-color:#2f7ff2;box-shadow:0 0 0 2px rgba(47,127,242,.28);
}
/* O × fica POR CIMA da miniatura, no canto, e SEMPRE VISÍVEL.
   Ele nasceu escondido até o ponteiro passar, com o argumento de que um
   botão de apagar à mostra convida ao clique errado. O argumento estava
   errado na prática: a pessoa com dez cópias na tela procurou o excluir e
   não achou — um controle que só existe no hover não existe para quem está
   procurando por ele, e no toque não existe nunca.

   O risco de clique errado é tratado onde deve ser: a confirmação do
   `removerDoc`, que é a mesma da aba Documentos. */
.cli-det-odonto .odo-foto-caixa{position:relative;}
.cli-det-odonto .odo-foto-caixa .odo-foto{width:100%;}
.cli-det-odonto .odo-foto-x{
  position:absolute;top:6px;right:6px;
  width:24px;height:24px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--odo-linha);
  background:var(--light-surface,rgba(20,26,38,.86));
  color:var(--light-muted,rgba(240,240,240,.72));
  font-family:'Inter',sans-serif;font-size:1rem;line-height:1;
  opacity:.82;box-shadow:0 1px 4px rgba(15,39,68,.18);
  transition:opacity .15s ease,color .15s ease,border-color .15s ease,background .15s ease;
}
.cli-det-odonto .odo-foto-caixa:hover .odo-foto-x{opacity:1;}
.cli-det-odonto .odo-foto-x:hover,
.cli-det-odonto .odo-foto-x:focus-visible{
  opacity:1;border-color:#c2334a;color:#c2334a;background:#fff5f6;
}

/* ── ARRASTAR PARA CIMA ─────────────────────────────────────────────────
   O alvo é o prontuário inteiro. A moldura só aparece durante o arrasto,
   porque um tracejado permanente na tela é ruído em cem por cento do tempo
   para um gesto que acontece em um. */
.cli-det-odonto .odo-bloco{position:relative;}
.cli-det-odonto .odo-bloco.odo-soltando::after{
  content:'';position:absolute;inset:-4px;pointer-events:none;
  border:2px dashed #2f7ff2;border-radius:15px;
  background:rgba(47,127,242,.07);
}

@media (max-width:760px){
  .cli-det-odonto .odo-visor-img{max-height:210px;}
  .cli-det-odonto .odo-foto-x{opacity:1;width:26px;height:26px;}
  .cli-det-odonto .odo-dente-svg{width:27px;height:55px;}
  .cli-det-odonto .odo-meio{margin:4px 5px;}
}