:root {
  /* Paleta baseada no site da clínica (Thaís Grace Odontologia) */
  --azul: #9c4f6e;        /* cor de destaque (vinho/mauve da marca) */
  --azul-escuro: #5a2a42; /* tom mais escuro da marca, usado em hover e detalhes */
  --azul-clara: #b8698a;  /* variante mais clara, pra gradientes/destaques suaves */
  --dourado: #cda45c;     /* dourado da marca — destaques */
  --dourado-escuro: #8a6524; /* variante mais escura, pra texto (contraste) */
  --fundo: #f7f5f1;
  --fundo-suave: #fdfaf7;
  --texto: #201a1d;
  --texto-suave: #4a4247;
  --borda: #e9e4e2;
  --borda-forte: #ddd5d3;
  --verde: #5e8c6a;
  --verde-escuro: #3c6947;
  --vermelho: #b0503d;
  --vermelho-escuro: #8f3d2c;
  --cinza: #776d72;

  --nav-bg-1: #2a1320;
  --nav-bg-2: #3e1d31;
  --nav-bg-3: #5a2a42;
  --nav-texto: #f6ecef;
  --nav-texto-suave: #cba8b6;

  --realce: #f6ecef;      /* fundo suave de destaque (hover, cabeçalhos) */
  --realce-dourado: #faf3e2; /* fundo suave dourado (dia atual, confirmações) */

  /* Escala de raio e sombra — dá o acabamento "SaaS moderno" de forma consistente */
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 18px;
  --sombra-1: 0 1px 2px rgba(32, 26, 29, 0.04), 0 1px 6px rgba(32, 26, 29, 0.05);
  --sombra-2: 0 6px 16px rgba(32, 26, 29, 0.09), 0 2px 6px rgba(32, 26, 29, 0.05);
  --sombra-popup: 0 16px 40px rgba(32, 26, 29, 0.18), 0 4px 12px rgba(32, 26, 29, 0.08);
  --transicao: 150ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Work Sans', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--dourado); color: var(--azul-escuro); }

/* ---------------------------------------------------------------------
   Menu lateral (sidebar)
--------------------------------------------------------------------- */
.lateral {
  position: fixed; top: 0; left: 0; bottom: 0; width: 244px; z-index: 100;
  display: flex; flex-direction: column;
  background:
    radial-gradient(130% 55% at 10% 0%, rgba(205, 164, 92, 0.12), transparent 60%),
    radial-gradient(90% 45% at 100% 100%, rgba(255, 255, 255, 0.05), transparent 55%),
    linear-gradient(165deg, var(--nav-bg-1), var(--nav-bg-2) 55%, var(--nav-bg-3));
  color: var(--nav-texto);
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 2px 0 24px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.lateral-topo {
  display: flex; align-items: center; gap: 11px; padding: 22px 18px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lateral-logo {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(205, 164, 92, 0.35);
}
.lateral-marca { display: flex; flex-direction: column; line-height: 1.25; }
.lateral-marca strong { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.02rem; letter-spacing: .01em; }
.lateral-marca span { font-size: 0.7rem; color: var(--nav-texto-suave); letter-spacing: .05em; text-transform: uppercase; }
.menu-fechar {
  display: none; margin-left: auto; background: none; border: none; color: var(--nav-texto);
  font-size: 1.1rem; cursor: pointer; opacity: .8; transition: opacity var(--transicao);
}
.menu-fechar:hover { opacity: 1; }

.lateral-nav { display: flex; flex-direction: column; padding: 14px 12px 14px 16px; flex: 1; gap: 2px; }
.lateral-nav a {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  color: var(--nav-texto-suave); text-decoration: none; font-size: 0.92rem; font-weight: 500;
  padding: 10px 12px; border-radius: var(--raio-sm);
  transition: background-color var(--transicao), color var(--transicao), transform var(--transicao);
}
.lateral-nav a svg { flex-shrink: 0; opacity: .85; transition: opacity var(--transicao); }
.lateral-nav a:hover { background: rgba(255, 255, 255, 0.08); color: var(--nav-texto); transform: translateX(1px); }
.lateral-nav a:hover svg { opacity: 1; }
.lateral-nav a.ativo {
  background: linear-gradient(90deg, rgba(205, 164, 92, 0.22), rgba(205, 164, 92, 0.07));
  color: var(--dourado); font-weight: 600;
  box-shadow: none;
}
.lateral-nav a.ativo::before {
  content: ""; position: absolute; top: 50%; left: -10px; transform: translateY(-50%);
  width: 4px; height: 58%; border-radius: 4px; background: var(--dourado);
}
.lateral-nav a.ativo svg { opacity: 1; }
.lateral-secao {
  margin: 16px 12px 6px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--nav-texto-suave); opacity: 0.65; font-weight: 600;
}

.lateral-rodape {
  padding: 16px 18px; border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; flex-direction: column; gap: 6px;
}
.lateral-usuario { font-size: 0.88rem; color: var(--nav-texto); font-weight: 500; }
.lateral-rodape a {
  color: var(--nav-texto-suave); font-size: 0.85rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; transition: color var(--transicao);
}
.lateral-rodape a:hover { color: var(--dourado); }

.menu-abrir {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 110;
  width: 42px; height: 42px; border-radius: var(--raio-sm); border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(58, 24, 45, 0.75); color: white; font-size: 1.15rem; cursor: pointer;
  box-shadow: var(--sombra-2);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.lateral-fundo {
  position: fixed; inset: 0; background: rgba(20, 12, 17, 0.32); z-index: 99;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}

@media (max-width: 860px) {
  .menu-abrir { display: block; }
  .lateral { transform: translateX(-100%); transition: transform .22s cubic-bezier(.4,0,.2,1); }
  .lateral.aberta { transform: translateX(0); }
  .menu-fechar { display: block; }
  .container.com-lateral { padding-top: 68px; }
}

.container { max-width: 920px; margin: 0 auto; padding: 28px 20px 64px; }
.container.com-lateral {
  margin-left: 244px;
  /* acompanha a resolução do monitor: fica compacto num notebook e usa mais
     espaço numa tela grande, sem nunca ficar "esticado" ao extremo */
  max-width: clamp(960px, 78vw, 1520px);
  padding: 28px clamp(20px, 2.6vw, 44px) 64px;
}
@media (max-width: 860px) {
  .container.com-lateral { margin-left: 0; max-width: 100%; padding: 20px 16px 48px; }
}

.login-logo { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; box-shadow: 0 0 0 4px var(--realce-dourado); }

h1 { margin-top: 0; color: var(--texto); font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -.01em; }
h2 {
  color: var(--texto); font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.18rem;
  margin-top: 36px; margin-bottom: 10px;
}

.subinfo { color: var(--cinza); margin-top: -8px; }
.ajuda { color: var(--cinza); font-size: 0.88rem; line-height: 1.5; max-width: 640px; }
.observacoes { background: white; border: 1px solid var(--borda); border-radius: var(--raio-md); padding: 14px 18px; box-shadow: var(--sombra-1); }

.cards { display: flex; gap: 18px; margin: 18px 0; flex-wrap: wrap; }
.card {
  background: white; border: 1px solid var(--borda); border-radius: var(--raio-lg);
  padding: 20px 22px; flex: 1; min-width: 180px;
  box-shadow: var(--sombra-1); transition: box-shadow var(--transicao), transform var(--transicao);
  display: flex; flex-direction: column; gap: 10px;
}
.card:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }
.card-icone {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--realce); color: var(--azul);
}
.card-icone.dourado { background: var(--realce-dourado); color: var(--dourado-escuro); }
.card-num { font-size: 2.1rem; font-weight: 700; color: var(--texto); line-height: 1; letter-spacing: -.02em; }
.card-label { color: var(--cinza); font-size: 0.85rem; }

.tabela {
  width: 100%; border-collapse: collapse; background: white; border-radius: var(--raio-md);
  overflow: hidden; box-shadow: var(--sombra-1); border: 1px solid var(--borda);
}
.tabela th, .tabela td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--borda); }
.tabela th {
  background: var(--fundo-suave); color: var(--texto-suave); font-size: 0.74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
.tabela tbody tr { transition: background-color var(--transicao); }
.tabela tbody tr:hover { background: var(--realce); cursor: pointer; }
.tabela tbody tr:last-child td { border-bottom: none; }

.badge {
  display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: .01em;
}
.badge-agendada { background: rgba(156, 79, 110, 0.12); color: var(--azul-escuro); }
.badge-concluida { background: rgba(94, 140, 106, 0.14); color: var(--verde-escuro); }
.badge-cancelada { background: rgba(176, 80, 61, 0.12); color: var(--vermelho-escuro); }
.badge-confirmada { background: rgba(94, 140, 106, 0.14); color: var(--verde-escuro); }
.badge-remarcar { background: rgba(205, 164, 92, 0.2); color: var(--dourado-escuro); }

.vazio {
  color: var(--cinza); font-style: normal; text-align: center; padding: 32px 16px;
  background: white; border: 1px dashed var(--borda-forte); border-radius: var(--raio-md);
}

/* Cor do nome do paciente na lista, de acordo com a resposta pelo WhatsApp */
.nome-confirmado { color: var(--verde-escuro); font-weight: 600; }
.nome-remarcar { color: var(--dourado-escuro); font-weight: 600; }
.nome-cancelada { color: var(--vermelho); text-decoration: line-through; opacity: 0.7; }

.acoes { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
.botao {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, var(--azul-clara), var(--azul));
  color: white; padding: 10px 18px;
  border-radius: var(--raio-sm); text-decoration: none; border: none; cursor: pointer; font-size: 0.92rem;
  font-weight: 500; letter-spacing: .01em; box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicao), transform var(--transicao), background var(--transicao);
}
.botao:hover { background: linear-gradient(180deg, var(--azul), var(--azul-escuro)); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.botao:active { transform: translateY(0); box-shadow: var(--sombra-1); }
.botao.secundario { background: white; color: var(--azul); border: 1px solid var(--borda-forte); box-shadow: none; }
.botao.secundario:hover { background: var(--realce); border-color: var(--azul); box-shadow: none; transform: none; }
.botao.perigo { background: linear-gradient(180deg, #c05f4b, var(--vermelho)); }
.botao.perigo:hover { background: linear-gradient(180deg, var(--vermelho), var(--vermelho-escuro)); }

.tabela-acoes { display: flex; gap: 8px; align-items: center; }
.tabela.estatica tbody tr:hover { background: none; cursor: default; }

.form {
  display: flex; flex-direction: column; gap: 4px; max-width: 480px; background: white;
  padding: 24px; border-radius: var(--raio-md); border: 1px solid var(--borda); box-shadow: var(--sombra-1);
}
.form label { margin-top: 14px; font-size: 0.83rem; color: var(--texto-suave); font-weight: 500; }
.form input, .form select, .form textarea {
  padding: 10px 13px; border: 1px solid var(--borda-forte); border-radius: var(--raio-sm);
  font-size: 0.95rem; font-family: inherit; color: var(--texto); background: var(--fundo-suave);
  transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--azul); background: white; box-shadow: 0 0 0 3px rgba(156, 79, 110, 0.13);
}
.form button {
  margin-top: 22px; background: linear-gradient(180deg, var(--azul-clara), var(--azul)); color: white;
  border: none; padding: 12px; border-radius: var(--raio-sm); font-size: 0.98rem; font-weight: 600;
  cursor: pointer; box-shadow: var(--sombra-1); transition: box-shadow var(--transicao), transform var(--transicao), background var(--transicao);
}
.form button:hover { background: linear-gradient(180deg, var(--azul), var(--azul-escuro)); box-shadow: var(--sombra-2); transform: translateY(-1px); }

.busca {
  display: flex; gap: 10px; margin-bottom: 16px; background: white; padding: 12px 14px;
  border-radius: var(--raio-md); border: 1px solid var(--borda); box-shadow: var(--sombra-1);
}
.busca input {
  padding: 9px 13px; border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); flex: 1; max-width: 320px;
  background: var(--fundo-suave); font-family: inherit; transition: border-color var(--transicao), background var(--transicao);
}
.busca input:focus { outline: none; border-color: var(--azul); background: white; }
.busca select {
  padding: 9px 13px; border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); font-size: 0.9rem;
  background: var(--fundo-suave); color: var(--texto); font-family: inherit;
}
.busca button {
  padding: 9px 18px; border: none; background: linear-gradient(180deg, var(--azul-clara), var(--azul));
  color: white; border-radius: var(--raio-sm); cursor: pointer; font-weight: 500;
  transition: background var(--transicao);
}
.busca button:hover { background: linear-gradient(180deg, var(--azul), var(--azul-escuro)); }

.login-box {
  max-width: 360px; margin: 90px auto; background: white; padding: 38px 34px;
  border-radius: var(--raio-lg); border: 1px solid var(--borda); text-align: center;
  box-shadow: var(--sombra-2);
  position: relative; overflow: hidden;
}
.login-box::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--azul-escuro), var(--azul), var(--dourado));
}
.login-box h1 { font-size: 1.4rem; }
.login-box form { display: flex; flex-direction: column; text-align: left; }
.login-box label { margin-top: 16px; font-size: 0.83rem; color: var(--texto-suave); font-weight: 500; }
.login-box input {
  padding: 11px 13px; border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); font-size: 1rem;
  background: var(--fundo-suave); font-family: inherit; transition: border-color var(--transicao), background var(--transicao);
}
.login-box input:focus { outline: none; border-color: var(--azul); background: white; box-shadow: 0 0 0 3px rgba(156, 79, 110, 0.13); }
.login-box button {
  margin-top: 24px; background: linear-gradient(180deg, var(--azul-clara), var(--azul)); color: white; border: none;
  padding: 12px; border-radius: var(--raio-sm); font-size: 1rem; font-weight: 600; cursor: pointer;
  box-shadow: var(--sombra-1); transition: box-shadow var(--transicao), transform var(--transicao), background var(--transicao);
}
.login-box button:hover { background: linear-gradient(180deg, var(--azul), var(--azul-escuro)); box-shadow: var(--sombra-2); transform: translateY(-1px); }

.flash-list { margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.flash {
  padding: 11px 15px; border-radius: var(--raio-sm); font-size: 0.9rem; font-weight: 500;
  border: 1px solid transparent;
}
.flash-success { background: #eaf2e6; color: var(--verde-escuro); border-color: rgba(94, 140, 106, 0.25); }
.flash-error { background: #f7e4df; color: var(--vermelho-escuro); border-color: rgba(176, 80, 61, 0.25); }
.flash-info { background: var(--realce-dourado); color: var(--azul-escuro); border-color: rgba(205, 164, 92, 0.3); }

/* ---------------------------------------------------------------------
   Agenda — alternância lista/semana e grade semanal
--------------------------------------------------------------------- */
[hidden] { display: none !important; }

.agenda-topo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.agenda-alternar { display: flex; gap: 8px; }

.agenda-nav { display: flex; align-items: center; gap: 12px; margin: 18px 0; flex-wrap: wrap; }
.agenda-nav .periodo { font-weight: 600; color: var(--texto); min-width: 220px; text-align: center; }
.agenda-nav .seta {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm); background: white; color: var(--azul-escuro);
  text-decoration: none; font-size: 1.1rem; box-shadow: var(--sombra-1); transition: background-color var(--transicao), box-shadow var(--transicao);
}
.agenda-nav .seta:hover { background: var(--realce); box-shadow: var(--sombra-2); }

.agenda-scroll { overflow-x: auto; margin-top: 4px; border-radius: var(--raio-md); }
.grade-semana {
  display: flex; min-width: 780px; background: white; border: 1px solid var(--borda);
  border-radius: var(--raio-md); overflow: hidden; box-shadow: var(--sombra-1);
}
.grade-horas { width: 58px; flex-shrink: 0; border-right: 1px solid var(--borda); }
.grade-dia { flex: 1; min-width: 100px; border-right: 1px solid var(--borda); position: relative; }
.grade-dia:last-child { border-right: none; }
.grade-dia.hoje { background: var(--realce-dourado); }

.grade-cabecalho {
  height: 52px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
  justify-content: center; border-bottom: 1px solid var(--borda); background: var(--fundo-suave);
}
.grade-dia-nome { font-size: 0.7rem; color: var(--cinza); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.grade-dia-num { font-size: 0.95rem; font-weight: 600; color: var(--texto); margin-top: 3px; }
.grade-dia.hoje .grade-dia-num {
  background: var(--dourado); color: var(--azul-escuro); border-radius: 50%; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 4px;
  box-shadow: 0 2px 6px rgba(205, 164, 92, 0.4);
}

.grade-hora-label {
  height: 60px; box-sizing: border-box; font-size: 0.72rem; color: var(--cinza);
  text-align: right; padding: 0 10px; transform: translateY(-0.6em);
}
.grade-coluna { position: relative; }
.grade-linha { height: 60px; box-sizing: border-box; border-bottom: 1px solid var(--borda); cursor: pointer; transition: background-color var(--transicao); }
.grade-linha:hover { background: var(--realce); }

.evento {
  position: absolute; left: 4px; right: 4px; height: 46px; border-radius: var(--raio-sm); padding: 5px 9px;
  font-size: 0.78rem; color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); z-index: 2;
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.evento:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.24); transform: translateY(-1px); }
.evento.status-agendada { background: linear-gradient(180deg, var(--azul-clara), var(--azul)); }
.evento.status-confirmada { background: linear-gradient(180deg, #6c9c78, var(--verde)); }
.evento.status-remarcar { background: linear-gradient(180deg, #dab470, var(--dourado)); color: var(--texto); }
.evento.status-concluida { background: linear-gradient(180deg, #6c9c78, var(--verde)); }
.evento.status-cancelada { background: linear-gradient(180deg, #c05f4b, var(--vermelho)); }

.popup-consulta {
  position: fixed; z-index: 1000; background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--raio-md); box-shadow: var(--sombra-popup); padding: 18px;
  min-width: 250px; max-width: 300px;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.popup-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.popup-cabecalho strong { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.05rem; }
.popup-fechar {
  background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--cinza);
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--transicao);
}
.popup-fechar:hover { background: var(--realce); }
.popup-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.popup-acoes form { display: inline-flex; }

/* Anexos (fotos/exames) */
.anexos-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 12px;
}
.anexo-item {
  background: white; border: 1px solid var(--borda); border-radius: var(--raio-md); overflow: hidden;
  box-shadow: var(--sombra-1); display: flex; flex-direction: column;
}
.anexo-item img { width: 100%; height: 110px; object-fit: cover; display: block; }
.anexo-arquivo {
  height: 110px; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 10px; font-size: 0.82rem; color: var(--azul); background: var(--realce); word-break: break-word;
}
.anexo-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px;
  font-size: 0.78rem; color: var(--texto-suave);
}
.anexo-rodape span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Odontograma */
.odontograma { margin-top: 12px; }
.odontograma-arcada { display: flex; justify-content: center; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.dente {
  width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--borda-forte); background: white;
  display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 600;
  cursor: pointer; color: var(--texto-suave); transition: transform var(--transicao), box-shadow var(--transicao);
}
.dente:hover { transform: translateY(-2px); box-shadow: var(--sombra-1); }
.dente.status-saudavel { background: white; }
.dente.status-carie { background: rgba(143, 61, 44, 0.16); border-color: var(--vermelho-escuro); color: var(--vermelho-escuro); }
.dente.status-restaurado { background: rgba(61, 107, 138, 0.16); border-color: #3d6b8a; color: #3d6b8a; }
.dente.status-canal { background: rgba(138, 101, 36, 0.16); border-color: var(--dourado-escuro); color: var(--dourado-escuro); }
.dente.status-extraido { background: var(--realce); border-color: var(--cinza); color: var(--cinza); text-decoration: line-through; }
.dente.status-ausente { background: var(--fundo-suave); border-style: dashed; color: var(--cinza); opacity: 0.6; }
.dente.status-implante { background: rgba(94, 140, 106, 0.16); border-color: var(--verde-escuro); color: var(--verde-escuro); }
.dente.status-a_extrair { background: rgba(205, 164, 92, 0.2); border-color: var(--dourado); color: var(--dourado-escuro); }
.odontograma-legenda { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; font-size: 0.78rem; color: var(--texto-suave); }
.odontograma-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.odontograma-legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.popup-dente {
  position: fixed; z-index: 1000; background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--raio-md); box-shadow: var(--sombra-popup); padding: 16px; width: 260px;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

/* Relatórios: gráfico de rosca em SVG puro, sem depender de biblioteca externa */
.relatorio-pizza { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; margin-top: 10px; }
.relatorio-pizza svg circle { transition: stroke-dasharray var(--transicao); }
.relatorio-pizza-numero { font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 600; fill: var(--texto); }
.relatorio-pizza-legenda-central { font-size: 11px; fill: var(--texto-suave); }
.relatorio-pizza-legenda { display: flex; flex-direction: column; gap: 11px; }
.relatorio-pizza-item { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--texto-suave); }
.relatorio-pizza-item i { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.relatorio-pizza-item strong { color: var(--texto); font-weight: 600; margin-left: 6px; }
.popup-acoes .botao { padding: 7px 12px; font-size: 0.82rem; }