/*
 * Quick Saúde — tema do painel (profissional e administração), feature 003.
 *
 * Camada de design sobre o Metronic 8 (assets/css/style.bundle.css): tokens próprios + restyle
 * dos componentes, com a mesma identidade do app do paciente (Figtree, tinta azul-petróleo,
 * ciano da marca escurecido para ações e o ciano original como detalhe). Carregado depois do
 * CSS do tema e ANTES de qs-ajustes.css (acessibilidade), que continua o último.
 * Só o tema claro é ajustado; o tema escuro do Metronic mantém seus valores.
 */

@font-face {
  font-family: "Figtree Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("../vendor/qs/fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"),
       url("../vendor/qs/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("../vendor/qs/fonts/figtree-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../vendor/qs/fonts/figtree-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root:not([data-bs-theme="dark"]),
[data-bs-theme="light"] {
  --qs-ink: #0e2a33;
  --qs-ink-2: #4a5f67;
  --qs-brand: #0077a8;
  --qs-brand-strong: #005f87;
  --qs-brand-soft: #e4f3f9;
  --qs-pulse: #00c2ff;
  --qs-bg: #f4f8f9;
  --qs-line: #dce7eb;
  --qs-line-strong: #b9cbd2;
  --qs-success: #0b7a37;
  --qs-success-soft: #e3f5ea;
  --qs-warning: #8f6700;
  --qs-warning-soft: #fff4d6;
  --qs-danger: #c8164a;
  --qs-danger-soft: #fde8ee;
  --qs-font: "Figtree Variable", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bs-font-sans-serif: var(--qs-font);
  --bs-body-font-family: var(--qs-font);
  --bs-body-color: var(--qs-ink);
  --bs-gray-900: var(--qs-ink);
  --bs-text-gray-900: var(--qs-ink);
  --bs-gray-800: #1f3a43;
  --bs-text-gray-800: #1f3a43;
  --bs-gray-700: #3d535b;
  --bs-text-gray-700: #3d535b;
  --bs-app-bg-color: var(--qs-bg);
  --bs-app-blank-bg-color: var(--qs-bg);
  --bs-app-header-primary-base-bg-color: var(--qs-ink);
  --bs-app-header-secondary-base-bg-color: var(--qs-ink);
  --bs-app-sidebar-base-bg-color: #ffffff;
  --bs-border-color: var(--qs-line);
  --bs-primary-light: var(--qs-brand-soft);
  --bs-info-light: var(--qs-brand-soft);

  /* Spec 014: as cores de apoio do app do paciente (mesmos nomes e valores). */
  --qs-surface: #ffffff;
  --qs-surface-2: #f8fbfc;
  --qs-neutral-soft: #eef3f5;
  --qs-brand-soft-2: #cfe8f2;
}

/*
 * Spec 014: tokens de espaço, raio, sombra, toque e movimento com os nomes e valores do app do paciente
 * (docs/DEVELOPMENT.md, "Design system"), fora do bloco de cor para valerem em qualquer tema.
 */
:root {
  --qs-s-1: 4px;
  --qs-s-2: 8px;
  --qs-s-3: 12px;
  --qs-s-4: 16px;
  --qs-s-5: 20px;
  --qs-s-6: 24px;
  --qs-s-7: 32px;
  --qs-s-8: 40px;
  --qs-radius-hero: 20px;
  --qs-radius-card: 16px;
  --qs-radius-control: 12px;
  --qs-radius-sm: 8px;
  --qs-radius-pill: 999px;
  --qs-shadow-1: 0 1px 2px rgba(14, 42, 51, 0.06);
  --qs-shadow-pop: 0 12px 32px rgba(14, 42, 51, 0.16);
  --qs-h-touch: 44px;
  --qs-ease: cubic-bezier(0.2, 0, 0, 1);
  --qs-dur: 200ms;
  --qs-menu-w: 264px;
  /* Tipo em px: o tema fixa a raiz em 13 px (12 px abaixo de 992 px), então rem aqui não é 16 px como no app. */
  --qs-fs-xs: 12px;
  --qs-fs-sm: 13px;
  --qs-fs-base: 14px;
  --qs-fs-md: 16px;
  --qs-fs-lg: 18px;
  --qs-fs-xl: 20px;
  /* Spec 015: título de toda tela do painel (início, listas, formulários). */
  --qs-fs-titulo: clamp(22px, 18px + 0.6vw, 26px);
}

body,
.app-default {
  font-family: var(--qs-font);
  background-color: var(--qs-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--qs-font);
  letter-spacing: -0.01em;
}

.qs-num { font-variant-numeric: tabular-nums; }

/* ---------- Cabeçalho ---------- */
.app-header,
.app-header-primary {
  background-color: var(--qs-ink) !important;
}

.app-header-primary { box-shadow: inset 0 -3px 0 var(--qs-pulse); }

.app-header .btn-custom,
.app-header .btn-icon { color: #fff; }

.qs-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.qs-marca:hover { color: #fff; }

.qs-marca__simbolo {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #fff;
  color: var(--qs-ink);
  font-size: 1.05rem;
  box-shadow: inset 0 -3px 0 var(--qs-pulse);
}

.qs-marca__painel {
  font-weight: 600;
  font-size: var(--qs-fs-xs);
  color: rgba(255, 255, 255, 0.72);
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}

/* Spec 014: "Pular para o conteúdo" (WCAG 2.4.1) — escondido até receber o foco do teclado. */
.qs-pular {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1100;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.qs-pular:focus,
.qs-pular:focus-visible {
  width: auto;
  height: auto;
  padding: 10px 16px;
  overflow: visible;
  clip: auto;
  border-radius: var(--qs-radius-control);
  background: #fff;
  color: var(--qs-ink);
  font-weight: 700;
  text-decoration: none;
}

/* O cabeçalho é fixo: o destino do "Pular" não fica escondido atrás dele. */
#kt_app_main { scroll-margin-top: 80px; }

/* Spec 014: botões do cabeçalho (menu, notificações) e o avatar. */
.qs-cab-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--qs-radius-control);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background-color var(--qs-dur) var(--qs-ease);
}

.qs-cab-btn:hover,
.qs-cab-btn.show,
.qs-cab-btn.active { background: rgba(255, 255, 255, 0.18); }

.qs-cab-btn i { font-size: 20px; color: inherit; line-height: 1; }

.qs-cab-btn__contador {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 11px;
  line-height: 18px;
  box-shadow: 0 0 0 2px var(--qs-ink);
}

.qs-cab-avatar {
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  line-height: 0;
}

.qs-cab-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28);
  transition: box-shadow var(--qs-dur) var(--qs-ease);
}

.qs-cab-avatar:hover img,
.qs-cab-avatar.show img { box-shadow: 0 0 0 3px var(--qs-pulse); }

.qs-notificacoes { overflow: hidden; }

.qs-notificacoes__topo {
  padding: var(--qs-s-5) var(--qs-s-6);
  background: var(--qs-ink);
  box-shadow: inset 0 -3px 0 var(--qs-pulse);
}

.qs-notificacoes__titulo { margin: 0; font-size: var(--qs-fs-md); font-weight: 750; color: #fff; }

@media (max-width: 991.98px) {
  .qs-cab-btn { width: var(--qs-h-touch); height: var(--qs-h-touch); }
  .qs-cab-avatar { padding: 4px; } /* 36 px de foto, 44 px de alvo */
}

/* ---------- Menu lateral (spec 014) ---------- */
@media (min-width: 992px) {
  :root {
    --bs-app-sidebar-width: var(--qs-menu-w);
    --bs-app-sidebar-width-actual: var(--qs-menu-w);
  }
}

/* Sem "display" aqui: o tema mostra o menu (flex) no desktop e esconde-o abaixo de 992 px até a gaveta iniciar; com
   "display: flex" o menu aparecia no meio da página do celular enquanto os scripts carregavam. */
.app-sidebar.qs-menu {
  flex-direction: column;
  font-size: var(--qs-fs-base);
  background: var(--qs-surface);
  border-right: 1px solid var(--qs-line) !important;
  overflow: hidden;
}

/* Gaveta fechada fora do alcance do teclado e do leitor de tela (antes os links escondidos recebiam o foco). O tema
   declara a transição da gaveta com !important; aqui o "visibility" espera o fim do deslize ao fechar. */
.app-sidebar.qs-menu.drawer:not(.drawer-on) {
  visibility: hidden;
  transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s !important;
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar.qs-menu.drawer,
  .app-sidebar.qs-menu.drawer:not(.drawer-on) { transition: none !important; }
}

.qs-menu__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qs-s-3);
  padding: var(--qs-s-3) var(--qs-s-3) var(--qs-s-3) var(--qs-s-5);
  border-bottom: 1px solid var(--qs-line);
}

.qs-menu__marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--qs-ink);
  text-decoration: none;
  min-width: 0;
}

.qs-menu__marca span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qs-menu__marca .qs-marca__simbolo { background: var(--qs-ink); color: #fff; flex-shrink: 0; }

.qs-menu__marca .qs-marca__simbolo i { color: inherit; font-size: 16px; }

.qs-menu__fechar {
  display: inline-grid;
  place-items: center;
  width: var(--qs-h-touch);
  height: var(--qs-h-touch);
  border: 0;
  border-radius: var(--qs-radius-control);
  background: transparent;
  color: var(--qs-ink);
  flex-shrink: 0;
}

.qs-menu__fechar:hover { background: var(--qs-neutral-soft); }

.qs-menu__fechar i { font-size: 16px; color: inherit; }

.qs-menu__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--qs-s-5) var(--qs-s-3) var(--qs-s-4);
  scrollbar-width: thin;
}

.qs-menu__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.qs-menu__secao {
  margin: var(--qs-s-5) var(--qs-s-3) var(--qs-s-2);
  font-size: var(--qs-fs-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--qs-ink-2);
}

.qs-menu__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--qs-s-3);
  min-height: 40px;
  padding: var(--qs-s-2) var(--qs-s-3);
  border-radius: 10px;
  color: var(--qs-ink);
  font-weight: 600;
  font-size: var(--qs-fs-base);
  line-height: 1.25;
  text-decoration: none;
  transition: background-color var(--qs-dur) var(--qs-ease), color var(--qs-dur) var(--qs-ease);
}

.qs-menu__link i { font-size: 18px; color: var(--qs-ink-2); flex-shrink: 0; transition: color var(--qs-dur) var(--qs-ease); }

.qs-menu__link:hover { background: var(--qs-neutral-soft); color: var(--qs-ink); }

.qs-menu__link:hover i { color: var(--qs-ink); }

/* Item atual: fundo claro da marca, texto forte (6,2:1) e a barra de indicação — antes um bloco azul sólido. */
.qs-menu__link[aria-current="page"] { background: var(--qs-brand-soft); color: var(--qs-brand-strong); }

.qs-menu__link[aria-current="page"] i { color: var(--qs-brand-strong); }

.qs-menu__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: calc(var(--qs-s-3) * -1);
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--qs-brand);
}

.qs-menu__conta {
  flex-shrink: 0;
  padding: var(--qs-s-3);
  border-top: 1px solid var(--qs-line);
  background: var(--qs-surface-2);
}

.qs-menu__usuario {
  display: flex;
  align-items: center;
  gap: var(--qs-s-3);
  padding: var(--qs-s-2) var(--qs-s-3) var(--qs-s-3);
}

.qs-menu__foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--qs-neutral-soft); }

.qs-menu__quem { min-width: 0; }

.qs-menu__nome,
.qs-menu__papel { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qs-menu__nome { font-weight: 700; color: var(--qs-ink); }

.qs-menu__papel { font-size: var(--qs-fs-sm); color: var(--qs-ink-2); }

.qs-menu__conta .qs-menu__link { min-height: 38px; }

@media (max-width: 991.98px) {
  .qs-menu__link,
  .qs-menu__conta .qs-menu__link { min-height: var(--qs-h-touch); }
}

/* ---------- Conteúdo ---------- */
.card {
  border: 1px solid var(--qs-line);
  border-radius: 16px;
  box-shadow: none;
}

.card .card-header { border-bottom-color: var(--qs-line); }

.btn { font-weight: 640; border-radius: 12px; }

.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active) { background-color: var(--qs-brand-strong) !important; }

.badge { font-weight: 650; border-radius: 999px; }

.form-control,
.form-select { border-radius: 12px; }

.table thead th,
.table thead tr {
  color: var(--qs-ink-2);
  font-weight: 700;
}

.app-footer { color: var(--qs-ink-2); }

/* ---------- Inícios do profissional e da administração (spec 014) ---------- */
.qs-painel-conteudo {
  width: 100%;
  max-width: 1360px;
  padding: var(--qs-s-7) clamp(16px, 3vw, 36px) var(--qs-s-8);
  font-size: var(--qs-fs-base);
  display: grid;
  gap: var(--qs-s-6);
  align-content: start;
}

.qs-painel-conteudo > * { min-width: 0; }

.qs-pagina-cabecalho { display: grid; gap: 2px; }

.qs-pagina-cabecalho__sobre { margin: 0; font-weight: 650; color: var(--qs-brand-strong); }

.qs-pagina-cabecalho__texto { margin: 0; color: var(--qs-ink-2); }

.qs-pagina-titulo {
  font-size: var(--qs-fs-titulo);
  font-weight: 770;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--qs-ink);
}

.qs-bloco {
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-card);
  padding: var(--qs-s-5) var(--qs-s-6) var(--qs-s-6);
  box-shadow: var(--qs-shadow-1);
  min-width: 0;
}

.qs-bloco__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qs-s-3);
  margin-bottom: var(--qs-s-4);
}

.qs-bloco__topo--quebra { flex-wrap: wrap; }

.qs-bloco__titulo { margin: 0; font-size: var(--qs-fs-md); font-weight: 750; color: var(--qs-ink); }

.qs-bloco__nota { margin: 0 0 var(--qs-s-4); font-size: var(--qs-fs-sm); color: var(--qs-ink-2); }

.qs-contagem {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--qs-radius-pill);
  background: var(--qs-warning-soft);
  color: var(--qs-warning);
  font-weight: 750;
  font-size: var(--qs-fs-xs);
  font-variant-numeric: tabular-nums;
}

/* Botões próprios: tonal (texto 6,2:1 sobre o fundo claro; o btn-light-primary do tema fica em 4,4:1) e claro (sobre o destaque). */
.btn.qs-btn-tonal {
  background: var(--qs-brand-soft);
  color: var(--qs-brand-strong);
  border: 0;
  white-space: nowrap;
}

.btn.qs-btn-tonal:hover,
.btn.qs-btn-tonal:focus-visible { background: var(--qs-brand-soft-2); color: var(--qs-brand-strong); }

.btn.qs-btn-clara { background: #fff; color: var(--qs-ink); border: 0; font-weight: 700; }

.btn.qs-btn-clara:hover,
.btn.qs-btn-clara:focus-visible { background: var(--qs-brand-soft); color: var(--qs-ink); }

/* Selos de situação com contraste AA (texto >= 4,6:1 sobre o próprio fundo). */
.qs-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--qs-radius-pill);
  font-size: var(--qs-fs-xs);
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--qs-neutral-soft);
  color: var(--qs-ink-2);
}

.qs-selo--info { background: var(--qs-brand-soft); color: var(--qs-brand-strong); }
.qs-selo--alerta { background: var(--qs-warning-soft); color: var(--qs-warning); }
.qs-selo--ok { background: var(--qs-success-soft); color: var(--qs-success); }
.qs-selo--perigo { background: var(--qs-danger-soft); color: var(--qs-danger); }
.qs-selo--ao-vivo { background: var(--qs-success); color: #fff; }

.qs-selo--ao-vivo::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.qs-selo--claro { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* Pendências */
.qs-pendencias__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--qs-s-2); }

.qs-pendencia {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--qs-s-4);
  padding: var(--qs-s-3) var(--qs-s-4);
  border: 1px solid var(--qs-line);
  border-left: 4px solid #c99a00;
  border-radius: var(--qs-radius-control);
  background: var(--qs-surface-2);
}

.qs-pendencia__icone {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--qs-radius-control);
  background: var(--qs-warning-soft);
  color: var(--qs-warning);
}

.qs-pendencia__icone i { font-size: 20px; color: inherit; }

.qs-pendencia__titulo { margin: 0; font-weight: 700; color: var(--qs-ink); }

.qs-pendencia__detalhe { margin: 2px 0 0; font-size: var(--qs-fs-sm); color: var(--qs-ink-2); }

.qs-pendencias__ok,
.qs-pendencias__falha { display: flex; align-items: center; gap: var(--qs-s-2); margin: 0; font-weight: 600; }

.qs-pendencias__ok { color: var(--qs-success); }

.qs-pendencias__ok i { font-size: 18px; color: inherit; }

.qs-pendencias__falha { margin-top: var(--qs-s-3); color: var(--qs-warning); }

.qs-pendencias__lista + .qs-pendencias__falha { margin-top: var(--qs-s-4); }

/* Alvos de toque de 44 px abaixo de 992 px (os btn-sm do tema ficam em ~32 px). */
@media (max-width: 991.98px) {
  .qs-pendencia .btn,
  .qs-agenda__estado .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--qs-h-touch);
  }
}

@media (max-width: 575.98px) {
  .qs-pendencia { grid-template-columns: auto minmax(0, 1fr); }
  .qs-pendencia .btn { grid-column: 1 / -1; justify-self: stretch; }
}

/* Grade: 2/3 + 1/3 a partir de 1200 px */
.qs-inicio-grade { display: grid; gap: var(--qs-s-6); grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1200px) {
  .qs-inicio-grade { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* Destaque: a consulta em atendimento ou a próxima (mesmo gradiente do destaque do app). */
.qs-destaque {
  --qs-hero-a: #06384e;
  --qs-hero-b: #075a80;
  --qs-hero-c: #066a96;
  --qs-hero-linha: #8fe3ff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--qs-s-4);
  align-content: start;
  min-height: 236px;
  padding: var(--qs-s-6);
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(0, 194, 255, 0.14), transparent 55%),
    linear-gradient(125deg, var(--qs-hero-a) 0%, var(--qs-hero-b) 55%, var(--qs-hero-c) 100%);
  border-radius: var(--qs-radius-hero);
  box-shadow: 0 20px 44px -20px rgba(6, 56, 78, 0.6);
}

.qs-destaque.is-ao-vivo {
  --qs-hero-a: #04392f;
  --qs-hero-b: #065f4b;
  --qs-hero-c: #09654f;
  --qs-hero-linha: #7cf0d6;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.45), 0 20px 44px -20px rgba(4, 57, 47, 0.6);
}

.qs-destaque__rotulo {
  margin: 0;
  font-size: var(--qs-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}

.qs-destaque__corpo { display: grid; gap: var(--qs-s-4); }

.qs-destaque__quando { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--qs-s-2) var(--qs-s-4); }

.qs-destaque__hora {
  font-size: clamp(32px, 26px + 1.6vw, 44px);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.qs-destaque__dia { font-weight: 650; color: rgba(255, 255, 255, 0.92); }

.qs-destaque__pessoa { display: flex; align-items: center; gap: var(--qs-s-3); min-width: 0; }

.qs-destaque__pessoa > div { min-width: 0; }

.qs-destaque__foto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4); }

.qs-destaque__nome { margin: 0; font-size: var(--qs-fs-lg); font-weight: 750; overflow-wrap: anywhere; }

.qs-destaque__meta,
.qs-destaque__texto { margin: 0; color: rgba(255, 255, 255, 0.9); }

.qs-destaque__titulo { margin: 0; font-size: var(--qs-fs-xl); font-weight: 750; }

.qs-destaque__vazio { margin: 0; color: rgba(255, 255, 255, 0.9); }

.qs-destaque__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-s-3); margin-top: var(--qs-s-1); }

.qs-destaque__acoes .btn { min-height: var(--qs-h-touch); }

.qs-destaque__ecg {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 18px;
  width: min(60%, 420px);
  height: 44px;
  opacity: 0.35;
  fill: none;
  stroke: var(--qs-hero-linha);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Resumo */
.qs-resumo { display: flex; flex-direction: column; }

.qs-resumo__lista { margin: 0; display: grid; gap: var(--qs-s-2); }

.qs-resumo__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--qs-s-3);
  padding: var(--qs-s-3) 0;
  border-bottom: 1px solid var(--qs-line);
}

.qs-resumo__item dt { font-weight: 600; color: var(--qs-ink-2); }

.qs-resumo__item dd {
  margin: 0;
  font-size: 24px;
  font-weight: 780;
  line-height: 1;
  color: var(--qs-ink);
  font-variant-numeric: tabular-nums;
}

.qs-resumo__nota { margin: var(--qs-s-3) 0 0; font-size: var(--qs-fs-xs); color: var(--qs-ink-2); }

/* Fora da coluna lateral (abaixo de 1200 px) o resumo vira três quadros lado a lado. */
@media (max-width: 1199.98px) {
  .qs-resumo__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qs-resumo__item {
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 6px;
    padding: var(--qs-s-3);
    border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius-control);
    background: var(--qs-surface-2);
  }
  .qs-resumo__item dt { font-size: var(--qs-fs-sm); line-height: 1.3; }
}

@media (max-width: 575.98px) {
  .qs-destaque__ecg { display: none; }
}

/* Agenda: dias e uma linha por consulta */
.qs-filtro { min-width: 210px; min-height: 40px; }

/* Spec 015: no celular o filtro ocupa a linha (com 16 px o select crescia até a opção mais longa e passava da tela). */
@media (max-width: 575.98px) {
  .qs-agenda-painel .qs-bloco__topo > .d-flex { flex: 1 1 100%; min-width: 0; }
  .qs-agenda-painel .qs-filtro { flex: 1 1 auto; width: 100% !important; min-width: 0; }
}

@media (max-width: 991.98px) {
  .qs-filtro { min-height: var(--qs-h-touch); }
}

.qs-agenda { display: grid; gap: var(--qs-s-5); }

.qs-agenda__estado {
  padding: var(--qs-s-5);
  border: 1px dashed var(--qs-line-strong);
  border-radius: var(--qs-radius-control);
  background: var(--qs-surface-2);
  color: var(--qs-ink-2);
  font-weight: 600;
}

.qs-agenda__estado--erro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-s-3); border-style: solid; border-color: var(--qs-danger); color: var(--qs-danger); background: var(--qs-danger-soft); }

.qs-agenda-dia__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--qs-s-2);
  margin: 0 0 var(--qs-s-2);
  font-size: var(--qs-fs-base);
  font-weight: 750;
  color: var(--qs-ink);
}

.qs-agenda-dia__data { font-weight: 600; color: var(--qs-ink-2); }

.qs-agenda-dia__total { margin-left: auto; font-size: var(--qs-fs-xs); font-weight: 600; color: var(--qs-ink-2); }

.qs-agenda-dia__itens { display: grid; gap: var(--qs-s-2); }

.card.qs-consulta {
  display: grid;
  grid-template-columns: 56px 40px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: var(--qs-s-3) var(--qs-s-4);
  padding: var(--qs-s-3) var(--qs-s-4);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-control);
  box-shadow: none;
  color: var(--qs-ink);
  text-decoration: none;
  transition: border-color var(--qs-dur) var(--qs-ease), background-color var(--qs-dur) var(--qs-ease);
}

.card.qs-consulta:hover { border-color: var(--qs-brand); background: var(--qs-surface-2); }

.qs-consulta__hora { font-size: var(--qs-fs-md); font-weight: 780; font-variant-numeric: tabular-nums; color: var(--qs-ink); }

.qs-consulta__foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--qs-neutral-soft); }

.qs-consulta__info { display: grid; min-width: 0; }

.qs-consulta__nome { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qs-consulta__meta,
.qs-consulta__email { font-size: var(--qs-fs-sm); color: var(--qs-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qs-consulta__fim { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.qs-consulta__valor { font-weight: 700; font-variant-numeric: tabular-nums; }

.qs-consulta__seta { font-size: 16px; color: var(--qs-ink-2); }

@media (max-width: 767.98px) {
  .card.qs-consulta { grid-template-columns: 48px minmax(0, 1fr) 16px; gap: 6px var(--qs-s-3); }
  .qs-consulta__foto,
  .qs-consulta__email { display: none; }
  .qs-consulta__hora { align-self: start; font-size: 15px; padding-top: 1px; }
  .qs-consulta__fim { grid-column: 2; grid-row: 2; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .qs-consulta__seta { grid-column: 3; grid-row: 1 / span 2; }
}

/* Indicadores */
/* 2 × 2 até 1200 px (antes, no tablet, ficava um quadro sozinho na segunda linha), 4 lado a lado depois. */
.qs-kpis { display: grid; gap: var(--qs-s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 1200px) {
  .qs-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.qs-kpi {
  display: block;
  height: 100%;
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-card);
  padding: var(--qs-s-5);
  color: var(--qs-ink);
  text-decoration: none;
  box-shadow: var(--qs-shadow-1);
}

a.qs-kpi { transition: border-color var(--qs-dur) var(--qs-ease), box-shadow var(--qs-dur) var(--qs-ease); }

a.qs-kpi:hover { border-color: var(--qs-brand); color: var(--qs-ink); box-shadow: var(--qs-shadow-pop); }

.qs-kpi__topo { display: flex; align-items: center; justify-content: space-between; }

.qs-kpi__icone {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--qs-radius-control);
  background: var(--qs-brand-soft);
  color: var(--qs-brand-strong);
}

/* O ícone do tema não herdava o tamanho do quadro (ficava com 12–13 px). */
.qs-kpi__icone i { font-size: 20px; color: inherit; }

.qs-kpi__seta { font-size: 18px; color: var(--qs-ink-2); transition: transform var(--qs-dur) var(--qs-ease), color var(--qs-dur) var(--qs-ease); }

a.qs-kpi:hover .qs-kpi__seta { color: var(--qs-brand-strong); transform: translateX(3px); }

.qs-kpi__valor {
  font-size: 2.25rem;
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 16px 0 6px;
  font-variant-numeric: tabular-nums;
}

.qs-kpi__rotulo { color: var(--qs-ink-2); font-weight: 600; margin: 0; }

@media (max-width: 575.98px) {
  .qs-kpis { gap: var(--qs-s-3); }
  .qs-kpi { padding: var(--qs-s-4); }
  .qs-kpi__icone { width: 36px; height: 36px; }
  .qs-kpi__icone i { font-size: 18px; }
  .qs-kpi .qs-kpi__valor { font-size: 28px; margin: 12px 0 4px; }
  .qs-kpi__rotulo { font-size: var(--qs-fs-sm); line-height: 1.3; }
}

/* Atalhos da administração */
.qs-atalhos-painel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--qs-s-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.qs-atalho {
  display: flex;
  align-items: center;
  gap: var(--qs-s-3);
  min-height: var(--qs-h-touch);
  padding: var(--qs-s-2) var(--qs-s-3);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-control);
  color: var(--qs-ink);
  font-weight: 650;
  text-decoration: none;
  transition: border-color var(--qs-dur) var(--qs-ease), background-color var(--qs-dur) var(--qs-ease);
}

.qs-atalho:hover { border-color: var(--qs-brand); background: var(--qs-surface-2); color: var(--qs-ink); }

.qs-atalho__icone {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--qs-brand-soft);
  color: var(--qs-brand-strong);
  flex-shrink: 0;
}

.qs-atalho__icone i { font-size: 18px; color: inherit; }

.qs-atalho__mais { margin-left: auto; font-size: 16px; color: var(--qs-ink-2); }

/* Consultas por situação */
.qs-situacao__linha {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) 40px 44px;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.qs-situacao__nome { font-weight: 600; color: var(--qs-ink); }

.qs-situacao__parte { text-align: right; font-size: var(--qs-fs-xs); color: var(--qs-ink-2); font-variant-numeric: tabular-nums; }

.qs-situacao__barra {
  height: 10px;
  border-radius: 999px;
  background: var(--qs-bg);
  overflow: hidden;
}

.qs-situacao__barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--qs-brand);
}

.qs-situacao__barra .is-pendente { background: #c99a00; }
.qs-situacao__barra .is-atendimento { background: var(--qs-pulse); }
.qs-situacao__barra .is-concluido { background: var(--qs-success); }
.qs-situacao__barra .is-cancelado { background: var(--qs-danger); }

.qs-situacao__total { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 575.98px) {
  .qs-situacao__linha { grid-template-columns: 104px minmax(0, 1fr) 28px 40px; gap: 8px; }
  .qs-bloco { padding: var(--qs-s-4) var(--qs-s-4) var(--qs-s-5); }
}

/* ---------- Entrar (painel) ---------- */
.qs-auth-painel {
  background: var(--qs-ink) !important;
  position: relative;
}

.qs-auth-painel::after {
  content: "";
  position: absolute;
  left: clamp(40px, 6vw, 96px);
  bottom: 56px;
  width: 64px;
  height: 3px;
  border-radius: 3px;
  background: var(--qs-pulse);
}

.qs-auth-painel .qs-auth-titulo {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  font-weight: 780;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #fff;
  margin: 20px 0 10px;
}

.qs-auth-painel .qs-auth-sub { color: rgba(255, 255, 255, 0.8); font-size: 1.05rem; }

.qs-auth-painel .qs-auth__pontos {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.qs-auth-painel .qs-auth__pontos li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 560;
  margin-bottom: 10px;
}

.qs-auth-painel .qs-auth__pontos i { color: var(--qs-pulse); font-size: 1.2rem; }

/* Telas de autenticação: fundo do tema (sem a imagem de demonstração) */
body.app-blank { background: var(--qs-bg) !important; }

@media (max-width: 991.98px) {
  .qs-auth-painel::after { display: none; }
  .qs-auth-painel .qs-auth__pontos { display: none; }
}

/* Paginação das listas */
.page-item.active .page-link,
.page-link.active {
  background-color: var(--qs-brand) !important;
  border-color: var(--qs-brand) !important;
  color: #fff !important;
}

/* Aviso do prontuário e outros avisos claros com borda tracejada do tema */
.notice.bg-light-primary {
  background-color: var(--qs-brand-soft) !important;
  border-color: var(--qs-brand) !important;
  color: var(--qs-ink);
}

/* ==========================================================================================================
 * Spec 015 — responsividade, tipografia, formulários e tabelas em todas as telas do painel (camada comum).
 * ========================================================================================================== */

/* ---------- Tipografia ---------- */
/* O tema fixa a raiz em 13 px e em 12 px abaixo de 992 px (com !important). Como os tamanhos do tema são em rem, o
   celular ficava menor que o desktop (selos de 10 px, ajudas de 11 px). 14 px em todas as larguras. */
html,
body {
  font-size: 14px !important;
}

/* Título da tela: o mesmo tamanho na barra de título, dentro do cartão (listas) e no início. */
h1.page-heading,
h1.card-title {
  font-size: var(--qs-fs-titulo) !important;
  font-weight: 750 !important;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--qs-ink) !important;
}

/* Subtítulo da barra de título. */
.app-toolbar .page-title p {
  font-size: var(--qs-fs-base) !important;
  color: var(--qs-ink-2) !important;
}

/* Título de bloco dentro do cartão. */
.card-header h2.card-title,
.card-header h3.card-title,
.card-header .card-title > h2,
.card-header .card-title > h3 {
  font-size: var(--qs-fs-lg) !important;
  font-weight: 700 !important;
  color: var(--qs-ink);
}

/* Mínimo de 12 px (selos e utilitários pequenos) e 13 px nas ajudas e no breadcrumb. */
.badge { --bs-badge-font-size: var(--qs-fs-xs); }
.fs-8,
.fs-9 { font-size: var(--qs-fs-xs) !important; }
/* Sem !important: as mensagens que usam .form-text com .text-danger/.text-success (prontuário, laudo) mantêm a cor. */
.form-text { color: var(--qs-ink-2); }
.breadcrumb,
.breadcrumb .breadcrumb-item { font-size: var(--qs-fs-sm) !important; }

/* ---------- Formulários ---------- */
.invalid-feedback,
.fv-plugins-message-container .invalid-feedback {
  font-size: var(--qs-fs-sm);
  color: var(--qs-danger);
}

/* Campo com erro (FormValidation): a borda acompanha a mensagem (as telas não marcavam o campo). */
.fv-plugins-bootstrap5-row-invalid .form-control,
.fv-plugins-bootstrap5-row-invalid .form-select,
.fv-plugins-bootstrap5-row-invalid .select2-container .select2-selection {
  border-color: var(--qs-danger) !important;
  box-shadow: inset 0 0 0 1px var(--qs-danger);
}

/* Busca das listas sem ícone próprio: a lupa diz o que o campo é (o nome para o leitor de tela é o aria-label). */
input[data-qs-busca] {
  padding-left: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5f67' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px 50%;
  background-size: 16px 16px;
}

/* Celular: 16 px nos campos (com menos, o Safari do iPhone amplia a página ao focar e não volta). */
@media (max-width: 767.98px) {
  /* Sem espaço entre :is() e :not() (com espaço viraria "descendente de"). Os campos maiores (lg, fs-1 a fs-3 — o
     código da 2ª etapa) ficam como estão. */
  :is(.form-control, .form-select, textarea, select, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="time"]):not(.form-control-lg):not(.form-select-lg):not(.fs-1):not(.fs-2):not(.fs-3),
  .select2-container .select2-selection,
  .select2-container .select2-search__field {
    font-size: 16px !important;
  }
}

/* Toque (celular e tablet, inclusive deitado): 44 px de altura nos campos de uma linha (e nos -sm das buscas). */
@media (max-width: 1199.98px) {
  .form-control:not(textarea):not([type="file"]):not([type="color"]),
  .form-select,
  .select2-container .select2-selection--single {
    min-height: var(--qs-h-touch);
  }
}

/* Modais de formulário entre 576 e 991 px: o Bootstrap limita lg/xl a 500 px (campos de 101 px). */
@media (min-width: 576px) and (max-width: 991.98px) {
  .modal-lg,
  .modal-xl { --bs-modal-width: min(720px, calc(100vw - 48px)); }
}

@media (max-width: 575.98px) {
  .modal-dialog { margin: 12px; }
  .modal-footer { flex-wrap: wrap; gap: 8px; }
}

/* ---------- Tabelas ---------- */
/* .table:not(.table-bordered): o tema põe font-size/weight/color "inherit" em th/td com essa força (0,2,1). */
.table:not(.table-bordered) > thead > tr > th,
.table:not(.table-bordered) > thead > tr > td,
.table.table-bordered > thead > tr > th {
  font-size: var(--qs-fs-sm);
  font-weight: 650;
  color: var(--qs-ink-2);
  letter-spacing: 0.01em;
}

.table:not(.table-bordered) > tbody > tr > td,
.table.table-bordered > tbody > tr > td { font-size: var(--qs-fs-base); }

/* Campo dentro da célula (valor da tabela de preços): largura útil mesmo com a coluna apertada. */
.table > tbody > tr > td .form-control { min-width: 7.5rem; }

.table .dt-type-numeric,
.table .dt-type-date { font-variant-numeric: tabular-nums; }

.table > tbody > tr:hover > * { --bs-table-bg-state: var(--qs-surface-2); }

/* Rolagem horizontal visível: sombra no lado que tem mais colunas (some quando chega ao fim). */
.table-responsive {
  background:
    linear-gradient(90deg, var(--qs-surface) 30%, rgba(255, 255, 255, 0)) 0 0 / 40px 100% no-repeat,
    linear-gradient(270deg, var(--qs-surface) 30%, rgba(255, 255, 255, 0)) 100% 0 / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(14, 42, 51, 0.2), rgba(14, 42, 51, 0)) 0 0 / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(14, 42, 51, 0.2), rgba(14, 42, 51, 0)) 100% 0 / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* O DataTables põe um segundo .table-responsive dentro do primeiro: só o de dentro rola; o de fora não recorta o
   contorno de foco dele. */
.table-responsive:has(> .dt-container) {
  overflow: visible;
  background: none;
}

/*
 * Listas em cartões abaixo de 992 px — celular e tablet em pé, onde as listas de 6 a 9 colunas não cabiam (contêiner
 * .qs-tabela-cartoes; rótulos e marcas das células: qs-painel.js). Cada linha vira um cartão "coluna | valor" com as
 * ações no pé; os cabeçalhos ordenáveis viram botões de ordenar. No tablet, dois cartões por linha.
 */
@media (max-width: 991.98px) {
  .qs-tabela-cartoes {
    overflow: visible;
    background: none;
  }

  .qs-tabela-cartoes table,
  .qs-tabela-cartoes table > tbody,
  .qs-tabela-cartoes table > tbody > tr,
  .qs-tabela-cartoes table > tbody > tr > td {
    display: block;
    width: 100% !important;
  }

  .qs-tabela-cartoes table { margin: 0 !important; }

  .qs-tabela-cartoes table > thead { display: block; }

  /* Os botões de ordenar numa faixa só, que rola de lado (listas de até 9 colunas ocupavam 5 linhas). */
  .qs-tabela-cartoes table > thead > tr {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    position: relative;
    margin-bottom: var(--qs-s-2);
    padding: 8px 6px;
    overflow-x: auto;
    scrollbar-width: thin;
    border: 0 !important;
  }

  .qs-tabela-cartoes table > thead > tr::before {
    content: "Ordenar:";
    flex-shrink: 0;
    font-size: var(--qs-fs-sm);
    font-weight: 650;
    color: var(--qs-ink-2);
  }

  /* Os cabeçalhos que não ordenam ficam só para o leitor de tela (com display: none as células eram anunciadas com o
     cabeçalho da coluna seguinte); a coluna de ações também não vira botão de ordenar. */
  .qs-tabela-cartoes table > thead > tr > th,
  .qs-tabela-cartoes table > thead > tr > th[data-qs-acoes] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0 !important;
  }

  .qs-tabela-cartoes table > thead > tr > th.dt-orderable-asc:not([data-qs-acoes]),
  .qs-tabela-cartoes table > thead > tr > th.dt-orderable-desc:not([data-qs-acoes]) {
    position: static !important;
    height: auto !important;
    overflow: visible;
    clip-path: none;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px;
    padding: 6px 12px !important;
    border: 1px solid var(--qs-line-strong) !important;
    border-radius: var(--qs-radius-pill);
    background: var(--qs-surface);
    white-space: nowrap;
    cursor: pointer;
  }

  .qs-tabela-cartoes table > thead > tr > th.dt-ordering-asc,
  .qs-tabela-cartoes table > thead > tr > th.dt-ordering-desc {
    border-color: var(--qs-brand) !important;
    background: var(--qs-brand-soft);
    color: var(--qs-brand-strong);
  }

  /* !important: o tema zera o padding lateral da primeira e da última linha (.table tr:first-child/:last-child). */
  .qs-tabela-cartoes table > tbody > tr {
    margin-bottom: var(--qs-s-3);
    padding: var(--qs-s-3) var(--qs-s-4) !important;
    border: 1px solid var(--qs-line) !important;
    border-radius: var(--qs-radius-control);
    background: var(--qs-surface);
    box-shadow: var(--qs-shadow-1);
  }

  .qs-tabela-cartoes table > tbody > tr:hover > * { --bs-table-bg-state: transparent; }

  .qs-tabela-cartoes table > tbody > tr > td {
    display: grid;
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
    gap: 2px var(--qs-s-3);
    align-items: baseline;
    padding: 6px 0 !important;
    border: 0 !important;
    text-align: left !important;
    overflow-wrap: anywhere;
  }

  .qs-tabela-cartoes table > tbody > tr > td.text-nowrap { white-space: normal !important; }

  /* Selos no tamanho do texto (na grade eles esticavam até o fim da coluna). */
  .qs-tabela-cartoes table > tbody > tr > td > .badge { justify-self: start; }

  .qs-tabela-cartoes table > tbody > tr > td::before {
    content: attr(data-label);
    font-size: var(--qs-fs-sm);
    font-weight: 650;
    color: var(--qs-ink-2);
    overflow-wrap: normal;
  }

  /* Sem nome de coluna (estado vazio, célula que ocupa a linha toda): só o conteúdo. */
  .qs-tabela-cartoes table > tbody > tr > td:not([data-label]) {
    display: block;
    text-align: center !important;
  }

  .qs-tabela-cartoes table > tbody > tr > td:not([data-label])::before { content: none; }

  .qs-tabela-cartoes table > tbody > tr > td[data-qs-midia] { display: block; padding-bottom: 2px !important; }

  .qs-tabela-cartoes table > tbody > tr > td[data-qs-midia]::before { content: none; }

  .qs-tabela-cartoes table > tbody > tr > td[data-qs-acoes] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    padding-top: var(--qs-s-3) !important;
    border-top: 1px solid var(--qs-line) !important;
  }

  .qs-tabela-cartoes table > tbody > tr > td[data-qs-acoes]::before { content: none; }

  .qs-tabela-cartoes table > tbody > tr > td[data-qs-acoes]:not(:has(*)) { display: none; }

  .qs-tabela-cartoes table > tbody > tr > td[data-qs-acoes] > .btn,
  .qs-tabela-cartoes table > tbody > tr > td[data-qs-acoes] > form,
  .qs-tabela-cartoes table > tbody > tr > td[data-qs-acoes] > a {
    flex: 1 1 auto;
    margin: 0 !important;
  }

  /* Lado a lado quando cabem; cada um com 44 px de altura. */
  .qs-tabela-cartoes table > tbody > tr > td[data-qs-acoes] .btn {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: var(--qs-h-touch);
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .qs-tabela-cartoes table > tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--qs-s-3);
  }

  .qs-tabela-cartoes table > tbody > tr { margin-bottom: 0; }

  .qs-tabela-cartoes table > tbody > tr:has(> td.dt-empty) { grid-column: 1 / -1; }
}

/* As larguras mínimas dos cabeçalhos do tema (min-w-100px … min-w-200px) são de desktop largo: abaixo de 1400 px elas
   faziam a tabela passar do contêiner mesmo com conteúdo que cabia. Pelo mesmo motivo, os botões da coluna de ações
   (text-nowrap) podem ir para uma segunda linha. */
@media (max-width: 1399.98px) {
  .table > thead > tr > th[class*="min-w-"] { min-width: 0 !important; }

  .table > tbody > tr > td[data-qs-acoes] { white-space: normal !important; }

  .table > tbody > tr > td[data-qs-acoes] .btn { margin-block: 2px; }
}

/* Tabelas que continuam tabela no celular: células mais justas (o tema usa 0,75 rem de cada lado). */
@media (max-width: 575.98px) {
  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media (max-width: 359.98px) {
  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* ---------- Layout ---------- */
/* Telas cujo cartão fica direto no conteúdo (listas e cadastros do administrador): a mesma margem das outras, sem
   encostar no menu nem na borda. */
#kt_app_main > .card { margin: 24px 30px 32px; }

@media (max-width: 991.98px) {
  #kt_app_main > .card { margin: 16px 20px 24px; }
}

@media (max-width: 575.98px) {
  #kt_app_main > .card { margin: 12px 16px 20px; }

  .app-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .card.p-5 { padding: 0 !important; }

  .card .card-header,
  .card .card-body,
  .card .card-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Título e ferramentas do cartão (busca, botão de cadastrar) um embaixo do outro, com a busca na largura toda — só
     nos cartões do conteúdo (não nas gavetas, como a de mensagens do atendimento). */
  #kt_app_main .card .card-header .card-title,
  #kt_app_main .card .card-header .card-toolbar { flex: 1 1 100%; }

  #kt_app_main .card .card-header .card-toolbar { gap: 8px; }

  #kt_app_main .card .card-header input[type="search"],
  #kt_app_main .card .card-header .card-title > .position-relative {
    flex: 1 1 100%;
    width: 100% !important;
  }

  #kt_app_main .card .card-header .card-toolbar > .btn:not(.btn-icon) { flex: 1 1 auto; }
}

/* Contadores do perfil (account/contador.php): grade, dois por linha no celular. */
.qs-contadores {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(124px, calc(50% - 6px)), 1fr));
  gap: var(--qs-s-3);
}

.qs-contadores > * {
  min-width: 0 !important;
  margin: 0 !important;
}

/* ---------- Toque e contraste ---------- */
/* Links soltos (rodapé, breadcrumb, "Esqueceu a senha?") com pelo menos 24 px de altura. */
.app-footer a,
.breadcrumb .breadcrumb-item a,
a.link-primary {
  display: inline-block;
  padding-block: 4px;
}

/* Botões e selos claros da marca: o azul do tema sobre o fundo claro dava 4,4:1; o azul forte dá 6,2:1. */
.btn.btn-light-primary:not(:hover):not(:focus):not(:active):not(.active),
.btn.btn-light-info:not(:hover):not(:focus):not(:active):not(.active),
.badge.badge-light-primary,
.badge.badge-light-info {
  color: var(--qs-brand-strong) !important;
}