/* ============================================================
   G-CODE® — Acabamento premium da área do paciente
   ------------------------------------------------------------
   Camada VISUAL apenas. Importar DEPOIS do <style> inline da página
   para vencer por ordem de cascata (mesma especificidade).

   REGRA: este arquivo não introduz nenhum id nem depende de lógica.
   Ele só reveste classes que já existem (.nav-item, .hero-card,
   .stat-card, .mini-stat-card, .section, .score-badge) e adiciona o
   componente .score-ring, desenhado por renderScoreBlock().

   Tudo que anima respeita prefers-reduced-motion.

   ⚠️ CACHE: este arquivo é servido com Cache-Control immutable por 1 ano
   (ver _headers). SEMPRE que editar este arquivo, suba o ?v= em TODAS as
   páginas que o importam (hoje: gcode-perfil.html e gcode-admin.html) —
   senão quem já carregou a versão anterior nunca vê a mudança, mesmo
   depois do deploy. Foi exatamente isso que quebrou os modais do admin
   numa rodada anterior: o arquivo cresceu, o ?v= não subiu, e o navegador
   continuou servindo a cópia antiga do cache.
   ============================================================ */

:root{
  --pr-ocean:#1E5D92;
  --pr-ocean-dk:#174f7d;
  --pr-cream:#D8F1FB;
  --pr-glow:rgba(30,93,146,.45);
  --pr-ease:cubic-bezier(.22,.8,.28,1);
  /* sombra em duas camadas, tingida de ocean (contato + profundidade) */
  --pr-sh-hover:0 4px 10px rgba(23,79,125,.10), 0 22px 44px -14px rgba(23,79,125,.28);
}

/* ── NAV: item ativo com gradiente ocean + ícone com glow ──────────────── */
.nav-item{ position:relative; overflow:hidden; }
.nav-item.active{
  color:#fff;
  background:linear-gradient(90deg, rgba(30,93,146,.35) 0%, rgba(30,93,146,.10) 60%, transparent 100%);
  border-left-color:var(--pr-cream);
}
/* faixinha luminosa na borda esquerda do item ativo */
.nav-item.active::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--pr-cream);
  box-shadow:0 0 10px 1px var(--pr-glow);
}
.nav-item.active svg{
  opacity:1;
  filter:drop-shadow(0 0 5px var(--pr-glow));
  color:var(--pr-cream);
}
.nav-item svg{ transition:filter .25s var(--pr-ease), transform .25s var(--pr-ease); }
.nav-item:hover svg{ transform:translateX(1px); }

/* ── HERO CARD: brilho radial cinematográfico ─────────────────────────── */
/* O .hero-card já é escuro (gradiente --ink). Aqui só somamos o glow ocean
   que vaza do canto superior direito, dando profundidade sem tocar no texto. */
.hero-card{ position:relative; isolation:isolate; }
.hero-card::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(30,93,146,.55) 0%, rgba(30,93,146,0) 55%),
    radial-gradient(80% 70% at 0% 120%, rgba(216,241,251,.10) 0%, rgba(216,241,251,0) 60%);
}
/* linha de luz sutil na borda superior */
.hero-card::after{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:-1;
  background:linear-gradient(90deg, transparent, rgba(216,241,251,.5), transparent);
}

/* ── CARDS: elevação em hover ─────────────────────────────────────────── */
.stat-card,.mini-stat-card,.card{
  transition:transform .3s var(--pr-ease), box-shadow .3s var(--pr-ease);
  will-change:transform;
}
.stat-card:hover,.mini-stat-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--pr-sh-hover);
}
/* .card é maior (lista de consultas/diagnósticos): elevação mais contida */
.card:hover{ box-shadow:var(--pr-sh-hover); }

/* ── SEÇÃO: fade-in suave ao trocar de aba ────────────────────────────── */
/* showSection() só alterna a classe .active — a animação entra sozinha. */
@media (prefers-reduced-motion: no-preference){
  .section.active{ animation:prSectionIn .42s var(--pr-ease) both; }
  @keyframes prSectionIn{
    from{ opacity:0; transform:translateY(10px); }
    to  { opacity:1; transform:none; }
  }
}

/* ── SCORE RING: anel SVG animável + número contando ──────────────────── */
/* Substitui o número estático em renderScoreBlock(). O preenchimento e a
   contagem são feitos por animateScoreRing() logo após a inserção no DOM. */
.score-ring{
  position:relative;
  width:112px;height:112px;
  margin:0 auto 8px;
  color:var(--pr-ocean); /* cor base do arco; renderScoreBlock sobrescreve por faixa */
}
.score-ring svg{
  width:100%;height:100%;
  transform:rotate(-90deg); /* começa o arco no topo */
  display:block;
}
.score-ring-track{
  fill:none;
  stroke:rgba(30,93,146,.14);
  stroke-width:9;
}
.score-ring-arc{
  fill:none;
  stroke:currentColor;
  stroke-width:9;
  stroke-linecap:round;
  /* dasharray/offset definidos por animateScoreRing (circunferência ≈ 326.73) */
  stroke-dashoffset:326.726;
  stroke-dasharray:326.726;
  filter:drop-shadow(0 0 5px rgba(30,93,146,.55));
}
.score-ring-center{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1;
}
.score-ring-num{
  font-family:'Cormorant Garamond',serif;
  font-size:40px;font-weight:300;
  color:var(--ink,#1B202A);
}
.score-ring-denom{
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mid,#4E5D6E);margin-top:3px;
}
@media (prefers-reduced-motion: reduce){
  .score-ring-arc{ filter:none; transition:none !important; }
}

/* ============================================================
   FLIP PARA FUNDO ESCURO — telas internas da área do paciente
   ------------------------------------------------------------
   Tudo aqui é sobrescrita de CSS puro sobre classes que já existem no
   <style> inline de gcode-perfil.html. Como este arquivo é importado
   DEPOIS daquele <style>, vence por ordem de cascata (mesma especifi-
   cidade), sem precisar de !important em lugar nenhum.

   Contraste verificado (WCAG) antes de escolher os valores abaixo:
     texto alto   (#F7F7F5)                  -> 15.2:1 sobre --ink
     texto médio  (rgba(247,247,245,.68))    ->  6.7:1 sobre a superfície do card
     ocean claro  (#8fc6ee)                  ->  8.9:1 sobre --ink
     roxo info    (#C4B5FD)                  ->  7.9:1 sobre a superfície do card
     borda de CAMPO interativo (35% branco)  ->  3.2:1 (mínimo AA p/ contorno de UI)
   Bordas de CARD (não-interativas) ficam mais sutis (10-12%) de propósito:
   cards já se distinguem pelo preenchimento + sombra, então a borda ali é
   só um acabamento — diferente do contorno de um input, que É a pista
   visual de onde clicar, e por isso precisa do contraste mais alto.

   O QUE NÃO MUDA: .hero-card, a sidebar, #toast e #lgpd-bar já nasceram
   escuros no design original — não precisam de nada aqui. O loader inicial
   (#gcode-loader) fica como está de propósito: é uma tela de transição
   breve, não faz parte da "tela interna" em si. */

:root{
  --pr-text-hi:#F7F7F5;
  --pr-text-mid:rgba(247,247,245,.68);
  --pr-ocean-light:#8fc6ee;
  --pr-glass-bg:rgba(255,255,255,.04);
  --pr-glass-bg-hover:rgba(255,255,255,.065);
  --pr-glass-border:rgba(255,255,255,.10);
  --pr-field-border:rgba(255,255,255,.35);
}

body{ background:var(--ink); }

.page-title{ color:var(--pr-text-hi); }
.page-sub{ color:var(--pr-text-mid); }

/* ── Cards: vidro escuro com blur sutil ── */
.stat-card,.mini-stat-card,.card{
  background:var(--pr-glass-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--pr-glass-border);
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.stat-label,.card-title{ color:var(--pr-text-mid); }
.stat-val{ color:var(--pr-text-hi); }
.stat-sub{ color:var(--pr-text-mid); }

/* ── Consultas ── */
.cons-row{ border-bottom-color:var(--pr-glass-border); }
.cons-date-box{ background:rgba(255,255,255,.05); }
.cons-day{ color:var(--pr-ocean-light); }
.cons-month{ color:var(--pr-text-mid); }
.cons-hora{ color:var(--pr-text-hi); }
.cons-tipo{ color:var(--pr-text-mid); }
/* badges: chips com fundo tingido translúcido (padrão de dark UI para status;
   GitHub/Linear/Notion usam o mesmo — fundo escuro tingido + texto vivo, em
   vez do chip claro que funciona em tela branca). */
.badge-pendente{ background:rgba(214,158,46,.16); color:#F2C078; }
.badge-confirmado{ background:rgba(46,160,90,.16); color:#6FCF97; }
.badge-remarcado{ background:rgba(147,111,237,.18); color:#C4B5FD; }
.badge-realizada{ background:rgba(46,160,90,.16); color:#6FCF97; }
.badge-nc{ background:rgba(192,57,43,.16); color:#FF8577; }
.cons-nc-warning{ background:rgba(192,57,43,.14); border-color:rgba(192,57,43,.4); color:#FF8577; }
.cons-action-btn{ border-color:var(--pr-field-border); color:var(--pr-ocean-light); }
.cons-action-btn:hover{ background:rgba(255,255,255,.06); }
.cons-action-btn.danger{ color:#FF8577; border-color:rgba(255,133,119,.4); }
.cons-action-btn.danger:hover{ background:rgba(192,57,43,.12); }

/* ── Diagnósticos ── */
.diag-row{ border-bottom-color:var(--pr-glass-border); }
.diag-date{ color:var(--pr-text-mid); }
.diag-count{ color:var(--pr-text-hi); }
.diag-cat{ background:rgba(255,255,255,.05); color:var(--pr-ocean-light); border-color:var(--pr-glass-border); }

/* ── Skeleton (estado de carregamento) ── */
.skel-row:not(:last-child){ border-bottom-color:var(--pr-glass-border); }
.skel-block{
  background:linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.11) 37%, rgba(255,255,255,.05) 63%);
  background-size:400% 100%;
}

/* ── Timeline (Minhas Consultas) ── */
.timeline::before{ background:var(--pr-glass-border); }
.timeline-section-label{ color:var(--pr-text-mid); }
.timeline-dot{ background:var(--ink); border-color:var(--ocean); }
.timeline-dot.past{ border-color:rgba(255,255,255,.25); }
.timeline-dot::after{ background:var(--pr-ocean-light); }
.timeline-dot.past::after{ background:rgba(255,255,255,.4); }

/* ── Formulário de perfil ── */
.pf-label{ color:var(--pr-ocean-light); }
.pf-val{
  background:rgba(255,255,255,.03);
  border-color:var(--pr-field-border);
  color:var(--pr-text-hi);
}
.pf-val::placeholder{ color:rgba(247,247,245,.35); }
.pf-val:focus{ border-color:var(--ocean); box-shadow:0 0 0 3px rgba(30,93,146,.35); }
.pf-val[readonly]{ background:rgba(255,255,255,.02); color:var(--pr-text-mid); }
.btn-revert{ border-color:var(--pr-field-border); color:var(--pr-text-mid); }
.btn-revert:hover{ border-color:var(--ocean); color:var(--pr-ocean-light); }

/* ── Empty state ── */
.empty-title{ color:var(--pr-text-hi); }
.empty-sub{ color:var(--pr-text-mid); }

/* ── Modal de respostas do quiz ── */
.resp-box{ background:#1f2530; box-shadow:0 32px 80px rgba(0,0,0,.5); }
.resp-q{ border-bottom-color:var(--pr-glass-border); }
.resp-q-cat{ color:var(--pr-ocean-light); }
.resp-q-pts{ color:var(--pr-text-mid); }
.resp-q-text{ color:var(--pr-text-mid); }
.resp-q-ans{ color:var(--pr-text-hi); }

/* ── Radar (canvas): a caixa por trás do <canvas> antes do JS pintar ── */
.radar-wrap-pf canvas{ background:#1f2530; border-radius:8px; }

.btn-quiz-sec{ border-color:rgba(255,255,255,.3); color:var(--pr-ocean-light); }
.btn-quiz-sec:hover{ background:rgba(255,255,255,.06); border-color:var(--ocean); }

/* ── Modal de agendamento/remarcação (mini-calendário) ──
   O cabeçalho (.bm-header) já nasceu escuro (var(--ink)) — fica como está.
   Só o corpo (.bm-box, branco no original) precisa do vidro escuro. */
.bm-box{ background:#1f2530; }
.bm-col-title{ color:var(--pr-text-mid); }
.bm-cal-label{ color:var(--pr-text-hi); }
.bm-cal-nav{ border-color:var(--pr-field-border); color:var(--pr-text-mid); }
.bm-cal-nav:hover{ border-color:var(--ocean); color:var(--pr-ocean-light); }
.bm-cal-dow{ color:var(--pr-text-mid); }
.bm-day{ color:var(--pr-text-hi); }
.bm-day:hover:not(:disabled){ background:rgba(255,255,255,.07); color:var(--pr-ocean-light); }
.bm-day.today{ color:var(--pr-ocean-light); }
.bm-day.past,.bm-day.closed,.bm-day.other{ color:rgba(247,247,245,.28); }
.bm-slot-group{ color:var(--pr-text-mid); }
.bm-slot{ border-color:var(--pr-field-border); color:var(--pr-text-hi); }
.bm-slot:hover:not(:disabled){ border-color:var(--ocean); color:var(--pr-ocean-light); }
.bm-slot:disabled{ color:rgba(247,247,245,.25); background:rgba(255,255,255,.02); border-color:rgba(255,255,255,.12); }
.bm-slots-msg{ color:var(--pr-text-mid); }
.bm-footer{ border-top-color:var(--pr-glass-border); }
.bm-servico{ border-color:var(--pr-field-border); color:var(--pr-text-hi); background:rgba(255,255,255,.03); }
.bm-btn-cancel{ border-color:var(--pr-field-border); color:var(--pr-text-mid); }
.bm-btn-cancel:hover{ border-color:var(--ocean); color:var(--pr-ocean-light); }
.bm-summary{ color:var(--pr-text-mid); }

/* ============================================================
   PAINEL ADMIN (gcode-admin.html) — mesmo acabamento, mesmo arquivo
   ------------------------------------------------------------
   Reaproveita TUDO que já está acima (body, .nav-item.active, cards,
   fade de seção) porque as classes têm o mesmo nome nas duas páginas.
   gcode-admin.html só precisava de um alias --ocean no seu :root (ele já
   tinha --gold-lt com o mesmo valor hex) para essas regras compartilhadas
   funcionarem sem duplicar CSS.

   O que é DAQUI PRA BAIXO é só o que o admin tem de diferente do perfil:
   tabelas, gráficos (Chart.js), badges de status extras, e os modais de
   agendamento que lá eram 100% style="" inline (sem classe nenhuma pra
   sobrescrever) e viraram componentes .adm-modal-*.

   NÃO mexido, de propósito: o documento HTML embutido em downloadIndividual()
   (exportação de PDF do diagnóstico) e a paleta GOLD/PALETTE dos gráficos —
   são a identidade visual de um DOCUMENTO EXPORTADO/IMPRESSO, não da tela do
   painel; nem #loginScreen, que é a tela de fora (pré-autenticação), mesmo
   tratamento que demos a gcode-login.html. */

/* --mid só é usado como `color:` nas duas páginas (confirmado por grep antes
   de reatribuir) — então dá pra consertar TODO texto secundário, inclusive o
   que o JS do admin escreve via style="color:var(--mid)" em tabelas, de uma
   vez só, sem precisar sobrescrever seletor por seletor. */
:root{ --mid:rgba(247,247,245,.68); }

/* Abas do admin usam .tab-content em vez de .section — mesmo fade. */
@media (prefers-reduced-motion: no-preference){
  .tab-content.active{ animation:prSectionIn .42s var(--pr-ease) both; }
}

/* ── Textos que usavam color:var(--ink) direto ──
   Isso ficaria invisível (tinta escura sobre fundo escuro agora que
   body{background:var(--ink)}); trocado para o token de texto claro. */
.page-title,.stat-val,.card-title,.quiz-a,.an-niv,.link-paciente,
.chart-title,.tl-event-title,.meta-val,.dq-question,
.tab.active,.tab:hover:not(.active){ color:var(--pr-text-hi); }
.btn-sm-outline:hover{ border-color:var(--pr-field-border); color:var(--pr-text-hi); }

/* ── Cards ── */
.stat-card,.card,.chart-card,.detail-box,#gc-confirm-box{
  background:var(--pr-glass-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--pr-glass-border);
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
/* .detail-box e #gc-confirm-box são modais — precisam de mais opacidade que
   um card solto na página, senão o texto por trás (a página escurecida)
   interfere na leitura. */
.detail-box,#gc-confirm-box{ background:#1f2530; backdrop-filter:none; -webkit-backdrop-filter:none; }
.card-header{ border-bottom-color:var(--pr-glass-border); }
#gc-confirm-msg{ color:var(--pr-text-hi); }
.gc-btn-cancel{ border-color:var(--pr-field-border); color:var(--pr-text-mid); }
.gc-btn-cancel:hover{ border-color:var(--pr-text-hi); color:var(--pr-text-hi); }

/* ── Campos (busca, filtros de tabela) ── */
.search-input,.chart-select{
  background:rgba(255,255,255,.03);
  border-color:var(--pr-field-border);
  color:var(--pr-text-hi);
}
.search-input::placeholder{ color:rgba(247,247,245,.35); }
.search-input:focus,.chart-select:focus{
  border-color:var(--ocean); box-shadow:0 0 0 3px rgba(30,93,146,.35);
}

/* ── Badges de status ──
   badge-realizada, badge-nc, badge-pendente e badge-remarcado já foram
   definidos mais acima (mesmo nome de classe usado em gcode-perfil.html) —
   só faltam os que são exclusivos do admin. */
.badge-green{ background:rgba(46,160,90,.16); color:#6FCF97; }
.badge-gold{ background:rgba(214,158,46,.16); color:#F2C078; }
.badge-cancelado{ background:rgba(192,57,43,.16); color:#FF8577; }
.btn-sm-teal{ background:rgba(46,160,90,.14); color:#6FCF97; border-color:rgba(111,207,151,.35); }
.btn-sm-teal:hover{ background:#1a6640; color:#fff; }
.btn-sm-red{ background:rgba(192,57,43,.14); color:#FF8577; border-color:rgba(255,133,119,.35); }
.btn-sm-red:hover{ background:#a93226; color:#fff; }
/* .btn-sm-dark tinha background:var(--ink) — a mesma cor do fundo da página
   agora, então o botão ficava invisível. Precisa de uma superfície própria. */
.btn-sm-dark{ background:rgba(255,255,255,.08); color:var(--pr-text-hi); border:1px solid var(--pr-glass-border); }
.btn-sm-dark:hover{ background:var(--ocean); border-color:var(--ocean); }

/* .btn-logout:hover usava var(--gold) (#174f7d, azul-marinho escuro) pra
   texto E borda — sobre a sidebar já escura isso ficava quase ilegível,
   um azul quase preto sobre preto. Troca só pelo tom claro de acento. */
.btn-logout:hover{ border-color:var(--pr-ocean-light); color:var(--pr-ocean-light); }

/* ── Tabelas ── */
th{ background:rgba(255,255,255,.03); color:var(--pr-text-mid); border-bottom-color:var(--pr-glass-border); }
td{ color:var(--pr-text-hi); border-bottom-color:var(--pr-glass-border); }
tr:hover td{ background:rgba(255,255,255,.03); }
.td-date{ color:var(--pr-text-mid); }
.td-link a{ color:var(--pr-ocean-light); }
.admin-2col-flush > *:first-child{ border-right-color:var(--pr-glass-border); }
/* border-bottom integrada na base (mobile-first): env() seguro em desktop, avalia para 0 ou herda da regra acima */
.detail-meta-item{ border-bottom-color:var(--pr-glass-border); }

/* ── Respostas do quiz / métricas da pré-análise (dentro do modal de detalhe) ── */
.quiz-item,.an-metrica{ background:rgba(255,255,255,.04); border-color:var(--pr-glass-border); }
.quiz-cat,.an-rot,.meta-label,.dq-cat,.tl-details>summary,.ac-section-title{ color:var(--pr-ocean-light); }
.link-paciente:hover{ color:var(--pr-ocean-light); border-bottom-color:var(--pr-ocean-light); }
.dq-answer{ background:rgba(255,255,255,.05); }
.an-foto{ border-color:var(--pr-glass-border); }

/* ── Modal de detalhe (ficha do paciente) e timeline ── */
.detail-meta,.detail-meta-item{ border-color:var(--pr-glass-border); }
.detail-actions{ background:rgba(255,255,255,.02); border-top-color:var(--pr-glass-border); }
.tl-event{ border-bottom-color:var(--pr-glass-border); }
.detail-q{ border-bottom-color:var(--pr-glass-border); }

/* ── Toast: tinha background:var(--ink), igual ao fundo da página (some).
   Dá uma superfície própria, tingida de ocean, pra ler como notificação. ── */
.toast{ background:#22364a; border:1px solid rgba(255,255,255,.12); box-shadow:0 8px 24px rgba(0,0,0,.4); }

/* ── Modais de agendamento (Novo Agendamento / Remarcar / Captura) ──
   Antes eram 100% style="" inline no HTML (nenhuma classe pra sobrescrever).
   Viraram estes componentes — os ids e onclick de cada campo continuam
   exatamente os mesmos, só a apresentação mudou de inline pra classe. */
.adm-modal-overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
  align-items:center;justify-content:center;padding:20px;
}
.adm-modal-x{
  position:fixed;top:16px;right:16px;width:40px;height:40px;
  background:rgba(247,247,245,.95);border:none;border-radius:50%;
  color:#1B202A;font-size:18px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.25);z-index:10000;line-height:1;
  transition:transform .2s var(--pr-ease);
}
.adm-modal-x:hover{ transform:scale(1.08); }
.adm-modal-box{
  background:#1f2530;border-radius:16px;padding:32px;
  max-width:440px;width:92%;max-height:90vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  animation:wmIn .3s var(--pr-ease);
}
.adm-modal-box-sm{ max-width:380px;width:90%; }
.adm-modal-box-captura{ max-width:560px;width:100%;padding:22px;max-height:88vh;overflow:auto; }
.adm-modal-title{ margin:0 0 20px;font-size:17px;color:var(--pr-text-hi); }
.adm-modal-label{
  font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--pr-text-mid);
  display:block;margin-bottom:6px;
}
.adm-modal-field{
  width:100%;box-sizing:border-box;padding:10px 12px;
  border:1.5px solid var(--pr-field-border);border-radius:8px;font-size:14px;
  margin-bottom:16px;outline:none;background:rgba(255,255,255,.03);color:var(--pr-text-hi);
  font-family:inherit;
}
.adm-modal-field:focus{ border-color:var(--ocean);box-shadow:0 0 0 3px rgba(30,93,146,.35); }
.adm-modal-field-tight{ margin-bottom:24px; }
.adm-modal-textarea{ font-size:13px;resize:vertical;margin-bottom:20px; }
.adm-modal-note{ margin:0 0 20px;font-size:11px;color:var(--pr-text-mid);line-height:1.5; }
.adm-modal-actions{ display:flex;gap:10px; }
.adm-modal-btn-primary,.adm-modal-btn-secondary{
  flex:1;padding:12px;border-radius:8px;font-size:13px;font-weight:600;
  cursor:pointer;transition:background .2s var(--pr-ease),opacity .2s var(--pr-ease);
}
.adm-modal-btn-primary{ background:var(--ocean);color:#fff;border:none; }
.adm-modal-btn-primary:hover{ background:var(--ocean-dk,#174f7d); }
.adm-modal-btn-primary:disabled{ opacity:.6;cursor:default; }
.adm-modal-btn-secondary{ background:transparent;color:var(--pr-ocean-light);border:1.5px solid var(--ocean); }
.adm-modal-btn-secondary:hover{ background:rgba(30,93,146,.12); }

/* ── Tabs (Histórico/Anamnese/Fichas no modal, Estatísticas/Exportar/Auditoria
   na página) ── .tabs tem background:var(--white) por padrão (fundo claro),
   mas todo uso de .tabs no admin fica sobre fundo escuro (body ou detail-box).
   Generalizado (não só `.detail-box .tabs`) porque a aba de Relatórios usa
   .tabs direto na página, fora de qualquer modal — ficava com a barra branca
   e texto (--mid, agora claro) invisível sobre ela. */
.tabs{
  background:rgba(255,255,255,.05);
  border-bottom-color:rgba(255,255,255,.1);
}
.tab{ color:rgba(247,247,245,.45); }
.tab.active{ color:var(--pr-text-hi); border-bottom-color:var(--ocean); }
.tab:hover:not(.active){ color:var(--pr-text-hi); }

/* ── Anamnese dentro do detail-box escuro ──
   .am-val usa var(--ink) (#1B202A) por padrão — invisível sobre #1f2530. */
.detail-box .am-block{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
.detail-box .am-row{ border-bottom-color:rgba(255,255,255,.06); }
.detail-box .am-val{ color:var(--pr-text-hi); }
.detail-box .am-section-title{ color:var(--pr-text-mid); border-bottom-color:rgba(255,255,255,.08); }
.detail-box .am-eval-wrap{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
.detail-box .am-eval-title{ color:var(--pr-text-hi); border-bottom-color:rgba(255,255,255,.08); }
/* .am-lbl (rótulo de cada campo do formulário de avaliação) ficou de fora do
   flip acima: continuava com --ocean-dk, pensado pro fundo --cream original,
   quase invisível sobre o glass escuro de .am-eval-wrap. */
.detail-box .am-lbl{ color:var(--pr-ocean-light); }

/* ============================================================
   CORREÇÃO DE CONTRASTE — componentes que sobraram claro-sobre-claro
   ou escuro-sobre-escuro depois do flip acima
   ------------------------------------------------------------
   Mesma causa raiz dos blocos anteriores: --mid foi redefinido pra claro
   (linha ~310) pra página inteira, e uma lista fixa de seletores foi forçada
   pra texto claro. Isso resolve quem está sobre fundo escuro, mas quebra
   dois grupos que ficaram de fora:
   (A) Componentes que mantiveram fundo CLARO fixo (var(--cream)/var(--white)
       hardcoded, não fazem parte do flip) e usam color:var(--mid) — o texto
       secundário virou claro sobre um fundo que continua claro.
   (B) Textos em color:var(--ink) (escuro fixo) dentro de .card, que agora
       tem vidro escuro — nunca ganharam a contrapartida clara.
   ============================================================ */

/* (A) Repõe o tom original de --mid (#4E5D6E) só nesses seletores —
   ficam imunes à redefinição global, sem mudar o fundo claro de cada um. */
.funil-label,
.cap-panel-date,.cap-btn-secondary,.cap-status-btn,.cap-card-date,.cap-pill,
.fe-hdr-sub,.fe-close-btn,.fe-save-indicator,.fe-sec-hdr::after,
.fe-del-btn,.fe-add-btn,
.appt-pop-meta,.appt-pop-x,
.ac-day-btn,
.cal-semana-header,.cal-mes-header-cell,
.view-btn,
.nc-alert-data,
.login-sub{
  color:#4E5D6E;
}
/* .cap-pill.active / .ac-day-btn.on / .view-btn.active já têm color: própria
   com dois seletores de classe (especificidade maior que a regra acima) —
   continuam vencendo sem precisar de override aqui. */

/* (B) Ficaram dentro de .card (agora vidro escuro) com tinta escura fixa. */
.pendencia-item,.ac-check-label,.cal-nav-title,.cal-event-nome{ color:var(--pr-text-hi); }

/* (C) .ac-override-row (Configuração › Override de sábado) é um sub-bloco que
   manteve fundo CLARO fixo (var(--cream)) dentro do .card escuro. .ac-label
   e .ac-check-label dentro dele herdaram as regras acima (pensadas pro
   fundo escuro do card) — texto quase invisível sobre o fundo claro deste
   bloco específico. Repõe os tons escuros originais só aqui. */
.ac-override-row .ac-label{ color:#4E5D6E; }
.ac-override-row .ac-check-label{ color:var(--ink,#1B202A); }