/*
 * Quick Saúde — tema do app do paciente (feature 003, specs/003-evolucao-local).
 *
 * Camada de design sobre o template OneUIUX (assets/scss/style.css): tokens próprios + restyle
 * dos componentes. Carregado depois do CSS do template e ANTES de qs-ajustes.css (acessibilidade),
 * que continua sendo a última folha de estilo da página.
 *
 * Direção: "clínico e calmo". Tinta azul-petróleo para texto, ciano da marca escurecido para ações,
 * o ciano original só em detalhes não textuais, fundo azulado bem claro e superfícies brancas com
 * borda fina. Uma única família tipográfica (Figtree) com contraste de peso; horário e valor em
 * números grandes e tabulares. O elemento memorável é o cartão da próxima consulta.
 */

/* ---------- Tipografia (fonte local, sem CDN) ---------- */
@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;
}

/* ---------- Tokens ---------- */
:root {
  --qs-ink: #0e2a33;          /* texto principal (azul-petróleo) */
  --qs-ink-2: #4a5f67;        /* texto secundário — 6,3:1 sobre o fundo */
  --qs-brand: #0077a8;        /* ações — 5:1 com texto branco */
  --qs-brand-strong: #005f87;
  --qs-brand-soft: #e4f3f9;
  --qs-pulse: #00c2ff;        /* ciano original: só detalhe não textual */
  --qs-bg: #f4f8f9;
  --qs-surface: #ffffff;
  --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-surface-2: #f8fbfc;    /* fundo de linha em hover / áreas secundárias */
  --qs-neutral-soft: #eef3f5;
  --qs-brand-soft-2: #cfe8f2; /* hover sobre --qs-brand-soft */

  --qs-font: "Figtree Variable", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala tipográfica (feature 004). Corpo nunca abaixo de 14 px; selos 13 px semibold. */
  --qs-fs-xs: 0.8125rem;   /* 13 — selos */
  --qs-fs-sm: 0.875rem;    /* 14 — metadados */
  --qs-fs-base: 1rem;      /* 16 — corpo */
  --qs-fs-md: 1.125rem;    /* 18 — títulos de bloco */
  --qs-fs-lg: 1.25rem;     /* 20 */
  --qs-fs-xl: 1.5rem;      /* 24 */
  --qs-fs-2xl: 1.875rem;   /* 30 — saudação */
  --qs-fs-display: clamp(2.75rem, 2.2rem + 2vw, 3.5rem); /* horário da próxima consulta */

  /* Espaçamento: escala de 4 px. */
  --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-s-9: 48px;
  --qs-s-10: 64px;

  /* Raios: hierarquia (destaque > cartão > controle > pequeno). */
  --qs-radius-hero: 20px;
  --qs-radius-card: 16px;
  --qs-radius-control: 12px;
  --qs-radius-sm: 8px;
  --qs-radius-pill: 999px;

  /* Sombras: só o destaque e o que flutua (gaveta, avisos) têm elevação. */
  --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-shadow-hero: 0 18px 40px -16px rgba(14, 42, 51, 0.5);
  --qs-shadow-float: 0 -8px 24px rgba(14, 42, 51, 0.06);

  /* Alturas de controle; alvo de toque mínimo de 44 px (WCAG 2.5.8 pede 24). */
  --qs-h-control: 48px;
  --qs-h-control-sm: 44px;
  --qs-h-touch: 44px;

  /* Layout. Breakpoints usados: 576 / 768 / 992 (menu fixo) / 1200 (dashboard em 2 colunas). */
  --qs-nav-w: 272px;
  --qs-nav-rail: 80px;
  --qs-header-h: 64px;
  --qs-content-max: 1200px;
  --qs-gutter: 16px;

  --qs-ease: cubic-bezier(0.2, 0, 0, 1);
  --qs-dur: 200ms;
}

@media (min-width: 768px) {
  :root { --qs-gutter: 24px; }
}

@media (min-width: 1200px) {
  :root { --qs-gutter: 32px; }
}

/* O template usa estas variáveis em todos os componentes: o tema novo entra por elas. */
:root,
.theme-cyan:not(.dark-mode) {
  --oneuiux-theme-color: var(--qs-brand);
  --oneuiux-theme-color-grad-1: var(--qs-brand);
  --oneuiux-theme-color-grad-2: var(--qs-brand);
  --oneuiux-theme-color-grad-3: var(--qs-brand-strong);
  --oneuiux-page-bg-1: var(--qs-bg);
  --oneuiux-page-bg-2: var(--qs-bg);
  --oneuiux-page-bg-3: var(--qs-bg);
  --oneuiux-page-text: var(--qs-ink);
  --oneuiux-theme-text-primary: var(--qs-ink);
  --oneuiux-header-active: var(--qs-surface);
  --oneuiux-footer: var(--qs-surface);
  --oneuiux-sidebar: var(--qs-ink);
  --oneuiux-rounded: var(--qs-radius-card);
  --oneuiux-input-rounded: var(--qs-radius-control);
  --oneuiux-theme-bordercolor: var(--qs-line);
  --bs-body-font-family: var(--qs-font);
  --bs-body-color: var(--qs-ink);
  --bs-body-bg: var(--qs-bg);
}

/* ---------- Base ---------- */
html,
body {
  font-family: var(--qs-font);
}

body,
body.bg-theme {
  background: var(--qs-bg) !important;
  color: var(--qs-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" on;
}

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

h1, .h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); font-weight: 760; letter-spacing: -0.02em; }
h2, .h2 { font-size: 1.5rem; font-weight: 720; }
h3, .h3 { font-size: 1.25rem; font-weight: 700; }
h4, .h4 { font-size: 1.125rem; font-weight: 680; }
h5, .h5, h6, .h6 { font-size: 1rem; font-weight: 650; }

p, li, td, th, label, .form-label { line-height: 1.5; }

.text-secondary,
.text-muted { color: var(--qs-ink-2) !important; }

/* Texto de 10px é pequeno demais para o público do app. */
.size-10 { font-size: 12px !important; }

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

a { color: var(--qs-brand); }

/* A tela de carregamento cobria a página por 1,6 s em toda navegação; o conteúdo já chega pronto. */
.loader-wrap { display: none !important; }

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

.header:after {
  background-color: var(--qs-surface) !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 0 var(--qs-line) !important;
  opacity: 1 !important;
}

.header .btn-default,
.header .btn-link {
  background: transparent !important;
  color: var(--qs-ink) !important;
  border: 0;
}

.header .btn-default:hover,
.header .btn-default:focus-visible {
  background: var(--qs-brand-soft) !important;
}

.header .btn-44 i { font-size: 1.35rem; }

.header .text-white { color: var(--qs-ink) !important; }

/* Marca (cabeçalho e menu lateral) */
.qs-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: var(--qs-ink);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.qs-marca:hover { color: var(--qs-ink); text-decoration: none; }

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

.header .logo-container {
  width: auto !important;
  height: 44px !important;
  display: flex;
  align-items: center;
}

/* Cabeçalho compartilhado (header.php, feature 004): menu, marca, busca, avisos e perfil. */
.header.qs-topo {
  padding: 0 var(--qs-gutter);
  line-height: 1.2;
}

.qs-topo__linha {
  display: flex;
  align-items: center;
  gap: var(--qs-s-2);
  height: var(--qs-header-h);
}

.qs-topo__marca { min-width: 0; margin-left: var(--qs-s-1); }
.qs-topo__marca .qs-marca__nome { overflow: hidden; text-overflow: ellipsis; }

.qs-topo__busca {
  display: none;
  align-items: center;
  gap: var(--qs-s-3);
  flex: 0 1 380px;
  min-width: 0;
  height: var(--qs-h-touch);
  margin-left: var(--qs-s-4);
  padding: 0 var(--qs-s-4);
  border: 1px solid var(--qs-line-strong);
  border-radius: var(--qs-radius-pill);
  background: var(--qs-surface-2);
  color: var(--qs-ink-2);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--qs-dur) var(--qs-ease), background-color var(--qs-dur) var(--qs-ease);
}

.qs-topo__busca span { overflow: hidden; text-overflow: ellipsis; }
.qs-topo__busca i { color: var(--qs-brand); font-size: 1.1rem; }

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

.qs-topo__acoes {
  display: flex;
  align-items: center;
  gap: var(--qs-s-1);
  margin-left: auto;
}

.qs-topo__contador {
  position: absolute;
  top: 6px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--qs-radius-pill);
  background: var(--qs-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--qs-surface);
}

.qs-topo__avatar {
  display: inline-grid;
  place-items: center;
  width: var(--qs-h-touch);
  height: var(--qs-h-touch);
  border-radius: 50%;
  transition: background-color var(--qs-dur) var(--qs-ease);
}

.qs-topo__avatar:hover { background: var(--qs-brand-soft); }

.qs-topo__avatar img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--qs-brand-soft);
  box-shadow: 0 0 0 1px var(--qs-line-strong);
}

@media (min-width: 768px) {
  .qs-topo__busca { display: inline-flex; }
}

/* ---------- Conteúdo ---------- */
.main-container {
  background: transparent !important;
  border-radius: 0 !important;
}

@media (min-width: 992px) {
  .main-container.container { max-width: 1080px; }
}

/* ---------- Botões ---------- */
.btn {
  font-family: var(--qs-font);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 640;
  border-radius: var(--qs-radius-control);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-rounded { border-radius: var(--qs-radius-control); }

.btn-44.btn-rounded,
.btn-40.btn-rounded,
.btn-32.btn-rounded { border-radius: 50%; }

.btn-lg { min-height: 52px; font-size: 1.0625rem; }

.btn-default {
  background-color: var(--qs-brand);
  color: #fff;
}

.btn-default:hover,
.btn-default:active { background-color: var(--qs-brand-strong); color: #fff; }

.btn-light {
  background: var(--qs-surface);
  border: 1px solid var(--qs-line-strong);
  color: var(--qs-ink);
}

.btn:active { transform: translateY(1px); }

/* ---------- Cartões, listas e alertas ---------- */
.card {
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-card);
  box-shadow: none;
}

.card.shadow-sm,
.card.shadow { box-shadow: 0 2px 10px rgba(14, 42, 51, 0.06) !important; }

.card-header,
.card-footer {
  background: transparent;
  border-color: var(--qs-line);
}

/* Cabeçalhos verdes das listas (históricos, dependentes) viram título da página. */
.card-header.bg-success {
  background: transparent !important;
  color: var(--qs-ink) !important;
  border-bottom: 1px solid var(--qs-line);
  text-align: left;
  font-size: 1.15rem;
  font-weight: 720;
}

.list-group-item { border-color: var(--qs-line); }

.alert {
  border: 0;
  border-radius: var(--qs-radius-control);
  font-weight: 560;
}

.alert-success { background: var(--qs-success-soft); color: var(--qs-success); }
.alert-warning { background: var(--qs-warning-soft); color: var(--qs-warning); }
.alert-danger { background: var(--qs-danger-soft); color: var(--qs-danger); }
.alert-info,
.alert-primary { background: var(--qs-brand-soft); color: var(--qs-brand-strong); }

/* Etiquetas de estado */
.tag {
  height: 26px;
  line-height: 26px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  padding: 0 10px;
  border: 0;
}

.tag.bg-theme { background: var(--qs-brand) !important; color: #fff !important; }
.tag.bg-warning { background: var(--qs-warning-soft) !important; color: var(--qs-warning) !important; }
.tag.bg-success { background: var(--qs-success-soft) !important; color: var(--qs-success) !important; }
.tag.bg-danger { background: var(--qs-danger-soft) !important; color: var(--qs-danger) !important; }

.badge { font-weight: 650; letter-spacing: 0; }

/* ---------- Formulários ---------- */
.form-control,
.form-select {
  min-height: 48px;
  border: 1px solid var(--qs-line-strong);
  border-radius: var(--qs-radius-control);
  background-color: var(--qs-surface);
  color: var(--qs-ink);
  font-size: 1rem; /* 16px: evita zoom automático no iOS */
}

.form-control:focus,
.form-select:focus {
  border-color: var(--qs-brand);
  box-shadow: 0 0 0 3px rgba(0, 119, 168, 0.18);
}

.form-control::placeholder { color: #7b8d94; }

.form-floating > label { color: var(--qs-ink-2); }

.form-label,
.form-floating > label,
label { font-weight: 560; }

.form-check-input:checked {
  background-color: var(--qs-brand);
  border-color: var(--qs-brand);
}

/* ---------- Navegação inferior ---------- */
.footer {
  background: var(--qs-surface) !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--qs-line) !important;
  box-shadow: var(--qs-shadow-float) !important;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.footer .nav .nav-item .nav-link {
  color: var(--qs-ink-2);
  font-weight: 600;
  background: transparent !important;
}

.footer .nav .nav-item .nav-link.active {
  color: var(--qs-brand) !important;
}

.footer .nav .nav-item .nav-link .nav-icon { font-size: 1.3rem; }

.footer .nav .nav-item .nav-link .nav-text { font-size: 12px; letter-spacing: 0; }

/* Botão central de busca: círculo da marca com ícone simples (o desenho antigo era decorativo). */
.footer .nav .nav-item.squarebtn .nav-link > span {
  width: 56px;
  height: 56px;
  line-height: 56px;
  border-radius: 50%;
  background: var(--qs-brand) !important;
  box-shadow: 0 8px 20px rgba(0, 119, 168, 0.35);
  position: relative;
}

.footer .nav .nav-item.squarebtn .nav-link > span svg { display: none; }

.footer .nav .nav-item.squarebtn .nav-link > span::before {
  content: "\F52A"; /* bi-search */
  font-family: "bootstrap-icons";
  font-size: 1.4rem;
  color: #fff;
}

.theme-linear-gradient { background: var(--qs-brand) !important; }

/* ---------- Menu lateral do template (telas que ainda o usam) ---------- */
.sidebar-wrap .sidebar {
  background: var(--qs-ink) !important;
}

.sidebar-wrap .sidebar .nav-link { color: rgba(255, 255, 255, 0.86); font-weight: 600; }
.sidebar-wrap .sidebar .nav-link.active,
.sidebar-wrap .sidebar .nav-link:hover { color: #fff; }

.sidebar-wrap .sidebar .text-muted { color: rgba(255, 255, 255, 0.72) !important; }

/* ---------- Navegação principal (feature 004, sidebar.php) ----------
 * Celular/tablet: gaveta sobre o conteúdo, aberta pelo botão de menu do cabeçalho (classe
 * .menu-open, a mesma que o main.js do template alterna). Desktop (>= 992 px): fixa à esquerda,
 * recolhível para uma faixa de ícones (html.qs-menu-recolhido). */
.qs-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  width: min(86vw, var(--qs-nav-w));
  display: flex;
  flex-direction: column;
  gap: var(--qs-s-4);
  padding: var(--qs-s-4) var(--qs-s-3);
  background: var(--qs-surface);
  border-right: 1px solid var(--qs-line);
  color: var(--qs-ink);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--qs-dur) var(--qs-ease), visibility 0s linear var(--qs-dur);
}

.menu-open .qs-nav {
  transform: none;
  visibility: visible;
  box-shadow: var(--qs-shadow-pop);
  transition: transform var(--qs-dur) var(--qs-ease), visibility 0s;
}

.qs-nav-fundo {
  position: fixed;
  inset: 0;
  z-index: 1039;
  background: rgba(14, 42, 51, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--qs-dur) var(--qs-ease), visibility 0s linear var(--qs-dur);
}

.menu-open .qs-nav-fundo {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--qs-dur) var(--qs-ease), visibility 0s;
}

.qs-nav__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qs-s-2);
  min-height: 48px;
  padding: 0 var(--qs-s-2) 0 var(--qs-s-3);
}

.qs-nav__topo .qs-marca { min-width: 0; }
.qs-nav__topo .qs-marca__nome { overflow: hidden; text-overflow: ellipsis; }

.qs-nav__usuario {
  display: flex;
  align-items: center;
  gap: var(--qs-s-3);
  padding: var(--qs-s-3);
  border-radius: var(--qs-radius-card);
  background: var(--qs-surface-2);
  border: 1px solid var(--qs-line);
  min-width: 0;
}

.qs-nav__usuario img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--qs-brand-soft);
}

.qs-nav__usuario-texto { min-width: 0; }

.qs-nav__nome {
  margin: 0;
  font-weight: 700;
  font-size: var(--qs-fs-base);
  line-height: 1.25;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qs-nav__local {
  margin: 2px 0 0;
  font-size: var(--qs-fs-sm);
  color: var(--qs-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qs-nav__menu { display: flex; flex-direction: column; gap: var(--qs-s-4); flex: 1 0 auto; }

.qs-nav__grupo {
  margin: 0 0 var(--qs-s-1);
  padding: 0 var(--qs-s-3);
  font-size: var(--qs-fs-xs);
  font-weight: 700;
  color: var(--qs-ink-2);
}

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

.qs-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--qs-s-3);
  width: 100%;
  min-height: var(--qs-h-touch);
  padding: 0 var(--qs-s-3);
  border: 0;
  border-radius: var(--qs-radius-control);
  background: transparent;
  color: var(--qs-ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--qs-dur) var(--qs-ease), color var(--qs-dur) var(--qs-ease);
}

.qs-nav__link i {
  flex: none;
  width: 24px;
  font-size: 1.25rem;
  text-align: center;
  color: var(--qs-ink-2);
}

.qs-nav__link:hover {
  background: var(--qs-bg);
  color: var(--qs-ink);
  text-decoration: none;
}

.qs-nav__link.is-ativo,
.qs-nav__link.is-ativo:hover {
  background: var(--qs-brand-soft);
  color: var(--qs-brand-strong);
  font-weight: 720;
}

.qs-nav__link.is-ativo i { color: var(--qs-brand-strong); }

.qs-nav__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qs-nav__rodape {
  margin-top: auto;
  padding-top: var(--qs-s-3);
  border-top: 1px solid var(--qs-line);
}

.qs-nav .qs-nav__recolher { display: none; }

.qs-icone-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--qs-h-touch);
  height: var(--qs-h-touch);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--qs-ink);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--qs-dur) var(--qs-ease);
}

.qs-icone-btn:hover { background: var(--qs-brand-soft); color: var(--qs-ink); }

/* ---------- Avatares e fotos ---------- */
.avatar img,
.coverimg img { object-fit: cover; }

.rounded-18 { border-radius: 14px !important; }

/* ---------- Tabelas (históricos) ---------- */
.table { color: var(--qs-ink); }
.table > thead th {
  font-size: 12px;
  font-weight: 700;
  color: var(--qs-ink-2);
  text-transform: none;
  letter-spacing: 0;
  border-bottom-color: var(--qs-line);
}
.table > :not(caption) > * > * { border-bottom-color: var(--qs-line); }

/* ---------- Aviso de instalação (PWA) ---------- */
#toastinstall .toast {
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-card);
  box-shadow: 0 10px 30px rgba(14, 42, 51, 0.14);
  background: var(--qs-surface);
}

/* ---------- Avisos (Notyf) e calendário (Flatpickr) ---------- */
.notyf__toast {
  font-family: var(--qs-font);
  border-radius: var(--qs-radius-control);
  font-weight: 600;
}

.flatpickr-calendar { font-family: var(--qs-font); border-radius: var(--qs-radius-card); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover { background: var(--qs-brand); border-color: var(--qs-brand); }
.flatpickr-day.today { border-color: var(--qs-pulse); }

/* ---------- Componentes base (feature 004) ---------- */

/* Botões. Use um único --primaria/--clara por área; cancelar é sempre --texto-*. */
.qs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qs-s-2);
  min-height: var(--qs-h-control);
  padding: 0 var(--qs-s-5);
  border: 1px solid transparent;
  border-radius: var(--qs-radius-control);
  background: transparent;
  font: inherit;
  font-size: var(--qs-fs-base);
  font-weight: 660;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--qs-dur) var(--qs-ease), border-color var(--qs-dur) var(--qs-ease), color var(--qs-dur) var(--qs-ease);
}

.qs-btn i { font-size: 1.15em; line-height: 1; }
.qs-btn:hover { text-decoration: none; }
.qs-btn:active { transform: translateY(1px); }

.qs-btn--sm {
  min-height: var(--qs-h-control-sm);
  padding: 0 var(--qs-s-4);
  font-size: 0.9375rem;
}

.qs-btn--primaria,
.qs-btn--primaria:visited { background: var(--qs-brand); color: #fff; }
.qs-btn--primaria:hover { background: var(--qs-brand-strong); color: #fff; }

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

.qs-btn--contorno { background: var(--qs-surface); border-color: var(--qs-line-strong); color: var(--qs-ink); }
.qs-btn--contorno:hover { background: var(--qs-brand-soft); border-color: var(--qs-brand); color: var(--qs-ink); }

.qs-btn--texto-perigo { color: var(--qs-danger); padding-inline: var(--qs-s-3); }
.qs-btn--texto-perigo:hover { background: var(--qs-danger-soft); color: var(--qs-danger); }

/* Variantes sobre a superfície escura do destaque. */
.qs-btn--clara { background: #fff; color: var(--qs-ink); }
.qs-btn--clara:hover { background: var(--qs-brand-soft); color: var(--qs-ink); }

.qs-btn--contorno-claro { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.qs-btn--contorno-claro:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); color: #fff; }

.qs-btn--texto-claro { color: rgba(255, 255, 255, 0.9); padding-inline: var(--qs-s-3); }
.qs-btn--texto-claro:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* Selos de situação e pagamento: texto + ponto de cor (a cor nunca é a única pista). */
.qs-selos { display: flex; flex-wrap: wrap; gap: var(--qs-s-2); }

.qs-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--qs-radius-pill);
  background: var(--qs-neutral-soft);
  color: var(--qs-ink-2);
  font-size: var(--qs-fs-xs);
  font-weight: 660;
  line-height: 1.1;
}

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

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

.qs-selo--ao-vivo::before { background: var(--qs-pulse); animation: qs-pulso 1.6s ease-out infinite; }

@keyframes qs-pulso {
  0% { box-shadow: 0 0 0 0 rgba(0, 194, 255, 0.6); }
  100% { box-shadow: 0 0 0 7px rgba(0, 194, 255, 0); }
}

/* Bloco: seção de conteúdo com título (superfície branca, borda fina, sem sombra). */
.qs-bloco {
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-card);
  min-width: 0;
}

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

.qs-bloco__titulo {
  margin: 0;
  font-size: var(--qs-fs-md);
  font-weight: 720;
  letter-spacing: -0.01em;
}

.qs-bloco__link {
  font-weight: 650;
  font-size: 0.9375rem;
  white-space: nowrap;
  text-decoration: none;
  padding: var(--qs-s-2) 0;
}

.qs-bloco__link:hover { text-decoration: underline; }

.qs-bloco__corpo { padding: var(--qs-s-5); }

.qs-bloco__nota {
  margin: 0;
  padding: var(--qs-s-5);
  color: var(--qs-ink-2);
}

/* Estados vazio e erro. */
.qs-estado {
  display: grid;
  justify-items: start;
  gap: var(--qs-s-2);
  padding: var(--qs-s-7) var(--qs-s-6);
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-hero);
}

.qs-estado__icone {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--qs-s-2);
  border-radius: 14px;
  background: var(--qs-brand-soft);
  color: var(--qs-brand-strong);
  font-size: 1.5rem;
}

.qs-estado--erro .qs-estado__icone { background: var(--qs-danger-soft); color: var(--qs-danger); }

.qs-estado__titulo { margin: 0; font-size: var(--qs-fs-lg); font-weight: 740; }
.qs-estado__texto { margin: 0 0 var(--qs-s-3); color: var(--qs-ink-2); max-width: 52ch; }

/* ---------- Início do paciente (home.php, feature 004 — iteração 2) ----------
 * A grade responde ao espaço da área de conteúdo (container "dash"), não à janela: com o menu
 * recolhido ou aberto, a tela se reorganiza sozinha. */
.qs-dash {
  container: dash / inline-size;
  max-width: var(--qs-content-max) !important;
  padding-left: var(--qs-gutter) !important;
  padding-right: var(--qs-gutter) !important;
  padding-top: var(--qs-s-6) !important;
}

/* Saudação */
.qs-dash__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--qs-s-4);
  margin-bottom: var(--qs-s-6);
}

.qs-dash__ola {
  display: flex;
  align-items: center;
  gap: var(--qs-s-4);
  flex: 1 1 360px;
  min-width: 0;
}

.qs-dash__periodo {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff6dc 0%, #ffe3a6 100%);
  color: #a15c00;
  font-size: 1.5rem;
  box-shadow: inset 0 0 0 1px rgba(161, 92, 0, 0.12);
}

.qs-dash__periodo--noite {
  background: linear-gradient(135deg, #eef1fd 0%, #d6defb 100%);
  color: #3b4cc0;
  box-shadow: inset 0 0 0 1px rgba(59, 76, 192, 0.12);
}

.qs-dash__saudacao {
  margin: 0;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  font-weight: 760;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

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

/* Grade: celular/tablet em uma coluna (ordem pensada para o polegar); com espaço, 12 colunas. */
.qs-dash__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--qs-s-5);
}

.qs-area { min-width: 0; }
.qs-area--destaque { order: 1; }
.qs-area--atalhos { order: 2; }
.qs-area--agenda { order: 3; }
.qs-area--preparo { order: 4; }
.qs-area--plano { order: 5; }

.qs-area--destaque > .qs-proxima,
.qs-area--preparo > .qs-preparo,
.qs-area--plano > .qs-bloco { height: 100%; }

@container dash (min-width: 940px) {
  .qs-dash__grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--qs-s-6);
  }

  .qs-area--destaque { grid-column: span 8; order: 1; }
  .qs-area--preparo { grid-column: span 4; order: 2; }
  .qs-area--atalhos { grid-column: 1 / -1; order: 3; }
  .qs-area--agenda { grid-column: span 8; order: 4; }
  .qs-area--plano { grid-column: span 4; order: 5; }
  .qs-area--cheia { grid-column: 1 / -1; }
}

/* Título de seção fora de cartão (atalhos). */
.qs-secao {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--qs-s-3);
  margin: 0 0 var(--qs-s-3);
}

.qs-secao__titulo {
  margin: 0;
  font-size: var(--qs-fs-md);
  font-weight: 740;
  letter-spacing: -0.01em;
}

/* Destaque (próxima consulta / boas-vindas): gradiente da marca com linha de pulso animada.
   Texto branco >= 4,9:1 em todo o gradiente, inclusive sob o brilho. */
.qs-proxima {
  --qs-hero-a: #06384e;
  --qs-hero-b: #075a80;
  --qs-hero-c: #066a96;
  --qs-hero-brilho: rgba(0, 194, 255, 0.14);
  --qs-hero-linha: #8fe3ff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  display: grid;
  gap: var(--qs-s-5);
  align-content: space-between;
  padding: var(--qs-s-6);
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--qs-hero-brilho), 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-proxima.is-ao-vivo {
  --qs-hero-a: #04392f;
  --qs-hero-b: #065f4b;
  --qs-hero-c: #09654f; /* texto a 92% >= 4,8:1 mesmo sob o brilho */
  --qs-hero-brilho: rgba(94, 234, 212, 0.14);
  --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);
}

/* Linha de ECG (símbolo da marca): desenhada ao abrir; um pulso de luz percorre a linha. */
.qs-ecg {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  margin: calc(-1 * var(--qs-s-3)) 0;
  color: var(--qs-hero-linha);
  pointer-events: none;
}

.qs-ecg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.qs-ecg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* A linha aparece da esquerda para a direita (recorte), como um traçado de monitor. */
.qs-ecg__base {
  opacity: 0.42;
  animation: qs-ecg-desenha 1.6s var(--qs-ease-out) 0.25s both;
}

/* Um brilho percorre a linha (máscara em movimento); mais rápido com o atendimento em andamento. */
.qs-ecg__pulso path { stroke-width: 3; }

.qs-ecg__pulso {
  filter: drop-shadow(0 0 5px currentColor);
  -webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 49%, #000 51%, transparent 56%);
  mask-image: linear-gradient(90deg, transparent 44%, #000 49%, #000 51%, transparent 56%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: qs-ecg-corre 3.4s linear 1.6s infinite both;
}

.is-ao-vivo .qs-ecg__pulso { animation-duration: 1.8s; }

@keyframes qs-ecg-desenha {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes qs-ecg-corre {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}

.qs-proxima__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--qs-s-2) var(--qs-s-3);
}

.qs-proxima__rotulo {
  margin: 0;
  font-size: var(--qs-fs-base);
  font-weight: 650;
  color: rgba(255, 255, 255, 0.92);
}

/* Selos sobre o destaque: vidro escuro (>= 6:1 mesmo sob o brilho). */
.qs-proxima .qs-selo {
  background: rgba(3, 24, 34, 0.38);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.qs-proxima .qs-selo--ok::before { background: #6ad69a; }
.qs-proxima .qs-selo--alerta::before { background: #ffc94d; }
.qs-proxima .qs-selo--info::before { background: var(--qs-pulse); }
.qs-proxima .qs-selo--ao-vivo::before { background: #7cf0d6; }

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

.qs-proxima__hora {
  margin: 0;
  font-size: var(--qs-fs-display);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}

.qs-proxima__data {
  margin: var(--qs-s-2) 0 0;
  font-size: var(--qs-fs-md);
  font-weight: 650;
}

.qs-proxima__falta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--qs-s-3) 0 0;
  padding: 5px 12px;
  border-radius: var(--qs-radius-pill);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.qs-proxima__falta i { color: var(--qs-hero-linha); }

.qs-proxima__profissional {
  display: flex;
  align-items: center;
  gap: var(--qs-s-3);
  min-width: 0;
  padding-top: var(--qs-s-4);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.qs-proxima__profissional img {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}

.qs-proxima__nome {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 720;
  color: #fff;
  overflow-wrap: anywhere;
}

.qs-proxima__esp {
  margin: 2px 0 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.92);
  overflow-wrap: anywhere;
}

.qs-proxima__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qs-s-3);
}

.qs-proxima__acoes .qs-btn { flex: 1 1 160px; }
.qs-proxima__acoes .qs-btn--texto-claro { flex-basis: 100%; }

.qs-proxima__nota {
  display: flex;
  gap: var(--qs-s-2);
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.92);
}

.qs-proxima__nota i { color: var(--qs-hero-linha); }

@container (min-width: 560px) {
  .qs-proxima__corpo {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--qs-s-7);
  }

  .qs-proxima__profissional {
    padding: 0 0 0 var(--qs-s-7);
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    align-self: stretch;
  }

  .qs-proxima__acoes .qs-btn { flex: 0 0 auto; }
  .qs-proxima__acoes .qs-btn--clara { min-width: 220px; }
  .qs-proxima__acoes .qs-btn--texto-claro { flex-basis: auto; margin-left: auto; }
}

/* Destaque vazio (sem consultas): convite para agendar. */
.qs-proxima--vazio { align-content: center; justify-items: start; padding: var(--qs-s-7) var(--qs-s-6); }

.qs-proxima__icone {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.75rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.qs-proxima__titulo { margin: 0; font-size: var(--qs-fs-xl); font-weight: 760; letter-spacing: -0.015em; color: #fff; }
.qs-proxima__texto { margin: 0; max-width: 48ch; color: rgba(255, 255, 255, 0.92); }

/* Cores por categoria (atalhos e dicas): fundo suave + ícone escuro (ícone >= 4,5:1 sobre o fundo). */
.qs-cor--teal { --cor-fundo: #dcf3ee; --cor-icone: #0f766e; }
.qs-cor--violeta { --cor-fundo: #efeafe; --cor-icone: #6d28d9; }
.qs-cor--ambar { --cor-fundo: #fff1d6; --cor-icone: #b45309; }
.qs-cor--azul { --cor-fundo: #e1f1f8; --cor-icone: #005f87; }
.qs-cor--verde { --cor-fundo: #e0f4e8; --cor-icone: #0b7a37; }
.qs-cor--rosa { --cor-fundo: #fde6ed; --cor-icone: #be123c; }
.qs-cor--indigo { --cor-fundo: #e8edfc; --cor-icone: #3647b8; }
.qs-cor--ciano { --cor-fundo: #dcf4f8; --cor-icone: #0e7490; }

/* Atalhos: 2 por linha no celular, 4 no tablet, 8 numa faixa no desktop. */
.qs-atalhos-grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--qs-s-3);
}

@container dash (min-width: 520px) {
  .qs-atalhos-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* seletor mais específico: a regra-base de .qs-tile vem depois no arquivo */
  .qs-atalhos-grade .qs-tile { flex-direction: column; align-items: flex-start; min-height: 104px; padding: var(--qs-s-4); }
}

@container dash (min-width: 1000px) {
  .qs-atalhos-grade { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

.qs-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--qs-s-3);
  height: 100%;
  min-height: 64px;
  padding: var(--qs-s-3);
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-card);
  box-shadow: var(--qs-shadow-1);
  color: var(--qs-ink);
  font-weight: 680;
  font-size: 0.9375rem;
  line-height: 1.25;
  text-decoration: none;
  transition: transform var(--qs-dur-2) var(--qs-ease-mola), box-shadow var(--qs-dur-2) var(--qs-ease-out), border-color var(--qs-dur-2) var(--qs-ease-out);
}

.qs-tile:hover {
  transform: translateY(-3px);
  border-color: var(--qs-line-strong);
  box-shadow: 0 14px 28px -14px rgba(14, 42, 51, 0.32);
  color: var(--qs-ink);
  text-decoration: none;
}

.qs-tile:active { transform: translateY(-1px) scale(0.98); }

.qs-tile__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--cor-fundo);
  color: var(--cor-icone);
  font-size: 1.25rem;
  transition: transform var(--qs-dur-2) var(--qs-ease-mola);
}

.qs-tile:hover .qs-tile__icone { transform: scale(1.08) rotate(-6deg); }

/* Prepare-se para a consulta (ao lado do destaque). */
.qs-preparo {
  display: flex;
  flex-direction: column;
  gap: var(--qs-s-4);
  padding: var(--qs-s-6);
  background: linear-gradient(180deg, #ffffff 0%, #f1f9fc 100%);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-hero);
  box-shadow: var(--qs-shadow-1);
}

.qs-preparo__titulo { margin: 0; font-size: var(--qs-fs-md); font-weight: 740; letter-spacing: -0.01em; }

.qs-preparo__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  flex: 1;
  align-content: space-evenly;
  gap: var(--qs-s-3);
}

.qs-preparo__item {
  display: flex;
  align-items: center;
  gap: var(--qs-s-3);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.qs-preparo__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--cor-fundo);
  color: var(--cor-icone);
  font-size: 1.05rem;
}

@container dash (min-width: 640px) and (max-width: 939.98px) {
  .qs-preparo__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qs-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Passos numerados (é uma sequência de verdade: buscar, pagar, entrar). */
.qs-passos .qs-preparo__icone {
  border-radius: 50%;
  font-weight: 780;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

/* Plano sozinho na linha (sem consultas): informação e botão lado a lado. */
@container dash (min-width: 640px) {
  .qs-area--plano-linha .qs-bloco__corpo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--qs-s-4);
  }

  .qs-area--plano-linha .qs-plano { margin: 0; }
}

/* Demais consultas: lista compacta dentro de um bloco. */
.qs-agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  container-type: inline-size;
}

.qs-agenda__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--qs-s-3) var(--qs-s-4);
  padding: var(--qs-s-4) var(--qs-s-5);
  transition: background-color var(--qs-dur-2) var(--qs-ease-out);
}

.qs-agenda__item:hover { background: var(--qs-surface-2); }
.qs-agenda__item + .qs-agenda__item { border-top: 1px solid var(--qs-line); }
.qs-agenda__item:last-child { border-radius: 0 0 var(--qs-radius-card) var(--qs-radius-card); }

.qs-agenda__data {
  display: grid;
  place-items: center;
  align-content: center;
  width: 56px;
  height: 60px;
  border-radius: var(--qs-radius-control);
  background: linear-gradient(160deg, #e9f6fb 0%, #d4ecf6 100%);
  color: var(--qs-brand-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  box-shadow: inset 0 0 0 1px rgba(0, 95, 135, 0.08);
}

.qs-agenda__dia { font-size: 1.375rem; font-weight: 780; }
.qs-agenda__mes { font-size: var(--qs-fs-xs); font-weight: 700; }

.qs-agenda__titulo { margin: 0; font-weight: 720; overflow-wrap: anywhere; }
.qs-agenda__meta { margin: 2px 0 0; color: var(--qs-ink-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.qs-agenda__info .qs-selos { margin-top: var(--qs-s-2); }

.qs-agenda__acoes {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--qs-s-2);
}

.qs-agenda__acoes .qs-btn { flex: 1 1 auto; }
.qs-agenda__acoes .qs-btn--texto-perigo { flex: 0 0 auto; }

/* Com espaço, as ações ficam alinhadas ao texto (coluna 2); com muito espaço, à direita. */
@container (min-width: 480px) {
  .qs-agenda__acoes { grid-column: 2; }
  .qs-agenda__acoes .qs-btn { flex: 0 0 auto; }
}

@container (min-width: 820px) {
  .qs-agenda__item { grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; }
  .qs-agenda__acoes { grid-column: 3; justify-content: flex-end; }
}

/* Plano */
.qs-plano {
  display: flex;
  align-items: center;
  gap: var(--qs-s-3);
  margin: 0 0 var(--qs-s-4);
}

.qs-plano__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--cor-fundo);
  color: var(--cor-icone);
  font-size: 1.25rem;
}

.qs-plano__nome { margin: 0; font-weight: 700; font-size: var(--qs-fs-md); overflow-wrap: anywhere; }
.qs-plano__sub { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-sm); }

/* Títulos de seção e vazio simples (busca, receitas, atestados, pedidos, avisos). */
.qs-secao-titulo {
  font-size: 1.15rem;
  font-weight: 720;
  margin: 28px 0 12px;
}

.qs-vazio {
  text-align: center;
  background: var(--qs-surface);
  border: 1px dashed var(--qs-line-strong);
  border-radius: var(--qs-radius-card);
  padding: 28px 20px;
}

.qs-vazio i { font-size: 2rem; color: var(--qs-brand); }
.qs-vazio p { color: var(--qs-ink-2); margin: 8px 0 16px; }

/* ---------- Entrar / cadastro ---------- */
.qs-auth-marca {
  color: #fff;
}

.qs-auth-marca .qs-marca { color: #fff; }
.qs-auth-marca .qs-marca__simbolo { background: #fff; color: var(--qs-ink); box-shadow: inset 0 -3px 0 var(--qs-pulse); }

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

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

@media (max-width: 359.98px) {
  .header .qs-marca__nome { display: none; }
}

/* ---------- Cabeçalho: ícones sempre na mesma linha da marca ---------- */
.header > .row {
  flex-wrap: nowrap;
  align-items: center;
}

.header > .row > .col {
  min-width: 0;
}

.header .qs-marca__nome {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Chips (especialidades) ---------- */
.qs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--qs-line-strong);
  background: var(--qs-surface);
  color: var(--qs-ink);
  font-weight: 620;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
}

.qs-chip i { color: var(--qs-brand); }

.qs-chip:hover { border-color: var(--qs-brand); color: var(--qs-ink); }

.qs-chip.is-ativo {
  background: var(--qs-brand);
  border-color: var(--qs-brand);
  color: #fff;
}

.qs-chip.is-ativo i { color: #fff; }

.qs-rotulo {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--qs-ink-2);
  margin: 18px 0 8px;
}

/* ---------- Agendamento ---------- */
.qs-prof__topo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qs-prof__foto {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  background: var(--qs-brand-soft);
  flex: none;
}

.qs-prof__nome {
  font-size: 1.35rem;
  font-weight: 760;
  margin: 0;
}

.qs-prof__sub { margin: 2px 0 0; color: var(--qs-ink-2); }

#resultado-nav .navbar {
  background: transparent !important;
  padding: 8px 0;
}

#resultado-nav .navbar .container-fluid {
  gap: 10px;
  padding: 0;
}

#tag_diaSemana {
  font-size: 1.5rem !important;
  font-weight: 760;
  color: var(--qs-ink);
  text-transform: none !important;
}

#tag_diaSemana::first-letter { text-transform: uppercase; }

#resultado-nav form { gap: 8px; }

#resultado-nav .dia_busca { max-width: 190px; }

.qs-slot {
  min-height: 48px;
  border-radius: var(--qs-radius-control);
  border: 1px solid var(--qs-line-strong);
  background: var(--qs-surface);
  color: var(--qs-ink);
  font-weight: 700;
  font-size: 1rem;
  padding: 10px 4px;
}

.qs-slot.btn-active { border-color: var(--qs-brand); }

.btn-seta {
  border: 0;
  background: transparent;
  color: var(--qs-brand);
  padding: 0;
  display: grid;
  place-items: center;
  min-height: 48px;
  border-radius: var(--qs-radius-control);
}

.btn-seta:hover { background: var(--qs-brand-soft); }

#footerAgenda {
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0));
}

#footerAgenda .nav { align-items: center; margin: 0 !important; }

#footerAgenda .nav-link { padding: 0 !important; color: var(--qs-ink) !important; }

#valorAtendimento {
  font-size: 1.6rem !important;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
  color: var(--qs-ink);
}

#footerAgenda #Continuar {
  background: var(--qs-brand);
  border-color: var(--qs-brand);
  color: #fff;
  min-width: 160px;
}

/* ---------- Busca: cartão do profissional ---------- */
.qs-prof-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px 14px;
  align-items: center;
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-card);
  padding: 14px;
  margin-bottom: 12px;
}

.qs-prof-card__foto {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  background: var(--qs-brand-soft);
}

.qs-prof-card__nome { font-weight: 720; margin: 0; font-size: 1.05rem; }
.qs-prof-card__esp { margin: 2px 0 0; color: var(--qs-ink-2); font-size: 0.9rem; }

.qs-prof-card__acoes {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
}

.qs-prof-card__acoes .btn { flex: 1 1 0; min-height: 44px; }

#resultado-nav {
  margin: 0;
  padding: 0 2px;
}

/* ---------- Entrar (duas áreas: marca + formulário) ---------- */
.qs-auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--qs-bg);
}

.qs-auth__marca {
  background: var(--qs-ink);
  padding: 28px 22px 64px;
  position: relative;
}

.qs-auth__marca::after {
  content: "";
  position: absolute;
  left: 22px;
  width: 64px;
  bottom: 40px;
  height: 3px;
  border-radius: 3px;
  background: var(--qs-pulse);
}

.qs-auth__pontos {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: none;
}

.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__pontos i { color: var(--qs-pulse); font-size: 1.15rem; }

.qs-auth__form {
  flex: 1;
  display: flex;
  justify-content: center;
  margin-top: -28px;
  position: relative;
  z-index: 1;
}

.qs-auth__caixa {
  width: 100%;
  max-width: 440px;
  background: var(--qs-surface);
  border-radius: var(--qs-radius-hero) var(--qs-radius-hero) 0 0;
  padding: 28px 22px 32px;
  border: 1px solid var(--qs-line);
  border-bottom: 0;
}

.qs-auth__caixa .fv-row { margin-bottom: 18px !important; }

.qs-auth__rodape {
  margin: 24px 0 0;
  text-align: center;
  color: var(--qs-ink-2);
}

.qs-auth__rodape a { font-weight: 700; }

@media (min-width: 992px) {
  .qs-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .qs-auth__marca {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px clamp(40px, 6vw, 96px);
  }

  .qs-auth__marca::after { left: clamp(40px, 6vw, 96px); bottom: 56px; }

  .qs-auth__pontos { display: block; }

  .qs-auth__form {
    align-items: center;
    margin-top: 0;
    padding: 40px;
  }

  .qs-auth__caixa {
    border-radius: var(--qs-radius-hero);
    border-bottom: 1px solid var(--qs-line);
    padding: 36px 32px;
    box-shadow: 0 10px 30px rgba(14, 42, 51, 0.08);
  }
}

/* ---------- Formulários longos (cadastro) ---------- */
.qs-form-secao {
  font-size: 1.05rem;
  font-weight: 720;
  color: var(--qs-ink);
  margin: 8px 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--qs-line);
}

.qs-form-secao:first-of-type { border-top: 0; padding-top: 0; }

body[data-page="signup"] main.container,
body[data-page="forgot-password"] main.container {
  max-width: 720px;
  padding-top: 96px;
}

/* ---------- Páginas de lista (receitas, atestados) ---------- */
.qs-pagina-titulo {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
  font-weight: 770;
  letter-spacing: -0.02em;
  margin: 8px 0 4px;
}

.qs-docs {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 10px;
}

.qs-doc {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-card);
  padding: 12px 14px;
}

.qs-doc__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--qs-brand-soft);
  color: var(--qs-brand-strong);
  font-size: 1.25rem;
}

.qs-doc__titulo { margin: 0; font-weight: 700; }
.qs-doc__meta { margin: 2px 0 0; color: var(--qs-ink-2); font-size: 0.9rem; }

@media (max-width: 420px) {
  .qs-doc { grid-template-columns: 44px 1fr; }
  .qs-doc .btn { grid-column: 1 / -1; }
}

/* ---------- Conversa ---------- */
.qs-chat-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-card);
  margin-bottom: 14px;
}

.qs-chat-topo img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  background: var(--qs-brand-soft);
}

.qs-chat-topo__nome { font-size: 1.1rem; font-weight: 740; margin: 0; }
.qs-chat-topo__sub { margin: 2px 0 0; color: var(--qs-ink-2); font-size: 0.9rem; }

.chat-list .left-chat .chat-block {
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  color: var(--qs-ink);
  border-radius: 16px 16px 16px 4px;
}

.chat-list .right-chat .chat-block {
  background: var(--qs-brand);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}

.chat-list .left-chat .chat-block:before,
.chat-list .right-chat .chat-block:before { display: none; }

.chat-post {
  border-radius: 0 !important;
  border-top: 1px solid var(--qs-line);
  box-shadow: var(--qs-shadow-float);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0)) !important;
}

.chat-post .form-control { border-radius: var(--qs-radius-control) 0 0 var(--qs-radius-control); }

.chat-post #mensagen_send {
  width: 52px;
  border-radius: 0 var(--qs-radius-control) var(--qs-radius-control) 0 !important;
  background: var(--qs-brand);
  color: #fff;
  border-color: var(--qs-brand);
  height: 48px;
}

/* ---------- Notificações ---------- */
.qs-avisos { display: grid; gap: 10px; padding-bottom: 24px; }

.qs-aviso {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-card);
  padding: 12px 14px;
}

.qs-aviso__icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--qs-brand-soft);
  color: var(--qs-brand-strong);
  font-size: 1.15rem;
}

.qs-aviso--alert .qs-aviso__icone,
.qs-aviso--warning .qs-aviso__icone { background: var(--qs-warning-soft); color: var(--qs-warning); }

.qs-aviso--erro .qs-aviso__icone { background: var(--qs-danger-soft); color: var(--qs-danger); }

.qs-aviso__titulo { margin: 0; font-weight: 700; }
.qs-aviso__texto { margin: 2px 0 0; color: var(--qs-ink); }
.qs-aviso__quando { margin: 4px 0 0; color: var(--qs-ink-2); font-size: 0.85rem; }

/* ---------- DataTables (históricos, dependentes) ---------- */
.dataTables_wrapper .dataTables_length select {
  min-width: 84px;
  width: auto;
  display: inline-block;
  padding-right: 2rem;
}

.dataTables_wrapper .dataTables_filter input { margin-left: 8px; }

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 10px !important;
  min-width: 44px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--qs-brand) !important;
  border-color: var(--qs-brand) !important;
  color: #fff !important;
}

/* ---------- Página de erro (404) ---------- */
.qs-erro {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 20px;
}

.qs-erro__codigo {
  font-size: clamp(5rem, 4rem + 6vw, 8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--qs-brand);
  margin: 0 0 12px;
  font-variant-numeric: tabular-nums;
}

.qs-erro__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Barra superior da página de contratação de plano */
.qs-barra-marca {
  background: var(--qs-ink) !important;
  box-shadow: inset 0 -3px 0 var(--qs-pulse);
}

.qs-barra-marca .navbar-brand { color: #fff !important; font-weight: 700; }

/* Conversa sem mensagens */
#chatList:empty::before {
  content: "Nenhuma mensagem ainda. Escreva abaixo para falar com o profissional sobre esta consulta.";
  display: block;
  text-align: center;
  color: var(--qs-ink-2);
  padding: 32px 16px;
}

/* ---------- Estrutura com menu (feature 004) ----------
 * Vale para toda tela que inclui sidebar.php (detectada por body:has(.qs-nav), sem editar as
 * telas). Sem suporte a :has() o navegador usa o layout de celular, que continua funcional. */
.qs-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (min-width: 992px) {
  :root { --qs-nav-atual: var(--qs-nav-w); }
  html.qs-menu-recolhido { --qs-nav-atual: var(--qs-nav-rail); }

  body:has(.qs-nav) { padding-left: var(--qs-nav-atual); }

  /* Animação só quando o usuário recolhe/expande (classe posta pelo script do menu). */
  .qs-menu-transicao body,
  .qs-menu-transicao .qs-nav,
  .qs-menu-transicao .header.position-fixed,
  .qs-menu-transicao #footerAgenda,
  .qs-menu-transicao .chat-post {
    transition: padding-left var(--qs-dur) var(--qs-ease), left var(--qs-dur) var(--qs-ease), width var(--qs-dur) var(--qs-ease) !important;
  }

  .qs-nav,
  .menu-open .qs-nav {
    width: var(--qs-nav-atual);
    transform: none;
    visibility: visible;
    box-shadow: none;
  }

  .qs-nav-fundo,
  .qs-nav__fechar { display: none !important; }

  .qs-nav .qs-nav__recolher { display: inline-grid; }

  /* A gaveta do template trava a rolagem; no desktop o menu não é gaveta. */
  html:has(.qs-nav).menu-open,
  body:has(.qs-nav).menu-open { overflow: visible; }

  /* Cabeçalho, barras e avisos fixos começam depois do menu. */
  body:has(.qs-nav) .header.position-fixed,
  body:has(.qs-nav) #footerAgenda,
  body:has(.qs-nav) .chat-post {
    left: var(--qs-nav-atual) !important;
    right: 0;
    width: auto !important;
  }

  body:has(.qs-nav) .header .menu-btn,
  body:has(.qs-nav) .qs-topo__marca { display: none; }

  /* A barra inferior é a navegação do celular; no desktop o menu lateral tem os mesmos itens. */
  body:has(.qs-nav) .footer:has(.nav-justified) { display: none; }

  body:has(.qs-nav) .main-container.container { max-width: min(1080px, 100%); }
  body:has(.qs-nav) .main-container.qs-dash { max-width: var(--qs-content-max) !important; }

  #toastinstall { margin-bottom: var(--qs-s-6) !important; }

  /* Menu recolhido: faixa de ícones; os nomes continuam disponíveis para leitores de tela
     e aparecem como dica (title) ao passar o mouse. */
  .qs-menu-recolhido .qs-nav { padding-inline: var(--qs-s-3); }

  .qs-menu-recolhido .qs-nav__topo { flex-direction: column; gap: var(--qs-s-2); padding: 0; }

  .qs-menu-recolhido .qs-nav__texto,
  .qs-menu-recolhido .qs-nav .qs-marca__nome,
  .qs-menu-recolhido .qs-nav__usuario-texto,
  .qs-menu-recolhido .qs-nav__grupo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .qs-menu-recolhido .qs-nav__usuario {
    justify-content: center;
    padding: var(--qs-s-1);
    background: transparent;
    border-color: transparent;
  }

  .qs-menu-recolhido .qs-nav__link { justify-content: center; padding: 0; }

  .qs-menu-recolhido .qs-nav__secao + .qs-nav__secao {
    padding-top: var(--qs-s-3);
    border-top: 1px solid var(--qs-line);
  }
}

@media (min-width: 992px) and (pointer: fine) {
  .qs-nav { gap: var(--qs-s-3); }
  .qs-nav__menu { gap: var(--qs-s-3); }
  .qs-nav__link { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .qs-selo--ao-vivo::before { animation: none; }

  /* Sem atraso nem quadros intermediários: a página aparece pronta. */
  .qs-anima,
  .qs-atalhos-grade > li,
  .qs-ecg__base,
  .menu-open .qs-nav__usuario,
  .menu-open .qs-nav__secao { animation: none !important; }

  .qs-ecg__pulso { display: none; }

  .qs-tile:hover,
  .qs-btn:hover { transform: none !important; }
}

/* ---------- Vida e movimento (feature 004, iteração 2) ----------
 * Uma entrada orquestrada ao abrir a página e respostas ao toque/hover. Tudo é desligado pela regra
 * global de "reduzir movimento" em qs-ajustes.css. */
:root {
  --qs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --qs-ease-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
  --qs-dur-1: 140ms;
  --qs-dur-2: 220ms;
  --qs-dur-3: 560ms;
}

@media (min-width: 1600px) {
  :root { --qs-content-max: 1320px; }
}

/* Fundo com uma faixa suave da marca no topo (todas as telas do app). */
body,
body.bg-theme {
  background:
    radial-gradient(900px 340px at 85% -120px, rgba(0, 194, 255, 0.14), transparent 70%),
    linear-gradient(180deg, #e4f2f8 0, rgba(244, 248, 249, 0) 380px) no-repeat,
    var(--qs-bg) !important;
}

/* Cabeçalho em vidro ao rolar. */
.header.active:after {
  background-color: rgba(255, 255, 255, 0.84) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

.qs-marca__simbolo {
  background: linear-gradient(135deg, #06384e 0%, #0077a8 100%);
  box-shadow: inset 0 -3px 0 var(--qs-pulse), 0 6px 14px -6px rgba(0, 95, 135, 0.6);
}

/* Entrada da página */
@keyframes qs-surgir {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.qs-anima {
  animation: qs-surgir var(--qs-dur-3) var(--qs-ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.qs-atalhos-grade > li {
  animation: qs-surgir 460ms var(--qs-ease-out) both;
  animation-delay: calc(200ms + var(--i, 0) * 35ms);
}

/* Botões: elevação no hover e "afundar" no toque. */
.qs-btn {
  transition: background-color var(--qs-dur-2) var(--qs-ease-out), border-color var(--qs-dur-2) var(--qs-ease-out),
    color var(--qs-dur-2) var(--qs-ease-out), box-shadow var(--qs-dur-2) var(--qs-ease-out), transform var(--qs-dur-2) var(--qs-ease-mola);
}

.qs-btn--primaria:hover,
.qs-btn--clara:hover,
.qs-btn--tonal:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -10px rgba(0, 95, 135, 0.65);
}

.qs-btn--clara:hover { box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.45); }

.qs-btn:active { transform: translateY(0) scale(0.98); }

.qs-btn--clara i,
.qs-btn--contorno i { color: var(--qs-brand); }

.qs-btn--contorno:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -12px rgba(0, 95, 135, 0.5);
}

/* Menu: indicador da página atual, ícones que respondem ao hover e cascata ao abrir a gaveta. */
.qs-nav__link.is-ativo,
.qs-nav__link.is-ativo:hover {
  background: linear-gradient(90deg, var(--qs-brand-soft) 0%, #eef8fc 100%);
  box-shadow: inset 3px 0 0 var(--qs-brand);
}

.qs-nav__link i { transition: transform var(--qs-dur-2) var(--qs-ease-mola), color var(--qs-dur-2) var(--qs-ease-out); }
.qs-nav__link:hover i { transform: translateX(2px) scale(1.06); color: var(--qs-brand-strong); }

.qs-nav__usuario {
  background: linear-gradient(135deg, #f3fafd 0%, #e8f4f9 100%);
}

.qs-nav__usuario img {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--qs-brand-soft-2);
}

@keyframes qs-deslizar {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 991.98px) {
  .menu-open .qs-nav__usuario,
  .menu-open .qs-nav__secao { animation: qs-deslizar 380ms var(--qs-ease-out) both; }
  .menu-open .qs-nav__usuario { animation-delay: 40ms; }
  .menu-open .qs-nav__secao:nth-child(1) { animation-delay: 80ms; }
  .menu-open .qs-nav__secao:nth-child(2) { animation-delay: 120ms; }
  .menu-open .qs-nav__secao:nth-child(3) { animation-delay: 160ms; }
  .menu-open .qs-nav__secao:nth-child(4) { animation-delay: 200ms; }
  .menu-open .qs-nav__secao:nth-child(5) { animation-delay: 240ms; }
}

/* Barra inferior do celular: pílula atrás do ícone ativo (padrão Material 3) e botão central em
   gradiente. Só visual — os links continuam os mesmos em todas as telas. */
.footer .nav .nav-item .nav-link span .nav-icon {
  display: block;
  width: 56px;
  height: 30px;
  line-height: 30px;
  margin: 0 auto 3px;
  border-radius: var(--qs-radius-pill);
  font-size: 1.25rem;
  transition: background-color var(--qs-dur-2) var(--qs-ease-out), color var(--qs-dur-2) var(--qs-ease-out), transform var(--qs-dur-2) var(--qs-ease-mola);
}

.footer .nav .nav-item .nav-link.active span .nav-icon {
  background: var(--qs-brand-soft);
  color: var(--qs-brand-strong);
}

.footer .nav .nav-item .nav-link.active span .nav-text {
  color: var(--qs-brand-strong);
  font-weight: 720;
}

.footer .nav .nav-item .nav-link:active span .nav-icon { transform: scale(0.9); }

.footer .nav .nav-item.squarebtn .nav-link > span {
  background: linear-gradient(135deg, #06384e 0%, #0077a8 100%) !important;
  box-shadow: 0 12px 24px -8px rgba(0, 95, 135, 0.6), 0 0 0 4px var(--qs-surface);
  transition: transform var(--qs-dur-2) var(--qs-ease-mola), box-shadow var(--qs-dur-2) var(--qs-ease-out);
}

.footer .nav .nav-item.squarebtn .nav-link:hover > span { transform: translateY(-2px); }
.footer .nav .nav-item.squarebtn .nav-link:active > span { transform: scale(0.94); }

/* Cartões e blocos das demais telas: mesma elevação sutil do início. */
.qs-bloco,
.card { box-shadow: var(--qs-shadow-1); }

/* ---------- Telas do paciente (spec 009) ----------
 * Histórico, pagamentos, fatura Pix, sala de vídeo, mensagens, dependentes, planos e formulários com a
 * linguagem do início: título com texto de apoio e uma ação, listas em blocos (.qs-agenda), selos com
 * texto e estados vazios com uma ação. */

/* Página: título, texto de apoio e a ação da tela (à direita no desktop, embaixo no celular). A largura da página
   (não a da janela) decide o layout dos blocos: com o menu aberto ou recolhido, a tela se reorganiza sozinha. */
.qs-pagina {
  container: pagina / inline-size;
  display: grid;
  align-content: start;
  gap: var(--qs-s-6);
  max-width: 1080px !important;
  padding: var(--qs-s-6) var(--qs-gutter) 0 !important;
}

/* Sem o script do template (que mede o cabeçalho), o título não fica embaixo do cabeçalho fixo. */
main:has(> .qs-pagina) { padding-top: calc(var(--qs-header-h) + 10px); }

.qs-pagina__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--qs-s-3) var(--qs-s-5);
}

.qs-pagina__titulo {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
  font-weight: 770;
  letter-spacing: -0.02em;
}

.qs-pagina__texto { margin: var(--qs-s-1) 0 0; color: var(--qs-ink-2); max-width: 62ch; }

.qs-pagina__acoes { display: flex; flex-wrap: wrap; gap: var(--qs-s-2); }

.qs-pagina__voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--qs-s-2);
  min-height: var(--qs-h-touch);
  margin-bottom: calc(var(--qs-s-4) * -1);
  font-weight: 650;
  text-decoration: none;
  justify-self: start;
}

@media (max-width: 575.98px) {
  .qs-pagina__acoes { width: 100%; }
  .qs-pagina__acoes .qs-btn { flex: 1 1 auto; }
}

/* Selos que faltavam: erro (cancelada, recusado) e neutro explícito. */
.qs-selo--erro { background: var(--qs-danger-soft); color: var(--qs-danger); }
.qs-selo--neutro { background: var(--qs-neutral-soft); color: var(--qs-ink-2); }

/* Aguardando pagamento: o ponto pulsa enquanto a tela confere o Pix sozinha. */
.qs-selo--aguardando::before { animation: qs-pulso-alerta 1.6s ease-out infinite; }

@keyframes qs-pulso-alerta {
  0% { box-shadow: 0 0 0 0 rgba(143, 103, 0, 0.45); }
  100% { box-shadow: 0 0 0 7px rgba(143, 103, 0, 0); }
}

/* Listas: a mesma linha da agenda do início, com foto (dependentes, conversas) ou ícone (pagamentos). */
.qs-agenda__foto {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  background: var(--qs-brand-soft);
  box-shadow: 0 0 0 1px var(--qs-line);
}

.qs-agenda__icone {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--qs-radius-control);
  background: var(--cor-fundo, var(--qs-brand-soft));
  color: var(--cor-icone, var(--qs-brand-strong));
  font-size: 1.35rem;
}

.qs-agenda__valor {
  margin: var(--qs-s-2) 0 0;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.qs-agenda__valor span { color: var(--qs-ink-2); font-weight: 560; }

/* Ação que é um formulário (ex.: "Pagar com Pix" que gera a cobrança): o botão entra na fila das outras ações. */
.qs-agenda__acoes form,
.qs-form-acao { display: contents; }

.qs-agenda__previa {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Linha inteira clicável (conversas): o link do título cobre o item. */
.qs-agenda__item--link { position: relative; }
.qs-agenda__alvo { color: inherit; text-decoration: none; }
.qs-agenda__alvo:hover { color: var(--qs-brand-strong); }
.qs-agenda__alvo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.qs-agenda__alvo:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.qs-agenda__alvo:focus-visible::after {
  outline: 3px solid #ffc20e;
  outline-offset: -4px;
  box-shadow: inset 0 0 0 6px #1a1a1a;
}

/* Dados em pares (resumo da fatura e do plano). */
.qs-dados {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: var(--qs-s-2) var(--qs-s-5);
  margin: 0;
}

.qs-dados dt { color: var(--qs-ink-2); font-weight: 560; }
.qs-dados dd { margin: 0; font-weight: 640; overflow-wrap: anywhere; }

@media (max-width: 419.98px) {
  .qs-dados { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .qs-dados dd + dt { margin-top: var(--qs-s-2); }
}

/* Profissional (resumo da fatura). */
.qs-pessoa { display: flex; align-items: center; gap: var(--qs-s-3); margin-bottom: var(--qs-s-4); }
.qs-pessoa img { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--qs-brand-soft); }
.qs-pessoa__nome { margin: 0; font-weight: 720; overflow-wrap: anywhere; }
.qs-pessoa__sub { margin: 0; color: var(--qs-ink-2); font-size: 0.9375rem; }

/* ---------- Fatura Pix ----------
 * Valor em destaque, passos, "copia e cola" e o QR Code num cartão branco. No celular o QR vem depois:
 * quem paga pelo próprio celular usa o código copiado; o QR serve para pagar de outro aparelho. */
.qs-pix {
  display: grid;
  gap: var(--qs-s-6);
  padding: var(--qs-s-6);
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-hero);
  box-shadow: var(--qs-shadow-1);
}

.qs-pix__corpo { min-width: 0; }
.qs-pix__cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--qs-s-2) var(--qs-s-4); }
.qs-pix__titulo { margin: 0; font-size: var(--qs-fs-lg); font-weight: 740; }

.qs-pix__valor {
  margin: var(--qs-s-2) 0 var(--qs-s-5);
  font-size: clamp(2.25rem, 1.9rem + 1.6vw, 2.875rem);
  font-weight: 780;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.qs-pix__passos {
  display: grid;
  gap: var(--qs-s-3);
  margin: 0 0 var(--qs-s-5);
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.qs-pix__passos li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: var(--qs-s-3);
  counter-increment: passo;
}

.qs-pix__passos li::before {
  content: counter(passo);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--qs-brand-soft);
  color: var(--qs-brand-strong);
  font-size: var(--qs-fs-sm);
  font-weight: 760;
}

.qs-pix__campo { display: flex; gap: var(--qs-s-2); }
.qs-pix__campo .form-control { min-width: 0; text-overflow: ellipsis; }
.qs-pix__campo .form-control[readonly] { background-color: var(--qs-surface-2); color: var(--qs-ink); }
.qs-pix__campo .qs-btn { flex: none; }
.qs-pix__nota { min-height: 1.5em; margin: var(--qs-s-2) 0 0; color: var(--qs-success); font-weight: 640; }

.qs-pix__qr {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--qs-s-3);
  margin: 0;
  padding: var(--qs-s-5);
  border: 1px dashed var(--qs-line-strong);
  border-radius: var(--qs-radius-card);
  background: var(--qs-surface-2);
}

.qs-pix__qr img {
  width: min(220px, 100%);
  aspect-ratio: 1;
  padding: var(--qs-s-3);
  border-radius: var(--qs-radius-control);
  background: #fff;
  box-shadow: 0 0 0 1px var(--qs-line);
}

.qs-pix__qr figcaption { color: var(--qs-ink-2); font-size: var(--qs-fs-sm); text-align: center; }

@container pagina (min-width: 760px) {
  .qs-pix:has(.qs-pix__qr) { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
}

@media (max-width: 419.98px) {
  .qs-pix { padding: var(--qs-s-5); }
  .qs-pix__campo { flex-direction: column; }
}

/* Situação final (pago, cancelado…): a mesma superfície, com o resultado e a próxima ação. */
.qs-pix__resultado {
  display: grid;
  justify-items: start;
  gap: var(--qs-s-2);
}

.qs-pix__resultado[hidden] { display: none; }

.qs-pix__resultado-icone {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--qs-s-2);
  border-radius: 50%;
  background: var(--qs-success-soft);
  color: var(--qs-success);
  font-size: 1.75rem;
}

.qs-pix__resultado--neutro .qs-pix__resultado-icone { background: var(--qs-neutral-soft); color: var(--qs-ink-2); }
.qs-pix__resultado h2 { margin: 0; font-size: var(--qs-fs-xl); font-weight: 760; }

/* O título recebe o foco quando o pagamento é confirmado (leitor de tela lê o resultado); não é um controle, então
   sem o anel de foco — ele ficava em volta do título sem ninguém ter usado o teclado. */
.qs-pix__resultado h2[tabindex="-1"]:focus,
.qs-pix__resultado h2[tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none !important; }
.qs-pix__resultado p { margin: 0 0 var(--qs-s-3); color: var(--qs-ink-2); max-width: 52ch; }

.qs-pix--pago .qs-pix__resultado-icone { animation: qs-confirma 520ms var(--qs-ease-mola) both; }

@keyframes qs-confirma {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.qs-acoes-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qs-s-2) var(--qs-s-3); }

/* ---------- Sala de vídeo ----------
 * Palco escuro (convenção de chamada de vídeo); o estado da conexão aparece em texto no topo e, sem
 * vídeo, num aviso no meio do palco com o que fazer. */
body.qs-sala-corpo { background: #08202a !important; }

.qs-sala {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: #08202a;
  color: #fff;
}

.qs-sala__topo {
  display: flex;
  align-items: center;
  gap: var(--qs-s-3);
  padding: var(--qs-s-3) var(--qs-gutter);
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.qs-sala__topo .qs-icone-btn { color: #fff; }
.qs-sala__topo .qs-icone-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.qs-sala__foto {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  background: rgba(255, 255, 255, 0.12);
}

.qs-sala__nome { margin: 0; font-size: 1.05rem; font-weight: 720; color: #fff; overflow-wrap: anywhere; }

.qs-sala__estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--qs-fs-sm);
  font-weight: 600;
}

.qs-sala__estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ffc94d; }
.qs-sala[data-estado="conectado"] .qs-sala__estado::before { background: #6ad69a; }
.qs-sala[data-estado="erro"] .qs-sala__estado::before,
.qs-sala[data-estado="sem-midia"] .qs-sala__estado::before,
.qs-sala[data-estado="encerrada"] .qs-sala__estado::before { background: #ff8fa8; }

.qs-sala__tela { margin-left: auto; }

.qs-sala__palco { position: relative; display: grid; min-height: 0; overflow: hidden; }

.qs-sala__palco #remote-video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 60vh;
  object-fit: contain;
  background: radial-gradient(600px 300px at 50% 40%, rgba(0, 194, 255, 0.12), transparent 70%), #08202a;
}

.qs-sala__palco #local-video {
  position: absolute;
  right: var(--qs-s-4);
  bottom: var(--qs-s-4);
  width: clamp(96px, 22vw, 180px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--qs-radius-control);
  background: #12313d;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.18);
}

/* A miniatura da própria câmera só aparece com a câmera ligada. */
.qs-sala:not([data-camera]) #local-video { display: none; }

.qs-sala__aviso {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--qs-s-2);
  padding: var(--qs-s-6) var(--qs-gutter);
  text-align: center;
}

.qs-sala__aviso[hidden] { display: none; }

.qs-sala__aviso-icone {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--qs-s-2);
  border-radius: 50%;
  background: rgba(0, 194, 255, 0.14);
  color: #7cdfff;
  font-size: 1.75rem;
}

.qs-sala[data-estado="conectando"] .qs-sala__aviso-icone,
.qs-sala[data-estado="aguardando"] .qs-sala__aviso-icone { animation: qs-pulso 1.8s ease-out infinite; }

.qs-sala[data-estado="erro"] .qs-sala__aviso-icone,
.qs-sala[data-estado="sem-midia"] .qs-sala__aviso-icone,
.qs-sala[data-estado="encerrada"] .qs-sala__aviso-icone { background: rgba(255, 143, 168, 0.16); color: #ffb3c3; }

.qs-sala__aviso-titulo { margin: 0; font-size: var(--qs-fs-xl); font-weight: 760; color: #fff; }
.qs-sala__aviso-texto { margin: 0; max-width: 46ch; color: rgba(255, 255, 255, 0.84); }
.qs-sala__aviso .qs-acoes-linha { justify-content: center; margin-top: var(--qs-s-4); }
.qs-sala__aviso .qs-acoes-linha[hidden] { display: none; }

.qs-sala__controles {
  display: flex;
  justify-content: center;
  gap: var(--qs-s-3);
  padding: var(--qs-s-4) var(--qs-gutter) calc(var(--qs-s-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.qs-sala__controle {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.35rem;
  cursor: pointer;
  transition: background-color var(--qs-dur-2) var(--qs-ease-out), transform var(--qs-dur-2) var(--qs-ease-mola);
}

.qs-sala__controle:hover { background: rgba(255, 255, 255, 0.24); }
.qs-sala__controle:active { transform: scale(0.94); }
.qs-sala__controle.is-desligado { background: #fff; color: var(--qs-ink); }
.qs-sala__controle--sair { width: 64px; background: #c8164a; border-radius: var(--qs-radius-pill); }
.qs-sala__controle--sair:hover { background: #a3123c; }
.qs-sala__controle:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Planos ---------- */
/* (Spec 013: saiu a regra que devolvia a fonte de 16 px à contratação — a página não carrega mais o Metronic.) */

.qs-planos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--qs-s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.qs-plano-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--qs-s-3);
  padding: var(--qs-s-6);
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-card);
  box-shadow: var(--qs-shadow-1);
}

.qs-plano-card.is-atual {
  border-color: var(--qs-brand);
  box-shadow: inset 0 3px 0 var(--qs-brand), var(--qs-shadow-1);
}

.qs-plano-card__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--qs-s-2); }
.qs-plano-card__nome { margin: 0; font-size: var(--qs-fs-md); font-weight: 740; overflow-wrap: anywhere; }

.qs-plano-card__preco {
  margin: 0;
  font-size: var(--qs-fs-2xl);
  font-weight: 780;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.qs-plano-card__nota { margin: 0; color: var(--qs-ink-2); font-size: var(--qs-fs-sm); }
.qs-plano-card .qs-btn { justify-self: stretch; }

.qs-itens { display: grid; align-content: start; gap: var(--qs-s-2); margin: 0; padding: 0; list-style: none; }
.qs-itens li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--qs-s-2); }
.qs-itens li > i { line-height: 1.5; color: var(--qs-success); }
.qs-itens--nao li > i { color: var(--qs-danger); }

/* Formas de pagamento como opções grandes (rádio). */
.qs-opcoes { display: grid; gap: var(--qs-s-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.qs-opcoes legend { float: none; margin-bottom: var(--qs-s-1); font-size: var(--qs-fs-base); font-weight: 680; }

.qs-opcao {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  align-items: center;
  gap: var(--qs-s-3);
  padding: var(--qs-s-4);
  border: 1px solid var(--qs-line-strong);
  border-radius: var(--qs-radius-control);
  background: var(--qs-surface);
  cursor: pointer;
  transition: border-color var(--qs-dur-2) var(--qs-ease-out), background-color var(--qs-dur-2) var(--qs-ease-out);
}

.qs-opcao:hover { border-color: var(--qs-brand); }
.qs-opcao:has(input:checked) { border-color: var(--qs-brand); background: var(--qs-brand-soft); box-shadow: inset 0 0 0 1px var(--qs-brand); }
.qs-opcao input { grid-column: 3; grid-row: 1; width: 20px; height: 20px; margin: 0; accent-color: var(--qs-brand); }
.qs-opcao__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--qs-brand-soft); color: var(--qs-brand-strong); font-size: 1.25rem; }
.qs-opcao__titulo { display: block; font-weight: 700; }
.qs-opcao__texto { display: block; color: var(--qs-ink-2); font-size: var(--qs-fs-sm); font-weight: 500; }

/* ---------- Formulários (perfil, dependente, cartão) ---------- */
.qs-form { display: grid; gap: var(--qs-s-5); }
.qs-form .qs-form-secao { margin: 0; }
.qs-form__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--qs-s-2); padding-top: var(--qs-s-2); }

.qs-form__erro {
  margin: 0;
  padding: var(--qs-s-3) var(--qs-s-4);
  border-radius: var(--qs-radius-control);
  background: var(--qs-danger-soft);
  color: var(--qs-danger);
  font-weight: 600;
}

.qs-form__erro:empty { display: none; }

@media (max-width: 575.98px) {
  .qs-form__acoes .qs-btn { flex: 1 1 100%; }
}

/* Conversa: carregando (o texto do vazio continua em #chatList:empty, acima). */
#chatList[aria-busy="true"]:empty::before { content: "Carregando mensagens…"; }

/* Movimento reduzido: sem pulso nem entrada do resultado. */
@media (prefers-reduced-motion: reduce) {
  .qs-selo--aguardando::before,
  .qs-sala__aviso-icone,
  .qs-pix--pago .qs-pix__resultado-icone { animation: none !important; }
}

/* ---------- Abertura, entrada, cadastro, saída e contratação (spec 013) ----------
 * Telas públicas sem o CSS do Metronic, no layout .qs-auth (faixa da marca + caixa branca). O destaque é a ilustração
 * própria de telemedicina (assets/img/ilustracoes/, SVG na paleta da marca, alt="" — o texto ao lado diz o mesmo);
 * o resto fica quieto. Um único movimento: a ilustração da faixa surge uma vez (desligado no movimento reduzido). */
.qs-auth__ilustracao {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: var(--qs-s-6) auto 0;
  animation: qs-surgir 700ms var(--qs-ease-out) 120ms both;
}

.qs-auth__ilustracao--desktop { display: none; }

@media (min-width: 992px) {
  .qs-auth__ilustracao { max-width: 440px; margin: var(--qs-s-8) 0 0; }
  .qs-auth__ilustracao--desktop { display: block; }
}

/* Avisos curtos no topo da caixa (saiu, sessão vencida, conta confirmada). */
.qs-nota {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--qs-s-2);
  margin: 0 0 var(--qs-s-5);
  padding: var(--qs-s-3) var(--qs-s-4);
  border-radius: var(--qs-radius-control);
  background: var(--qs-brand-soft);
  color: var(--qs-brand-strong);
  font-weight: 600;
}

.qs-nota i { line-height: 1.5; }
.qs-nota--ok { background: var(--qs-success-soft); color: var(--qs-success); }
.qs-nota--alerta { background: var(--qs-warning-soft); color: var(--qs-warning); }

/* Texto de apoio sob um campo (ex.: busca do CEP). */
.qs-dica { margin: var(--qs-s-1) 0 0; color: var(--qs-ink-2); font-size: var(--qs-fs-sm); }
.qs-dica:empty { display: none; }

.qs-btn--texto { color: var(--qs-ink-2); padding-inline: var(--qs-s-3); }
.qs-btn--texto:hover { background: var(--qs-neutral-soft); color: var(--qs-ink); }

/* Títulos da faixa da marca sem palavra sozinha na última linha. */
.qs-auth-titulo { text-wrap: balance; }

/* Mostrar/esconder senha (entrada, cadastro, mudar senha): o botão acompanha a altura do campo (o template o
   centralizava, 41 px ao lado de um campo de 48 px). */
.input-group > .btn-light { align-self: stretch; min-width: 48px; color: var(--qs-ink-2); }
.input-group > .btn-light:hover { background: var(--qs-brand-soft); color: var(--qs-brand-strong); }

/* Entrada */
.qs-auth__caixa .qs-form { gap: var(--qs-s-4); }
.qs-entrar__esqueci { margin: calc(var(--qs-s-2) * -1) 0 0; text-align: right; }
.qs-entrar__esqueci a { display: inline-flex; align-items: center; min-height: var(--qs-h-touch); font-weight: 650; }

/* Apresentação (/bem-vindo): três recursos com ilustração e as duas ações, fixas no rodapé do celular. */
.qs-recursos { display: grid; gap: var(--qs-s-5); margin: 0 0 var(--qs-s-6); padding: 0; list-style: none; }
.qs-recurso { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: var(--qs-s-4); }
.qs-recurso img { width: 64px; height: 64px; }
.qs-recurso__titulo { margin: 0 0 2px; font-size: var(--qs-fs-base); font-weight: 720; }
.qs-recurso__texto { margin: 0; color: var(--qs-ink-2); font-size: 0.9375rem; line-height: 1.45; }

.qs-bv__acoes { display: grid; gap: var(--qs-s-3); }
.qs-bv__acoes .qs-btn { width: 100%; }

@media (max-width: 991.98px) {
  .qs-bv__acoes {
    position: sticky;
    bottom: 0;
    z-index: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 -22px -32px;
    padding: var(--qs-s-4) 22px calc(var(--qs-s-4) + env(safe-area-inset-bottom));
    background: var(--qs-surface);
    box-shadow: var(--qs-shadow-float);
  }

  .qs-bv__acoes .qs-btn { padding-inline: var(--qs-s-3); }
}

@media (max-width: 359.98px) {
  .qs-bv__acoes { grid-template-columns: minmax(0, 1fr); }
}

/* Convite para instalar: só existe quando o navegador oferece a instalação (assets/js/boas-vindas.js). */
.qs-instalar:not([hidden]) {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--qs-s-3);
  margin: 0 0 var(--qs-s-6);
  padding: var(--qs-s-4);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-radius-card);
  background: var(--qs-surface-2);
}

.qs-instalar__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--qs-brand-soft); color: var(--qs-brand-strong); font-size: 1.25rem; }
.qs-instalar__titulo { margin: 0; font-weight: 700; }
.qs-instalar__texto { margin: 2px 0 var(--qs-s-3); color: var(--qs-ink-2); font-size: var(--qs-fs-sm); }
.qs-instalar__acoes { display: flex; flex-wrap: wrap; gap: var(--qs-s-2); }

/* Cadastro: formulário mais largo; no desktop a faixa da marca fica parada enquanto o formulário rola. */
.qs-auth__caixa--larga { max-width: 720px; }

@media (min-width: 992px) {
  .qs-auth--cadastro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .qs-auth--cadastro .qs-auth__marca { position: sticky; top: 0; height: 100vh; }
  .qs-auth--cadastro .qs-auth__form { align-items: flex-start; }
}

/* Planos: período do preço e formas de pagamento como ações diretas (botão ou link no lugar do rádio). */
.qs-plano-card__periodo { margin-left: var(--qs-s-1); color: var(--qs-ink-2); font-size: var(--qs-fs-base); font-weight: 600; letter-spacing: 0; }

.qs-opcoes form { margin: 0; }

a.qs-opcao,
button.qs-opcao { width: 100%; color: var(--qs-ink); font: inherit; text-align: left; text-decoration: none; }

.qs-opcao--acao { grid-template-columns: 44px minmax(0, 1fr) 20px; }
.qs-opcao--acao:hover { border-color: var(--qs-brand); background: var(--qs-brand-soft); color: var(--qs-ink); }
.qs-opcao--acao[aria-busy="true"] { cursor: progress; opacity: 0.7; }
.qs-opcao__seta { color: var(--qs-brand); font-size: 1.1rem; }

.qs-pagamento__acoes { display: grid; gap: var(--qs-s-3); }

/* Menu: "Sair" é um formulário (POST) com o mesmo visual dos links. */
.qs-nav__form { margin: 0; }

/* ==========================================================================================================
 * Spec 015 — responsividade e legibilidade (barra inferior, atalhos do início, painel de filtros).
 * ========================================================================================================== */

/* Rótulos da barra inferior: a regra do template (.footer .nav .nav-item .nav-link span .nav-text, 10 px) vencia a
   de 12 px daqui por especificidade. Mesma força, depois dele, e sem quebrar a linha. */
.footer .nav .nav-item .nav-link span .nav-text {
  font-size: 12px;
  letter-spacing: 0;
  white-space: nowrap;
}

/* A 320 px os cinco itens não cabiam (o botão central reserva 96 px) e "Perfil" caía para uma segunda linha sobre o
   conteúdo: a barra fica numa linha só, com os itens e o botão central mais justos abaixo de 360 px. */
.footer .nav { flex-wrap: nowrap; }

.footer .nav .nav-item { min-width: 0; }

/* O botão central tem a largura dele (76 px; 64 px abaixo de 360 px) e os outros quatro dividem o resto por igual — com
   todos encolhendo, ele ficava uns 5 px fora do centro. */
.footer .nav .nav-item.squarebtn { flex: 0 0 auto; }

@media (max-width: 359.98px) {
  .footer .nav .nav-item .nav-link {
    padding-left: 2px;
    padding-right: 2px;
  }

  .footer .nav .nav-item.squarebtn { padding: 10px 2px; }

  .footer .nav .nav-item.squarebtn .nav-link { width: 64px; }
}

/* Atalhos do início num container estreito (celular de 320 px): ícone em cima do texto — ao lado, "Notificações",
   "Dependentes" e "Pagamentos" vazavam do cartão e alargavam a página. */
@container dash (max-width: 330px) {
  .qs-atalhos-grade .qs-tile {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Painel de filtros do template (fora da tela, sem botão que o abra): fechado, fica fora do teclado e do leitor de
   tela (antes os campos escondidos recebiam o foco). */
.filter { visibility: hidden; }

.filter-open .filter { visibility: visible; }