/* =====================================================================
   TEMPLATE.CSS
   Estilos compartilhados entre todas as páginas (Dashboard, Pacientes,
   Configurações): variáveis, reset, layout base, sidebar, topbar e
   estrutura básica de modal. Cada página carrega este arquivo antes do
   seu CSS específico.
   ===================================================================== */

:root{
  --navy-950:#131E36;
  --navy-900:#16233F;
  --navy-800:#1E3155;
  --navy-700:#2A4370;

  /* Degraus mais claros da mesma rampa navy, usados como cor de "destaque"
     (2026-08, pedido da Miriam: o dourado ficou "chamativo demais" pra um
     sistema profissional — trocando por azul-marinho, a mesma cor sóbria já
     usada no sidebar do tenant. --navy-950/900/800/700 acima são escuros
     demais pra texto/borda sobre fundo branco; estes graus abaixo completam
     a rampa no mesmo espírito de --sage-* e --gold-*). Ver bloco
     ".app:has(.sidebar--admin)" mais abaixo. */
  --navy-600:#3A5A8C;
  --navy-600-rgb:58,90,140;
  --navy-400:#6E89B8;
  --navy-300:#A0B3D6;
  --navy-100:#E4E9F5;
  --navy-050:#F1F4FA;

  --sidebar-text:#AEBBD6;
  --sidebar-text-dim:#7C8AAD;
  --sidebar-text-bright:#F2F4F8;

  /* Cor de destaque (accent) do app inteiro — era um verde-sálvia próprio,
     sem relação com a logo. 2026-08 (pedido da Miriam: "ajuste acesso
     tenant, a cor padrão dele deve ser essa cor nova compatível com o
     logo") — trocado pro mesmo teal (mistura das 3 cores da logo, ver nota
     de --teal-* abaixo) que já era usado só no painel admin; agora é a cor
     padrão do sistema inteiro (tenant E admin), então .app:has(.sidebar--
     admin) mais abaixo não precisa mais redefinir --sage-* (removido —
     seria redundante, os valores já são os mesmos). Nome da variável
     (--sage-*) ficou por compatibilidade — dezenas de arquivos CSS usam
     var(--sage-600) etc., trocar o nome também exigiria editar todos eles
     sem ganho nenhum. */
  --sage-700:#155069;
  --sage-600:#175F77;
  --sage-600-rgb:23,95,119;
  --sage-400:#74A1AC;
  --sage-300:#AEC7CF;
  --sage-100:#E1EEF0;
  --sage-050:#F0F6F7;

  /* Rampa completa de dourado (2026-08, pedido da Miriam: "padronizar a
     cor do sistema" no painel admin — antes só existiam --gold-500/--100,
     o suficiente pro selo do menu lateral, mas não pra virar a cor de
     destaque de TODO o admin — botões, badges, toggles etc. precisam de
     mais degraus, no mesmo espírito da rampa --sage-*). Ver bloco
     ".app:has(.sidebar--admin)" mais abaixo, que reaproveita esses tons no
     lugar de --sage-* só dentro do painel master. */
  --gold-700:#82641D;
  --gold-500:#B98F2A;
  --gold-500-rgb:185,143,42;
  --gold-400:#D2B571;
  --gold-300:#E1CD9E;
  --gold-100:#F7EFDC;
  --gold-050:#FCF8EE;

  /* Rampa teal (2026-08, pedido da Miriam: "não mais esse azul, uma cor
     que vai combinar com o logo ali no menu e resto do site acesso adm")
     — troca o "acento" do painel admin, que era azul-marinho (--navy-*),
     pelo mesmo teal do símbolo Ψ da logo nova (ver public/img/logo.png e
     Views/login.php, que já usa esse tom). --teal-950/900 são os degraus
     escuros usados no fundo do sidebar; os demais seguem o mesmo espírito
     de --sage-*, --navy-* e --gold-* acima.

     2ª rodada (2026-08, pedido da Miriam: "a ideia é boa mas ficou muito
     claro, vamos pensar numa cor não clara com base nos temas do logo") —
     o --teal-600 original (#1B9E94) era um turquesa vibrante demais pra
     "acento sóbrio" de painel admin; toda a rampa desceu pra um teal mais
     profundo/escuro.

     3ª rodada (2026-08, pedido da Miriam: "gostei da cor mas veja se fica
     melhor uma mistura dessas 3 cores que estão presentes no logo, que não
     é só turquesa, é uma espécie de azul" — passou 3 RGBs tirados direto da
     logo: rgb(13,42,72) o azul-marinho escuro do Ψ, rgb(55,171,186) o
     turquesa claro das "folhas", rgb(1,72,99) o azul-petróleo do perfil).
     --teal-600 agora É a média dessas 3 (rgb(23,95,119) = #175F77) — puxa
     mais pro azul do que o turquesa puro de antes, exatamente o pedido.
     --teal-900 é a 1ª cor (o azul-marinho) direto, sem mistura, usada como
     topo do degradê do sidebar; --teal-700 fica entre as duas. Ver bloco
     ".app:has(.sidebar--admin)" mais abaixo. */
  --teal-950:#08192B;
  --teal-900:#0D2A48;
  --teal-700:#155069;
  --teal-600:#175F77;
  --teal-600-rgb:23,95,119;
  --teal-400:#74A1AC;
  --teal-300:#AEC7CF;
  --teal-100:#E1EEF0;
  --teal-050:#F0F6F7;

  --alert-600:#B15C4F;
  --alert-200:#EAD4CF;
  --alert-100:#F5E7E4;

  --info-600:#3C79A8;
  --info-100:#DDEAF7;

  --bg:#F4F5F7;
  --card:#FFFFFF;
  --border:#E7E9EE;
  --border-strong:#DBDEE6;

  --ink-900:#182233;
  --ink-800:#25314A;
  --ink-700:#3D4759;
  --ink-500:#6B7385;
  --ink-400:#9398A8;

  /* cor de texto sobre fundos de destaque (botões, avatares, badges ativos) */
  --text-on-accent:#FFFFFF;

  /* tom neutro "desligado" de controles (ex.: trilho do switch) */
  --track-off:#CBD2DE;

  /* canais RGB usados em sombras/overlays com transparência */
  --shadow-rgb:15,22,40;
  --shadow-rgb-soft:20,28,46;
  --overlay-rgb:22,32,54;

  /* variações de branco translúcido usadas sobre o fundo escuro do sidebar */
  --sidebar-divider:rgba(255,255,255,.07);
  --sidebar-border-soft:rgba(255,255,255,.08);
  --sidebar-hover-bg:rgba(255,255,255,.06);
  --sidebar-hover-bg-strong:rgba(255,255,255,.14);

  --radius-lg:12px;
  --radius-md:9px;
  --radius-sm:7px;

  --shadow-card:0 1px 2px rgba(20,28,46,.05), 0 8px 16px -10px rgba(20,28,46,.14);
  --sidebar-w:264px;
  --sidebar-w-collapsed:80px;
}

/* ---------------- RESET ---------------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* scrollbar-gutter:stable (2026-08, pedido da Miriam) — sem isso, trocar
   pra uma aba mais curta (ex.: Configurações > Conta > "Preferências", bem
   menor que "Conta"/"Identidade Visual") tirava a necessidade de barra de
   rolagem vertical, e o navegador recuperava aquele espaço — deslocando a
   largura de toda a página (sidebar+conteúdo) alguns pixels a cada troca de
   aba. Reservando o espaço sempre, a rolagem aparecer/sumir não move mais
   nada. */
html{scrollbar-gutter:stable;}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.serif{font-family:'Fraunces',serif;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;}

/* ---------------- LAYOUT ---------------- */
.app{
  display:flex;
  min-height:100vh;
}

/* ---------------- SIDEBAR ---------------- */
.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:linear-gradient(180deg,var(--navy-900) 0%, var(--navy-950) 100%);
  color:var(--sidebar-text);
  display:flex;
  flex-direction:column;
  padding:0 14px 20px 14px;
  position:sticky;
  top:0;
  height:100vh;
  transition:width .28s cubic-bezier(.4,0,.2,1);
  z-index:20;
}
.sidebar.collapsed{width:var(--sidebar-w-collapsed);}

.sidebar-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 8px;
  border-bottom:1px solid var(--sidebar-divider);
  margin-bottom:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.brand-mark{
  width:34px;height:34px;flex-shrink:0;
  border-radius:9px;
  object-fit:cover;
  object-position:center top;
  display:block;
}

/* ---------------- ÍCONE DE AJUDA (?) COM TOOLTIP ----------------
   Substitui os parágrafos de ajuda fixos ao lado de campos de formulário
   (ex.: "Usado em contratos, recibos e notas fiscais.") por um ícone "?"
   compacto — o texto só aparece ao passar o mouse/focar, deixando a tela
   mais limpa sem perder a explicação. Uso: <button type="button"
   class="campo-ajuda" data-ajuda="Texto explicativo aqui.">?</button>
   logo depois do <label> do campo. Compartilhado globalmente (template.css)
   porque vale para qualquer tela do sistema, não só Configurações. */
.campo-ajuda{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex-shrink:0;border-radius:50%;
  border:1.4px solid var(--ink-400);
  background:transparent;
  color:var(--ink-400);
  font-size:10.5px;font-weight:700;line-height:1;font-family:inherit;
  cursor:help;
  margin-left:5px;
  position:relative;
  vertical-align:middle;
  padding:0;
  transition:border-color .15s,color .15s;
}
.campo-ajuda:hover,.campo-ajuda:focus-visible{border-color:var(--sage-600);color:var(--sage-700);outline:none;}
.campo-ajuda::after{
  content:attr(data-ajuda);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  background:var(--ink-900);
  color:#fff;
  font-size:12px;
  font-weight:500;
  line-height:1.4;
  padding:8px 11px;
  border-radius:8px;
  width:max-content;
  max-width:230px;
  white-space:normal;
  text-align:left;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s;
  z-index:30;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.campo-ajuda::before{
  content:'';
  position:absolute;
  bottom:calc(100% + 3px);
  left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:var(--ink-900);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s;
  z-index:30;
}
.campo-ajuda:hover::after,.campo-ajuda:hover::before,
.campo-ajuda:focus-visible::after,.campo-ajuda:focus-visible::before{
  opacity:1;visibility:visible;
}
/* Pedido da Miriam, 2026-08: "deixe somente a palavra sinerpsi tudo
   maiúsculo branco e fonte Montserrat Light" — trocou o serifado Fraunces
   por Montserrat 300 (Light), maiúsculo via text-transform (o texto no PHP
   continua "SinerPsi", ver sinerpsi_sidebar()/sinerpsi_admin_sidebar()) e
   branco puro (--sidebar-text-bright não é 100% branco, ver :root). */
.brand-name{
  font-family:'Montserrat',sans-serif;
  font-size:16px;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Logo do menu principal (pedido da Miriam, 2026-08 — ver sinerpsi_sidebar()
   em Views/template.php): a mesma classe .brand-name virou um <img>, então
   as regras de texto acima ficam sem efeito nele; aqui só tamanho/posição.
   .brand ganha flex:1 + justify-content:center pra centralizar a logo no
   espaço disponível do .sidebar-top (o resto é o collapse-btn). */
.brand{flex:1;justify-content:center;}
img.brand-name{
  height:68px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  display:block;
}
.sidebar.collapsed .brand-name{display:none;}

.collapse-btn{
  background:var(--sidebar-hover-bg);
  border:1px solid var(--sidebar-border-soft);
  color:var(--sidebar-text);
  width:28px;height:28px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .15s, transform .28s;
}
.collapse-btn:hover{background:var(--sidebar-hover-bg-strong);color:var(--text-on-accent);}
.sidebar.collapsed .collapse-btn svg{transform:rotate(180deg);}

.nav-section-label{
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--sidebar-text-dim);
  padding:14px 12px 8px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
}
.sidebar.collapsed .nav-section-label{opacity:0;height:0;padding:6px 0 0;}

.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}

.nav-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:10px;
  color:var(--sidebar-text);
  font-size:14.5px;
  font-weight:500;
  white-space:nowrap;
  transition:background .15s, color .15s;
}
.nav-item svg{flex-shrink:0;}
.nav-item:hover{background:var(--sidebar-hover-bg);color:var(--sidebar-text-bright);}
.nav-item.active{
  background:var(--sage-600);
  color:var(--text-on-accent);
  box-shadow:0 4px 14px -4px rgba(var(--sage-600-rgb),.55);
}
.nav-item .label{
  overflow:hidden;
  text-overflow:ellipsis;
  transition:opacity .15s;
}
.sidebar.collapsed .nav-item{justify-content:center;padding:11px;}
.sidebar.collapsed .nav-item .label{display:none;}
.nav-item .badge{
  margin-left:auto;
  background:var(--alert-600);
  color:var(--text-on-accent);
  font-size:11px;
  font-weight:700;
  line-height:1;
  padding:3px 6px;
  border-radius:20px;
}
.sidebar.collapsed .nav-item .badge{
  position:absolute;top:4px;right:4px;
  padding:0;width:8px;height:8px;font-size:0;
}

.tooltip{
  position:absolute;
  left:calc(100% + 14px);
  top:50%;
  transform:translateY(-50%);
  background:var(--ink-900);
  color:var(--text-on-accent);
  font-size:12.5px;
  font-weight:500;
  padding:6px 10px;
  border-radius:7px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  z-index:40;
}
.sidebar.collapsed .nav-item:hover .tooltip{opacity:1;}

.sidebar-footer{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--sidebar-divider);
  display:flex;
  flex-direction:column;
  gap:2px;
}

/* "Ajuda" no rodapé da sidebar (2026-08, pedido da Miriam — unifica Manual
   + Suporte num item só, ver sinerpsi_sidebar() em Views/template.php). É um
   <a> comum igual aos outros itens de .sidebar-footer, leva pra página-hub
   /ajuda (ver CSS/ajuda.css) — não precisa de CSS próprio aqui. */

/* ---------------- SIDEBAR/TOPBAR DO PAINEL ADMIN (paleta própria) ----------------
   Pedido da Miriam (2026-07): nos testes ela confundia se estava no painel
   master ou dentro do painel de uma clínica, porque sinerpsi_admin_sidebar()/
   sinerpsi_admin_topbar() (Views/template.php) reaproveitam exatamente as
   mesmas classes .sidebar/.topbar/.nav-item do tenant. As regras abaixo só
   valem quando a classe extra '.sidebar--admin'/'.topbar--admin' está
   presente (só no painel master); o tenant continua 100% intocado.

   2026-08 (2ª rodada): a 1ª versão usava sidebar marrom+dourado como
   "acento" do admin — a Miriam achou o dourado chamativo demais pra um
   sistema profissional. Trocado por azul-marinho (--navy-*).

   2026-08 (3ª rodada, pedido da Miriam: "não mais esse azul, uma cor que
   vai combinar com o logo ali no menu e resto do site acesso adm") — o
   azul-marinho saiu; agora usa a rampa --teal-* (mesmo teal do símbolo Ψ da
   logo nova, já usado em Views/login.php), mantendo a mesma estrutura de
   antes: fundo do sidebar em gradiente escuro (--teal-950/900) e item ativo
   num tom mais claro (--teal-600) pra dar contraste sem apelar pra uma cor
   chamativa — continua reconhecível como admin, só que combinando com a
   identidade visual da marca em vez de destoar dela. */
.sidebar--admin{
  background:linear-gradient(180deg,var(--teal-900) 0%, var(--teal-950) 100%);
}
.sidebar--admin .nav-item.active{
  background:var(--teal-600);
  box-shadow:0 4px 14px -4px rgba(var(--teal-600-rgb),.6);
}
.sidebar--admin .collapse-btn:hover{color:var(--sidebar-text-bright);}

/* ---------------- PADRONIZAÇÃO DA COR DE DESTAQUE (histórico) ----------------
   Isto aqui redefinia --sage-* (a cor de "destaque" usada por praticamente
   todo componente do sistema — .btn-primary, .badge-*, .toggle-switch etc.,
   espalhados por dezenas de arquivos CSS) só dentro do painel admin
   (.app:has(.sidebar--admin)), pra não mexer no verde-sálvia do tenant.
   Passou por dourado, depois azul-marinho, depois teal — sempre só no
   admin.

   2026-08 (pedido da Miriam: "ajuste acesso tenant, a cor padrão dele deve
   ser essa cor nova compatível com o logo") — o próprio --sage-* base (ver
   :root no topo do arquivo) virou esse teal agora, pro sistema INTEIRO
   (tenant e admin usam a mesma cor de destaque); este bloco de redefinição
   ficou redundante (os valores já seriam idênticos) e foi removido. O navy
   "vazando" nos ícones do dashboard admin (.stat-icon.navy) e o avatar de
   clínica (.clinic-avatar, CSS/administrativo.css) continuam com a cor teal
   fixa que já tinham, sem depender deste bloco. */

/* Título do topo do admin, só o TAMANHO reduzido (pedido da Miriam,
   2026-08) — .page-title/.topbar-title (Fraunces itálico, ver definições
   mais abaixo, onde o tamanho 19px de verdade mora agora) chegou a ficar
   menor só no admin; a Miriam pediu (2026-08, seguinte) pra aplicar o
   mesmo tamanho no tenant também ("ajuste título e largura de topo... tudo
   que fizemos no acesso adm"), então virou a regra base, sem escopo — ver
   .topbar-title/.page-title mais abaixo. .topbar--com-titulo (mais abaixo)
   encolheu de 88px pra 72px pelo mesmo motivo, também sem escopo agora. */

/* ---------------- MAIN ---------------- */
.main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* ---------------- BANNER "MODO VISUALIZAÇÃO" (admin vendo o painel de um psicólogo) ---------------- */
.admin-visualizando-banner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 28px;
  background:#3b2f0b;
  color:#ffd875;
  font-size:13px;
  line-height:1.4;
  position:sticky;
  top:0;
  z-index:11;
}
.admin-visualizando-banner svg{ flex-shrink:0; }
.admin-visualizando-banner strong{ color:#fff; }
.admin-visualizando-banner a{
  margin-left:auto;
  flex-shrink:0;
  color:#fff;
  background:rgba(255,255,255,0.15);
  padding:5px 12px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
}
.admin-visualizando-banner a:hover{ background:rgba(255,255,255,0.28); }

/* ---------------- FAIXA DE AVISO DE VENCIMENTO (assinatura) ---------------- */
.assinatura-aviso-banner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 28px;
  background:#4a3510;
  color:#ffcf7a;
  font-size:13px;
  line-height:1.4;
  position:sticky;
  top:0;
  z-index:11;
}
.assinatura-aviso-banner svg{ flex-shrink:0; }
.assinatura-aviso-banner.urgente{
  background:#4a1414;
  color:#ffb3b3;
}
/* Link opcional dentro da faixa (ex.: "Completar cadastro", aviso de perfil
   incompleto — Usuario::precisaCompletarCpf()) — mesmo tratamento do link
   de .admin-visualizando-banner acima, cor herdada do texto do aviso. */
.assinatura-aviso-banner a{
  margin-left:auto;
  flex-shrink:0;
  color:inherit;
  background:rgba(255,255,255,0.15);
  padding:5px 12px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
}
.assinatura-aviso-banner a:hover{ background:rgba(255,255,255,0.28); }

/* ---------------- TOPBAR ---------------- */
.topbar{
  height:72px;
  flex-shrink:0;
  background:var(--card);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:20px;
  padding:0 28px;
  position:sticky;
  top:0;
  z-index:10;
}
/* Topbar mais alta quando tem título (2026-08, pedido da Miriam: "deve ter
   a mesma formatacao de titulo dashboard na pagina dashboard se precisar
   aumenta a altura da regiao topo para caber") — o título usa a mesma
   tipografia grande de .page-title (ícone 38px + Fraunces itálico 26px),
   maior que o conteúdo padrão da topbar, então a barra cresce um pouco pra
   não ficar apertada. Classe (em vez de :has(), por compatibilidade de
   navegador) aplicada condicionalmente em sinerpsi_admin_topbar() —
   Views/template.php — só quando $titulo é passado. */
/* 72px (não mais 88px) — calibrado pro título de 19px (ver .topbar-title/
   .page-title mais abaixo). Chegou a ser só pro admin, agora vale pro
   tenant também (2026-08, pedido da Miriam — mesmo motivo do tamanho de
   fonte, ver nota acima). */
.topbar--com-titulo{height:72px;}
.topbar-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:18px;
}

/* Título fixo na topbar (2026-08, pedido da Miriam — ver sinerpsi_admin_topbar()
   em Views/template.php): fica no espaço livre à esquerda, entre o botão de
   menu mobile e os ícones da direita. Mesma tipografia de .page-title/
   .page-icon (o título que já existia na página Dashboard, pedido da
   Miriam: "deve ter a mesma formatacao de titulo dashboard") — reaproveita
   os valores exatos em vez de herdar as classes originais porque aqui é
   dentro da <header>, fora do <main> onde .page-title normalmente vive. */
.topbar-title{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:500;
  font-size:19px;
  color:var(--ink-900);
}
.topbar-title-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:11px;
  background:var(--sage-100);
  color:var(--sage-700);
  flex-shrink:0;
}

.icon-btn{
  position:relative;
  width:38px;height:38px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-600);
  transition:border-color .15s, background .15s;
}
.icon-btn:hover{background:var(--bg);}
.icon-btn .dot{
  position:absolute;top:8px;right:8px;
  width:7px;height:7px;border-radius:50%;
  background:var(--alert-600);
  border:1.5px solid var(--card);
}

.divider-v{width:1px;height:32px;background:var(--border);}

/* Logo no topbar do tenant (2026-08, teste pedido da Miriam) — reaproveita
   .icon-btn (mesmo tamanho dos outros ícones do topbar), mas sem contorno
   nem fundo (pedido seguinte: "tire o contorno dele e deixa um pouco
   maior") — só a imagem, sem caixa ao redor. */
.topbar-logo{border:none;background:transparent;}
.topbar-logo:hover{background:transparent;}
.topbar-logo img{width:28px;height:28px;object-fit:contain;display:block;}

.mobile-menu-btn{display:none;}

.sidebar-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(var(--overlay-rgb),.45);
  z-index:19;
}
.sidebar-backdrop.active{display:block;}

.user-block{
  display:flex;align-items:center;gap:11px;
  cursor:pointer;
}
.user-avatar{
  width:40px;height:40px;border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--sage-600),var(--sage-300));
  color:var(--text-on-accent);
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:14px;
  font-family:'Fraunces',serif;
  flex-shrink:0;
  overflow:hidden;
}
.user-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.user-info{text-align:right;}
.user-name{font-size:14px;font-weight:600;color:var(--ink-900);line-height:1.3;}
.user-crp{font-size:12.5px;color:var(--ink-500);}

/* Topbar do painel admin — mesmo pedido de .sidebar--admin acima: borda
   inferior colorida (em vez da borda cinza padrão) + avatar/selo também
   coloridos, pra bater com o menu lateral. (Histórico: dourado -> navy ->
   teal, ver nota em .sidebar--admin acima.)

   O avatar agora carrega a logo de verdade (pedido da Miriam, 2026-08:
   "retira o logo do menu principal e coloca ele ali no lado de acesso
   master e troca o icone existente pela logo" — ver sinerpsi_admin_topbar()
   em Views/template.php).

   Fundo branco sem contorno, só a logo (pedido da Miriam, 2026-08) — nada
   de gradiente/borda por trás, a imagem já tem o próprio fundo transparente
   (ver public/img/logo.png). */
.topbar--admin{border-bottom:2px solid var(--teal-600);}
.topbar--admin .user-avatar{
  /* Maior que o avatar padrão de 40px (pedido da Miriam, 2026-08) — só
     aqui no admin, não mexe no avatar de profissional do tenant. */
  width:52px;height:52px;
  background:#fff;
  padding:7px;
}
.topbar--admin .user-avatar img{object-fit:contain;}

/* ---------------- CONTENT WRAPPER ---------------- */
/* max-width:1600px (2026-08, pedido da Miriam: "todas as páginas devem ter
   a mesma largura do menu dashboard") — até aqui só o Dashboard usava
   1600px (override em CSS/index.css); as demais páginas ficavam em 1280px,
   uma régua mais estreita definida pras telas de formulário/tabela. Agora
   todo o sistema usa o mesmo valor do Dashboard, e a régua antiga de
   1280px não existe mais em lugar nenhum. */
.content{
  padding:32px 36px 56px;
  max-width:1600px;
  width:100%;
  margin:0 auto;
}

/* ---------------- BREADCRUMB (compartilhado) ---------------- */
.breadcrumb{
  display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-500);margin-bottom:8px;
}
.breadcrumb a{color:var(--ink-500);font-weight:500;}
.breadcrumb a:hover{color:var(--sage-700);}
.breadcrumb .current{color:var(--ink-900);font-weight:600;}

/* Linha com a seta de "voltar" ao lado do breadcrumb (ver
   Views/paciente_ficha.php) — reaproveitável em qualquer outra tela que
   também precise desse atalho visual. */
.breadcrumb-row{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding-left:4px;}
.breadcrumb-row .breadcrumb{margin-bottom:0;}
.breadcrumb-back{
  width:28px;height:28px;flex-shrink:0;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--ink-500);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s, border-color .15s, color .15s;
}
.breadcrumb-back:hover{background:var(--bg);color:var(--sage-700);border-color:var(--sage-600);}

/* ---------------- RODAPÉ DE FORMULÁRIO (compartilhado) ---------------- */
.form-footer{
  display:flex;align-items:center;justify-content:flex-end;gap:12px;
  margin-top:24px;padding-top:22px;border-top:1px solid var(--border);
}

/* ---------------- SUGESTÃO DE SENHA FORTE + MEDIDOR (compartilhado) ----------------
   Item 24 do backlog de correções (ETAPAS.md Etapa 7) — usado em
   Views/perfil_senha.php (psicólogo) e Views/administrativo_senha.php (admin).
   Ver sinerpsiGerarSenhaForte()/sinerpsiForcaSenha() em public/JS/template.js. */
.senha-input-row{display:flex;gap:8px;align-items:stretch;}
.senha-input-row input{flex:1;min-width:0;}
.btn-sugerir-senha{white-space:nowrap;flex-shrink:0;}

.senha-forca-medidor{display:flex;align-items:center;gap:10px;margin-top:8px;}
.senha-forca-barra{
  flex:1;height:5px;border-radius:99px;
  background:var(--border);overflow:hidden;
}
.senha-forca-barra span{
  display:block;height:100%;width:0;border-radius:99px;
  transition:width .2s ease, background-color .2s ease;
  background:var(--alert-600);
}
.senha-forca-texto{font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--ink-500);}

.senha-forca-medidor.fraca .senha-forca-barra span{background:var(--alert-600);}
.senha-forca-medidor.fraca .senha-forca-texto{color:var(--alert-600);}
.senha-forca-medidor.media .senha-forca-barra span{background:var(--gold-500);}
.senha-forca-medidor.media .senha-forca-texto{color:var(--gold-500);}
.senha-forca-medidor.forte .senha-forca-barra span{background:var(--sage-600);}
.senha-forca-medidor.forte .senha-forca-texto{color:var(--sage-700);}

/* ---------------- CABEÇALHO DE PÁGINA (compartilhado) ---------------- */
.page-head-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.page-title-row{display:flex;align-items:center;gap:12px;}
.page-icon{
  width:38px;height:38px;border-radius:11px;
  background:var(--sage-100);color:var(--sage-700);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.page-title{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:500;
  font-size:19px;
  color:var(--ink-900);
}
/* Botão de voltar no lugar do ícone decorativo do título (2026-08, pedido
   da Miriam: "tirar o ícone do título das páginas que têm botão voltar e
   no lugar colocar um botão voltar que combine com o título" — substitui o
   antigo .breadcrumb-back, que ficava numa linha separada acima do título
   e "não ficou legal"). Mesmo tamanho/posição de .page-icon (herda a
   classe), só troca fundo/cor pro tom neutro de botão (igual
   .breadcrumb-back tinha) e vira clicável, com hover. */
.page-icon-back{
  background:var(--card);
  color:var(--ink-500);
  border:1px solid var(--border);
  transition:background .15s, border-color .15s, color .15s;
}
.page-icon-back:hover{background:var(--bg);color:var(--sage-700);border-color:var(--sage-600);}
/* Título da página, fora da topbar/dentro de .main (2026-08, pedido da
   Miriam — ver sinerpsi_topbar() em Views/template.php): reaproveita
   .page-head-row/.page-title-row/.page-icon/.page-title de cima, só que
   fora do <main class="content"> (que tem seu próprio padding), então
   precisa do próprio alinhamento horizontal/max-width pra ficar alinhado
   com o conteúdo logo abaixo. */
.page-head-row--titulo{
  padding:22px 36px 0;
  max-width:1600px;
  width:100%;
  margin:0 auto;
  /* Zera o margin-bottom:22px herdado de .page-head-row (pedido da Miriam,
     2026-08: "no dashboard o título está com muito espaço embaixo, entre
     ele e a saudação") — esse bloco fica FORA de .content, então o espaço
     até o conteúdo vem só do padding-top de .content logo abaixo. */
  margin-bottom:0;
}
/* Reduz também o padding-top:32px do .content quando ele vem logo depois
   do título "solto" (2026-08, "esta mesma coisa" — só tirar a margem do
   título não bastou, o respiro grande era o próprio padding do .content;
   combinator de irmão direto, os dois são filhos diretos de .main, ver
   sinerpsi_topbar() em Views/template.php). Só afeta quem tem o título
   fora da topbar — as demais páginas mantêm os 32px normais. */
.page-head-row--titulo + .content{padding-top:10px;}
.page-count-badge{
  background:var(--sage-100);
  color:var(--sage-700);
  font-size:12.5px;
  font-weight:700;
  padding:4px 11px;
  border-radius:20px;
  margin-left:2px;
}

/* ---------------- ABAS DE CONTEÚDO (compartilhado) ----------------
   Barra de abas no topo do conteúdo — usada tanto pra navegação real
   entre páginas (Whatsapp: Conexão/Eventos/Enviados, ver
   sinerpsi_whatsapp_tabs() em Views/template.php, cada aba é um link pra
   uma rota própria) quanto pra alternância só-visual dentro de uma MESMA
   página, sem reload (Conta e Privacidade: Alterar senha/Privacidade e
   Dados, 2026-08, pedido da Miriam: "faça o mesmo modelo de abas" —
   [data-aba]/[data-aba-conteudo], mesmo espírito do padrão já usado nas
   abas Cadastro/Contrato de Views/administrativo_nova.php, só que
   horizontal em vez de lateral). */
.page-tabs{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  /* 8px (2026-08, pedido da Miriam: "retire um pouco do espaçado entre a
     aba e a primeira região do submenu" — era 20px, depois 12px, ainda
     "um pouco mais") — regra global, compartilhada por TODAS as telas que
     usam .page-tabs. */
  margin-bottom:8px;
  flex-wrap:wrap;
  /* Sem border-bottom cinza (pedido da Miriam, 2026-08: "acho que ate pode
     remover essa linha cinza da aba ja temos a linha verde que ja marca as
     abas") — a aba ativa já fica marcada pelo border-color verde em
     .page-tab.active, não precisa de mais uma linha cinza por baixo de
     tudo. */
  /* min-height (2026-08, pedido da Miriam: "as abas Temas/Subtemas/
     Conteúdos ficam fixas... porém há um problema na aba Sugestões que se
     mexe ao clicar") — a causa era a altura da LINHA variar: quando a
     página passa um botão "Novo"/"Adicionar" (.btn-primary, ~40px de
     altura), a linha fica mais alta pra caber ele; sem botão (caso de
     Sugestões, que é só leitura), a linha encolhia pra altura só da lista
     de abas (~36px) — e como align-items:center centraliza tudo dentro da
     linha, a borda verde da aba ativa ficava alguns pixels mais alta ou
     mais baixa dependendo da página, dando a impressão de "pulo" ao trocar
     de aba. Fixando a altura mínima na medida do botão, a linha (e a
     posição das abas dentro dela) fica idêntica com ou sem botão. */
  min-height:44px;
}
/* Lista de abas em si (pedido da Miriam, 2026-08: "botao adicionar deixe
   ali alinhado as abas") — .page-tabs virou uma linha flex space-between
   pra caber a lista de abas à esquerda e um botão de ação (ex.: Adicionar)
   à direita, na mesma altura. Quando a página não passa nenhuma ação (ver
   $acaoHtml nos helpers sinerpsi_admin_*_tabs() em Views/template.php), o
   segundo item simplesmente não existe — sem espaço vazio reservado. */
.page-tabs-list{display:flex;gap:4px;}
/* Espaçamento maior só nas abas Especialidades/Abordagens/Atendimento de
   Cadastros > Psicólogo (2026-08, pedido da Miriam, ver comentário em
   sinerpsi_admin_psicologo_tabs() em Views/template.php) — sobrescreve o
   margin-bottom:8px padrão de .page-tabs só quando a classe extra
   .page-tabs-psicologo está presente. */
.page-tabs.page-tabs-psicologo{margin-bottom:24px;}
/* Pedido da Miriam, 2026-08: "so de um espacinho em baixo do botao para nao
   ficar encostado a linha da aba" — margin-bottom (sem margin-top) desloca
   o botão pra cima dentro da linha centralizada (.page-tabs tem
   align-items:center), abrindo um respiro entre ele e o border-bottom das
   abas sem mexer na altura da linha como um todo. */
.page-tabs-actions{margin-bottom:8px;}
.page-tab{
  padding:10px 16px;
  font-size:13.5px;font-weight:600;
  color:var(--ink-500);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .15s, border-color .15s;
  cursor:pointer;
}
.page-tab:hover{color:var(--ink-800);}
.page-tab.active{color:var(--sage-700);border-color:var(--sage-600);}

/* Selo "Padrão do SinerPsi" (2026-08, pedido da Miriam — Configurações >
   Instrumentos no admin): identifica modelos de Anamnese/Escala cadastrados
   pelo admin como padrão pra todos os psicólogos, nas listagens tenant-side
   (Views/anamneses.php, Views/escalas.php). Global — não fica só numa CSS
   de página porque as duas telas usam. */
.badge-modelo-padrao{
  display:inline-flex;
  align-items:center;
  background:var(--sky-100, #e0f2fe);
  color:var(--sky-700, #0369a1);
  font-size:10.5px;
  font-weight:700;
  padding:2px 8px;
  border-radius:20px;
  margin-left:8px;
  vertical-align:middle;
  cursor:help;
}

.page-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

.btn-outline{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--ink-700);
  font-size:13.5px;
  font-weight:600;
  padding:10px 16px;
  border-radius:10px;
  transition:border-color .15s, color .15s, background .15s;
  white-space:nowrap;
}
.btn-outline:hover{border-color:var(--sage-600);color:var(--sage-700);background:var(--sage-050);}

/* Variante de contorno vermelho pra ações destrutivas fora de modal (ex.:
   botão "Inativar" da ficha do paciente — pedido da Miriam, 2026-07). */
.btn-outline.danger{border-color:var(--alert-600);color:var(--alert-600);}
.btn-outline.danger:hover{border-color:var(--alert-600);color:var(--alert-600);background:var(--alert-100);}

/* Variante de contorno azul pra ações de edição fora de modal/linha (ex.:
   botão "Editar" do modal Visualizar de Pré-cadastros — pedido da Miriam,
   2026-08: só o "Fechar" fica branco, os demais ganham cor) — mesma cor de
   .row-icon-btn.editar (--info-600), só que em formato de botão de texto. */
.btn-outline.info{border-color:var(--info-600);color:var(--info-600);}
.btn-outline.info:hover{border-color:var(--info-600);color:#fff;background:var(--info-600);}

/* Variante de contorno na cor do tema (ex.: botão "Gerar resumo com IA" da
   tela Iniciar Sessão — pedido da Miriam, 2026-08: "quero da cor do tema").
   Igual ao .btn-outline padrão, só que já nasce com --sage-600 em vez de
   esperar o hover pra colorir (respeita o tema por conta do usuário —
   Configurações > Cor do tema — porque --sage-600 é a mesma variável que
   Usuario::PALETAS sobrescreve por tenant). */
.btn-outline.tema{border-color:var(--sage-600);color:var(--sage-600);}
.btn-outline.tema:hover{border-color:var(--sage-600);color:#fff;background:var(--sage-600);}

/* ======= Dropzone de upload (2026-08, pedido da Miriam: "botão de fazer
   upload" em Assinar documento ficava visualmente pobre — um <input
   type="file"> cru). Genérico o suficiente pra reaproveitar em qualquer
   outro upload de arquivo único do sistema — basta a mesma marcação
   (label.upload-dropzone envolvendo o input + os dois estados
   .upload-dropzone-estado, um deles com a classe extra
   .upload-dropzone-estado-arquivo) e ligar o JS equivalente ao de
   JS/paginas/perfil-assinatura.js (bloco "Dropzone de upload"). Fica em
   template.css (carregado em toda página) porque já é usado tanto em
   Configurações > Assinatura quanto em Paciente > Documentos > Importar. ======= */
.upload-dropzone{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  min-height:130px;
  border:1.5px dashed var(--border);
  border-radius:12px;
  background:var(--bg);
  cursor:pointer;
  padding:18px;
  transition:border-color .15s, background-color .15s;
}
.upload-dropzone:hover{border-color:var(--sage-600);background:var(--sage-050);}
.upload-dropzone.arrastando-sobre{border-color:var(--sage-600);background:var(--sage-050);}
.upload-dropzone.tem-arquivo{border-style:solid;background:var(--card);}
.upload-dropzone-input{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.upload-dropzone-estado{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
  color:var(--ink-500);
  width:100%;
}
.upload-dropzone-estado svg{color:var(--sage-600);margin-bottom:2px;}
.upload-dropzone-titulo{font-size:13.5px;font-weight:600;color:var(--ink-700);}
.upload-dropzone-hint{font-size:12px;color:var(--ink-500);}
/* Mesmo problema de especificidade de sempre (ver .btn-primary[hidden] mais
   acima neste arquivo): ".upload-dropzone-estado{display:flex}" empata com
   o "[hidden]{display:none}" nativo do navegador e, por vir depois no CSS,
   vencia — deixando os dois estados (vazio + arquivo) visíveis ao mesmo
   tempo assim que um arquivo era escolhido. */
.upload-dropzone-estado[hidden]{display:none;}

/* Estado "arquivo escolhido" — vira uma linha horizontal (ícone + nome/
   tamanho + link "Trocar"), em vez do bloco central vazio. */
.upload-dropzone-estado-arquivo{flex-direction:row;justify-content:flex-start;gap:12px;text-align:left;}
.upload-dropzone-arquivo-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.upload-dropzone-arquivo-nome{
  font-size:13.5px;font-weight:600;color:var(--ink-900);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.upload-dropzone-arquivo-tamanho{font-size:12px;color:var(--ink-500);}
.upload-dropzone-trocar{
  flex-shrink:0;
  font-size:12.5px;font-weight:600;
  color:var(--sage-600);
  text-decoration:underline;
}

/* ---------------- SELEÇÃO DE SESSÃO AGENDADA (modal "Planejar sessão" — 2026-08, pedido da Miriam) ---------------- */
.lista-selecao-sessao{display:flex;flex-direction:column;gap:8px;}
.opcao-selecao-sessao{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border:1.5px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.opcao-selecao-sessao:hover{border-color:var(--sage-600);background:var(--sage-050);}
.opcao-selecao-sessao input[type="radio"]{accent-color:var(--sage-600);flex-shrink:0;}
.opcao-selecao-sessao:has(input:checked){border-color:var(--sage-600);background:var(--sage-050);}
.opcao-selecao-sessao-texto{font-size:14px;color:var(--ink-700);}

/* ---------------- LISTA DE AGENDA / VISÃO DIA (compartilhado) ---------------- */
.agenda-list{margin-top:16px;position:relative;}
.agenda-list::before{
  content:'';
  position:absolute;
  left:16px;top:6px;bottom:6px;
  width:1.5px;
  background:var(--border);
}
.agenda-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:11px 4px 11px 0;
}
.agenda-dot{
  width:33px;height:33px;flex-shrink:0;
  border-radius:50%;
  background:var(--card);
  border:1.5px solid var(--sage-600);
  color:var(--sage-700);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
  z-index:1;
  font-family:'Inter',sans-serif;
}
.agenda-time{
  font-size:12.5px;
  font-weight:700;
  color:var(--ink-700);
  min-width:96px;
  flex-shrink:0;
  white-space:nowrap;
}
.agenda-patient{
  font-size:14px;
  font-weight:600;
  color:var(--ink-900);
  flex:1;
}
.agenda-status{
  font-size:11px;
  font-weight:700;
  padding:4px 9px;
  border-radius:20px;
  white-space:nowrap;
}
.status-confirmada{background:var(--sage-100);color:var(--sage-700);}
.status-aguardando{background:var(--gold-100);color:var(--gold-500);}
.status-realizada{background:var(--info-100);color:var(--info-600);}
.status-cancelada{background:var(--alert-100);color:var(--alert-600);}
/* "Falta" (2026-08) — separado de "Cancelada": tom âmbar/laranja pra não
   confundir com o vermelho de cancelamento na agenda (ver Evento::CHAVE_STATUS). */
.status-falta{background:rgba(201,130,46,.14);color:#9c5e1c;}

/* Badge clicável "Pago"/"Pendente" (Etapa 7.2 do roadmap de melhorias,
   2026-07 — Controle de pagamento por sessão), mesma pílula visual de
   .agenda-status, só que como <button> (cursor pointer + sem borda). */
button.agenda-status{border:none;cursor:pointer;font-family:inherit;}
.status-pagamento-pago{background:var(--sage-100);color:var(--sage-700);}
.status-pagamento-pendente{background:var(--gold-100);color:var(--gold-500);}

/* ---------------- CARD BASE (compartilhado) ----------------
   Fica aqui (template.css é carregado por TODA página) de propósito: antes
   estava duplicado em administrativo.css e index.css (cada um comentando
   que "a página não carrega o outro arquivo, então precisa existir aqui")
   — e ainda assim faltou nas telas de paciente (ficha, editar, prontuário,
   anotações, anamneses), que usavam class="card ..." sem nenhum CSS
   carregado definir isso, renderizando sem fundo/borda/sombra. Não duplicar
   esta regra em outro arquivo — se algo precisar de uma variação, criar uma
   classe modificadora (ex.: .card.compact), nunca redefinir .card inteiro. */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}

/* ---------------- AÇÕES POR LINHA (compartilhado — tabelas de qualquer tela) ----------------
   Botões icon-only de editar/excluir/ver/aplicar/pdf usados em linhas de
   tabela e cards em todo o sistema (Anamneses, Pacientes, Prontuário,
   Anotações, Administrativo: Psicólogos/Logs/Auditoria/Emails/Cadastros/
   Biblioteca, Histórico do perfil, etc.). Vivia só em CSS/anamneses.css,
   então qualquer tela que não carregasse esse arquivo (a maioria das do
   admin) renderizava os ícones sem cor nenhuma — daí morar aqui, em
   template.css, que TODA página carrega via sinerpsi_head(). Não duplicar
   esta regra em outro CSS — se algo precisar de uma variação, criar uma
   classe modificadora nova, nunca redefinir `.row-icon-btn` inteiro. Cada
   ação já tem cor própria em repouso (não só no hover), pra um bloco de
   vários botões ficar fácil de escanear rápido. */
.row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.row-icon-btn{
  width:32px;height:32px;
  border-radius:9px;
  border:none;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  cursor:pointer;
  transition:background .15s, color .15s, transform .1s;
}
.row-icon-btn:active{transform:scale(0.94);}

.row-icon-btn.visualizar{background:var(--bg);color:var(--ink-500);border:1px solid var(--border);}
.row-icon-btn.visualizar:hover{background:var(--ink-500);color:#fff;border-color:var(--ink-500);}

.row-icon-btn.aplicar{background:var(--sage-100);color:var(--sage-700);}
.row-icon-btn.aplicar:hover{background:var(--sage-600);color:var(--text-on-accent);}

.row-icon-btn.editar{background:var(--info-100);color:var(--info-600);}
.row-icon-btn.editar:hover{background:var(--info-600);color:#fff;}

.row-icon-btn.pdf{background:var(--gold-100);color:var(--gold-500);}
.row-icon-btn.pdf:hover{background:var(--gold-500);color:#fff;}

.row-icon-btn.remover{background:var(--alert-100);color:var(--alert-600);}
.row-icon-btn.remover:hover{background:var(--alert-600);color:#fff;}

@media (max-width: 720px){
  .row-actions{justify-content:flex-start;flex-wrap:wrap;}
}

/* ---------------- TABELA DE DADOS (compartilhado) ---------------- */
.table-card{padding:0;overflow:hidden;}
.data-table{width:100%;border-collapse:collapse;}
.data-table thead th{
  text-align:left;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-400);
  padding:15px 22px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.data-table tbody tr{
  border-bottom:1px solid var(--border);
  transition:background .12s;
}
.data-table tbody tr:last-child{border-bottom:none;}
.data-table td{
  padding:14px 22px;
  font-size:14px;
  color:var(--ink-700);
  vertical-align:middle;
}

.table-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;
  border-top:1px solid var(--border);
}
.table-footer-info{font-size:13px;color:var(--ink-500);}
.pagination{display:flex;align-items:center;gap:6px;}
.page-btn{
  width:32px;height:32px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--card);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;
  color:var(--ink-700);
  transition:background .15s, border-color .15s, color .15s;
}
.page-btn:hover{border-color:var(--sage-600);color:var(--sage-700);}
.page-btn.active{background:var(--sage-600);border-color:var(--sage-600);color:var(--text-on-accent);}
.page-btn:disabled{opacity:.4;cursor:default;}
.page-btn.disabled{opacity:.4;cursor:default;pointer-events:none;}

@media (max-width:720px){
  .table-toolbar{flex-direction:column;align-items:stretch;}
  .data-table thead{display:none;}
  .data-table td{display:block;padding:8px 16px;}
  .data-table td:last-child{text-align:left;padding-bottom:14px;}
  .data-table tr{display:block;padding:6px 0;}
}

/* ---------------- BOTÃO PRIMÁRIO (base) ---------------- */
.btn-primary{
  display:flex;align-items:center;gap:8px;
  background:var(--sage-600);
  color:var(--text-on-accent);
  border:none;
  font-size:14px;
  font-weight:600;
  padding:11px 18px;
  border-radius:10px;
  box-shadow:0 4px 14px -4px rgba(var(--sage-600-rgb),.5);
  transition:background .15s, transform .1s;
}
.btn-primary:hover{background:var(--sage-700);}
.btn-primary:active{transform:scale(.98);}
/* Mesmo problema de especificidade visto em vários lugares deste projeto
   (.estudo-card[hidden], .tema-principal-card[hidden], etc.): `.btn-primary
   {display:flex}` acima empata em especificidade com o `[hidden]{display:
   none}` nativo do navegador e, sendo regra de autor, vence — um botão
   `.btn-primary` com o atributo `hidden` continuava aparecendo (caso real:
   botão "Acessar"/"Comprar livro" do modal de conteúdo da Biblioteca ficava
   visível para Artigo mesmo com `hidden` setado via JS). Esta regra, mais
   específica, garante que hidden realmente esconda o botão. */
.btn-primary[hidden]{display:none;}

/* Mesmo problema de especificidade, agora pro .btn-outline (2026-08,
   pedido da Miriam — bug real reportado: botão "Ir para modelos" do wizard
   de administrativo_instrumentos_recurso_form.php continuava aparecendo ao
   lado de "Concluir" na 4ª etapa, mesmo com hidden setado via JS). */
.btn-outline[hidden]{display:none;}

/* Loader do botão primário (pedido da Miriam, 2026-07 — ver
   administrativo-nova.js): usado quando o submit pode demorar um pouco mais
   que o normal (ex.: disparo de email na hora do cadastro) e o usuário
   precisa de um feedback visual claro pra não clicar de novo achando que
   não funcionou. `.btn-carregando` só baixa a opacidade/trava o cursor —
   quem desabilita o clique de verdade é o `disabled` do próprio <button>. */
.btn-primary.btn-carregando{opacity:.75;cursor:wait;}
.btn-spinner{
  display:inline-block;
  width:14px;height:14px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:sinerpsi-spin .7s linear infinite;
}
@keyframes sinerpsi-spin{to{transform:rotate(360deg);}}

/* Loader em tela cheia (pedido da Miriam, 2026-07 — ver
   sinerpsiMostrarCarregando()/sinerpsiEsconderCarregando() em template.js):
   usado quando um <form> normal (POST com redirect) pode demorar alguns
   segundos antes de trocar de tela, ex.: Configurações > Assinatura
   (upload/conversão do documento antes de ir pra tela de posicionar). */
.sinerpsi-carregando-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(var(--overlay-rgb),.55);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .15s ease;
}
.sinerpsi-carregando-overlay.active{opacity:1;pointer-events:all;}
.sinerpsi-carregando-caixa{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  background:var(--card);border-radius:var(--radius-lg);
  padding:28px 34px;box-shadow:0 8px 30px rgba(0,0,0,.18);
}
.sinerpsi-carregando-spinner{
  width:30px;height:30px;border-width:3px;
  border-color:rgba(var(--overlay-rgb),.15);
  border-top-color:var(--sage-600);
}
.sinerpsi-carregando-texto{font-size:13.5px;font-weight:600;color:var(--ink-700);}

/* ---------------- MODAL (estrutura base) ---------------- */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(var(--overlay-rgb),.55);
  backdrop-filter:blur(2px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:100;
}
.modal-overlay.active{opacity:1;pointer-events:auto;}

.modal-card{
  width:100%;
  max-width:600px;
  max-height:min(680px, 85vh);
  background:var(--card);
  border-radius:16px;
  box-shadow:0 20px 60px -12px rgba(var(--shadow-rgb),.35);
  display:flex;
  flex-direction:column;
  transform:translateY(14px) scale(.98);
  opacity:0;
  transition:transform .2s cubic-bezier(.16,1,.3,1), opacity .18s ease;
}
.modal-overlay.active .modal-card{transform:translateY(0) scale(1);opacity:1;}

/* Achado 2026-08 (bug real da rolagem sumida na modal de Planos, não
   resolvido só com flex/min-height em .form-modal-body): quase toda modal
   de formulário do projeto (Planos, Pacientes, itens de cadastro, etc.) tem
   a estrutura <div class="modal-card">‹form›<div class="form-modal-header">
   ...<div class="form-modal-body">...<div class="form-modal-footer">...
   </form></div> — ou seja, o <form> é o ÚNICO filho direto do .modal-card
   (que é flex column). Sem o <form> TAMBÉM ser flex column, ele vira um
   bloco comum cuja altura é só a soma do próprio conteúdo (header+body+
   footer somados), estourando o max-height do card por fora, e o flex:1/
   min-height:0 do .form-modal-body fica sem efeito nenhum (só funciona
   quando o PAI direto é flex container). Replicando aqui a mesma cadeia
   flex do .modal-card pro <form> resolve pra qualquer modal que siga esse
   padrão, não só a de Planos. */
.modal-card > form{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

.modal-close{
  position:absolute;
  top:18px;right:18px;
  width:32px;height:32px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--ink-500);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s, color .15s;
}
.modal-close:hover{background:var(--bg);color:var(--ink-900);}

.modal-header{
  position:relative;
  padding:26px 30px 18px;
  text-align:center;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.modal-header h2{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:500;
  font-size:22px;
  color:var(--ink-900);
  margin:0;
}
.modal-header p{
  margin:6px 0 0;
  font-size:13px;
  color:var(--ink-500);
}

.modal-body{
  padding:22px 30px 28px;
  overflow-y:auto;
}

/* .form-modal-footer/.btn-danger já existiam em pacientes.css (rodapé do
   modal de exclusão de paciente), mas o popup genérico de item 19
   (public/JS/template.js::sinerpsiConfirm/sinerpsiAlert) roda em QUALQUER
   página — inclusive as que não carregam pacientes.css (ex.: perfil.php,
   só carrega CSS/perfil.css). Duplicado aqui pra ficar garantido em
   template.css (sempre carregado); onde as duas regras coexistem (páginas
   que carregam pacientes.css também) o resultado visual é idêntico, então
   não há conflito — pacientes.css só não foi "limpo" pra não mexer em
   nada que já funcionava.*/
.form-modal-footer{
  display:flex;align-items:center;justify-content:flex-end;
  gap:12px;
  padding:18px 30px;
  border-top:1px solid var(--border);
  flex-shrink:0;
}

/* ---------------- MODAL DE BOAS-VINDAS: TOUR EM CARROSSEL (primeiro acesso) ----------------
   Pedido da Miriam, 2026-08 — substituiu o modal de intro + balão apontando
   pra sidebar por um único modal central com dots de progresso + Anterior/
   Próximo (ver Views/home.php/JS/paginas/dashboard.js). Reaproveita a
   estrutura genérica .modal-overlay/.modal-card já existente. */
.tour-modal-card{max-width:420px;text-align:center;padding:22px 26px 26px;}
.tour-modal-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.tour-modal-dots{display:flex;align-items:center;gap:6px;}
.tour-modal-dot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:background .2s,width .2s;}
.tour-modal-dot.active{width:20px;border-radius:4px;background:var(--sage-600);}
.tour-modal-topo .modal-close{position:static;}

.tour-modal-icone{
  width:56px;height:56px;
  margin:0 auto 18px;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
}
.tour-modal-icone.sage{background:var(--sage-100);color:var(--sage-700);}
.tour-modal-icone.gold{background:var(--gold-100);color:var(--gold-500);}
.tour-modal-icone.info{background:var(--info-100);color:var(--info-600);}
.tour-modal-icone.alert{background:var(--alert-100);color:var(--alert-600);}

/* Altura mínima fixa (pedido da Miriam, 2026-08: "o tamanho da janela deve
   permanecer o mesmo ao ir clicando em próximo, mesmo que o texto seja
   maior em uma aba ou outra") — sem isso, passos com texto mais curto/longo
   faziam o modal inteiro crescer/encolher a cada clique. Conteúdo fica
   centralizado verticalmente dentro desse espaço reservado. */
.tour-modal-body{min-height:200px;display:flex;flex-direction:column;justify-content:center;}
.tour-modal-body h2{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:22px;color:var(--ink-900);margin:0 0 12px;}
.tour-modal-body p{margin:0;font-size:14px;line-height:1.65;color:var(--ink-600);}

.tour-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:26px;}
.tour-modal-footer .btn-outline,
.tour-modal-footer .btn-primary{display:flex;align-items:center;gap:8px;padding:10px 18px;font-size:14px;}
/* "Anterior" some no 1º passo (JS alterna [hidden]) — o botão "Próximo"
   sozinho ocupa a direita do rodapé (justify-content:space-between cuida
   disso automaticamente, sem precisar de margin extra). */
.tour-modal-footer .btn-outline[hidden]{display:none;}
.btn-danger{
  display:flex;align-items:center;gap:8px;
  background:var(--alert-600);
  color:#fff;
  border:none;
  font-size:14px;
  font-weight:600;
  padding:11px 18px;
  border-radius:10px;
  transition:filter .15s;
  cursor:pointer;
}
.btn-danger:hover{filter:brightness(0.92);}

/* ---------------- TEMA ESCURO ---------------- */
html[data-theme="dark"]{
  --bg:#0F1420;
  --card:#171C2A;
  --border:#262C3D;
  --border-strong:#333B4D;

  --ink-900:#F3F5F9;
  --ink-800:#E1E5EE;
  --ink-700:#C3C9D9;
  --ink-500:#8B93A8;
  --ink-400:#666E85;

  /* Mesma troca do tema claro acima (2026-08) — segue os mesmos valores já
     usados pelo tema escuro do painel admin (ver --teal-* dark mais
     abaixo). */
  --sage-700:#9FC9D6;
  --sage-600:#4A93AC;
  --sage-600-rgb:74,147,172;
  --sage-100:rgba(74,147,172,.18);
  --sage-050:rgba(74,147,172,.08);

  --gold-700:#F0CE86;
  --gold-500:#D9AF54;
  --gold-500-rgb:217,175,84;
  --gold-400:rgba(217,175,84,.5);
  --gold-300:rgba(217,175,84,.32);
  --gold-100:rgba(217,175,84,.18);
  --gold-050:rgba(217,175,84,.08);

  --navy-700:#A8C5F5;
  --navy-600:#7FA1E0;
  --navy-600-rgb:127,161,224;
  --navy-400:rgba(127,161,224,.5);
  --navy-300:rgba(127,161,224,.32);
  --navy-100:rgba(127,161,224,.18);
  --navy-050:rgba(127,161,224,.08);

  /* Tema escuro da rampa teal (2026-08, atualizada na 3ª rodada pra
     acompanhar a mistura das 3 cores da logo, ver nota em :root acima) —
     mesmo espírito das outras rampas: tons claros/translúcidos pra
     funcionar sobre fundo escuro. Usada pelo painel admin
     (.app:has(.sidebar--admin) em vez de --navy-*, ver nota lá). */
  --teal-700:#9FC9D6;
  --teal-600:#4A93AC;
  --teal-600-rgb:74,147,172;
  --teal-400:rgba(74,147,172,.5);
  --teal-300:rgba(74,147,172,.32);
  --teal-100:rgba(74,147,172,.18);
  --teal-050:rgba(74,147,172,.08);

  --alert-600:#D98A7B;
  --alert-200:rgba(217,138,123,.30);
  --alert-100:rgba(217,138,123,.16);

  --info-600:#6FA8D9;
  --info-100:rgba(111,168,217,.18);

  --track-off:#333B4D;

  --shadow-rgb:0,0,0;
  --shadow-rgb-soft:0,0,0;
  --overlay-rgb:0,0,0;
}

/* botão de alternância de tema (ícones trocam via CSS, sem precisar de JS) */
#themeToggle .icon-sun{display:none;}
html[data-theme="dark"] #themeToggle .icon-moon{display:none;}
html[data-theme="dark"] #themeToggle .icon-sun{display:block;}

/* ---------------- RESPONSIVO (comum) ---------------- */
@media (max-width:720px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:20;transform:translateX(-100%);transition:transform .2s ease;}
  .sidebar.mobile-open{transform:translateX(0);}
  .content{padding:22px 16px 40px;}
  .topbar{padding:0 16px;}
  .mobile-menu-btn{display:flex;}
}

/* ---------------- UTILITÁRIOS COMPARTILHADOS (compartilhado) ----------------
   Classes que substituem style="" inline repetido em várias Views — cada uma
   documenta de onde veio, pra não recriar o mesmo inline em vez de reusar
   isto. Ver item "Extrair inline styles das Views para CSS" do plano de boas
   práticas. Estilos genuinamente dinâmicos (cor calculada em runtime, opacity
   condicional a um valor do banco) continuam inline de propósito — não têm
   como virar classe fixa. */

/* Estado vazio de tabela (célula única "Nenhum X encontrado") — era
   style="text-align:center;padding:24px;color:var(--ink-400);" repetido em
   pacientes.php e anamneses.php. */
.table-empty-cell{text-align:center;padding:24px;color:var(--ink-400);}

/* Estado vazio de uma aba inteira da ficha (Prontuário/Anotações/Anamnese
   sem nenhum registro ainda) — era
   style="text-align:center;padding:40px 20px;color:var(--ink-400);" repetido
   em paciente_anamneses.php, paciente_anotacoes.php e paciente_prontuario.php. */
.ficha-section-empty{text-align:center;padding:40px 20px;color:var(--ink-400);}

/* Subtítulo de ficha mais colado ao cabeçalho, usado nos formulários "Novo
   registro" (prontuário/anotação/responder anamnese) — era
   style="margin:-8px 0 20px;" repetido em 3 Views. */
.ficha-sub-compacta{margin:-8px 0 20px;}

/* Campo de formulário que deve ocupar 2x o espaço dos vizinhos no mesmo
   .form-row (ex.: "Título" ao lado de "Data") — era style="flex:2;" repetido
   em paciente_anotacao_nova.php e paciente_prontuario_novo.php. */
.form-field-flex2{flex:2;}

/* Ícone de exportação alinhado com o texto ao lado (cabeçalho das páginas de
   impressão/PDF) — era style="vertical-align:-2px;margin-right:4px;"
   repetido idêntico em 4 Views *_exportar.php. */
.icon-inline{vertical-align:-2px;margin-right:4px;}

/* Link/texto secundário com a cor de destaque (accent) do app — era
   style="color:var(--sage-700);font-weight:600;" repetido no dashboard admin
   e nos links "Baixar modelo de planilha" dos modais de importação CSV. */
.link-sage{color:var(--sage-700);font-weight:600;}

/* <form> que só existe pra agrupar campos de um modal sem interferir no
   layout flex/grid do modal em si — era style="display:contents" repetido
   nos modais de importação CSV (pacientes.php, paciente_prontuario.php). */
.form-wrapper-transparent{display:contents;}

/* Lista de erros de importação (resultado da importação CSV, uma linha por
   erro) — era style="margin:12px 0 0;padding-left:20px;font-size:13.5px;
   color:var(--ink-700);line-height:1.7;" repetido em pacientes.php e
   paciente_prontuario.php. */
.lista-resultado-importacao{margin:12px 0 0;padding-left:20px;font-size:13.5px;color:var(--ink-700);line-height:1.7;}

/* Larguras de modal usadas em mais de uma tela — nomeadas pelo valor em px
   pra ficar óbvio qual usar sem precisar abrir o CSS. Modais com largura
   usada só 1x no projeto inteiro continuam com max-width inline de
   propósito (não valeria criar uma classe só pra um único uso). */
.modal-w-440{max-width:440px;}
.modal-w-480{max-width:480px;}
.modal-w-520{max-width:520px;}
.modal-w-600{max-width:600px;}
.modal-w-640{max-width:640px;}
.modal-w-680{max-width:680px;}
.modal-w-760{max-width:760px;}

/* Espaçamento repetido em mais de um lugar (não é um sistema geral de
   utilitários — só os dois valores que apareciam duplicados como inline). */
.mt-16{margin-top:16px;}
.mb-16{margin-bottom:16px;}

/* "S" sublinhado no botão de sublinhar da barra de ferramentas do editor de
   texto — era style="text-decoration:underline;" repetido idêntico em
   paciente_anotacao_nova.php e paciente_prontuario_novo.php. */
.icon-underline-preview{text-decoration:underline;}

/* Linha de botões lado a lado com respiro pequeno — era
   style="display:flex;gap:8px;" repetido 2x em perfil.php (ações de
   troca/remoção de logo). */
.flex-gap-8{display:flex;gap:8px;}

/* Mensagem de sucesso de formulário (ex.: "Senha alterada com sucesso." em
   perfil_senha.php) — antes tinha cor fixa em hexadecimal (#e8f5e9/#1b5e20)
   inline, que não respeitava o tema escuro (ver html[data-theme="dark"]
   acima); usando --sage-100/--sage-700 fica consistente com o resto do
   "verde de sucesso" do app (ex.: .badge-acesso.sucesso) e já se adapta ao
   dark mode automaticamente. */
.form-modal-sucesso-geral{
  padding:12px 16px;
  border-radius:8px;
  background:var(--sage-100);
  color:var(--sage-700);
  font-weight:600;
}

/* Selo (badge) de contagem não lida — ícone de Suporte no topbar (ver
   public/JS/template.js, que faz o polling e mostra/esconde via [hidden]).
   O item "Suporte" do menu do admin já reaproveita a classe .nav-item .badge
   existente (ver acima) em vez de precisar de uma nova — só o ícone solto do
   topbar (fora de .nav-item) precisava de um selo próprio. */
.nav-badge{
  position:absolute;
  top:4px;right:4px;
  min-width:16px;height:16px;
  padding:0 4px;
  border-radius:999px;
  background:var(--alert-600);
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:16px;
  text-align:center;
  border:1.5px solid var(--card);
}

/* Central de notificações do painel master (sino do topbar admin, ver
   #notificacoesBtn/#notificacoesMenu em Views/template.php e o polling/render
   em public/JS/template.js). .notificacoes-wrap precisa de position:relative
   pra o menu (.notificacoes-menu) flutuar ancorado no botão. */
.notificacoes-wrap{position:relative;}

.notificacoes-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:320px;
  max-height:420px;
  overflow-y:auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  z-index:40;
  padding:6px;
}

.notificacoes-grupo{padding:10px 12px 6px;}
.notificacoes-grupo + .notificacoes-grupo{border-top:1px solid var(--border);}

.notificacoes-grupo-label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--ink-500);
  margin-bottom:6px;
}

.notificacoes-item{
  display:block;
  padding:8px 6px;
  border-radius:8px;
  text-decoration:none;
  color:inherit;
}
.notificacoes-item:hover{background:var(--bg);}
.notificacoes-item-titulo{font-size:13px;font-weight:600;color:var(--ink-700);}
.notificacoes-item-sub{font-size:12px;color:var(--ink-500);margin-top:2px;}

.notificacoes-vazio{
  padding:24px 12px;
  text-align:center;
  font-size:13px;
  color:var(--ink-500);
}

/* Marca d'água no canto inferior direito (2026-08, pedido da Miriam:
   "coloca no fundo transparente no canto inferior direito a imagem LOGO 2")
   — originalmente só no Dashboard do admin (Views/administrativo_dashboard.php),
   movida pra template.css (sempre carregado) porque o Dashboard do tenant
   passou a usar a mesma imagem (Views/home.php, pedido: "na direita deixe a
   mesma imagem utilizada no dashboard do acesso admin no canto inferior
   direito", depois que o painel "Lembretes" saiu de lá). position:fixed
   (não scroll:absolute) pra ficar sempre grudada no canto da tela mesmo com
   a página rolando; pointer-events:none pra não atrapalhar clique em nada;
   opacidade bem baixa pra ficar decorativa, não competir com os cards. */
.dashboard-watermark{
  position:fixed;
  right:10px;bottom:-30px;
  width:360px;
  max-width:36vw;
  opacity:.06;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
@media (max-width:760px){ .dashboard-watermark{display:none;} }

/* ---------------- BLOQUEIO DE RECURSO POR PLANO (compartilhado) ----------------
   Tela cheia mostrada no lugar de qualquer módulo/tela que o plano atual do
   psicólogo não inclui (2026-08, pedido da Miriam: "tudo de novidade nos
   planos pro e premium tem que ser bloqueado" pra quem está no Essencial —
   cadeado + aviso pra trocar de plano). Ver Views/bloqueio_plano.php e
   Core/Controller.php::exigirRecursoPlano(). Fica em template.css (toda
   página carrega) porque a tela de bloqueio pode aparecer no lugar de
   QUALQUER módulo do sistema. */
.bloqueio-plano-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60vh;
  padding:20px;
}
.bloqueio-plano-card{
  max-width:440px;
  width:100%;
  padding:40px 32px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.bloqueio-plano-icone{
  width:64px;height:64px;
  border-radius:50%;
  background:var(--gold-100);
  color:var(--gold-500);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  flex-shrink:0;
}
.bloqueio-plano-titulo{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:500;
  font-size:19px;
  color:var(--ink-900);
  margin:0 0 10px;
  line-height:1.35;
}
.bloqueio-plano-texto{
  font-size:14px;
  color:var(--ink-500);
  line-height:1.5;
  margin:0 0 24px;
}
.bloqueio-plano-cta{white-space:nowrap;}

/* Selo "cadeado" compacto — usado sobre um BOTÃO/AÇÃO específica dentro de
   uma tela que continua acessível (ex.: botão "Gerar resumo com IA"), em
   vez de travar a tela inteira (essa é .bloqueio-plano-wrap acima). Uso:
   <button class="btn-outline recurso-bloqueado" data-ajuda="...">🔒 Texto</button>
   — o próprio .campo-ajuda já dá o tooltip explicando o motivo. */
.recurso-bloqueado{
  opacity:.6;
  cursor:not-allowed !important;
  position:relative;
}
.recurso-bloqueado:hover{opacity:.6 !important;}