/* Integral Clínica — tema */
@font-face {
  font-family: 'Branding';
  src: url('../fonts/BrandingSF-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Branding';
  src: url('../fonts/BrandingSF-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Branding';
  src: url('../fonts/BrandingSF-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Branding';
  src: url('../fonts/BrandingSF-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Marca — vinho é o único acento: item ativo, ação primária, número que
     exige decisão. Fora disso o painel é branco e areia. */
  --vinho: #a9153d;
  --vinho-claro: #c11947;
  --vinho-escuro: #7d0f2c;
  --vinho-profundo: #3d0614;
  --vinho-10: #f6e3e9;
  --vinho-4: #fdf6f8;
  --marfim: #f7f1ec;

  /* Neutros quentes */
  --texto: #2b2b2f;
  --texto-2: #4a4a52;
  --texto-3: #6b6b73;
  --texto-4: #8d7c80;
  --texto-5: #a08b90;
  --texto-off: #c3b9bc;
  --borda: #ece5e2;
  --borda-campo: #e3dcd8;
  --divisor: #f8f4f2;
  --areia: #f4efec;
  --areia-2: #faf6f4;
  --superficie: #ffffff;

  /* Semânticas — nunca o vinho para erro */
  --ok: #1a7f4b;
  --ok-bg: #eef7f1;
  --erro: #c0392b;
  --erro-bg: #fbeceb;
  --alerta: #92660a;
  --alerta-bg: #fdf6e7;
  --info: #1b5fa8;
  --info-bg: #eef4fb;

  /* Forma — um raio por peça, sem genérico solto */
  --r-badge: 6px;
  --r-campo: 10px;
  --r-botao: 11px;
  --r-cartao: 14px;

  /* Elevação — cartão de conteúdo não tem sombra, só borda; sombra fica
     reservada a elemento que flutua de verdade (menu suspenso, modal, login) */
  --sombra-sm: 0 1px 2px rgba(43,43,47,.05);
  --sombra: 0 1px 2px rgba(43,43,47,.05), 0 18px 44px -18px rgba(125,15,43,.28);
  --sombra-md: 0 4px 16px rgba(43,43,47,.10);

  --ff: 'Branding', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Modo escuro — variáveis de domínio (o Tabler já resolve as suas próprias
   via data-bs-theme; aqui só adaptamos as nossas: cards/tabelas/badges caseiros). */
[data-bs-theme="dark"] {
  --vinho-10: rgba(169, 21, 61, .22);
  --vinho-4: rgba(169, 21, 61, .1);
  --texto: #e8e6ea;
  --texto-2: #cfc9cb;
  --texto-3: #98979f;
  --texto-4: #8f8489;
  --texto-5: #8f8489;
  --texto-off: #5a565a;
  --borda: #32343b;
  --borda-campo: #3a3c44;
  --divisor: #24272e;
  --areia: #14161b;
  --areia-2: #1c1f26;
  --superficie: #1c1f26;

  --ok: #35c07a;
  --ok-bg: rgba(53, 192, 122, .16);
  --erro: #e2574a;
  --erro-bg: rgba(226, 87, 74, .16);
  --alerta: #e0ac3f;
  --alerta-bg: rgba(224, 172, 63, .16);
  --info: #5b9fe0;
  --info-bg: rgba(91, 159, 224, .16);

  --sombra-sm: 0 1px 2px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.2);
  --sombra: 0 1px 3px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  --sombra-md: 0 4px 16px rgba(0,0,0,.35);
}

/* .icon cobre 2 casos: ícones outline (webfont Tabler Icons, tag <i>, tamanho via
   font-size) e ícones ilustrados/marca (SVG inline, tamanho via width/height).
   display:inline-flex + align/justify-content:center em vez de inline-block:
   glifo de webfont é posicionado pela métrica de baseline da fonte (ascent/
   descent), que não é visualmente simétrica — isso faz o ícone parecer "fora
   do centro" dentro de círculos/botões pequenos (avatar, toggle de tema).
   Centralizar via flexbox ignora a métrica da fonte e centra a caixa real. */
.icon {
  width: 1.2em; height: 1.2em; font-size: 1.2em; display: inline-flex;
  align-items: center; justify-content: center; vertical-align: -0.22em;
  flex-shrink: 0; stroke: currentColor; line-height: 1;
}
.icon-sm { width: 1em; height: 1em; font-size: 1em; vertical-align: -0.15em; }
.icon-lg { width: 1.6em; height: 1.6em; font-size: 1.6em; vertical-align: -0.3em; }
.icon-xl { width: 3.4em; height: 3.4em; font-size: 3.4em; vertical-align: -0.5em; }
.icon-ilustrado { stroke: none; }

/* Destaque grande de seção (painéis de Fisioterapia / Depilação a Laser) */
.pagina-destaque { display: flex; align-items: center; gap: 18px; }
.pagina-destaque .icon-xl { flex-shrink: 0; color: var(--vinho); background: var(--vinho-10);
  border-radius: 18px; padding: 12px; box-sizing: content-box; }

* { box-sizing: border-box; }
/* Em páginas com barra de rolagem vertical (a maioria), alguns navegadores no
   Linux centralizam a caixa do <html>, abrindo uma folga simétrica nas duas
   bordas — é o que descolava a sidebar fixa da topbar só nas telas mais
   compridas (ex: Mensagens). margin:0 trava a caixa encostada na esquerda. */
html { -webkit-text-size-adjust: 100%; margin: 0; }
body {
  margin: 0; font-family: var(--ff); color: var(--texto);
  background: var(--areia); font-weight: 300; line-height: 1.5;
}
a { color: var(--vinho); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3 { font-weight: 600; line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.65rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

/* ===== Menu lateral (navbar-vertical do Tabler, com identidade própria por
   cima) — cada link ganha respiro e o item ativo vira uma pílula vinho sólida
   (não um tom claro), em vez do sublinhado padrão do framework. */
.sidebar-clinica.navbar-vertical {
  width: 232px; border-right: 1px solid var(--borda); box-shadow: none; background: var(--superficie);
  /* A barra do Tabler é overflow-y:scroll (trilho sempre visível, mesmo sem
     precisar rolar) — aqui vira auto e some da vista, sem perder o scroll. */
  overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.sidebar-clinica.navbar-vertical::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* O Tabler fixa a largura padrão (15rem) tanto na sidebar quanto na margem do
   page-wrapper que abre espaço pra ela, usando um seletor de 3 classes
   (.navbar-expand-lg.navbar-vertical ~ .page-wrapper) — precisa da mesma
   especificidade aqui, senão o 232px da sidebar perde pro 15rem do framework
   mesmo carregando depois (é o que causava o desalinho entre sidebar e topbar). */
@media (min-width: 992px) {
  .navbar-expand-lg.sidebar-clinica ~ .page-wrapper { margin-left: 232px; }
}
/* Mesma altura da topbar (60px), sem borda própria — a única linha horizontal
   ali é a border-bottom da topbar, que atravessa a largura toda; com as duas
   desenhando borda, o canto lia como dois blocos encostados, não uma peça só. */
.sidebar-clinica .navbar-brand {
  height: 60px; padding: 0 18px; display: flex; align-items: center; box-sizing: border-box;
}
.sidebar-clinica .navbar-brand img { height: 24px; }
.sidebar-clinica .navbar-nav { padding: 4px 10px 18px; gap: 2px; }
.sidebar-clinica .nav-item { margin: 0; }
.sidebar-clinica .nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 12px; border-radius: var(--r-campo); min-height: 44px; box-sizing: border-box;
  color: var(--texto-3); font-size: .9rem; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.sidebar-clinica .nav-link:hover { background: var(--areia-2); color: var(--texto); }
.sidebar-clinica .nav-link.active { background: var(--vinho); color: #fff; font-weight: 600; }
.sidebar-clinica .nav-link-icon {
  width: 19px; height: 19px; margin: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-clinica .nav-link .badge { margin-left: auto; background: var(--areia); color: var(--texto-3); }
.sidebar-clinica .nav-link.active .badge { background: rgba(255,255,255,.25); color: #fff; }

/* Rótulo de grupo no menu lateral (ex: "Atendimento", "Registros") — divide
   os itens em blocos, no lugar do separador único "Configurações" de antes. */
.sep {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--texto-5); margin: 14px 12px 5px; font-weight: 600;
}

/* Topbar fixa acima do conteúdo (abaixo da navbar-vertical do Tabler). Os
   controles internos vão a 44px (alvo de toque mínimo); sobra 8px de respiro
   acima/abaixo dentro dos 60px de altura da barra. */
.topbar-clinica {
  position: sticky; top: 0; z-index: 10; background: var(--superficie);
  height: 60px; padding: 0 20px; gap: 10px;
}

/* Botão de ícone da topbar (tema claro/escuro, atalhos, sino) — tamanho fixo e
   alinhamento central, sem depender das classes .btn do Bootstrap (que
   trazem padding pensado para texto, não para um ícone sozinho). */
.btn-topbar-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-campo);
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-3);
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.btn-topbar-icon:hover { background: var(--areia); color: var(--texto); }

/* Menu do usuário (avatar + nome) na topbar, com dropdown de logout —
   substitui o antigo par "nome solto + botão Sair" grudados um no outro. */
.user-menu-toggle {
  display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; height: 44px;
  border-radius: 999px; color: var(--texto); border: 1px solid var(--borda);
  transition: background .15s ease, border-color .15s ease; cursor: pointer;
}
.user-menu-toggle:hover { background: var(--areia); text-decoration: none; }
.user-menu-avatar { width: 34px; height: 34px; background: var(--vinho-10); color: var(--vinho); font-weight: 700; font-size: .78rem; }
.user-menu-nome { font-size: .85rem; font-weight: 500; }

/* Busca global da topbar */
.topbar-busca {
  display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px;
  border-radius: var(--r-campo); background: var(--areia-2); color: var(--texto-5);
  flex: 1; max-width: 300px; font-size: .87rem; border: none;
}
.topbar-busca input {
  border: none; background: transparent; outline: none; flex: 1; font: inherit; color: var(--texto);
}
.topbar-busca input::placeholder { color: var(--texto-5); }

/* Botão "Agendar" da topbar — a ação primária sempre visível */
.btn-topbar-agendar {
  display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px;
  border-radius: var(--r-campo); background: var(--vinho); color: #fff;
  font-size: .85rem; font-weight: 600; border: none; white-space: nowrap;
}
.btn-topbar-agendar:hover { background: var(--vinho-escuro); color: #fff; text-decoration: none; }

/* Sino de notificação com indicador de pendência */
.btn-topbar-icon.tem-pendencia { position: relative; }
.btn-topbar-icon.tem-pendencia::after {
  content: ''; position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; border-radius: 99px; background: var(--vinho);
  box-shadow: 0 0 0 2px var(--superficie);
}

/* Menu suspenso (sino, usuário) — CSS puro reagindo à classe .aberto, que o
   toggle de ~15 linhas em app-ui.js liga/desliga. Sem data-bs-toggle: um
   painel flutuante de verdade é o único lugar da topbar que leva sombra. */
.menu-suspenso { position: relative; }
.menu-suspenso-painel {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  min-width: 280px; max-width: 340px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--r-cartao); box-shadow: var(--sombra-md);
  overflow: hidden;
}
.menu-suspenso.aberto .menu-suspenso-painel { display: block; }
.menu-suspenso-cabecalho {
  padding: 14px 16px; border-bottom: 1px solid var(--divisor);
  font-weight: 600; font-size: .9rem;
}
.menu-suspenso-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  color: var(--texto); font-size: .88rem; border-bottom: 1px solid var(--divisor);
  min-height: 44px; box-sizing: border-box;
}
.menu-suspenso-item:last-child { border-bottom: none; }
.menu-suspenso-item:hover { background: var(--areia); text-decoration: none; }
.menu-suspenso-vazio { padding: 22px 16px; text-align: center; color: var(--texto-4); font-size: .87rem; }

/* Cartão de link público no rodapé da sidebar */
.sidebar-link-publico {
  margin-top: 14px; background: var(--areia-2); border-radius: var(--r-cartao); padding: 12px 13px;
}
.sidebar-link-publico-rotulo {
  display: flex; align-items: center; gap: 7px; color: var(--texto-3);
  font-weight: 600; font-size: .78rem; margin-bottom: 7px;
}
.sidebar-link-publico-url {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-campo);
  padding: 8px 10px; font-size: .73rem; color: var(--vinho); min-height: 44px; box-sizing: border-box;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Faixa de saudação do Início — data, nome e próximo atendimento à esquerda,
   três contadores à direita separados por traço. Único lugar do painel (fora
   da topbar) onde o vinho vira fundo cheio, porque é a "capa" do dia. */
.faixa-saudacao {
  display: flex; align-items: stretch; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--r-cartao); overflow: hidden;
}
.faixa-saudacao-texto {
  flex: 1.5; position: relative; overflow: hidden; padding: 18px 22px; color: var(--marfim);
  background: linear-gradient(105deg, var(--vinho) 0%, var(--vinho-escuro) 100%);
}
.faixa-saudacao-texto::before {
  content: ''; position: absolute; inset: 0; background: url('../img/pattern-1.svg') repeat;
  background-size: 220px; opacity: .09; mix-blend-mode: screen;
}
.faixa-saudacao-texto::after {
  content: ''; position: absolute; right: -46px; top: -58px; width: 190px; height: 190px;
  background: url('../img/selo-marfim.svg') no-repeat center/contain; opacity: .14;
}
.faixa-saudacao-data {
  position: relative; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 600; opacity: .8;
}
.faixa-saudacao-nome { position: relative; font-size: 1.28rem; font-weight: 700; letter-spacing: -.015em; margin-top: 2px; }
.faixa-saudacao-proximo { position: relative; font-size: .85rem; opacity: .88; margin-top: 2px; }
.faixa-saudacao-contadores { flex: 1; display: flex; align-items: center; }
.faixa-saudacao-item { flex: 1; padding: 12px; text-align: center; }
.faixa-saudacao-item .num { font-size: 1.55rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.faixa-saudacao-item .num.destaque { color: var(--vinho); }
.faixa-saudacao-item .rotulo {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-4);
  font-weight: 600; margin-top: 5px;
}
.faixa-saudacao-sep { width: 1px; background: var(--divisor); align-self: center; height: 34px; }

/* Fila de "mensagens de hoje" — quatro linhas, mesma forma pro whatsapp resumir. */
.fila-mensagem {
  display: flex; align-items: center; gap: 11px; padding: 11px 16px;
  border-bottom: 1px solid var(--divisor);
}
.fila-mensagem:last-child { border-bottom: none; }
.fila-mensagem .icon { flex: none; color: var(--texto-4); }
.fila-mensagem-texto { flex: 1; font-size: .89rem; }
.fila-mensagem-texto b { font-weight: 600; }
.fila-mensagem-texto span { color: var(--texto-4); }

/* Cabeçalho de página (título + ações, ex: "Início" + botão "Novo agendamento")
   — o Tabler define `.page-wrapper .page-header { margin: var(--tblr-page-padding-y) 0 0 }`,
   ou seja, margem só em cima; embaixo fica 0 e o conteúdo seguinte gruda nele.
   Precisa do mesmo escopo (.page-wrapper .page-header) pra vencer a especificidade. */
.page-wrapper .page-header { margin-bottom: 1.5rem; }

/* Grade própria para blocos lado a lado. Nome em português de propósito: o
   Bootstrap 5 também define uma classe .grid, e a dele fixa grid-template-rows,
   o que quebraria qualquer bloco com mais itens do que colunas. */
.grade { display: grid; gap: 16px; }
.grade.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grade.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grade.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Foco visível por teclado (Tab) — não aparece no clique de mouse */
summary:focus-visible { outline: 2px solid var(--vinho); outline-offset: 2px; }

fieldset { border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; margin: 0 0 16px; }
legend { color: var(--vinho); font-weight: 600; padding: 0 6px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.checks label { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.checks input { width: auto; }

/* Seletor múltiplo em "chip" (combo de áreas do laser, etc.): checkbox escondido
   (.btn-check do Tabler) + label estilizado como botão que alterna de estado. */
.chips-areas { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-areas label { margin: 0; cursor: pointer; }

/* Tabelas: a base (zebra, hover, padding) vem do .table do Tabler. Aqui só o
   cabeçalho fixo, que o framework não traz e as listas longas precisam. */
.table-responsive thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--tblr-card-bg, var(--superficie));
}

/* Badges */
/* Badges de domínio (tipo/status) — a base visual (padding, radius, font) vem do
   .badge do Tabler; aqui só sobrepomos cor de fundo/texto por variante. */
.badge.sus { background: var(--info-bg); color: var(--info); }
.badge.particular { background: var(--vinho-10); color: var(--vinho); }
.badge.solicitado { background: var(--alerta-bg); color: #92660a; }
.badge.confirmado { background: var(--info-bg); color: var(--info); }
.badge.realizado { background: var(--ok-bg); color: var(--ok); }
.badge.faltou, .badge.cancelado { background: #f3e3e3; color: #a33; }
.badge.alerta { background: var(--alerta-bg); color: #92660a; }
a.badge.alerta:hover { text-decoration: underline; }

/* Status da fila de mensagens (Fase 9) — estados honestos: só o clique real
   no link de confirmação vira "aberta"/"confirmada", nada de visto duplo. */
.badge.pendente { background: var(--areia-2); color: var(--texto-3); }
.badge.enviada { background: var(--info-bg); color: var(--info); }
.badge.aberta { background: var(--vinho-10); color: var(--vinho); }
.badge.confirmada { background: var(--ok-bg); color: var(--ok); }
.badge.remarcar { background: var(--alerta-bg); color: #92660a; }
.badge.sem_resposta { background: #f3e3e3; color: #a33; }

/* Painéis de Fisioterapia / Laser — a linha do pacote na lista */
.hub-area { color: var(--vinho); font-weight: 600; font-size: .85rem; }

/* Progresso do tratamento — verde quando chega ao fim */
.progress.completo .progress-bar { background: var(--ok); }

/* Botão de WhatsApp: cor da marca deles, não da clínica */
.btn-whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.btn-whatsapp:hover, .btn-whatsapp:focus { background: #1eb658; border-color: #1eb658; color: #fff; }

/* ===================================================================
   Fase 3 — biblioteca de componentes. Cada peça daqui é montada pelas
   telas seguintes, não usada ainda por nenhuma view existente.
   =================================================================== */

/* Avatar de iniciais — usado por ui_avatar(). Cor bate com o badge do tipo
   de atendimento, então a cor já informa particular/SUS antes do nome. */
.avatar-iniciais {
  width: 42px; height: 42px; border-radius: 99px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem;
}
.avatar-particular { background: var(--vinho-10); color: var(--vinho); }
.avatar-sus { background: var(--info-bg); color: var(--info); }

/* Chip de filtro — 38px é a única exceção ao alvo de toque de 44px, porque
   nunca é a ação principal e sempre aparece em grupo com outros chips. */
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px;
  border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-2); font-size: .85rem; font-weight: 500; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { text-decoration: none; background: var(--areia-2); }
.chip.ativo { background: var(--vinho); border-color: var(--vinho); color: #fff; font-weight: 600; }
.chip .chip-contagem { opacity: .75; }
.chip.ativo .chip-contagem { background: rgba(255,255,255,.25); border-radius: 99px; padding: 1px 7px; opacity: 1; }

/* Linha de lista — avatar, nome com etiquetas, segunda linha de contexto e
   até 3 ações de 44px. O estado (em curso, atrasado) marca a linha inteira
   com faixa lateral de 3px + fundo a 4%, nunca só texto colorido. */
.linha-lista {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-bottom: 1px solid var(--divisor);
}
.linha-lista:last-child { border-bottom: none; }
.linha-lista-corpo { flex: 1; min-width: 0; }
.linha-lista-nome { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: .94rem; }
.linha-lista-contexto { color: var(--texto-3); font-size: .84rem; margin-top: 1px; }
.linha-lista-acoes { display: flex; gap: 7px; flex: none; }
.linha-lista.destaque { background: var(--vinho-4); box-shadow: inset 3px 0 0 var(--vinho); }

/* Barra de progresso fina, para dentro de um cartão (pacote de sessões, etc.) */
.progress-fino { height: 6px; border-radius: 99px; background: var(--vinho-10); overflow: hidden; }
.progress-fino > span { display: block; height: 100%; background: var(--vinho); }
.progress-fino.completo > span { background: var(--ok); }

/* Aviso de página — faixa lateral colorida, ícone e mensagem; diferente do
   toast (que é escuro, flutua e some sozinho). Variante via .aviso-ok/-alerta/-erro. */
.aviso {
  display: flex; align-items: flex-start; gap: 11px; border: 1px solid var(--borda);
  border-left: 3px solid var(--texto-4); border-radius: 11px; padding: 12px 14px;
}
.aviso .icon { flex: none; margin-top: 1px; color: var(--texto-4); }
.aviso-titulo { font-weight: 600; font-size: .9rem; }
.aviso-texto { color: var(--texto-3); font-size: .85rem; margin-top: 1px; }
.aviso-ok { border-left-color: var(--ok); } .aviso-ok .icon { color: var(--ok); }
.aviso-alerta { border-left-color: var(--alerta); } .aviso-alerta .icon { color: var(--alerta); }
.aviso-erro { border-left-color: var(--erro); } .aviso-erro .icon { color: var(--erro); }

/* Estado vazio ilustrado — usado por ui_vazio(). O .empty simples (linha 336)
   continua existindo pra lista pequena que não precisa de tanto peso visual. */
.vazio { text-align: center; padding: 40px 20px; }
.vazio-icone {
  width: 64px; height: 64px; border-radius: 99px; background: var(--vinho-10);
  color: var(--vinho); display: grid; place-items: center; margin: 0 auto 16px;
}
.vazio-icone .icon { width: 1.7em; height: 1.7em; font-size: 1.7em; }
.vazio-titulo { font-size: 1rem; font-weight: 600; margin-bottom: 5px; }
.vazio-contexto { color: var(--texto-3); font-size: .87rem; margin: 0 0 16px; }

/* Esqueleto de carregamento — só entra em cena depois de ~300ms de espera
   (é o JS que decide isso; aqui é só a forma e a animação do brilho). */
@keyframes skel { 0% { background-position: -320px 0; } 100% { background-position: 320px 0; } }
.skeleton {
  display: block; border-radius: 99px; background: linear-gradient(90deg, var(--divisor) 25%, var(--areia-2) 50%, var(--divisor) 75%);
  background-size: 320px 100%; animation: skel 1.2s infinite linear;
}
.skeleton-linha { height: 12px; }
.skeleton-avatar { width: 42px; height: 42px; border-radius: 99px; flex: none; }

/* Sanfona — <details><summary>, sem JS. Só para conteúdo longo com grupos
   (avaliação funcional, termo de consentimento); contador sempre visível. */
details.sanfona { border: 1px solid var(--borda); border-radius: var(--r-cartao); overflow: hidden; }
details.sanfona + details.sanfona { border-top: none; border-radius: 0; }
details.sanfona:first-of-type { border-radius: var(--r-cartao) var(--r-cartao) 0 0; }
details.sanfona:last-of-type { border-radius: 0 0 var(--r-cartao) var(--r-cartao); }
details.sanfona summary {
  display: flex; align-items: center; gap: 11px; padding: 13px 15px; cursor: pointer;
  font-weight: 600; font-size: .92rem; list-style: none;
}
details.sanfona summary::-webkit-details-marker { display: none; }
details.sanfona summary::before {
  content: ''; width: 18px; height: 18px; flex: none;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23a9153d'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5'/%3E%3C/svg%3E");
  transition: transform .15s ease;
}
details.sanfona[open] summary::before { transform: rotate(90deg); }
details.sanfona summary .sanfona-contagem { margin-left: auto; font-size: .8rem; color: var(--texto-4); font-weight: 600; }
details.sanfona[open] summary { background: var(--vinho-4); }
details.sanfona[open] summary .sanfona-contagem { color: var(--vinho); }
details.sanfona .sanfona-corpo { padding: 0 15px 14px; font-size: .86rem; color: var(--texto-2); line-height: 1.65; border-top: 1px solid var(--divisor); padding-top: 11px; }

/* Dica flutuante — bolha escura no hover/foco, CSS puro via ::after. Nunca
   guarda informação obrigatória: é só explicação de ícone/escala. */
.dica-flutuante { position: relative; display: inline-flex; cursor: help; }
.dica-flutuante::after {
  content: attr(data-dica); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px); background: var(--texto); color: #fff;
  font-size: .78rem; font-weight: 500; border-radius: 8px; padding: 7px 11px;
  white-space: nowrap; max-width: 240px; white-space: normal; width: max-content;
  opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; z-index: 30;
}
.dica-flutuante:hover::after, .dica-flutuante:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Caminho (breadcrumb) — só a partir do segundo nível, texto simples com
   separador em chevron; o item atual é o único em negrito. */
.caminho { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--texto-4); margin-bottom: 14px; }
.caminho a { color: var(--texto-4); }
.caminho a:hover { color: var(--vinho); }
.caminho .icon { font-size: 14px; color: var(--texto-off); }
.caminho .caminho-atual { color: var(--texto); font-weight: 600; }

/* Envio de arquivo — zona de arraste + linha por arquivo escolhido. */
.upload-zona {
  border: 2px dashed var(--borda-campo); border-radius: var(--r-cartao); background: #fcfafa;
  padding: 22px; text-align: center; cursor: pointer; display: block;
}
.upload-zona:hover, .upload-zona.arrastando { border-color: var(--vinho); background: var(--vinho-4); }
.upload-zona .icon { color: var(--vinho); }
.upload-zona-titulo { font-size: .9rem; font-weight: 600; margin-top: 8px; }
.upload-zona-legenda { font-size: .81rem; color: var(--texto-4); margin-top: 3px; }
.upload-zona input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.upload-arquivo {
  display: flex; align-items: center; gap: 11px; border: 1px solid var(--borda);
  border-radius: 11px; padding: 11px 13px; margin-top: 9px;
}
.upload-arquivo-icone {
  width: 38px; height: 38px; border-radius: 9px; background: var(--vinho-10); color: var(--vinho);
  display: grid; place-items: center; flex: none;
}
.upload-arquivo-nome { font-size: .88rem; font-weight: 500; }
.upload-arquivo-meta { font-size: .79rem; color: var(--texto-4); }

/* Seletor de data — substitui o <input type=date> nativo, cujo rolete o
   iPad abre e é difícil de acertar (ver public/assets/js/datepicker.js). */
.data-picker { position: relative; }
.data-picker-painel {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 25;
  width: 280px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-cartao); box-shadow: var(--sombra-md); padding: 14px 16px;
}
.data-picker.aberto .data-picker-painel { display: block; }
.data-picker-cabecalho { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.data-picker-cabecalho span { flex: 1; text-align: center; font-size: .92rem; font-weight: 600; }
.data-picker-nav {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--borda);
  display: grid; place-items: center; color: var(--texto-3); cursor: pointer; background: none;
}
.data-picker-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: .68rem; color: var(--texto-5); text-align: center; margin-bottom: 6px; }
.data-picker-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font-size: .85rem; }
.data-picker-dia {
  height: 34px; display: grid; place-items: center; border-radius: 9px; cursor: pointer; border: none; background: none;
  color: var(--texto);
}
.data-picker-dia:hover { background: var(--areia-2); }
.data-picker-dia.fora { color: var(--texto-off); }
.data-picker-dia.fechado { color: var(--texto-off); cursor: not-allowed; pointer-events: none; }
.data-picker-dia.hoje { border: 1.5px solid var(--vinho); color: var(--vinho); font-weight: 700; }
.data-picker-dia.selecionado { background: var(--vinho); color: #fff; font-weight: 700; }

/* ===================================================================
   Fase 5 — Agenda e Pacientes
   =================================================================== */

/* Cabeçalho de grupo dentro de uma lista (período do dia na agenda, letra
   inicial em pacientes) — mesma peça nos dois lugares. */
.cabecalho-grupo {
  padding: 10px 16px; background: var(--areia-2); border-bottom: 1px solid var(--divisor);
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-4);
}

/* Data grande do dia — maior elemento da tela, com o resumo logo abaixo. */
.agenda-data-nav { display: flex; align-items: center; gap: 6px; }
.agenda-data-nav .btn-topbar-icon { width: 44px; height: 44px; }
.agenda-data-grande { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.agenda-data-resumo { color: var(--texto-3); font-size: .88rem; margin-top: 1px; }

/* Linha de agendamento — status vira fundo a 4% + faixa lateral de 4px,
   nunca só texto colorido (regra 10). */
.linha-agendamento {
  display: flex; align-items: center; gap: 16px; padding: 13px 20px;
  border-bottom: 1px solid var(--divisor);
}
.linha-agendamento:last-child { border-bottom: none; }
.linha-agendamento-hora { width: 56px; flex: none; }
.linha-agendamento-hora .h { font-weight: 700; font-size: 1.02rem; }
.linha-agendamento-hora .min { font-size: .72rem; color: var(--texto-5); }
.linha-agendamento-corpo { flex: 1; min-width: 0; }
.linha-agendamento-nome { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; }
.linha-agendamento-contexto { color: var(--texto-3); font-size: .84rem; margin-top: 1px; }
.linha-agendamento-acoes { display: flex; gap: 7px; flex: none; }

.linha-agendamento.st-solicitado { background: var(--alerta-bg); box-shadow: inset 4px 0 0 var(--alerta); }
.linha-agendamento.st-confirmado { background: var(--info-bg); box-shadow: inset 4px 0 0 var(--info); }
.linha-agendamento.st-realizado  { opacity: .65; }
.linha-agendamento.st-realizado .linha-agendamento-nome { text-decoration: line-through; text-decoration-color: var(--borda); }
.linha-agendamento.st-faltou, .linha-agendamento.st-cancelado { background: var(--erro-bg); box-shadow: inset 4px 0 0 var(--erro); }
.linha-agendamento.agora { background: var(--vinho-4); box-shadow: inset 4px 0 0 var(--vinho); }
.linha-agendamento.agora .linha-agendamento-hora .h { color: var(--vinho); }

/* Buraco de horário — linha hachurada com ação de encaixe da lista de espera. */
.linha-buraco {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  background: repeating-linear-gradient(135deg, var(--areia-2), var(--areia-2) 8px, var(--superficie) 8px, var(--superficie) 16px);
  border-bottom: 1px solid var(--divisor); color: var(--texto-4); font-size: .87rem;
}
.linha-buraco:last-child { border-bottom: none; }
.linha-buraco b { color: var(--texto-3); font-weight: 600; }
.linha-buraco a { font-weight: 600; }
.linha-buraco a:first-of-type { margin-left: auto; }

/* Bloco de aviso/dica dentro de um card */
.bloco-dica { background: var(--vinho-10); border-color: #eec6d1; }
[data-bs-theme="dark"] .bloco-dica { border-color: rgba(169,21,61,.4); }

.muted { color: var(--texto-3); }

/* Estado vazio — ícone de bandeja em cinza claro acima do texto */
.empty { text-align: center; color: var(--texto-3); padding: 36px 20px; font-size: .92rem; }
.empty::before {
  content: ''; display: block; width: 38px; height: 38px; margin: 0 auto 10px; opacity: .3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%236b6b73'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* Telas de erro do sistema (403/404/500) — nada de cartão branco: o desenho
   fica direto sobre o fundo areia, com o selo em marca d'água atrás, no mesmo
   espírito da folha impressa. Cada tela só troca o ícone, o texto e as ações. */
.erro-pagina { position: relative; text-align: center; padding: 24px 16px 8px; max-width: 460px; margin: 0 auto; }
.erro-marca {
  position: absolute; right: -70px; bottom: -80px; width: 280px; height: 280px;
  background: url('../img/selo.svg') no-repeat center/contain; opacity: .05; pointer-events: none; z-index: 0;
}
.erro-ilustracao { width: 210px; height: 126px; margin: 0 auto 14px; display: block; position: relative; z-index: 1; }
/* Ícone em círculo colorido — usado nas telas menores que não têm uma
   ilustração própria (confirmação pública, avisos), mesmo padrão dos modais. */
.erro-icone {
  width: 64px; height: 64px; border-radius: 99px; background: var(--vinho-10);
  color: var(--vinho); display: grid; place-items: center; margin: 0 auto 16px;
  position: relative; z-index: 1;
}
.erro-icone .icon { width: 1.9em; height: 1.9em; font-size: 1.9em; }
.erro-codigo {
  font-size: 3rem; font-weight: 700; color: var(--vinho); letter-spacing: -.03em;
  line-height: 1; position: relative; z-index: 1;
}
.erro-titulo { font-size: 1.4rem; font-weight: 600; margin: 12px 0 8px; position: relative; z-index: 1; }
.erro-mensagem { color: var(--texto-3); font-size: .98rem; margin: 0 0 28px; line-height: 1.6; position: relative; z-index: 1; }
.erro-acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.erro-acoes .btn { min-height: 48px; padding: 0 20px; font-size: .95rem; display: inline-flex; align-items: center; }

/* ===================================================================
   Fase 7 — fluxos em passos (agendamento, paciente, ficha/atendimento).
   =================================================================== */

/* Cabeçalho + rodapé de um <form data-wizard> — uma decisão por tela,
   rodapé fixo com Voltar à esquerda e a ação principal (56px) à direita. */
.wizard-cabecalho {
  position: sticky; top: 60px; z-index: 5; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--r-cartao) var(--r-cartao) 0 0;
  padding: 14px 22px 0; margin-bottom: 0;
}
.wizard-cabecalho-linha { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.wizard-cabecalho-titulo { font-weight: 600; font-size: 1.02rem; }
.wizard-cabecalho-passo { margin-left: auto; font-size: .83rem; color: var(--texto-4); white-space: nowrap; }
.wizard-progresso { display: flex; gap: 6px; padding-bottom: 12px; }
.wizard-progresso span { flex: 1; height: 4px; border-radius: 99px; background: var(--borda); }
.wizard-progresso span.feito { background: var(--vinho); }

.wizard-corpo {
  background: var(--superficie); border: 1px solid var(--borda); border-top: none;
  padding: 22px; min-height: 240px;
}
.wizard-passo-titulo { font-size: 1.35rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -.015em; }
.wizard-passo-legenda { color: var(--texto-3); font-size: .92rem; margin: 0 0 18px; }

.wizard-rodape {
  position: sticky; bottom: 0; z-index: 5; background: var(--superficie);
  border: 1px solid var(--borda); border-top: 1px solid var(--divisor);
  border-radius: 0 0 var(--r-cartao) var(--r-cartao);
  padding: 14px 22px; display: flex; align-items: center; gap: 12px;
}
.wizard-rodape .btn-continuar { margin-left: auto; height: 56px; padding: 0 26px; font-size: 1rem; }
.wizard-rodape .btn-continuar[disabled] { opacity: .45; pointer-events: none; }
.wizard-passo { display: none; }
.wizard-passo.ativo { display: block; }

/* Termo de consentimento com controle de rolagem: "Continuar" só libera
   depois de ler até o fim (ou marcar a caixa), pra assinatura não virar rotina. */
.wizard-scroll-lock { position: relative; max-height: 320px; overflow-y: auto; }
.wizard-scroll-aviso {
  position: sticky; bottom: 8px; margin: 0 auto; width: fit-content;
  background: var(--texto); color: #fff; border-radius: 99px; padding: 7px 14px;
  font-size: .8rem; font-weight: 500; display: flex; align-items: center; gap: 6px;
}
.wizard-scroll-lock.lido .wizard-scroll-aviso { display: none; }

/* Escala EVA de dor */
.eva-wrap { padding: 6px 4px 2px; }
.eva-wrap input[type=range] {
  width: 100%; height: 14px; border-radius: 999px; appearance: none;
  background: linear-gradient(90deg, #2f9e5c 0%, #a5c93a 25%, #f2c94c 50%, #f2994a 75%, var(--vinho) 100%);
}
.eva-wrap input[type=range]::-webkit-slider-thumb {
  appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 3px solid var(--texto); cursor: pointer; margin-top: -6px;
}
.eva-wrap input[type=range]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--texto); cursor: pointer;
}
.eva-scale { display: flex; justify-content: space-between; font-size: .78rem; color: var(--texto-3); padding: 4px 2px 0; }
.eva-bandas { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 600; margin-top: 2px; }
.eva-bandas span:nth-child(1) { color: #2f9e5c; }
.eva-bandas span:nth-child(2) { color: #c98b1c; }
.eva-bandas span:nth-child(3) { color: var(--vinho); }
.eva-valor { font-size: 1.6rem; font-weight: 700; text-align: center; color: var(--vinho); margin-top: 4px; }

/* Assinatura */
.sign-pad { border: 2px dashed var(--borda); border-radius: 12px; background: #fff; touch-action: none; width: 100%; height: 200px; transition: border-color .2s, box-shadow .2s; }
.sign-pad-erro { border-color: var(--vinho) !important; box-shadow: 0 0 0 3px var(--vinho-10); }

/* Fieldset em destaque (ex: assinatura obrigatória logo no topo do form) */
.fieldset-destaque { border: 2px solid var(--vinho-10); background: var(--vinho-10); }
.fieldset-destaque legend { display: flex; align-items: center; gap: 6px; }

/* Anamnese do laser: pergunta | Não/Sim | campo condicional, sempre alinhados */
.anam-linha { display: flex; align-items: center; gap: 14px; padding: 5px 0; border-bottom: 1px solid #f2f0f1; }
.anam-linha:last-child { border-bottom: 0; }
.anam-pergunta { flex: 1 1 auto; min-width: 200px; font-size: .92rem; }
.anam-resposta { flex: 0 0 130px; display: flex; gap: 14px; }
.anam-resposta label { display: flex; align-items: center; gap: 5px; font-weight: 400; white-space: nowrap; }
.anam-resposta input { width: auto; }
.anam-campo { flex: 0 0 210px; }
.anam-campo input { width: 100%; padding: 7px 10px; border: 1px solid var(--borda); border-radius: 8px;
  font-family: var(--ff); font-size: .88rem; background: #fff; color: var(--texto); }
.anam-campo input:focus { outline: none; border-color: var(--vinho); box-shadow: 0 0 0 3px var(--vinho-10); }
@media (max-width: 760px) {
  .anam-linha { flex-wrap: wrap; gap: 8px; }
  .anam-pergunta { flex: 1 1 100%; }
  .anam-campo { flex: 1 1 100%; }
}

/* Termo de consentimento (texto legal, somente leitura) */
.consent-box { background: var(--areia-2); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; max-height: 320px; overflow-y: auto; }
.consent-box ol { margin: 0; padding-left: 20px; }
.consent-box li { font-size: .86rem; color: var(--texto); margin-bottom: 10px; line-height: 1.5; }

/* Mobile — sidebar/toggle são nativos do Tabler (navbar-vertical + collapse).
   A grade reduz em etapas: ir de 4 colunas direto para 1 deixava os cartões
   espremidos em telas médias. */
@media (max-width: 1200px) { .grade.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 992px)  { .grade.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .grade.cols-2, .grade.cols-3, .grade.cols-4 { grid-template-columns: 1fr; }
}

/* Prévia do documento: a folha tem largura de A4 e precisa encolher para caber
   na coluna, sem vazar (o scale antigo cortava a folha em telas médias). */
.doc-previa { container-type: inline-size; overflow-x: auto; }
.doc-previa .doc-page { padding: 0; }
.doc-previa .doc-folha { padding: 28px 32px; min-height: 0; }

/* Documentos — folha timbrada */
.doc-page { max-width: 820px; margin: 0 auto; padding: 20px; }
.doc-toolbar { display: flex; align-items: center; justify-content: space-between;
  background: var(--vinho); color: #fff; padding: 10px 16px; border-radius: 10px; margin-bottom: 16px; font-size: .9rem; }
.doc-toolbar .btn { background: #fff; color: var(--vinho); border-color: #fff; }
.doc-folha {
  position: relative; overflow: hidden; background: #fff;
  border: 1px solid var(--borda); border-radius: 6px;
  box-shadow: var(--sombra); padding: 48px 54px 34px; min-height: 60vh;
  display: flex; flex-direction: column;
}
.doc-marca {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 340px; height: 340px;
  background: url('../img/selo.svg') no-repeat center/contain; opacity: .04; pointer-events: none;
}
.doc-head { display: flex; align-items: center; justify-content: space-between;
  border-bottom: 3px solid var(--vinho); padding-bottom: 14px; margin-bottom: 6px; }
.doc-head img { height: 54px; }
.doc-tipo { color: var(--vinho); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; }
.doc-titulo { font-size: 1.25rem; margin: 24px 0 18px; text-align: center; color: var(--texto); }
.doc-corpo { position: relative; z-index: 1; line-height: 1.9; text-align: justify; font-size: 1.02rem; white-space: pre-wrap; }
.doc-assinatura { margin-top: auto; padding-top: 34px; text-align: center; position: relative; z-index: 1; }
.doc-assinatura img.doc-assinatura-img { max-height: 60px; margin: 0 auto 4px; display: block; }
.doc-cidade-data { margin-bottom: 46px; }
.doc-linha { width: 300px; border-top: 1px solid var(--texto); margin: 0 auto 6px; }
.doc-prof { font-weight: 500; }

.doc-rodape-contato {
  margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--borda);
  text-align: center; font-size: .82rem; color: var(--texto-3); position: relative; z-index: 1;
}

@media (max-width: 820px) {
  .doc-folha { padding: 28px 22px; }
  .doc-rodape-contato { font-size: .74rem; }
}

/* Calendário mensal */
table.cal { table-layout: fixed; }
table.cal th { text-align: center; padding: 8px 4px; }
table.cal td.cal-vazio { background: var(--areia-2); border: 1px solid var(--borda); }
table.cal td.cal-dia { border: 1px solid var(--borda); padding: 0; height: 84px; vertical-align: top; }
table.cal td.cal-dia a { display: block; height: 100%; padding: 6px 8px; color: var(--texto); }
table.cal td.cal-dia a:hover { background: var(--vinho-10); text-decoration: none; }
table.cal td.cal-hoje { background: var(--vinho-10); }
table.cal td.cal-hoje .cal-num { color: var(--vinho); font-weight: 700; }
.cal-num { font-weight: 600; font-size: .9rem; }
.cal-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.cal-badges .badge { padding: 1px 7px; font-size: .7rem; }
@media (max-width: 820px) {
  table.cal td.cal-dia { height: 58px; }
  table.cal th { font-size: .72rem; }
}

/* Linha SUS na agenda — vem depois da zebra para vencer o empate de especificidade */
tbody tr.linha-sus td { background: var(--info-bg); }
tbody tr.linha-sus td:first-child { box-shadow: inset 3px 0 0 var(--info); }
tbody tr.linha-sus:hover td { background: #dce9f7; }

/* Impressão — fichas, documentos e agenda do dia */
@media print {
  .navbar-vertical, .topbar-clinica, .no-print { display: none !important; }
  .page-wrapper { margin-left: 0 !important; }
  .container-xl { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 0; margin-bottom: 12px; }
  body { background: #fff; }

  /* Fundos alternados não fazem sentido no papel */
  .table-responsive thead th { position: static; }
  tbody tr:nth-child(even) td, tbody tr:hover td { background: transparent; }
  /* Mantém a distinção SUS/particular impressa, só que em cinza */
  tbody tr.linha-sus td { background: #f2f2f2 !important; }
  a { color: inherit; text-decoration: none; }

  .doc-toolbar { display: none !important; }
  .doc-page { padding: 0; max-width: none; }
  .doc-folha { box-shadow: none; border: 0; border-radius: 0; padding: 18mm; min-height: 100vh; }
  .doc-corpo { font-size: 10.5pt; }

  /* Badges viram contorno no papel — cor sólida não sobrevive à impressão P&B */
  .badge { background: transparent !important; border: 1px solid currentColor !important; }
}

/* Modo sequência (Fase 9) — barra flutuante que guia o envio um a um */
.sequencia-barra {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 1050; background: var(--vinho); color: #fff; border-radius: var(--r-cartao);
  box-shadow: var(--sombra-md); padding: 12px 16px; display: flex; align-items: center;
  gap: 14px; max-width: calc(100vw - 32px);
}
.sequencia-texto { font-size: .92rem; font-weight: 500; }
.sequencia-acoes { display: flex; gap: 8px; }
.sequencia-barra .btn { display: none; }
.sequencia-barra.sequencia-ativa .btn { display: inline-flex; }