/* ==========================================================================
   MIC360 · Avaliação Holística — Design System
   Tema "Pastel Místico Sereno" (v6.1, specs/TEMA_PASTEL_SERENO.md):
   creme quente #fbf6ec · dourado mel #d9ab52 (acento principal / botões) ·
   lavanda #8474ad (usada só em detalhes/links/tags/estados ativos discretos) ·
   texto ink #3f3a52.
   ========================================================================== */

/* ==========================================================================
   Release 23.9.0 — A ESCALA TIPOGRÁFICA DO MIC360
   SPEC_ESCALA_TIPOGRAFICA_MIC360.md · aprovada pela titular (12/08)

   Esta release NÃO migra componentes. Põe a raiz e os tokens, e mais nada —
   para se poder responder a "o que mudou porque o sistema passou a respeitar
   a escala do dispositivo?" ANTES de "o que mudou porque redesenhámos as
   telas?". As duas respostas misturadas não valem nenhuma.

   O problema que isto resolve não era "as letras são pequenas". Era: das 927
   declarações de texto do produto, 89% estavam abaixo de 16px e 52% abaixo
   de 13 — e `body` declarava 15px que quase tudo depois encolhia. Não havia
   escala a seguir; havia o hábito de diminuir.

   A regra: **cada texto declara o que É; o tamanho vem daí.** Nunca o
   contrário. É isso que impede que "12px" volte a ser ao mesmo tempo uma
   legenda, um rodapé e a descrição de uma fase.
   ========================================================================== */
html { font-size: 100%; }
/* 100% = o tamanho de letra por omissão do browser, que é o que a pessoa
   mexe nas definições. Com tudo em px absolutos, essa definição não tinha
   por onde entrar. Esta linha sozinha não muda nada hoje — é o que torna o
   `rem` abaixo capaz de significar alguma coisa. */

:root {
  /* ---- os dez níveis, em rem sobre 16px ------------------------------- */
  --tf-micro:     0.6875rem;  /* 11px · SÓ maiúsculas curtas: sobrancelhas,
                                 etiquetas. NUNCA uma frase. Piso absoluto. */
  --tf-legenda:   0.8125rem;  /* 13px · datas, proveniência, unidades       */
  --tf-corpo-2:   0.875rem;   /* 14px · subtítulos, apoio de uma linha      */
  --tf-estado:    0.875rem;   /* 14px · erros, avisos, confirmações         */
  --tf-acao:      0.9375rem;  /* 15px · botões, links, itens de menu        */
  --tf-corpo:     1rem;       /* 16px · descrições, prosa, o que a pessoa
                                 escreveu — e o que ela escreveu é o texto
                                 mais importante de qualquer bloco           */
  --tf-campo:     1rem;       /* 16px · input/textarea/select. NÃO é gosto:
                                 abaixo de 16px o iOS dá zoom ao focar       */
  --tf-pergunta:  1.0625rem;  /* 17px · em SERIFA. Uma pergunta é um convite,
                                 não um rótulo                               */
  --tf-secao:     1.125rem;   /* 18px · cabeçalho dentro de uma tela        */
  --tf-titulo:    1.5rem;     /* 24px · o título da tela                    */

  /* ---- e uma expressão que NÃO é um nível da escala ------------------- */
  /* Decisão da titular (12/08): 24px e 34px fazem trabalhos diferentes. O
     título nomeia um conteúdo; isto marca a ENTRADA NUM TERRITÓRIO. Só pode
     ser usado em superfícies que são portas de experiência — hoje a Bússola
     e o Caminho, que já o usam. Não é uma fonte que qualquer tela possa
     pedir: é a diferença entre chegar a uma página e entrar num sítio. */
  --tf-display-territorial: 2.125rem;  /* 34px */


  /* Release 23.4.1 — par do <meta name="color-scheme"> em index.html: impede
     o "Auto Dark Theme" do Chrome/Edge de inverter a paleta inteira (o creme
     virava preto e o dourado castanho, enquanto as imagens ficavam claras,
     porque essas o modo forçado não toca). Fica também aqui, e não só no
     meta, porque o CSS cobre qualquer página que carregue app.css. */
  color-scheme: only light;

  /* Cores de marca */
  --bg: #fbf6ec;
  --bg-alt: #f3ecdf;
  --surface: #ffffff;
  /* lavanda — detalhes/links/tags/estados ativos discretos (NÃO usar em botões CTA) */
  --primary: #8474ad;
  --primary-dark: #6c5c93;
  --primary-light: #c9bfe0;
  --indigo: #6c5c93;

  /* dourado mel — acento principal / botões primários */
  --gold: #d9ab52;
  --gold-light: #f0d9a8;
  --gold-deep: #b98d3e;
  --gold-mist: #faf1dd;
  --lavanda-mist: #efeaf7;

  /* botões primários (.btn-primary) — reatribuível por escopo (ex.: parceiro) */
  --btn-primary-bg: var(--gold);
  --btn-primary-bg-hover: var(--gold-deep);

  --secondary: var(--gold);
  --secondary-light: var(--gold-light);
  --secondary-dark: var(--gold-deep);
  --support: #7fbf9a;
  --support-dark: #4e8f6b;
  --text: #3f3a52;
  /* 23.9.0 — mesmo ajuste do --p-text-muted do portal do paciente: o lado
     clínico tem o mesmo fundo creme e o mesmo valor, logo tinha a mesma não
     conformidade (4,39:1, mínimo 4,5). #736e87 dá 4,52:1, 2% mais escuro,
     mesmo matiz. Corrigir só um dos lados seria deixar metade do produto
     fora do AA por distração. */
  --text-muted: #736e87;
  --text-soft: #a29dbb;
  --border: #eadfc9;
  --border-soft: #ede4d2;
  --danger: #e2938d;
  --danger-light: #fceceb;
  --success: #7fbf9a;
  --success-light: #e6f4ec;
  --warning: var(--gold);
  --warning-light: var(--gold-mist);
  --info: #5d86b0;
  --info-light: #eef4fa;

  --gradient-brand: linear-gradient(135deg, #d9ab52 0%, #8474ad 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(217,171,82,.12) 0%, rgba(132,116,173,.10) 100%);

  --font: "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 4px 16px rgba(90, 70, 120, .07);
  --shadow: 0 10px 30px rgba(90, 70, 120, .10);
  --shadow-lg: 0 14px 40px rgba(90, 70, 120, .16);

  --sidebar-w: 264px;
  --header-h: 64px;
  --footer-h: 40px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  /* 23.9.0 — a RAIZ do texto. Era 15px absoluto; passa a 1rem, que segue o
     `html { font-size: 100% }` acima e portanto a definição de tamanho de
     letra do browser.

     ⚠️ CORREÇÃO DA MEDIÇÃO. Antes de publicar, contei os elementos cujo
     tamanho CALCULADO era 15px e chamei-lhes "os que herdam do body" —
     Hoje 4, Caminho 0, Bússola 1, Perfil 8. **Estava errado no método:**
     calhar ter o mesmo valor não é herdar. Verificado depois na app a
     correr, com o body já a 1rem, esses elementos continuaram a 15px —
     porque têm regra própria (`.p-card-title { font-size: 15px }`).

     A medição certa é esta: quantos elementos com texto NÃO têm nenhuma
     regra de font-size a aplicar-se-lhes. Medido em produção:
        Hoje     3 de 25 — e herdam 10,5 / 11,5 / 13,3px
        Caminho  0 de 22
        Bússola  2 de 28 — 11,5 / 13,3px
        Perfil  26 de 55 — 11,5 / 13 / 13,5 / 14px
     Nenhum deles herda do BODY: herdam de um contentor pelo caminho, que
     tem o seu próprio tamanho. Ou seja, o efeito real desta linha hoje é
     praticamente nulo — e isso é o esperado, não um problema. É a medida
     exata de quão pouco o `body` governa este produto, e portanto de quanto
     trabalho a migração por território ainda tem pela frente. */
  font-size: 1rem;
  line-height: 1.5;
}
h1, h2, h3, h4, h5 { font-weight: 600; margin: 0 0 .5em; color: var(--text); }
p { margin: 0 0 1em; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
ul { padding-left: 1.2em; }
::selection { background: var(--primary-light); color: #fff; }

.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.text-soft { color: var(--text-soft); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; }
.w-full { width: 100%; }

/* ==========================================================================
   App shell
   ========================================================================== */
#app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.app-body { display: flex; flex: 1; min-height: calc(100vh - var(--footer-h)); }

.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #f9f3e7 0%, #f5ecdc 100%);
  color: var(--text);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
  border-right: 1px solid var(--border);
  transition: transform .25s ease;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}
/* Release 22.2.1 — a caixa dourada com um "M" (.logo-mark) deu lugar ao
   símbolo. Sem fundo nem raio: a arte já traz o círculo, e uma caixa por trás
   dela punha dois círculos concêntricos no mesmo sítio. */
.sidebar-brand .sidebar-brand-mark {
  width: 38px; height: 38px; flex-shrink: 0; display: block;
}
.sidebar-brand .brand-name { font-weight: 600; font-size: 16px; line-height: 1.15; color: var(--text); }
/* A gaveta tem 264px e sobram ~176px para o texto: a assinatura de três
   palavras cabe, a linha descritiva completa do logo não (ia partir em três).
   Por isso aqui vai a assinatura — a linha completa vive no logo e no título
   da aba. */
.sidebar-brand .brand-tag {
  font-size: 11px; color: var(--text-muted);
  line-height: 1.3; margin-top: 1px;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 10px 20px; }
.sidebar-group-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-soft); padding: 16px 12px 6px;
}
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin: 1px 0; border-radius: 10px;
  color: var(--text-muted); font-size: 14px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.sidebar-link .ic { width: 18px; text-align: center; font-size: 15px; opacity: .9; }
.sidebar-link:hover { background: rgba(255,255,255,.6); text-decoration: none; color: var(--text); }
.sidebar-link.active {
  background: #fff; color: var(--text); font-weight: 600;
  box-shadow: 0 2px 10px rgba(90,70,120,.10);
}
.sidebar-link.active .ic { color: var(--gold-deep); }

.sidebar-switch { padding: 6px 10px 0; }
.sidebar-switch-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 10px;
  border: 1px dashed var(--border);
  background: rgba(255,255,255,.5); color: var(--text-muted);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.sidebar-switch-btn .ic { font-size: 15px; }
.sidebar-switch-btn:hover { background: #fff; border-color: var(--gold); color: var(--text); }

.sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-soft); }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; z-index: 20;
}
/* Hotfix v21.3.1 — invólucro interno do cabeçalho: mesmo max-width de
   main#view (abaixo) para os dois alinharem à mesma margem em ecrãs
   largos. .app-header em si fica sem padding/max-width para o fundo e a
   borda continuarem a tocar as duas pontas.
   Hotfix v21.3.3 (pedido da Valeria 31/07 — "o espaço... persiste, mesmo
   depois de refresh e novo navegador"): a centragem (margin:0 auto) dos
   dois lados criava um vão simétrico enorme em ecrãs largos — o fix
   v21.3.1 só alinhou o cabeçalho ao conteúdo, os dois continuavam
   deslocados da barra lateral. Trocado para encostar à esquerda
   (margin:0): o conteúdo cola-se à barra lateral e o espaço sobrante (se
   o ecrã for mais largo que 1280px) fica só do lado direito, não dos
   dois. */
.app-header-inner {
  height: 100%; max-width: 1280px; margin: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
}
.app-header .header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.app-header h1 { font-size: 18px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hamburger {
  display: none; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  font-size: 18px; color: var(--primary); align-items: center; justify-content: center;
}
.header-user { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gradient-brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px;
}
.header-user-name { font-size: 13px; font-weight: 600; }
.header-user-role { font-size: 11px; color: var(--text-muted); }

/* Release 22.1 — alternador de visão sob o nome/papel do cabeçalho
   (SPEC_DUAL_PROFILE.md; ver renderHeaderUserMenu em app.js). Mesmo par
   avatar+nome+papel de antes, agora dentro de um <button> para abrir o
   menu; visual idêntico quando fechado — só ganha o círculo de hover e a
   seta. Sem itens (.is-empty, ex.: admin puro), a seta some e o botão
   fica sem cursor de link. */
.header-user-menu { position: relative; }
.header-user-btn {
  display: flex; align-items: center; gap: 10px; border: none; background: none;
  padding: 4px 6px 4px 4px; border-radius: 999px; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
.header-user-btn:hover { background: var(--bg-alt); }
.header-user-menu.is-empty .header-user-btn { cursor: default; }
.header-user-menu.is-empty .header-user-btn:hover { background: none; }
.header-user-text { min-width: 0; }
.header-user-caret {
  display: flex; align-items: center; color: var(--text-soft);
  transition: transform .15s ease;
}
.header-user-caret .mic-icon { width: 14px; height: 14px; }
.header-user-menu.is-empty .header-user-caret { display: none; }
.header-user-btn[aria-expanded="true"] .header-user-caret { transform: rotate(180deg); }
.header-user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; width: 230px; max-width: 80vw;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); z-index: 60; overflow: hidden; display: none; padding: 6px;
}
.header-user-dropdown.open { display: block; }
.header-user-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 8px; border: none; background: none;
  color: var(--text); font-size: 13px; font-weight: 500; text-align: left; cursor: pointer;
}
.header-user-menu-item .ic { display: flex; color: var(--primary); }
.header-user-menu-item:hover { background: var(--gradient-brand-soft); }
.icon-btn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.icon-btn:hover { background: var(--bg-alt); color: var(--text); }

/* Hotfix v21.3.3 — encostado à esquerda (era margin:0 auto, centrado);
   ver comentário completo junto de .app-header-inner acima. */
main#view { flex: 1; padding: 24px; max-width: 1280px; width: 100%; margin: 0; }

.app-footer {
  height: var(--footer-h);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-soft);
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
}

.sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(63,58,82,.4); z-index: 30;
}

/* Rotas públicas (login/registro): esconde toda a "casca" do app */
#app-shell.no-chrome .sidebar,
#app-shell.no-chrome .app-header,
#app-shell.no-chrome .app-footer,
#app-shell.no-chrome .sidebar-backdrop { display: none; }
#app-shell.no-chrome .app-body { min-height: 100vh; }
#app-shell.no-chrome main#view { padding: 0; max-width: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; transition: all .15s ease;
  white-space: nowrap; line-height: 1.2;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--btn-primary-bg); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); }
.btn-gold { background: var(--secondary); color: #fff; }
.btn-gold:hover:not(:disabled) { background: var(--secondary-dark); }
.btn-support { background: var(--support); color: #fff; }
.btn-support:hover:not(:disabled) { background: var(--support-dark); }
.btn-outline { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-outline:hover:not(:disabled) { background: var(--gradient-brand-soft); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-alt); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #c2685f; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 13px 26px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { padding: 8px 10px; }

/* ==========================================================================
   Cards & layout blocks
   ========================================================================== */
.card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.card-title-row h2, .card-title-row h3 { margin: 0; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.metric-card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden;
}
.metric-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--gradient-brand);
}
.metric-card .metric-label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.metric-card .metric-value { font-size: 30px; font-weight: 700; color: var(--primary); }
.metric-card .metric-sub { font-size: 12.5px; color: var(--text-soft); }

.section-title { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; }
.section-title h2 { font-size: 17px; margin: 0; }
.section-title .line { flex: 1; height: 1px; background: var(--border); }

.page-header { margin-bottom: 20px; }
.page-header h1 { font-size: 22px; margin-bottom: 4px; }
.page-header p { color: var(--text-muted); margin: 0; }
.page-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }

.disclaimer {
  font-size: 12.5px; color: var(--text-muted); background: var(--bg-alt);
  border: 1px dashed var(--border); border-radius: 10px; padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
}

/* ==========================================================================
   Forms
   ========================================================================== */
.field { margin-bottom: 16px; }
.field label, .field-label {
  display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text);
}
.field-hint { font-size: 12px; color: var(--text-soft); margin-top: 4px; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="tel"], input[type="number"], input[type="url"], input[type="time"],
input[type="search"], select, textarea {
  width: 100%; padding: 10px 13px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 14px; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
/* 20/07 — pedido da usuária: as caixas de busca do marketplace (Descobrir e
   a listagem de terapeutas) usam <input type="search">, que faltava aqui —
   ficavam com a aparência crua/branca do navegador em vez do tema do
   portal (ver [[mic360_release8]] em diante para o padrão dourado/creme).
   `-webkit-appearance:none` some com a "lupinha nativa"/borda do Chrome
   em type=search para o input herdar exatamente o mesmo visual dos outros. */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(132,116,173,.16);
}
textarea { resize: vertical; min-height: 84px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.form-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

.checkbox-row, .radio-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; }
.check-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
  border: 1px solid var(--border); border-radius: 999px; font-size: 13px; cursor: pointer;
  background: var(--surface); user-select: none; transition: all .15s ease;
}
.check-pill input { display: none; }
.check-pill.checked { background: var(--gradient-brand-soft); border-color: var(--primary-light); color: var(--primary-dark); font-weight: 600; }

.range-field { display: flex; align-items: center; gap: 12px; }
.range-field input[type="range"] { flex: 1; accent-color: var(--primary); }
.range-value {
  min-width: 34px; height: 34px; border-radius: 50%; background: var(--gradient-brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}

.select-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) { .select-cards { grid-template-columns: 1fr 1fr; } }
.select-card {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 14px;
  cursor: pointer; text-align: center; background: var(--surface); transition: all .15s ease;
}
.select-card:hover { border-color: var(--primary-light); }
.select-card.selected { border-color: var(--primary); background: var(--gradient-brand-soft); box-shadow: 0 0 0 3px rgba(132,116,173,.12); }
.select-card .sc-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.select-card .sc-desc { font-size: 12px; color: var(--text-muted); }

/* ==========================================================================
   Tables
   ========================================================================== */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border-soft); }
table.table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 13.5px; }
table.table th {
  text-align: left; padding: 12px 16px; background: var(--bg-alt); color: var(--text-muted);
  font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1px solid var(--border-soft);
}
table.table td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.table tr:last-child td { border-bottom: none; }
table.table tr.row-click { cursor: pointer; }
table.table tr.row-click:hover td { background: var(--bg-alt); }

/* ==========================================================================
   Chips (por frequência / status / tags)
   ========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--bg-alt); color: var(--text);
  border: 1px solid var(--border-soft);
}
.chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.chip-freq { color: #fff; border: none; }
.chip-status-agendada { background: var(--info-light); color: var(--info); }
.chip-status-em_andamento { background: var(--warning-light); color: var(--gold-deep); }
.chip-status-concluida { background: var(--success-light); color: var(--success); }
.chip-status-ativa { background: var(--info-light); color: var(--info); }
.chip-status-concluida2 { background: var(--success-light); color: var(--success); }
.chip-status-cancelada { background: var(--danger-light); color: var(--danger); }
.chip-sm { padding: 2px 9px; font-size: 11px; }

/* ==========================================================================
   Modal
   ========================================================================== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(63,58,82,.45); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fadeIn .15s ease;
}
.modal {
  background: var(--surface); border-radius: var(--radius-lg); max-width: 520px; width: 100%;
  max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg);
  animation: popIn .18s ease;
}
.modal.modal-lg { max-width: 760px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 0; }
.modal-header h3 { margin: 0; font-size: 17px; }
.modal-body { padding: 18px 22px 22px; }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-soft); line-height: 1; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Toasts
   ========================================================================== */
/* z-index 4500 — ACIMA de tudo o resto (banner de armazenamento 4000, véu do
   tour 4200, faixa de e-mail 3500). Um toast é uma resposta ao que a pessoa
   acabou de fazer: se ficar por baixo de alguma coisa, ela carrega outra vez
   por achar que não funcionou.

   Estava em 300, e a faixa de e-mail da R17 (3500, fixa no topo) passou a
   cortá-lo ao meio — apanhado pela usuária ao carregar em "Reenviar": a
   confirmação "Link reenviado" aparecia decapitada por trás da própria
   faixa que a tinha originado. */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 4500; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
/* E desce quando a faixa está presente, para não ficar colado a ela. */
body.with-verify-bar .toast-container { top: calc(20px + var(--verify-bar-h)); }
.toast {
  padding: 13px 16px; border-radius: 11px; box-shadow: var(--shadow-lg); font-size: 13.5px;
  display: flex; align-items: flex-start; gap: 10px; background: var(--text); color: #fff;
  animation: slideIn .2s ease;
}
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-info { background: var(--primary); }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Progress bar
   ========================================================================== */
.progress { height: 9px; border-radius: 99px; background: var(--bg-alt); overflow: hidden; border: 1px solid var(--border-soft); }
.progress-bar { height: 100%; background: var(--gradient-brand); border-radius: 99px; transition: width .3s ease; }
.progress-row { display: flex; align-items: center; gap: 10px; }
.progress-row .progress { flex: 1; }
.progress-label { font-size: 12.5px; font-weight: 700; color: var(--primary); min-width: 38px; text-align: right; }

/* ==========================================================================
   Tabs
   ========================================================================== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-soft); margin-bottom: 20px; overflow-x: auto; }
.tab-btn {
  padding: 10px 16px; border: none; background: none; cursor: pointer; font-size: 13.5px;
  font-weight: 600; color: var(--text-muted); border-bottom: 2.5px solid transparent; white-space: nowrap;
}
.tab-btn:hover { color: var(--primary); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
/* Release 12.3.1 — abas com ícone SVG (fim dos emojis nas abas da ficha do
   cliente). O ícone herda a cor do botão e fica dourado quando a aba está
   ativa, como no resto do menu. */
.tab-btn-ic { display: inline-flex; align-items: center; gap: 7px; }
.tab-btn-ic .ic-inline { display: flex; color: var(--text-soft); }
.tab-btn-ic:hover .ic-inline { color: var(--primary); }
.tab-btn-ic.active .ic-inline { color: var(--gold-deep); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn .15s ease; }

/* ==========================================================================
   Accordion
   ========================================================================== */
.accordion-item { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden; background: var(--surface); }
.accordion-header {
  padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; font-weight: 600; font-size: 14px; background: var(--bg-alt);
}
.accordion-header .acc-arrow { transition: transform .2s ease; color: var(--text-muted); }
.accordion-item.open .acc-arrow { transform: rotate(180deg); }
.accordion-body { padding: 0 16px; max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.accordion-item.open .accordion-body { max-height: 4000px; padding: 14px 16px; }

/* ==========================================================================
   Stepper (roteiro / protocolo)
   ========================================================================== */
.stepper { position: relative; padding-left: 6px; }
.step {
  position: relative; padding: 0 0 26px 34px; border-left: 2px solid var(--border);
  margin-left: 10px;
}
.step:last-child { border-color: transparent; padding-bottom: 4px; }
.step-marker {
  position: absolute; left: -13px; top: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border); display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-muted);
}
.step.done .step-marker { background: var(--support); border-color: var(--support); color: #fff; }
.step.current .step-marker { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px rgba(132,116,173,.18); }
.step-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 14px 16px; }
.step-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.step-title-row h4 { margin: 0; font-size: 14.5px; }
.step-time { font-size: 11.5px; color: var(--gold-deep); font-weight: 700; background: var(--warning-light); padding: 2px 9px; border-radius: 999px; }
.step-quote {
  border-left: 3px solid var(--primary-light); background: var(--gradient-brand-soft); padding: 10px 14px;
  border-radius: 0 8px 8px 0; font-style: italic; color: var(--primary-dark); font-size: 13.5px; margin: 8px 0;
}
.step-meta-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); margin: 10px 0 4px; }

/* ==========================================================================
   Timeline (evolução / histórico)
   ========================================================================== */
.timeline { position: relative; margin-left: 8px; }
.timeline-item { position: relative; padding: 0 0 22px 28px; border-left: 2px solid var(--border-soft); }
.timeline-item:last-child { border-color: transparent; }
.timeline-dot { position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--primary-light); }
.timeline-date { font-size: 12px; color: var(--text-soft); font-weight: 600; }

/* ==========================================================================
   Escala Vibracional — escada de frequências
   ========================================================================== */
.scale-ladder { display: flex; flex-direction: column; gap: 6px; }
.scale-step {
  display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 12px;
  color: #fff; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: var(--shadow-sm);
}
.scale-step:hover { transform: translateX(4px); box-shadow: var(--shadow); }
.scale-step .sf-hz { font-size: 18px; font-weight: 700; min-width: 58px; }
.scale-step .sf-name { font-weight: 600; font-size: 15px; flex: 1; }
.scale-step .sf-arrow { opacity: .8; }
.scale-divider {
  display: flex; align-items: center; gap: 10px; margin: 10px 0; color: var(--text-soft);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.scale-divider::before, .scale-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.freq-hero { border-radius: var(--radius-lg); padding: 28px; color: #fff; margin-bottom: 20px; box-shadow: var(--shadow); }
.freq-hero .fh-hz { font-size: 40px; font-weight: 700; line-height: 1; }
.freq-hero .fh-name { font-size: 20px; font-weight: 600; opacity: .95; }
.freq-hero .fh-badge { display: inline-block; margin-top: 8px; background: rgba(255,255,255,.22); padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.freq-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 800px) { .freq-detail-grid { grid-template-columns: 1fr; } }
.kw-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Barras horizontais de distribuição (dashboard) */
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bar-row .bar-label { min-width: 118px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.bar-row .bar-track { flex: 1; height: 16px; background: var(--bg-alt); border-radius: 8px; overflow: hidden; }
.bar-row .bar-fill { height: 100%; border-radius: 8px; transition: width .4s ease; }
.bar-row .bar-count { min-width: 22px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--text); }

/* ==========================================================================
   Cartas vibracionais — flip card
   ========================================================================== */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.flip-card { perspective: 1200px; height: 210px; cursor: pointer; }
.flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; }
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px; text-align: center; box-shadow: var(--shadow);
}
.flip-card-front {
  background: var(--gradient-brand);
  border: 3px solid var(--secondary);
  color: #fff;
}
.flip-card-front .fc-glyph { font-size: 34px; margin-bottom: 8px; opacity: .9; }
.flip-card-front .fc-back-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.flip-card-back {
  transform: rotateY(180deg); border: 3px solid var(--secondary); color: #fff;
  overflow-y: auto; justify-content: flex-start;
}
.flip-card-back .fc-hz { font-size: 22px; font-weight: 700; }
.flip-card-back .fc-name { font-size: 13px; font-weight: 600; margin-bottom: 6px; }

.card-full {
  border: 3px solid var(--secondary); border-radius: var(--radius-lg); padding: 26px; color: #fff;
  box-shadow: var(--shadow-lg);
}
.card-full .cf-hz { font-size: 15px; opacity: .85; font-weight: 700; letter-spacing: .05em; }
.card-full .cf-name { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.card-full .cf-message { font-size: 16px; line-height: 1.6; font-style: italic; margin-bottom: 16px; }
.card-full .cf-questions { background: rgba(255,255,255,.14); border-radius: 12px; padding: 14px 18px; }
.card-full .cf-questions li { margin-bottom: 6px; }

/* ==========================================================================
   Exercícios / recursos cards
   ========================================================================== */
.resource-card { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 16px; background: var(--surface); }
.resource-card .rc-kind { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: 999px; display: inline-block; margin-bottom: 8px; }
.rc-kind-mental { background: var(--info-light); color: var(--info); }
.rc-kind-emocional { background: #F7E4F1; color: #9B3F82; }
.rc-kind-pratica { background: var(--success-light); color: var(--success); }

/* ==========================================================================
   Login / Auth
   ========================================================================== */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--gradient-brand); padding: 24px; position: relative; overflow: hidden;
}
.auth-page::before, .auth-page::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08);
}
.auth-page::before { width: 420px; height: 420px; top: -120px; left: -120px; }
.auth-page::after { width: 320px; height: 320px; bottom: -100px; right: -80px; }
.auth-card {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 420px; padding: 34px 32px; position: relative; z-index: 1;
}
/* Release 22.2 — a marca das telas públicas passou de texto (caixa "M360" +
   título + subtítulo) para o LOGO, que já traz as palavras dentro da arte.
   Um ficheiro por idioma; ver public/js/brand.js. A .logo-mark do login
   deixou de existir — a da sidebar (linha ~121) continua e é outra coisa. */
.auth-logo { text-align: center; margin-bottom: 22px; }
.auth-logo-img {
  display: block; margin: 2px auto 0;
  width: 100%; max-width: 320px; height: auto;
}
/* Telas que já têm um título próprio (recuperar senha, magic-login, legais):
   o logo é a assinatura da casa, não o protagonista. */
.auth-logo-compact { margin-bottom: 14px; }
.auth-logo-compact .auth-logo-img { max-width: 208px; }
.auth-logo-heading { margin-bottom: 20px; }
.auth-logo h1 { font-size: 20px; margin-bottom: 2px; }
.auth-logo .auth-tagline { font-size: 13px; color: var(--text-muted); margin-bottom: 0; text-align: center; }
@media (max-width: 420px) {
  .auth-logo-img { max-width: 260px; }
  .auth-logo-compact .auth-logo-img { max-width: 178px; }
}

/* Assinatura da VDD no rodapé das telas públicas (pedido da usuária, 03/08).
   Texto, não imagem: escala com o zoom, não pesa nada e acompanha o tema. */
.vdd-signature {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
}
.vdd-signature .vdd-mark {
  font-weight: 700; font-size: 12.5px; letter-spacing: .14em;
  color: var(--ink, var(--text));
}
.vdd-signature .vdd-tag {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
}
.auth-tabs { display: flex; background: var(--bg-alt); border-radius: 10px; padding: 4px; margin-bottom: 22px; }
.auth-tab { flex: 1; text-align: center; padding: 9px; border-radius: 8px; font-weight: 600; font-size: 13.5px; cursor: pointer; color: var(--text-muted); }
.auth-tab.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.auth-error { background: var(--danger-light); color: var(--danger); padding: 10px 14px; border-radius: 9px; font-size: 13px; margin-bottom: 14px; }
.auth-page .disclaimer { margin-top: 18px; }

/* ==========================================================================
   Estados vazios / skeleton
   ========================================================================== */
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.empty-state .es-icon { font-size: 40px; margin-bottom: 12px; opacity: .6; }
.empty-state h3 { font-size: 15px; color: var(--text); margin-bottom: 6px; }
.empty-state p { font-size: 13.5px; margin-bottom: 16px; }

.skel { background: linear-gradient(90deg, var(--bg-alt) 25%, #EAE3D4 37%, var(--bg-alt) 63%); background-size: 400% 100%; animation: skel 1.4s ease infinite; border-radius: 8px; }
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skel-line { height: 14px; margin-bottom: 8px; }
.skel-card { height: 90px; border-radius: var(--radius); }

/* ==========================================================================
   Search / toolbar
   ========================================================================== */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.search-box { position: relative; flex: 1; min-width: 200px; }
.search-box input { padding-left: 34px; }
.search-box .si { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-soft); font-size: 13px; }

/* ==========================================================================
   Jornada 8 semanas
   ========================================================================== */
.week-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .week-grid { grid-template-columns: repeat(2, 1fr); } }
.week-card {
  border: 1.5px solid var(--border-soft); border-radius: var(--radius-sm); padding: 14px; cursor: pointer;
  background: var(--surface); transition: all .15s ease;
}
.week-card:hover { border-color: var(--primary-light); }
.week-card.current { border-color: var(--primary); background: var(--gradient-brand-soft); }
.week-card.done { opacity: .75; }
.week-card .wk-num { font-size: 11px; font-weight: 700; color: var(--primary); text-transform: uppercase; }
.week-card .wk-title { font-weight: 600; font-size: 13.5px; margin-top: 4px; }
.task-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.task-row:last-child { border-bottom: none; }
.task-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
.task-row.checked span { text-decoration: line-through; color: var(--text-soft); }

/* Blindagem / self-care */
.moment-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.moment-antes { background: var(--info-light); color: var(--info); }
.moment-depois { background: #F7E4F1; color: #9B3F82; }
.moment-rotina { background: var(--success-light); color: var(--success); }

/* Cura sonora layout */
.sound-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
@media (max-width: 800px) { .sound-layout { grid-template-columns: 1fr; } }
.sound-index { position: sticky; top: 84px; }
.sound-index-item {
  padding: 9px 12px; border-radius: 9px; font-size: 13.5px; cursor: pointer; color: var(--text-muted);
}
.sound-index-item:hover { background: var(--bg-alt); }
.sound-index-item.active { background: var(--gradient-brand-soft); color: var(--primary); font-weight: 600; }

/* Mudra icon placeholder */
.mudra-box { display: flex; align-items: center; gap: 10px; background: var(--bg-alt); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; }

/* ==========================================================================
   Responsive: sidebar becomes drawer < 900px
   ========================================================================== */
@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: 0; top: 0; transform: translateX(-100%);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.open { display: block; }
  .hamburger { display: flex; }
  main#view { padding: 16px; }
  .app-header-inner { padding: 0 14px; }
  .select-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .auth-card { padding: 26px 20px; }
  .modal-body, .modal-header { padding-left: 16px; padding-right: 16px; }
}

/* Print-ish quote block used across method/protocols */
.quote-block { border-left: 3px solid var(--secondary); background: var(--warning-light); padding: 12px 16px; border-radius: 0 10px 10px 0; font-size: 13.5px; }

/* ==========================================================================
   Evolução 360 (terapeuta) — DESIGN_SPEC_V2.md §8. Reaproveita o tema
   existente do app (variáveis --primary/--secondary/etc.); classes novas
   prefixadas `.c360-` para não colidir com nada já existente.
   ========================================================================== */
.c360-disclaimer { margin-top: 20px; }

/* Banner de acesso compartilhado (terapeuta convidado — somente leitura,
   SPEC_DATA_SHARING.md) */
.c360-shared-banner {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--primary-dark); background: var(--gradient-brand-soft);
  border: 1px solid var(--primary-light); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 16px;
}

/* Lista "Compartilhados comigo" (views/sharedClients.js) */
.shc-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; transition: box-shadow .15s ease, transform .15s ease;
}
.shc-item:hover { box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,.08)); transform: translateY(-1px); }

/* Release 22.6 — código fixo do terapeuta, no cartão de identidade do
   #/perfil-profissional. Fica DENTRO do mesmo cartão do nome (separado por
   um filete) e não num cartão à parte: o pedido era "bem fácil de achar,
   logo abaixo do nome", e um cartão novo entraria na fila dos outros. */
.pro-code-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.pro-code-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.pro-code-head h4 { margin: 0; font-size: 14px; }
.pro-code-intro { font-size: 12.5px; margin: 0 0 12px; line-height: 1.55; }
.pro-code-value {
  font-family: 'Courier New', monospace; font-size: 26px; font-weight: 700; letter-spacing: .16em;
  color: var(--primary); background: var(--gradient-brand-soft); border: 1.5px dashed var(--primary-light);
  border-radius: var(--radius-sm); padding: 12px 16px; text-align: center;
  /* O código é para ser lido em voz alta e escrito noutro sítio — deixar
     selecionar com o rato é metade da forma de o copiar. */
  user-select: all;
}
.pro-code-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pro-code-confirm {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft); background: var(--bg-alt);
}
.pro-code-confirm p { margin: 0 0 10px; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.pro-code-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pro-code-steps { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border-soft); }
.pro-code-steps h5 { margin: 0 0 8px; font-size: 12.5px; }
.pro-code-steps ol {
  margin: 0; padding-left: 18px; font-size: 12.5px;
  color: var(--text-muted); line-height: 1.75;
}
.pro-code-steps-note { font-size: 12px; margin: 10px 0 0; line-height: 1.55; }

/* Convite */
.c360-invite-card { max-width: 640px; }
.c360-invite-code {
  font-family: 'Courier New', monospace; font-size: 30px; font-weight: 700; letter-spacing: .12em;
  color: var(--primary); background: var(--gradient-brand-soft); border: 1.5px dashed var(--primary-light);
  border-radius: var(--radius-sm); padding: 14px 20px; text-align: center;
}
.c360-invite-steps { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
/* Release 22.6 — ponte para o código fixo do terapeuta (#/perfil-profissional). */
.c360-invite-steps-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; margin: 12px 0 0; }

/* Release 22.3 — enviar o convite (WhatsApp / e-mail) */
.c360-invite-send { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.c360-invite-send h4 { font-size: 13px; margin: 0 0 4px; }
.c360-invite-send > p.text-muted { font-size: 13px; margin: 0 0 12px; }
.c360-invite-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .c360-invite-channels { grid-template-columns: 1fr; } }
.c360-invite-channel {
  display: flex; align-items: center; gap: 10px; justify-content: flex-start;
  text-align: left; padding: 11px 14px; width: 100%;
}
.c360-invite-channel-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.c360-invite-channel-txt b { font-weight: 600; }
.c360-invite-channel-txt small { font-size: 11.5px; opacity: .82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c360-invite-secondary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.c360-invite-preview { margin-top: 10px; }
.c360-invite-preview-block {
  border: 1px solid var(--border-soft); background: var(--bg-alt);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.c360-invite-preview-block + .c360-invite-preview-block { margin-top: 8px; }
.c360-invite-preview-tag {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.c360-invite-preview pre {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font-family: inherit; font-size: 12.5px; color: var(--text); line-height: 1.6;
}

/* Resumo / área rows (roda, arquétipos, jornada) */
.c360-area-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 13px; }
.c360-area-emoji { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.c360-area-name { min-width: 168px; font-weight: 600; color: var(--text); flex-shrink: 0; }
.c360-area-track { flex: 1; height: 12px; background: var(--bg-alt); border-radius: 8px; overflow: hidden; }
.c360-area-fill { height: 100%; border-radius: 8px; background: var(--gradient-brand); transition: width .3s ease; }
.c360-area-val { min-width: 34px; text-align: right; font-weight: 700; color: var(--text); }
.c360-delta-up { color: var(--success); font-weight: 700; font-size: 12px; white-space: nowrap; }
.c360-delta-down { color: var(--danger); font-weight: 700; font-size: 12px; white-space: nowrap; }
.c360-delta-flat { color: var(--text-soft); font-size: 12px; white-space: nowrap; }

/* Radares (roda atual / comparador) */
.c360-radar-wrap { max-width: 340px; margin: 8px auto; aspect-ratio: 1 / 1; }
.c360-radar-wrap canvas { width: 100%; height: 100%; display: block; }

/* Jornada — trilha horizontal compacta */
.c360-journey-trail { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-top: 6px; }
.c360-journey-step {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; width: 92px;
  opacity: .55;
}
.c360-journey-step .c360-journey-ic {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt); border: 2px solid var(--border); font-size: 15px;
}
.c360-journey-step .c360-journey-label { font-size: 10.5px; font-weight: 600; color: var(--text-muted); line-height: 1.25; }
.c360-journey-step.c360-journey-done { opacity: .85; }
.c360-journey-step.c360-journey-done .c360-journey-ic { background: var(--support); border-color: var(--support); color: #fff; }
.c360-journey-step.c360-journey-current { opacity: 1; }
.c360-journey-step.c360-journey-current .c360-journey-ic { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px rgba(132,116,173,.2); }
.c360-journey-step.c360-journey-current .c360-journey-label { color: var(--primary); }
.c360-journey-conn { flex: 1; min-width: 10px; height: 2px; background: var(--border); margin-top: -18px; }

/* Arquétipos — barras */
.c360-arch-bar-row { margin-bottom: 12px; }
.c360-arch-bar-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.c360-arch-bar-track { height: 12px; background: var(--bg-alt); border-radius: 8px; overflow: hidden; }
.c360-arch-bar-fill { height: 100%; border-radius: 8px; background: var(--gradient-brand); transition: width .3s ease; }

/* Símbolos sugeridos */
.c360-symbol-card { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.c360-symbol-card:first-of-type { border-top: none; }

/* Johari — grade 2x2 proporcional */
.c360-johari-grid { display: grid; gap: 6px; margin-top: 10px; min-height: 260px; }
.c360-johari-quad {
  border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 6px;
  overflow: hidden; min-height: 80px;
}
.c360-johari-pct { font-size: 20px; font-weight: 700; }
.c360-johari-title { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.c360-johari-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.c360-johari-aberta { background: var(--success-light); color: var(--success); }
.c360-johari-cega { background: var(--info-light); color: var(--info); }
.c360-johari-oculta { background: var(--gradient-brand-soft); color: var(--primary-dark); }
.c360-johari-desconhecida { background: var(--bg-alt); color: var(--text-soft); }

/* Fichas recebidas */
.c360-form-item { padding: 10px 0; border-top: 1px solid var(--border-soft); font-size: 13.5px; }
.c360-form-item:first-child { border-top: none; }
.c360-form-item-date { font-size: 11.5px; color: var(--text-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.c360-form-item-score { font-weight: 700; color: var(--primary); margin-top: 2px; }
.c360-line-chart-wrap { height: 180px; }
.c360-line-chart-wrap canvas { width: 100%; height: 100%; display: block; }

/* Insights */
.c360-insight-item { margin-bottom: 12px; }

@media (max-width: 700px) {
  .c360-area-name { min-width: 120px; }
  .c360-journey-step { width: 74px; }
}

/* ==========================================================================
   Release 4 (SPEC_RELEASE_4.md §C1) — seletor de idioma da tela de
   login/registro. Hotfix 25/07 (pedido da usuária, aprovado via mockup
   mic360_mockup_help_lang.html): o <select> discreto do canto virou uma
   fila de pílulas visível no topo do próprio cartão — ninguém deixa de
   notar que dá para trocar o idioma. adminpts-* estilos para a nova aba
   "Pontos & Resgates".
   ========================================================================== */
.auth-lang-row { margin: -6px 0 16px; }
.auth-lang-label {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px;
}
.auth-lang-label svg { width: 12px; height: 12px; }
.auth-lang-pills { display: flex; gap: 6px; }
.auth-lang-pill {
  flex: 1; text-align: center; padding: 7px 4px; border-radius: 10px; font-size: 11.5px; font-weight: 700;
  border: 1.5px solid var(--bg-alt); color: var(--text-muted); cursor: pointer; background: var(--surface);
  font-family: inherit; transition: all .15s ease;
}
.auth-lang-pill:hover { border-color: var(--primary); color: var(--primary); }
.auth-lang-pill.active {
  border-color: transparent; background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-sm);
}
.auth-lang-current { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 7px; }
.auth-lang-current b { color: var(--primary); }

/* ==========================================================================
   R5 agenda (SPEC_RELEASE_5.md §A4) — agenda semana/dia/lista, config,
   lista de espera e sino de notificações. Classes prefixadas `agn-` (agenda)
   e `notif-` (sino) para não colidir com nada existente.
   ========================================================================== */

/* Cabeçalho da agenda */
.agn-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.agn-nav { display: flex; align-items: center; gap: 6px; }
.agn-nav-label { font-weight: 600; font-size: 14.5px; min-width: 150px; text-align: center; }
.agn-view-toggle { display: flex; gap: 2px; background: var(--bg-alt); border-radius: 10px; padding: 3px; }
.agn-view-toggle button {
  border: none; background: transparent; padding: 7px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.agn-view-toggle button.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.agn-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.agn-waitlist-btn { position: relative; }
.agn-badge-count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* Badges de estado da consulta */
.chip-appt-pendente { background: var(--warning-light); color: var(--gold-deep); }
.chip-appt-confirmada { background: var(--success-light); color: var(--success); }
.chip-appt-realizada { background: var(--info-light); color: var(--info); }
.chip-appt-falta { background: var(--danger-light); color: var(--danger); }
.chip-appt-cancelada { background: var(--bg-alt); color: var(--text-soft); }
.agn-checkin-dot {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--support-dark);
}
.agn-checkin-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--support); }

/* Grade semanal */
.agn-week-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface); }
.agn-week-grid { display: grid; grid-template-columns: 56px repeat(7, minmax(112px, 1fr)); min-width: 880px; }
.agn-week-head { display: contents; }
.agn-week-head-cell {
  padding: 10px 6px; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft); border-left: 1px solid var(--border-soft);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.agn-week-head-cell.agn-today { color: var(--primary); background: var(--gradient-brand-soft); }
.agn-week-head-cell:first-child, .agn-hour-label { border-left: none; }
.agn-hour-col { position: relative; }
.agn-hour-label {
  font-size: 11px; color: var(--text-soft); text-align: right; padding-right: 8px;
  position: relative; top: -6px;
}
.agn-day-col {
  position: relative; border-left: 1px solid var(--border-soft);
  background-image: repeating-linear-gradient(to bottom, var(--border-soft) 0, var(--border-soft) 1px, transparent 1px, transparent var(--agn-hour-h, 52px));
}
.agn-day-col.agn-today-col { background-color: var(--gradient-brand-soft); background-color: rgba(217,171,82,.06); }
.agn-slot-click { position: absolute; left: 0; right: 0; cursor: pointer; }
.agn-slot-click:hover { background: rgba(132,116,173,.08); }
.agn-appt-block {
  position: absolute; left: 3px; right: 3px; border-radius: 8px; padding: 4px 7px; overflow: hidden;
  color: #fff; font-size: 11px; line-height: 1.3; cursor: pointer; box-shadow: var(--shadow-sm);
  border-left: 3px solid rgba(0,0,0,.18); z-index: 3;
}
.agn-appt-block:hover { filter: brightness(1.06); box-shadow: var(--shadow); }
.agn-appt-block.agn-appt-cancelada { opacity: .55; text-decoration: line-through; }
.agn-appt-time { font-weight: 700; }
.agn-appt-client { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agn-block-block {
  position: absolute; left: 3px; right: 3px; border-radius: 8px; z-index: 2;
  background: repeating-linear-gradient(45deg, var(--bg-alt), var(--bg-alt) 6px, #E6DFD0 6px, #E6DFD0 12px);
  border: 1px dashed var(--border); color: var(--text-soft); font-size: 10.5px; padding: 3px 6px; overflow: hidden;
}

/* Vista dia/lista */
.agn-list-card {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft); background: var(--surface); margin-bottom: 8px; cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}
.agn-list-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.agn-list-color { width: 5px; align-self: stretch; border-radius: 4px; flex-shrink: 0; }
.agn-list-time { font-weight: 700; font-size: 13.5px; min-width: 78px; }
.agn-list-main { flex: 1; min-width: 0; }
.agn-list-client { font-weight: 600; font-size: 13.5px; }
.agn-list-service { font-size: 12px; color: var(--text-muted); }

/* Sheet de detalhe / formulários da agenda */
.agn-detail-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.agn-detail-row:last-child { border-bottom: none; }
.agn-detail-ic { color: var(--primary); flex-shrink: 0; margin-top: 1px; }
.agn-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.agn-slot-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.agn-slot-chip {
  border: 1px solid var(--border); background: var(--surface); border-radius: 20px; padding: 6px 14px;
  font-size: 12.5px; cursor: pointer; font-weight: 600; color: var(--text);
}
.agn-slot-chip:hover { border-color: var(--primary); color: var(--primary); }
.agn-slot-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Config — cartões */
.agn-config-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.agn-avail-day { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.agn-avail-day:first-child { border-top: none; }
.agn-avail-day-name { min-width: 96px; font-weight: 600; font-size: 13.5px; padding-top: 6px; }
.agn-avail-intervals { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.agn-avail-interval { display: flex; align-items: center; gap: 6px; }
.agn-avail-interval input[type="time"] { width: 118px; }
.agn-url-copy-row { display: flex; gap: 8px; align-items: center; }
.agn-url-copy-row input { flex: 1; font-family: 'Courier New', monospace; font-size: 12.5px; }
.agn-color-swatch { width: 22px; height: 22px; border-radius: 6px; display: inline-block; vertical-align: middle; border: 1px solid rgba(0,0,0,.12); }

/* Lista de espera */
.wl-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.wl-item:first-child { border-top: none; }
.wl-item-main { flex: 1; min-width: 0; }
.wl-item-name { font-weight: 600; font-size: 13.5px; }
.wl-item-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.wl-item-actions { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }

/* Sino de notificações (app.js — visível terapeuta e paciente) */
.notif-bell-wrap { position: relative; }
.notif-bell-btn { position: relative; }
.notif-bell-dot {
  position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 8px; background: var(--danger); color: #fff; font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--surface);
}
.notif-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; width: 340px; max-width: 90vw;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); z-index: 60; overflow: hidden; display: none;
}
.notif-dropdown.open { display: block; }
.notif-dropdown-head {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft); font-weight: 700; font-size: 13.5px;
}
.notif-dropdown-head button { background: none; border: none; color: var(--primary); font-size: 12px; font-weight: 600; cursor: pointer; }
.notif-dropdown-list { max-height: 380px; overflow-y: auto; }
.notif-item { display: block; width: 100%; text-align: left; padding: 11px 16px; border: none; background: none; cursor: pointer; border-bottom: 1px solid var(--border-soft); }
.notif-item:hover { background: var(--bg-alt); }
.notif-item.unread { background: var(--gradient-brand-soft); }
.notif-item-title { font-size: 13px; font-weight: 700; color: var(--text); }
.notif-item-body { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.notif-item-time { font-size: 10.5px; color: var(--text-soft); margin-top: 4px; }
.notif-empty { padding: 28px 16px; text-align: center; color: var(--text-soft); font-size: 13px; }

@media (max-width: 700px) {
  .agn-nav-label { min-width: 110px; font-size: 13px; }
  .notif-dropdown { right: -60px; width: 300px; }
}

/* R5 prontuario */
/* SPEC_RELEASE_5.md §B3 — aba Prontuário do cliente (views/prontuario.js) */
.pr-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pr-section-title { font-size: 14.5px; margin: 0 0 10px; }
.pr-card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pr-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.pr-card-grid { align-items: start; }
.pr-card-grid .card { margin-top: 0; }
.pr-private-hint { font-size: 11.5px; margin: 2px 0 6px; }

/* Linha do tempo */
.pr-timeline { display: flex; flex-direction: column; gap: 8px; }
.pr-timeline-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface);
  transition: box-shadow .15s ease, transform .15s ease;
}
.pr-timeline-item:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.pr-timeline-ic {
  width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--gradient-brand-soft); color: var(--primary); flex-shrink: 0;
}
.pr-timeline-body { flex: 1; min-width: 0; }
.pr-timeline-head-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 13.5px; }
.pr-timeline-date { font-size: 11.5px; color: var(--text-soft); white-space: nowrap; }
.pr-timeline-summary { font-size: 12.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }

/* Plano terapêutico */
.pr-plan-card.pr-plan-active { border: 1.5px solid var(--primary-light); box-shadow: var(--shadow); }
.pr-plan-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.pr-objective-row { font-size: 13.5px; }
.pr-obj-editor { display: flex; flex-direction: column; gap: 6px; }
.pr-obj-edit-row { display: flex; align-items: center; gap: 8px; }
.pr-obj-edit-row input[type="text"] { flex: 1; }

/* Selo de assinatura / bloqueio */
.pr-seal {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 10px;
  border-radius: 20px; background: var(--success-light); color: var(--success);
  font-size: 11.5px; font-weight: 600;
}
.pr-locked-chip { background: var(--success-light); color: var(--success); display: inline-flex; align-items: center; gap: 5px; }

/* Florais — autocomplete + chips de essências */
.pr-ac-wrap { position: relative; }
.pr-ac-list {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); max-height: 240px; overflow-y: auto;
}
.pr-ac-list.open { display: block; }
.pr-ac-item { padding: 9px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--border-soft); }
.pr-ac-item:last-child { border-bottom: none; }
.pr-ac-item:hover { background: var(--bg-alt); }
.pr-essence-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-essence-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px;
  border-radius: 20px; background: var(--gradient-brand-soft); border: 1px solid var(--border-soft);
  font-size: 12.5px; font-weight: 600; color: var(--primary-dark);
}
.pr-essence-chip .pr-essence-drops { width: 62px; padding: 3px 8px; font-size: 12px; border-radius: 12px; }
.pr-essence-remove { background: none; border: none; cursor: pointer; color: var(--text-soft); font-size: 15px; line-height: 1; padding: 0 4px; }
.pr-essence-remove:hover { color: var(--danger); }

/* Radiestesia — barras % antes/depois */
.pr-radi-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.pr-radi-bars { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.pr-radi-bar-row { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 8px; align-items: center; font-size: 11.5px; }
.pr-radi-bar-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-radi-bar-pair { display: flex; align-items: center; gap: 6px; }
.pr-radi-bar-track { flex: 1; height: 8px; border-radius: 99px; background: var(--bg-alt); border: 1px solid var(--border-soft); overflow: hidden; }
.pr-radi-bar-fill { height: 100%; border-radius: 99px; }
.pr-radi-bar-fill.pr-radi-before { background: var(--text-soft); }
.pr-radi-bar-fill.pr-radi-after { background: var(--gradient-brand); }
.pr-radi-bar-val { min-width: 34px; text-align: right; color: var(--text-muted); }
.pr-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 3px 0 8px; vertical-align: middle; }
.pr-legend-dot.pr-radi-before { background: var(--text-soft); }
.pr-legend-dot.pr-radi-after { background: var(--primary); }
.pr-measure-row { display: grid; grid-template-columns: 1fr 92px 92px auto; gap: 6px; align-items: center; margin-bottom: 6px; }

/* Arquivos */
.pr-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-right: auto; }
.pr-filter-chip {
  border: 1px solid var(--border); background: var(--surface); border-radius: 20px; padding: 5px 14px;
  font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer;
}
.pr-filter-chip:hover { border-color: var(--primary); color: var(--primary); }
.pr-filter-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pr-upload-zone {
  border: 2px dashed var(--border); border-radius: var(--radius); padding: 20px; text-align: center;
  background: var(--surface); margin-bottom: 16px; color: var(--text-muted); transition: border-color .15s ease, background .15s ease;
}
.pr-upload-zone.pr-drag-over { border-color: var(--primary); background: var(--gradient-brand-soft); }
.pr-upload-inner p { margin: 8px 0 4px; font-size: 13px; }
.pr-upload-actions { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.pr-upload-actions select { width: auto; padding: 7px 12px; font-size: 12.5px; }
.pr-files-grid { align-items: start; }
.pr-files-grid .card { margin-top: 0; padding: 12px; }
.pr-file-thumb {
  height: 120px; border-radius: var(--radius-sm); background: var(--bg-alt); overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: var(--text-soft); margin-bottom: 8px;
}
.pr-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pr-file-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-patient-badge { background: var(--info-light); color: var(--info); margin-top: 4px; }

/* Assinaturas */
.pr-sign-list { display: flex; flex-direction: column; }
.pr-sign-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 2px; border-top: 1px solid var(--border-soft); }
.pr-sign-row:first-child { border-top: none; }
.pr-sign-row-main { flex: 1; min-width: 0; font-size: 13.5px; }
.pr-sign-row-date { font-size: 12px; white-space: nowrap; }
.pr-sign-canvas {
  width: 100%; height: 190px; border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
  background: var(--surface); display: block; touch-action: none; cursor: crosshair;
}
.pr-sign-pad-actions { display: flex; gap: 8px; margin-top: 10px; }

@media (max-width: 700px) {
  .pr-radi-bar-row { grid-template-columns: 72px 1fr 1fr; }
  .pr-measure-row { grid-template-columns: 1fr 70px 70px auto; }
}

/* ==========================================================================
   Release 6 (SPEC_RELEASE_6.md §A7/§B4/§C) — F2: Plano Evolutivo na ficha
   360, página de Módulos do terapeuta, diretório público de profissionais,
   roadmap do admin e link discreto no login. Reusa os tokens acima.
   ========================================================================== */

/* ---- Módulos (#/modulos + aba do admin) ---- */
.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.mod-card { display: flex; flex-direction: column; gap: 12px; }
.mod-card-soon { opacity: .72; }
.mod-card-head { display: flex; align-items: flex-start; gap: 12px; }
.mod-ic {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--gradient-brand-soft);
  color: var(--primary);
}
.mod-head-text { min-width: 0; }
.mod-name { font-weight: 700; font-size: 14px; }
.mod-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.mod-card-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
.mod-state-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.mod-badge-soon { background: var(--warning-light); color: var(--gold-deep); font-weight: 700; }

/* Interruptor (toggle) dos módulos disponíveis */
.mod-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; cursor: pointer; }
.mod-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.mod-slider {
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: 22px;
  transition: background .18s ease;
}
.mod-slider::before {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease;
}
.mod-switch input:checked + .mod-slider { background: var(--primary); }
.mod-switch input:checked + .mod-slider::before { transform: translateX(18px); }
.mod-switch input:disabled + .mod-slider { opacity: .55; cursor: not-allowed; }
.mod-switch input:focus-visible + .mod-slider { outline: 2px solid var(--primary-light); outline-offset: 2px; }

/* ---- Diretório público (#/profissionais) — sobre o tema escuro p-auth-page ---- */
.p-auth-card.dir-wide { max-width: 640px; }
.dir-search-row { position: relative; margin: 4px 0 16px; }
.dir-search-ic {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  opacity: .6; display: inline-flex; pointer-events: none;
}
.dir-search-row input {
  width: 100%;
  padding: 11px 14px 11px 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: inherit;
  font-size: 14px;
}
.dir-search-row input:focus { outline: 2px solid rgba(240,185,84,.45); outline-offset: 1px; }
.dir-card { margin-bottom: 14px; text-align: left; }
.dir-card-head { display: flex; align-items: center; gap: 12px; }
.dir-avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  font-weight: 700; font-size: 15px;
  letter-spacing: .5px;
}
.dir-head-text { min-width: 0; }
.dir-name { font-weight: 700; font-size: 15px; }
.dir-spec { font-size: 12.5px; opacity: .75; margin-top: 1px; }
.dir-bio { font-size: 13px; line-height: 1.55; opacity: .85; margin: 10px 0 0; }
.dir-services { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dir-svc-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}
.dir-cta-row { margin-top: 14px; display: flex; justify-content: flex-end; }
.dir-cta { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.dir-login-row { text-align: center; margin-top: 18px; font-size: 12.5px; }
.dir-login-row a { color: inherit; opacity: .7; text-decoration: underline; }
.dir-login-row a:hover { opacity: 1; }

/* ---- Link discreto "Encontrar um profissional" no login ---- */
.auth-directory-row { text-align: center; margin-top: 14px; }
.auth-directory-link {
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-directory-link:hover { color: var(--primary); }

/* ---- Release 10.5 — "Recuperar senha": link no form de login + o próprio
   3º "modo" do cartão (form-recuperar), mesmo tom discreto do link do
   diretório acima. ---- */
.auth-forgot-row { text-align: center; margin-top: 12px; }
.auth-forgot-link {
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.auth-forgot-link:hover { color: var(--primary); }
.auth-forgot-intro { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0 0 18px; }
.auth-forgot-success {
  background: var(--success-light); color: var(--success);
  padding: 12px 14px; border-radius: 9px; font-size: 13.5px; line-height: 1.5; margin: 0;
}

/* ---- Plano Evolutivo na Evolução 360 (.c360-plan-*) ---- */
.ic-inline { display: inline-flex; vertical-align: -3px; }
.c360-plan-status-ativo { background: var(--success-light); color: var(--success); }
.c360-plan-status-rascunho { background: var(--warning-light); color: var(--gold-deep); }
.c360-plan-status-concluido { background: var(--info-light); color: var(--info); }
.c360-plan-status-arquivado { background: var(--bg-alt); color: var(--text-soft); }
.c360-plan-letters {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-muted);
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 10px;
}
.c360-plan-areas { margin-top: 6px; }
.c360-plan-area-row { padding: 9px 0; border-top: 1px solid var(--border-soft); }
.c360-plan-area-row:first-child { border-top: none; }
.c360-plan-area-name { font-size: 12px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .4px; }
.c360-plan-area-goal { font-size: 13.5px; margin-top: 2px; }
.c360-plan-area-step { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.c360-ici-current { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.c360-ici-total { font-size: 30px; font-weight: 800; color: var(--primary); line-height: 1; }
.c360-ici-band { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.c360-ici-canvas { width: 100%; height: 170px; display: block; }
.c360-habit-streak { font-size: 11.5px; color: var(--text-soft); margin: -2px 0 6px; }
.c360-mission-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border-soft);
}
.c360-mission-row:first-child { border-top: none; }
.c360-mission-main { min-width: 0; }
.c360-mission-title { font-weight: 600; font-size: 13.5px; }
.c360-mission-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.c360-mission-meta { font-size: 12px; color: var(--text-soft); margin-top: 3px; }
.c360-alert-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px;
  padding: 8px 0;
  border-top: 1px solid var(--border-soft);
}
.c360-alert-row:first-child { border-top: none; }
.c360-alert-ic { color: var(--warning); flex: 0 0 auto; margin-top: 1px; }
.c360-critical-chip { background: var(--danger-light); color: var(--danger); font-weight: 600; }
.c360-map-card { min-width: 0; }
.c360-kin-row { display: flex; align-items: center; gap: 14px; }
.c360-kin-glyph { flex: 0 0 auto; background: var(--bg-alt); border-radius: 14px; padding: 6px; display: inline-flex; }
.c360-map-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-muted); margin-top: 12px; }
.c360-num-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.c360-num-cell { background: var(--bg-alt); border-radius: var(--radius-sm); padding: 10px 8px; text-align: center; }
.c360-num-value { font-size: 20px; font-weight: 800; color: var(--primary); line-height: 1.1; }
.c360-num-kind { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* ---- Roadmap do ecossistema (aba Módulos do admin) ---- */
.adm-roadmap-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border-soft);
  font-size: 13.5px;
}
.adm-roadmap-row:first-child { border-top: none; }
.adm-roadmap-ic { color: var(--text-soft); display: inline-flex; flex: 0 0 auto; }
.adm-roadmap-name { flex: 1; font-weight: 600; }

@media (max-width: 700px) {
  .c360-num-grid { grid-template-columns: repeat(2, 1fr); }
  .mod-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Release 8 (SPEC_RELEASE_8.md §E) — aba "Resumo 360" (Agente D).
   Painel-resumo integrativo do terapeuta em client360.js. Classes novas com
   prefixo i360-, acrescentadas SÓ no fim do ficheiro (contrato do território).
   Paleta: variáveis Pastel Sereno existentes (--primary/--surface/etc.).
   ========================================================================== */

/* Grelha de chips de perfil (as 9 lentes de identidade) */
.i360-chips-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.i360-chip {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-sm);
}
.i360-chip-empty { background: transparent; border-style: dashed; box-shadow: none; opacity: .75; }
/* r21_diffs input 4 — chip com valor abre um detalhamento (openI360Detail). */
.i360-chip-clickable { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.i360-chip-clickable:hover, .i360-chip-clickable:focus-visible {
  border-color: var(--primary-light); box-shadow: var(--shadow);
  outline: none;
}
.i360-chip-head {
  display: flex; align-items: center; gap: 6px; color: var(--primary-dark);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 6px;
}
.i360-chip-main { font-size: 14px; font-weight: 700; color: var(--text); }
.i360-chip-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.i360-chip-hint { font-size: 12.5px; color: var(--text-muted); font-style: italic; }

/* r21_diffs input 4 — corpo do modal de detalhe de cada lente do perfil. */
.i360-detail-result {
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--bg-alt); margin-bottom: 12px;
}
.i360-detail-main { font-size: 16px; font-weight: 700; color: var(--text); }
.i360-detail-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.i360-detail-text { font-size: 13.5px; line-height: 1.6; margin: 0 0 10px; }
.i360-detail-disclaimer { font-size: 12px; margin: 0; }

/* Bloco de estado */
.i360-state-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: start; }
/* Hotfix v21.3.3 — termômetro + ritmo empilham nesta coluna própria (altura
   independente da Roda ao lado), em vez de serem 2 itens soltos no grid
   partilhando linha com ela — era isso que abria o vão enorme entre eles. */
.i360-state-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.i360-state-card { padding: 14px 16px; }
.i360-state-label {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--primary-dark); margin-bottom: 6px;
}
.i360-state-value { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; color: var(--text); }
.i360-state-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.i360-state-empty { padding: 16px; font-size: 13.5px; }
.i360-weak-domains { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.i360-weak-chip { background: var(--gradient-brand-soft); border: 1px solid var(--primary-light); color: var(--primary-dark); }
.i360-roda-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; border-bottom: 1px dashed var(--border); }
.i360-roda-row:last-of-type { border-bottom: 0; }
.i360-roda-score { font-weight: 700; color: var(--primary); }
/* r21_diffs input 4 — link para a secção Roda da Vida no menu lateral. */
.i360-roda-link {
  display: block; margin-top: 8px; padding: 0; border: none; background: none;
  cursor: pointer; font-size: 12px; color: var(--primary); text-decoration: underline;
}
.i360-roda-link:hover { color: var(--primary-dark); }
.i360-streak { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; }
.i360-delta { font-size: 13px; font-weight: 700; }

/* Bandas do Termômetro (escala vibracional vermelho→violeta, tons pastel) */
.i360-band { color: #fff; border: 0; }
.i360-band-vermelho { background: #c46a6a; }
.i360-band-laranja { background: #c98d5a; }
.i360-band-amarelo { background: #bfa64e; }
.i360-band-verde { background: #7ba874; }
.i360-band-azul { background: #6a92c4; }
.i360-band-indigo { background: #7a74b8; }
.i360-band-violeta { background: #9a74b8; }
.i360-band-neutro { background: var(--text-muted); }

/* Cards de insights (camada 1) */
.i360-insights { display: flex; flex-direction: column; gap: 10px; }
.i360-insight-card { padding: 14px 16px; border-left: 3px solid var(--primary-light); }
.i360-insight-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; color: var(--primary); }
.i360-source-chip { background: var(--gradient-brand-soft); border: 1px solid var(--primary-light); color: var(--primary-dark); font-size: 11px; }
.i360-insight-text { font-size: 13.5px; line-height: 1.65; color: var(--text); }

/* Síntese IA (camada 2 — opcional) */
.i360-ai-card { margin-top: 10px; padding: 14px 16px; background: var(--gradient-brand-soft); }

/* Perguntas sugeridas */
.i360-questions-card { padding: 14px 18px; }
.i360-questions-list { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 2; color: var(--text); }
.i360-questions-list li::marker { color: var(--primary); font-weight: 700; }

@media (max-width: 900px) {
  .i360-chips-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .i360-chips-grid, .i360-state-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
   Release 10 "Descobrir" — CSS novo do Território C (terapeuta + admin +
   diretório público). O Agente B é dono de public/css/app.css (o CSS
   "principal" partilhado, onde vivem hoje as classes .dir-*/.mod-*/.agn-*
   usadas por directoryPublic.js, modules.js e agendaConfig.js) — este
   ficheiro não foi mesclado nele; o orquestrador deve colar o bloco abaixo
   no fim de public/css/app.css (mesma folha que já estiliza directoryPublic.js,
   admin.js e as demais views do terapeuta — ver notes.md para a decisão de
   não editar app.css diretamente).
   Convenção: todas as classes novas usam o prefixo `mkt-` (marketplace) ou
   `dir-` (já existente, aditivo). Usa as custom properties do tema "Pastel
   Sereno" já definidas em app.css (--gold, --primary, --border, --bg-alt,
   --text-muted, --success, --success-light...).
   ========================================================================== */

/* -------------------------------------------------------------------------
   Chips genéricos (categorias, idiomas, tipos de oferta) — vitrine.js,
   ofertas.js, directoryPublic.js, admin.js (aba Marketplace).
   ------------------------------------------------------------------------- */
.mkt-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.mkt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--bg-alt); color: var(--text); border: 1px solid var(--border);
  line-height: 1.3;
}
.mkt-chip-sm { padding: 3px 9px; font-size: 11.5px; }
.mkt-chip-removable { padding-right: 6px; }
.mkt-chip-removable button {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-muted); cursor: pointer;
  padding: 2px; border-radius: 50%;
}
.mkt-chip-removable button:hover { background: rgba(0, 0, 0, .06); color: var(--text); }
.mkt-chip-toggle {
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mkt-chip-toggle:hover { border-color: var(--gold); }
.mkt-chip-toggle.active {
  background: var(--gold); border-color: var(--gold); color: #fff;
}
.mkt-type-chip { display: inline-flex; align-items: center; gap: 5px; }

/* -------------------------------------------------------------------------
   Vitrine (#/vitrine) — grid editor + preview lateral.
   ------------------------------------------------------------------------- */
.mkt-vit-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 960px) { .mkt-vit-grid { grid-template-columns: 1fr; } }

.mkt-warning-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--gold-mist); border: 1px solid var(--gold-light);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.mkt-warning-ic { color: var(--gold-deep); flex-shrink: 0; margin-top: 2px; }
.mkt-warning-card p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--text); }

.mkt-cert-row {
  display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 8px; align-items: center;
  margin-bottom: 8px;
}
@media (max-width: 640px) { .mkt-cert-row { grid-template-columns: 1fr; } }

.mkt-preview-card { position: sticky; top: 16px; }
.mkt-preview-inner { padding-top: 4px; }
.mkt-preview-head { display: flex; align-items: center; gap: 12px; }
.mkt-preview-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--lavanda-mist); color: var(--primary-dark); font-weight: 700; font-size: 16px;
}
.mkt-preview-name { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.mkt-preview-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.mkt-index-card { margin-top: 16px; }

/* -------------------------------------------------------------------------
   Índice MIC360 — barra 0-100.
   ------------------------------------------------------------------------- */
.mkt-index-bar { display: flex; align-items: center; gap: 8px; }
.mkt-index-track {
  flex: 1; height: 8px; border-radius: 999px; background: var(--border-soft); overflow: hidden;
}
.mkt-index-bar-lg .mkt-index-track { height: 12px; }
.mkt-index-bar-sm { display: inline-flex; min-width: 60px; }
.mkt-index-bar-sm .mkt-index-track { height: 6px; }
.mkt-index-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}
.mkt-index-value { font-size: 12px; font-weight: 700; color: var(--gold-deep); min-width: 22px; text-align: right; }
.mkt-index-bar-sm .mkt-index-value { font-size: 10.5px; }

.mkt-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.mkt-stat-box { text-align: center; background: var(--bg-alt); border-radius: 10px; padding: 10px 6px; }
.mkt-stat-value { font-size: 17px; font-weight: 700; color: var(--text); }
.mkt-stat-label { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }

/* -------------------------------------------------------------------------
   Estrelas (avaliações) — vitrine.js, avaliacoesTherapist.js,
   directoryPublic.js, admin.js.
   ------------------------------------------------------------------------- */
.mkt-stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.mkt-star { color: var(--border); display: inline-flex; }
.mkt-star svg { stroke: var(--gold); fill: none; }
.mkt-star.filled svg { fill: var(--gold); }

/* -------------------------------------------------------------------------
   Avaliações do terapeuta (#/avaliacoes).
   ------------------------------------------------------------------------- */
.mkt-review-list { display: flex; flex-direction: column; gap: 12px; }
.mkt-review-card { padding: 16px; }
.mkt-review-hidden { opacity: .65; }
.mkt-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mkt-review-reply {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--lavanda-mist); border-left: 3px solid var(--primary);
}
.mkt-review-reply-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.mkt-review-reply-form textarea { width: 100%; }
.mkt-empty-elegant { border: 1px dashed var(--border); background: var(--bg-alt); }

/* -------------------------------------------------------------------------
   Diretório público (#/profissionais) — chips de categoria + rating/índice
   aditivos ao card existente (.dir-card em app.css).
   ------------------------------------------------------------------------- */
.dir-cat-chips { justify-content: center; margin: 4px 0 18px; }
.dir-cat-chips .mkt-chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: inherit; }
.dir-cat-chips .mkt-chip-toggle.active { background: var(--gold); border-color: var(--gold); color: #2b2110; }
.dir-rating-row { display: flex; align-items: center; margin-top: 8px; flex-wrap: wrap; gap: 4px; }
.dir-card-featured { border: 1px solid var(--gold); box-shadow: 0 0 0 1px var(--gold-light); }
.dir-featured-badge { margin-left: 8px; background: var(--gold-mist); color: var(--gold-deep); vertical-align: middle; }

/* -------------------------------------------------------------------------
   Aba Marketplace do admin (admin.js) — reaproveita .table/.card/.chip/
   .grid.grid-2/.grid.grid-3 já existentes em app.css; nenhuma classe extra
   necessária.
   ------------------------------------------------------------------------- */

/* ==========================================================================
   Release 12.2 — Área do profissional: barra de territórios + gaveta
   recolhível + busca global (mock "Meu Dia" 2.1, aprovado em 25/07).
   Tudo abaixo só se aplica quando #sidebar tem a classe "rail-mode"
   (modo profissional); o Portal do Parceiro e o modo paciente continuam
   exatamente como antes.
   ========================================================================== */
.sidebar-rail { display: none; }
.sidebar-panel { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; }

.sidebar.rail-mode { width: auto; flex-direction: row; }
.sidebar.rail-mode .sidebar-brand { display: none; }
.sidebar.rail-mode .sidebar-panel {
  width: 246px;
  border-left: 1px solid var(--border-soft);
  transition: width .2s ease, opacity .15s ease;
}
#app-shell.nav-collapsed .sidebar.rail-mode .sidebar-panel {
  width: 0; opacity: 0; pointer-events: none; border-left: none;
}

/* --- barra fina de territórios --- */
.sidebar.rail-mode .sidebar-rail {
  display: flex; flex-direction: column; align-items: center;
  width: 88px; flex: none; padding: 16px 0 12px; gap: 2px;
  background: rgba(255,255,255,.45);
}
/* Release 22.3 — era uma caixa dourada com "M" (fundo var(--gold), sombra e
   raio de 12px). Passou a ser o símbolo do logo: sem fundo, sem raio e sem
   sombra, porque a arte já traz o círculo — uma caixa por trás punha dois
   círculos concêntricos no mesmo sítio, o mesmo motivo que tirou a caixa da
   gaveta na 22.2.1. */
.rail-logo {
  width: 38px; height: 38px; display: flex; align-items: center;
  justify-content: center; margin-bottom: 12px; cursor: pointer;
}
.rail-logo img { width: 38px; height: 38px; display: block; }
.rail-item {
  width: 74px; padding: 9px 3px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 10px; line-height: 1.15; text-align: center; letter-spacing: -.01em;
  color: var(--text-muted); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.rail-item .rail-label { display: block; width: 100%; overflow-wrap: anywhere; }
.rail-toggle {
  width: 34px; height: 34px; border-radius: 11px; margin-bottom: 6px;
  border: 1px solid var(--border); background: rgba(255,255,255,.7);
  color: var(--primary-dark); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rail-toggle:hover { background: #fff; border-color: var(--gold); }
.rail-toggle .rt-out { display: none; }
#app-shell.nav-collapsed .rail-toggle .rt-in { display: none; }
#app-shell.nav-collapsed .rail-toggle .rt-out { display: flex; }
.rail-item .ic { color: var(--primary); display: flex; }
.rail-item:hover { background: rgba(255,255,255,.75); color: var(--text); }
.rail-item.active { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 2px 10px rgba(90,70,120,.10); }
.rail-item.active .ic { color: var(--gold-deep); }
.rail-spacer { flex: 1; }
.rail-hint { font-size: 10px; color: var(--text-soft); letter-spacing: .04em; }

/* --- cabeçalho da gaveta (título do território + recolher) --- */
.nav-head { display: flex; align-items: center; gap: 8px; padding: 16px 8px 6px 12px; }
.nav-head-title {
  flex: 1; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-soft); font-weight: 700;
}
.nav-collapse-btn {
  width: 28px; height: 28px; flex: none; border-radius: 9px;
  border: 1px solid var(--border); background: rgba(255,255,255,.7);
  color: var(--primary-dark); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.nav-collapse-btn:hover { background: #fff; border-color: var(--gold); }
.sidebar.rail-mode .sidebar-link .ic { width: auto; display: flex; }

/* --- submenu flutuante (com a gaveta recolhida) --- */
.rail-flyout {
  position: fixed; left: 92px; z-index: 60; width: 236px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); padding: 10px;
}
.rail-flyout-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-soft); font-weight: 700; padding: 2px 10px 8px;
}

/* --- busca global no header --- */
.global-search { display: none; }
#app-shell.pro-nav:not(.patient-mode):not(.partner-mode):not(.no-chrome) .global-search {
  display: flex; align-items: center; gap: 8px;
  max-width: 340px; flex: 1;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-alt);
  color: var(--text-muted); font-size: 13px; font-family: inherit;
  cursor: pointer; text-align: left;
}
.global-search:hover { background: #fff; border-color: var(--gold); }
.global-search .gs-ic { font-size: 15px; }
.global-search .gs-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.global-search kbd {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 1px 6px; font-size: 11px; color: var(--text-soft);
}

/* --- caixa da busca global (Ctrl/Cmd + K) --- */
.palette-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(63,58,82,.28); display: flex; justify-content: center;
  align-items: flex-start; padding: 88px 16px 16px;
}
.palette-box {
  width: min(560px, 100%); background: var(--surface);
  border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.palette-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border-soft);
  color: var(--text-muted);
}
.palette-input-row input {
  flex: 1; border: none; outline: none; font-size: 15px;
  font-family: inherit; color: var(--text); background: transparent;
}
.palette-input-row kbd {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px; font-size: 11px; color: var(--text-soft);
}
.palette-results { max-height: 340px; overflow-y: auto; padding: 6px; }
.palette-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px; cursor: pointer; font-size: 14px;
}
.palette-row .ic { color: var(--primary); display: flex; }
.palette-row.active { background: var(--gold-mist); }
.palette-label { flex: 1; }
.palette-hint { font-size: 11px; color: var(--text-soft); }
.palette-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 13.5px; }

/* --- responsivo --- */
@media (max-width: 900px) {
  .sidebar.rail-mode .sidebar-rail { width: 76px; }
  .sidebar.rail-mode .sidebar-panel { width: 228px; }
  /* No telemóvel a sidebar já é uma gaveta que abre por cima: nunca a
     mostramos recolhida (ficaria só a barra de ícones, sem contexto). */
  #app-shell.nav-collapsed .sidebar.rail-mode .sidebar-panel {
    width: 228px; opacity: 1; pointer-events: auto; border-left: 1px solid var(--border-soft);
  }
  .rail-flyout { display: none; }
  #app-shell.pro-nav:not(.patient-mode):not(.partner-mode):not(.no-chrome) .global-search { max-width: 44px; padding: 7px 10px; justify-content: center; }
  .global-search .gs-text, .global-search kbd { display: none; }
}

/* ==========================================================================
   Release 12.3 — páginas novas do menu do profissional (Sala online, Fichas
   360, Anamneses, Prontuários, Financeiro, Relatórios, Perfil, Privacidade,
   Configurações, Ajuda, Copiloto). Classes prefixadas `.pro-` para não
   colidir com nada existente; cores e raios vêm do tema Pastel Sereno.
   ========================================================================== */
.pro-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary-light), var(--gold-light));
  color: var(--primary-dark); font-weight: 700; font-size: 14px;
}
.pro-avatar-lg { width: 58px; height: 58px; font-size: 18px; }
.pro-profile-head { display: flex; align-items: center; gap: 14px; }
.pro-client-row { display: flex; align-items: center; gap: 12px; }
.pro-client-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pro-client-card { padding: 14px; }

.pro-list-card, .pro-room-card, .pro-signal {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 10px; flex-wrap: wrap;
}
.pro-room-time { font-weight: 700; color: var(--gold-deep); font-size: 14px; width: 52px; flex: none; }
.pro-day-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-soft); font-weight: 700; margin: 14px 0 8px 2px;
}
.pro-signal-warn { border-left: 3px solid var(--gold); }
.pro-signal-info { border-left: 3px solid var(--primary-light); }

.pro-inline-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px dashed var(--border-soft);
}
.pro-inline-row:last-child { border-bottom: none; }

.pro-note {
  background: var(--lavanda-mist); border: 1px dashed var(--primary-light);
  border-radius: 10px; padding: 10px 13px; font-size: 12.5px; color: var(--primary-dark);
}
.pro-link-code {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: 12.5px; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

.pro-bar { height: 8px; border-radius: 99px; background: var(--bg-alt); overflow: hidden; }
.pro-bar-fill { height: 100%; background: var(--gold); border-radius: 99px; }

/* interruptores das preferências de cookies */
.pro-switch-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--border-soft); }
.pro-switch-row:last-child { border-bottom: none; }
.pro-switch {
  width: 44px; height: 25px; border-radius: 99px; flex: none; position: relative;
  border: none; background: #d9d2c4; cursor: pointer; transition: background .18s ease;
}
.pro-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; transition: transform .18s ease;
}
.pro-switch.on { background: var(--success); }
.pro-switch.on::after { transform: translateX(19px); }
.pro-switch.locked { background: var(--primary-light); cursor: default; }
.pro-switch.locked::after { transform: translateX(19px); }

/* guias passo a passo da Ajuda */
.pro-guide { padding: 14px 16px; margin-bottom: 10px; }
.pro-guide-head { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.pro-guide-arrow { color: var(--text-soft); transition: transform .18s ease; }
.pro-guide.open .pro-guide-arrow { transform: rotate(90deg); }
.pro-steps { counter-reset: prostep; list-style: none; padding: 0; margin: 14px 0 0; }
.pro-steps li {
  counter-increment: prostep; position: relative;
  padding: 0 0 14px 40px; margin-left: 13px; border-left: 2px dashed var(--border);
}
.pro-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pro-steps li::before {
  content: counter(prostep); position: absolute; left: -14px; top: -2px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700;
}
.pro-steps b { display: block; font-size: 13.5px; }
.pro-steps span { font-size: 13px; color: var(--text-muted); }

/* checklist de primeiros passos */
.pro-check-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border-soft); }
.pro-check-row:last-child { border-bottom: none; }
.pro-check-row .ic-inline { color: var(--text-soft); }
.pro-check-row.done .ic-inline { color: var(--success); }

/* ==========================================================================
   Release 17 — privacidade antes da criação da conta (SPEC_RELEASE_17.md §7)
   ========================================================================== */

/* --- banner de armazenamento/cookies ------------------------------------ */
/* Ancorado em baixo e limitado em largura: informa sem tapar o conteúdo
   (RF-01 — sem cookie wall). */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 4000;
  display: flex; justify-content: center; pointer-events: none;
}
/* Coluna flex: só a área de conteúdo rola; as ações e os links ficam
   FIXOS no fundo do cartão. A primeira versão punha tudo num único
   contentor com `overflow-y:auto`, e em janelas baixas (ou em idiomas de
   texto mais longo) os botões acabavam por cima das categorias — foi o que
   a usuária apanhou em pt-BR numa janela de 675×620. */
.cookie-banner-inner {
  pointer-events: auto; position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 620px; max-height: min(82vh, 640px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 22px 18px;
  box-shadow: 0 18px 48px rgba(31, 61, 52, 0.18);
}
/* `min-height: 0` é obrigatório: sem ele, um filho flex recusa-se a
   encolher abaixo do seu conteúdo e o overflow nunca chega a acontecer. */
.cookie-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; }
.cookie-actions, .cookie-links { flex: none; }
.cookie-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; font-size: 22px; line-height: 1;
  color: var(--text-soft); cursor: pointer; padding: 4px 8px;
}
.cookie-close:hover { color: var(--text); }
.cookie-title { font-size: 16px; margin: 0 0 8px; color: var(--text); }
.cookie-text { font-size: 13.5px; line-height: 1.55; color: var(--text-soft); margin: 0 0 14px; }

/* As três ações têm o MESMO peso visual (RF-01): rejeitar não pode parecer
   uma opção de segunda nem custar mais cliques do que aceitar. */
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.cookie-btn { flex: 1 1 160px; min-width: 140px; }
.cookie-links { margin: 14px 0 0; font-size: 12px; color: var(--text-soft); }
.cookie-links a { color: var(--primary); text-decoration: none; }
.cookie-links a:hover { text-decoration: underline; }

.cookie-cats { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
.cookie-cat {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px;
  background: var(--bg-alt); cursor: pointer;
}
.cookie-cat.locked { opacity: 0.75; cursor: default; }
.cookie-cat input { margin-top: 3px; flex: none; }
.cookie-cat-body { display: flex; flex-direction: column; gap: 2px; }
.cookie-cat-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.cookie-cat-title em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--text-soft); }
.cookie-cat-desc { font-size: 12.5px; color: var(--text-soft); line-height: 1.45; }

@media (max-width: 560px) {
  .cookie-banner { left: 8px; right: 8px; bottom: 8px; }
  .cookie-banner-inner { padding: 16px 16px 14px; }
  .cookie-btn { flex: 1 1 100%; }
}

/* --- bloco de consentimento no cadastro --------------------------------- */
.consent-block {
  display: flex; flex-direction: column; gap: 10px;
  margin: 4px 0 18px; padding: 14px; border-radius: 12px;
  background: var(--bg-alt); border: 1px solid var(--border-soft);
}
.consent-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.consent-row input { margin-top: 3px; flex: none; }
.consent-row span { font-size: 13px; line-height: 1.5; color: var(--text); }
.consent-row a { color: var(--primary); }
.consent-optional span { color: var(--text-soft); }

/* Aviso de dados de saúde: sóbrio de propósito. Uma cor de alarme aqui
   assustaria alguém que está apenas a criar uma conta. */
.health-notice {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 16px 0 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--lavanda-mist); border: 1px solid var(--primary-light);
  font-size: 12.5px; line-height: 1.5; color: var(--text);
}
.health-notice svg { flex: none; color: var(--primary-dark); margin-top: 1px; }

/* --- faixa de confirmação de e-mail ------------------------------------- */
.verify-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 3500;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 44px 9px 16px;
  background: var(--gold-mist); border-bottom: 1px solid var(--gold-light);
  font-size: 13px; color: var(--text);
}
.verify-bar-overdue { background: var(--lavanda-mist); border-bottom-color: var(--primary-light); }
.verify-bar-icon { flex: none; display: flex; align-items: center; color: var(--gold-deep); }
.verify-bar-overdue .verify-bar-icon { color: var(--primary-dark); }
.verify-bar-text { flex: 1; line-height: 1.4; }
.verify-bar-btn {
  flex: none; background: var(--gold); color: #fff; border: none;
  border-radius: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer;
}
.verify-bar-btn:hover:not(:disabled) { background: var(--gold-deep); }
.verify-bar-btn:disabled { opacity: 0.6; cursor: default; }
.verify-bar-close {
  position: absolute; right: 10px; background: none; border: none;
  font-size: 20px; line-height: 1; color: var(--text-soft); cursor: pointer; padding: 2px 8px;
}
@media (max-width: 560px) {
  .verify-bar { font-size: 12px; padding: 8px 36px 8px 12px; gap: 8px; }
}

/* A faixa é `position: fixed` no topo — sem compensação, tapa o cabeçalho
   do portal do paciente (os botões do sino e de sair, `position: fixed` a
   top:16px) e o cabeçalho do profissional. Apanhado na captura do smoke, e
   não na leitura do código: um aviso de privacidade que esconde o botão de
   sair é pior do que aviso nenhum.

   `--verify-bar-h` é a altura real da faixa; a classe é posta no <body>
   pelo app.js só enquanto ela existe, e o cálculo usa `calc()` sobre os
   valores originais em vez de os reescrever. */
body.with-verify-bar { --verify-bar-h: 38px; }
body.with-verify-bar .patient-header-actions { top: calc(16px + var(--verify-bar-h)); }
body.with-verify-bar #app-shell:not(.no-chrome) { padding-top: var(--verify-bar-h); }
@media (max-width: 560px) {
  body.with-verify-bar { --verify-bar-h: 52px; }
}

/* O acolhimento da R12 tranca o corpo com .onb-lock enquanto o overlay "A
   Semente" está aberto. A faixa desaparece nesse período — e a regra é CSS,
   não JavaScript, de propósito: a guarda em JS só cobre o caso de a faixa
   tentar aparecer DEPOIS do overlay; se o acolhimento abrir depois dela (que
   é a ordem real de uma conta nova, apanhada pelo smoke), só uma regra
   declarativa como esta a tira do caminho. */
body.onb-lock .verify-bar { display: none; }

/* --- páginas legais ------------------------------------------------------ */
.legal-page { min-height: 100vh; background: var(--bg); padding: 28px 16px 48px; overflow-y: auto; }
.legal-card {
  max-width: 760px; margin: 0 auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; padding: 28px 32px 24px;
}
.legal-nav { margin-bottom: 18px; }
.legal-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--primary); text-decoration: none; }
/* chevron-down não existe em icons.js — rodamos o chevron-right (armadilha
   já anotada na R15). Aqui é para a esquerda: 180°. */
.legal-back svg { transform: rotate(180deg); }
.legal-back:hover { text-decoration: underline; }
.legal-title { font-size: 24px; margin: 0 0 6px; color: var(--text); line-height: 1.25; }
.legal-meta { font-size: 12.5px; color: var(--text-soft); margin: 0 0 22px; }
.legal-body { font-size: 14px; line-height: 1.65; color: var(--text); }
.legal-body p { margin: 0 0 12px; }
.legal-h2 { font-size: 18px; margin: 28px 0 10px; color: var(--text); }
.legal-h3 { font-size: 15.5px; margin: 20px 0 8px; color: var(--text); }
.legal-h4 { font-size: 14px; margin: 16px 0 6px; color: var(--text-soft); }
.legal-list { margin: 0 0 14px; padding-left: 20px; }
.legal-list li { margin-bottom: 6px; }
.legal-quote {
  margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--gold);
  background: var(--gold-mist); border-radius: 0 8px 8px 0; color: var(--text-soft);
}
.legal-table-wrap { overflow-x: auto; margin: 0 0 16px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.legal-table th, .legal-table td { border: 1px solid var(--border-soft); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal-table th { background: var(--bg-alt); font-weight: 600; }
.legal-body code { background: var(--bg-alt); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }

.legal-footer {
  display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-soft);
  font-size: 12px;
}
.legal-footer a { color: var(--text-soft); text-decoration: none; }
.legal-footer a:hover { color: var(--primary); text-decoration: underline; }

.app-footer-legal { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; margin-left: 12px; }
.app-footer-legal a { color: inherit; opacity: 0.8; text-decoration: none; }
.app-footer-legal a:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 560px) {
  .legal-card { padding: 20px 18px 18px; }
  .legal-title { font-size: 20px; }
}

/* ==========================================================================
   Release 18 — login Google (SPEC_RELEASE_18.md §7)
   ========================================================================== */

/* O botão da Google é desenhado pela biblioteca deles dentro deste host e
   NÃO pode ser reestilizado — as regras da Google proíbem-no, e o browser
   renderiza-o num iframe. O que podemos fazer é dar-lhe espaço e centrá-lo. */
.google-block { margin: 4px 0 18px; }
.google-btn-host { display: flex; justify-content: center; min-height: 44px; }

/* Separador "ou" entre o botão e o formulário clássico. Os dois métodos são
   pares — nenhum é "a alternativa" do outro. */
.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 4px; color: var(--text-soft); font-size: 12.5px;
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border-soft);
}

/* A identidade Google confirmada, nos ecrãs de completar conta / prova. */
.google-identity {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 16px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg-alt); border: 1px solid var(--border-soft);
  font-size: 13.5px; color: var(--text); word-break: break-all;
}
.google-identity svg { flex: none; color: var(--primary-dark); }

/* --- métodos de entrada, no perfil -------------------------------------- */
.lm-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px dashed var(--border-soft);
}
.lm-row:last-of-type { border-bottom: none; }
.lm-icon { flex: none; color: var(--text-soft); margin-top: 2px; }
.lm-body { flex: 1; min-width: 0; }
.lm-name { font-weight: 600; font-size: 13.5px; color: var(--text); }
.lm-detail { font-size: 12.5px; color: var(--text-soft); line-height: 1.45; word-break: break-word; }

/* --- painel de administração -------------------------------------------- */
.ga-status {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px; font-size: 13.5px;
}
.ga-status.ga-on { background: var(--gold-mist); border: 1px solid var(--gold-light); }
.ga-status.ga-off { background: var(--bg-alt); border: 1px solid var(--border-soft); color: var(--text-soft); }
.ga-status svg { flex: none; }
.ga-steps { margin: 0 0 8px; padding-left: 20px; font-size: 13.5px; line-height: 1.6; }
.ga-steps li { margin-bottom: 10px; }
.ga-copy {
  margin: 6px 0; padding: 7px 10px; border-radius: 8px;
  background: var(--bg-alt); border: 1px solid var(--border-soft);
  font-size: 12.5px; word-break: break-all;
}
.ga-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 20px; padding: 12px 14px; border-radius: 12px;
  background: var(--lavanda-mist); border: 1px solid var(--primary-light);
  font-size: 12.5px; line-height: 1.5;
}
.ga-note svg { flex: none; color: var(--primary-dark); margin-top: 1px; }

/* Release 18.0.1 — a linha do e-mail por confirmar, no cartão de métodos de
   entrada. Marcada, mas sem alarme: é uma coisa por fazer, não um erro. */
.lm-row-todo { background: var(--gold-mist); border-radius: 10px; padding: 10px 12px; border-bottom: none; }
.lm-row-todo .lm-icon { color: var(--gold-deep); }

/* ==========================================================================
   Release 21 — "A Companheira de Jornada" (SPEC_RELEASE_21.md §2)
   Resumo 360 em 3 camadas (.c360-layer-*) + aba "Ferramentas" (.c360-tk-*).
   Tudo sobre as variáveis do design system definidas no topo deste ficheiro.
   ========================================================================== */

/* --- camadas: tag de camada + toggles como pílulas --------------------- */
.c360-layer { margin-bottom: 14px; }
.c360-layer-tag {
  display: inline-block; margin-bottom: 10px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  background: var(--lavanda-mist); color: var(--primary-dark);
  border: 1px solid var(--primary-light);
}
.c360-layer-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: background .15s ease, border-color .15s ease;
}
.c360-layer-toggle:hover { background: var(--gold-mist); border-color: var(--gold-light); }
.c360-layer-chev { display: inline-flex; transition: transform .18s ease; color: var(--gold-deep); }
.c360-layer-open .c360-layer-chev { transform: rotate(90deg); }
.c360-layer-body { margin-top: 12px; }
.c360-layer-empty { font-size: 13px; }

/* --- camada 1: movimento, eco "Centelha lembra", tese, 1 minuto -------- */
.c360-mov-card { margin-bottom: 14px; }
.c360-mov-title { font-size: 15px; margin-bottom: 8px; }
.c360-mov-prose { font-size: 14px; line-height: 1.75; margin: 0; }
.c360-echo {
  margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--lavanda-mist); border-left: 3px solid var(--primary-light);
}
.c360-echo-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--primary-dark); }
.c360-echo-lead { font-weight: 600; }
.c360-echo-when { color: var(--text-soft); }
.c360-echo-quote { margin: 6px 0 4px; font-size: 13.5px; font-style: italic; line-height: 1.6; }
.c360-echo-hint { font-size: 12px; color: var(--text-soft); }
/* tese: itálico com separação visual (hairline tracejada) — spec §2.2 */
.c360-thesis {
  margin: 14px 0 0; padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-style: italic; font-size: 14px; color: var(--indigo); line-height: 1.6;
}
.c360-fast-card { }
.c360-fast-title { font-size: 14.5px; margin-bottom: 10px; }
.c360-fast-row { padding: 8px 0; border-top: 1px solid var(--border-soft); }
.c360-fast-row:first-of-type { border-top: none; }
.c360-fast-q { font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; }
.c360-fast-a { font-size: 13.5px; line-height: 1.55; }

/* --- camada 2: fio condutor com fundo suave + ecos --------------------- */
.c360-fio-card { background: var(--gold-mist); border: 1px solid var(--gold-light); }
.c360-fio-theme { font-size: 15px; margin-bottom: 2px; }
.c360-fio-months { font-size: 12px; margin-bottom: 8px; }
.c360-fio-frame {
  font-size: 12.5px; line-height: 1.6; color: var(--text-muted);
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .65); border: 1px dashed var(--gold-light);
  margin-bottom: 10px;
}
.c360-fio-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.c360-fio-source-chip { background: var(--surface); border: 1px solid var(--gold-light); color: var(--gold-deep); }
.c360-ecos-head { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 8px; flex-wrap: wrap; }
.c360-ecos-title { font-size: 13px; font-weight: 600; }
.c360-ecos-hint { font-size: 12px; }
/* timeline de ecos: datas à esquerda, citações à direita */
.c360-eco-row {
  display: grid; grid-template-columns: 96px 1fr; gap: 10px;
  padding: 8px 0; border-top: 1px solid rgba(217, 171, 82, .25);
}
.c360-eco-when { font-size: 12px; color: var(--gold-deep); font-weight: 600; padding-top: 2px; }
.c360-eco-quote { font-size: 13px; font-style: italic; line-height: 1.6; }
.c360-eco-origin { margin-top: 4px; background: var(--surface); border: 1px solid var(--border-soft); color: var(--text-soft); }
.c360-ici-analysis { }
.c360-ici-pillars { margin-top: 10px; }
.c360-ici-narrative { font-size: 13.5px; line-height: 1.65; margin: 10px 0 0; }
.c360-jornada-card { }
.c360-jornada-name { font-size: 14.5px; margin-bottom: 4px; }
.c360-jornada-why { font-size: 13px; color: var(--text-muted); margin: 0 0 10px; }
.c360-jornada-note { font-size: 12px; margin-top: 10px; }
/* cadeia da jornada: chips ligados por → */
.c360-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.c360-chain-chip { background: var(--lavanda-mist); border: 1px solid var(--primary-light); color: var(--primary-dark); }
.c360-chain-arrow { color: var(--text-soft); font-size: 13px; }
/* bússola: gradiente suave dourado/violeta (design system) */
.c360-bussola {
  background: var(--gradient-brand-soft);
  border: 1px solid var(--gold-light);
}
.c360-bussola-tag {
  display: inline-block; margin-bottom: 8px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  background: var(--surface); color: var(--gold-deep); border: 1px solid var(--gold-light);
}
.c360-bussola-phrase { font-size: 14px; line-height: 1.65; margin: 0; }

/* --- camada 3: ritmo da jornada -------------------------------------- */
.c360-ritmo-hint { font-size: 12.5px; margin: -6px 0 12px; }
.c360-ritmo-host { }

/* --- aba "Ferramentas" -------------------------------------------------- */
.c360-tk-conduct-card { margin-bottom: 4px; }
.c360-tk-conduct-title { font-size: 14.5px; margin-bottom: 4px; }
.c360-tk-conduct-hint { font-size: 12.5px; margin-bottom: 10px; }
.c360-tk-tools { display: flex; flex-direction: column; gap: 6px; }
.c360-tk-tool {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft); background: var(--bg);
}
.c360-tk-tool-name { flex: 1; font-size: 13.5px; font-weight: 600; }
/* Legenda técnica pequena — só o terapeuta vê "Técnica: X (PNL)" ao lado do
   nome de acolhimento. Opcional (toolkit.tool.<key>.tech_caption). */
.c360-tk-tool-tech { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-soft); margin-top: 2px; }
.c360-tk-minutes { background: var(--surface); border: 1px solid var(--border-soft); color: var(--text-soft); }
.c360-tk-run { margin-bottom: 12px; }
.c360-tk-run-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.c360-tk-run-name { font-size: 14px; }
.c360-tk-mode { background: var(--lavanda-mist); border: 1px solid var(--primary-light); color: var(--primary-dark); }
.c360-tk-run-date { font-size: 12px; margin-bottom: 8px; }
.c360-tk-result {
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--gold-mist); border: 1px solid var(--gold-light);
  margin-bottom: 10px;
}
.c360-tk-result-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--gold-deep); margin-bottom: 6px; }
.c360-tk-result-line { font-size: 13.5px; line-height: 1.6; margin: 0 0 6px; }
.c360-tk-result-line:last-child { margin-bottom: 0; }
.c360-tk-notes { margin-top: 6px; }
.c360-tk-notes-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.c360-tk-notes-title { font-size: 13px; font-weight: 600; }
/* etiqueta "nota privada — nunca visível ao cliente" */
.c360-tk-note-private {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--danger-light); color: #b06862; border: 1px solid rgba(226, 147, 141, .5);
}
.c360-tk-note { padding: 6px 0; border-top: 1px solid var(--border-soft); }
.c360-tk-note-date { font-size: 11.5px; }
.c360-tk-note-text { font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.c360-tk-note-empty { font-size: 12.5px; margin-bottom: 6px; }
.c360-tk-note-input { width: 100%; margin-top: 8px; }
/* fluxo "Conduzir agora" — 1 pergunta por cartão */
.c360-tk-flow-host { }
.c360-tk-flow { margin-bottom: 14px; border: 1px solid var(--primary-light); }
.c360-tk-flow-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.c360-tk-flow-progress { margin-left: auto; font-size: 12px; color: var(--text-soft); }
.c360-tk-question { font-size: 15px; font-weight: 600; line-height: 1.5; margin-bottom: 10px; }
.c360-tk-context { margin-bottom: 8px; background: var(--gold-mist); border: 1px solid var(--gold-light); color: var(--gold-deep); }
.c360-tk-pick-hint { font-size: 12px; margin-bottom: 6px; }
.c360-tk-answer { width: 100%; }
.c360-tk-scale { display: flex; align-items: center; gap: 12px; }
.c360-tk-scale-value { font-weight: 700; color: var(--primary-dark); min-width: 24px; text-align: center; }
.c360-tk-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.c360-tk-nav .btn-primary { margin-left: auto; }
.c360-tk-safety {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--warning-light); border: 1px solid var(--gold-light);
  font-size: 12.5px; line-height: 1.5; margin-bottom: 10px;
}
.c360-tk-flow-done { border-color: var(--gold-light); background: var(--gold-mist); }

/* ==========================================================================
   Release 21.1 · pedido da Valeria 30/07 (screenshot: ficha ainda abria em
   Dados pessoais com 2 filas de abas) — shell da ficha do cliente: menu
   lateral vertical agrupado (padrão .navgroup/.navitem dos mockups) no lugar
   das duas filas de abas horizontais. Em ecrã estreito o menu colapsa numa
   fila de pílulas com scroll horizontal. Só variáveis existentes.
   ========================================================================== */
.c360-shell { display: flex; align-items: flex-start; gap: 18px; margin-top: 14px; }
.c360-menu {
  width: 218px; flex: none; position: sticky; top: 14px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 6px 8px 14px;
  max-height: calc(100vh - 28px); overflow-y: auto;
}
.c360-menu-group-title {
  font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-soft); margin: 14px 8px 6px; font-weight: 700;
}
.c360-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: none; cursor: pointer;
  color: var(--text); font: inherit; font-size: 13.5px; text-align: left;
  margin-bottom: 1px;
}
.c360-menu-item .ic-inline { color: var(--text-muted); flex: none; }
.c360-menu-item:hover { background: var(--gold-mist); }
.c360-menu-item.active {
  background: var(--lavanda-mist); border-color: var(--primary-light);
  font-weight: 600;
}
.c360-menu-item.active .ic-inline { color: var(--primary-dark); }
.c360-menu-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c360-shell-main { flex: 1; min-width: 0; }
.c360-panel { display: none; }
.c360-panel.active { display: block; }

@media (max-width: 900px) {
  /* colapso: fila de pílulas com scroll — coerente com .tabs/.chip */
  .c360-shell { display: block; }
  .c360-menu {
    position: static; width: auto; max-height: none;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
    overflow-x: auto; padding: 8px; margin-bottom: 14px;
    -webkit-overflow-scrolling: touch;
  }
  .c360-menu-group { display: contents; }
  .c360-menu-group-title { display: none; }
  .c360-menu-item {
    width: auto; flex: none; border-radius: 999px;
    border-color: var(--border-soft); padding: 6px 12px; margin-bottom: 0;
  }
  .c360-menu-label { max-width: 160px; }
}

/* ==========================================================================
   Release 21.2 — desvios mock v8 vs produção (r21_diffs, decisões da
   Valeria 30/07). Fonte visual: mockup biblioteca/ferramentas v8
   (.ph2, .hlbl+.layertag, .fiocard, .icip/.icinarr, .cl do menu lateral).
   ========================================================================== */

/* §A3+A4 — cabeçalho do Resumo 360 (.ph2 do mock): título+subtítulo à
   esquerda, botão dourado "Conduzir uma ferramenta agora" à direita.
   SEM badge "fundidos" — exclusão explícita da Valeria. */
.c360-ph2 {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.c360-ph2-title { font-size: 19px; margin: 0; }
.c360-ph2-sub { margin: 3px 0 0; font-size: 12.8px; }
/* .btn-primary já é dourado no design system — só o ajuste de escala. */
.c360-conduct-btn { flex: none; }

/* §A2 — a tag da camada vive DENTRO do cabeçalho do cartão (.hlbl do mock);
   deixa de flutuar sozinha acima dele. */
.c360-hlbl .c360-layer-tag { margin-right: 8px; vertical-align: 2px; }
.c360-layer-empty .c360-hlbl { margin-bottom: 6px; }

/* §B — estados honestos "a formar-se" do fio e da bússola: as secções ficam
   sempre; o cartão explica porquê ainda não há conteúdo. */
.c360-fio-forming, .c360-bussola-forming {
  font-size: 13px; line-height: 1.6; border-style: dashed;
}

/* §B — tag da temporada em SEMANAS (o .fiotag do mock). */
.c360-fio-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gold-deep); margin-bottom: 4px;
}

/* §A1 — subtítulo de contexto sob o total do ICI. */
.c360-ici-sub { font-size: 12px; margin: -2px 0 8px; }

/* §C — barras do ICI em DOURADO com o valor junto ao nome (padrão .icip do
   mock: nome | valor | barra). O design system não tem --gold-soft; o
   equivalente é --gold-light (#f0d9a8 = --p-gold-soft do mock). */
.c360-ici-pillars { display: flex; flex-direction: column; gap: 8px; }
.c360-icip {
  display: grid; grid-template-columns: 130px 26px 1fr;
  align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted);
}
.c360-icip-val { color: var(--text); font-weight: 700; text-align: right; }
.c360-icip-bar {
  height: 6px; border-radius: 8px; background: var(--gold-mist);
  border: 1px solid var(--gold-light); overflow: hidden;
}
.c360-icip-bar i {
  display: block; height: 100%; border-radius: 8px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}
/* §A1 — narrativa sob as barras (.icinarr do mock): prosa, pilares a bold. */
.c360-ici-narrative b { color: var(--text); }

/* §A5 — bloco de identidade do cliente no topo do menu lateral (o .cl do
   mock): backlink pequeno, avatar circular com iniciais, nome, subtítulo
   "cliente desde ... · vinculada a si" e o link discreto "Editar dados". */
.c360-client-ident {
  padding: 2px 6px 14px; border-bottom: 1px solid var(--border-soft);
  margin-bottom: 8px;
}
.c360-ident-back { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.c360-ident-back:hover { color: var(--text); }
.c360-ident-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--gold-light));
  color: #fff; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.c360-ident-name { font-weight: 700; font-size: 14.5px; color: var(--text); }
.c360-ident-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.c360-ident-edit {
  margin-top: 8px; padding: 0; border: none; background: none; cursor: pointer;
  font-size: 12px; color: var(--primary); text-decoration: underline;
}
.c360-ident-edit:hover { color: var(--primary-dark); }

@media (max-width: 900px) {
  /* no colapso do menu em pílulas, a identidade vira uma faixa horizontal
     compacta antes das pílulas (sem quebrar o scroll lateral). */
  .c360-client-ident {
    flex: none; display: grid; grid-template-columns: auto 1fr;
    grid-column-gap: 10px; align-items: center;
    border-bottom: none; border-right: 1px solid var(--border-soft);
    padding: 0 12px 0 4px; margin: 0 6px 0 0;
  }
  .c360-ident-back { grid-column: 1 / -1; margin-bottom: 4px; white-space: nowrap; }
  .c360-ident-avatar { width: 30px; height: 30px; font-size: 12px; margin-bottom: 0; grid-row: 2 / span 2; }
  .c360-ident-name, .c360-ident-sub { white-space: nowrap; }
  .c360-ident-edit { grid-column: 2; margin-top: 2px; text-align: left; }
}

/* ==========================================================================
   Release 22 — PERGUNTA RECORRENTE na ficha do cliente (Camada 2 do Resumo
   360). PRINCIPIO_DA_PERGUNTA_VIVA_MIC360.md.

   O único sítio do produto onde a recorrência da Pergunta Viva aparece —
   do lado do paciente ela não existe. Visualmente parente do fio condutor
   (é o mesmo sinal, lido de outro ângulo), mas em lavanda em vez de dourado
   para se distinguir dele na leitura rápida da ficha.
   ========================================================================== */
.c360-recorrente {
  background: linear-gradient(135deg, rgba(132, 116, 173, .10), rgba(217, 171, 82, .08));
  border: 1px solid var(--primary-light);
}
.c360-recorrente-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.c360-recorrente-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--primary-dark);
}
.c360-recorrente-count {
  font-size: 11px; font-weight: 700; white-space: nowrap;
  color: var(--primary-dark); background: var(--surface);
  border: 1px solid var(--primary-light);
  border-radius: 999px; padding: 3px 10px;
}
.c360-recorrente-theme { font-size: 15px; margin: 0 0 4px; }
.c360-recorrente-when {
  font-size: 12.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 10px;
}

/* ==========================================================================
   Release 22.3 — Mapa de acessos (#/admin/mapa) e separador do menu do
   utilizador. Ver o comentário no topo de js/views/accessMap.js para o
   porquê da página.
   ========================================================================== */
.header-user-menu-sep {
  height: 1px; margin: 6px 10px;
  background: var(--border);
}

.access-section-title {
  font-size: 15px; font-weight: 600; color: var(--text);
  margin: 26px 0 4px;
}
.access-section-sub {
  font-size: 13px; color: var(--text-muted); line-height: 1.55;
  margin: 0 0 14px; max-width: 68ch;
}
.access-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  margin-top: 12px;
}
.access-card { display: flex; flex-direction: column; gap: 10px; }
.access-card-head { display: flex; align-items: flex-start; gap: 11px; }
.access-card-ic {
  display: flex; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 9px;
  align-items: center; justify-content: center;
  background: var(--gradient-brand-soft); color: var(--primary);
}
.access-card-title {
  font-size: 14.5px; font-weight: 600; color: var(--text);
  margin: 0; line-height: 1.25;
}
.access-card-who {
  font-size: 11.5px; color: var(--text-muted); margin-top: 2px;
}
.access-card-what {
  font-size: 13px; color: var(--text-muted); line-height: 1.55; margin: 0;
}
/* A nota é o sítio onde a página admite uma ressalva (ex.: "a sua conta não
   tem vínculo de parceiro"). Fundo distinto para não se ler como descrição. */
.access-card-note {
  font-size: 12.5px; color: var(--text); line-height: 1.5; margin: 0;
  background: var(--bg-alt); border-left: 3px solid var(--warning, #d9ab52);
  border-radius: 0 7px 7px 0; padding: 8px 10px;
}
.access-card-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 4px;
}
.access-card-hash {
  font-size: 11.5px; color: var(--text-muted);
  background: var(--bg-alt); border: 1px solid var(--border-soft);
  border-radius: 6px; padding: 3px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.access-resolve-slot { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ==========================================================================
   Release 22.4 — três acrescentos às telas de entrada.
   ========================================================================== */

/* ---- 1. Olhinho de mostrar/ocultar palavra-passe (public/js/passwordField.js).
   O botão vive DENTRO da caixa do campo: o `padding-right` do input abre-lhe
   o lugar, para o texto da palavra-passe nunca passar por baixo do ícone.
   `--pw-gutter` está num sítio só porque as duas regras têm de andar juntas. ---- */
.pw-wrap { position: relative; display: block; --pw-gutter: 42px; }
.pw-wrap > input { padding-right: var(--pw-gutter); }
.pw-toggle {
  position: absolute; top: 0; right: 0; height: 100%; width: var(--pw-gutter);
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--text-soft); border-radius: 0 9px 9px 0;
  transition: color .15s ease, background-color .15s ease;
}
.pw-toggle:hover { color: var(--primary); }
.pw-toggle:active { background: var(--bg-alt); }
/* Ativo = palavra-passe à vista. O olho fica em cor plena para o estado ser
   legível sem depender de comparar dois desenhos parecidos. */
.pw-toggle[aria-pressed="true"] { color: var(--primary); }
.pw-toggle:focus-visible {
  outline: 2px solid var(--primary); outline-offset: -2px; color: var(--primary);
}

/* ---- 2. "Este e-mail já tem conta": a caixa de erro do cadastro deixa de ser
   um beco e passa a levar a algum lado (entrar / recuperar palavra-passe). ---- */
.auth-taken { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.auth-taken-head { display: flex; align-items: flex-start; gap: 8px; }
.auth-taken-head .mic-icon { flex: 0 0 auto; margin-top: 1px; }
.auth-taken-text { line-height: 1.5; }
.auth-taken-email {
  font-weight: 600; word-break: break-all;
}
.auth-taken-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-taken-btn {
  flex: 1 1 auto; min-width: 140px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px; border-radius: 9px; font-size: 13px; font-weight: 600;
  border: 1px solid currentColor; background: var(--surface); color: var(--danger);
  cursor: pointer; font-family: inherit;
}
.auth-taken-btn:hover { background: var(--danger-light); }

/* ---- 3. Localização deduzida do fuso horário (public/js/geo.js). A linha
   diz de onde veio o palpite — um campo que se preenche sozinho sem explicar
   porquê parece que alguém andou a espreitar. ---- */
.geo-detected {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12px; color: var(--text-soft); line-height: 1.45; margin-top: 4px;
}
.geo-detected .mic-icon { flex: 0 0 auto; margin-top: 1px; }
.geo-detected b { color: var(--text); font-weight: 600; }

/* ==========================================================================
   Release 22.5 — a trava de consentimento à frente do botão da Google.
   ========================================================================== */

/* O botão da Google é um iframe deles: não se estiliza, não se desativa e
   não se lhe intercepta o clique. A guarda é um botão transparente por cima,
   que apanha o clique primeiro. Fica com o cursor de "não" para o estado ser
   percebido antes do clique, e não só depois. */
.google-btn-wrap { position: relative; }
.google-guard {
  position: absolute; inset: 0; z-index: 2;
  background: transparent; border: 0; padding: 0; margin: 0;
  cursor: pointer; border-radius: 999px;
}
.google-guard:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* O portão: a explicação e o SEGUNDO botão da Google, juntos, imediatamente
   abaixo das caixas de aceite. Existe para que ninguém tenha de rolar até às
   caixas e depois voltar a subir ao botão. */
.google-gate {
  display: flex; flex-direction: column; gap: 12px;
  margin: -6px 0 18px; padding: 14px;
  border-radius: 12px; border: 1px dashed var(--primary);
  background: var(--bg-alt);
}
.google-gate-msg {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; line-height: 1.5; color: var(--danger);
}
.google-gate-msg .mic-icon { flex: 0 0 auto; margin-top: 1px; }
.google-gate-msg.is-ok { color: var(--success); }

/* Chamar a atenção para as caixas que faltam — duas pulsações e para. Uma
   animação infinita num formulário de cadastro cansa e passa a ruído. */
@keyframes consent-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; border-color: var(--border-soft); }
  50% { box-shadow: 0 0 0 4px var(--warning-light, rgba(217,171,82,.28)); border-color: var(--primary); }
}
.consent-flash { animation: consent-flash .9s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) {
  .consent-flash { animation: none; border-color: var(--primary); }
}

/* "Já aceitou no passo anterior" — no ecrã de completar conta, quando as
   caixas não voltam a aparecer. */
.consent-done {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 4px 0 18px; padding: 12px 14px; border-radius: 12px;
  background: var(--success-light); color: var(--success);
  font-size: 13px; line-height: 1.5;
}
.consent-done .mic-icon { flex: 0 0 auto; margin-top: 1px; }


/* ==========================================================================
   Release 23.4.2 — o modo escuro do Samsung Internet

   O `color-scheme: only light` (23.4.1) chega para o Chrome e o Edge, mas o
   navegador da Samsung tem um escurecimento próprio que ignora essa
   declaração e inverte a página à mesma. O que esse algoritmo respeita é
   OUTRO sinal: se a página já traz regras `prefers-color-scheme: dark`, ele
   assume que o site trata do escuro sozinho e não lhe toca.

   É por isso que o bloco abaixo existe e é por isso que os valores são os
   MESMOS do :root. Não é copy-paste esquecido: é a declaração, em CSS, de
   que este produto tem um só esquema. A Constituição obriga a isto — a Cor
   de Território (§3.2) só quer dizer alguma coisa se as cores chegarem à
   pessoa como foram medidas, e os pares de contraste ≥4,5:1 dos 8
   territórios foram todos calculados sobre o creme. Invertidos por um
   algoritmo, nenhum desses números continua a valer.

   Um tema escuro a sério continua possível — mas tem de ser medido e entrar
   por emenda, não por inversão automática. Quando existir, é AQUI que entra.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: only light;
    --bg: #fbf6ec;
    --bg-alt: #f3ecdf;
    --surface: #ffffff;
    --text: #3f3a52;
    --text-muted: #736e87;  /* 23.9.0 — igual ao :root */
    --text-soft: #a29dbb;
  }
  html, body { background: var(--bg); color: var(--text); }
}

/* ==========================================================================
   NOTA 23.10.2 — CSS que NÃO morreu, e porquê

   A Home do Profissional deixou de ter indicadores agregados e barras de
   distribuição de frequências. A tentação era apagar `.metric-card` e
   `.bar-row` do app.css — mas uma verificação antes de o fazer mostrou
   que são partilhados:

     .metric-*  → indique · vendas · partner/dashboard · clients ·
                  admin · client360
     .bar-*     → patient/archetypes · patient/evolution · patient/desafios ·
                  prontuario · admin · evolution · client360 ·
                  pro/negocio · pro/ajuda

   Ficam. O que morreu foi o USO deles na Home, não as regras. A única
   que era mesmo exclusiva do dashboard antigo era `#freq-dist`, e essa
   nem tinha regra própria — era só um id no HTML.
   ========================================================================== */

/* ==========================================================================
   Home do Profissional — "Meu dia" (#/dashboard)

   ACRESCENTAR AO FIM DE public/css/app.css. É um fragmento de propósito: não
   se reescreve um ficheiro de 2700 linhas para acrescentar 60.

   REGRA DESTE BLOCO: a Home VESTE o Design System — não traz um consigo.
   Levantamento feito antes de escrever (v23.9.1, app.css):

     · a escala tipográfica JÁ ESTÁ em `:root` — `--tf-micro` … `--tf-titulo`,
       em rem sobre 16px. **Nenhum tamanho é escrito à mão aqui.**
     · `--text-muted` já leva o ajuste de contraste (#736e87, 4,52:1).
     · raios, sombras, bordas, creme e dourado: todos tokens existentes.
     · `.card`, `.btn`, `.btn-sm`, `.btn-outline`, `.btn-ghost`, `.empty-state`
       já existem e são reutilizados — **zero variantes de botão novas**.
     · breakpoint de conteúdo do app.css: 700px. É o que se usa.

   O QUE NÃO ESTÁ AQUI, e é intencional:
     · nenhum hexadecimal. Se aparecer um, é porque faltou um token.
     · nenhuma cor de território (`--t-*`): a Home é creme neutro (CONTRATO §4).
     · nenhum vermelho, nenhuma animação, nenhum halo (P9).
     · nenhum estilo de indicador agregado — não existem na Home, e não se
       deixa CSS pronto para uma coisa que o contrato proíbe.

   ⚠ NÃO APAGAR `.metric-card` NEM `.bar-row`. LEIA ISTO ANTES DE TENTAR.

   Uma versão anterior deste comentário mandava removê-los "depois de a Home
   entrar". **Estava errado e foi corrigido a 13/08.** A Home já entrou, e
   apagá-los partiria dez vistas vivas:
     admin · client360 · clients · evolution · indique · partner/dashboard ·
     prontuario · vendas · patient/archetypes · patient/evolution

   O que morreu foi o **uso** destas classes na Home, não as classes. A
   `.metric-value` (30px em lavanda) era a fila de indicadores que o contrato
   eliminou — mas só na `#/dashboard`. O resto do produto continua a usá-la
   legitimamente.

   Se algum dia forem mesmo removidas, a condição é: **zero ocorrências em
   `public/js/`**, medido, não suposto.
   ========================================================================== */

/* ---- ritmo vertical ------------------------------------------------------ */
.home-blk { margin-bottom: 30px; }
.home-blk:last-child { margin-bottom: 0; }

/* sobrancelha de bloco — o único uso de --tf-micro, e é maiúsculas curtas */
.home-blk-h {
  font-size: var(--tf-micro); font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 11px;
}

/* ---- ① o dia ------------------------------------------------------------- */
.home-dia {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.home-appt {
  display: flex; align-items: center; gap: 15px;
  padding: 14px 17px; border-bottom: 1px solid var(--border-soft);
}
.home-appt:last-child { border-bottom: 0; }
.home-appt-t {
  width: 52px; flex: none; font-size: var(--tf-acao); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.home-appt-m { flex: 1; min-width: 0; }
.home-appt-n { font-size: var(--tf-corpo); font-weight: 600; line-height: 1.35; }
.home-appt-s { font-size: var(--tf-legenda); color: var(--text-muted); }

/* "por confirmar" — etiqueta, não alerta. Sem cor semântica: o facto é
   neutro e a ação está ao lado (P9: nada de vermelho em contexto de cuidado). */
.home-chip {
  display: inline-block; font-size: var(--tf-micro); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 7px; margin-left: 7px; vertical-align: 1px;
}

/* ---- ② os sinais, como continuidade -------------------------------------- */
/* Linhas, não cartões: é isto que os mantém fora do orçamento de convites
   do Ritmo da Página (CONTRATO §4 / MEC §7.1(4)). Sem cor de território,
   sem arte, sem sombra. */
.home-sinais { border-top: 1px solid var(--border-soft); }
.home-sinal {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 2px; border-bottom: 1px solid var(--border-soft);
}
.home-sinal-m { flex: 1; min-width: 0; }
.home-sinal-t { font-size: var(--tf-corpo-2); line-height: 1.4; }
.home-sinal-s { font-size: var(--tf-legenda); color: var(--text-muted); }
/* "Ver" é um link, e no DS lavanda é cor de link — não de botão. Reutiliza
   .btn-ghost e só troca a tinta, para não nascer uma variante nova. */
.home-sinal .btn-ghost { color: var(--primary); padding-left: 10px; padding-right: 10px; }
.home-sinal .btn-ghost:hover:not(:disabled) { background: var(--lavanda-mist); color: var(--primary-dark); }

/* ---- estados quietos ----------------------------------------------------- */
/* Ausência mostra-se como ausência (CONTRATO §8.2): sem ícone triste, sem
   caixa, sem cinzento de "desativado". É uma frase, e é verdade. */
.home-quiet { font-size: var(--tf-corpo); color: var(--text-muted); margin: 0; }
.home-quiet-forte { color: var(--text); margin-bottom: 3px; }

/* ---- o único convite, e só no dia 1 -------------------------------------- */
.home-convite {
  background: var(--bg-alt); border: 1px solid var(--gold-light);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm);
}
.home-convite-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold-mist); color: var(--gold-deep); margin-bottom: 14px;
}
.home-convite-t { font-size: var(--tf-secao); font-weight: 600; margin: 0 0 6px; }
.home-convite-p {
  font-size: var(--tf-corpo-2); color: var(--text-muted);
  margin: 0 0 18px; max-width: 44ch;
}

/* ---- largura de leitura --------------------------------------------------- */
/* `main#view` é 1280px ENCOSTADO À ESQUERDA (`margin:0`), por causa dos
   hotfixes v21.3.1 e v21.3.3 — centrar abria um vão que a titular mandou
   corrigir duas vezes. Aqui limita-se a linha SEM centrar. Nunca `auto`. */
#home-root { max-width: 720px; margin: 0; }

/* ---- telemóvel ------------------------------------------------------------ */
/* Mesma Home, mesma hierarquia. Só a ação da consulta desce para debaixo do
   nome, porque a 360px não cabe ao lado sem encolher o nome da pessoa — e o
   nome é o que importa na linha. */
@media (max-width: 700px) {
  .home-appt { flex-wrap: wrap; padding: 13px 14px; gap: 10px 12px; }
  .home-appt-t { width: 46px; }
  .home-appt .btn { margin-left: 58px; }
  .home-sinal { gap: 10px; }
  .home-convite { padding: 22px 20px; }
}