/* =====================================================================
   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;
  --sidebar-text:#AEBBD6;
  --sidebar-text-dim:#7C8AAD;
  --sidebar-text-bright:#F2F4F8;

  /* cor de destaque (accent) do app — um verde-sálvia/teal limpo, próximo do
     sistema original, mas com tonalidade própria para não ficar idêntico. */
  --sage-700:#2F6B5E;
  --sage-600:#3F8770;
  --sage-600-rgb:63,135,112;
  --sage-400:#6BB29B;
  --sage-300:#8AC4B0;
  --sage-100:#E3F1EC;
  --sage-050:#F1F8F5;

  --gold-500:#B98F2A;
  --gold-100:#F7EFDC;

  --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;}
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: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:6px 8px 22px 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;
  background:linear-gradient(135deg, var(--sage-600), var(--sage-400));
  display:flex;align-items:center;justify-content:center;
  color:var(--text-on-accent);
  font-family:'Fraunces',serif;
  font-weight:600;
  font-style:italic;
  font-size:17px;
}
.brand-name{
  font-family:'Fraunces',serif;
  font-size:18px;
  font-weight:500;
  color:var(--sidebar-text-bright);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.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;
}

/* ---------------- 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;
}

/* ---------------- 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-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:18px;
}

.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);}

.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);}

/* ---------------- CONTENT WRAPPER ---------------- */
.content{
  padding:32px 36px 56px;
  max-width:1280px;
  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:8px;}
.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 vinculoGerarSenhaForte()/vinculoForcaSenha() 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:26px;
  color:var(--ink-900);
}
.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;
}

.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);}

/* ---------------- 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-falta{background:var(--alert-100);color:var(--alert-600);}

/* ---------------- 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 vinculo_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);}

/* ---------------- 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;}

.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::vinculoConfirm/vinculoAlert) 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;
}
.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;

  --sage-700:#8FCBB5;
  --sage-600:#4FA184;
  --sage-600-rgb:79,161,132;
  --sage-100:rgba(79,161,132,.20);
  --sage-050:rgba(79,161,132,.10);

  --gold-500:#D9AF54;
  --gold-100:rgba(217,175,84,.18);

  --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);
}