/* =============================================================================
   brand.css — Sistema de identidade visual da Clínica JA
   -----------------------------------------------------------------------------
   Paleta extraída diretamente da logo (assets/img/logo-clinica.png):
   grafite facetado + monograma "JA" em traço branco. Os tons abaixo são as
   cores realmente presentes na arte, amostradas pixel a pixel:

     #131418  facetas escuras     #1c1d21  grafite base (cor dominante)
     #292a2d  facetas claras      #ffffff  monograma / linha

   A marca é deliberadamente MONOCROMÁTICA: grafite, branco e nada mais. Cor
   entra apenas para comunicar estado (confirmado, pendente, cancelado) — nunca
   para decorar. O que cria hierarquia aqui é peso tipográfico, espaço e
   contraste de superfície, não matiz.

   Este arquivo sobrescreve o roxo padrão do tema Material (Material Dashboard
   e Material Kit, #9c27b0) pela paleta da marca e define o casco do sistema
   (sidebar clara, navbar clara, cards, tabelas, formulários). Deve ser
   carregado SEMPRE depois de material-dashboard.css / material-kit.css, e
   antes de qualquer <style> da página.

   Índice
     01  Tokens .................. cor, tipografia, espaço, raio, elevação
     02  Base .................... corpo, títulos, links, seleção
     03  Casco ................... sidebar clara
     04  Casco ................... navbar e cabeçalho de página
     05  Cards
     06  Botões
     07  Formulários
     08  Tabelas
     09  Badges e status
     10  Alertas
     11  Dropdowns, abas e paginação
     12  Modais
     13  Calendário (FullCalendar)
     14  Plugins (SweetAlert2, Select2)
     15  Telas de acesso (login, recuperação de senha)
     16  Texto, fundos e utilitários de marca
     17  Acessibilidade e impressão
   ========================================================================== */

/* ==========================================================================
   01 · TOKENS
   ========================================================================== */

:root {
  /* ---- Escala de grafite derivada da logo ---- */
  --brand-950: #0d0e11;
  --brand-900: #131418;
  --brand-800: #1c1d21; /* cor-base da marca */
  --brand-700: #24262b;
  --brand-600: #292a2d;
  --brand-500: #33353b;
  --brand-400: #4a4d54;
  --brand-300: #6d717a;
  --brand-200: #a7abb3;
  --brand-100: #d9dbe0;
  --brand-050: #f3f4f6;
  --brand-white: #ffffff;

  /* ---- Gradientes que reproduzem o facetado da logo ---- */
  --brand-gradient: linear-gradient(60deg, #33353b, #131418);
  --brand-gradient-135: linear-gradient(135deg, #33353b, #131418);
  --brand-gradient-shell: linear-gradient(180deg, #1c1d21 0%, #131418 100%);

  /* ---- Superfícies ----
     O fundo da página é um cinza levemente frio: sem ele os cards brancos
     não têm de onde se destacar, e o sistema inteiro vira uma folha só. */
  --surface-page: #f4f5f7;
  --surface-card: #ffffff;
  --surface-sunken: #f9fafb;
  --surface-inverse: var(--brand-900);

  /* ---- Traços ---- */
  --border-hairline: #e6e8ec;
  --border-soft: #dfe2e7;
  --border-strong: #c9cdd4;
  --border-inverse: rgba(255, 255, 255, 0.12);

  /* ---- Sidebar ----
     O menu lateral nasceu grafite — era ele que carregava a marca. O Dr. José
     Adailson pediu o contrário em 19/08/2026: o painel escuro ficava "ruim
     para visualizar". Faz sentido, é o que se lê de relance o dia todo. Hoje
     ele é branco, com o texto em grafite; a marca ficou no monograma do topo
     e no trilho do item ativo.

     A seção 03 inteira lê estes tokens e não escreve cor literal nenhuma:
     para voltar ao grafite, troque só os valores daqui pelos comentados ao
     lado — nenhuma regra precisa ser tocada. */
  --sidebar-bg: var(--surface-card);            /* grafite: var(--brand-gradient-shell) */
  --sidebar-border: var(--border-hairline);     /* grafite: rgba(0, 0, 0, 0.4)          */
  --sidebar-text: var(--text-body);             /* grafite: rgba(255, 255, 255, 0.7)    */
  --sidebar-text-strong: var(--text-strong);    /* grafite: var(--brand-white)          */
  --sidebar-icon: var(--text-muted);            /* grafite: rgba(255, 255, 255, 0.55)   */
  --sidebar-icon-strong: var(--brand-700);      /* grafite: rgba(255, 255, 255, 0.9)    */
  --sidebar-hover-bg: var(--brand-050);         /* grafite: rgba(255, 255, 255, 0.07)   */
  --sidebar-active-bg: #eceef2;                 /* grafite: rgba(255, 255, 255, 0.12)   */
  --sidebar-rail: var(--brand-800);             /* grafite: var(--brand-white)          */
  --sidebar-divider: var(--border-hairline);    /* grafite: var(--border-inverse)       */
  --sidebar-section: var(--text-muted);         /* grafite: rgba(255, 255, 255, 0.38)   */
  --sidebar-mark-border: var(--border-soft);    /* grafite: rgba(255, 255, 255, 0.14)   */
  --sidebar-scroll-thumb: rgba(0, 0, 0, 0.18);  /* grafite: rgba(255, 255, 255, 0.16)   */
  --sidebar-focus-ring: var(--brand-500);       /* grafite: rgba(255, 255, 255, 0.8)    */

  /* ---- Texto ---- */
  --text-strong: var(--brand-900);
  --text-body: var(--brand-700);
  --text-muted: var(--brand-300);
  --text-faint: var(--brand-200);
  --text-inverse: var(--brand-white);
  --text-inverse-muted: rgba(255, 255, 255, 0.66);

  /* ---- Estado ----
     Dessaturados de propósito: ao lado do grafite, um verde ou vermelho
     saturado do Material grita e desequilibra a tela. Aqui eles marcam
     estado sem disputar atenção com o conteúdo. */
  --state-success: #2e7d52;
  --state-success-soft: #e8f3ec;
  --state-warning: #a86a12;
  --state-warning-soft: #fbf1e2;
  --state-danger: #b3261e;
  --state-danger-soft: #fbeceb;
  --state-info: #3c5a6b;
  --state-info-soft: #ecf1f4;
  --state-neutral: var(--brand-400);
  --state-neutral-soft: var(--brand-050);

  /* ---- Tipografia ----
     Jost é o clone livre da Futura — a mesma geométrica de traço fino do
     monograma e da assinatura "DR. JOSÉ ADAILSON / CARDIOLOGISTA". Fica em
     títulos, números e na marca, onde a forma da letra é lida como imagem.
     Roboto continua no corpo, em formulário e tabela, onde o que importa é
     legibilidade em corpo pequeno e altura-x generosa. */
  --font-display: 'Jost', 'Futura', 'Century Gothic', 'Roboto', sans-serif;
  --font-body: 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif;

  --text-display: 2rem;      /* números de KPI, marca em destaque */
  --text-h1: 1.5rem;         /* título de página */
  --text-h2: 1.1875rem;      /* título de card */
  --text-h3: 1.0625rem;      /* subtítulo dentro de card */
  --text-base: 0.9375rem;    /* corpo — 15px */
  --text-sm: 0.875rem;       /* tabela, dropdown */
  --text-xs: 0.8125rem;      /* apoio */
  --text-micro: 0.6875rem;   /* rótulo caixa-alta */

  --tracking-brand: 0.18em;  /* espacejamento da assinatura da logo */
  --tracking-label: 0.08em;

  /* ---- Espaço (base 4) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ---- Raio ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Elevação ----
     O Material Dashboard empilha três sombras largas e escuras em cada card,
     o que num sistema monocromático vira sujeira cinza. Estas são rasas e
     neutras: separam plano sem borrar a borda. */
  --elev-1: 0 1px 2px rgba(13, 14, 17, 0.05), 0 1px 3px rgba(13, 14, 17, 0.06);
  --elev-2: 0 2px 4px -1px rgba(13, 14, 17, 0.06),
    0 6px 16px -6px rgba(13, 14, 17, 0.12);
  --elev-3: 0 8px 28px -10px rgba(13, 14, 17, 0.22),
    0 4px 10px -6px rgba(13, 14, 17, 0.12);

  /* ---- Sombras na cor da marca (substituem as sombras roxas do tema) ---- */
  --brand-shadow-sm: 0 2px 2px 0 rgba(28, 29, 33, 0.14),
    0 3px 1px -2px rgba(28, 29, 33, 0.2), 0 1px 5px 0 rgba(28, 29, 33, 0.12);
  --brand-shadow-md: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
    0 7px 10px -5px rgba(28, 29, 33, 0.4);
  --brand-shadow-lg: 0 14px 26px -12px rgba(28, 29, 33, 0.42),
    0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(28, 29, 33, 0.2);

  /* ---- Movimento ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.15s;
  --dur: 0.22s;

  /* ---- Medidas do casco ---- */
  --sidebar-w: 264px;
}

/* ==========================================================================
   02 · BASE
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Títulos na geométrica da logo. O Material Dashboard aplica Roboto Slab em
   h1–h6 e .card-title — um serifado que não tem nada a ver com esta marca. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card .card-title,
.modal-title,
.navbar-brand {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: 500;
  letter-spacing: 0;
}

h1, .h1 { font-size: var(--text-h1); line-height: 1.25; }
h2, .h2 { font-size: var(--text-h2); line-height: 1.3; }
h3, .h3 { font-size: var(--text-h3); line-height: 1.35; }

/* Rótulo caixa-alta espacejado — ecoa "C A R D I O L O G I S T A" da
   assinatura. Usado em cima de números, seções e colunas de tabela. */
.brand-label,
.card .card-category,
.card-stats .card-category {
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Números grandes (KPI): tabulares, para que colunas de valores alinhem. */
.brand-figure,
.card-stats .card-title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 1.1;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

a {
  color: var(--brand-800);
  transition: color var(--dur-fast) var(--ease);
}

a:hover,
a:focus {
  color: var(--brand-500);
}

.btn-link {
  color: var(--brand-800);
}

::selection {
  background: var(--brand-800);
  color: var(--brand-white);
}

/* ==========================================================================
   03 · CASCO — SIDEBAR CLARA
   -----------------------------------------------------------------------------
   A sidebar nasceu grafite: era a superfície que carregava a marca inteira.
   Em uso não se sustentou — o Dr. José Adailson relatou em 19/08/2026 que o
   painel escuro ficava "ruim para visualizar". É o menu que ele lê de
   relance o dia inteiro, entre um paciente e outro, e texto claro sobre
   fundo escuro em corpo pequeno cansa a leitura.

   Agora o menu é branco e o sistema é uma superfície clara só. A marca não
   se perde: continua no monograma grafite do topo, no trilho grafite do
   item ativo e no disco de iniciais da navbar.

   Nenhuma regra abaixo escreve cor literal — todas leem os tokens
   `--sidebar-*` da seção 01. Voltar ao grafite é trocar aquele bloco.

   Os seletores usam [data-background-color] para superar as regras do tema.
   ========================================================================== */

.sidebar,
.sidebar[data-background-color],
.sidebar[data-background-color='white'],
.sidebar[data-background-color='black'] {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  background-color: var(--sidebar-bg);
  box-shadow: none;
  border-right: 1px solid var(--sidebar-border);
}

.sidebar .sidebar-wrapper {
  width: var(--sidebar-w);
  padding-bottom: var(--sp-6);
}

/* A foto `sidebar-1.jpg` que o tema injeta atrás da sidebar não existe nesta
   marca — o grafite facetado da logo já é a textura. */
.sidebar .sidebar-background,
.sidebar[data-background-color] .sidebar-background {
  display: none !important;
}

/* ---------------------------- Marca no topo ---------------------------- */

.sidebar .logo {
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  text-align: center;
}

/* O filete sob a logo vai de borda a borda no tema; aqui ele recua para a
   mesma margem lateral dos itens do menu. */
.sidebar .logo:after {
  right: var(--sp-5);
  width: calc(100% - var(--sp-5) * 2);
  background-color: var(--sidebar-divider);
}

.sidebar .logo a.simple-text,
.sidebar[data-background-color] .logo a.simple-text {
  display: block;
  padding: 0;
  color: var(--sidebar-text-strong);
  text-transform: none;
  line-height: 1.2;
}

/* O monograma vem do arquivo já sobre o grafite facetado — sobre a sidebar
   branca ele é agora o único bloco escuro do topo, e é ele que sustenta a
   marca sozinho. O filete de 1px assenta o quadrado; o raio é o dos cards. */
.sidebar .brand-mark {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto var(--sp-3);
  border: 1px solid var(--sidebar-mark-border);
  border-radius: var(--radius-md);
  object-fit: cover;
}

.sidebar .brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: var(--tracking-brand);
  text-transform: uppercase;
  color: var(--sidebar-text-strong);
  /* O espacejamento empurra a palavra para a direita; o recuo devolve o
     bloco ao centro óptico. */
  text-indent: var(--tracking-brand);
}

.sidebar .brand-role {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--sidebar-section);
  text-indent: var(--tracking-label);
}

/* ------------------------------ Navegação ------------------------------ */

.sidebar .nav {
  margin-top: var(--sp-4);
  padding: 0 var(--sp-3);
}

.sidebar .nav li > a,
.sidebar[data-background-color] .nav .nav-item .nav-link {
  display: flex;
  align-items: center;
  margin: 2px 0;
  padding: 11px var(--sp-3);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sidebar-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  text-transform: none;
  opacity: 1;
  transition: background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.sidebar .nav li > a i,
.sidebar .nav li > a i.material-icons,
.sidebar[data-background-color] .nav .nav-item i {
  margin-right: var(--sp-3);
  color: var(--sidebar-icon);
  font-size: 20px;
  transition: color var(--dur-fast) var(--ease);
}

.sidebar .nav li > a p,
.sidebar[data-background-color] .nav .nav-item .nav-link p {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.35;
}

/* Item de duas linhas ("Anamneses / Personalizadas"): a segunda linha é
   qualificadora, não um item novo — por isso recua em tamanho e opacidade. */
.sidebar .nav li > a p small {
  display: block;
  font-size: var(--text-micro);
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.62;
}

/* Estado de foco/hover: a superfície ganha um cinza de fundo e o texto
   escurece até o grafite. Sem cor nova — o contraste é o da própria marca. */
.sidebar .nav li:not(.active) > a:hover,
.sidebar .nav li:not(.active) > a:focus,
.sidebar[data-background-color] .nav .nav-item:not(.active) .nav-link:hover {
  background-color: var(--sidebar-hover-bg);
  color: var(--sidebar-text-strong);
  box-shadow: none;
}

.sidebar .nav li:not(.active) > a:hover i,
.sidebar .nav li:not(.active) > a:focus i {
  color: var(--sidebar-icon-strong);
}

/* Item ativo: superfície cinza + trilho grafite à esquerda. Num sistema
   monocromático o trilho é o que substitui o "bloco colorido" do Material —
   marca a posição sem pintar um retângulo inteiro. */
.sidebar[data-color] .nav li.active > a,
.sidebar[data-background-color] .nav .nav-item.active .nav-link,
.sidebar .nav li.active > a {
  position: relative;
  background-color: var(--sidebar-active-bg);
  box-shadow: none;
  font-weight: 500;
}

.sidebar[data-color] .nav li.active > a::before,
.sidebar .nav li.active > a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 20px;
  border-radius: 0 2px 2px 0;
  background: var(--sidebar-rail);
  transform: translateY(-50%);
}

.sidebar[data-color] .nav li.active > a,
.sidebar[data-color] .nav li.active > a i,
.sidebar[data-color] .nav li.active > a p,
.sidebar[data-color] .nav li.active > a i.material-icons,
.sidebar .nav li.active > a,
.sidebar .nav li.active > a i,
.sidebar .nav li.active > a p {
  color: var(--sidebar-text-strong) !important;
}

/* Separador entre o bloco operacional e o de configuração. Substitui a linha
   de underscores (`______`) que o layout usava como régua. */
.sidebar .nav .nav-divider {
  height: 1px;
  margin: var(--sp-4) var(--sp-3);
  padding: 0;
  list-style: none;
  background: var(--sidebar-divider);
}

.sidebar .nav .nav-section {
  margin: var(--sp-5) 0 var(--sp-2);
  padding: 0 var(--sp-3);
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--sidebar-section);
}

/* Barra de rolagem discreta: a padrão do navegador é larga demais para uma
   coluna de 264px. */
.sidebar .sidebar-wrapper::-webkit-scrollbar {
  width: 6px;
}

.sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: var(--sidebar-scroll-thumb);
}

.sidebar .sidebar-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

/* ==========================================================================
   04 · CASCO — NAVBAR E CABEÇALHO DE PÁGINA
   ========================================================================== */

.main-panel {
  width: calc(100% - var(--sidebar-w));
  background: var(--surface-page);
}

/* O tema já afasta o conteúdo da navbar fixa com `margin-top: 70px`; aqui só
   as laterais mudam. `.dashboard-container` entra junto porque o painel do
   médico é a única tela que dispensa o invólucro `.content` — sem isto, seus
   rótulos ficavam escondidos atrás da navbar. */
.main-panel > .content,
.main-panel > .dashboard-container {
  margin-top: 70px;
  padding: var(--sp-6);
  min-height: calc(100vh - 123px);
}

.navbar {
  padding: var(--sp-3) var(--sp-2);
  background-color: var(--surface-card) !important;
  border-bottom: 1px solid var(--border-hairline);
  box-shadow: none !important;
  transition: box-shadow var(--dur) var(--ease);
}

/* O tema usa .navbar-wrapper como linha horizontal; aqui ele empilha o
   rótulo da área sobre o título da tela. */
.navbar .navbar-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}

.navbar .navbar-brand,
.navbar .page-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-strong);
  letter-spacing: 0;
}

/* Trilha de contexto acima do título: diz em que área do sistema se está. */
.navbar .page-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* O tema põe os links da navbar em caixa-alta de 12px — o que transforma o
   nome do usuário em "JOSÉ ADAILSON DA SILVA FERREIRA". Nome de pessoa se
   escreve como pessoa. O segundo seletor repete a especificidade de cinco
   classes que o Material Dashboard usa (`.navbar .collapse .navbar-nav
   .nav-item .nav-link`), senão o uppercase dele vence. */
.navbar .navbar-nav .nav-item .nav-link,
.navbar .collapse .navbar-nav .nav-item .nav-link {
  padding: 6px 10px;
  margin-left: 0;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-body);
  text-transform: none;
}

/* Chip de usuário: o avatar circular em grafite é o único ponto de marca na
   navbar — o resto fica claro para não competir com a sidebar. */
.navbar .user-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 10px 6px 6px;
  border-radius: var(--radius-pill);
  color: var(--text-body);
  transition: background-color var(--dur-fast) var(--ease);
}

.navbar .user-chip:hover,
.navbar .user-chip:focus {
  background-color: var(--brand-050);
  color: var(--text-strong);
}

.navbar .user-chip .user-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--brand-gradient-135);
  color: var(--brand-white);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Nome completo de paciente/médico pode ser longo demais para a navbar; ele
   corta com reticências em vez de espremer o resto da barra. */
.navbar .user-chip .user-name {
  max-width: 220px;
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar .user-chip .user-chip-caret {
  margin: 0;
  font-size: 18px;
  color: var(--text-muted);
}

.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(28,29,33,0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Cabeçalho de conteúdo, dentro da área branca da página. */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.page-head .page-head-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 500;
  color: var(--text-strong);
}

.page-head .page-head-sub {
  margin: var(--sp-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ==========================================================================
   05 · CARDS
   -----------------------------------------------------------------------------
   O tema entrega cards sem borda e com três sombras largas empilhadas. Num
   fundo cinza-claro isso lê como uma mancha, não como um plano. Aqui: filete
   de 1px + elevação rasa. A borda é o que dá o recorte; a sombra só sugere
   que o card está acima da página.
   ========================================================================== */

.card {
  margin-bottom: var(--sp-6);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--elev-1);
}

.card .card-header {
  padding: var(--sp-5) var(--sp-5) 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.card .card-header .card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  color: var(--text-strong);
}

.card .card-header .card-category {
  margin: var(--sp-1) 0 0;
}

.card .card-body {
  padding: var(--sp-5);
  font-size: var(--text-base);
}

.card .card-footer {
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  margin: 0;
  border: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* ---------------------- Cabeçalhos preenchidos -------------------------
   Cerca de 45 telas usam um cabeçalho de card com fundo próprio. O tema
   oferece uma cor por variante — rose, info, success, warning, danger — e o
   sistema acabou com cabeçalhos rosa, ciano e verde lado a lado, sem que a
   cor dissesse nada sobre o conteúdo. Aqui todas passam a ser o grafite da
   marca: estado se comunica nos selos (.status-chip) e nos badges, não no
   cromo do card.
   ---------------------------------------------------------------------- */

.card > .card-header-primary:not(.card-header-icon):not(.card-header-text),
.card > .card-header-rose:not(.card-header-icon):not(.card-header-text),
.card > .card-header-info:not(.card-header-icon):not(.card-header-text),
.card > .card-header-success:not(.card-header-icon):not(.card-header-text),
.card > .card-header-warning:not(.card-header-icon):not(.card-header-text),
.card > .card-header-danger:not(.card-header-icon):not(.card-header-text),
.card > .card-header.health-primary,
.card > .card-header.card-header-brand {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--brand-gradient-135);
  box-shadow: none;
}

/* Sem isto o título herda o grafite da regra geral de `.card-title` e
   desaparece sobre o próprio fundo grafite do cabeçalho. */
.card > .card-header-primary:not(.card-header-icon):not(.card-header-text),
.card > .card-header-primary:not(.card-header-icon):not(.card-header-text) .card-title,
.card > .card-header-primary:not(.card-header-icon):not(.card-header-text) .card-category,
.card > .card-header-primary:not(.card-header-icon):not(.card-header-text) i,
.card > .card-header-rose:not(.card-header-icon):not(.card-header-text),
.card > .card-header-rose:not(.card-header-icon):not(.card-header-text) .card-title,
.card > .card-header-rose:not(.card-header-icon):not(.card-header-text) .card-category,
.card > .card-header-info:not(.card-header-icon):not(.card-header-text),
.card > .card-header-info:not(.card-header-icon):not(.card-header-text) .card-title,
.card > .card-header-info:not(.card-header-icon):not(.card-header-text) .card-category,
.card > .card-header-success:not(.card-header-icon):not(.card-header-text),
.card > .card-header-success:not(.card-header-icon):not(.card-header-text) .card-title,
.card > .card-header-success:not(.card-header-icon):not(.card-header-text) .card-category,
.card > .card-header-warning:not(.card-header-icon):not(.card-header-text),
.card > .card-header-warning:not(.card-header-icon):not(.card-header-text) .card-title,
.card > .card-header-warning:not(.card-header-icon):not(.card-header-text) .card-category,
.card > .card-header-danger:not(.card-header-icon):not(.card-header-text),
.card > .card-header-danger:not(.card-header-icon):not(.card-header-text) .card-title,
.card > .card-header-danger:not(.card-header-icon):not(.card-header-text) .card-category,
.card > .card-header.health-primary,
.card > .card-header.health-primary .card-title,
.card > .card-header.health-primary .card-category,
.card > .card-header.health-primary i,
.card > .card-header.card-header-brand,
.card > .card-header.card-header-brand .card-title,
.card > .card-header.card-header-brand .card-category {
  color: var(--brand-white);
}

/* A linha de apoio do cabeçalho preenchido pede branco rebaixado, não o
   cinza de texto secundário, que sobre grafite fica ilegível. */
.card > [class*='card-header-']:not(.card-header-icon):not(.card-header-text) .card-category,
.card > .card-header.health-primary .card-category {
  color: rgba(255, 255, 255, 0.72);
}

/* Um `.btn-primary` grafite dentro de um cabeçalho grafite fica invisível.
   Sobre essa superfície o botão se inverte: branco sólido para a ação
   principal, contorno branco para as demais. */
.card > [class*='card-header-']:not(.card-header-icon):not(.card-header-text) .btn.btn-primary,
.card > .card-header.health-primary .btn.btn-primary {
  background-color: var(--brand-white);
  border-color: var(--brand-white);
  color: var(--brand-900);
  box-shadow: none;
}

.card > [class*='card-header-']:not(.card-header-icon):not(.card-header-text) .btn.btn-primary:hover,
.card > [class*='card-header-']:not(.card-header-icon):not(.card-header-text) .btn.btn-primary:focus,
.card > .card-header.health-primary .btn.btn-primary:hover,
.card > .card-header.health-primary .btn.btn-primary:focus {
  background-color: var(--brand-100);
  border-color: var(--brand-100);
  color: var(--brand-950);
}

.card > [class*='card-header-']:not(.card-header-icon):not(.card-header-text) .btn:not(.btn-primary),
.card > .card-header.health-primary .btn:not(.btn-primary) {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--brand-white);
  box-shadow: none;
}

/* A regra de texto branco do cabeçalho alcança qualquer `i` dentro dele —
   inclusive o ícone de um botão que já se inverteu para fundo claro. Aqui o
   ícone volta a herdar a cor do próprio botão. */
.card > [class*='card-header-']:not(.card-header-icon):not(.card-header-text) .btn .material-icons,
.card > [class*='card-header-']:not(.card-header-icon):not(.card-header-text) .btn i,
.card > .card-header.health-primary .btn .material-icons,
.card > .card-header.health-primary .btn i {
  color: inherit;
}

/* Selo do cabeçalho com ícone: é o único lugar do conteúdo onde o grafite
   cheio aparece — funciona como assinatura da marca em cada card. */
.card .card-header-primary .card-icon,
.card .card-header-primary .card-text,
.card .card-header-primary:not(.card-header-icon):not(.card-header-text),
.card.bg-primary,
.card.card-rotate.bg-primary .front,
.card.card-rotate.bg-primary .back {
  background: var(--brand-gradient);
}

.card .card-header-primary .card-icon,
.card .card-header-primary:not(.card-header-icon):not(.card-header-text),
.card .card-header-primary .card-text {
  box-shadow: var(--elev-2);
}

.card .card-header.card-header-icon .card-icon,
.card .card-header.card-header-text .card-text {
  border-radius: var(--radius-sm);
}

/* Card de indicador (KPI). O tema empurra o número para a direita e o rótulo
   para cima; invertido, lê-se rótulo → número, que é a ordem da leitura. */
.card.card-stats .card-header {
  padding-bottom: 0;
}

.card.card-stats .card-body {
  padding-top: var(--sp-3);
  text-align: left;
}

.card.card-stats .card-category {
  margin: 0 0 var(--sp-2);
}

.card.card-stats .card-title {
  margin: 0;
}

/* ==========================================================================
   06 · BOTÕES
   ========================================================================== */

.btn {
  border-radius: var(--radius-sm);
  padding: 10px var(--sp-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  transition: background-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.btn.btn-sm {
  padding: 6px var(--sp-3);
  font-size: var(--text-xs);
}

.btn.btn-primary,
.fixed-plugin .btn.btn-primary {
  color: var(--brand-white);
  background-color: var(--brand-800);
  border-color: var(--brand-800);
  box-shadow: var(--elev-1);
}

.btn.btn-primary:hover,
.fixed-plugin .btn.btn-primary:hover {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
  box-shadow: var(--elev-2);
}

.btn.btn-primary:focus,
.btn.btn-primary:active,
.fixed-plugin .btn.btn-primary:focus,
.fixed-plugin .btn.btn-primary:active {
  box-shadow: var(--elev-2);
}

/* O `:not(:disabled):not(.disabled)` acompanha a especificidade do Bootstrap,
   que sozinho deixaria o estado ativo em azul. */
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary:not(:disabled):not(.disabled).active,
.open > .btn.btn-primary.dropdown-toggle,
.show > .btn.btn-primary.dropdown-toggle {
  color: var(--brand-white);
  background-color: var(--brand-900);
  border-color: var(--brand-950);
  box-shadow: var(--elev-1);
}

.open > .btn.btn-primary.dropdown-toggle.bmd-btn-icon {
  color: inherit;
  background-color: var(--brand-800);
}

.btn.btn-primary.disabled:focus,
.btn.btn-primary.disabled.focus,
.btn.btn-primary:disabled:focus,
.btn.btn-primary:disabled.focus,
.btn.btn-primary.disabled:hover,
.btn.btn-primary:disabled:hover {
  background-color: var(--brand-800);
  border-color: var(--brand-800);
}

.btn.btn-primary.btn-link,
.btn.btn-primary.btn-link:hover,
.btn.btn-primary.btn-link:focus,
.btn.btn-primary.btn-link:active {
  background-color: transparent;
  color: var(--brand-800);
}

/* Secundário: contorno em grafite. É o par natural do primário sólido num
   sistema sem cor de acento. */
/* O tema declara `.btn { border: none }`, então só definir `border-color` não
   desenha nada — o secundário saía como texto solto. A borda vai completa. */
.btn.btn-outline-primary,
.btn.btn-secondary {
  color: var(--brand-800);
  background-color: transparent;
  border: 1px solid var(--border-strong);
  box-shadow: none;
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary.focus,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary.active,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
  color: var(--brand-900);
  background-color: var(--brand-050);
  border: 1px solid var(--brand-800);
  box-shadow: none;
}

/* Alternador Atendente/Médico da navbar do layout atend_med. Um par de
   botões-contorno que se comportam como um seletor único: o papel ativo é o
   grafite cheio, o outro fica em contorno. */
.role-switcher .btn.btn-outline-primary {
  border-radius: 0;
  padding: 6px var(--sp-3);
  font-size: var(--text-xs);
}

.role-switcher .btn.btn-outline-primary:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.role-switcher .btn.btn-outline-primary:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-left: -1px;
}

.role-switcher .btn.btn-outline-primary.active,
.role-switcher .btn.btn-outline-primary:not(:disabled):not(.disabled).active {
  z-index: 1;
  background-color: var(--brand-800);
  border-color: var(--brand-800);
  color: var(--brand-white);
}

/* Os botões de estado herdam as cores dessaturadas dos tokens — com uma
   exceção medida abaixo, no âmbar. */
.btn.btn-success { background-color: var(--state-success); border-color: var(--state-success); }
.btn.btn-success:hover, .btn.btn-success:focus { background-color: #276b46; border-color: #276b46; }
.btn.btn-danger { background-color: var(--state-danger); border-color: var(--state-danger); }
.btn.btn-danger:hover, .btn.btn-danger:focus { background-color: #97201a; border-color: #97201a; }
/* O âmbar do token foi calibrado para TEXTO sobre fundo claro. Virado do
   avesso — como superfície, com o branco por cima — ele dá 4,43:1, logo
   abaixo do mínimo de 4,5:1. A superfície do botão desce um degrau (5,28:1)
   sem mexer no token, que continua servindo o chip de estado e a barra da
   agenda. */
.btn.btn-warning { background-color: #96600f; border-color: #96600f; }
.btn.btn-warning:hover, .btn.btn-warning:focus { background-color: #7d4f0c; border-color: #7d4f0c; }
.btn.btn-info { background-color: var(--state-info); border-color: var(--state-info); }
.btn.btn-info:hover, .btn.btn-info:focus { background-color: #324b59; border-color: #324b59; }

.btn.btn-success, .btn.btn-danger, .btn.btn-warning, .btn.btn-info {
  color: var(--brand-white);
  box-shadow: var(--elev-1);
}

/* ------------------------- Ações dentro de tabela -----------------------
   Numa lista de 50 pacientes, 50 botões verdes de "editar" e 50 azuis de
   "atender" são a coisa mais forte da tela — e a cor ali não diz nada: são
   ações, não estados. Dentro da tabela elas viram botões neutros de ícone; o
   que continua colorido é só o destrutivo, porque aí a cor é um aviso.
   ---------------------------------------------------------------------- */

.table td .btn.btn-primary,
.table td .btn.btn-info,
.table td .btn.btn-success,
.table td .btn.btn-warning {
  padding: 7px 9px;
  min-width: 0;
  border: 1px solid var(--border-soft);
  background-color: var(--surface-card);
  color: var(--text-body);
  box-shadow: none;
}

.table td .btn.btn-primary:hover,
.table td .btn.btn-info:hover,
.table td .btn.btn-success:hover,
.table td .btn.btn-warning:hover,
.table td .btn.btn-primary:focus,
.table td .btn.btn-info:focus,
.table td .btn.btn-success:focus,
.table td .btn.btn-warning:focus {
  border-color: var(--brand-800);
  background-color: var(--brand-800);
  color: var(--brand-white);
  box-shadow: none;
}

.table td .btn.btn-danger {
  padding: 7px 9px;
  border: 1px solid rgba(179, 38, 30, 0.3);
  background-color: var(--state-danger-soft);
  color: var(--state-danger);
  box-shadow: none;
}

.table td .btn.btn-danger:hover,
.table td .btn.btn-danger:focus {
  background-color: var(--state-danger);
  border-color: var(--state-danger);
  color: var(--brand-white);
}

.table td .btn .material-icons {
  margin: 0;
  font-size: 18px;
}

/* Paginação em links soltos (lista de pacientes carrega por AJAX e imprime
   `.pagina-link` em vez do componente do Bootstrap). */
.pagina-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.pagina-link:hover,
.pagina-link:focus {
  background: var(--brand-050);
  color: var(--text-strong);
}

.pagina-link .material-icons {
  margin: 0;
  font-size: 20px;
}

/* ==========================================================================
   07 · FORMULÁRIOS
   -----------------------------------------------------------------------------
   O Material troca a caixa do campo por um sublinhado que anima no foco.
   Em formulário denso (paciente, anamnese, agendamento) esse sublinhado
   sozinho não delimita o campo — o usuário não sabe onde clicar. Aqui o
   campo volta a ser uma caixa com filete, e o foco é anel + borda grafite.
   ========================================================================== */

.form-group,
.form-group.bmd-form-group {
  padding-top: 0;
  margin-bottom: var(--sp-4);
}

/* O Material transforma o rótulo em placeholder e só o "flutua" para cima
   quando o campo tem foco ou conteúdo. Num cadastro de paciente ou de clínica
   isso deixa metade do formulário sem rótulo visível — quem revisa uma ficha
   preenchida não consegue conferir campo a campo, e quem preenche perde a
   referência assim que digita a primeira letra. Aqui o rótulo é sempre
   estático, acima do campo.

   Os seletores repetem a especificidade do tema
   (`.bmd-form-group [class^='bmd-label']`, que é posicionado em absoluto e
   transladado por JS), senão o rótulo volta a cair dentro do campo. */
label,
.control-label,
.form-group label,
.bmd-form-group [class^='bmd-label'],
.bmd-form-group [class*=' bmd-label'],
.bmd-form-group [class^='bmd-label'].bmd-label-floating,
.bmd-form-group [class*=' bmd-label'].bmd-label-floating,
.bmd-form-group .is-focused [class^='bmd-label'],
.bmd-form-group .is-filled [class^='bmd-label'],
.bmd-form-group .is-focused .bmd-label-floating,
.bmd-form-group .is-filled .bmd-label-floating {
  position: static;
  display: block;
  top: auto;
  left: auto;
  margin-bottom: 6px;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-body);
  line-height: 1.4;
  pointer-events: auto;
  transform: none;
}

.form-control,
.is-focused .form-control,
select.form-control,
textarea.form-control {
  height: auto;
  padding: 10px var(--sp-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background-color: var(--surface-card);
  background-image: none;
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.form-control:focus,
.is-focused .form-control:focus {
  border-color: var(--brand-800);
  background-color: var(--surface-card);
  background-image: none;
  box-shadow: 0 0 0 3px rgba(28, 29, 33, 0.1);
  outline: none;
}

.form-control::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--surface-sunken);
  color: var(--text-muted);
}

select.form-control:not([multiple]):not([size]) {
  /* A seta nativa some quando o Material zera o background-image do select. */
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236d717a'%3e%3cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 16px 16px;
}

.is-focused [class^='bmd-label'],
.is-focused [class*=' bmd-label'] {
  color: var(--brand-800);
}

.form-check .form-check-input:checked ~ .form-check-sign .check,
.form-check .form-check-input:checked ~ .check,
.form-check .form-check-label .circle .check {
  background-color: var(--brand-800);
}

.form-check .form-check-input:checked ~ .circle {
  border-color: var(--brand-800);
}

.togglebutton label input[type='checkbox']:checked + .toggle {
  background-color: rgba(28, 29, 33, 0.5);
}

.togglebutton label input[type='checkbox']:checked + .toggle:after {
  border-color: var(--brand-800);
  background-color: var(--brand-800);
}

.togglebutton label input[type='checkbox']:checked + .toggle:active:after {
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(28, 29, 33, 0.1);
}

/* ==========================================================================
   08 · TABELAS
   -----------------------------------------------------------------------------
   Lista de pacientes e agenda são as telas mais usadas do sistema. Cabeçalho
   em caixa-alta espacejada (ecoando a assinatura da logo), zebra desligada e
   filete só entre linhas: menos traço, mais legibilidade em lista longa.
   ========================================================================== */

.table {
  color: var(--text-body);
  font-size: var(--text-sm);
}

.table > thead > tr > th,
.table th {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  border-top: 0;
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.table > tbody > tr > td,
.table td {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border-hairline);
  font-size: var(--text-sm);
  vertical-align: middle;
}

.table > tbody > tr:hover {
  background-color: var(--surface-sunken);
}

.table .table-actions {
  white-space: nowrap;
  text-align: right;
}

/* Números (valores, quantidades, horários) alinhados por dígito. */
.table .num,
.table .text-right {
  font-variant-numeric: tabular-nums;
}

/* Nome do paciente é a âncora de cada linha — ganha peso, o resto recua. */
.table .cell-primary {
  font-weight: 500;
  color: var(--text-strong);
}

.table .cell-muted {
  color: var(--text-muted);
}

/* ==========================================================================
   09 · BADGES E STATUS
   -----------------------------------------------------------------------------
   Um único vocabulário de status para agenda, prontuário e listas: fundo
   suave + texto na cor do estado. Substitui os `.status-badge`,
   `.status-pending`, `.badge-success` etc. redefinidos página a página.
   ========================================================================== */

.badge {
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge-primary,
.status-chip {
  color: var(--brand-white);
  background-color: var(--brand-800);
}

.badge-primary[href]:hover,
.badge-primary[href]:focus {
  background-color: var(--brand-600);
}

/* Variantes do Bootstrap/Material realinhadas aos tons de estado da marca.
   O amarelo #ffc107 e o verde #28a745 crus destoavam ao lado do grafite — e
   o amarelo ainda obrigava as telas a corrigir o texto com
   `style="color: black"` no HTML. */
/* O `!important` acompanha o das utilidades .bg-* do tema, que sozinhas
   devolveriam o #ffeb3b. */
.badge.badge-success, .badge.bg-success { color: var(--brand-white); background-color: var(--state-success) !important; }
.badge.badge-warning, .badge.bg-warning { color: var(--brand-white); background-color: var(--state-warning) !important; }
.badge.badge-danger,  .badge.bg-danger  { color: var(--brand-white); background-color: var(--state-danger) !important; }
.badge.badge-info,    .badge.bg-info    { color: var(--brand-white); background-color: var(--state-info) !important; }
.badge.badge-secondary, .badge.bg-secondary { color: var(--brand-white); background-color: var(--brand-400) !important; }

/* Dentro de um cabeçalho grafite, um badge âmbar ou verde vira um respingo de
   cor sem função — ali o número já é o assunto. Vira uma pastilha translúcida
   branca, que pertence à superfície em que está. */
.card > [class*='card-header-']:not(.card-header-icon):not(.card-header-text) .badge,
.card > .card-header.health-primary .badge {
  color: var(--brand-white) !important;
  background-color: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Vocabulário de estado — usar estas classes em vez de cores soltas. */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.6;
}

.status-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-chip.is-confirmed,
.status-chip.is-success {
  color: var(--state-success);
  background: var(--state-success-soft);
}

.status-chip.is-pending,
.status-chip.is-warning {
  color: var(--state-warning);
  background: var(--state-warning-soft);
}

.status-chip.is-canceled,
.status-chip.is-danger {
  color: var(--state-danger);
  background: var(--state-danger-soft);
}

.status-chip.is-done,
.status-chip.is-info {
  color: var(--state-info);
  background: var(--state-info-soft);
}

.status-chip.is-neutral {
  color: var(--state-neutral);
  background: var(--state-neutral-soft);
}

/* ==========================================================================
   10 · ALERTAS
   ========================================================================== */

.alert {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-size: var(--text-sm);
}

.alert.alert-primary {
  color: var(--text-strong);
  background-color: var(--brand-050);
  border-color: var(--border-soft);
  border-left: 3px solid var(--brand-800);
  box-shadow: none;
}

.alert.alert-primary i {
  color: var(--brand-800);
}

.alert.alert-success {
  color: var(--state-success);
  background-color: var(--state-success-soft);
  border-color: rgba(46, 125, 82, 0.22);
  border-left: 3px solid var(--state-success);
}

.alert.alert-warning {
  color: var(--state-warning);
  background-color: var(--state-warning-soft);
  border-color: rgba(168, 106, 18, 0.22);
  border-left: 3px solid var(--state-warning);
}

.alert.alert-danger {
  color: var(--state-danger);
  background-color: var(--state-danger-soft);
  border-color: rgba(179, 38, 30, 0.22);
  border-left: 3px solid var(--state-danger);
}

.alert.alert-info {
  color: var(--state-info);
  background-color: var(--state-info-soft);
  border-color: rgba(60, 90, 107, 0.22);
  border-left: 3px solid var(--state-info);
}

.alert i,
.alert .material-icons {
  color: inherit;
}

/* ==========================================================================
   11 · DROPDOWNS, ABAS E PAGINAÇÃO
   ========================================================================== */

.dropdown-menu {
  padding: var(--sp-2);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-3);
  font-size: var(--text-sm);
}

.dropdown-menu .dropdown-header {
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* O nome do usuário abre o menu; o e-mail confirma qual conta está aberta,
   em tom de apoio logo abaixo. */
.dropdown-menu .dropdown-note {
  padding: 0 var(--sp-3) var(--sp-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  word-break: break-all;
}

.dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: var(--text-sm);
}

/* O layout antigo dava margem a TODO .material-icons da página, por um style
   inline global. Aqui o espaçamento fica onde o ícone realmente acompanha um
   texto — sem vazar para ícones de card, tabela e calendário. */
.dropdown-menu .dropdown-item .material-icons,
.btn .material-icons {
  margin: 0;
  font-size: 18px;
  vertical-align: middle;
}

.btn .material-icons {
  margin-right: 6px;
}

.btn.btn-just-icon .material-icons,
.btn.btn-fab .material-icons {
  margin-right: 0;
}

.navbar.bg-primary {
  color: var(--brand-white);
  background-color: var(--brand-800) !important;
  box-shadow: var(--elev-2);
}

.navbar.bg-primary .dropdown-item:hover,
.navbar.bg-primary .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu a:active {
  box-shadow: none;
  background-color: var(--brand-800);
  color: var(--brand-white);
}

/* O item "Sair" continua vermelho mesmo em hover */
.dropdown-menu .dropdown-item.text-danger:hover,
.dropdown-menu .dropdown-item.text-danger:focus {
  background-color: var(--state-danger-soft);
  color: var(--state-danger) !important;
  box-shadow: none;
}

.dropdown-divider {
  margin: var(--sp-2) 0;
  border-color: var(--border-hairline);
}

/* Abas: sublinhado grafite no ativo, sem pílula colorida. */
.nav-tabs {
  border-bottom: 1px solid var(--border-hairline);
}

.nav-tabs .nav-link {
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: none;
}

.nav-tabs .nav-link:hover {
  color: var(--text-strong);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus {
  color: var(--text-strong);
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--brand-800);
}

.nav-pills .nav-item .nav-link {
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: var(--text-sm);
}

.nav-pills .nav-item .nav-link.active {
  background-color: var(--brand-800);
  color: var(--brand-white);
  box-shadow: none;
}

.pagination .page-item .page-link {
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: var(--text-sm);
}

.pagination .page-item.active .page-link {
  background-color: var(--brand-800);
  border-color: var(--brand-800);
  color: var(--brand-white);
  box-shadow: none;
}

/* ==========================================================================
   12 · MODAIS
   ========================================================================== */

.modal-content {
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -20px rgba(13, 14, 17, 0.45);
}

.modal-header {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-hairline);
  background: var(--surface-card);
}

.modal-header .modal-title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  color: var(--text-strong);
}

.modal-body {
  padding: var(--sp-6);
  font-size: var(--text-base);
}

.modal-footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border-hairline);
}

/* Variante grafite para modais de destaque (confirmação, atendimento). */
.modal-header.modal-header-brand,
.modal-health-header {
  background: var(--brand-gradient-135);
  border-bottom: 0;
  color: var(--brand-white);
}

.modal-header.modal-header-brand .modal-title,
.modal-health-header .modal-title {
  color: var(--brand-white);
}

.modal-header.modal-header-brand .close,
.modal-health-header .close {
  color: var(--brand-white);
  opacity: 0.8;
  text-shadow: none;
}

/* ==========================================================================
   13 · CALENDÁRIO (FullCalendar)
   -----------------------------------------------------------------------------
   A agenda é a tela que o consultório deixa aberta o dia inteiro. Os padrões
   do FullCalendar (botões azuis do Bootstrap, grade forte, "hoje" amarelo)
   destoam de tudo o mais — aqui a grade recua e os eventos ficam à frente.
   ========================================================================== */

.fc-toolbar h2 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 500;
  color: var(--text-strong);
  text-transform: capitalize;
}

.fc button,
.fc-button {
  height: auto;
  padding: 7px var(--sp-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  background-image: none;
  box-shadow: none;
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  text-shadow: none;
  text-transform: capitalize;
}

.fc button:hover,
.fc-button:hover {
  background: var(--brand-050);
  color: var(--text-strong);
}

.fc-state-active,
.fc-state-down,
.fc button.fc-state-active {
  background: var(--brand-800);
  background-image: none;
  border-color: var(--brand-800);
  color: var(--brand-white);
  box-shadow: none;
}

.fc-button:focus {
  outline-color: var(--brand-800);
}

.fc-unthemed th,
.fc-unthemed td,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-row {
  border-color: var(--border-hairline);
}

.fc-day-header,
.fc th.fc-day-header {
  padding: var(--sp-3) 0;
  border-color: var(--border-hairline);
  background: var(--surface-sunken);
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.fc-day-number {
  padding: 6px 8px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-body);
}

.fc-today,
.fc-unthemed td.fc-today {
  background: var(--brand-050);
}

.fc-unthemed td.fc-today .fc-day-number {
  color: var(--text-strong);
  font-weight: 700;
}

.fc-axis,
.fc-time-grid .fc-slats td {
  font-size: var(--text-micro);
  color: var(--text-muted);
}

/* -------------------------- Estado da consulta --------------------------
   Os quatro estados por que uma consulta passa. Cada um é um par: o fundo
   claro e o tom cheio saem dos tokens de estado da seção 01 — os mesmos que
   o `.status-chip` e o `.badge` usam, para que a mesma situação tenha a mesma
   cor em qualquer tela do sistema.

   As classes ficam soltas de propósito (não sob `.fc-event`): quem as consome
   é tanto o bloco na grade quanto o quadrinho da legenda acima dela.

   O estado vem de includes/agenda_estado.php, derivado de `confirmado`,
   `chegada` e `finalizado`. Não vem mais da coluna `events.color`, que era o
   que pintava a grade antes — e que, por ser gravada só no instante da ação,
   deixava consulta finalizada verde o dia inteiro.

   Cancelada não aparece aqui porque cancelar apaga o registro
   (procedimentos/proc_apg.php faz DELETE): não há bloco para pintar. */
.evt-agendada   { --evt-soft: var(--state-warning-soft); --evt-strong: var(--state-warning); }
.evt-confirmada { --evt-soft: var(--state-success-soft); --evt-strong: var(--state-success); }
.evt-chegou     { --evt-soft: var(--state-info-soft);    --evt-strong: var(--state-info);    }
/* Finalizada é a única que recua. Com `--state-neutral` (o grafite 400) a
   barra ficava mais escura que as três outras e o que já passou puxava mais
   o olho que o que ainda vai acontecer — o contrário do que a grade serve. */
.evt-finalizada { --evt-soft: var(--state-neutral-soft); --evt-strong: var(--brand-200);     }

/* O bloco cheio de cor com texto branco — o desenho anterior — transformava
   uma manhã cheia num mosaico: quatro consultas seguidas viravam quatro
   retângulos berrantes, e o nome do paciente, que é o que se procura na
   grade, ficava em branco no menor corpo da tela. Além disso âmbar e verde
   tinham luminosidade parecida demais e se confundiam de relance.

   Agora o bloco é claro, o nome é grafite, e quem carrega o estado é a barra
   de 3px à esquerda — que continua legível mesmo para quem não distingue bem
   verde e vermelho, porque a posição e o rótulo da legenda não dependem da
   cor. */
.fc-event.evt,
.fc-day-grid-event.evt,
.fc-time-grid-event.evt {
  padding: 2px 6px;
  border: 1px solid rgba(19, 20, 24, 0.07);
  border-left: 3px solid var(--evt-strong);
  border-radius: 4px;
  background: var(--evt-soft);
  background-color: var(--evt-soft);
  color: var(--text-strong) !important;
  font-size: var(--text-xs);
  font-weight: 400;
  box-shadow: none;
}

.fc-event.evt:hover {
  background-color: var(--evt-soft);
  filter: brightness(0.97);
}

/* Hora e nome saem os dois no preto da marca, em qualquer estado — pedido do
   Dr. José Adailson em 19/08/2026. A hora vinha no tom cheio do estado e o
   texto das finalizadas recuava para cinza; nos dois casos era cor no meio da
   leitura, e o que ele pede desde o começo é enxergar de relance.

   O estado não se perde: continua na barra de 3px, no fundo suave e na
   legenda acima da grade. O que muda é que ele deixa de ser dito também pela
   cor da letra. */
.fc-event.evt .fc-time,
.fc-event.evt .fc-title,
.fc-event.evt-finalizada .fc-time,
.fc-event.evt-finalizada .fc-title {
  color: var(--text-strong);
}

.fc-event.evt .fc-time {
  margin-right: 4px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 1;
}

.fc-event.evt .fc-title {
  font-weight: 500;
}

/* Na visão "Compromissos" o FullCalendar troca o bloco por uma linha com um
   ponto colorido; sem isto o ponto ficaria no azul padrão do plugin. O texto
   ali não passa por `.fc-time`/`.fc-title` — vem herdado da célula — então
   precisa da sua própria regra para acompanhar o preto da grade. */
.fc-list-item.evt td,
.fc-list-item.evt .fc-list-item-time,
.fc-list-item.evt .fc-list-item-title,
.fc-list-item.evt .fc-list-item-title a {
  color: var(--text-strong);
}

.fc-list-item.evt td {
  background: var(--evt-soft);
}

.fc-list-item.evt .fc-event-dot {
  background-color: var(--evt-strong);
}

/* ------------------------------- Legenda -------------------------------
   Cor só informa quando alguém disse o que ela significa — e a agenda não
   tinha legenda nenhuma. Cada item repete, em miniatura, o desenho do bloco
   na grade, para a associação ser imediata. Impressa em
   includes/agenda_estado.php. */
.agenda-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}

.agenda-legenda li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--text-body);
}

.agenda-legenda li::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 1px solid rgba(19, 20, 24, 0.07);
  border-left: 3px solid var(--evt-strong);
  border-radius: 3px;
  background: var(--evt-soft);
}

/* ==========================================================================
   14 · PLUGINS
   ========================================================================== */

/* ---------------------------- SweetAlert2 ------------------------------ */

.swal2-popup {
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
}

.swal2-title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text-strong);
}

.swal2-html-container,
.swal2-content {
  font-size: var(--text-base);
  color: var(--text-body);
}

.swal2-styled {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body);
  font-size: var(--text-sm) !important;
  font-weight: 500;
}

.swal2-styled.swal2-confirm {
  background-color: var(--brand-800) !important;
}

.swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(28, 29, 33, 0.4) !important;
}

.swal2-styled.swal2-cancel {
  background-color: var(--brand-300) !important;
}

/* ------------------------------- Select2 -------------------------------- */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  height: auto;
  min-height: 42px;
  padding: 4px var(--sp-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  padding-left: 4px;
  color: var(--text-strong);
  font-size: var(--text-sm);
  line-height: 32px;
}

.select2-container--default.select2-container--focus
  .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--brand-800);
  box-shadow: 0 0 0 3px rgba(28, 29, 33, 0.1);
}

.select2-dropdown {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-3);
  overflow: hidden;
}

.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--brand-800);
  color: var(--brand-white);
}

.select2-container--default .select2-results__option[aria-selected='true'] {
  background-color: var(--brand-050);
  color: var(--text-strong);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* ==========================================================================
   15 · TELAS DE ACESSO
   -----------------------------------------------------------------------------
   login.php, recuperar_senha.php e resetar_senha.php compartilham a estrutura
   `body.login-page > .page-header + .footer`. Os seletores abaixo assumem
   apenas essa estrutura; os componentes `.login-*` são exclusivos do login.
   Estas telas rodam sobre o Material Kit (não o Dashboard), por isso repetem
   alguns ajustes que o casco autenticado já recebeu acima.
   ========================================================================== */

/* O Material Kit fixa `.page-header { height: 100vh }` e ancora o rodapé com
   `position: absolute; bottom: 0`. Em telas baixas (ou com o teclado virtual
   aberto) o card estoura os 100vh e é cortado, porque o rodapé absoluto se
   apoia no viewport, não no documento. Trocar por uma coluna flex deixa o
   herói crescer e empurra o rodapé para baixo do conteúdo. */
/* O grafite atrás de tudo: com o rodapé fora do herói, é ele que sustenta o
   texto branco de `.login-page .footer` (que, sobre o branco do body, ficava
   invisível). O herói cobre o resto da tela, então só a faixa do rodapé o
   mostra. */
body.login-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--brand-900);
}

body.login-page .page-header {
  flex: 1 0 auto;
  height: auto;
  min-height: 0;
  padding: 48px 0;
  background-position: center center;
  background-size: cover;
}

/* Abaixo de 767px o Material Kit reserva `padding-bottom: 200px` no container
   (espaço para o formulário social que este login não tem). Como quem
   centraliza é o `.page-header` — e ele centraliza o container inteiro, padding
   incluso — os 200px empurravam o card para o topo da tela. */
@media screen and (max-width: 767px) {
  body.login-page .page-header > .container {
    padding-bottom: 0;
  }
}

/* Scrim declarado por completo (content/inset inclusos) em vez de só trocar a
   cor de `.header-filter::before`: a foto de fundo é clara e o véu de 50% do
   Material Kit não dava contraste para o texto branco sob o card. */
body.login-page .page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    160deg,
    rgba(13, 14, 17, 0.82) 0%,
    rgba(13, 14, 17, 0.62) 55%,
    rgba(13, 14, 17, 0.78) 100%
  );
}

body.login-page .footer {
  position: static;
  z-index: 2;
  flex: 0 0 auto;
  padding: 12px 0 18px;
  background: transparent;
}

body.login-page .footer .copyright,
body.login-page .footer .copyright a {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8125rem;
}

body.login-page .footer .copyright a:hover,
body.login-page .footer .copyright a:focus {
  color: var(--brand-white);
}

/* ---------------------------- Card de login ---------------------------- */

/* `.card-login .form { min-height: 420px }` do Material Kit reservava altura
   para um formulário social que não existe aqui, deixando um vão morto abaixo
   dos campos. O padding assimétrico do card-body (0 30px 0 10px) desalinhava
   o conteúdo do card centralizado. */
.card.card-login {
  border-radius: 16px;
  box-shadow: 0 24px 48px -20px rgba(13, 14, 17, 0.55),
    0 8px 24px -12px rgba(13, 14, 17, 0.3);
}

.card.card-login .form {
  min-height: 0;
}

.card.card-login .card-body {
  padding: 0 32px 32px;
}

/* ------------------------ Logo como faixa do card ---------------------- */

/* A placa flutuante do Material Kit (mais estreita que o card, com recuo
   negativo e sombra) não funciona com esta arte: o grafite facetado não é uma
   cor chapada, então a placa lia como um retângulo escuro colado por cima, e
   uma largura de 300px dentro de um card de ~360px é um "quase-toda-a-largura"
   que parece desalinhamento. Aqui ela é uma faixa rente às bordas, com o raio
   superior igual ao do card — logo e card viram uma peça só.
   A arte já é centrada no arquivo (desvio de 1px na horizontal), então o
   alinhamento vem de graça ao ocupar 100% da largura. */
.card.card-login .logo-login-header {
  width: 100%;
  max-width: none;
  margin: 0 0 26px;
  padding: 0;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: var(--brand-900);
  box-shadow: none;
}

.card.card-login .logo-login-image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* ------------------------------ Cabeçalho ------------------------------ */

.card.card-login .login-heading {
  margin-bottom: 24px;
  text-align: center;
}

.card.card-login .login-title {
  margin: 0 0 4px;
  color: var(--brand-900);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.3;
}

.card.card-login .login-subtitle {
  margin: 0;
  color: var(--brand-300);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ---------------------------- Erro inline ------------------------------ */

/* Substitui o popup do SweetAlert para credenciais inválidas: a mensagem fica
   ao lado dos campos que precisam ser corrigidos, sem exigir um clique. */
.card.card-login .login-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 1px solid rgba(244, 67, 54, 0.28);
  border-radius: 10px;
  background: rgba(244, 67, 54, 0.08);
  color: #b3261e;
  font-size: 0.875rem;
  line-height: 1.4;
}

.card.card-login .login-alert .material-icons {
  flex: 0 0 auto;
  font-size: 20px;
}

/* ------------------------------- Campos -------------------------------- */

/* Aqui o campo divide a caixa com um ícone e, na senha, com o botão de
   mostrar/ocultar. Por isso o contorno vive no invólucro — que também recebe
   o anel de foco — e o `.form-control` interno fica sem borda, ao contrário
   do padrão da seção 07. */
.card.card-login .login-field {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--brand-050);
  transition: border-color 0.18s ease, background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.card.card-login .login-field:focus-within {
  border-color: var(--brand-800);
  background: var(--brand-white);
  box-shadow: 0 0 0 3px rgba(28, 29, 33, 0.1);
}

.card.card-login .login-field > .material-icons {
  flex: 0 0 auto;
  color: var(--brand-300);
  font-size: 20px;
  transition: color 0.18s ease;
}

.card.card-login .login-field:focus-within > .material-icons {
  color: var(--brand-800);
}

.card.card-login .login-field .form-control {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--brand-900);
  font-size: 1rem;
  line-height: 1.5;
}

/* O anel de foco vive no invólucro (:focus-within acima); um outline no input
   duplicaria a marcação — daí a supressão da regra global de acessibilidade. */
.card.card-login .login-field .form-control:focus {
  outline: none;
  box-shadow: none;
}

.card.card-login .login-field .form-control::placeholder {
  color: var(--brand-300);
  opacity: 1;
}

/* O autofill do Chrome pinta o input de amarelo e ignora background-color;
   o inset shadow é a única forma de recolorir sem quebrar o autofill. */
.card.card-login .login-field .form-control:-webkit-autofill,
.card.card-login .login-field .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--brand-900);
  box-shadow: 0 0 0 1000px var(--brand-050) inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* --------------------------- Mostrar / ocultar -------------------------- */

.card.card-login .login-toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--brand-300);
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.card.card-login .login-toggle:hover,
.card.card-login .login-toggle[aria-pressed='true'] {
  background: var(--brand-100);
  color: var(--brand-800);
}

.card.card-login .login-toggle .material-icons {
  font-size: 20px;
}

/* ------------------------------- Ações --------------------------------- */

.card.card-login .btn.btn-primary.login-submit {
  display: block;
  width: 100%;
  margin: 24px 0 0;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.card.card-login .btn.btn-primary.login-submit.is-loading {
  opacity: 0.72;
  cursor: progress;
}

.card.card-login .login-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 20px 0 0;
  font-size: 0.8125rem;
}

/* Substitui os handlers onmouseover/onmouseout que faziam a cor no HTML. */
.card.card-login .login-links a {
  color: var(--brand-400);
  text-decoration: none;
  transition: color 0.18s ease;
}

.card.card-login .login-links a:hover,
.card.card-login .login-links a:focus {
  color: var(--brand-900);
  text-decoration: underline;
}

.card.card-login .login-links-sep {
  color: var(--brand-200);
}

/* ------------------- Responsável técnico (fora do card) ---------------- */

.login-page .login-meta {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ----------------------------- Telas estreitas -------------------------- */

@media (max-width: 575.98px) {
  body.login-page .page-header {
    padding: 32px 0;
  }

  .card.card-login .logo-login-header {
    margin-bottom: 20px;
  }

  .card.card-login .card-body {
    padding: 0 20px 24px;
  }
}

/* ==========================================================================
   16 · TEXTO, FUNDOS E UTILITÁRIOS DE MARCA
   ========================================================================== */

.text-primary {
  color: var(--brand-800) !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

.bg-primary {
  background-color: var(--brand-800) !important;
}

a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: var(--brand-600) !important;
}

/* Superfície grafite reutilizável (faixas, cabeçalhos de impressão, painel
   de chamada de paciente). */
.brand-surface {
  background: var(--brand-gradient-135);
  color: var(--text-inverse);
}

.brand-surface h1,
.brand-surface h2,
.brand-surface h3,
.brand-surface .card-title {
  color: var(--text-inverse);
}

/* Régua fina entre blocos de conteúdo — o equivalente gráfico do traço da
   logo, que é sempre 1px e nunca preenchido. */
.brand-rule {
  height: 1px;
  margin: var(--sp-6) 0;
  border: 0;
  background: var(--border-hairline);
}

.brand-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Avatar de iniciais.
   Oito telas — inclusive o prontuário e a tela de atendimento — mostravam
   `assets/img/faces/marc.jpg`, uma foto de banco de imagens que vinha no
   template Material. Ou seja: a mesma pessoa desconhecida aparecia como rosto
   de TODO paciente da clínica. O disco grafite com as iniciais repete o gesto
   do monograma da logo, não inventa um rosto e ainda diferencia um paciente
   do outro. */
.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border: 4px solid var(--surface-card);
  border-radius: 50%;
  background: var(--brand-gradient-135);
  color: var(--brand-white);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: var(--elev-2);
}

.avatar-initials.avatar-lg {
  width: 128px;
  height: 128px;
  font-size: 2.75rem;
}

.avatar-initials.avatar-sm {
  width: 40px;
  height: 40px;
  border-width: 0;
  font-size: var(--text-sm);
}

/* Estado vazio: lista sem resultado deve dizer isso com calma, não com uma
   tabela vazia de cabeçalho órfão. */
.empty-state {
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
  color: var(--text-muted);
}

.empty-state .material-icons {
  margin-bottom: var(--sp-3);
  font-size: 44px;
  color: var(--text-faint);
}

.empty-state .empty-state-title {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  color: var(--text-body);
}

.empty-state p {
  margin: 0;
  font-size: var(--text-sm);
}

/* ==========================================================================
   17 · TELAS ESTREITAS, ACESSIBILIDADE E IMPRESSÃO
   ========================================================================== */

@media (max-width: 991.98px) {
  .main-panel {
    width: 100%;
  }

  .main-panel > .content,
  .main-panel > .dashboard-container {
    padding: var(--sp-4);
  }

  .card .card-body,
  .card .card-header {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  .modal-body,
  .modal-header,
  .modal-footer {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  /* Fora do desktop o tema desliza a sidebar por cima do conteúdo; a sombra
     é o que separa as duas superfícies claras enquanto ela está aberta. */
  .sidebar,
  .sidebar[data-background-color] {
    box-shadow: var(--elev-3);
  }

  /* Só no mobile o tema estende um véu #282828 por cima da sidebar
     (`.sidebar::before`), feito para o drawer escuro do template. Enquanto a
     sidebar era grafite ele passava despercebido; sobre a sidebar clara ele
     apagava o menu inteiro — o texto, agora grafite, sumia contra o véu. */
  .sidebar::before,
  .sidebar[data-background-color]::before {
    display: none;
  }
}

@media (max-width: 575.98px) {
  :root {
    --text-display: 1.625rem;
    --text-h1: 1.3125rem;
  }

  .main-panel > .content,
  .main-panel > .dashboard-container {
    padding: var(--sp-3);
  }

  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding: var(--sp-2) var(--sp-3);
  }
}

/* Anel de foco visível em qualquer superfície — grafite sobre claro. */
.nav-link:focus,
.btn:focus,
.form-control:focus,
.fc-button:focus,
.dropdown-item:focus {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

.sidebar .nav li > a:focus-visible {
  outline: 2px solid var(--sidebar-focus-ring);
  outline-offset: -2px;
}

/* O anel só deve aparecer para quem navega por teclado; o clique já tem o
   próprio retorno visual (hover/active). */
.btn:focus:not(:focus-visible),
.nav-link:focus:not(:focus-visible),
.dropdown-item:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------ Impressão ------------------------------
   Atestado, receita e prontuário saem em papel timbrado do consultório. O
   casco (sidebar, navbar, botões) não deve existir na folha. */

@media print {
  .sidebar,
  .navbar,
  .main-panel > .navbar,
  .footer,
  .btn,
  .fixed-plugin,
  .no-print {
    display: none !important;
  }

  .main-panel {
    width: 100% !important;
    margin: 0 !important;
    background: #fff !important;
  }

  .main-panel > .content {
    padding: 0 !important;
  }

  .card {
    border: 0 !important;
    box-shadow: none !important;
  }

  body {
    color: #000;
    font-size: 12pt;
  }
}