/* ==========================================================================
   medcenter — camada visual do painel

   ---------------------------------------------------------------------------
   A MESMA LINGUAGEM DO LOGIN, EM OUTRO VOLUME
   ---------------------------------------------------------------------------
   A tela de acesso é neumórfica: profundidade por sombra dupla, luz vinda do
   alto à esquerda, azul profundo. O painel herda esse vocabulário — superfície
   com brilho interno no topo, sombra difusa embaixo, destaque com halo — mas
   num volume mais baixo.

   Isso é decisão, não economia. O login é olhado por dez segundos e precisa
   impressionar; o painel é olhado oito horas e precisa deixar ler uma tabela
   de trinta linhas. Relevo forte em cada célula vira ruído e cansa a vista, e
   contraste sacrificado por estética é acessibilidade jogada fora. Então o que
   atravessa é a PALETA e a DIREÇÃO DA LUZ; o que fica para trás é a espessura
   do relevo.

   ---------------------------------------------------------------------------
   COMO O TEMA FUNCIONA
   ---------------------------------------------------------------------------
   Escrito em cima das variáveis do Bootstrap 5.3, que já trocam sozinhas
   quando o <html> recebe data-bs-theme="dark". Aqui elas são REDEFINIDAS para
   um cinza levemente azulado no claro e um azul-noite no escuro — assim o
   painel pertence à mesma família do login sem precisar de uma segunda folha
   espelhada, que na prática sempre desatualiza em relação à primeira.

   --sb-destaque é a cor da empresa, injetada pelo layout. Todo brilho, halo e
   estado ativo deriva dela: um cliente com marca verde recebe um painel verde
   coerente, não um azul com um detalhe verde.

   O prefixo sb- evita colisão com as classes do Bootstrap.
   ========================================================================== */

:root {
  --sb-lateral-largura: 264px;
  --sb-lateral-recolhida: 76px;
  --sb-topo-altura: 64px;
  --sb-raio: 1rem;
  --sb-raio-pequeno: .625rem;
  --sb-raio-grande: 1.25rem;
  --sb-transicao: 180ms cubic-bezier(.4, 0, .2, 1);

  /* Fallback: o layout injeta a cor da empresa por cima desta linha. */
  --sb-destaque: #0d6efd;
  /* Cor legível SOBRE --sb-destaque. O layout injeta o valor certo para a cor
     de cada empresa; branco é só o palpite inicial. Ver Core\Layout. */
  --sb-destaque-texto: #ffffff;

  /* ---------------------------------------------------------------- tema claro
     Branco puro em tudo achata a tela. Um azul quase imperceptível no fundo
     faz o cartão branco parecer flutuar sobre ele — é o mesmo truque do login,
     em dose homeopática. */
  --bs-body-bg: #ffffff;
  --bs-secondary-bg: #eef2f9;
  --bs-tertiary-bg: #f6f8fc;
  --bs-border-color: #dfe5f0;
  --bs-body-color: #16233b;
  --bs-emphasis-color: #0b1729;
  --bs-secondary-color: #5b6880;

  --sb-superficie: #ffffff;
  --sb-superficie-alta: #fbfcfe;
  --sb-luz: rgba(255, 255, 255, .9);
  --sb-sombra-1: rgba(19, 40, 82, .06);
  --sb-sombra-2: rgba(19, 40, 82, .10);
  --sb-sombra-3: rgba(19, 40, 82, .16);
  --sb-linha-suave: rgba(19, 40, 82, .07);
  --sb-fundo-luz: 8%;
  --sb-halo: 22%;
  --sb-link: color-mix(in srgb, var(--sb-destaque) 82%, #000);
  --sb-link-forte: color-mix(in srgb, var(--sb-destaque) 66%, #000);

  /* ------------------------------------------------------- lateral escura
     A navegação fica num tom próprio, mais escuro que o conteúdo: separa o
     "onde eu vou" do "o que estou fazendo" sem precisar de borda grossa, e
     devolve destaque à marca da clínica.

     O escuro NÃO é a cor da empresa pura — é um azul-noite com a cor dela
     misturada em dose pequena. Uma clínica de marca amarela ou verde-limão
     teria texto branco ilegível sobre a própria cor; assim, o tom carrega a
     marca e o contraste continua garantido, qualquer que seja ela. */
  --sb-lateral-topo: color-mix(in srgb, var(--sb-destaque) 16%, #0f1b30);
  --sb-lateral-base: color-mix(in srgb, var(--sb-destaque) 9%, #0a1322);
  --sb-lateral-texto: rgba(255, 255, 255, .88);
  --sb-lateral-suave: rgba(255, 255, 255, .55);
  --sb-lateral-linha: rgba(255, 255, 255, .10);
  --sb-lateral-hover: rgba(255, 255, 255, .08);
}

[data-bs-theme="dark"] {
  /* ---------------------------------------------------------------- tema escuro
     Azul-noite, e não o cinza-quase-preto padrão do Bootstrap: é o que liga o
     painel ao fundo do login. */
  --bs-body-bg: #0d1730;
  --bs-secondary-bg: #081027;
  --bs-tertiary-bg: #111d3c;
  --bs-border-color: #223256;
  --bs-body-color: #dde7fa;
  --bs-emphasis-color: #f2f7ff;
  --bs-secondary-color: #93a3c2;

  --sb-superficie: #101b38;
  --sb-superficie-alta: #16244a;
  --sb-luz: rgba(255, 255, 255, .07);
  --sb-sombra-1: rgba(0, 6, 22, .35);
  --sb-sombra-2: rgba(0, 6, 22, .5);
  --sb-sombra-3: rgba(0, 6, 22, .65);
  --sb-linha-suave: rgba(255, 255, 255, .05);
  --sb-fundo-luz: 14%;
  --sb-halo: 32%;
  --sb-link: color-mix(in srgb, var(--sb-destaque) 55%, #fff);
  --sb-link-forte: color-mix(in srgb, var(--sb-destaque) 35%, #fff);

  /* No escuro o conteúdo já é azul-noite; a lateral desce mais um degrau para
     continuar se distinguindo dele. */
  --sb-lateral-topo: color-mix(in srgb, var(--sb-destaque) 12%, #080f20);
  --sb-lateral-base: color-mix(in srgb, var(--sb-destaque) 6%, #050a16);
  --sb-lateral-texto: rgba(255, 255, 255, .86);
  --sb-lateral-suave: rgba(255, 255, 255, .52);
  --sb-lateral-linha: rgba(255, 255, 255, .08);
  --sb-lateral-hover: rgba(255, 255, 255, .07);
}

* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--bs-body-color);
  min-height: 100vh;
  min-height: 100dvh;

  /* Faixas de luz desfocadas, como no login — mas fixas e discretas: a do
     login respira porque é uma tela só; aqui uma animação de fundo rodaria
     durante o expediente inteiro, gastando bateria por nada. */
  background:
    radial-gradient(1200px 620px at 8% -8%,
      color-mix(in srgb, var(--sb-destaque) var(--sb-fundo-luz), transparent), transparent 62%),
    radial-gradient(900px 520px at 104% 4%,
      color-mix(in srgb, var(--sb-destaque) calc(var(--sb-fundo-luz) / 2), transparent), transparent 58%),
    var(--bs-secondary-bg);
  background-attachment: fixed;
}

/* Foco visível sempre: quem navega por teclado precisa saber onde está. */
:focus-visible {
  outline: 2px solid var(--sb-destaque);
  outline-offset: 2px;
  border-radius: var(--sb-raio-pequeno);
}

/* Barra de rolagem no tom da casa. Firefox usa as duas palavras-chave; os
   demais usam ::-webkit-scrollbar. */
* { scrollbar-width: thin; scrollbar-color: var(--bs-border-color) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  background-color: var(--bs-border-color);
}
::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--sb-destaque) 45%, var(--bs-border-color));
}

/* --------------------------------------------------------------------- links
   O azul de link do Bootstrap sobre branco fica em 4,5:1 — exatamente no
   limite, e qualquer fundo levemente tingido (o cabeçalho de um cartão, uma
   linha de tabela em hover) empurra para baixo dele. Escurecer um pouco no
   tema claro e clarear no escuro tira o texto da corda bamba sem mudar a cor
   percebida.

   Seletor de elemento puro, de propósito: qualquer coisa com classe — .btn,
   .dropdown-item, .nav-link, as migalhas que herdam a cor — continua ganhando
   desta regra, que é o que se quer. */
a { color: var(--sb-link); }
a:hover { color: var(--sb-link-forte); }

/* Atalho para leitores de tela e teclado pularem o menu. */
.sb-pular {
  position: absolute;
  left: -9999px;
  z-index: 1080;
  padding: .75rem 1.25rem;
  background: var(--sb-destaque);
  color: var(--sb-destaque-texto);
  border-radius: 0 0 var(--sb-raio-pequeno) 0;
  text-decoration: none;
}
.sb-pular:focus { left: 0; top: 0; }

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sb-lateral {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1045;
  width: var(--sb-lateral-largura);
  display: flex;
  flex-direction: column;
  border-inline-end: 1px solid var(--sb-lateral-linha);
  transition: width var(--sb-transicao), transform var(--sb-transicao);
  color: var(--sb-lateral-texto);

  /* Degradê vertical curto: o menu ganha corpo sem virar um bloco chapado. */
  background: linear-gradient(180deg, var(--sb-lateral-topo) 0%, var(--sb-lateral-base) 100%);
  box-shadow: 12px 0 34px -26px rgba(0, 0, 0, .55);
}

.sb-marca {
  height: var(--sb-topo-altura);
  flex: 0 0 var(--sb-topo-altura);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-inline: 1.25rem;
  border-block-end: 1px solid var(--sb-lateral-linha);
  overflow: hidden;
  color: #fff;
}

/* O losango da marca recebe o tratamento do login: degradê na diagonal, luz
   interna no topo e sombra colorida embaixo. É o elemento que mais aparece no
   sistema, e o que mais devolve a sensação de acabamento. */
.sb-marca-icone {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--sb-raio-pequeno);
  color: var(--sb-destaque-texto);
  font-size: 1rem;
  background: linear-gradient(160deg,
    var(--sb-destaque) 0%,
    color-mix(in srgb, var(--sb-destaque) 84%, #000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 5px rgba(0, 0, 0, .18),
    0 0 0 1px rgba(255, 255, 255, .14),
    0 6px 16px -6px color-mix(in srgb, var(--sb-destaque) 70%, transparent);
}

.sb-marca-texto {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem .75rem;

  /* A barra de rolagem global é cinza-claro, pensada para fundo claro; aqui
     ela precisa ser clara-transparente para não virar um risco branco. */
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-color: transparent; }
.sb-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .32); }

/* ------------------------------------------------------------ grupos do menu
   O título do grupo é um BOTÃO: com agenda, financeiro e cadastros, a lateral
   passou de 16 itens, e uma lista plana obriga a ler tudo para achar qualquer
   coisa. Recolhendo o que não se usa naquele dia, cada pessoa deixa à vista só
   o próprio trabalho — a recepção, atendimento e financeiro; o administrador,
   os cadastros.

   O grupo do item aberto nunca é recolhido: esconder onde a pessoa está seria
   o pior jeito possível de "organizar". */
.sb-secao { margin-block-start: .75rem; }
.sb-secao:first-of-type { margin-block-start: 0; }

.sb-grupo {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .5rem .75rem .375rem;
  border: 0;
  background: transparent;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  overflow: hidden;
  border-radius: var(--sb-raio-pequeno);
  transition: color var(--sb-transicao), background var(--sb-transicao);
}
.sb-grupo { color: var(--sb-lateral-suave); }
.sb-grupo:hover { color: #fff; background: var(--sb-lateral-hover); }
.sb-grupo-texto { flex: 1 1 auto; text-align: start; }

/* Quantos itens o grupo tem — some quando ele está aberto, porque aí dá para
   contar olhando. */
.sb-grupo-marca {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: .0625rem .375rem;
  border-radius: 999px;
  background: var(--sb-lateral-hover);
  color: var(--sb-lateral-suave);
  opacity: 0;
  transition: opacity var(--sb-transicao);
}
.sb-grupo[aria-expanded="false"] .sb-grupo-marca { opacity: 1; }

.sb-grupo-seta {
  font-size: .75rem;
  transition: transform var(--sb-transicao);
}
.sb-grupo[aria-expanded="false"] .sb-grupo-seta { transform: rotate(-90deg); }

.sb-grupo-itens {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--sb-transicao), opacity var(--sb-transicao);
}
.sb-grupo-lista { min-height: 0; overflow: hidden; }
.sb-secao.recolhido .sb-grupo-itens {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

.sb-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .625rem .75rem;
  margin-block-end: .1875rem;
  border: 1px solid transparent;
  border-radius: var(--sb-raio-pequeno);
  color: var(--sb-lateral-texto);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--sb-transicao), color var(--sb-transicao),
              border-color var(--sb-transicao), box-shadow var(--sb-transicao);
}
.sb-item i {
  font-size: 1.125rem;
  flex: 0 0 1.25rem;
  text-align: center;
  color: var(--sb-lateral-suave);
  transition: color var(--sb-transicao);
}
.sb-item:hover {
  background: var(--sb-lateral-hover);
  color: #fff;
}
.sb-item:hover i { color: #fff; }

/* O item ativo é uma superfície ELEVADA, não um retângulo pintado: degradê,
   luz interna no topo e halo da cor da empresa. É a tradução direta do botão
   do login para o tamanho de um item de menu. */
.sb-item.ativo {
  color: var(--sb-destaque-texto);
  font-weight: 600;
  border-color: color-mix(in srgb, var(--sb-destaque) 45%, transparent);
  background: linear-gradient(160deg,
    var(--sb-destaque) 0%,
    color-mix(in srgb, var(--sb-destaque) 88%, #000) 100%);

  /* O anel claro não é enfeite: a clínica escolhe a cor da marca, e uma marca
     azul-marinho ficaria quase da cor do próprio menu. O anel garante o
     recorte do item ativo seja qual for a cor escolhida. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 0 0 1px rgba(255, 255, 255, .16),
    0 10px 24px -10px color-mix(in srgb, var(--sb-destaque) 75%, transparent);
}
.sb-item.ativo i { color: var(--sb-destaque-texto); }

/* A barrinha da esquerda vira um ponto de luz saindo da borda do menu. */
.sb-item.ativo::before {
  content: '';
  position: absolute;
  inset-inline-start: -.75rem;
  inset-block: 28%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sb-destaque);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--sb-destaque) 80%, transparent);
}

.sb-item-texto { overflow: hidden; text-overflow: ellipsis; }

/* Rótulo flutuante que aparece quando o menu está recolhido. */
.sb-dica {
  display: none;
  position: absolute;
  inset-inline-start: calc(100% + .625rem);
  padding: .375rem .625rem;
  border-radius: var(--sb-raio-pequeno);
  background: var(--bs-emphasis-color);
  color: var(--bs-body-bg);
  font-size: .8125rem;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 8px 20px -8px var(--sb-sombra-3);
  transition: opacity var(--sb-transicao);
  z-index: 1050;
}

.sb-vazio {
  padding: 1rem .75rem;
  font-size: .875rem;
  color: var(--sb-lateral-suave);
  white-space: normal;
}

.sb-rodape {
  flex: 0 0 auto;
  padding: .75rem;
  border-block-start: 1px solid var(--sb-lateral-linha);
}

.sb-recolher {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .625rem .75rem;
  border: 0;
  border-radius: var(--sb-raio-pequeno);
  background: transparent;
  color: var(--sb-lateral-suave);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--sb-transicao), color var(--sb-transicao);
}
.sb-recolher i { font-size: 1.125rem; flex: 0 0 1.25rem; transition: transform var(--sb-transicao); }
.sb-recolher:hover { background: var(--sb-lateral-hover); color: #fff; }

/* --------------------------------------------------------- estado recolhido */

body.sb-recolhida .sb-lateral { width: var(--sb-lateral-recolhida); }
body.sb-recolhida .sb-marca { padding-inline: 1.25rem; }
body.sb-recolhida .sb-marca-texto,
body.sb-recolhida .sb-item-texto { opacity: 0; width: 0; }

/* No modo ícone o título do grupo vira um traço divisor: o nome não caberia,
   e recolher um grupo que já está reduzido a ícones não ajudaria ninguém. */
body.sb-recolhida .sb-grupo {
  pointer-events: none;
  padding: 0;
  margin-block: .5rem;
  height: 1px;
  background: var(--sb-lateral-linha);
}
body.sb-recolhida .sb-grupo-texto,
body.sb-recolhida .sb-grupo-marca,
body.sb-recolhida .sb-grupo-seta { opacity: 0; width: 0; overflow: hidden; }
body.sb-recolhida .sb-secao.recolhido .sb-grupo-itens {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
}
body.sb-recolhida .sb-grupo-lista { overflow: visible; }
body.sb-recolhida .sb-item { justify-content: center; padding-inline: 0; }
body.sb-recolhida .sb-item.ativo::before { display: none; }
body.sb-recolhida .sb-recolher { justify-content: center; }
body.sb-recolhida .sb-recolher i { transform: rotate(180deg); }
body.sb-recolhida .sb-area { margin-inline-start: var(--sb-lateral-recolhida); }
body.sb-recolhida .sb-item:hover .sb-dica { display: block; opacity: 1; }

/* ==========================================================================
   Área principal
   ========================================================================== */

.sb-area {
  margin-inline-start: var(--sb-lateral-largura);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: margin var(--sb-transicao);
}

/* Vidro: o conteúdo passa por baixo desfocado, como o cartão do login sobre o
   fundo. O fallback importa — sem backdrop-filter, a barra ficaria translúcida
   e o texto rolando por baixo tornaria o título ilegível. */
.sb-topo {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--sb-topo-altura);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: 1rem;
  background: var(--bs-body-bg);
  border-block-end: 1px solid var(--bs-border-color);
  box-shadow: 0 1px 0 var(--sb-luz) inset, 0 10px 28px -26px var(--sb-sombra-2);
}
@supports (backdrop-filter: blur(1px)) {
  .sb-topo {
    background: color-mix(in srgb, var(--bs-body-bg) 78%, transparent);
    backdrop-filter: blur(16px) saturate(150%);
  }
}

.sb-topo-titulo { flex: 1 1 auto; min-width: 0; }
.sb-topo-titulo h1 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-migalhas {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin: .125rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}
.sb-migalhas li + li::before { content: '/'; margin-inline-end: .375rem; opacity: .5; }
.sb-migalhas a { color: inherit; text-decoration: none; }
.sb-migalhas a:hover { color: var(--sb-destaque); text-decoration: underline; }

.sb-topo-acoes { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

.sb-botao-icone {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--sb-raio-pequeno);
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: 1.125rem;
  transition: background var(--sb-transicao), color var(--sb-transicao),
              border-color var(--sb-transicao);
}
.sb-botao-icone:hover {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* Só um dos dois ícones do alternador aparece por vez. */
.sb-icone-escuro { display: none; }
[data-bs-theme="dark"] .sb-icone-claro { display: none; }
[data-bs-theme="dark"] .sb-icone-escuro { display: inline; }

/* ------------------------------------------------------------ menu do usuário */

.sb-usuario {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .3125rem .75rem .3125rem .3125rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--bs-body-color);
  transition: background var(--sb-transicao), border-color var(--sb-transicao),
              box-shadow var(--sb-transicao);
}
.sb-usuario:hover {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  box-shadow: 0 6px 18px -12px var(--sb-sombra-2);
}
.sb-usuario > .bi-chevron-down { font-size: .75rem; color: var(--bs-secondary-color); }

.sb-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--sb-destaque-texto);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  background: linear-gradient(160deg,
    var(--sb-destaque) 0%,
    color-mix(in srgb, var(--sb-destaque) 82%, #000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 4px 12px -5px color-mix(in srgb, var(--sb-destaque) 70%, transparent);
}

.sb-usuario-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; min-width: 0; }
.sb-usuario-nome { font-size: .875rem; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-usuario-papel { font-size: .6875rem; color: var(--bs-secondary-color); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Conteúdo
   ========================================================================== */

.sb-conteudo { flex: 1 1 auto; padding: 1.5rem 1rem; max-width: 1600px; width: 100%; }

.sb-rodape-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.25rem 1rem;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
  border-block-start: 1px solid var(--bs-border-color);
}
.sb-rodape-pagina a { color: inherit; text-decoration: none; }
.sb-rodape-pagina a:hover { color: var(--sb-destaque); text-decoration: underline; }

/* ------------------------------------------------------------------ cartões */

/* Três camadas de sombra em vez de uma borda: a linha de luz no topo (como se
   a superfície pegasse a iluminação do alto), a sombra curta que cola o cartão
   e a longa que o descola do fundo. É a receita do cartão do login, dividida
   por três. */
.sb-card {
  position: relative;
  background: var(--sb-superficie);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--sb-raio);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 var(--sb-luz),
    0 1px 2px -1px var(--sb-sombra-1),
    0 18px 40px -28px var(--sb-sombra-2);
  transition: box-shadow var(--sb-transicao), border-color var(--sb-transicao);
}

.sb-card-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--bs-border-color);
  font-weight: 600;
  font-size: .9375rem;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sb-destaque) 4%, transparent), transparent);
}
.sb-card-corpo { padding: 1.25rem; }

/* Linha de apoio ao lado do título do cartão ("obrigatório para menor", etc.). */
.sb-card-dica {
  font-size: .8125rem;
  font-weight: 400;
  color: var(--bs-secondary-color);
}

/* ==========================================================================
   Agenda

   A grade é posicionamento absoluto sobre uma coluna de altura conhecida: um
   minuto vale --sb-agenda-px pixels, e cada bloco recebe top/height calculados
   no servidor (Core\Agenda). Tabela não serviria — dois agendamentos no mesmo
   minuto não cabem numa célula, e meia hora não é "meia linha".
   ========================================================================== */

.sb-agenda {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 62rem) {
  .sb-agenda { grid-template-columns: minmax(0, 1fr); }
  .sb-agenda-lado { order: 2; }
}

/* ----------------------------------------------------------- mini calendário */
.sb-mes-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-block-end: .5rem;
  font-size: .875rem;
}
.sb-mes-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.sb-mes-dia-semana {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  padding-block-end: .25rem;
}
.sb-mes-dia {
  padding: .25rem 0;
  border-radius: var(--sb-raio-pequeno);
  font-size: .8125rem;
  color: var(--bs-body-color);
  text-decoration: none;
}
.sb-mes-dia:hover { background: var(--bs-tertiary-bg); }
.sb-mes-dia.fora { color: var(--bs-secondary-color); opacity: .55; }
.sb-mes-dia.hoje { font-weight: 700; color: var(--sb-destaque); }
.sb-mes-dia.escolhido {
  background: var(--sb-destaque);
  color: var(--sb-destaque-texto);
  font-weight: 600;
}

/* ------------------------------------------------------------------ legenda */
.sb-legenda { display: flex; align-items: center; gap: .5rem; margin-block-end: .375rem; }
.sb-legenda .form-check-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  line-height: 1.2;
}
.sb-legenda-cor {
  width: .75rem;
  height: .75rem;
  border-radius: 3px;
  flex-shrink: 0;
}

/* -------------------------------------------------------------- topo e resumo */
.sb-agenda-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-block-end: .75rem;
}
.sb-agenda-data { font-size: .9375rem; }

.sb-agenda-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin-block-end: .75rem;
  padding: .5rem .875rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--sb-raio);
  background: var(--sb-superficie);
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}
.sb-agenda-resumo strong { color: var(--bs-body-color); }

/* -------------------------------------------------------------------- grade */
.sb-agenda-caixa { overflow: hidden; }
.sb-agenda-grade {
  --sb-agenda-cabecalho: 3rem;
  display: grid;
  grid-template-columns: 3.5rem repeat(var(--sb-agenda-colunas), minmax(11rem, 1fr));
  overflow-x: auto;
}
.sb-agenda-horas, .sb-agenda-coluna { min-width: 0; }
.sb-agenda-coluna { border-inline-start: 1px solid var(--bs-border-color); }

.sb-agenda-cabecalho {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--sb-agenda-cabecalho);
  padding: .5rem .625rem;
  border-block-end: 1px solid var(--bs-border-color);
  background: var(--sb-superficie);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.15;
}
.sb-agenda-ponto {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  margin-inline-end: .375rem;
}

.sb-agenda-corpo {
  position: relative;
  height: var(--sb-agenda-altura);
}

.sb-agenda-hora {
  position: absolute;
  inset-inline-end: .5rem;
  transform: translateY(-.5em);
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

.sb-agenda-linha {
  position: absolute;
  inset-inline: 0;
  border-block-start: 1px dotted var(--bs-border-color);
}
.sb-agenda-linha.cheia { border-block-start-style: solid; }

/* Expediente: o fundo diz onde SE PODE marcar, sem precisar de aviso escrito. */
.sb-agenda-expediente {
  position: absolute;
  inset-inline: 0;
  background: color-mix(in srgb, var(--sb-destaque) 6%, transparent);
}

.sb-agenda-bloqueio {
  position: absolute;
  inset-inline: 0;
  padding: .25rem .5rem;
  font-size: .6875rem;
  color: var(--bs-secondary-color);
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--bs-secondary-color) 12%, transparent) 0 6px,
    transparent 6px 12px);
  border-block: 1px solid var(--bs-border-color);
  overflow: hidden;
}

/* ------------------------------------------------------------------- blocos */
.sb-agenda-bloco {
  position: absolute;
  display: block;
  padding: .25rem .375rem;
  border-radius: .375rem;
  border: 1px solid color-mix(in srgb, var(--sb-bloco-cor) 45%, transparent);
  border-inline-start: 3px solid var(--sb-bloco-cor);
  background: color-mix(in srgb, var(--sb-bloco-cor) 16%, var(--sb-superficie));
  color: var(--bs-body-color);
  font-size: .75rem;
  line-height: 1.2;
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow var(--sb-transicao), transform var(--sb-transicao);
}
.sb-agenda-bloco:hover {
  z-index: 3;
  color: var(--bs-body-color);
  box-shadow: 0 8px 20px -10px var(--sb-sombra-3);
  transform: translateY(-1px);
}
.sb-agenda-bloco.encerrado {
  opacity: .55;
  background: var(--bs-tertiary-bg);
  border-inline-start-color: var(--bs-secondary-color);
}
.sb-agenda-bloco.encerrado .sb-agenda-bloco-nome { text-decoration: line-through; }

.sb-agenda-bloco-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .25rem;
  color: var(--bs-secondary-color);
  font-size: .6875rem;
}
.sb-agenda-bloco-nome    { display: block; font-weight: 600; }
.sb-agenda-bloco-servico { display: block; color: var(--bs-secondary-color); }
.sb-agenda-bloco-marcas  { display: flex; gap: .1875rem; flex-shrink: 0; }

/* Bloco de 30 minutos: sem o nome do serviço (a cor já o identifica). */
.sb-agenda-bloco.medio .sb-agenda-bloco-servico { display: none; }
.sb-agenda-bloco.medio .sb-agenda-bloco-nome { font-size: .6875rem; }

/* Bloco de 15 minutos: só o nome cabe. O resto vive no título (tooltip) e na
   tela do agendamento — espremer três linhas em 16px não informa, suja. */
.sb-agenda-bloco.curto { padding-block: .0625rem; display: flex; align-items: center; gap: .25rem; }
.sb-agenda-bloco.curto .sb-agenda-bloco-topo,
.sb-agenda-bloco.curto .sb-agenda-bloco-servico { display: none; }
.sb-agenda-bloco.curto .sb-agenda-bloco-nome {
  font-weight: 500;
  font-size: .6875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O vazio é clicável: cria agendamento naquele horário. */
.sb-agenda-corpo[data-coluna] { cursor: copy; }

/* O agora. Vermelho porque é a única coisa na tela que não se pode mudar. */
.sb-agenda-agora {
  position: absolute;
  inset-inline: 0;
  border-block-start: 2px solid var(--bs-danger);
  z-index: 2;
  pointer-events: none;
}
.sb-agenda-agora::before {
  content: '';
  position: absolute;
  inset-block-start: -5px;
  inset-inline-start: -4px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--bs-danger);
}

/* --------------------------------------------- grade de horários do profissional */
.sb-grade-horarios { display: grid; gap: .5rem; }
.sb-grade-dia {
  display: grid;
  grid-template-columns: 6rem repeat(auto-fit, minmax(16rem, 1fr));
  align-items: center;
  gap: .5rem;
  padding-block: .375rem;
  border-block-end: 1px dashed var(--bs-border-color);
}
.sb-grade-dia:last-child { border-block-end: 0; }
.sb-grade-nome { font-size: .8125rem; font-weight: 500; }
.sb-grade-faixa {
  display: grid;
  grid-template-columns: 1fr auto 1fr 6rem;
  align-items: center;
  gap: .375rem;
}
@media (max-width: 34rem) {
  .sb-grade-dia { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------- busca de paciente
   Lista que aparece sob o campo enquanto se digita. Não é um <select>: são
   dezenas de milhares de pacientes, e a lista só existe depois da busca. */
.sb-busca-resultados {
  position: absolute;
  z-index: 5;
  inset-inline: 0;
  max-height: 18rem;
  overflow-y: auto;
  margin-block-start: .25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--sb-raio-pequeno);
  background: var(--sb-superficie);
  box-shadow: 0 16px 40px -20px var(--sb-sombra-3);
}
.sb-busca-item {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  border: 0;
  border-block-end: 1px solid var(--bs-border-color);
  background: transparent;
  color: var(--bs-body-color);
  text-align: start;
  font-size: .8125rem;
  line-height: 1.3;
}
.sb-busca-item:last-child { border-block-end: 0; }
.sb-busca-item:hover, .sb-busca-item:focus {
  background: color-mix(in srgb, var(--sb-destaque) 10%, transparent);
}
.sb-busca-item span { display: block; color: var(--bs-secondary-color); font-size: .75rem; }
.sb-busca-vazio { padding: .75rem; font-size: .8125rem; color: var(--bs-secondary-color); }

.sb-paciente-escolhido {
  min-height: 3.1rem;
  padding: .5rem .75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--sb-raio-pequeno);
  background: var(--bs-tertiary-bg);
  font-size: .875rem;
}
.sb-paciente-escolhido.vazio { border-style: dashed; }

/* ------------------------------------------------- acesso como clínica
   Faixa de alerta permanente enquanto o dono está dentro de um cliente. Usa
   âmbar, e não a cor da empresa: o ponto é destoar do resto da tela. */
.sb-como-clinica {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-block-end: 1.25rem;
  padding: .75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--bs-warning) 45%, transparent);
  border-radius: var(--sb-raio);
  background: color-mix(in srgb, var(--bs-warning) 14%, var(--sb-superficie));
  color: var(--bs-emphasis-color);
  font-size: .8125rem;
}
.sb-como-clinica > i { font-size: 1.125rem; color: var(--bs-warning-text-emphasis); }
.sb-como-clinica .btn { white-space: nowrap; }

@media (max-width: 34rem) {
  .sb-como-clinica { flex-wrap: wrap; }
}

/* ==========================================================================
   Formulários

   ---------------------------------------------------------------------------
   POR QUE NÃO A GRADE DE 12 COLUNAS
   ---------------------------------------------------------------------------
   Com col-lg-2/3/4 cada tela escolhia a própria largura, e o resultado era
   um campo "Parentesco" de 90px ao lado de um "Nome" de 400px, com sobras no
   fim da linha quando a soma não fechava 12. Formulário de cadastro não
   precisa dessa liberdade: precisa de ritmo.

   Aqui as colunas têm todas a mesma largura mínima (--sb-campo) e o navegador
   decide quantas cabem. Campo nenhum fica menor que o legível, a linha sempre
   fecha, e o mesmo bloco funciona no celular sem uma única media query. O que
   a tela declara é só a EXCEÇÃO: .dobro para um campo que precisa do dobro do
   espaço, .total para o que ocupa a linha inteira (textarea, aviso).
   ========================================================================== */

.sb-campos {
  --sb-campo: 14rem;     /* largura mínima de um campo */
  --sb-colunas: 4;       /* teto de colunas: num monitor largo, 6 campos lado a lado viram uma planilha */
  --sb-vao: 1.25rem;

  display: grid;
  /* auto-FILL, e não auto-fit: com auto-fit uma seção de um campo só teria a
     coluna esticada de ponta a ponta, e o mesmo campo mudaria de tamanho de
     uma seção para outra. Com auto-fill as trilhas vazias continuam lá. */
  grid-template-columns: repeat(auto-fill, minmax(
    max(var(--sb-campo), (100% - (var(--sb-colunas) - 1) * var(--sb-vao)) / var(--sb-colunas)),
    1fr));
  gap: 1.125rem var(--sb-vao);
  align-items: start;
}
.sb-campos > .dobro { grid-column: span 2; }
.sb-campos > .total { grid-column: 1 / -1; }

/* Numa coluna só, "span 2" não existe — sem isto o campo largo desapareceria. */
@media (max-width: 34rem) {
  .sb-campos { --sb-campo: 100%; }
  .sb-campos > .dobro { grid-column: 1 / -1; }
}

.sb-campos .form-label {
  display: block;
  margin-block-end: .375rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--bs-body-color);
}
.sb-campos .form-label .text-danger { font-weight: 700; }
.sb-campos .form-text { margin-block-start: .375rem; font-size: .75rem; line-height: 1.35; }

/* Campo que o formulário esconde por não fazer sentido agora (carteirinha sem
   convênio, por exemplo). `hidden` sozinho perde para `display: grid`. */
.sb-campos > [hidden] { display: none; }

/* Seletor de cor ocupando a coluna inteira vira uma faixa chapada de cor, que
   puxa mais atenção que o nome do profissional ao lado. */
.sb-campos .form-control-color { width: 100%; max-width: 6.5rem; }

/* ------------------------------------------------------------------ opções
   Interruptores no meio da grade ficavam pendurados: sem rótulo em cima, eles
   não alinham com os campos vizinhos e sobra um buraco. Juntá-los num bloco
   próprio, no fim da seção, resolve o alinhamento e ainda agrupa por sentido —
   "o que este cadastro é" separado de "o que este cadastro tem". */
.sb-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem 1.75rem;
  margin-block-start: 1.25rem;
  padding-block-start: 1rem;
  border-block-start: 1px dashed var(--bs-border-color);
}
.sb-opcoes .form-check { margin: 0; min-height: auto; }
.sb-opcoes .form-check-label { font-size: .8125rem; }
.sb-opcoes .form-check-label .sb-opcao-dica {
  display: block;
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

/* ------------------------------------------------------------------ ações
   A barra de Salvar/Cancelar gruda no rodapé enquanto o formulário rola. Numa
   ficha de paciente, que passa de uma tela de altura, o botão some justamente
   quando a pessoa termina de preencher — e ela rola de volta para procurá-lo. */
.sb-acoes {
  position: sticky;
  inset-block-end: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  margin-block-start: 1.5rem;
  padding: .875rem 1.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--sb-raio);
  background: color-mix(in srgb, var(--sb-superficie) 88%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 -10px 30px -24px var(--sb-sombra-3);
}
.sb-acoes .sb-acoes-nota {
  margin-inline-end: auto;
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

/* Em telas curtas (celular deitado) a barra fixa comeria metade da tela. */
@media (max-height: 34rem) {
  .sb-acoes { position: static; backdrop-filter: none; }
}

/* --------------------------------------------------------------------- KPIs */

.sb-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-block-end: 1.5rem;
}

.sb-kpi {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--sb-superficie);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--sb-raio);
  box-shadow:
    inset 0 1px 0 var(--sb-luz),
    0 1px 2px -1px var(--sb-sombra-1),
    0 18px 40px -30px var(--sb-sombra-2);
  transition: border-color var(--sb-transicao), transform var(--sb-transicao),
              box-shadow var(--sb-transicao);
}
.sb-kpi:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--sb-destaque) 40%, var(--bs-border-color));
  box-shadow:
    inset 0 1px 0 var(--sb-luz),
    0 10px 28px -16px var(--sb-sombra-2),
    0 0 0 4px color-mix(in srgb, var(--sb-destaque) 8%, transparent);
}

/* O quadradinho do ícone é a peça neumórfica do painel: degradê da cor da
   empresa, luz interna no topo, halo colorido embaixo. */
.sb-kpi-icone {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--sb-raio-pequeno);
  font-size: 1.375rem;
  color: var(--sb-destaque-texto);
  background: linear-gradient(160deg,
    var(--sb-destaque) 0%,
    color-mix(in srgb, var(--sb-destaque) 84%, #000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -2px 6px rgba(0, 0, 0, .16),
    0 8px 18px -8px color-mix(in srgb, var(--sb-destaque) 60%, transparent);
}
.sb-kpi-icone.verde {
  /* Verde e vermelho são cores do SISTEMA, não da marca do cliente — o texto
     legível sobre eles é sempre branco, e não o calculado para a marca. */
  color: #fff;
  background: linear-gradient(160deg,
    var(--bs-success), color-mix(in srgb, var(--bs-success) 84%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38),
              0 8px 18px -8px color-mix(in srgb, var(--bs-success) 60%, transparent);
}
.sb-kpi-icone.ambar {
  background: linear-gradient(160deg,
    var(--bs-warning), color-mix(in srgb, var(--bs-warning) 86%, #000));
  color: #3d2b00;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5),
              0 8px 18px -8px color-mix(in srgb, var(--bs-warning) 60%, transparent);
}
.sb-kpi-icone.vermelho {
  color: #fff;
  background: linear-gradient(160deg,
    var(--bs-danger), color-mix(in srgb, var(--bs-danger) 84%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38),
              0 8px 18px -8px color-mix(in srgb, var(--bs-danger) 60%, transparent);
}

.sb-kpi-dados { min-width: 0; }
.sb-kpi-valor {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  /* Números de larguras diferentes fazem o valor "dançar" quando atualiza. */
  font-variant-numeric: tabular-nums;
}
.sb-kpi-rotulo { font-size: .8125rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ tabelas */

/* Tabela larga rola dentro do próprio contêiner. Sem isto, a PÁGINA rola de
   lado no celular e o layout inteiro parece quebrado. */
.sb-tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sb-tabela-rolagem > table { margin-block-end: 0; }

.table > :not(caption) > * > * { padding-block: .75rem; }

.table > thead {
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.table > thead th {
  font-weight: 600;
  border-block-end-color: var(--bs-border-color);
  background: color-mix(in srgb, var(--sb-destaque) 4%, transparent);
}
.table > tbody > tr { border-color: var(--sb-linha-suave); }
.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: transparent;
  background-color: color-mix(in srgb, var(--sb-destaque) 5%, transparent);
}

/* Dinheiro e contagem alinhados por dígito: coluna de valores desalinhada é o
   defeito que mais denuncia sistema feito às pressas. */
.table td.text-nowrap, .table td.fw-medium { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Componentes do Bootstrap, no acabamento da casa
   ========================================================================== */

/* ------------------------------------------------------------------- botões */

.btn {
  --bs-btn-border-radius: var(--sb-raio-pequeno);
  font-weight: 500;
  transition: transform 140ms ease, box-shadow var(--sb-transicao), filter 140ms ease;
}

/* O primário repete o botão do login: degradê na diagonal, fio de luz no topo
   e halo da própria cor embaixo. */
.btn-primary {
  --bs-btn-bg: var(--sb-destaque);
  --bs-btn-border-color: color-mix(in srgb, var(--sb-destaque) 70%, transparent);
  --bs-btn-hover-bg: var(--sb-destaque);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--sb-destaque) 80%, transparent);
  --bs-btn-active-bg: color-mix(in srgb, var(--sb-destaque) 82%, #000);
  --bs-btn-disabled-bg: var(--sb-destaque);
  --bs-btn-disabled-border-color: var(--sb-destaque);
  /* Só escurece para baixo. Clarear o topo puxaria o contraste do texto para
     baixo do mínimo legível — o fio de luz de 1px abaixo dá o relevo sem
     mexer na cor sobre a qual o texto é lido. */
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, .14));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 8px 20px -10px color-mix(in srgb, var(--sb-destaque) 75%, transparent);
}
.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 12px 26px -10px color-mix(in srgb, var(--sb-destaque) 85%, transparent);
}

/* Afunda ao clicar, como no login: é o gesto que dá a sensação física. */
.btn:active { transform: translateY(1px); }
.btn-primary:active {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .28);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--bs-secondary-bg);
  --bs-btn-hover-color: var(--bs-emphasis-color);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--sb-destaque) 35%, var(--bs-border-color));
}
.btn-outline-primary {
  --bs-btn-color: var(--sb-link);
  --bs-btn-border-color: color-mix(in srgb, var(--sb-destaque) 55%, transparent);
  --bs-btn-hover-bg: var(--sb-destaque);
  --bs-btn-hover-border-color: var(--sb-destaque);
  --bs-btn-active-bg: var(--sb-destaque);
}
.btn-secondary {
  --bs-btn-bg: var(--bs-secondary-bg);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-emphasis-color);
}

/* ------------------------------------------------------------------- campos */

/* Campo rebaixado, como o do login: sombra interna no topo simula a luz vinda
   de cima batendo na borda superior da cavidade. */
.form-control,
.form-select {
  border-radius: var(--sb-raio-pequeno);
  border-color: var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  box-shadow: inset 0 1px 3px var(--sb-sombra-1);
  transition: border-color var(--sb-transicao), box-shadow var(--sb-transicao),
              background-color var(--sb-transicao);
}
.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
  border-color: color-mix(in srgb, var(--sb-destaque) 30%, var(--bs-border-color));
}
.form-control:focus,
.form-select:focus {
  background-color: var(--bs-body-bg);
  border-color: color-mix(in srgb, var(--sb-destaque) 65%, transparent);
  box-shadow:
    inset 0 1px 3px var(--sb-sombra-1),
    0 0 0 4px color-mix(in srgb, var(--sb-destaque) var(--sb-halo), transparent);
}
.form-control::placeholder { color: var(--bs-secondary-color); opacity: .75; }
.form-control:disabled, .form-select:disabled { background-color: var(--bs-secondary-bg); opacity: .7; }

.form-label { color: var(--bs-body-color); }
.form-text { color: var(--bs-secondary-color); }

.form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--bs-danger);
}
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-danger) 20%, transparent);
}

/* Interruptor no tom da empresa. */
.form-check-input:checked {
  background-color: var(--sb-destaque);
  border-color: var(--sb-destaque);
}
.form-check-input:focus {
  border-color: color-mix(in srgb, var(--sb-destaque) 60%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sb-destaque) var(--sb-halo), transparent);
}
.form-switch .form-check-input { height: 1.25em; width: 2.25em; }

/* ------------------------------------------------------ abas em forma de pílula */

.nav-pills {
  --bs-nav-pills-border-radius: 999px;
  padding: .3125rem;
  background: var(--sb-superficie);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--sb-luz), 0 1px 2px -1px var(--sb-sombra-1);
  /* A faixa de abas rola de lado no celular em vez de quebrar em duas linhas. */
  overflow-x: auto;
  flex-wrap: nowrap;
}
.nav-pills .nav-link {
  color: var(--bs-secondary-color);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  padding: .4375rem .875rem;
  transition: background var(--sb-transicao), color var(--sb-transicao);
}
.nav-pills .nav-link:hover { color: var(--bs-emphasis-color); background: var(--bs-secondary-bg); }
.nav-pills .nav-link.active {
  color: var(--sb-destaque-texto);
  font-weight: 600;
  background: linear-gradient(160deg,
    var(--sb-destaque),
    color-mix(in srgb, var(--sb-destaque) 88%, #000));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 6px 16px -8px color-mix(in srgb, var(--sb-destaque) 70%, transparent);
}

/* ------------------------------------------------------------------ emblemas */

.badge {
  font-weight: 600;
  letter-spacing: .01em;
  padding: .375em .625em;
  border-radius: 999px;
}

/* -------------------------------------------------------------------- código

   O rosa que o Bootstrap usa em <code> fica entre 3,5:1 e 4,1:1 sobre os
   fundos tingidos dos avisos — abaixo do mínimo justamente onde mais se usa
   código: explicando um parâmetro dentro de uma faixa de alerta. Aqui ele vira
   uma pastilha na cor do texto, que lê bem sobre qualquer fundo. */
code {
  color: var(--bs-body-color);
  background: color-mix(in srgb, var(--sb-destaque) 10%, transparent);
  padding: .1em .35em;
  border-radius: .3em;
  font-size: .875em;
}
a > code, code a { color: inherit; }

/* ------------------------------------------------------------------- avisos */

.alert {
  border-radius: var(--sb-raio-pequeno);
  border-width: 1px;
  box-shadow: 0 1px 2px -1px var(--sb-sombra-1);
}

/* ------------------------------------------------------- cores de significado

   .text-danger e companhia usam a cor CHEIA da paleta, pensada para fundo
   claro. Sobre o cartão azul-noite do tema escuro elas caem para ~3,9:1 —
   passam como ícone (mínimo 3:1) e reprovam como texto (4,5:1). O Bootstrap
   já calcula as variantes com ênfase por tema; é só usá-las. */
[data-bs-theme="dark"] .text-danger  { color: var(--bs-danger-text-emphasis) !important; }
[data-bs-theme="dark"] .text-success { color: var(--bs-success-text-emphasis) !important; }
[data-bs-theme="dark"] .text-warning { color: var(--bs-warning-text-emphasis) !important; }

/* ------------------------------------------------------------------ dropdown */

.dropdown-menu {
  --bs-dropdown-border-radius: var(--sb-raio-pequeno);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-bg: var(--sb-superficie);
  padding: .375rem;
  box-shadow:
    inset 0 1px 0 var(--sb-luz),
    0 20px 45px -20px var(--sb-sombra-3);
}
.dropdown-item { border-radius: calc(var(--sb-raio-pequeno) - .25rem); font-size: .9375rem; }
.dropdown-item:hover, .dropdown-item:focus {
  background: color-mix(in srgb, var(--sb-destaque) 10%, transparent);
  color: var(--bs-emphasis-color);
}
.dropdown-item.text-danger:hover { background: color-mix(in srgb, var(--bs-danger) 12%, transparent); }
.dropdown-header { font-size: .75rem; color: var(--bs-secondary-color); }

/* ------------------------------------------------------------------ DataTables */

/* A busca e o seletor de página do DataTables entram como campos comuns; sem
   isto ficam com a cara padrão da biblioteca no meio de um painel estilizado. */
.dt-container .dt-search input,
.dt-container .dt-length select {
  border-radius: var(--sb-raio-pequeno);
  border: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  padding: .375rem .75rem;
  box-shadow: inset 0 1px 3px var(--sb-sombra-1);
}
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--sb-destaque) 60%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sb-destaque) var(--sb-halo), transparent);
}
/* O layout do DataTables 2 com Bootstrap é feito de `.row`, e toda `.row` traz
   margem negativa de meio gutter (-12px de cada lado) para compensar o padding
   das colunas. Dentro de .sb-tabela-rolagem, que rola na horizontal, essa
   margem vira largura sobrando: a caixa passa a rolar sozinha e a grade abre
   deslocada, com a primeira coluna cortada.
   Zeramos a margem e devolvemos o respiro como padding da própria linha. */
.dt-container > .row { margin-inline: 0; padding: .75rem 1.25rem; }
.dt-container > .row > [class*="col"] { padding-inline: 0; }

/* A linha da tabela não leva padding (a tabela vai de ponta a ponta do cartão)
   e rola sozinha quando é larga demais — assim a busca e a paginação continuam
   visíveis enquanto se rola as colunas. */
.dt-container > .row:has(> [class*="col"] > table) { padding-block: 0; padding-inline: 0; }
.dt-container > .row > [class*="col"]:has(> table) { overflow-x: auto; }

.dt-container .dt-info { font-size: .8125rem; color: var(--bs-secondary-color); }

/* ---------------------------------------------------------------- paginação
   Os botões eram cinco pílulas soltas com a borda transparente: sem contorno,
   flutuavam no branco do cartão e não pareciam clicáveis. Agora são UM
   controle segmentado — uma borda só em volta, divisórias entre os itens.

   Além de ficar melhor, isso diz a coisa certa: "Primeira · Anterior · 1 ·
   Próxima · Última" é um grupo de opções do mesmo assunto, não cinco ações
   independentes espalhadas pelo rodapé. */
.dt-container .pagination {
  display: inline-flex;
  margin: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--sb-raio-pequeno);
  background: var(--bs-body-bg);
  box-shadow: 0 1px 2px var(--sb-sombra-1);

  /* Recorta os cantos dos itens das pontas, para o arredondamento valer sem
     precisar acertar o primeiro e o último na mão. */
  overflow: hidden;

  /* O Bootstrap deixa .pagination com flex-wrap: wrap. Com muitas páginas num
     celular, os botões pulavam para uma segunda linha DENTRO da caixa — e a
     divisória do primeiro item da linha de baixo ficava sobrando na borda.
     Em uma linha só, e o excesso rola de lado. */
  max-width: 100%;
  overflow-x: auto;

  /* A barra de rolagem por baixo dos botões polui um controle deste tamanho, e
     ela só apareceria em tela estreita, que é tela de toque — onde arrastar já
     é o gesto natural. */
  scrollbar-width: none;
}
.dt-container .pagination::-webkit-scrollbar { display: none; }

/* Este seletor é feio de propósito, e a alternativa seria pior.
   O dataTables.bootstrap5.css traz
       div.dt-container div.dt-paging ul.pagination { margin:2px 0; flex-wrap:wrap }
   que é mais específico que `.dt-container .pagination` e ganhava das duas
   linhas abaixo. Repetir a forma dele empata a especificidade — e como o
   medcenter.css carrega depois, o empate resolve a nosso favor, sem precisar
   de !important (que tiraria de quem vier depois a chance de ajustar). */
div.dt-container div.dt-paging ul.pagination {
  margin: 0;
  flex-wrap: nowrap;
}

/* Sem isto os botões se espremem quando falta largura, e "Primeira" vira uma
   coluna de letras. Preferimos que eles mantenham o tamanho e o conjunto role. */
.dt-container .page-item { flex: 0 0 auto; }

/* A divisória nasce do item, e não do container: assim ela aparece só ENTRE
   dois botões, nunca sobrando nas pontas. */
.dt-container .page-item + .page-item .page-link {
  border-inline-start: 1px solid var(--bs-border-color);
}

.dt-container .page-link {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: .875rem;
  font-weight: 500;
  padding: .4375rem .875rem;
  transition: background var(--sb-transicao), color var(--sb-transicao);
}
.dt-container .page-link:hover {
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
}

/* O foco fica POR DENTRO (outline-offset negativo): o overflow:hidden do
   container recortaria um anel desenhado para fora, e quem navega por teclado
   ficaria sem saber onde está. */
.dt-container .page-link:focus-visible {
  outline: 2px solid var(--sb-destaque);
  outline-offset: -2px;
  z-index: 1;
}

.dt-container .page-item.active .page-link {
  background: var(--sb-destaque);
  /* Sem esta linha a cor do texto viria da regra de cima e o número ficaria
     escuro sobre fundo forte, ilegível. --sb-destaque-texto é calculado para
     ter contraste com a cor da empresa, qualquer que seja ela. */
  color: var(--sb-destaque-texto);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* "Anterior" na primeira página não leva a lugar nenhum: fica legível, mas
   apagado, e para de responder ao mouse. */
.dt-container .page-item.disabled .page-link {
  background: transparent;
  color: var(--bs-secondary-color);
  opacity: .45;
  pointer-events: none;
}

/* Em tela estreita, "Primeira" e "Última" saem: são os dois botões mais largos
   e os menos usados — quem está no celular navega de página em página. Sobram
   Anterior · números · Próxima, que é o que se toca de verdade.

   A escolha é por posição porque o DataTables 2 não dá classe própria a eles:
   todos saem como `dt-paging-button page-item`. */
@media (max-width: 575.98px) {
  .dt-container .pagination .page-item:first-child,
  .dt-container .pagination .page-item:last-child { display: none; }
}

/* ------------------------------------------------------------------ SweetAlert */

/* Os avisos usam as variáveis do Bootstrap por parâmetro no JS; o que falta é
   o arredondamento e a sombra da casa. */
.swal2-popup {
  border-radius: var(--sb-raio) !important;
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 24px 60px -24px var(--sb-sombra-3) !important;
}
.swal2-toast { border-radius: var(--sb-raio-pequeno) !important; }
.swal2-styled.swal2-confirm {
  border-radius: var(--sb-raio-pequeno) !important;
  background: var(--sb-destaque) !important;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--sb-destaque) 75%, transparent) !important;
}
.swal2-styled.swal2-cancel {
  border-radius: var(--sb-raio-pequeno) !important;
  background: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

/* ==========================================================================
   Responsivo — abaixo de 992px a sidebar vira gaveta
   ========================================================================== */

@media (max-width: 991.98px) {
  .sb-lateral { transform: translateX(-100%); box-shadow: 0 0 60px rgb(0 0 0 / .35); }
  body.sb-aberta .sb-lateral { transform: translateX(0); }
  .sb-area, body.sb-recolhida .sb-area { margin-inline-start: 0; }
  .sb-rodape { display: none; }

  .sb-cortina {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgb(3 10 28 / .58);
    opacity: 0;
    transition: opacity var(--sb-transicao);
  }
  @supports (backdrop-filter: blur(1px)) {
    .sb-cortina { backdrop-filter: blur(3px); }
  }
  body.sb-aberta .sb-cortina { opacity: 1; }

  .sb-usuario-info { display: none; }
  .sb-usuario > .bi-chevron-down { display: none; }
  .sb-conteudo { padding: 1rem .75rem; }
  .sb-topo { padding-inline: .75rem; }
}

@media (min-width: 992px) {
  .sb-conteudo { padding: 1.75rem 1.5rem; }
  .sb-topo { padding-inline: 1.5rem; }
}

/* Alvo de toque confortável em telas sensíveis. */
@media (pointer: coarse) {
  .sb-item { padding-block: .8125rem; }
  .sb-botao-icone { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .sb-kpi:hover, .btn:active { transform: none; }
}

/* ==========================================================================
   Tela limpa (convite, recuperação de senha, documentos legais)

   Estas telas não carregam login.css — são páginas de conteúdo, não a vitrine.
   Ganham o mesmo cartão elevado do painel sobre o fundo com luz.
   ========================================================================== */

.sb-limpo {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem 1rem;
  background:
    radial-gradient(1000px 500px at 15% -10%,
      color-mix(in srgb, var(--sb-destaque) 16%, transparent), transparent 60%),
    radial-gradient(800px 400px at 110% 110%,
      color-mix(in srgb, var(--sb-destaque) 12%, transparent), transparent 60%),
    var(--bs-secondary-bg);
}

.sb-limpo-caixa { width: 100%; max-width: 420px; }

.sb-limpo-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-block-end: 1.75rem;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.sb-limpo-marca .sb-marca-icone { width: 40px; height: 40px; font-size: 1.125rem; }

.sb-limpo-cartao {
  padding: 2rem 1.75rem;
  background: var(--sb-superficie);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--sb-raio-grande);
  box-shadow:
    inset 0 1px 0 var(--sb-luz),
    0 40px 70px -30px var(--sb-sombra-3),
    0 8px 20px -14px var(--sb-sombra-2);
}

.sb-limpo-cartao h1 { font-size: 1.25rem; font-weight: 600; margin-block-end: .25rem; letter-spacing: -.015em; }
.sb-limpo-cartao .sb-sub { font-size: .875rem; color: var(--bs-secondary-color); margin-block-end: 1.5rem; }

.sb-limpo-rodape {
  margin-block-start: 1.5rem;
  text-align: center;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}
.sb-limpo-rodape a { color: inherit; }

/* Botão de mostrar/ocultar senha, dentro do campo. */
.sb-campo-senha { position: relative; }
.sb-campo-senha .form-control { padding-inline-end: 2.75rem; }
.sb-campo-senha button {
  position: absolute;
  inset-inline-end: .25rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--sb-raio-pequeno);
  background: transparent;
  color: var(--bs-secondary-color);
  z-index: 3;
}
.sb-campo-senha button:hover { background: var(--bs-secondary-bg); }

/* Campos um pouco mais altos: estas telas são muito usadas no celular. */
.sb-limpo-cartao .form-control { padding-block: .625rem; }
.sb-limpo-cartao .btn { padding-block: .625rem; font-weight: 600; }