@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Paleta e tipografia alinhadas ao site principal (drbrunosoares.med.br) */
  --color-bg: oklch(98.5% 0.012 95);
  --color-cream: oklch(96.5% 0.018 90);
  --color-panel: oklch(100% 0 0);
  --color-border: oklch(90% 0.025 130);
  --color-primary: oklch(42% 0.055 165);
  --color-primary-dark: oklch(24% 0.028 155);
  --color-accent: oklch(66% 0.13 45);
  --color-text: oklch(25% 0.025 160);
  --color-muted: oklch(50% 0.025 160);
  --color-secondary: oklch(94% 0.025 160);
  --color-low: oklch(42% 0.055 165);
  --color-medium: oklch(66% 0.13 45);
  --color-high: #b0281c;
  --color-gold: oklch(74% 0.085 80);
  --color-gold-deep: oklch(56% 0.075 72);
  --radius: 1rem;
  --radius-pill: 9999px;
  /*
   * A TIPOGRAFIA, TROCADA (2026-08-24), e a descoberta que veio junto.
   *
   * Estas duas variáveis pediam Fraunces e Inter, e NENHUMA TELA DO SPI CARREGAVA as duas. Não
   * havia um único link de webfont em nenhuma das 74 páginas. Ou seja: o que aparecia na tela era
   * a segunda opção de cada lista, Georgia nos títulos e Arial no corpo, que é exatamente a
   * combinação que faz qualquer sistema parecer um rascunho de sistema.
   *
   * O dono descreveu isso como "fonte de vibe coding" sem saber que estava vendo o fallback. Ele
   * estava certo pelo motivo certo: aquilo não era uma escolha tipográfica, era a ausência dela.
   *
   * Agora é MONTSERRAT, a mesma família do módulo do mentor, e agora ela é de fato carregada nas
   * 74 telas. Uma família só nos títulos e no corpo: com uma geométrica bem desenhada, a
   * hierarquia se faz por peso e tamanho, e a segunda família vira ruído.
   *
   * A Comfortaa, que o módulo do mentor também usa, NÃO veio junto de propósito: lá ela é a fonte
   * da MARCA dele, e trazê-la para cá seria vestir o SPI com a identidade de outra pessoa.
   */
  --font-display: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-sans: "Montserrat", "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  /*
   * 600, e não os 500 de antes. O peso foi calibrado para uma SERIFADA: Georgia em 500 já chega
   * com o contraste do desenho dela. Uma geométrica sem serifa no mesmo peso fica lavada ao lado
   * do corpo do texto, e a hierarquia da página se perde.
   */
  font-weight: 600;
  letter-spacing: -0.018em;
}

a {
  color: var(--color-primary);
}

header.app-header {
  background: var(--color-primary-dark);
  color: var(--color-cream);
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--color-gold) 42%, transparent);
}

header.app-header h1 {
  font-size: 1.25rem;
  margin: 0;
  margin-right: auto; /* título junto do hambúrguer, à esquerda */
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
header.app-header .nav-toggle { margin-right: 0.75rem; }

.header-logo {
  height: 2.1rem;
  width: 2.1rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-cream);
}

header.app-header button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--color-cream);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-size: 0.85rem;
}

header.app-header button:hover {
  background: rgba(255, 255, 255, 0.12);
}

main {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.5rem;
}

.hidden {
  display: none !important;
}

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

/* Hub central */
.hub-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 6rem);
}
/* Cartões e grade do hub: ver bloco "Hub editorial" mais abaixo. */

/* Home */
#scale-list {
  margin-top: 1rem;
}

.scale-category {
  margin-bottom: 2rem;
}

.scale-category-heading {
  font-size: 1.05rem;
  color: var(--color-primary-dark);
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Quantas escalas a categoria tem: o olho encontra a seção certa sem contar cartão. */
.scale-category-count {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-muted);
  white-space: nowrap;
}

/* Para que a categoria serve, em uma linha: com 54 escalas, o nome da categoria já não basta. */
.scale-category-about {
  font-size: 0.88rem;
  margin: -0.35rem 0 0.85rem;
  line-height: 1.4;
}

.scale-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.scale-card {
  text-align: left;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.scale-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.scale-card-name {
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.scale-card-age,
.scale-card-count {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.privacy-note {
  margin-top: 2rem;
  padding: 1rem;
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.privacy-note button {
  margin-top: 0.6rem;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}

.privacy-note button:hover {
  border-color: var(--color-high);
  color: var(--color-high);
}

/* Form */
.panel {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  box-shadow: 0 1px 2px rgba(20, 40, 30, 0.04), 0 12px 28px -20px rgba(20, 40, 30, 0.35);
}

#form-instructions {
  white-space: pre-line;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.item-fieldset {
  border: none;
  border-bottom: 1px solid var(--color-border);
  padding: 0.9rem 0;
  margin: 0;
}

.item-fieldset legend {
  padding: 0;
  font-weight: 600;
  margin-bottom: 0.5rem;
  width: 100%;
}

.options-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.option-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-size: 0.95rem;
}

.form-toolbar {
  position: sticky;
  bottom: 0;
  background: var(--color-panel);
  border-top: 1px solid var(--color-border);
  padding: 0.9rem 1.5rem;
  margin: 1rem -1.5rem -1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

button.primary,
a.primary {
  background: var(--color-primary);
  color: var(--color-cream);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.65rem 1.35rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s;
}

button.primary:hover,
a.primary:hover {
  opacity: 0.9;
}

button.secondary,
a.secondary {
  background: var(--color-panel);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
}

button.secondary:hover,
a.secondary:hover {
  background: var(--color-secondary);
  border-color: var(--color-primary);
}

/* Result */
.result-actions {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

#result-datetime {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.result-total-box {
  text-align: center;
  padding: 1rem;
  background: var(--color-secondary);
  border-radius: var(--radius);
  margin-bottom: 0.8rem;
}

.result-total-value {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.result-total-label {
  color: var(--color-muted);
}

.result-note {
  text-align: center;
  margin-bottom: 0.8rem;
  color: var(--color-muted);
}

.result-range,
.subscore-range {
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-top: 0.5rem;
}

.result-range-baixo-risco,
.result-range-abaixo-do-ponto-de-corte {
  background: #e6f4ea;
  border: 1px solid var(--color-low);
}

.result-range-risco-medio,
.result-range-risco-médio {
  background: #fbf1d9;
  border: 1px solid var(--color-medium);
}

.result-range-alto-risco,
.result-range-acima-do-ponto-de-corte {
  background: #fbe6e3;
  border: 1px solid var(--color-high);
}

.result-range-label {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

#result-subscores {
  margin-top: 1.2rem;
}

.subscore-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 0.8rem;
}

.subscore-label {
  font-weight: 600;
}

.subscore-value {
  font-size: 1.4rem;
  color: var(--color-primary-dark);
}

.subscore-unit {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.subscore-cutoff {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 0.3rem;
}

#result-details {
  margin-top: 1.5rem;
}

.details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.details-table th,
.details-table td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.row-flagged {
  background: #fdf1ef;
}

footer.app-footer {
  text-align: center;
  color: var(--color-muted);
  font-size: 0.8rem;
  padding: 1rem;
}

/* Header: conta / navegação */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.header-link {
  color: var(--color-cream);
  text-decoration: none;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
}

.header-link:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Login / cadastro */
.auth-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 6rem);
}

.auth-panel {
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

.auth-panel h2 {
  text-align: center;
}

.auth-field {
  display: block;
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.auth-field input,
.auth-field select {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: normal;
}

.auth-terms-label {
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--color-muted);
  font-weight: normal;
  margin-bottom: 1rem;
}

.auth-terms-label input {
  margin-top: 0.2rem;
}

.auth-terms-text {
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.5;
  max-height: 40vh;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
  border-radius: 8px;
}

.auth-terms-text p {
  margin: 0 0 0.75rem;
}

.auth-terms-text p:last-child {
  margin-bottom: 0;
}

/* Documentos legais (termos.html, privacidade.html) */
.legal-doc {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.6;
}

.legal-doc h1 {
  margin-top: 0.5rem;
}

.legal-doc h2 {
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  scroll-margin-top: 5rem;
}
.legal-doc h2:target { border-top-color: var(--color-primary); }

.legal-doc p { margin: 0 0 0.8rem; }
.legal-doc h1 + .legal-meta { margin-bottom: 0; }

.legal-doc ul {
  padding-left: 1.2rem;
}

.legal-doc li {
  margin-bottom: 0.4rem;
}

/* O aviso de RASCUNHO saiu quando os documentos ficaram prontos; no lugar dele entrou o
   resumo em linguagem direta, que é o que a pessoa realmente lê antes de aceitar. */
.legal-resumo {
  background: var(--color-secondary);
  border-left: 4px solid var(--color-primary);
  border-radius: 0.8rem;
  padding: 1rem 1.15rem;
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 1.2rem 0 1.6rem;
}
.legal-resumo strong { color: var(--color-primary-dark); }

.legal-meta {
  color: var(--color-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0.35rem 0 0;
}

/* Sumário clicável: o documento é longo e ninguém rola procurando a seção de direitos. */
.legal-sumario {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
  padding: 0 0 0.4rem;
  margin-bottom: 0.5rem;
}
.legal-sumario a {
  font-size: 0.8rem;
  color: var(--color-muted);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.28rem 0.65rem;
  background: var(--color-panel);
}
.legal-sumario a:hover { color: var(--color-primary-dark); border-color: var(--color-primary); }

.legal-assinatura {
  margin-top: 2.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.legal-see-also {
  margin-top: 2rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}

.auth-terms-links {
  font-size: 0.82rem;
  text-align: center;
  margin-bottom: 1rem;
}

.footer-legal-link {
  color: inherit;
}

.auth-message {
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

.auth-error {
  background: #fbe6e3;
  border: 1px solid var(--color-high);
  color: var(--color-high);
}

.auth-info {
  background: #e6f4ea;
  border: 1px solid var(--color-low);
  color: var(--color-low);
}

/* Paywall */
.paywall-plans {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.paywall-plan-btn {
  text-decoration: none;
  text-align: center;
}

.paywall-recheck {
  margin-top: 0.5rem;
}

/* Timbre personalizado no resultado (plano Premium) */
.result-letterhead {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--color-border);
}

.result-letterhead img {
  max-height: 60px;
  max-width: 160px;
  object-fit: contain;
}

.result-letterhead-text {
  font-size: 0.9rem;
  color: var(--color-muted);
}

.result-letterhead-text strong {
  display: block;
  color: var(--color-text);
  font-size: 1rem;
}

.demo-link-wrap {
  text-align: center;
  margin-top: 0.6rem;
  font-size: 0.85rem;
}

.demo-banner {
  background: #fbf1d9;
  border: 1px solid var(--color-medium);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  text-align: center;
}

.demo-banner code {
  background: rgba(0, 0, 0, 0.06);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

/* Calculadora de doses */
.calc-result {
  margin-top: 1.2rem;
  padding: 1.25rem;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.calc-placeholder {
  color: var(--color-muted);
  text-align: center;
  padding: 1rem 0;
}

.calc-result-header h3 {
  margin: 0 0 0.15rem;
}

.calc-dose-hero {
  text-align: center;
  padding: 1.1rem 1rem;
  margin: 0.8rem 0 1rem;
  background: linear-gradient(180deg, var(--color-secondary), var(--color-cream));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.calc-dose-hero-value {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.15;
}

.calc-dose-hero-sub {
  margin-top: 0.25rem;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.calc-details {
  margin-bottom: 0.8rem;
}

.calc-line {
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

.calc-note {
  color: var(--color-muted);
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
}

.calc-section {
  margin-bottom: 0.9rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.calc-section h4 {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

.calc-section p {
  margin: 0.2rem 0;
  font-size: 0.92rem;
}

.calc-section ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.92rem;
}

.calc-section li {
  margin-bottom: 0.2rem;
}

.calc-section-admin {
  background: var(--color-cream);
}

.calc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}

.calc-section-ae {
  background: #fdf1ef;
  border-color: #f0c9c2;
}

.calc-section-ci {
  background: #fff7e6;
  border-color: #f0dca0;
}

@media (max-width: 640px) {
  .calc-grid-2 {
    grid-template-columns: 1fr;
  }
}

.calc-alerts {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: #fbf1d9;
  border: 1px solid var(--color-medium);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.calc-alerts p {
  margin: 0.2rem 0;
}

.calc-source {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.calc-ref-content {
  margin-top: 0.8rem;
  padding: 0.8rem 1rem;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Painel do médico */
.header-home-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.new-case-form {
  display: flex;
  gap: 0.6rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.new-case-form input {
  flex: 1;
  min-width: 200px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
}

.cases-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.case-item {
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  font-size: 0.95rem;
}

.case-item:hover {
  border-color: var(--color-primary);
}

.generate-link-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.generate-link-row select {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  min-width: 240px;
}

.generated-link-box {
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 1.2rem;
}

.generated-link-box input {
  width: min(420px, 100%);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-right: 0.5rem;
}

.settings-logo-preview {
  display: block;
  max-height: 60px;
  max-width: 160px;
  object-fit: contain;
  margin: 0.5rem 0;
}

/*
 * Impressão / Salvar PDF.
 * Regra geral e robusta: some com TUDO e mostra só o que estiver marcado com
 * .print-area (e sua subárvore). Assim a folha sai limpa, como um PDF do
 * documento, sem cabeçalho do site, menu, botões de "Voltar" nem rodapé.
 * Botões que ficam DENTRO de uma print-area devem receber a classe .no-print.
 */
@media print {
  @page {
    margin: 14mm;
  }
  html,
  body {
    background: #fff !important;
  }
  /* esconde tudo mantendo o fluxo, e reexibe só a área imprimível */
  body * {
    visibility: hidden !important;
  }
  .print-area,
  .print-area * {
    visibility: visible !important;
  }
  .print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  /*
   * AS FOLHAS EM BRANCO, e por que a regra acima sozinha não bastava.
   *
   * `visibility: hidden` apaga o desenho mas NÃO tira o elemento do fluxo: a tela inteira do app
   * continua ocupando altura no papel. Como o documento é posicionado por cima (absolute), quem
   * decide quantas folhas saem passa a ser o tamanho da TELA, e não o do documento.
   *
   * Isso foi MEDIDO, não deduzido: em atestados.html o PDF saiu com 2 páginas mesmo com o
   * documento ainda não montado. Duas folhas de nada. Era o relato do dono, com as três caras
   * que ele descreveu: cabeçalho empurrado para a segunda página, documento pequeno saindo em
   * duas, e sobra de papel em branco.
   *
   * A regra abaixo tira do fluxo tudo que não é o documento nem caminho até ele: o `:has` pega
   * os ancestrais, o `:not(.print-area *)` protege o conteúdo de dentro (sem ele, os filhos do
   * próprio documento sumiriam, porque nenhum deles CONTÉM a área de impressão).
   *
   * Fica DEPOIS da regra de visibilidade de propósito: em navegador sem `:has`, esta é ignorada
   * e o comportamento antigo continua valendo, que é feio mas imprime.
   *
   * O `body:has(.print-area)` na frente NÃO é enfeite: sem ele, numa página que imprime e não tem
   * área de impressão (a lista de escalas, por exemplo, imprime a tela toda), a regra casaria com
   * TODOS os elementos e o papel sairia em branco. Consertar a impressão de um jeito que apaga a
   * de outro seria trocar um defeito por um pior.
   */
  body:has(.print-area) *:not(:has(.print-area)):not(.print-area):not(.print-area *) {
    display: none !important;
  }
  /* Sem os elementos vizinhos ocupando espaço, o documento não precisa mais ser sobreposto:
     posicionar no fluxo evita a folha extra que o `absolute` deixava para trás. */
  body:has(.print-area) .print-area {
    position: static;
  }

  /*
   * AS LINHAS PULADAS QUE O MÉDICO DIGITA.
   *
   * Os geradores montam o corpo do documento com escape de HTML e um <p> em volta, e em HTML uma
   * quebra de linha vira espaço: o texto que ele escreveu em três parágrafos sai empilhado num
   * bloco só, e ele tem de reformatar tudo depois de gerar. `pre-wrap` preserva as quebras e as
   * linhas em branco, e continua quebrando linha comprida normalmente.
   *
   * Vale na tela e no papel (a regra está fora do @media, logo abaixo): a prévia tem de mostrar
   * o que vai sair, senão ela mente.
   */
  .laudo-doc p,
  .laudo-doc .laudo-corpo {
    white-space: pre-wrap;
  }
  /* elementos de interface que nunca devem ir para o papel */
  .no-print,
  .no-print *,
  .nav-toggle,
  .nav-drawer,
  .nav-overlay,
  header.app-header,
  footer.app-footer,
  .result-actions {
    display: none !important;
  }
}

/*
 * As linhas puladas também na TELA, e não só no papel: a prévia do documento precisa mostrar
 * exatamente o que vai sair. Se ela empilhasse o texto e a impressão respeitasse as quebras, o
 * médico ajustaria o texto olhando uma prévia que mente.
 */
.laudo-doc p,
.laudo-doc .laudo-corpo {
  white-space: pre-wrap;
}

/* Fluxos de manejo */
.fluxo-timer-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-primary-dark);
  color: var(--color-cream);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin: 1rem 0;
}

.fluxo-timer-display {
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.fluxo-timer-controls {
  display: flex;
  gap: 0.6rem;
}

.fluxo-timer-controls button {
  padding: 0.4rem 1rem;
}

.fluxo-marco-atual {
  min-height: 1.2rem;
  font-weight: 600;
  color: var(--color-accent, #e8c27a);
}

.fluxo-marcos-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.fluxo-marco {
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
}

.fluxo-marco.fluxo-marco-atingido {
  background: var(--color-primary);
  color: var(--color-cream);
  border-color: var(--color-primary);
}

.fluxo-passo {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 0.7rem;
  transition: opacity 0.15s;
}

.fluxo-passo.fluxo-passo-feito {
  opacity: 0.55;
}

.fluxo-passo-titulo label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}

.fluxo-passo-texto {
  margin-top: 0.4rem;
  margin-left: 1.6rem;
  font-size: 0.92rem;
  color: var(--color-text);
}

/* =====================================================================
   LANDING / HERO  (tela de entrada redesenhada)
   ===================================================================== */
.landing {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  padding: 0.5rem 0 1rem;
}

.landing-hero {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  align-items: center;
  gap: 1.5rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-cream);
  border-radius: 1.5rem;
  padding: 2.5rem;
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(20, 40, 30, 0.6);
}

.landing-badge {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(246, 241, 231, 0.16);
  color: var(--color-cream);
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
}

.landing-title {
  font-family: var(--font-display);
  font-size: 2.3rem;
  line-height: 1.1;
  margin: 0 0 0.9rem;
  color: #fff;
}

.landing-sub {
  font-size: 1.02rem;
  color: rgba(246, 241, 231, 0.9);
  margin: 0 0 1.5rem;
  max-width: 34ch;
}

.landing-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.landing-note {
  font-size: 0.82rem;
  color: rgba(246, 241, 231, 0.72);
  margin: 1rem 0 0;
  line-height: 1.55;
}

/* O herói é escuro: a cor de link do app (verde) fica ilegível aqui. */
.landing-note a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.landing-note a:hover { color: var(--color-accent, #e8c27a); }

.landing-hero-art {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-hero-art img {
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 1.1rem;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.55);
}

/* brilho sutil no hero (profundidade premium) */
.landing-hero { position: relative; isolation: isolate; }
.landing-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -10%;
  width: 55%;
  height: 140%;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.28), rgba(201, 162, 39, 0) 70%);
  pointer-events: none;
}

/* linha de confiança abaixo do CTA */
.landing-trust {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
}
.landing-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: rgba(246, 241, 231, 0.9);
}
.landing-trust svg {
  width: 15px;
  height: 15px;
  color: var(--color-accent, #c9a227);
  flex: none;
}

/* Botões CTA */
.btn-cta-primary {
  display: inline-block;
  background: var(--color-accent);
  color: #3a1d0b;
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  box-shadow: 0 10px 24px -12px rgba(224, 138, 79, 0.9);
}

.btn-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px rgba(224, 138, 79, 0.95);
}

.btn-cta-ghost {
  display: inline-block;
  background: transparent;
  color: var(--color-cream);
  border: 1px solid rgba(246, 241, 231, 0.6);
  border-radius: var(--radius-pill);
  padding: 0.8rem 1.4rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-cta-ghost:hover {
  background: rgba(246, 241, 231, 0.14);
}

/* Grade de recursos (IOT grátis + resto com cadeado) */
.landing-section-title {
  font-family: var(--font-display);
  color: var(--color-primary-dark);
  font-size: 1.55rem;
  text-align: center;
  margin: 0.5rem 0 0.5rem;
}
.landing-section-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 0.5rem auto 0;
  border-radius: 3px;
  background: var(--color-accent, #c9a227);
}
.landing-section-sub {
  text-align: center;
  color: var(--color-muted);
  margin: 0 auto 0.4rem;
  max-width: 620px;
}
.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1.1rem;
  padding: 1.35rem 1.25rem;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px -22px rgba(20, 40, 30, 0.5);
  border-color: color-mix(in oklch, var(--color-primary) 45%, var(--color-border));
}

.feature-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.feature-icon {
  font-size: 1.6rem;
}
/* chip de ícone SVG (visual premium) */
.feature-ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, var(--color-primary) 14%, white);
  color: var(--color-primary-dark);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.feature-ico svg {
  width: 24px;
  height: 24px;
}
.feature-card:hover .feature-ico {
  transform: translateY(-1px) scale(1.05);
  background: color-mix(in oklch, var(--color-primary) 22%, white);
}
.feature-free .feature-ico {
  background: var(--color-primary);
  color: #fff;
}

.feature-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--color-primary-dark);
}

.feature-desc {
  font-size: 0.88rem;
  color: var(--color-muted);
  line-height: 1.45;
}

.feature-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
}

.feature-tag-free {
  background: color-mix(in oklch, var(--color-primary) 16%, white);
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.feature-tag-lock {
  background: var(--color-secondary);
}

.feature-free {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.feature-locked {
  background: color-mix(in oklch, var(--color-cream) 70%, white);
}

.feature-locked .feature-name,
.feature-locked .feature-icon {
  opacity: 0.75;
}

/* Planos */
.landing-plans {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  padding: 1.75rem;
  text-align: center;
}

.landing-plans h2 {
  margin-top: 0;
}

.landing-plans-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1rem;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
  text-align: left;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.4rem 1.3rem;
}
.plan-card-highlight {
  border-color: var(--color-accent, #1d3124);
  box-shadow: 0 0 0 1px var(--color-accent, #1d3124);
}
.plan-badge {
  position: absolute;
  top: -0.7rem;
  right: 1rem;
  background: var(--color-accent, #1d3124);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.plan-name {
  font-size: 1.15rem;
  font-weight: 700;
}
.plan-price {
  margin-top: 0.35rem;
  font-size: 1.05rem;
}
.plan-price strong { font-size: 1.9rem; }
.plan-per { color: var(--color-muted, #6b7280); font-size: 0.95rem; }
.plan-price-year {
  color: var(--color-muted, #6b7280);
  font-size: 0.85rem;
  margin-top: 0.1rem;
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.plan-features li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.4;
  font-size: 0.92rem;
}
.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent, #1d3124);
  font-weight: 700;
}
.plan-card .btn-cta-primary { width: 100%; text-align: center; }

.landing-login {
  display: flex;
  justify-content: center;
}

/* ===== Página de venda: banda de números, seções detalhadas, confiança, FAQ ===== */
.lp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.lp-stat {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1.1rem;
  padding: 1.25rem 1.1rem;
  text-align: center;
}
.lp-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.85rem;
  line-height: 1;
  color: var(--color-primary-dark);
}
.lp-stat-lbl {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.84rem;
  color: var(--color-muted);
  line-height: 1.4;
}

.lp-deep {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.lp-block {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  padding: 1.6rem 1.5rem;
}
.lp-block-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.lp-block-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: color-mix(in oklch, var(--color-primary) 12%, white);
  flex: none;
}
.lp-block-head h3 {
  font-family: var(--font-display);
  color: var(--color-primary-dark);
  font-size: 1.28rem;
  margin: 0;
}
.lp-block-lead {
  color: var(--color-muted);
  margin: 0.7rem 0 1rem;
}
.lp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1.6rem;
}
.lp-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text, #253026);
}
.lp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent, #c9a227);
}
.lp-list li strong { color: var(--color-primary-dark); }

/* Faixa "entrou agora": o que foi acrescentado por último, sem virar changelog na página. */
.lp-novo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent, var(--color-primary));
  border-radius: 1.1rem;
  padding: 1.1rem 1.25rem;
}
.lp-novo-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}
.lp-novo p {
  flex: 1;
  min-width: 240px;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-muted);
}
.lp-novo p strong { color: var(--color-primary-dark); }

.lp-why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.lp-why-card {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: 1.1rem;
  padding: 1.3rem;
}
.lp-why-card h4 {
  font-family: var(--font-display);
  color: var(--color-primary-dark);
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}
.lp-why-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-muted);
  line-height: 1.5;
}

.lp-faq-wrap { display: flex; flex-direction: column; gap: 0.6rem; }
.lp-faq {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}
.lp-faq details {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 0.9rem;
  padding: 0 1.1rem;
}
.lp-faq summary {
  cursor: pointer;
  padding: 0.95rem 0;
  font-weight: 600;
  color: var(--color-primary-dark);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: "+";
  font-size: 1.35rem;
  line-height: 1;
  color: var(--color-accent, #c9a227);
  flex: none;
}
.lp-faq details[open] summary::after { content: "–"; }
.lp-faq details p {
  margin: 0 0 0.95rem;
  color: var(--color-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.lp-cta-final {
  text-align: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-cream);
  border-radius: 1.5rem;
  padding: 2.3rem 1.5rem;
  box-shadow: 0 24px 60px -30px rgba(20, 40, 30, 0.6);
}
.lp-cta-final h2 {
  font-family: var(--font-display);
  color: #fff;
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
}
.lp-cta-final p {
  margin: 0 0 1.3rem;
  color: rgba(246, 241, 231, 0.9);
}
.lp-cta-center { justify-content: center; }

@media (max-width: 640px) {
  .lp-list { grid-template-columns: 1fr; }
  .lp-block { padding: 1.35rem 1.2rem; }
}

/* =====================================================================
   MODO TRIAL (calculadora) - banner + cadeados
   ===================================================================== */
.trial-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-cream);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.trial-banner strong { color: #fff; }

.trial-banner .trial-banner-text {
  flex: 1;
  min-width: 220px;
  font-size: 0.92rem;
}

/* Link dentro do banner: o fundo é escuro, então herdar a cor de link do app o apagaria. */
.trial-banner .trial-banner-text a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

.trial-locked-card {
  position: relative;
  border: 1px dashed var(--color-border);
  border-radius: 1.1rem;
  padding: 1.5rem;
  text-align: center;
  background: color-mix(in oklch, var(--color-cream) 60%, white);
}

.trial-locked-card .lock-emoji { font-size: 1.8rem; }

.trial-locked-card h3 {
  margin: 0.5rem 0 0.35rem;
  color: var(--color-primary-dark);
}

.trial-locked-card p {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

.calc-locked-option { color: var(--color-muted); }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 720px) {
  .landing-hero {
    grid-template-columns: 1fr;
    padding: 1.75rem;
    text-align: center;
  }
  .landing-title { font-size: 1.85rem; }
  .landing-sub { max-width: none; }
  .landing-cta { justify-content: center; }
  .landing-hero-art { order: -1; }
  .landing-hero-art img { max-width: 240px; }
}

/* Card de login (landing): o form-toolbar sticky é do formulário de escalas - aqui fica estático */
.auth-panel .form-toolbar {
  position: static;
  background: transparent;
  border-top: none;
  padding: 0;
  margin: 1.2rem 0 0;
  border-radius: 0;
}

/* "Continha" (math) dentro do resultado de dose, estilo conferência */
.calc-math {
  font-size: 0.9rem;
  color: var(--color-primary-dark);
  background: color-mix(in oklch, var(--color-primary) 8%, white);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  margin-top: 0.3rem;
  font-variant-numeric: tabular-nums;
}

/* Cadeado nos cards de escala (modo teste) */
.scale-lock { float: right; opacity: 0.7; }

/* Botão "Voltar" no cabeçalho das páginas internas */
.header-link.header-back {
  font-weight: 600;
}

/* Busca de droga na calculadora */
.calc-search-field {
  margin-bottom: 0.4rem;
}
.calc-search-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: -0.2rem 0 1rem;
  border: 1px solid var(--color-border, #d7ddd6);
  border-radius: 10px;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
  background: white;
}
.calc-search-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  border-bottom: 1px solid color-mix(in oklch, var(--color-primary) 6%, white);
}
.calc-search-item:last-child { border-bottom: none; }
.calc-search-item:hover,
.calc-search-item:focus-visible {
  background: color-mix(in oklch, var(--color-primary) 10%, white);
  outline: none;
}
.calc-search-item-name {
  font-weight: 600;
  color: var(--color-primary-dark);
}
.calc-search-item-cat {
  font-size: 0.8rem;
  color: var(--color-muted, #6b7669);
}
.calc-search-empty {
  padding: 0.7rem 0.8rem;
  font-size: 0.9rem;
  color: var(--color-muted, #6b7669);
}

/* ===== Condutas e temas ===== */
.temas-intro { margin-bottom: 1.1rem; }
.temas-search-field { margin-top: 0.4rem; }

.alta-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.alta-detail-actions .primary { margin: 0; }

/* Assistente (IA) */
.assistente-intro { margin-bottom: 1rem; }
.assistente-messages {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 40vh;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.4rem;
}
.assistente-empty { padding: 1.2rem 0.4rem; }
.chat-msg { display: flex; }
.chat-user { justify-content: flex-end; }
.chat-assistant { justify-content: flex-start; }
.chat-bubble {
  max-width: 88%;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  line-height: 1.5;
}
.chat-user .chat-bubble {
  background: var(--color-accent, #1d3124);
  color: #fff;
  border-color: transparent;
  border-bottom-right-radius: 4px;
}
.chat-assistant .chat-bubble {
  background: var(--color-panel);
  border-bottom-left-radius: 4px;
}
.chat-bubble p { margin: 0 0 0.5rem; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble ul { margin: 0.2rem 0 0.5rem; padding-left: 1.2rem; }
.chat-sources {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--color-border);
  font-size: 0.85rem;
}
.chat-sources-title { font-weight: 600; }
.chat-sources ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.chat-sources li { margin-bottom: 0.3rem; }
.assistente-typing { padding: 0.4rem 0.6rem; }
.assistente-form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  margin-top: 0.8rem;
}
.assistente-form textarea {
  flex: 1;
  resize: vertical;
  min-height: 2.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font: inherit;
  background: var(--color-panel);
  color: inherit;
}
.assistente-form .primary { margin: 0; white-space: nowrap; }

.temas-area-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.temas-pill {
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  color: var(--color-primary-dark);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.temas-pill:hover { border-color: var(--color-primary); }
.temas-pill.is-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.temas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.9rem;
}
.tema-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  text-align: left;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1rem 1.05rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 40, 30, 0.04);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.tema-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 40, 30, 0.10);
  border-color: color-mix(in oklch, var(--color-primary) 40%, var(--color-border));
}
.tema-card-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tema-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--color-secondary);
  color: var(--color-primary-dark);
}
.tema-badge-emergencia { background: color-mix(in oklch, var(--color-high) 16%, white); color: var(--color-high); }
.tema-badge-ambulatorio { background: color-mix(in oklch, var(--color-primary) 15%, white); color: var(--color-primary-dark); }
.tema-badge-puericultura { background: color-mix(in oklch, var(--color-accent) 18%, white); color: color-mix(in oklch, var(--color-accent) 70%, black); }
.tema-badge-adolescente { background: color-mix(in oklch, oklch(55% 0.12 260) 18%, white); color: oklch(45% 0.12 260); }
.tema-badge-cat { background: transparent; border: 1px solid var(--color-border); color: var(--color-muted); font-weight: 600; }
.tema-badge-rev { background: color-mix(in oklch, var(--color-medium) 20%, white); color: color-mix(in oklch, var(--color-medium) 65%, black); }
.tema-card-title { font-size: 1.02rem; font-weight: 700; color: var(--color-primary-dark); line-height: 1.25; }
.tema-card-summary { font-size: 0.88rem; color: var(--color-muted); line-height: 1.4; }

.temas-empty { margin-top: 1rem; }

/* Detalhe do tema */
#temas-back-to-list { margin-bottom: 0.8rem; }
.tema-detail-head h2 { margin: 0.5rem 0 0.2rem; }
.tema-detail-summary { margin-top: 0.2rem; }
.tema-section { margin-top: 1.3rem; }
.tema-section h3, .tema-redflags h3, .tema-doses h3 {
  font-size: 1.02rem;
  color: var(--color-primary-dark);
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid color-mix(in oklch, var(--color-primary) 20%, white);
}
.tema-subheading { font-size: 0.95rem; color: var(--color-primary); margin: 0.8rem 0 0.2rem; }
.tema-section p, .tema-doses p { line-height: 1.55; }
.tema-list { margin: 0.2rem 0 0 1.1rem; line-height: 1.55; }
.tema-list li { margin-bottom: 0.25rem; }

.tema-redflags {
  margin-top: 1.3rem;
  background: color-mix(in oklch, var(--color-high) 8%, white);
  border: 1px solid color-mix(in oklch, var(--color-high) 30%, white);
  border-left: 4px solid var(--color-high);
  border-radius: 12px;
  padding: 0.9rem 1.05rem;
}
.tema-redflags h3 { border-bottom: none; color: var(--color-high); margin-bottom: 0.3rem; }
.tema-redflags ul { margin: 0 0 0 1.1rem; line-height: 1.5; }
.tema-redflags li { margin-bottom: 0.25rem; }

.tema-doses {
  margin-top: 1.3rem;
  background: color-mix(in oklch, var(--color-primary) 6%, white);
  border-radius: 12px;
  padding: 0.9rem 1.05rem;
}
.tema-doses h3 { border-bottom: none; margin-bottom: 0.3rem; }
.tema-doses ul { margin: 0 0 0 1.1rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.tema-doses li { margin-bottom: 0.25rem; }
.tema-doses-note { font-size: 0.85rem; color: var(--color-muted); margin-top: 0.5rem; }

@media (max-width: 560px) {
  .temas-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Prontuário eletrônico pediátrico
   ========================================================================= */
.pr-list-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pr-list-head h2 { margin-top: 0; }
.pr-search-field { margin-top: 1rem; margin-bottom: 0; }

.pr-patients { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; margin-top: 1rem; }
.pr-patient-card {
  text-align: left; background: var(--color-panel); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 1rem 1.15rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.25rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pr-patient-card:hover { border-color: var(--color-primary); box-shadow: 0 8px 20px -16px rgba(20,40,30,0.5); }
.pr-patient-name { font-weight: 600; font-size: 1.05rem; }
.pr-patient-meta { color: var(--color-muted); font-size: 0.85rem; }

.pr-back { margin-bottom: 0.9rem; }
.pr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.pr-subhead { margin: 1.2rem 0 0.2rem; }
.pr-hint { font-size: 0.85rem; margin: 0.1rem 0 0.8rem; }
.pr-form-actions { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.2rem; flex-wrap: wrap; }
.pr-msg { font-size: 0.9rem; }
.pr-msg-ok { color: var(--color-primary); }
.pr-msg-err { color: var(--color-high); }

.pr-responsavel-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; }
.pr-responsavel-row input { padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.95rem; }
.pr-r-remove { padding: 0.45rem 0.7rem; line-height: 1; }

.pr-patient-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pr-patient-header h2 { margin: 0; }
.pr-patient-header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Resumo por IA (abaixo do nome do paciente) */
.pr-ai-resumo {
  border-left: 3px solid var(--color-accent, #c9a227);
  background: color-mix(in oklch, var(--color-primary) 5%, var(--color-panel));
}
.pr-ai-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pr-ai-head h3 { margin: 0; font-size: 1.05rem; }
.pr-ai-hint { margin: 0.5rem 0 0; font-size: 0.85rem; }
.pr-ai-out { margin-top: 0.85rem; font-size: 0.94rem; line-height: 1.55; }
.pr-ai-out p { margin: 0 0 0.5rem; }
.pr-ai-out ul { margin: 0.2rem 0 0.6rem; padding-left: 1.2rem; }
.pr-ai-out li { margin-bottom: 0.3rem; }
.pr-ai-out strong { color: var(--color-primary-dark); }
.pr-ai-sec { margin: 1rem 0 0.35rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); border-bottom: 1px solid var(--color-border); padding-bottom: 0.2rem; }
.pr-ai-sec:first-child { margin-top: 0.2rem; }
.pr-ai-disc { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px dashed var(--color-border); font-size: 0.78rem; }

/* Laudo por IA (aba do paciente) */
.lia-setup .auth-field { max-width: 460px; }
.lia-gaps { margin: 1rem 0; }
.lia-gaps-ok {
  background: color-mix(in oklch, var(--color-primary) 10%, white);
  border-left: 3px solid var(--color-primary); border-radius: 0.7rem; padding: 0.9rem 1.1rem;
}
.lia-gaps-warn {
  background: color-mix(in oklch, var(--color-accent, #c9a227) 14%, white);
  border-left: 3px solid var(--color-accent, #c9a227); border-radius: 0.7rem; padding: 0.9rem 1.1rem;
}
.lia-gaps-warn ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.lia-gaps-warn li { margin-bottom: 0.25rem; }
.lia-todo {
  background: #fdeaca; color: #7a5b00; padding: 0 0.25rem; border-radius: 3px; font-weight: 600;
}
@media print { .lia-todo { background: none; color: inherit; } }
.lia-sugestoes { margin: 0.75rem 0; display: flex; flex-direction: column; gap: 0.55rem; }
.lia-sug-titulo { margin: 0; }
.lia-sug-card { background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 0.8rem; padding: 0.8rem 1rem; }
.lia-sug-top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.lia-sug-nome { font-weight: 600; color: var(--color-primary-dark); }
.lia-sug-card p { margin: 0.35rem 0 0; }
.lia-sug-card .lia-sug-use { margin-top: 0.55rem; }
.lia-badge { font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); }
.lia-badge-forte { background: #e6f4ea; color: #1d6b3a; }
.lia-badge-parcial { background: #fdf3e3; color: #8a6400; }
.lia-badge-fraco { background: #eee; color: #555; }
/* formulário do laudo (motor pré-preenchido) */
.lia-escalas-box { background: color-mix(in oklch, var(--color-primary) 8%, white); border: 1px solid var(--color-border); border-radius: 0.7rem; padding: 0.8rem 1rem; margin: 0.7rem 0; }
.lia-escalas-box ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.lia-grupo { border: 1px solid var(--color-border); border-radius: 0.8rem; padding: 0.9rem 1rem; margin: 0.7rem 0; }
.lia-grupo-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.lia-grupo-head h4 { margin: 0; font-size: 1rem; }
.lia-grupo-regra { font-size: 0.76rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); white-space: nowrap; }
.lia-regra-ok { background: #e6f4ea; color: #1d6b3a; }
.lia-regra-falta { background: #fdf3e3; color: #8a6400; }
.lia-crit { margin: 0.6rem 0; }
.lia-crit-check { display: flex; gap: 0.5rem; align-items: flex-start; cursor: pointer; }
.lia-crit-check input { margin-top: 0.3rem; flex: none; }
.lia-crit-desc { font-weight: 400; }
.lia-crit-ex { width: 100%; margin-top: 0.35rem; }
.lia-esps { margin: 0.7rem 0; }
.lia-esps h4 { margin: 0 0 0.4rem; font-size: 1rem; }
.lia-form-actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin: 0.7rem 0; }
.lia-regra-resumo { font-size: 0.85rem; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); }

.pr-tabs { display: flex; gap: 0.4rem; margin: 1rem 0; flex-wrap: wrap; }
.pr-tab {
  background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 0.5rem 1.1rem; cursor: pointer; font-size: 0.95rem; color: var(--color-text);
}
.pr-tab-active { background: var(--color-primary); color: var(--color-cream); border-color: var(--color-primary); }

.pr-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.8rem; }
.pr-panel-head h3 { margin: 0; }

.pr-consulta-item { padding: 1rem 1.2rem; margin-bottom: 0.7rem; cursor: pointer; }
.pr-consulta-item:hover { border-color: var(--color-primary); }
.pr-consulta-item-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.pr-consulta-item-q { margin: 0.35rem 0 0; }

.pr-status-chip { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); white-space: nowrap; }
.pr-status-final { background: #e6f4ea; color: var(--color-primary-dark); }
.pr-status-draft { background: #fbf1d9; color: #7a5b12; }

.pr-chart-controls { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.pr-inline-field { margin: 0; }
.pr-inline-field select { min-width: 220px; }
.pr-chart-wrap { width: 100%; overflow-x: auto; }
.pr-chart { width: 100%; height: auto; display: block; }
.pr-chart-note { font-size: 0.82rem; margin-top: 0.4rem; }

.pr-grid { stroke: var(--color-border); stroke-width: 0.5; }
.pr-axis-lab { fill: var(--color-muted); font-size: 11px; font-family: var(--font-sans); }
.pr-axis-title { fill: var(--color-muted); font-size: 12px; font-family: var(--font-sans); }
.pr-zline { stroke-width: 1.2; }
.pr-z0 { stroke: var(--color-primary); stroke-width: 1.6; }
.pr-z2 { stroke: var(--color-accent); }
.pr-z3 { stroke: var(--color-high); stroke-dasharray: 4 3; }
.pr-zlab { fill: var(--color-muted); font-size: 10px; font-family: var(--font-sans); }
.pr-ptline { stroke: var(--color-primary-dark); stroke-width: 2; }
.pr-pt { fill: var(--color-primary-dark); stroke: #fff; stroke-width: 1.5; }

.pr-medicao-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.pr-medicao-del { border: none; background: none; color: var(--color-muted); font-size: 1rem; line-height: 1; padding: 0 0.3rem; cursor: pointer; border-radius: 0.3rem; }
.pr-medicao-del:hover { color: var(--color-high); background: color-mix(in oklch, var(--color-high) 10%, white); }
.pr-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pr-lote-head, .pr-lote-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 0.4rem; align-items: center; }
.pr-lote-head { font-size: 0.78rem; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.3rem; }
.pr-lote-row { margin-bottom: 0.4rem; }
.pr-lote-row input { width: 100%; min-width: 0; padding: 0.42rem 0.5rem; border: 1px solid var(--color-border); border-radius: 0.45rem; font: inherit; }
#pr-lote-mais { margin: 0.3rem 0 0.6rem; }
.pr-medicao-date { font-weight: 600; font-size: 0.9rem; }
.pr-medicao-vals { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pr-val { font-size: 0.85rem; padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); background: var(--color-secondary); }
.pr-val em { font-style: normal; opacity: 0.75; }
.pr-val-ok { background: #e6f4ea; color: var(--color-primary-dark); }
.pr-val-alerta { background: #fbf1d9; color: #7a5b12; }
.pr-val-grave { background: #fbe6e3; color: var(--color-high); }

.pr-table-scroll { overflow-x: auto; }
.pr-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pr-table th, .pr-table td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.pr-table th { color: var(--color-muted); font-weight: 600; }
.pr-delta { color: var(--color-muted); font-size: 0.8rem; }

/* modal */
.pr-modal-backdrop { position: fixed; inset: 0; background: rgba(20,30,25,0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; }
.pr-modal { max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; }
.pr-modal h3 { margin-top: 0; }

/* Assinatura / pagamentos */
.as-plan-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.as-plan-name { font-size: 1.3rem; font-weight: 700; font-family: var(--font-display); }
.as-methods { display: grid; gap: 0.6rem; margin: 0.8rem 0; }
.as-method { display: flex; align-items: center; gap: 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.8rem 1rem; cursor: pointer; }
.as-method:has(input:checked) { border-color: var(--color-primary); background: #e6f4ea; }
.as-method-body { display: flex; flex-direction: column; }
.as-method-body small { color: var(--color-muted); }
.as-pg-status { font-size: 0.78rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); }
.as-pg-pago { background: #e6f4ea; color: var(--color-primary-dark); }
.as-pg-pendente { background: #fbf1d9; color: #7a5b12; }
.as-pg-falhou, .as-pg-estornado { background: #fbe6e3; color: var(--color-high); }

@media (max-width: 560px) {
  .pr-grid-2 { grid-template-columns: 1fr; }
  .pr-responsavel-row { grid-template-columns: 1fr 1fr; }
  .pr-list-head { flex-direction: column; }
  .pr-inline-field select { min-width: 0; width: 100%; }
}

/* =========================================================================
   Menu de navegação (hambúrguer + gaveta) — js/nav.js
   ========================================================================= */
.nav-toggle {
  width: 46px; height: 40px; padding: 0; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.nav-toggle:hover, .nav-toggle:focus-visible { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.9); }
.nav-toggle span {
  display: block; width: 24px; height: 2.5px; background: var(--color-cream); border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/*
 * VOLTAR PARA A TELA INICIAL, no topo do conteúdo de toda ferramenta (v. js/nav.js).
 *
 * Ficou AQUI e não no cabeçalho, e a escolha foi MEDIDA, não preferida: com o hambúrguer, a
 * logo e "SPI · Sistema Pediátrico Integrado", um botão a mais no cabeçalho quebrava o nome
 * do app em duas linhas a 390px (o aparelho do dono), e encolher a fonte até caber cortava a
 * palavra "Integrado". No corpo o botão fica maior, cai debaixo do polegar e repete um padrão
 * que o produto já usa: o "voltar" das telas da loja.
 */
.nav-voltar {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .9rem;
  padding: .5rem .95rem .5rem .75rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill, 999px);
  background: var(--color-panel); color: var(--color-primary-dark);
  text-decoration: none; font-size: .92rem; font-weight: 500; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(20, 40, 30, .06);
  transition: border-color .18s ease, box-shadow .2s ease, transform .12s ease, background .18s ease;
}
.nav-voltar svg { width: 18px; height: 18px; flex: none; }
.nav-voltar:hover {
  border-color: color-mix(in oklch, var(--color-primary) 45%, var(--color-border));
  box-shadow: 0 10px 20px -16px rgba(20, 40, 30, .6);
  transform: translateY(-1px);
}
.nav-voltar:active {
  transform: translateY(1px) scale(.98);
  background: color-mix(in oklch, var(--color-primary) 8%, var(--color-panel));
  border-color: color-mix(in oklch, var(--color-primary) 60%, var(--color-border));
  box-shadow: none;
}
.nav-voltar:focus-visible {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px color-mix(in oklch, var(--color-primary) 55%, transparent);
}
/* No papel o botão não existe. */
@media print { .nav-voltar { display: none !important; } }

.nav-overlay {
  position: fixed; inset: 0; background: rgba(15, 28, 22, 0.5); opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease; z-index: 90;
}
.nav-overlay.open { opacity: 1; visibility: visible; }

.nav-drawer {
  position: fixed; top: 0; left: 0; height: 100%; width: min(330px, 86vw);
  background: var(--color-primary-dark); color: var(--color-cream);
  box-shadow: 18px 0 40px -24px rgba(15, 28, 22, 0.7);
  transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100; display: flex; flex-direction: column; overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(246, 241, 231, 0.14);
  position: sticky; top: 0; background: var(--color-primary-dark); z-index: 1;
}
.nav-drawer-title { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: #fff; }
.nav-drawer-logo { width: 26px; height: 26px; border-radius: 50%; }
.nav-close { background: transparent; border: none; font-size: 1.9rem; line-height: 1; color: rgba(246, 241, 231, 0.7); cursor: pointer; padding: 0 0.3rem; }
.nav-close:hover { color: #fff; }

.nav-list { padding: 0.6rem 0.75rem 1.2rem; }
.nav-group {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; font-weight: 700;
  color: rgba(246, 241, 231, 0.52); padding: 1.05rem 0.75rem 0.4rem;
}
.nav-list > .nav-group:first-child { padding-top: 0.4rem; }
.nav-link {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left; box-sizing: border-box;
  padding: 0.7rem 0.75rem; border-radius: 0.6rem; border: none; background: transparent;
  color: rgba(246, 241, 231, 0.9); font-size: 1rem; text-decoration: none; cursor: pointer;
  border-left: 3px solid transparent; transition: background 0.15s, color 0.15s;
}
.nav-ico { flex: 0 0 auto; display: inline-flex; color: rgba(246, 241, 231, 0.6); }
.nav-ico svg { width: 20px; height: 20px; display: block; }
.nav-link-active .nav-ico { color: var(--color-accent); }
.nav-logout .nav-ico { color: #f0b4a8; }
.nav-link:hover { background: rgba(246, 241, 231, 0.1); color: #fff; }
.nav-link:hover .nav-ico { color: rgba(246, 241, 231, 0.9); }
.nav-link-active { background: rgba(246, 241, 231, 0.14); border-left-color: var(--color-accent); font-weight: 600; color: #fff; }
/* "Trocar de módulo" abre o bloco final da gaveta, junto do Sair. A borda de cima é dele: se
   ficasse no Sair, apareceria uma linha entre os dois e eles pareceriam grupos diferentes. */
.nav-trocar-modulo { margin-top: 0.7rem; border-top: 1px solid rgba(246, 241, 231, 0.14); border-radius: 0; padding-top: 0.9rem; }
.nav-logout { border-radius: 0; color: #f2c0b6; font-weight: 600; }
.nav-logout:hover { background: rgba(240, 120, 100, 0.16); color: #ffd9d1; }

/* Tela inicial (hub) — boas-vindas; a navegação é pelo menu hambúrguer */
.hub-welcome { text-align: left; max-width: none; margin: 1.75rem 0 0; padding: 0; }
.hub-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-gold-deep);
}
.hub-eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--color-gold); }
.hub-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 5.2vw, 2.9rem); line-height: 1.04; letter-spacing: -0.018em;
  margin: 0.55rem 0 0.6rem; color: var(--color-primary-dark);
}
.hub-lead { max-width: 48ch; font-size: 1.03rem; line-height: 1.55; margin: 0; }
.hub-welcome-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7em; height: 1.7em; border-radius: 0.4rem; background: var(--color-primary);
  color: var(--color-cream); font-size: 0.85em; vertical-align: middle; cursor: pointer; margin: 0 0.15em;
}
.hub-welcome-burger svg { width: 1em; height: 1em; }

/* Marca do sistema no cabeçalho (logo) + nome do sistema */
.header-mark { display: inline-flex; flex: 0 0 auto; }
.header-mark svg { height: 2rem; width: 2rem; display: block; }
.header-mark-img { height: 2rem; width: 2rem; display: block; border-radius: 7px; object-fit: cover; }
header.app-header h1 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.005em; line-height: 1.15; }
@media (max-width: 560px) {
  header.app-header { padding: 0.75rem 1rem; }
  header.app-header h1 { font-size: 1rem; }
  .header-mark svg { height: 1.75rem; width: 1.75rem; }
  .header-mark-img { height: 1.75rem; width: 1.75rem; border-radius: 6px; }
}

/* Marca dentro da gaveta do menu (fundo claro) */
.nav-drawer-title { font-size: 1rem; }
.nav-drawer-title .header-mark svg { height: 1.6rem; width: 1.6rem; }
.nav-drawer-title .header-mark-img { height: 1.6rem; width: 1.6rem; border-radius: 6px; }

/* Prontuário — escalas de autopreenchimento */
.pr-escala-list { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.pr-escala-pick {
  display: flex; flex-direction: column; gap: 0.15rem; text-align: left; cursor: pointer;
  background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 0.7rem 0.9rem; transition: border-color 0.15s, background 0.15s;
}
.pr-escala-pick:hover { border-color: var(--color-primary); background: var(--color-secondary); }
.pr-escala-pick-name { font-weight: 600; }
.pr-escala-pick-cat { font-size: 0.8rem; color: var(--color-muted); }

.pr-consulta-head-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Atalhos rápidos na tela inicial */
.hub-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.85rem; margin-top: 1.5rem; }
.hub-shortcut {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-decoration: none;
  padding: 1.25rem 0.9rem; border: 1px solid var(--color-border); border-radius: 1.1rem;
  background: var(--color-panel); color: var(--color-text); font-weight: 600; font-size: 0.95rem; text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.hub-shortcut:hover {
  border-color: color-mix(in oklch, var(--color-primary) 45%, var(--color-border));
  box-shadow: 0 20px 38px -22px rgba(20, 40, 30, 0.5);
  transform: translateY(-3px);
}
.hub-shortcut-ico {
  display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center;
  border-radius: 14px; background: color-mix(in oklch, var(--color-primary) 14%, white); color: var(--color-primary-dark);
  transition: background 0.2s ease, transform 0.2s ease;
}
.hub-shortcut-ico svg { width: 24px; height: 24px; }
.hub-shortcut:hover .hub-shortcut-ico { transform: translateY(-1px) scale(1.05); background: color-mix(in oklch, var(--color-primary) 22%, white); }

/* Antropometria dentro da consulta */
.pr-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }
@media (max-width: 560px) { .pr-grid-3 { grid-template-columns: 1fr; } }
.pr-grid-vitais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }
@media (max-width: 560px) { .pr-grid-vitais { grid-template-columns: repeat(2, 1fr); } }
.pr-vital-ref { display: block; font-size: 0.72rem; color: var(--color-muted); margin-top: -0.35rem; }
input.pr-vital-alt { border-color: var(--color-accent); background: color-mix(in oklch, var(--color-accent) 8%, transparent); }
input.pr-vital-alt + .pr-vital-ref { color: var(--color-accent); font-weight: 600; }

/* Resultados de exames + tendência */
.pr-res-form { display: grid; grid-template-columns: auto 1.4fr 1fr 0.8fr auto; gap: 0.5rem 0.7rem; align-items: end; }
.pr-res-form .primary { height: 2.6rem; }
@media (max-width: 620px) { .pr-res-form { grid-template-columns: 1fr 1fr; } .pr-res-form .pr-res-nome { grid-column: 1 / -1; } .pr-res-form .primary { grid-column: 1 / -1; } }
.pr-res-group { padding-top: 0.8rem; }
.pr-res-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.pr-res-group-head h3 { margin: 0; font-size: 1rem; }
.pr-res-last { font-weight: 700; color: var(--color-primary-dark, var(--color-primary)); }
.pr-spark { width: 100%; height: 60px; margin: 0.4rem 0; display: block; }
.pr-spark path { fill: none; stroke: var(--color-primary); stroke-width: 2; }
.pr-spark circle { fill: var(--color-primary); }
.pr-res-pts { display: flex; flex-direction: column; gap: 0.1rem; }
.pr-res-pt { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; border-top: 1px solid var(--color-border); font-size: 0.9rem; }
.pr-res-pt-data { color: var(--color-muted); min-width: 5.5rem; }
.pr-res-pt-val { flex: 1; font-weight: 600; }
.pr-res-del { background: transparent; border: none; color: var(--color-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 0.3rem; }
.pr-res-del:hover { color: var(--color-danger, #c0392b); }

.pr-ig-row { display: flex; gap: 0.5rem; }
.pr-ig-row input { flex: 1; min-width: 0; }

/* =========================================================================
   Meu dia (recall / pendências)
   ========================================================================= */
.dia-hero { margin: 0.4rem 0 1.1rem; }
.dia-saud { margin: 0; font-size: 1.5rem; }
.dia-data { margin: 0.15rem 0 0; text-transform: capitalize; }
.dia-panel { margin-bottom: 1rem; }
.dia-sec-head { display: flex; align-items: center; gap: 0.6rem; }
.dia-sec-head h3 { margin: 0; font-size: 1.08rem; }
.dia-count { background: var(--color-primary); color: #fff; border-radius: 999px; min-width: 1.5rem; height: 1.5rem; padding: 0 0.5rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; }
.dia-sec-hint { margin: 0.25rem 0 0; font-size: 0.85rem; }
.dia-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.8rem; }
.dia-row {
  display: flex; align-items: center; gap: 0.9rem; text-decoration: none; color: inherit;
  background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 0.7rem 0.9rem; transition: border-color .15s, box-shadow .15s;
}
.dia-row:hover { border-color: var(--color-primary); box-shadow: 0 8px 20px -16px rgba(20,40,30,0.5); }
.dia-row-left { display: flex; flex-direction: column; align-items: center; min-width: 3.4rem; }
.dia-hora { font-weight: 700; color: var(--color-primary-dark, var(--color-primary)); font-size: 0.95rem; white-space: nowrap; }
.dia-hora-2 { font-size: 0.78rem; color: var(--color-muted); }
.dia-row-main { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 auto; min-width: 0; }
.dia-row-title { font-weight: 600; }
.dia-row-sub { font-size: 0.82rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dia-row-tag { flex: 0 0 auto; }
.dia-tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted); background: var(--color-bg, #f2f2ee); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.15rem 0.55rem; white-space: nowrap; }
.dia-tag-ok { color: #1b7a44; border-color: #1b7a44; }
.dia-tag-warn { color: #9a6b00; border-color: #d9b25a; }
.dia-wpp { font-size: 0.78rem; font-weight: 700; color: #128c4b; border: 1px solid #128c4b; border-radius: 999px; padding: 0.2rem 0.6rem; text-decoration: none; white-space: nowrap; }
.dia-wpp:hover { background: #128c4b; color: #fff; }
.dia-vazio { color: var(--color-muted); font-size: 0.9rem; margin: 0.3rem 0; }
.dia-erro { color: var(--color-danger, #c0392b); }

/* =========================================================================
   Portal do responsável — painel no prontuário (médico) + página do portal
   ========================================================================= */
.pr-portal-panel { }
.pr-portal-panel summary { cursor: pointer; }
.pr-portal-hint { font-size: 0.86rem; margin: 0.5rem 0; }
.pr-portal-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.pr-portal-form input { flex: 1 1 12rem; min-width: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
.pr-portal-list { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.pr-portal-item { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0.6rem; border: 1px solid var(--color-border); border-radius: 0.5rem; }
.pr-portal-item.pr-portal-off { opacity: 0.6; }
/* pendente é diferente de revogado: pede ação, então chama atenção em vez de apagar */
.pr-portal-item.pr-portal-pend { border-color: var(--color-accent, #b8860b); background: rgba(184, 134, 11, 0.07); }
.pr-portal-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* aviso de sexo presumido pelo nome (ficha criada pela Carla) */
.pr-sexo-presumido {
  grid-column: 1 / -1; margin: -0.2rem 0 0.4rem; padding: 0.5rem 0.7rem;
  font-size: 0.84rem; line-height: 1.4; border-radius: 0.5rem;
  border: 1px solid var(--color-accent, #b8860b); background: rgba(184, 134, 11, 0.09);
}

/* portal dentro do detalhe do agendamento (Agenda) */
.ag-portal-box { margin: 0.6rem 0; }
.ag-portal-box p { margin: 0.3rem 0; font-size: 0.88rem; }
.ag-portal-item { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.ag-portal-tag { font-size: 0.78rem; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--color-border); }
.ag-portal-tag.ag-portal-pend { border-color: var(--color-accent, #b8860b); background: rgba(184, 134, 11, 0.12); }
.ag-c-portal { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.6rem 0 0.2rem; font-size: 0.9rem; }
.ag-c-portal input { margin-top: 0.2rem; flex: 0 0 auto; }
.ag-c-portal-hint { font-size: 0.8rem; margin: 0 0 0.4rem; }
.doc-share-on { color: #1b7a44; border-color: #1b7a44; }

/* portal (página do responsável) */
.pt-login-card { max-width: 26rem; margin: 1.5rem auto; }
.pt-login-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.pt-login-help { font-size: 0.82rem; margin-top: 0.8rem; }
.pt-topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 0.4rem 0 1rem; }
.pt-saud { margin: 0; font-size: 1.4rem; }
.pt-filho-sel { font-size: 0.85rem; color: var(--color-muted); display: flex; flex-direction: column; gap: 0.2rem; }
.pt-filho-sel select { padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; }
.pt-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.pt-tab { padding: 0.5rem 0.9rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-panel); cursor: pointer; font: inherit; }
.pt-tab-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pt-h3 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.pt-doc-hint { font-size: 0.85rem; margin: 0.6rem 0; }
.pt-nota { font-size: 0.8rem; margin-top: 0.8rem; }
.pt-cresc-ind { max-width: 20rem; margin-bottom: 0.6rem; }
.pr-lote-ia { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 0.7rem; flex-wrap: wrap; }
.pr-lote-ia select { flex: 1; min-width: 12rem; padding: 0.45rem 0.5rem; border: 1px solid var(--color-border); border-radius: 0.45rem; font: inherit; }
.doc-cat { padding: 0.35rem 0.5rem; border: 1px solid var(--color-border); border-radius: 999px; font: inherit; font-size: 0.82rem; background: var(--color-secondary, #f4f1ea); max-width: 11rem; }
.pt-rem-pick { display: flex; gap: 0.5rem; align-items: center; margin: 0.6rem 0; flex-wrap: wrap; }
.pt-rem-pick select { flex: 1; min-width: 12rem; padding: 0.45rem 0.5rem; border: 1px solid var(--color-border); border-radius: 0.45rem; font: inherit; }
.pt-rem-card { margin-top: 0.7rem; }
.pt-rem-card .auth-field { max-width: 18rem; margin: 0.4rem 0; }
.pt-rem-horas { list-style: none; margin: 0.4rem 0; padding: 0; columns: 2; column-gap: 1rem; }
.pt-rem-horas li { font-size: 0.88rem; margin-bottom: 0.25rem; break-inside: avoid; }
.pt-rem-horas input[type="checkbox"]:checked + * , .pt-rem-horas label:has(input:checked) { color: var(--color-muted); text-decoration: line-through; }
.pt-rem-remover { border: none; background: none; color: var(--color-high); font-size: 0.82rem; cursor: pointer; padding: 0.2rem 0; }
@media (max-width: 560px) { .pt-rem-horas { columns: 1; } }
.pt-vac-prox { margin-top: 0.7rem; border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent, #a5804a); border-radius: 0.6rem; padding: 0.6rem 0.8rem; }
.pt-vac-prox ul { margin: 0.3rem 0 0 1.1rem; line-height: 1.55; font-size: 0.88rem; }
.pt-vac-prox-data { font-variant-numeric: tabular-nums; font-weight: 600; }
.pt-vac-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.7rem; margin-top: 0.8rem; }
.pt-vac-card { border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.6rem 0.8rem; }
.pt-vac-card ul { margin: 0.4rem 0 0; padding-left: 1rem; }
.pt-vac-dose { font-size: 0.86rem; margin-bottom: 0.15rem; }
.pt-vac-aplicada { color: #1b7a44; }
.pt-vac-atrasada { color: var(--color-high, #b3261e); font-weight: 600; }
.pt-vac-futura { color: var(--color-muted); }
.pt-vac-perdida { color: var(--color-medium, #9a6b00); }
.pt-table-wrap { overflow-x: auto; }
.pt-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pt-table th, .pt-table td { border: 1px solid var(--color-border); padding: 0.4rem 0.6rem; text-align: left; white-space: nowrap; }
.pt-table th { background: var(--color-secondary, #f4efe2); }
.pt-pct { display: inline-block; margin-left: 0.35rem; font-size: 0.75rem; color: var(--color-muted); }

/* =========================================================================
   Agenda + Financeiro
   ========================================================================= */
.ag-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ag-nav { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ag-nav input[type="date"], .ag-nav input[type="month"] { padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; }
.ag-nav button { padding: 0.45rem 0.8rem; }
.ag-day-title { margin: 0.8rem 0 0; text-transform: capitalize; font-size: 1.15rem; }

.ag-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
.ag-item {
  display: flex; align-items: center; gap: 0.9rem; text-align: left; cursor: pointer;
  background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 0.9rem 1.1rem; transition: border-color 0.15s, box-shadow 0.15s;
}
.ag-item:hover { border-color: var(--color-primary); box-shadow: 0 8px 20px -16px rgba(20,40,30,0.5); }
.ag-time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-primary-dark); white-space: nowrap; }
.ag-item-main { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; min-width: 0; }
.ag-item-name { font-weight: 600; }
.ag-item-obs { font-size: 0.82rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-tag-carla { align-self: flex-start; font-size: 0.7rem; font-weight: 700; background: #e6f4ea; color: var(--color-primary-dark); padding: 0.1rem 0.45rem; border-radius: var(--radius-pill); }
.ag-status { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); white-space: nowrap; }
.ag-st-agendado { background: var(--color-secondary); color: var(--color-text); }
.ag-st-confirmado { background: #e0edff; color: #1b4b8a; }
.ag-st-atendido { background: #e6f4ea; color: var(--color-primary-dark); }
.ag-st-faltou { background: #fbf1d9; color: #7a5b12; }
.ag-st-cancelado { background: #fbe6e3; color: var(--color-high); }
.ag-status-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0; }
.ag-status-btn { padding: 0.4rem 0.8rem; font-size: 0.9rem; }

.fin-add-actions { display: flex; gap: 0.5rem; }
.fin-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 1rem; }
.fin-sum-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.9rem 1rem; text-align: center; }
.fin-sum-label { display: block; font-size: 0.8rem; color: var(--color-muted); }
.fin-sum-val { display: block; font-size: 1.35rem; font-weight: 700; margin-top: 0.2rem; }
.fin-sum-in .fin-sum-val { color: var(--color-primary); }
.fin-sum-out .fin-sum-val { color: var(--color-high); }
.fin-sum-bal { background: var(--color-secondary); }
.fin-bar-in { fill: var(--color-primary); }
.fin-bar-out { fill: var(--color-high); }
.fin-legend { display: flex; gap: 1.2rem; justify-content: center; font-size: 0.85rem; color: var(--color-muted); margin-top: 0.3rem; }
.fin-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 0.3rem; }
.fin-dot-in { background: var(--color-primary); }
.fin-dot-out { background: var(--color-high); }
.fin-val-in { color: var(--color-primary); font-weight: 600; white-space: nowrap; }
.fin-val-out { color: var(--color-high); font-weight: 600; white-space: nowrap; }
.fin-del { background: transparent; border: none; color: var(--color-muted); cursor: pointer; font-size: 0.9rem; }
.fin-del:hover { color: var(--color-high); }

@media (max-width: 560px) {
  .fin-summary { grid-template-columns: 1fr; }
  .ag-bar { flex-direction: column; align-items: stretch; }
}

/* Agenda — calendário do mês */
.ag-cal-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; }
.ag-cal-title { margin: 0; flex: 1; text-align: center; font-size: 1.1rem; text-transform: capitalize; }
.ag-cal-arrow { padding: 0.35rem 0.8rem; }
.ag-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.ag-cal-wd { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--color-muted); padding: 0.2rem 0; }
.ag-cal-empty { aspect-ratio: 1 / 1; }
.ag-cal-day {
  position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--color-border); border-radius: 0.6rem;
  background: var(--color-panel); color: var(--color-text); cursor: pointer; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center; transition: border-color 0.12s, background 0.12s;
}
.ag-cal-day:hover { border-color: var(--color-primary); }
.ag-cal-today { font-weight: 700; border-color: var(--color-muted); }
.ag-cal-sel { background: var(--color-primary); color: var(--color-cream); border-color: var(--color-primary); }
.ag-dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }
.ag-cal-sel .ag-dot { background: var(--color-cream); }
.ag-cal-legend { display: flex; justify-content: center; font-size: 0.8rem; color: var(--color-muted); margin-top: 0.7rem; }
.ag-cal-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); vertical-align: middle; margin-right: 0.35rem; }

/* ============================ Laudos ============================ */
.laudo-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.laudo-tipo-card {
  display: flex; flex-direction: column; gap: 0.35rem; text-align: left;
  background: var(--color-panel); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; font: inherit; color: inherit;
}
.laudo-tipo-card:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.laudo-tipo-nome { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-primary-dark); font-weight: 600; }
.laudo-tipo-desc { font-size: 0.9rem; }
.laudo-tipo-cid { font-size: 0.78rem; color: var(--color-muted); letter-spacing: 0.03em; }
.laudo-tipo-soon { cursor: default; opacity: 0.6; }
.laudo-tipo-soon:hover { transform: none; box-shadow: none; border-color: var(--color-border); }

.laudo-wizard-head { padding-bottom: 1rem; }
.laudo-step-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.laudo-step-head h2 { margin: 0; }
.laudo-progress { height: 6px; background: var(--color-secondary); border-radius: var(--radius-pill); margin-top: 0.8rem; overflow: hidden; }
.laudo-progress-bar { height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); transition: width 0.25s; width: 14%; }

.laudo-wizard-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }

.laudo-grupo { margin: 1.2rem 0; }
.laudo-grupo h3 { font-family: var(--font-display); font-size: 1.02rem; color: var(--color-primary-dark); margin: 0 0 0.3rem; }
.laudo-grupo-regra { font-size: 0.82rem; margin: 0 0 0.6rem; }
.laudo-grupo-regra.laudo-ok { color: var(--color-primary); }
.laudo-grupo-regra.laudo-pending { color: var(--color-muted); }

.laudo-criterio, .laudo-terapia { border: 1px solid var(--color-border); border-radius: 0.7rem; padding: 0.7rem 0.85rem; margin-bottom: 0.6rem; }
.laudo-crit-check { display: flex; gap: 0.55rem; align-items: flex-start; cursor: pointer; }
.laudo-crit-check input { margin-top: 0.25rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
.laudo-crit-check > span { display: flex; flex-direction: column; gap: 0.15rem; }
.laudo-crit-desc { font-size: 0.82rem; line-height: 1.35; }
.laudo-crit-ex { margin-top: 0.6rem; }
.laudo-crit-ex textarea, .laudo-step-body textarea { width: 100%; }
.laudo-terapia-freq { margin-top: 0.6rem; display: flex; align-items: center; gap: 0.5rem; }
.laudo-terapia-freq input { width: 6.5rem; }
.laudo-opcional { border: 1px solid var(--color-border); border-radius: 0.7rem; padding: 0.7rem 0.85rem; margin-bottom: 0.5rem; }

/* ---- documento gerado (papel timbrado dourado) ---- */
.laudo-doc-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1rem 0; }
.laudo-doc {
  background: #fff; color: #1c1c1c; border: none; border-radius: 0;
  box-shadow: 0 1px 2px rgba(20, 40, 30, 0.06), 0 12px 30px -20px rgba(20, 40, 30, 0.4);
  padding: 0; margin-top: 0.5rem; max-width: 820px; line-height: 1.6;
  font-family: Georgia, "Times New Roman", serif;
}
.laudo-doc:focus { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.laudo-doc > *:not(.laudo-timbre):not(.laudo-timbre-banner) { margin-left: 2.4rem; margin-right: 2.4rem; }
.laudo-doc p { margin: 0.7rem 2.4rem; text-align: justify; }
/* Encaminhamentos: cada bloco (uma folha por especialidade) ocupa a largura toda,
   para a faixa/logo sangrar de ponta a ponta; só o texto do bloco fica recuado. */
.laudo-doc > .enc-doc-corte { margin-left: 0; margin-right: 0; }
.enc-doc-corte > *:not(.laudo-timbre):not(.laudo-timbre-banner) { margin-left: 2.4rem; margin-right: 2.4rem; }
.enc-doc-corte > p { margin-left: 2.4rem; margin-right: 2.4rem; }
.laudo-timbre {
  display: flex; align-items: center; gap: 1rem; background: #f7f1e3;
  border-bottom: 2px solid #c9a227; padding: 1.1rem 2.4rem; margin: 0 0 1.2rem;
}
.laudo-timbre img { max-height: 54px; width: auto; }
.laudo-timbre-txt { display: flex; flex-direction: column; }
.laudo-timbre-txt strong { font-family: var(--font-display); color: #34614e; font-size: 1.15rem; }
.laudo-timbre-txt span { color: #6b6b6b; font-size: 0.85rem; }
.laudo-timbre-default { justify-content: center; }
.laudo-timbre-nome { font-family: var(--font-display); color: #34614e; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.01em; }
/* cabeçalho como banner de imagem (logo do médico) ocupando o topo da folha */
.laudo-timbre-banner { display: block; padding: 0; margin: 0 0 1.2rem; background: none; border-bottom: none; }
.laudo-timbre-banner img { display: block; width: 100%; height: auto; max-height: 170px; object-fit: contain; }
/* quando o médico opta por NÃO incluir o cabeçalho na impressão */
.laudo-doc.sem-cabecalho .laudo-timbre { display: none !important; }
/* controle "Incluir cabeçalho no topo" (fica na barra de ações, nunca imprime) */
.timbre-control { display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.timbre-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: #555; cursor: pointer; }
.timbre-toggle input { width: auto; margin: 0; }
.timbre-logo-btn { font-size: 0.85rem; padding: 0.28rem 0.65rem; border: 1px solid var(--color-border, #ccc); border-radius: 0.4rem; background: #fff; color: #333; cursor: pointer; }
.timbre-logo-btn:hover { border-color: #34614e; color: #34614e; }
/* identificação do paciente no documento de consulta */
.pr-doc-ident { margin: 0.7rem 2.4rem 1.2rem; }
/* documento que só existe para impressão (registro de consulta): invisível na tela */
.print-only { display: none; }
.laudo-titulo { font-family: var(--font-display); font-size: 1.35rem; text-align: center; color: #1c1c1c; margin: 0.4rem 2.4rem 1.2rem; }
.laudo-h2 { font-family: var(--font-display); font-size: 1.05rem; color: #34614e; margin: 1.3rem 2.4rem 0.4rem; border-bottom: 1px solid #e6dfce; padding-bottom: 0.2rem; }
.laudo-ul { margin: 0.5rem 2.4rem; padding-left: 1.2rem; }
.laudo-ul li { margin-bottom: 0.45rem; text-align: justify; }
.laudo-assinatura { margin: 2.4rem; text-align: center; }
.laudo-assinatura p { text-align: center; margin: 0.15rem 0; }
.laudo-assinatura-linha { margin: 2rem auto 0.3rem; color: #444; }

/* Prontuário completo (PDF) */
.pr-doc-ident { margin: 0.3rem 2.4rem; line-height: 1.5; }
.pr-print-consulta { margin: 0.6rem 2.4rem 0.9rem; padding-bottom: 0.6rem; border-bottom: 1px solid #eee; page-break-inside: avoid; }
.pr-print-consulta p { margin: 0.25rem 0; text-align: justify; }
.pr-print-ch { font-size: 0.98rem; color: #34614e; margin: 0.2rem 0 0.4rem; }
.pr-print-table { width: calc(100% - 4.8rem); margin: 0.4rem 2.4rem; border-collapse: collapse; font-size: 0.9rem; }
.pr-print-table th, .pr-print-table td { border: 1px solid #ddd; padding: 0.3rem 0.5rem; text-align: left; }
.pr-print-table th { background: #f4efe2; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pr-print-list { margin: 0.4rem 2.4rem; padding-left: 1.2rem; }
.pr-print-list li { margin-bottom: 0.3rem; }
.pr-print-foot { margin: 1.6rem 2.4rem 0; font-size: 0.8rem; color: #666; }

/* impressão do laudo: cabeçalho dourado em página limpa */
@media print {
  .print-only { display: block; }
  .laudo-doc, .enc-doc-corte { border: none; max-width: none; }
  .laudo-timbre { background: #f7f1e3 !important; border-bottom: 2px solid #c9a227 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* faixa/logo ocupa toda a largura da área imprimível. Para tirar a borda branca
     em volta no PDF, escolha "Margens: Nenhuma" no diálogo de impressão. */
  .laudo-timbre-banner { background: none !important; border-bottom: none !important; padding: 0 !important; margin: 0 0 6mm !important; }
  .laudo-timbre-banner img { display: block; width: 100% !important; height: auto !important; max-height: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .laudo-doc.sem-cabecalho .laudo-timbre { display: none !important; }
  .laudo-h2 { break-after: avoid; }
  .laudo-doc p, .laudo-ul li { orphans: 3; widows: 3; }
}

@media (max-width: 640px) {
  .laudo-doc > *:not(.laudo-timbre), .laudo-doc p, .laudo-h2, .laudo-ul, .laudo-titulo, .laudo-assinatura { margin-left: 1.1rem; margin-right: 1.1rem; }
  .laudo-timbre { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* ============================ Receituário ============================ */
.rx-banner { background: #fbe7c6; border: 1px solid #e6c565; color: #6b4e12; border-radius: var(--radius); padding: 0.8rem 1rem; margin-bottom: 1rem; font-size: 0.9rem; }
.rx-peso strong { color: var(--color-primary-dark); }
.rx-peso-edit { max-width: 12rem; margin-top: 0.6rem; }
.rx-peso-alerta { display: block; margin-top: 0.5rem; color: #b0281c; font-weight: 600; font-size: 0.9rem; }
.rx-peso-bloqueio { color: #b0281c; font-weight: 600; }
.rx-resultados { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }
.rx-result { text-align: left; background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.6rem 0.8rem; cursor: pointer; font: inherit; color: inherit; }
.rx-result:hover { border-color: var(--color-primary); }
.rx-calc { background: var(--color-cream); border-radius: 0.7rem; padding: 0.7rem 0.9rem; margin: 0.7rem 0; }
.rx-calc p { margin: 0.2rem 0; }
.rx-bloqueio { color: #b0281c; font-weight: 600; }
.rx-aviso { color: #8a6d3b; font-size: 0.88rem; }
.rx-manual { font-style: italic; }
.rx-med-alertas { font-size: 0.85rem; }
.rx-itens { display: flex; flex-direction: column; gap: 0.5rem; }
.rx-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.6rem 0.8rem; }
.rx-item .muted { font-size: 0.85rem; }

/* ---- Barra de formatação dos documentos editáveis (js/doc-editor.js) ----
   Some na impressão (.no-print): é ferramenta de edição, não conteúdo do documento. */
.doc-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  margin: 0.5rem 0 0.6rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border); border-radius: 0.6rem;
  background: color-mix(in oklch, var(--color-cream) 70%, white); }
.doc-editor-grupo { display: flex; align-items: center; gap: 0.3rem; }
.doc-editor-rotulo { font-size: 0.8rem; color: var(--color-muted); margin-right: 0.15rem; }
.doc-editor-btn { min-width: 2.1rem; padding: 0.28rem 0.55rem; font-size: 0.88rem;
  line-height: 1.2; border: 1px solid var(--color-border); border-radius: 0.4rem;
  background: var(--color-panel); color: var(--color-text); cursor: pointer; }
.doc-editor-btn:hover { border-color: var(--color-primary); }
.doc-editor-btn.on { background: color-mix(in oklch, var(--color-primary) 16%, white);
  border-color: var(--color-primary); color: var(--color-primary-dark); font-weight: 600; }
.doc-editor-padronizar { font-size: 0.84rem; }
/* Desfazer é o botão mais procurado da barra quando algo dá errado: fica primeiro, com o
   texto escrito, e não só a setinha — no meio do atendimento ninguém para para decifrar
   ícone. O refazer, que é o oposto e raro, fica ao lado só com a seta. */
.doc-editor-desfazer { font-weight: 600; }
/* Botões de alinhar: o ícone é um SVG de quatro linhas, então o botão é quadrado e o
   conteúdo fica centrado — sem isso o desenho encosta na borda de baixo. */
.doc-editor-alinhar { display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; padding: 0.25rem 0.4rem; }
.doc-editor-alinhar svg { display: block; }

/* Título VAZIO não desenha o fio. Cinto e suspensório do conserto em js/doc-editor.js:
   aquele troca o bloco herdado por parágrafo na hora do Enter, e isto cobre o que já
   ficou salvo em documentos gerados antes — e também o caso de o médico apagar o texto
   de um subtítulo e deixar o fio órfão no meio da página.
   O :has(> br:only-child) existe porque o navegador põe um <br> dentro do bloco vazio,
   e com ele o :empty deixa de casar. */
.laudo-h2:empty, .plano-h2:empty,
.laudo-h2:has(> br:only-child), .plano-h2:has(> br:only-child) {
  border-bottom: none; padding-bottom: 0; margin-top: 0;
}
.doc-editor-dica { flex: 1 1 100%; margin: 0; font-size: 0.78rem; }

/* Tamanho do documento inteiro. Serve para caber na folha: receita que passa para a
   segunda página por três linhas é problema real de impressão. */
/* Valem em .laudo-doc E em .plano-doc: a proposta do plano é um documento como os
   outros e usa a mesma barra. Amarrar só a .laudo-doc deixaria o botão de tamanho
   inerte na tela dos planos — botão que não faz nada é pior que botão ausente. */
.laudo-doc.doc-fonte-menor, .plano-doc.doc-fonte-menor { font-size: 0.88em; }
.laudo-doc.doc-fonte-maior, .plano-doc.doc-fonte-maior { font-size: 1.12em; }
/* Duração na PRÓPRIA linha da receita: sem isso, a única forma de mudar os dias era
   remover o item e adicionar de novo (o painel do medicamento fecha ao adicionar). */
.rx-item-dur { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-size: 0.85rem; color: var(--color-text-muted, #5b5b5b); }
.rx-item-dur input { width: 5.5rem; padding: 0.25rem 0.4rem; font-size: 0.9rem; border: 1px solid var(--color-border); border-radius: 0.4rem; }
.rx-dur-falta { font-size: 0.85rem; margin-top: 0.2rem; }
.rx-alertas { margin-top: 1rem; }
.rx-alerta { border-radius: 0.5rem; padding: 0.45rem 0.7rem; margin: 0.35rem 0; font-size: 0.9rem; }
.rx-alerta-grave { background: #f7d7d3; color: #7d1a12; }
.rx-alerta-moderada { background: #fbeacf; color: #6b4e12; }
.rx-alerta-leve { background: var(--color-cream); color: var(--color-text); }
.rx-ok { color: var(--color-primary); }
.rx-confirm { margin-top: 0.6rem; }
.rx-doc-itens li, .rx-doc .rx-doc-itens li { margin-bottom: 0.6rem; }
/* O item com número ESCRITO (o <ol> saiu para o número ser apagável): o recuo deslocado
   imita a lista, com a segunda linha alinhada sob o texto, não sob o número. */
.rx-doc-item { margin: 0 0 0.6rem; padding-left: 1.5em; text-indent: -1.5em; }

/* O exame que JÁ está marcado em outro painel aberto: deixa de ser opção (sem caixa) e
   diz onde mora, em vez de sumir e deixar o médico procurando. */
.exam-item-repetido { opacity: 0.55; cursor: default; }
/* Cada via é uma FOLHA, e a assinatura mora no RODAPÉ dela.
 *
 * Antes a assinatura só vinha no fluxo, logo depois do último item: uma receita de um item
 * deixava o nome, o CRM e a linha de assinatura parados no meio do papel, com meia folha em
 * branco embaixo. Dando à via a altura útil da página e empurrando a assinatura para o fim
 * (margin-top: auto), ela desce para o rodapé em qualquer receita curta.
 *
 * É min-height, não height: receita longa cresce e passa de folha, como antes.
 *
 * A altura útil difere por mídia, e por isso o valor não é o mesmo nos dois lugares:
 *  - tela (e o PDF, que o html2canvas rasteriza como tela): js/doc-pdf.js desenha o documento
 *    com 820px de largura para 190mm úteis (A4 menos 2 margens de 10mm), logo 1px = 190/820 mm
 *    e os 277mm de altura útil dão 277 x (820/190) = 1195px. Mexer na margem do doc-pdf.js
 *    pede recalcular aqui.
 *  - impressão: @page usa margem de 14mm, então a altura útil é 297 - 28 = 269mm, e em mm o
 *    próprio motor de impressão resolve a escala. Usar os 1195px aqui daria 316mm e jogaria
 *    cada via para duas folhas. */
.rx-via { margin-bottom: 1rem; display: flex; flex-direction: column; min-height: 1195px; }
.rx-via .laudo-assinatura { margin-top: auto; }
.rx-corte { text-align: center; color: #999; margin: 1.5rem 0; letter-spacing: 2px; }
@media print {
  .rx-corte { page-break-after: always; }
  .rx-via { min-height: 269mm; }
}

/* ============================ Puericultura (guia na consulta) ============================ */
.pu-panel { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-cream); margin: 0.4rem 0 1.2rem; padding: 0.4rem 0.9rem; }
.pu-panel > summary { cursor: pointer; font-family: var(--font-display); font-size: 1.02rem; color: var(--color-primary-dark); padding: 0.5rem 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pu-sum-title { font-weight: 600; }
.pu-faixa-badge { font-family: var(--font-body, inherit); font-size: 0.8rem; color: var(--color-primary); background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.1rem 0.6rem; }
.pu-panel-body { padding-bottom: 0.6rem; }
.pu-fonte { font-size: 0.8rem; margin: 0.2rem 0 0.6rem; }
.pu-content { max-height: 60vh; overflow-y: auto; background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.8rem 1rem; line-height: 1.5; }
.pu-content h4.pu-sec { font-family: var(--font-display); font-size: 0.98rem; color: var(--color-primary-dark); margin: 1rem 0 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--color-border); }
.pu-content h4.pu-sec:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.pu-content .pu-sub { margin: 0.5rem 0 0.2rem; color: var(--color-text); }
.pu-content .pu-say { background: var(--color-cream); border-left: 3px solid var(--color-accent); border-radius: 0.4rem; padding: 0.4rem 0.7rem; margin: 0.5rem 0; font-size: 0.92rem; }
.pu-content ul { margin: 0.2rem 0 0.5rem; padding-left: 1.2rem; }
.pu-content li { margin-bottom: 0.2rem; }
.pu-content p { margin: 0.3rem 0; }
@media print { .pu-panel { display: none !important; } }

/* ============================ Escriba (gravar consulta) ============================ */
.escriba-panel { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-cream); padding: 0.4rem 1rem; margin: 0.4rem 0 1.2rem; }
.escriba-panel > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; padding: 0.5rem 0; font-family: var(--font-display); color: var(--color-primary-dark); }
.escriba-body { padding-bottom: 0.4rem; }
.escriba-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; }
.escriba-head strong { font-family: var(--font-display); color: var(--color-primary-dark); }
.escriba-status { font-size: 0.8rem; color: var(--color-muted); background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.1rem 0.6rem; }
.escriba-controls { display: flex; align-items: center; gap: 0.7rem; margin: 0.6rem 0; }
.escriba-timer { font-variant-numeric: tabular-nums; font-size: 1.1rem; color: var(--color-primary-dark); }
#pr-esc-rec { background: #b0281c; }
.escriba-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.5rem 0; }
.escriba-preview { background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.7rem 0.9rem; margin-top: 0.5rem; }
.escriba-field { margin: 0.3rem 0; line-height: 1.45; }
@media print { .escriba-panel { display: none !important; } }

/* Botão de ação destrutiva (ex.: excluir consulta na janela de 24h) */
.pr-danger { color: #b0281c; border-color: #e0b4ae; }
.pr-danger:hover { background: #f7d7d3; border-color: #b0281c; }

/* =========================== GERADOR DE PLANOS =========================== */
/* Resumo editável */
.pl-inline { max-width: 340px; }
.pl-tab { width: 100%; border-collapse: collapse; margin: 0.6rem 0; }
.pl-tab th, .pl-tab td { border: 1px solid var(--color-border); padding: 0.5rem 0.6rem; text-align: left; }
.pl-tab th { background: #f3ecdd; color: #5C4A32; font-family: var(--font-display); }
.pl-tab tr.pl-rec td { background: #fbf6ea; }
.pl-tab .pl-parc { width: 8rem; }
.pl-marcos-fixos { margin: 0.4rem 0 0.6rem 1.2rem; }
.pl-hint { font-size: 0.85rem; }

/* Documento do plano (identidade visual: creme, dourado, marrom) */
.plano-doc {
  background: #fff; color: #3A3631; font-family: Georgia, "Times New Roman", serif;
  max-width: 820px; margin: 0.6rem auto; line-height: 1.55;
  border: none; border-radius: 0;
  box-shadow: 0 1px 2px rgba(20, 40, 30, 0.06), 0 12px 30px -20px rgba(20, 40, 30, 0.4);
  padding: 1.8rem 2.2rem;
}
/* faixa/logo ocupando toda a largura do topo (sai da margem interna do documento) */
.plano-doc > .laudo-timbre-banner { margin: -1.8rem -2.2rem 1.4rem; }
.plano-doc.sem-cabecalho .laudo-timbre { display: none !important; }
.plano-titulo { font-family: var(--font-display); text-align: center; color: #5C4A32; font-size: 1.5rem; letter-spacing: 0.03em; text-transform: uppercase; margin: 0.2rem 0 0.3rem; }
.plano-sub { text-align: center; color: #B0894A; font-style: italic; margin: 0 0 1.2rem; }
.plano-h1 { font-family: var(--font-display); color: #5C4A32; font-size: 1.3rem; margin: 0.4rem 0 0.2rem; }
.plano-h2 { font-family: var(--font-display); color: #B0894A; font-size: 1.12rem; border-bottom: 1px solid #E7DDCB; padding-bottom: 0.2rem; margin: 1.3rem 0 0.5rem; }
.plano-h3 { font-family: var(--font-display); color: #5C4A32; font-size: 1.02rem; margin: 1rem 0 0.3rem; }
.plano-nome { color: #5C4A32; font-size: 1.15rem; margin: 0.1rem 0; }
.plano-programa { color: #B0894A; font-weight: 600; margin: 0.1rem 0 0.8rem; }
.plano-doc p { margin: 0.5rem 0; text-align: justify; }
.plano-ul { margin: 0.4rem 0 0.4rem 1.3rem; }
.plano-ul li { margin: 0.2rem 0; }
.plano-nivel { border: 1px solid #E7DDCB; border-radius: 0.5rem; padding: 0.8rem 1rem; margin: 0.7rem 0; background: #FCFAF5; break-inside: avoid; page-break-inside: avoid; }
.plano-nivel-tit { font-family: var(--font-display); color: #5C4A32; font-weight: 600; font-size: 1.05rem; margin-bottom: 0.3rem; }
.plano-rec { color: #B0894A; font-size: 0.82rem; }
.plano-preco { margin: 0.15rem 0; }
.plano-inclui { color: #6b6257; font-size: 0.9rem; }
.plano-regra { text-align: justify; }
.plano-check, .plano-linha { margin: 0.5rem 0; }
.plano-assina { text-align: center; margin: 1.5rem 0 0.3rem; }
.plano-cidade { margin: 1.1rem 0; }
.plano-dados { text-align: center; font-size: 0.85rem; margin-top: 0.4rem; }
.plano-runhead, .plano-runfoot { display: none; }

@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  .plano-doc { border: none; border-radius: 0; box-shadow: none; max-width: none; padding: 0; margin: 0; overflow: visible !important; }
  .plano-break { break-before: page; page-break-before: always; }
  .plano-nivel { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* título nunca fica órfão no fim da página: anda junto com o texto que vem
     depois (evita o "título colado no rodapé" com o conteúdo na página seguinte). */
  .plano-h1, .plano-h2, .plano-h3, .plano-nome, .plano-nivel-tit {
    break-after: avoid; page-break-after: avoid; break-inside: avoid; page-break-inside: avoid;
  }
  .plano-doc p, .plano-check, .plano-linha { orphans: 2; widows: 2; }
  /* a faixa/logo ocupa toda a largura; o TEXTO mantém uma margem própria mesmo
     imprimindo com "Sem margens" (igual às orientações), para não encostar/cortar. */
  .plano-doc > *:not(.laudo-timbre-banner):not(.laudo-timbre):not(.plano-runfoot) { margin-left: 12mm !important; margin-right: 12mm !important; }
  .plano-doc.sem-cabecalho .laudo-timbre { display: none !important; }
  /* rodapé com identidade em todas as páginas; folga extra embaixo p/ o texto
     nunca cair em cima dele. */
  .plano-runfoot { display: block; position: fixed; bottom: 4mm; left: 0; right: 0; text-align: center; color: #5C4A32; font-size: 8.5pt; }
}

/* Tipo de cobrança do paciente: filtros + destaque do cartão */
.pr-filtros { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.7rem; }
.pr-filtro { font-size: 0.85rem; padding: 0.32rem 0.75rem; border: 1px solid var(--color-border); border-radius: 999px; background: #fff; color: #555; cursor: pointer; }
.pr-filtro:hover { border-color: #34614e; }
.pr-filtro-ativo { background: #34614e; color: #fff; border-color: #34614e; }
.pr-patient-card.pr-cob-plano { border-left: 4px solid #B0894A; background: #fbf6ea; }
.pr-patient-card.pr-cob-nao_cobrado { border-left: 4px solid #9aa0a6; }
.pr-cob-badge { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px; margin-left: 0.5rem; vertical-align: middle; }
.pr-cob-badge-plano { background: #B0894A; color: #fff; }
.pr-cob-badge-nao_cobrado { background: #e6e8ea; color: #555; }

/* Acessibilidade / polimento (skill UI-UX): foco visível e respeito a reduced-motion */
a:focus-visible,
button:focus-visible,
.feature-card:focus-visible,
.btn-cta-primary:focus-visible,
.btn-cta-ghost:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent, #c9a227);
  outline-offset: 2px;
}
.feature-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px -22px rgba(20, 40, 30, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .feature-card:hover,
  .feature-card:hover .feature-ico,
  .btn-cta-primary:hover { transform: none !important; }
}

/* cadeado SVG dentro do selo de recurso bloqueado */
.feature-tag-lock { display: inline-flex; align-items: center; gap: 0.25rem; }
.tag-lock-ico { width: 12px; height: 12px; }

/* Cabeçalho de seção padronizado (chip de ícone + título), igual ao hub/landing */
.section-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.section-head-ico {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--color-primary) 14%, white);
  color: var(--color-primary-dark);
}
.section-head-ico svg { width: 22px; height: 22px; }
.section-head h2 { margin: 0; }

/* ---------- Meu Consultório ---------- */
.co-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.co-sec { margin: 4px 0 10px; font-size: 0.95rem; color: var(--verde-escuro, #34614e); }
.co-form .co-sec:not(:first-child) { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.08); }
.co-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-row3 { display: grid; grid-template-columns: 1.4fr 0.6fr 1fr; gap: 12px; }
.co-actions { margin-top: 16px; }
.co-logo-preview { margin: 8px 0 12px; min-height: 96px; border: 1px dashed rgba(0,0,0,0.22); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(255,255,255,0.5); }
.co-logo-preview img { max-width: 100%; max-height: 160px; }
.co-logo-vazio { color: #8a8a8a; font-size: 0.9rem; }
.co-logo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-row2, .co-row3 { grid-template-columns: 1fr; }
}
.co-planos { margin-top: 16px; }
.co-planos-preview { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(52,97,78,0.07); }

/* ============================ Nutrição e Suplementação ============================ */
.nutri-intro { margin-bottom: 1.1rem; }
.nutri-search-field { margin-top: 0.4rem; }
.nutri-group-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 1.4rem 0 0.7rem;
}
.nutri-group-title:first-child { margin-top: 0.3rem; }

.nutri-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  text-align: left;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1rem 1.05rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 40, 30, 0.04);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.nutri-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 40, 30, 0.10);
  border-color: color-mix(in oklch, var(--color-primary) 40%, var(--color-border));
}
.nutri-card-title { font-size: 1.02rem; font-weight: 700; color: var(--color-primary-dark); line-height: 1.25; }
.nutri-card-tag {
  font-size: 0.72rem; font-weight: 600; color: var(--color-muted);
  background: var(--color-secondary); border-radius: 999px; padding: 0.12rem 0.55rem;
}
.nutri-card-tag-tabela { background: color-mix(in oklch, var(--color-accent) 18%, white); color: color-mix(in oklch, var(--color-accent) 70%, black); }
.nutri-card-desc { font-size: 0.88rem; color: var(--color-muted); line-height: 1.4; }

/* Detalhe */
#nutri-back { margin-bottom: 0.8rem; }
.nutri-detail-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.nutri-detail-head h2 { margin: 0.3rem 0; }
.nutri-conf-tag {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  background: color-mix(in oklch, var(--color-medium) 20%, white);
  color: color-mix(in oklch, var(--color-medium) 65%, black);
}
.nutri-tambem { color: var(--color-muted); font-size: 0.9rem; margin: 0.1rem 0 0.6rem; }

.nutri-sec { margin-top: 1.3rem; }
.nutri-sec h4 {
  font-size: 1rem; color: var(--color-primary-dark); margin: 0 0 0.4rem;
  padding-bottom: 0.3rem; border-bottom: 2px solid color-mix(in oklch, var(--color-primary) 20%, white);
}
.nutri-ul { margin: 0.2rem 0 0 1.1rem; line-height: 1.55; font-variant-numeric: tabular-nums; }
.nutri-ul li { margin-bottom: 0.28rem; }
.nutri-esquema {
  margin-bottom: 0.7rem; background: color-mix(in oklch, var(--color-primary) 5%, white);
  border-radius: 10px; padding: 0.6rem 0.8rem;
}
.nutri-esquema strong { color: var(--color-primary-dark); }
.nutri-esquema p { margin: 0.25rem 0 0; line-height: 1.5; }
.nutri-fonte { margin-top: 1.4rem; font-size: 0.82rem; color: var(--color-muted); line-height: 1.5; }

/* Calculadora dentro do detalhe */
.nutri-calc {
  margin-top: 1rem; background: color-mix(in oklch, var(--color-primary) 6%, white);
  border: 1px solid color-mix(in oklch, var(--color-primary) 18%, white);
  border-radius: 14px; padding: 1rem 1.05rem;
}
.nutri-calc h4 { margin: 0 0 0.6rem; color: var(--color-primary-dark); }
.nutri-calc-inputs { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; }
.nutri-calc-inputs .auth-field { flex: 1 1 150px; margin: 0; }
.nutri-calc-inputs .nc-small { flex: 0 1 90px; }
.nutri-banda { margin: 0 0 0.3rem; font-size: 0.88rem; }
.nutri-dose-main { font-size: 1.15rem; font-weight: 700; color: var(--color-primary-dark); margin: 0.2rem 0; font-variant-numeric: tabular-nums; }
.nutri-dose-manual { line-height: 1.55; }
.nutri-bloqueio {
  background: color-mix(in oklch, var(--color-high) 8%, white);
  border-left: 4px solid var(--color-high); border-radius: 8px;
  padding: 0.5rem 0.7rem; margin: 0.3rem 0; color: color-mix(in oklch, var(--color-high) 70%, black);
}
.nutri-aviso {
  background: color-mix(in oklch, var(--color-medium) 14%, white);
  border-left: 4px solid var(--color-medium); border-radius: 8px;
  padding: 0.5rem 0.7rem; margin: 0.3rem 0; font-size: 0.9rem;
}
.nutri-conv { margin-top: 0.6rem; }
.nutri-conv-titulo { font-weight: 600; color: var(--color-primary-dark); font-size: 0.9rem; }

/* Tabela de referência */
.nutri-table-wrap { overflow-x: auto; margin: 0.6rem 0; }
.nutri-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.nutri-table th, .nutri-table td { border: 1px solid var(--color-border); padding: 0.45rem 0.6rem; text-align: left; }
.nutri-table thead th { background: color-mix(in oklch, var(--color-primary) 12%, white); color: var(--color-primary-dark); }
.nutri-table tbody th { background: color-mix(in oklch, var(--color-primary) 5%, white); font-weight: 600; }
.nutri-table tbody tr:nth-child(even) td { background: color-mix(in oklch, var(--color-primary) 3%, white); }

@media (max-width: 560px) {
  .nutri-calc-inputs .auth-field { flex-basis: 100%; }
  .nutri-calc-inputs .nc-small { flex-basis: calc(50% - 0.35rem); }
}

/* ===================== Checklist de puericultura (dentro da consulta) ===================== */
.chk-content { max-height: 62vh; overflow-y: auto; background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 0.6rem 0.9rem; }
.chk-group { border: none; border-top: 1px solid var(--color-border); margin: 0; padding: 0.5rem 0 0.3rem; }
.chk-group:first-child { border-top: none; }
.chk-group legend { font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; color: var(--color-primary-dark); padding: 0; margin-bottom: 0.2rem; }
.chk-item { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.28rem 0.2rem; line-height: 1.4; cursor: pointer; border-radius: 0.4rem; }
.chk-item:hover { background: color-mix(in oklch, var(--color-primary) 5%, transparent); }
.chk-item input[type="checkbox"] { margin-top: 0.15rem; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; accent-color: var(--color-primary); cursor: pointer; }
.chk-item input[type="checkbox"]:checked + span { color: var(--color-muted); text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--color-primary) 45%, transparent); }
.chk-item span { font-size: 0.92rem; }
.chk-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.7rem; }
.chk-actions-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chk-count { font-size: 0.85rem; }
@media (max-width: 560px) {
  .chk-actions { flex-direction: column; align-items: stretch; }
  .chk-actions-btns { justify-content: stretch; }
  .chk-actions-btns button { flex: 1; }
}

/* Guia "Como assinar" no receituário */
.rx-assinar-guia {
  margin: 0.6rem 0 0.2rem; padding: 0.9rem 1.05rem;
  background: color-mix(in oklch, var(--color-primary) 6%, white);
  border: 1px solid color-mix(in oklch, var(--color-primary) 20%, white);
  border-radius: 12px;
}
.rx-assinar-guia h4 { margin: 0 0 0.5rem; color: var(--color-primary-dark); font-size: 1rem; }
.rx-assinar-guia ol { margin: 0 0 0.5rem 1.1rem; line-height: 1.55; }
.rx-assinar-guia ol li { margin-bottom: 0.3rem; }
.rx-assinar-guia .muted { font-size: 0.86rem; margin: 0; }

/* ============================ Calendário vacinal (PNI) ============================ */
.vac-controls { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; margin-top: 0.5rem; }
.vac-controls .auth-field { margin: 0; flex: 1 1 220px; }
.vac-controls-btns { display: flex; gap: 0.5rem; }
#vac-idade { margin: 0.6rem 0 0; font-weight: 600; }
.vac-fonte { margin-top: 1.2rem; font-size: 0.82rem; }

.vac-resumo-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vac-badge { font-size: 0.85rem; font-weight: 700; padding: 0.2rem 0.7rem; border-radius: 999px; }
.vac-b-aplicada { background: color-mix(in oklch, var(--color-primary) 16%, white); color: var(--color-primary-dark); }
.vac-b-atrasada { background: color-mix(in oklch, var(--color-high) 15%, white); color: var(--color-high); }
.vac-b-futura { background: var(--color-secondary); color: var(--color-muted); }
.vac-b-perdida { background: color-mix(in oklch, var(--color-medium) 20%, white); color: color-mix(in oklch, var(--color-medium) 65%, black); }
.vac-b-opcional { background: color-mix(in oklch, #6b5ca5 14%, white); color: #55488a; }
.vac-rede { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: 999px; vertical-align: middle; }
.vac-rede-pni { background: color-mix(in oklch, var(--color-primary) 14%, white); color: var(--color-primary-dark); }
.vac-rede-part { background: color-mix(in oklch, #6b5ca5 16%, white); color: #55488a; }
.vac-atrasadas { margin-top: 0.7rem; }
.vac-atrasadas ul { margin: 0.3rem 0 0 1.1rem; line-height: 1.5; }

.vac-card { margin-bottom: 0.9rem; }
.vac-card-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.vac-card-head h3 { margin: 0; font-size: 1.05rem; color: var(--color-primary-dark); }
.vac-protege { font-size: 0.86rem; }
.vac-obs { margin: 0.5rem 0 0; font-size: 0.85rem; }
.vac-doses { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.6rem; }
.vac-dose-wrap { display: flex; flex-direction: column; gap: 0.3rem; }
.vac-dose-meta { display: grid; grid-template-columns: auto 1.4fr 1fr; gap: 0.4rem; padding: 0 0.6rem 0.1rem 1.9rem; }
.vac-meta-in { padding: 0.35rem 0.5rem; border: 1px solid var(--color-border); border-radius: 0.5rem; font-size: 0.85rem; background: var(--color-panel); }
.vac-meta-in.vac-meta-data { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .vac-dose-meta { grid-template-columns: 1fr 1fr; padding-left: 0.6rem; } .vac-meta-in.vac-meta-data { grid-column: 1 / -1; } }
.vac-dose {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.6rem; border: 1px solid var(--color-border); border-radius: 0.6rem; cursor: pointer;
  border-left-width: 4px;
}
.vac-dose input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--color-primary); cursor: pointer; }
.vac-dose-rot { font-weight: 600; }
.vac-dose-data { font-variant-numeric: tabular-nums; color: var(--color-muted); font-size: 0.88rem; }
.vac-dose-badge { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.12rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.vac-status-aplicada { border-left-color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 5%, white); }
.vac-status-aplicada .vac-dose-badge { background: color-mix(in oklch, var(--color-primary) 16%, white); color: var(--color-primary-dark); }
.vac-status-aplicada .vac-dose-rot { text-decoration: line-through; color: var(--color-muted); }
.vac-status-atrasada { border-left-color: var(--color-high); }
.vac-status-atrasada .vac-dose-badge { background: color-mix(in oklch, var(--color-high) 15%, white); color: var(--color-high); }
.vac-status-futura { border-left-color: var(--color-border); }
.vac-status-futura .vac-dose-badge { background: var(--color-secondary); color: var(--color-muted); }
.vac-status-perdida { border-left-color: var(--color-medium); }
.vac-status-perdida .vac-dose-badge { background: color-mix(in oklch, var(--color-medium) 20%, white); color: color-mix(in oklch, var(--color-medium) 65%, black); }
.vac-status-opcional { border-left-color: #6b5ca5; }
.vac-status-opcional .vac-dose-badge { background: color-mix(in oklch, #6b5ca5 14%, white); color: #55488a; }
.pt-vac-opcional { color: #55488a; }
@media (max-width: 560px) {
  .vac-dose { grid-template-columns: auto 1fr; grid-auto-rows: auto; }
  .vac-dose-data, .vac-dose-badge { grid-column: 2; justify-self: start; }
}

/* ---- Ficha de reanimação por peso (cartão de parada) ---- */
.rea-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-top: .5rem; }
.rea-controls .auth-field { flex: 1 1 140px; margin: 0; }
.rea-controls-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.rea-fonte { font-size: .78rem; margin-top: 1rem; line-height: 1.5; }

.rea-head-card { text-align: center; }
.rea-head-line { display: flex; gap: 1rem; justify-content: center; align-items: baseline; flex-wrap: wrap; }
.rea-head-peso { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--color-primary-dark); }
.rea-head-idade { font-size: 1.1rem; color: var(--color-muted); }

.rea-sec { margin-top: .9rem; border-left: 5px solid var(--color-border); }
.rea-sec h3 { margin: 0 0 .5rem; font-size: 1.02rem; }
.rea-sec-vermelho { border-left-color: var(--color-high); }
.rea-sec-roxo { border-left-color: oklch(52% 0.14 300); }
.rea-sec-azul { border-left-color: oklch(55% 0.11 245); }
.rea-sec-laranja { border-left-color: var(--color-accent); }
.rea-sec-verde { border-left-color: var(--color-primary); }
.rea-sec-cinza { border-left-color: var(--color-muted); }

.rea-rows { display: flex; flex-direction: column; gap: .3rem; }
.rea-row { padding: .4rem 0; border-bottom: 1px dashed var(--color-border); }
.rea-row:last-child { border-bottom: none; }
.rea-row-head { display: grid; grid-template-columns: minmax(9rem, 42%) 1fr; gap: .6rem; align-items: baseline; }
.rea-row-name { font-weight: 600; color: var(--color-text); font-size: .92rem; }
.rea-row-dose { color: var(--color-primary-dark); font-weight: 600; font-size: .95rem; }
.rea-row-sub { display: block; font-weight: 400; color: var(--color-muted); font-size: .8rem; }
/* detalhes didáticos: como dar, diluição/bomba, cuidados e macetes */
.rea-row-detail { margin-top: .28rem; padding-left: .1rem; }
.rea-det { margin: .12rem 0; font-size: .82rem; line-height: 1.4; color: var(--color-text); }
.rea-det-rot { font-weight: 600; color: var(--color-primary-dark); }
.rea-det-alerta .rea-det-rot { color: var(--color-high); }
.rea-det-notas { margin: .2rem 0 .1rem; padding-left: 1.1rem; }
.rea-det-notas li { font-size: .8rem; line-height: 1.4; color: var(--color-muted); margin-bottom: .12rem; }

@media (max-width: 560px) {
  .rea-row-head { grid-template-columns: 1fr; gap: .1rem; }
}

@media print {
  .app-header, .app-footer, .rea-controls-panel, #rea-vazio, #btn-logout, .app-nav, .nav-toggle { display: none !important; }
  main { margin: 0; padding: 0; }
  #rea-card { column-count: 2; column-gap: .8rem; }
  /* Cabeçalho e fonte ocupam a largura toda (fora das colunas). */
  .rea-head-card { column-span: all; break-inside: avoid; box-shadow: none; border: 1px solid #ccc; margin: 0 0 .5rem; padding: .5rem .7rem; }
  .rea-fonte { column-span: all; font-size: .68rem; }
  /* As SEÇÕES fluem entre as colunas (sem buracos); só a droga inteira não racha. */
  .rea-sec { break-inside: auto; margin: .35rem 0; padding: 0 0 0 .55rem; box-shadow: none; }
  .rea-sec h3 { break-after: avoid; }
  .rea-rows { display: block; }
  .rea-row { break-inside: avoid; padding: .14rem 0; }
  .rea-row-detail { break-inside: avoid; }
  .rea-row-name, .rea-row-dose { font-size: .8rem; }
}

/* ---- Fototerapia neonatal (AAP 2022) ---- */
.foto-form { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.foto-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.foto-row .auth-field { flex: 1 1 160px; margin: 0; }
.foto-fatores { border: 1px solid var(--color-border); border-radius: var(--radius); padding: .7rem 1rem 1rem; margin: .3rem 0 0; }
.foto-fatores legend { font-weight: 600; font-size: .92rem; padding: 0 .4rem; }
.foto-check { display: flex; align-items: flex-start; gap: .5rem; padding: .28rem 0; font-size: .92rem; cursor: pointer; }
.foto-check input { margin-top: .15rem; }
.foto-fonte { font-size: .78rem; margin-top: 1rem; line-height: 1.5; }

.foto-res { margin-top: 1rem; border-left: 6px solid var(--color-border); }
.foto-res-head { margin-bottom: .6rem; }
.foto-res-status { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.foto-r-abaixo { border-left-color: var(--color-primary); }
.foto-r-foto { border-left-color: var(--color-accent); }
.foto-r-escalonar { border-left-color: #d98324; }
.foto-r-exchange { border-left-color: var(--color-high); }
.foto-r-neutro { border-left-color: var(--color-muted); }

.foto-res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .55rem; }
.foto-res-cell { background: var(--color-cream); border-radius: .6rem; padding: .5rem .7rem; }
.foto-cell-rot { display: block; font-size: .75rem; color: var(--color-muted); }
.foto-cell-val { display: block; font-weight: 600; color: var(--color-primary-dark); font-size: 1.02rem; }
.foto-res-fatores { margin: .7rem 0 0; font-size: .82rem; }
.foto-res-alerta { margin: .7rem 0 0; padding: .6rem .8rem; border-radius: .6rem; background: color-mix(in oklch, var(--color-high) 12%, white); color: color-mix(in oklch, var(--color-high) 72%, black); font-weight: 500; font-size: .9rem; }
.foto-res-nota { margin: .7rem 0 0; font-size: .85rem; }
.foto-erro { color: color-mix(in oklch, var(--color-high) 70%, black); font-weight: 500; }

/* ---- Guia de antibioticoterapia empírica por foco ---- */
.atb-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-top: .5rem; }
.atb-peso-field { flex: 0 1 180px; margin: 0; }
.atb-busca-field { flex: 1 1 240px; margin: 0; }
.atb-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.atb-chip { border: 1px solid var(--color-border); background: var(--color-panel); color: var(--color-text); border-radius: var(--radius-pill); padding: .3rem .8rem; font-size: .84rem; cursor: pointer; }
.atb-chip-on { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.atb-fonte { font-size: .78rem; margin-top: 1rem; line-height: 1.5; }

.atb-card { margin-top: .9rem; }
.atb-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.atb-card-head h3 { margin: 0; font-size: 1.08rem; }
.atb-cat-tag { font-size: .76rem; background: var(--color-secondary); border-radius: var(--radius-pill); padding: .12rem .6rem; }
.atb-resumo { margin: .3rem 0 .6rem; font-size: .88rem; }

.atb-regimes { display: flex; flex-direction: column; gap: .55rem; }
.atb-regime { border-left: 4px solid var(--color-border); padding: .5rem .8rem; background: var(--color-cream); border-radius: .5rem; }
.atb-linha-primeira { border-left-color: var(--color-primary); }
.atb-linha-alt { border-left-color: var(--color-muted); }
.atb-regime-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.atb-linha { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--color-muted); }
.atb-via { font-size: .78rem; background: var(--color-secondary); border-radius: var(--radius-pill); padding: .1rem .55rem; }
.atb-droga { font-weight: 600; color: var(--color-primary-dark); font-size: 1rem; margin-top: .15rem; }
.atb-dose { margin-top: .2rem; display: flex; flex-direction: column; gap: .1rem; }
.atb-dose-base { font-size: .9rem; }
.atb-dose-calc { font-size: .95rem; font-weight: 600; color: var(--color-accent); }
.atb-dose-txt { font-size: .88rem; }
.atb-meta { margin-top: .25rem; font-size: .82rem; color: var(--color-muted); }
.atb-obs { margin: .35rem 0 0; font-size: .82rem; }
.atb-notas { margin-top: .7rem; font-size: .84rem; }
.atb-notas ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.atb-notas li { margin: .15rem 0; }

/* ---- Toxíndromes e antídotos ---- */
.tox-tabs { display: flex; gap: .5rem; margin: .5rem 0; flex-wrap: wrap; }
.tox-tab { border: 1px solid var(--color-border); background: var(--color-panel); color: var(--color-text); border-radius: var(--radius-pill); padding: .4rem 1rem; font-size: .9rem; cursor: pointer; font-weight: 600; }
.tox-tab-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.tox-busca-field { margin: .3rem 0 0; }
.tox-fonte { font-size: .78rem; margin-top: 1rem; line-height: 1.5; }

.tox-card { margin-top: .8rem; }
.tox-card-head h3 { margin: 0 0 .3rem; font-size: 1.06rem; }
.tox-agentes { font-size: .88rem; margin: .2rem 0 .5rem; }
.tox-sinais { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .4rem; }
.tox-sinal { background: var(--color-cream); border-radius: .5rem; padding: .35rem .6rem; }
.tox-sinal-k { display: block; font-size: .72rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .02em; }
.tox-sinal-v { display: block; font-weight: 600; font-size: .9rem; }
.tox-manejo { margin-top: .6rem; font-size: .88rem; }
.tox-manejo ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.tox-manejo li { margin: .15rem 0; }
.tox-notas { margin-top: .5rem; }
.tox-notas p { font-size: .82rem; margin: .2rem 0; }

.tox-anti-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.tox-toxico { font-weight: 600; color: var(--color-text); }
.tox-arrow { color: var(--color-accent); font-weight: 700; }
.tox-antidoto { font-weight: 700; color: var(--color-primary-dark); font-size: 1.05rem; }
.tox-dose { font-size: .92rem; }
.tox-obs { font-size: .82rem; margin: .35rem 0 0; }
.tox-calc-link { margin: .4rem 0 0; font-size: .84rem; }
.tox-calc-link a { color: var(--color-primary); }
/* peso digitado na aba de antídotos → valor calculado ao lado de cada dose por kg */
.tox-peso-field { margin-top: .6rem; }
.tox-calc-val { color: var(--color-primary-dark); font-weight: 700; white-space: nowrap; background: color-mix(in oklch, var(--color-primary) 12%, white); padding: 0 .3rem; border-radius: .35rem; }

/* ---- Valores laboratoriais por idade ---- */
.lab-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-top: .5rem; }
.lab-idade-field { flex: 0 1 130px; margin: 0; }
.lab-unidade-field { flex: 0 1 130px; margin: 0; }
.lab-busca-field { flex: 1 1 220px; margin: 0; }
.lab-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.lab-chip { border: 1px solid var(--color-border); background: var(--color-panel); color: var(--color-text); border-radius: var(--radius-pill); padding: .3rem .8rem; font-size: .84rem; cursor: pointer; }
.lab-chip-on { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.lab-fonte { font-size: .78rem; margin-top: 1rem; line-height: 1.5; }

.lab-card { margin-top: .8rem; }
.lab-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.lab-card-head h3 { margin: 0; font-size: 1.02rem; }
.lab-unidade { font-size: .8rem; color: var(--color-muted); }
.lab-faixas { display: flex; flex-direction: column; gap: .15rem; margin-top: .4rem; }
.lab-faixa { display: grid; grid-template-columns: minmax(8rem, 44%) 1fr; gap: .6rem; padding: .28rem .5rem; border-radius: .4rem; align-items: baseline; }
.lab-faixa-rot { font-size: .85rem; color: var(--color-muted); }
.lab-faixa-val { font-weight: 600; font-size: .9rem; color: var(--color-text); }
.lab-faixa-hit { background: color-mix(in oklch, var(--color-primary) 15%, white); }
.lab-faixa-hit .lab-faixa-rot { color: var(--color-primary-dark); font-weight: 600; }
.lab-faixa-hit .lab-faixa-val { color: var(--color-primary-dark); }
.lab-notas { margin-top: .5rem; }
.lab-notas p { font-size: .8rem; margin: .2rem 0; }

@media (max-width: 560px) { .lab-faixa { grid-template-columns: 1fr; gap: 0; } }

/* ---- Kit de calculadoras ---- */
.kit-card { margin-top: .8rem; }
.kit-card h3 { margin: 0 0 .5rem; font-size: 1.04rem; }
.kit-inputs { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.kit-inputs .auth-field { flex: 1 1 140px; margin: 0; }
.kit-result { margin-top: .7rem; min-height: 1.2rem; }
.kit-value { display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--color-primary-dark); }
.kit-sub { display: block; font-size: .84rem; color: var(--color-muted); margin-top: .2rem; }
.kit-nota { font-size: .8rem; margin: .5rem 0 0; }
.kit-fonte { font-size: .78rem; margin-top: 1rem; }

/* ---- Desidratação: escore e planos OMS ---- */
.des-topinputs { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .5rem; }
.des-topinputs .auth-field { flex: 1 1 140px; margin: 0; }
.des-item { border: none; padding: 0; margin: 0 0 .8rem; }
.des-item legend { font-weight: 600; font-size: .92rem; margin-bottom: .3rem; padding: 0; }
.des-opts { display: flex; flex-direction: column; gap: .3rem; }
.des-opt { display: block; padding: .4rem .6rem; border: 1px solid var(--color-border); border-radius: .5rem; cursor: pointer; font-size: .9rem; }
.des-opt-on { background: color-mix(in oklch, var(--color-primary) 12%, white); border-color: var(--color-primary); }
.des-opt-pt { color: var(--color-muted); font-size: .8rem; }
.des-escore-result { margin-top: .5rem; }
.des-score-box { display: inline-flex; align-items: baseline; gap: .6rem; padding: .5rem .9rem; border-radius: .6rem; background: var(--color-cream); }
.des-score-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.des-score-cat { font-weight: 600; }
.des-grau-nenhuma { background: color-mix(in oklch, var(--color-primary) 14%, white); }
.des-grau-alguma { background: color-mix(in oklch, var(--color-accent) 16%, white); }
.des-grau-moderada_grave { background: color-mix(in oklch, var(--color-high) 14%, white); }
.des-sugestao { margin: 1rem 0 .3rem; font-size: 1rem; }
.des-plano-card { border-left: 6px solid var(--color-border); }
.des-plano-a { border-left-color: var(--color-primary); }
.des-plano-b { border-left-color: var(--color-accent); }
.des-plano-c { border-left-color: var(--color-high); }
.des-plano-card h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.des-plano-list { margin: .5rem 0 0; padding-left: 1.1rem; }
.des-plano-list li { margin: .3rem 0; font-size: .9rem; }
.des-vol, .des-fase { background: var(--color-cream); border-radius: .6rem; padding: .5rem .8rem; margin-bottom: .5rem; }
.des-vol-num, .des-fase-num { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--color-primary-dark); }
.des-vol-sub, .des-fase-sub { display: block; font-size: .84rem; color: var(--color-muted); }
.des-fases { display: flex; flex-wrap: wrap; gap: .5rem; }
.des-fases .des-fase { flex: 1 1 180px; margin-bottom: 0; }
.des-liquido { font-size: .9rem; }
.des-ref-grid p { font-size: .86rem; margin: .5rem 0; }
.des-fonte { font-size: .78rem; margin-top: 1rem; }

/* ---- Crescimento do prematuro e síndromes ---- */
.cre-form { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
.cre-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.cre-row .auth-field { flex: 1 1 140px; margin: 0; }
.cre-check { display: flex; align-items: center; gap: .4rem; font-size: .9rem; flex: 1 1 160px; }
.cre-idades { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .8rem; font-size: .88rem; }
.cre-res-box { display: inline-flex; align-items: baseline; gap: .8rem; padding: .5rem .9rem; border-radius: .6rem; margin-top: .6rem; background: var(--color-cream); flex-wrap: wrap; }
.cre-res-num { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--color-primary-dark); }
.cre-res-pct { font-weight: 600; }
.cre-res-cls { font-size: .9rem; }
.cre-lvl-alerta { background: color-mix(in oklch, var(--color-accent) 16%, white); }
.cre-lvl-grave { background: color-mix(in oklch, var(--color-high) 14%, white); }
.cre-erro { color: color-mix(in oklch, var(--color-high) 70%, black); }
.cre-graf-card { margin-top: .8rem; }
.cre-graf-card h3 { margin: 0 0 .5rem; font-size: 1rem; }
.cre-chart { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
.cre-axis { stroke: var(--color-muted); stroke-width: 1; }
.cre-zline { stroke-width: 1.3; }
.cre-z0 { stroke: var(--color-primary); }
.cre-z2 { stroke: var(--color-accent); stroke-dasharray: 4 3; }
.cre-z3 { stroke: var(--color-high); stroke-dasharray: 2 3; }
.cre-zlab { font-size: 8px; fill: var(--color-muted); }
.cre-axlab { font-size: 9px; fill: var(--color-muted); }
.cre-pt { fill: var(--color-primary-dark); stroke: #fff; stroke-width: 1.5; }
.cre-ref p { font-size: .86rem; margin: .5rem 0; }
.cre-sind-tab { width: 100%; border-collapse: collapse; font-size: .85rem; }
.cre-sind-tab th { text-align: left; vertical-align: top; padding: .35rem .5rem .35rem 0; width: 34%; color: var(--color-primary-dark); }
.cre-sind-tab td { padding: .35rem 0; border-bottom: 1px solid var(--color-border); }
.cre-fonte { font-size: .78rem; margin-top: 1rem; line-height: 1.5; }

/* ---- Marcos do desenvolvimento ---- */
.dev-idade-field { max-width: 200px; margin: .5rem 0 0; }
.dev-alerta-geral { border-left: 5px solid var(--color-accent); }
.dev-alerta-geral h3 { margin: 0 0 .4rem; font-size: 1rem; }
.dev-alerta-geral ul { margin: 0; padding-left: 1.1rem; }
.dev-alerta-geral li { margin: .2rem 0; font-size: .88rem; }
.dev-faixa { margin-top: .8rem; }
.dev-faixa-hit { outline: 2px solid var(--color-primary); }
.dev-faixa-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.dev-faixa-head h3 { margin: 0; font-size: 1.06rem; }
.dev-hit-tag { font-size: .74rem; background: var(--color-primary); color: #fff; border-radius: var(--radius-pill); padding: .15rem .6rem; }
.dev-doms { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; margin-top: .5rem; }
.dev-dom { background: var(--color-cream); border-radius: .6rem; padding: .5rem .7rem; }
.dev-dom h4 { margin: 0 0 .3rem; font-size: .84rem; color: var(--color-primary-dark); text-transform: uppercase; letter-spacing: .02em; }
.dev-dom ul { margin: 0; padding-left: 1.05rem; }
.dev-dom li { margin: .18rem 0; font-size: .86rem; }
.dev-alertas { margin-top: .6rem; padding: .6rem .8rem; border-radius: .6rem; background: color-mix(in oklch, var(--color-high) 10%, white); }
.dev-alertas strong { color: color-mix(in oklch, var(--color-high) 72%, black); }
.dev-alertas ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.dev-alertas li { margin: .2rem 0; font-size: .86rem; }
.dev-fonte { font-size: .78rem; margin-top: 1rem; line-height: 1.5; }

/* ---- Gerador de encaminhamentos ---- */
.enc-esp-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.enc-grupo { margin-top: .6rem; }
.enc-grupo h4 { margin: 0 0 .3rem; font-size: .82rem; color: var(--color-primary-dark); text-transform: uppercase; letter-spacing: .02em; }
.enc-esp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .25rem .8rem; }
.enc-esp { display: flex; align-items: flex-start; gap: .45rem; font-size: .9rem; padding: .2rem 0; cursor: pointer; }
.enc-msg { color: color-mix(in oklch, var(--color-high) 70%, black); font-weight: 500; margin: .5rem 0 0; }
.enc-doc-dest { font-size: .95rem; }
@media screen { .enc-quebra { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px dashed var(--color-border); } }
@media print { .enc-quebra { break-before: page; } }

/* ---- Pedido de exames ---- */
.exam-wrap { display: flex; flex-direction: column; gap: .5rem; }
.exam-ident { display: flex; gap: .7rem; flex-wrap: wrap; }
.exam-field { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 220px; font-size: .8rem; color: var(--color-muted); }
.exam-field-sm { flex: 0 1 140px; }
.exam-field input { font: inherit; color: var(--color-text); padding: .55rem .7rem; border: 1px solid var(--color-border); border-radius: .6rem; background: var(--color-panel); }
.exam-sec-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .6rem; }
.exam-sec-head h3 { margin: 0; font-size: 1rem; }
.exam-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.exam-chip { border: 1px solid var(--color-border); background: var(--color-panel); color: var(--color-text); border-radius: 999px; padding: .45rem .8rem; font: inherit; font-size: .85rem; cursor: pointer; transition: background .12s, border-color .12s; }
.exam-chip:hover { border-color: var(--color-primary); }
.exam-chip.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.exam-painel-card { border: 1px solid var(--color-border); border-radius: .8rem; margin-top: .7rem; overflow: hidden; }
.exam-painel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .8rem; background: var(--color-secondary); }
.exam-painel-tools { display: flex; gap: .4rem; }
.exam-mini { border: 1px solid var(--color-border); background: var(--color-panel); border-radius: .5rem; padding: .2rem .5rem; font: inherit; font-size: .74rem; color: var(--color-muted); cursor: pointer; }
.exam-mini:hover { color: var(--color-primary); border-color: var(--color-primary); }
.exam-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .1rem .8rem; padding: .5rem .8rem .7rem; }
.exam-item { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .1rem .5rem; padding: .35rem .2rem; border-radius: .5rem; cursor: pointer; }
.exam-item:hover { background: var(--color-secondary); }
.exam-item input { grid-row: 1 / span 2; align-self: center; width: 1.05rem; height: 1.05rem; accent-color: var(--color-primary); }
.exam-item-nome { font-size: .9rem; line-height: 1.25; }
.exam-item.on .exam-item-nome { font-weight: 600; }
.exam-item-obs { grid-column: 2; font-size: .72rem; color: var(--color-muted); }
.exam-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.exam-preview { margin-top: 1.2rem; }

/* documento gerado */
.exam-doc-ident { margin: .2rem 0; }
.exam-doc-hip { margin: .2rem 0 .6rem; }
.exam-doc-sec { font-size: 1rem; margin: 1rem 0 .3rem; border-bottom: 1px solid var(--color-border); padding-bottom: .2rem; }
.exam-doc-lista { margin: .2rem 0 .4rem 1.2rem; padding: 0; }
.exam-doc-lista li { margin: .15rem 0; }
.exam-doc-obs { color: var(--color-muted); font-size: .85em; }
@media print { .exam-doc-obs { color: #444; } }

/* ---- Hub editorial: grupos direcionados + cartões-índice ---- */
.hub-grid { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 2.1rem; }
.hub-group-title {
  margin: 0 0 .95rem; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-primary); display: flex; align-items: center; gap: .8rem;
}
.hub-group-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, color-mix(in oklch, var(--color-gold) 55%, var(--color-border)), transparent); }

/* Categorias recolhíveis (accordion) do "Explorar tudo" */
.hub-grid { gap: .6rem; }
.hub-acc { border: 1px solid var(--color-border); border-radius: .8rem; background: var(--color-panel); overflow: hidden; }
.hub-acc-head { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .95rem 1.05rem; background: transparent; border: none; font: inherit; color: var(--color-text); cursor: pointer; text-align: left; }
.hub-acc-title { font-size: .95rem; font-weight: 600; }
.hub-acc-count { font-size: .72rem; font-weight: 600; color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 12%, transparent); border-radius: 999px; padding: .12rem .5rem; }
.hub-acc-chev { width: 18px; height: 18px; margin-left: auto; color: var(--color-muted); transition: transform .18s ease; flex: 0 0 auto; }
.hub-acc:not(.closed) .hub-acc-chev { transform: rotate(90deg); }
.hub-acc-head:hover .hub-acc-title { color: var(--color-primary); }
.hub-acc-body { padding: .1rem 1.05rem 1.1rem; }
.hub-acc.closed .hub-acc-body { display: none; }
.hub-acc.hub-group-urg { border-left: 3px solid var(--color-accent); }
.hub-acc.hub-group-urg .hub-acc-count { color: var(--color-accent); background: color-mix(in oklch, var(--color-accent) 14%, transparent); }

.hub-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: .8rem; }
.hub-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .95rem; text-decoration: none;
  padding: 1.15rem 1.05rem 1.25rem; border: 1px solid var(--color-border); border-radius: .8rem;
  background: var(--color-panel); color: var(--color-text);
  transition: border-color .18s ease, box-shadow .2s ease, transform .18s ease;
}
.hub-card::after {
  content: ""; position: absolute; left: 1.05rem; right: 1.05rem; bottom: .75rem; height: 1.5px;
  background: var(--color-gold); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .24s ease;
}
.hub-card:hover {
  border-color: color-mix(in oklch, var(--color-primary) 45%, var(--color-border));
  box-shadow: 0 18px 34px -24px rgba(20, 40, 30, 0.55);
  transform: translateY(-2px);
}
.hub-card:hover::after { transform: scaleX(1); }
/*
 * O CARTÃO PRECISA RESPONDER AO TOQUE, e até 2026-08-30 ele não respondia: só existia
 * :hover, que no celular não acontece. O dono pediu "com clique diferente, com fica
 * diferente quando clica", e a falta valia para as duas telas, a inicial do SPI e o índice
 * da caixa na loja. Afunda, escurece a borda e apaga a sombra: o dedo vê que pegou.
 */
.hub-card:active {
  transform: translateY(1px) scale(.985);
  border-color: color-mix(in oklch, var(--color-primary) 60%, var(--color-border));
  background: color-mix(in oklch, var(--color-primary) 6%, var(--color-panel));
  box-shadow: 0 4px 10px -8px rgba(20, 40, 30, 0.5);
}
.hub-card:active::after { transform: scaleX(1); }
/* Teclado: o mesmo destaque do toque, sem depender de mouse. */
.hub-card:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px color-mix(in oklch, var(--color-primary) 55%, transparent);
}
/* A linha pequena de um cartão que conta o que tem dentro (ex.: "28 escalas desta
   ferramenta" no índice da caixa da loja). */
.hub-card-nota { display: block; margin-top: -.55rem; font-size: .78rem; line-height: 1.3; color: var(--color-muted); }
.hub-card-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); }
.hub-card-ico svg { width: 27px; height: 27px; }
.hub-card:hover .hub-card-ico { color: var(--color-primary-dark); }
.hub-card-label {
  display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.02rem;
  line-height: 1.2; letter-spacing: -.006em; color: var(--color-primary-dark);
}
/* Urgência e emergência: ícones em terracota para leitura de alerta */
.hub-group-urg .hub-card-ico { color: var(--color-accent); }
.hub-group-urg .hub-card:hover .hub-card-ico { color: color-mix(in oklch, var(--color-accent) 80%, black); }
.hub-group-urg .hub-card::after { background: var(--color-accent); }

/* ===== Tela inicial estilo app (saudação + hero + acesso rápido + favoritos) ===== */
.hub-card-wrap { position: relative; display: block; }
.hub-card-wrap .hub-card { height: 100%; box-sizing: border-box; }
.fav-star {
  position: absolute; top: .45rem; right: .45rem; width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: none; border-radius: 50%; color: color-mix(in oklch, var(--color-muted) 70%, transparent);
  transition: color .15s, background .15s; z-index: 2;
}
.fav-star svg { width: 18px; height: 18px; }
.fav-star:hover { background: color-mix(in oklch, var(--color-primary) 10%, white); color: var(--color-accent); }
.fav-star.on { color: var(--color-accent); }
.fav-star.on svg { fill: var(--color-accent); }

.home-top { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.4rem; }
.home-greet { display: flex; align-items: center; gap: .75rem; }
.home-greet-av {
  width: 46px; height: 46px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: var(--color-cream); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
}
.home-greet-hi { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-primary-dark); font-weight: 600; }
.home-greet-sub { color: var(--color-muted); font-size: .9rem; }
.home-hero {
  margin: .6rem 0 .4rem; border-radius: 1.25rem; padding: 1.6rem 1.5rem; overflow: hidden; position: relative; isolation: isolate;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-cream);
  box-shadow: 0 22px 50px -30px rgba(20, 40, 30, .65);
}
.home-hero::before { content: ""; position: absolute; z-index: -1; top: -30%; right: -12%; width: 55%; height: 150%;
  background: radial-gradient(closest-side, rgba(201,162,39,.28), rgba(201,162,39,0) 70%); }
.home-hero h2 { font-family: var(--font-display); color: #fff; font-size: 1.5rem; line-height: 1.12; margin: 0 0 .5rem; max-width: 20ch; }
.home-hero p { margin: 0; color: rgba(246,241,231,.9); font-size: .95rem; }
.home-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 1.15rem 0 .1rem; }
.home-sec-head h3 { font-family: var(--font-display); font-size: 1.12rem; color: var(--color-primary-dark); margin: 0; }
.home-quick { margin-top: .55rem; }
.home-sec-hint { color: var(--color-muted); font-size: .78rem; }

/* ---- Acesso rápido: os quatro boxes verdes ----
   Mesma família da faixa superior do app (--color-primary), em tinta clara sobre a qual o
   verde escuro do topo continua legível. Verde CHEIO foi descartado: quatro blocos escuros
   logo abaixo do cabeçalho competiriam com ele e a tela perderia o eixo.

   O contraste importa mais aqui que estética: isso é usado no plantão, muitas vezes com a
   tela no claro. Texto escuro sobre fundo claro sobrevive ao sol; o contrário, não.

   color-mix em vez de um hex novo: assim os quatro seguem a paleta se ela mudar, em vez de
   virar uma cor órfã que ninguém sabe de onde veio. */
.home-quick .hub-card {
  background: color-mix(in oklch, var(--color-primary) 10%, white);
  border-color: color-mix(in oklch, var(--color-primary) 26%, white);
}
.home-quick .hub-card-ico { color: var(--color-primary-dark); }
.home-quick .hub-card-label { color: var(--color-primary-dark); }
/* O filete dourado do hover viraria quase invisível sobre o verde: passa ao verde escuro. */
.home-quick .hub-card::after { background: var(--color-primary-dark); }
.home-quick .hub-card:hover {
  background: color-mix(in oklch, var(--color-primary) 15%, white);
  border-color: color-mix(in oklch, var(--color-primary) 45%, white);
}
/* A estrela precisa aparecer sobre o verde — é ela que comanda quais quatro ficam aqui. */
.home-quick .fav-star { color: var(--color-primary-dark); }

.home-continue {
  display: flex; align-items: center; gap: .9rem; margin-top: .55rem; text-decoration: none;
  border: 1px solid var(--color-border); border-radius: .9rem; padding: .95rem 1.05rem; background: var(--color-panel); color: var(--color-text);
  transition: border-color .15s, box-shadow .2s, transform .15s;
}
.home-continue:hover { border-color: color-mix(in oklch, var(--color-primary) 45%, var(--color-border)); box-shadow: 0 16px 30px -22px rgba(20,40,30,.5); transform: translateY(-1px); }
.home-cont-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--color-primary) 12%, white); color: var(--color-primary-dark); }
.home-cont-ico svg { width: 22px; height: 22px; }
.home-cont-txt { display: flex; flex-direction: column; flex: 1; }
.home-cont-txt strong { font-family: var(--font-display); color: var(--color-primary-dark); font-weight: 600; }
.home-cont-txt span { color: var(--color-muted); font-size: .82rem; }
.home-cont-arrow { color: var(--color-muted); font-size: 1.5rem; line-height: 1; }

/* barra inferior (só na home) */
.home-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; justify-content: space-around;
  background: var(--color-panel); border-top: 1px solid var(--color-border); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px -18px rgba(20,40,30,.5);
}
.home-tabbar button {
  flex: 1; background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .35rem .2rem; color: var(--color-muted); font-size: .72rem; font-family: inherit;
}
.home-tabbar .tab-ico svg { width: 23px; height: 23px; }
.home-tabbar button:first-child { color: var(--color-primary); }
.home-tabbar button:hover { color: var(--color-primary-dark); }
#view-hub { padding-bottom: 4.5rem; }

/* busca (overlay) */
.home-search { position: fixed; inset: 0; z-index: 120; background: rgba(15,28,22,.5); opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s; }
.home-search.open { opacity: 1; visibility: visible; }
.home-search-box { position: absolute; left: 50%; top: 8vh; transform: translateX(-50%); width: min(560px, 92vw); max-height: 80vh; overflow: auto;
  background: var(--color-panel); border-radius: 1rem; box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); padding: 1rem; }
.home-search-top { display: flex; gap: .5rem; align-items: center; }
.home-search-top input { flex: 1; padding: .7rem .9rem; border: 1px solid var(--color-border); border-radius: .7rem; font: inherit; }
.home-search-close { background: transparent; border: none; font-size: 1.7rem; color: var(--color-muted); cursor: pointer; line-height: 1; padding: 0 .3rem; }
.home-search-results { margin-top: .7rem; display: flex; flex-direction: column; gap: .2rem; }
.home-search-item { display: flex; align-items: center; gap: .7rem; padding: .6rem .5rem; border-radius: .6rem; text-decoration: none; color: var(--color-text); }
.home-search-item:hover { background: var(--color-secondary); }
.home-search-item .hub-card-ico svg { width: 22px; height: 22px; }
.home-search-ico { display: inline-flex; color: var(--color-muted); }
.home-search-ico svg { width: 20px; height: 20px; }

/* Campo de busca fixo na tela inicial */
.home-searchbar { position: relative; display: flex; align-items: center; gap: .55rem; margin: 0 0 1.4rem;
  background: var(--color-panel); border: 1px solid var(--color-border); border-radius: .85rem; padding: .1rem .85rem;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05)); }
.home-searchbar:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 18%, transparent); }
.home-searchbar-ico { display: inline-flex; color: var(--color-muted); flex: 0 0 auto; }
.home-searchbar-ico svg { width: 20px; height: 20px; }
.home-searchbar input { flex: 1; border: none; background: transparent; font: inherit; padding: .8rem 0; outline: none; color: var(--color-text); }
.home-q-results { position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 40; display: none;
  background: var(--color-panel); border: 1px solid var(--color-border); border-radius: .85rem; padding: .4rem;
  max-height: min(64vh, 460px); overflow: auto; box-shadow: 0 22px 55px -24px rgba(0,0,0,.5); }
.home-q-results.open { display: block; }

/* Itens de resultado (compartilhado entre a barra da home e o overlay) */
.srch-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .55rem; border-radius: .6rem; text-decoration: none; color: var(--color-text); }
.srch-item:hover { background: var(--color-secondary); }
.srch-ico { flex: 0 0 auto; display: inline-flex; color: var(--color-primary); }
.srch-ico svg { width: 22px; height: 22px; }
.srch-chip { flex: 0 0 auto; font-size: .64rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--color-primary-dark, var(--color-primary)); background: color-mix(in oklch, var(--color-primary) 12%, transparent);
  border-radius: .4rem; padding: .22rem .45rem; min-width: 4.4rem; text-align: center; }
.srch-txt { display: flex; flex-direction: column; min-width: 0; }
.srch-txt strong { font-weight: 600; font-size: .95rem; line-height: 1.2; }
.srch-txt span { font-size: .78rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-hint { padding: .7rem .5rem; color: var(--color-muted); font-size: .85rem; margin: 0; }

@media (min-width: 900px) { .home-tabbar { display: none; } #view-hub { padding-bottom: 0; } }
@media (max-width: 560px) {
  .hub-cards { grid-template-columns: repeat(auto-fill, minmax(134px, 1fr)); gap: .6rem; }
  .hub-card { padding: .95rem .85rem 1.05rem; gap: .75rem; }
  .hub-card-label { font-size: .95rem; }
}

/* ---- Documentos do paciente (aba no prontuário) ---- */
.doc-drop {
  border: 1.5px dashed color-mix(in oklch, var(--color-primary) 40%, var(--color-border));
  border-radius: 1rem; background: var(--color-cream); text-align: center;
  padding: 1.8rem 1.25rem; cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.doc-drop:hover, .doc-drop:focus-visible { border-color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 6%, var(--color-cream)); outline: none; }
.doc-drop-over { border-color: var(--color-primary); border-style: solid; background: color-mix(in oklch, var(--color-primary) 10%, var(--color-cream)); }
.doc-drop-ico { width: 34px; height: 34px; color: var(--color-primary); margin-bottom: .35rem; }
.doc-drop-txt { margin: .2rem 0 .15rem; font-size: 1rem; }
.doc-drop-sub { font-size: .85rem; margin: 0 auto; max-width: 44ch; }

.doc-msg { margin: .8rem 0 0; padding: .6rem .8rem; border-radius: .6rem; font-size: .9rem; font-weight: 500; }
.doc-msg-info { background: color-mix(in oklch, var(--color-primary) 8%, white); color: var(--color-primary-dark); border: 1px solid color-mix(in oklch, var(--color-primary) 22%, var(--color-border)); }

.doc-list { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .65rem; }
.doc-empty { text-align: center; padding: 1.4rem 1rem; }
.doc-empty code { background: var(--color-secondary); padding: .1rem .35rem; border-radius: .3rem; font-size: .85em; }
/* O NOME DO ARQUIVO OCUPA A LINHA INTEIRA, como um título, e os botões vêm embaixo.
   Era grid de duas colunas (1fr auto). A coluna dos botões cresceu para cinco botões
   ("Organizar com IA", "Lançar resultados", "Compartilhar", "Baixar", "Excluir"), esmagou a
   coluna do nome para largura de poucos pixels, e o overflow-wrap: anywhere fez o resto:
   nome de arquivo longo saía QUEBRADO LETRA POR LETRA, uma por linha, empurrando o card
   para meia tela de altura.
   Empilhar resolve na raiz. Lado a lado só voltaria a apertar assim que entrasse o sexto
   botão — e a régua "cabe em duas colunas?" depende de quantos botões o documento tem, o
   que muda por categoria de arquivo. */
.doc-item {
  border: 1px solid var(--color-border); border-radius: .8rem; background: var(--color-panel);
  padding: .8rem .9rem; display: grid; grid-template-columns: 1fr; gap: .55rem; align-items: start;
}
.doc-item-main { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.doc-item-ico { flex: 0 0 auto; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 9px; background: color-mix(in oklch, var(--color-primary) 10%, white); color: var(--color-primary); }
.doc-item-ico svg { width: 20px; height: 20px; }
/* flex: 1 — o bloco do texto CRESCE e ocupa a linha branca inteira, como um título.
   Sem isso ele fica do tamanho do próprio conteúdo e o nome sobra encolhido no canto
   esquerdo, mesmo já estando na horizontal. */
.doc-item-txt { min-width: 0; flex: 1 1 auto; }
.doc-item-nome { margin: 0; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; line-height: 1.35; }
.doc-item-meta { margin: .1rem 0 0; font-size: .82rem; }
/* wrap: cinco botões não cabem numa linha no celular, e sem o wrap eles vazam do card. */
.doc-item-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.doc-item-actions .secondary { padding: .38rem .8rem; font-size: .85rem; }
.doc-excluir { background: none; border: 1px solid var(--color-border); color: var(--color-muted); border-radius: var(--radius-pill); padding: .38rem .8rem; font-size: .85rem; cursor: pointer; transition: color .15s, border-color .15s; }
.doc-excluir:hover { color: var(--color-high); border-color: var(--color-high); }

.doc-badge { display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: .12rem .45rem; border-radius: var(--radius-pill); vertical-align: middle; margin-left: .35rem; }
.doc-badge-ok { background: color-mix(in oklch, var(--color-primary) 15%, white); color: var(--color-primary-dark); }
.doc-badge-wait { background: color-mix(in oklch, var(--color-accent) 16%, white); color: color-mix(in oklch, var(--color-accent) 75%, black); }

.doc-resumo { grid-column: 1 / -1; margin-top: .2rem; border-top: 1px solid var(--color-border); padding-top: .5rem; }
.doc-toggle { background: none; border: none; color: var(--color-primary); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; padding: 0; }
.doc-resumo-txt { margin-top: .5rem; white-space: pre-wrap; font-size: .9rem; line-height: 1.55; color: var(--color-text); background: var(--color-cream); border-radius: .6rem; padding: .7rem .85rem; }
/* leitura organizada do exame: seções, listas e destaque dos alterados */
.doc-resumo-txt p, .doc-resumo-txt ul { white-space: normal; }
.doc-res-sec { margin: .7rem 0 .25rem; }
.doc-res-sec:first-child { margin-top: 0; }
.doc-res-sec-alt strong { color: #9b2c2c; }
.doc-res-sec-aten strong { color: #8a6100; }
.doc-res-lista { margin: 0 0 .2rem; padding-left: 1.1rem; }
.doc-res-lista li { margin: .15rem 0; }
.doc-res-lista-alt { border-left: 3px solid #e0b4b4; padding-left: .9rem; margin-left: .1rem; list-style: none; }
.doc-res-lista-alt li::before { content: "▲ "; color: #9b2c2c; }
.doc-res-lista-aten { border-left: 3px solid #e6cf9a; padding-left: .9rem; margin-left: .1rem; list-style: none; }
.doc-res-lista-aten li::before { content: "• "; color: #8a6100; }
@media (max-width: 560px) {
  /* O empilhamento já é o padrão (ver .doc-item). Aqui fica só o alinhamento dos botões. */
  .doc-item-actions { justify-content: flex-start; }
}

/* ---- Anotações à mão (prancheta / Apple Pencil) na consulta ---- */
.anot-panel { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-cream); padding: 0.4rem 1rem; margin: 0.4rem 0 1.2rem; }
.anot-panel > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; padding: 0.5rem 0; font-family: var(--font-display); color: var(--color-primary-dark); }
.anot-panel > summary .pu-sum-title { font-weight: 600; }
.anot-body { padding-bottom: 0.7rem; }
.anot-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0.6rem; }
.anot-tool { background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.4rem 0.85rem; font-size: 0.9rem; cursor: pointer; color: var(--color-text); }
.anot-tool:hover { border-color: var(--color-primary); }
.anot-tool-active { background: var(--color-primary); color: var(--color-cream); border-color: var(--color-primary); }
.anot-toolbar .secondary { padding: 0.4rem 0.85rem; font-size: 0.9rem; }
.anot-toolbar-sep { flex: 1 1 0.5rem; min-width: 0; }
.anot-color { display: inline-flex; align-items: center; }
.anot-color input[type="color"] { width: 34px; height: 30px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-panel); padding: 2px; cursor: pointer; }
.anot-canvas-wrap { height: 62vh; max-height: 720px; min-height: 320px; border: 1px solid var(--color-border); border-radius: 0.7rem; background: #fff; overflow: hidden; box-shadow: inset 0 1px 2px rgba(20, 40, 30, 0.06); }
.anot-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; background: #fff;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media print { .anot-panel { display: none !important; } }

/* ---- Orientações de alta: documento para impressão (timbre/logo) ---- */
#alta-print-wrap { margin-top: 1.2rem; }
.alta-print-tema { text-align: center; font-family: var(--font-display); font-size: 1.1rem; color: #34614e; margin: 0 2.4rem 1rem; }
.laudo-alarme { margin: 1.1rem 2.4rem; border: 1.5px solid #b0281c; border-radius: 0.5rem; background: #fbecea; padding: 0.6rem 1rem 0.7rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.laudo-alarme-h { color: #b0281c !important; border: none !important; margin: 0.2rem 0 0.4rem !important; padding: 0 !important; font-size: 1.02rem; }
.laudo-alarme ul { margin: 0; padding-left: 1.2rem; }
.laudo-alarme li { margin-bottom: 0.35rem; text-align: left; }
.alta-print-foot { margin: 1.4rem 2.4rem 1.6rem !important; font-size: 0.82rem; color: #666; text-align: left !important; font-style: italic; }
/* Assinatura/identificação do médico no rodapé de todo documento (sem depender do logo) */
.doc-signature { text-align: center; margin: 2.4rem 2.4rem 1rem; }
.doc-signature p { margin: 0.12rem 0; text-align: center; }
.doc-sign-line { margin: 0 auto 0.3rem; color: #444; max-width: 20rem; }
.doc-sign-nome { font-size: 1.02rem; }
@media print {
  .alta-print-tema, .alta-print-foot { margin-left: 1.1rem; margin-right: 1.1rem; }
  .laudo-alarme { margin-left: 1.1rem; margin-right: 1.1rem; break-inside: avoid; }
}

/* Área do administrador (Meu Consultório): convidar médico */
.co-admin-row { display: grid; grid-template-columns: 1fr 12rem; gap: .8rem; align-items: end; margin-bottom: .6rem; }
@media (max-width: 560px) { .co-admin-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Central de Conteúdo IA (namespace .ct-)
   Reaproveita os tokens da plataforma (--color-*, --font-*, --radius) e as
   estruturas .panel / .pr-grid-2 / .auth-field / .pr-msg. Nada de paleta nova.
   ========================================================================== */
.ct-hero { background: linear-gradient(180deg, var(--color-cream), var(--color-panel)); }
.ct-eyebrow {
  display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-gold-deep, var(--color-accent)); margin-bottom: 0.35rem;
}
.ct-hero h2 { margin: 0 0 0.4rem; font-size: 1.6rem; }

.ct-portas { display: grid; gap: 0.9rem; grid-template-columns: 1fr; margin-top: 1.1rem; }
@media (min-width: 720px) { .ct-portas { grid-template-columns: 1fr 1fr; } }
.ct-porta {
  border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.1rem;
  background: var(--color-panel); cursor: pointer; text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ct-porta:hover, .ct-porta:focus-visible {
  border-color: var(--color-gold); transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in oklch, var(--color-primary) 10%, transparent);
  outline: none;
}
.ct-porta h3 { margin: 0.4rem 0 0.3rem; font-size: 1.1rem; }
.ct-porta p { margin: 0 0 0.6rem; color: var(--color-muted); font-size: 0.92rem; }
.ct-porta-ico { font-size: 1.3rem; color: var(--color-gold-deep, var(--color-accent)); }
.ct-porta-off { opacity: 0.72; cursor: default; background: var(--color-cream); }
.ct-porta-off:hover { transform: none; border-color: var(--color-border); box-shadow: none; }

.ct-cat { margin-top: 1.2rem; }
.ct-cat-head { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 0.55rem; }
.ct-cat-head h4 { margin: 0; font-family: var(--font-display); font-size: 1.02rem; color: var(--color-primary); }
.ct-cat-head span { font-size: 0.82rem; }
.ct-cards { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ct-card {
  border: 1px solid var(--color-border); border-radius: 0.8rem; padding: 0.7rem 0.8rem;
  background: var(--color-panel); cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ct-card:hover, .ct-card:focus-visible { border-color: var(--color-gold); transform: translateY(-1px); outline: none; }
.ct-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.ct-card-nome { font-weight: 600; font-size: 0.94rem; color: var(--color-primary-dark); }
.ct-card-lock { font-size: 0.82rem; opacity: 0.6; }
.ct-card-resumo { margin: 0.3rem 0 0.45rem; font-size: 0.82rem; color: var(--color-muted); line-height: 1.45; }
.ct-card-pe { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-gold-deep, var(--color-accent)); }
.ct-card-off { cursor: default; background: var(--color-cream); opacity: 0.8; }
.ct-card-off:hover { transform: none; border-color: var(--color-border); }

/* ------------------------------- marca ---------------------------------- */
.ct-ident { font-weight: 600; color: var(--color-primary-dark); margin: 0.2rem 0 0.5rem; }
.ct-slider { margin: 0.7rem 0 0.9rem; }
.ct-slider label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 0.2rem; }
.ct-slider input[type="range"] { width: 100%; accent-color: var(--color-primary); }
.ct-slider-legenda { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--color-muted); }
.ct-paleta { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.ct-cor { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font-size: 0.72rem; color: var(--color-muted); }
.ct-cor input[type="color"] { width: 3rem; height: 2.2rem; border: 1px solid var(--color-border); border-radius: 0.4rem; background: none; }
/* A analise do Instagram: a amostra de cor lida do perfil (span, nao input: e leitura, nao
   escolha) e a lista de ideias com o botao de gerar ao lado. */
.ct-cor-amostra { display: inline-block; width: 3rem; height: 2.2rem; border: 1px solid var(--color-border); border-radius: 0.4rem; }
.ct-insta-ok ul { margin: 0.2rem 0 0.6rem 1.2rem; }
.ct-ideias { display: grid; gap: 0.5rem; margin: 0.4rem 0 0.8rem; }
.ct-ideia { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 0.6rem 0.8rem; flex-wrap: wrap; }

/* O seletor de alinhamento fica logo abaixo da paleta, com respiro para não colar nos
   quadradinhos de cor. Largura limitada: são duas palavras de opção, um campo largo
   atravessando o painel só faria a tela parecer um formulário. */
.ct-alinha { margin-top: 1rem; max-width: 20rem; }
/* A previa da fonte de preferencia: a frase na propria letra, porque fonte nao se escolhe pelo nome. */
.ct-fonte-previa { font-size: 1.35rem; margin: 0.4rem 0 0.8rem; color: var(--color-text, inherit); }
.ct-proposta { border: 1px solid var(--color-gold); border-radius: var(--radius); padding: 0.9rem 1rem; background: var(--color-cream); margin-top: 0.8rem; }
.ct-proposta h4 { margin: 0 0 0.5rem; }
.ct-voz-ok { border-left: 3px solid var(--color-primary); padding-left: 0.8rem; }

/* ------------------------------ peça / render --------------------------- */
.ct-aviso { background: var(--color-cream); border-left: 3px solid var(--color-medium); padding: 0.6rem 0.8rem; border-radius: 0.4rem; font-size: 0.88rem; }
.ct-itens { display: grid; gap: 0.7rem; }
/* Coluna dupla só onde cabe: no celular a largura não dá e continua empilhado. */
@media (min-width: 900px) { .ct-itens-duplo { grid-template-columns: 1fr 1fr; } }
.ct-item { border: 1px solid var(--color-border); border-radius: 0.8rem; padding: 0.75rem 0.85rem; background: var(--color-panel); }
.ct-item-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.ct-item-n {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--color-primary); color: var(--color-cream); font-size: 0.78rem; font-weight: 600;
}
.ct-item-tipo { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.ct-campo { margin: 0.35rem 0; }
.ct-campo-rot { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.ct-campo-val { font-size: 0.95rem; line-height: 1.5; }
.ct-forte { font-weight: 600; color: var(--color-primary-dark); }
.ct-extras { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--color-border); }
.ct-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }
.ct-tag { background: var(--color-secondary); border-radius: var(--radius-pill); padding: 0.12rem 0.55rem; font-size: 0.78rem; }

/* ------------------------------ selo CFM -------------------------------- */
.ct-cfm { border-radius: var(--radius); padding: 0.8rem 0.95rem; margin: 0.8rem 0; border-left: 4px solid; background: var(--color-cream); }
.ct-cfm ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.ct-cfm li { margin: 0.5rem 0; font-size: 0.9rem; }
.ct-cfm-verde { border-color: var(--color-low); }
.ct-cfm-amarelo { border-color: var(--color-medium); }
.ct-cfm-vermelho { border-color: var(--color-high); }
.ct-cfm-trecho { font-style: italic; color: var(--color-high); }
.ct-cfm-fonte { font-size: 0.72rem; margin: 0.6rem 0 0; }

/* ------------------------------ biblioteca ------------------------------ */
.ct-lista { list-style: none; margin: 0; padding: 0; }
.ct-linha { border-bottom: 1px solid var(--color-border); }
.ct-linha:last-child { border-bottom: 0; }
.ct-linha-btn {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 0.7rem 0.2rem; cursor: pointer; color: inherit; text-decoration: none;
}
.ct-linha-btn:hover { background: var(--color-cream); }
.ct-linha-tit { display: block; font-weight: 600; color: var(--color-primary-dark); }
.ct-linha-meta { display: block; font-size: 0.78rem; color: var(--color-muted); margin-top: 0.15rem; }
.ct-flag { color: var(--color-high); font-weight: 600; }
.ct-vazio { border: 1px dashed var(--color-border); border-radius: var(--radius); padding: 1.1rem; text-align: center; }
.ct-versoes { list-style: none; margin: 0.4rem 0 0; padding: 0; font-size: 0.84rem; color: var(--color-muted); }
.ct-versoes li { padding: 0.2rem 0; }
.ct-inline-sel { border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.4rem 0.8rem; background: var(--color-panel); }
.ct-peca { margin-top: 0.6rem; }

/* ------------------------------ calendário ------------------------------ */
.ct-cal-topo { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.ct-cal-topo strong { font-family: var(--font-display); font-size: 1.1rem; min-width: 11rem; text-align: center; }
.ct-cal-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; margin-bottom: 0.25rem; }
.ct-cal-dow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); text-align: center; }
.ct-cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.ct-cal-cel { min-height: 4.6rem; border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 0.2rem; background: var(--color-panel); }
.ct-cal-vazia { background: transparent; border-color: transparent; }
.ct-cal-hoje { border-color: var(--color-gold); box-shadow: inset 0 0 0 1px var(--color-gold); }
.ct-cal-dia { background: none; border: 0; font-size: 0.78rem; color: var(--color-muted); cursor: pointer; padding: 0.1rem 0.25rem; width: 100%; text-align: left; }
.ct-cal-dia:hover { color: var(--color-primary); }
.ct-cal-pauta {
  display: block; width: 100%; text-align: left; font-size: 0.7rem; line-height: 1.25;
  border: 0; border-left: 3px solid var(--color-primary); border-radius: 0.25rem;
  background: var(--color-secondary); color: var(--color-text); margin: 0.12rem 0;
  padding: 0.16rem 0.28rem; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ct-cal-st-publicado { border-left-color: var(--color-low); }
.ct-cal-st-pronto { border-left-color: var(--color-gold-deep, var(--color-accent)); }
.ct-cal-st-descartado { opacity: 0.5; text-decoration: line-through; }
.ct-cal-legenda { margin-top: 0.6rem; font-size: 0.8rem; }
@media (max-width: 620px) {
  .ct-cal-cel { min-height: 3.4rem; }
  .ct-cal-pauta { font-size: 0.62rem; }
}

/* ---------------------- tela de ferramenta e copiloto -------------------- */
.ct-migalha { font-size: 0.8rem; margin: 0.3rem 0 0; }
.ct-fonte { margin: 0.6rem 0 0.2rem; }
.ct-fonte summary { cursor: pointer; font-size: 0.88rem; color: var(--color-primary); }
.ct-fonte textarea { width: 100%; margin-top: 0.4rem; }
.ct-barra {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.9rem;
  padding-top: 0.8rem; border-top: 1px solid var(--color-border);
}
.ct-barra-resumo { font-size: 0.84rem; color: var(--color-muted); flex: 1 1 12rem; }
.ct-barra-custo {
  font-size: 0.76rem; letter-spacing: 0.03em; color: var(--color-gold-deep, var(--color-accent));
  border: 1px solid var(--color-gold); border-radius: var(--radius-pill); padding: 0.16rem 0.6rem;
}
.ct-editando {
  background: color-mix(in oklch, var(--color-gold) 12%, transparent);
  outline: 1px dashed var(--color-gold); border-radius: 0.3rem; padding: 0.15rem 0.3rem;
}
.ct-reap { margin-top: 0.9rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.86rem; }
.ct-reap-btn {
  border: 1px solid var(--color-border); background: var(--color-panel); border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem; font-size: 0.82rem; cursor: pointer; color: var(--color-primary);
}
.ct-reap-btn:hover { border-color: var(--color-gold); }

.ct-cop-fab {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 60;
  background: var(--color-primary-dark); color: var(--color-cream); border: 0;
  border-radius: var(--radius-pill); padding: 0.7rem 1.1rem; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; box-shadow: 0 6px 20px color-mix(in oklch, var(--color-primary) 35%, transparent);
}
.ct-cop-fab span { color: var(--color-gold); margin-right: 0.3rem; }
.ct-cop-fab-ativo { background: var(--color-primary); }
.ct-cop-painel {
  position: fixed; right: 1rem; bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); z-index: 61;
  width: min(24rem, calc(100vw - 2rem)); max-height: 72vh; overflow-y: auto;
  background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 0.9rem 1rem; box-shadow: 0 14px 40px color-mix(in oklch, var(--color-primary) 22%, transparent);
}
.ct-cop-topo { display: flex; align-items: center; justify-content: space-between; }
.ct-cop-fechar { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--color-muted); }
.ct-cop-dica { font-size: 0.78rem; margin: 0.2rem 0 0.6rem; }
.ct-cop-acoes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem; }
.ct-cop-acao {
  border: 1px solid var(--color-border); background: var(--color-cream); border-radius: var(--radius-pill);
  padding: 0.28rem 0.7rem; font-size: 0.78rem; cursor: pointer; color: var(--color-text);
}
.ct-cop-acao:hover { border-color: var(--color-gold); }
.ct-cop-hist { margin-top: 0.6rem; }
.ct-cop-hist-item { font-size: 0.78rem; border-left: 2px solid var(--color-gold); padding-left: 0.5rem; margin: 0.4rem 0; }
@media print { .ct-cop-fab, .ct-cop-painel { display: none !important; } }

/* ------------------------------ modo conversa --------------------------- */
.ct-conv { display: flex; flex-direction: column; gap: 0.8rem; }
.ct-conv-fluxo { display: flex; flex-direction: column; gap: 0.6rem; max-height: 26rem; overflow-y: auto; }
.ct-conv-fala { display: flex; gap: 0.5rem; align-items: flex-start; }
.ct-conv-fala p { margin: 0; padding: 0.6rem 0.85rem; border-radius: 1rem; font-size: 0.95rem; line-height: 1.5; }
.ct-conv-ia p { background: var(--color-cream); border: 1px solid var(--color-border); border-top-left-radius: 0.3rem; }
.ct-conv-medico { justify-content: flex-end; }
.ct-conv-medico p { background: var(--color-primary); color: var(--color-cream); border-top-right-radius: 0.3rem; }
.ct-conv-ico { color: var(--color-gold-deep, var(--color-accent)); font-size: 1rem; padding-top: 0.5rem; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ct-chip {
  border: 1px solid var(--color-border); background: var(--color-panel); border-radius: var(--radius-pill);
  padding: 0.4rem 0.85rem; font-size: 0.86rem; cursor: pointer; color: var(--color-text); text-align: left;
}
.ct-chip:hover { border-color: var(--color-gold); background: var(--color-cream); }
.ct-conv-input { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.ct-conv-input input { flex: 1; }
.ct-conv-nota { font-size: 0.8rem; margin: 0.5rem 0 0; }
.ct-conv-barra {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  border-top: 1px solid var(--color-border); padding-top: 0.7rem;
}

/* --------------------- calendário: meta, arraste, sazonais --------------- */
.ct-cal-prog { margin: 0.7rem 0 0.2rem; font-size: 0.8rem; }
.ct-cal-barra {
  height: 0.5rem; background: var(--color-secondary); border-radius: var(--radius-pill);
  overflow: hidden; margin-bottom: 0.35rem;
}
.ct-cal-barra span { display: block; height: 100%; background: var(--color-primary); }
.ct-cal-acoes { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.8rem; font-size: 0.84rem; }
.ct-cal-ia { border-left-style: dashed; }
.ct-cal-arrastando { opacity: 0.35; }
.ct-cal-alvo { background: color-mix(in oklch, var(--color-gold) 20%, transparent); border-color: var(--color-gold); }
.ct-cal-ghost {
  position: fixed; z-index: 90; pointer-events: none; transform: translate(-50%, -50%);
  max-width: 9rem; font-size: 0.7rem; padding: 0.2rem 0.4rem; border-radius: 0.25rem;
  background: var(--color-primary); color: var(--color-cream); box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ct-saz {
  display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem;
}
.ct-saz:last-of-type { border-bottom: 0; }
.ct-saz-nota { font-size: 0.76rem; font-style: italic; }
.ct-botao-link {
  display: inline-block; text-decoration: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); padding: 0.5rem 1rem; background: var(--color-panel);
  color: var(--color-primary); font-size: 0.9rem;
}

/* Grade do calendário não pode esticar com título longo: em grid, o item tem
   min-width:auto (min-content) por padrão, e o texto sem quebra empurrava a
   largura da coluna até estourar a tela no celular. */
.ct-cal-grade { overflow: hidden; }
.ct-cal-cel { min-width: 0; }
.ct-cal-pauta { max-width: 100%; }

/* Lista cronológica do mês: no celular é a leitura principal do calendário. */
.ct-cal-lista { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--color-border); }
.ct-cal-lista h4 { margin: 0 0 0.3rem; }
.ct-cal-item { display: grid; grid-template-columns: 1.7rem 1fr; gap: 0 0.55rem; align-items: baseline; }
.ct-cal-item-dia {
  grid-row: span 2; font-family: var(--font-display); font-size: 1.05rem;
  color: var(--color-primary); text-align: right;
}
@media (max-width: 620px) {
  /* 7 colunas num telefone não cabem texto: a pauta vira marcador e o título
     é lido na lista abaixo. Mantém o aria-label para leitor de tela. */
  .ct-cal-pauta { height: 0.42rem; padding: 0; margin: 0.12rem 0 0; border-radius: var(--radius-pill); border-left-width: 0; background: var(--color-primary); }
  .ct-cal-pauta-tit { display: none; }
  .ct-cal-st-publicado { background: var(--color-low); }
  .ct-cal-st-pronto { background: var(--color-gold-deep, var(--color-accent)); }
  .ct-cal-st-descartado { background: var(--color-muted); text-decoration: none; }
  .ct-cal-ia { outline: 1px dashed var(--color-gold); outline-offset: 1px; }
  .ct-cal-cel { min-height: 3rem; }
}

/* ------------------------- imagens (modelos visuais) -------------------- */
/* ------------------------- modelo de referência (Minha marca) ------------------ */
/* O print que ensinou o layout e a prévia do que ele produz, lado a lado: é a comparação
   que diz se a IA acertou, e é o que o médico olha antes de aceitar. */
.ct-ref-box { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin: 0.6rem 0; }
.ct-ref-print { width: 130px; border-radius: 0.5rem; border: 1px solid var(--color-border); }
.ct-ref-previa { overflow: hidden; border: 1px solid var(--color-border); border-radius: 0.5rem; }
.ct-ref-tela { transform-origin: top left; }
.ct-ref-campos { display: grid; gap: 0.6rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .ct-ref-campos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .ct-ref-campos { grid-template-columns: 1fr 1fr 1fr; } }

.ct-vis-ctrl { display: grid; gap: 0.6rem; grid-template-columns: 1fr; margin-bottom: 0.8rem; }
@media (min-width: 620px) { .ct-vis-ctrl { grid-template-columns: 1fr 1fr; } }
.ct-vis-palco {
  position: relative; overflow: hidden; border: 1px solid var(--color-border);
  border-radius: var(--radius); background: var(--color-cream);
}
/* A tela é desenhada em tamanho REAL (1080 px) e reduzida por transform: o que
   o html2canvas captura é o tamanho de verdade, não o da prévia. */
.ct-vis-tela { transform-origin: top left; }
.ct-vis-nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.7rem 0; }

/* Tira de miniaturas: uma faixa de números que rola na horizontal, para não empurrar
   os botões de baixar para fora da tela quando o carrossel tem 10 ou 12 slides. */
.ct-vis-tira {
  display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.5rem 0 0.2rem;
  scrollbar-width: thin;
}
.ct-vis-tira-btn {
  flex: 0 0 auto; min-width: 2rem; height: 2rem; padding: 0 0.4rem;
  border: 1px solid var(--color-border); border-radius: 0.45rem;
  background: var(--color-panel); color: var(--color-muted);
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ct-vis-tira-btn:hover { border-color: var(--color-gold); color: var(--color-text); }
.ct-vis-tira-atual {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}

/* ----------------------------- editor por camadas ----------------------- */
.ed-palco { position: relative; overflow: hidden; border: 1px solid var(--color-gold); border-radius: var(--radius); background: var(--color-cream); touch-action: none; }
.ed-tela { transform-origin: top left; }
.ed-cam { outline: 1px dashed transparent; cursor: move; }
.ed-cam:hover { outline-color: color-mix(in oklch, var(--color-primary) 45%, transparent); }
.ed-sel { outline: 2px solid var(--color-accent) !important; }
.ed-editando { outline: 2px solid var(--color-gold) !important; cursor: text; }
.ed-alca {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-accent); border: 2px solid #fff; cursor: nwse-resize; z-index: 5;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3); touch-action: none;
}
.ed-ctrl { margin: 0.8rem 0 0.2rem; }
.ed-linha { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.ed-on { border-color: var(--color-accent); color: var(--color-accent); font-weight: 600; }
.ed-arquivo {
  display: inline-block; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 0.5rem 1rem; background: var(--color-panel); color: var(--color-primary);
  font-size: 0.9rem; cursor: pointer;
}

/* ------------------------------ CID na consulta ------------------------- */
.pr-cid-sel { display: block; font-size: 0.78rem; margin-top: 0.2rem; min-height: 1rem; }
.pr-cid-lista { display: none; }
.pr-cid-lista.aberta {
  display: block; border: 1px solid var(--color-border); border-radius: 0.6rem;
  background: var(--color-panel); margin-top: 0.25rem; overflow: hidden;
  box-shadow: 0 6px 18px color-mix(in oklch, var(--color-primary) 10%, transparent);
}
.pr-cid-op {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 0.5rem 0.7rem; font-size: 0.85rem; cursor: pointer; color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.pr-cid-op:last-child { border-bottom: 0; }
.pr-cid-op:hover { background: var(--color-cream); }
.pr-cid-vazio { display: block; padding: 0.5rem 0.7rem; font-size: 0.8rem; color: var(--color-muted); }

/* ------------------------- insights da clínica -------------------------- */
.ct-insight { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; padding: 0.6rem 0; }
.ct-insight strong { color: var(--color-primary-dark); }
.ct-privacidade { font-size: 0.8rem; border-left: 3px solid var(--color-gold); padding-left: 0.7rem; }

/* ------------------------------ artigos --------------------------------- */
.ct-artigo { padding: 0.8rem 0; border-bottom: 1px solid var(--color-border); }
.ct-artigo:last-child { border-bottom: 0; }
.ct-artigo-cab { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; font-size: 0.78rem; }
.ct-artigo p { margin: 0.2rem 0 0.5rem; font-size: 0.84rem; }
.ct-artigo-acoes { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ct-artigo-acoes a.ct-reap-btn { text-decoration: none; }
.ct-a-texto { font-size: 0.95rem; line-height: 1.55; }

/* ----------------------------- publicação ------------------------------- */
.ct-pub-canais { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.7rem 0 0.5rem; }
.ct-pub-canal-on {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}
.ct-pub-canal-on:hover { border-color: var(--color-gold); }
.ct-pub-nota { font-size: 0.82rem; border-left: 3px solid var(--color-gold); padding-left: 0.7rem; }

.ct-pub-check { list-style: none; margin: 0.8rem 0; padding: 0; font-size: 0.85rem; }
.ct-pub-check li {
  position: relative; padding: 0.3rem 0 0.3rem 1.5rem; line-height: 1.4;
  border-bottom: 1px solid var(--color-border);
}
.ct-pub-check li:last-child { border-bottom: 0; }
.ct-pub-check li::before { position: absolute; left: 0; font-weight: 700; }
.ct-pub-ok::before { content: "✓"; color: var(--color-primary); }
.ct-pub-aviso::before { content: "!"; color: var(--color-gold); }
.ct-pub-erro::before { content: "✗"; color: var(--color-danger, #c0392b); }
.ct-pub-erro { color: var(--color-danger, #c0392b); }

.ct-pub-passos { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0.2rem; }
.ct-pub-det { margin: 0.8rem 0; font-size: 0.85rem; }
.ct-pub-det summary { cursor: pointer; color: var(--color-primary); }
.ct-pub-pre {
  white-space: pre-wrap; word-break: break-word; margin: 0.5rem 0 0;
  padding: 0.7rem; background: var(--color-cream); border-radius: var(--radius);
  font-family: inherit; font-size: 0.84rem; line-height: 1.5; max-height: 40vh; overflow: auto;
}
.ct-pub-registro { margin-top: 0.6rem; }
.ct-pub-item { display: block; }
.ct-pub-item .ct-artigo-acoes { margin-top: 0.4rem; }
.ct-pub-form:not(:empty) {
  margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px dashed var(--color-border);
}
.ct-pub-resumo { font-size: 0.88rem; line-height: 1.5; }
.ct-pub-resumo p { margin: 0.2rem 0; }
.ct-pub-alto { color: var(--color-primary); font-weight: 600; }
.ct-pub-baixo { color: var(--color-gold); }
.ct-pub-alerta { color: var(--color-gold); }

/* fármaco cuja dose ainda não passou pela revisão do app */
.rx-conferir { border-left: 3px solid var(--color-gold); }
.rx-conferir-tag {
  display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.35rem;
  font-size: 0.7rem; border-radius: 999px; background: var(--color-gold); color: #fff;
  vertical-align: middle;
}

/* --------------------------------- Carla -------------------------------- */
.carla-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem;
}
.carla-endereco {
  font-size: 0.78rem; color: var(--color-muted); word-break: break-all;
  font-variant-numeric: tabular-nums;
}
.carla-acoes { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.carla-acoes a.ct-reap-btn { text-decoration: none; }
.carla-palco {
  position: relative; width: 100%; height: min(78vh, 900px);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  overflow: hidden; background: var(--color-cream);
}
.carla-frame { width: 100%; height: 100%; border: 0; display: block; }
.carla-aviso {
  border-left: 3px solid var(--color-gold); padding: 0.6rem 0.8rem;
  margin-bottom: 0.6rem; font-size: 0.86rem; line-height: 1.5;
  background: var(--color-cream); border-radius: var(--radius);
}
.carla-aviso p { margin: 0.2rem 0; }
.carla-aviso code {
  font-size: 0.8rem; padding: 0.05rem 0.25rem; border-radius: 4px;
  background: rgba(0, 0, 0, 0.06); word-break: break-all;
}
.carla-contexto p { margin: 0 0 0.5rem; }
/* botão de atalho para a Carla dentro da agenda e do prontuário */
.carla-atalho { display: inline-flex; align-items: center; gap: 0.25rem; }
.carla-atalho[disabled] { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 720px) {
  .carla-palco { height: 70vh; }
}

/* ------------------------- Growth OS · Estratégia ----------------------- */
.ct-gr-metas { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ct-gr-meta {
  text-align: left; cursor: pointer; background: var(--color-surface, #fff);
  border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.8rem;
  min-width: 0;
}
.ct-gr-meta:hover { border-color: var(--color-gold); }
.ct-gr-meta-atual p { margin: 0.2rem 0; }

.ct-gr-funil { display: grid; gap: 0.9rem; margin: 0.8rem 0; }
.ct-gr-etapa {
  padding: 0.6rem 0.7rem; border-left: 3px solid var(--color-border);
  border-radius: var(--radius); background: var(--color-cream); min-width: 0;
}
.ct-gr-etapa-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.5rem; flex-wrap: wrap; font-size: 0.9rem;
}
.ct-gr-pergunta { font-size: 0.82rem; margin: 0.15rem 0 0.45rem; }
/* falta = abaixo da meta; sobra = concentrado demais numa etapa */
.ct-gr-falta { border-left-color: var(--color-gold); }
.ct-gr-sobra { border-left-color: var(--color-muted); }
.ct-gr-ok { border-left-color: var(--color-primary); }

.ct-gr-barra {
  position: relative; height: 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.08); overflow: visible;
}
.ct-gr-barra-real {
  height: 100%; border-radius: 999px; background: var(--color-primary);
  transition: width 0.3s ease;
}
/* marca da meta: linha vertical em cima da barra */
.ct-gr-barra-alvo {
  position: absolute; top: -3px; width: 2px; height: 16px;
  background: var(--color-gold);
}
.ct-gr-barra-alvo::after {
  content: ""; position: absolute; top: -4px; left: -2px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold);
}

.ct-gr-passos { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.ct-gr-passos li { margin-bottom: 0.9rem; }
.ct-gr-passos p { margin: 0.15rem 0 0.4rem; font-size: 0.86rem; }

.ct-gr-missoes { list-style: none; margin: 0.7rem 0 0; padding: 0; font-size: 0.9rem; }
.ct-gr-missoes li {
  padding: 0.4rem 0 0.4rem 1.5rem; position: relative;
  border-bottom: 1px solid var(--color-border);
}
.ct-gr-missoes li:last-child { border-bottom: 0; }
.ct-gr-missoes li::before { content: "○"; position: absolute; left: 0; color: var(--color-muted); }
.ct-gr-missao-ok::before { content: "✓"; color: var(--color-primary); font-weight: 700; }
.ct-gr-missao-ok strong { text-decoration: line-through; opacity: 0.7; }

/* Agenda: a Carla mandou tudo, mas a ficha não nasceu (nome não decide o sexo).
   Precisa chamar atenção: sem isso a tela ficava vazia e parecia defeito. */
.ag-portal-pendente {
  padding: 0.6rem 0.7rem; border-radius: 0.5rem; font-size: 0.88rem; line-height: 1.45;
  border: 1px solid var(--color-accent, #b8860b); background: rgba(184, 134, 11, 0.1);
}

/* Confirmação de exclusão de paciente: a caixa que libera o botão. Fica em bloco e com
   área de toque generosa porque é lida e marcada no celular, e porque marcar sem querer
   uma caixa que habilita uma exclusão irreversível é o pior acidente possível aqui. */
.pr-confirm-del {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: 1rem 0; padding: .75rem .9rem;
  border: 1px solid #e0b4ae; border-radius: 8px; background: #fdf6f5;
  font-size: .95rem; line-height: 1.4; cursor: pointer;
}
.pr-confirm-del input { margin-top: .15rem; width: 1.15rem; height: 1.15rem; flex: none; }

/* Lista dos agendamentos que serão apagados junto com o paciente. Compacta e discreta:
   é informação de reconhecimento ("ah, é aquele que eu já cancelei"), não um alerta a mais. */
.pr-del-ags { margin: .35rem 0 .75rem 1.2rem; padding: 0; font-size: .92rem; color: #4a5750; }
.pr-del-ags li { margin: .15rem 0; }

/* Guia de cortesia no prontuário. Verde para "está feito", âmbar para "o e-mail mudou" —
   o segundo é o caso que passa desapercebido, e sem destaque a tela diria só "liberado"
   com o guia parado num endereço que a família não usa mais. */
.pr-guia-ok { color: #1f5132; background: #eef7f1; border: 1px solid #bcdcc8;
  border-radius: 8px; padding: .7rem .9rem; }
.pr-guia-mudou { color: #7a4b00; background: #fdf5e6; border: 1px solid #e8cf9a;
  border-radius: 8px; padding: .7rem .9rem; }
.pr-guia-panel summary { cursor: pointer; }

/* ============================================================================
   ENTRADA EM DOIS BLOCOS: MÉDICOS / NUTRICIONISTAS
   Primeira tela do domínio. Uma conta, dois consultórios — a escolha decide o
   destino depois do login e a cara do sistema, não permissão de dados.
   ========================================================================= */
.entrada {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 4rem) 1rem;
}
.entrada-topo { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.entrada-selo {
  display: inline-block;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: .35rem .85rem;
  background: var(--color-panel);
}
.entrada-titulo {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.1rem);
  line-height: 1.08;
  margin: 1rem 0 .5rem;
  color: var(--color-primary-dark);
}
.entrada-sub { color: var(--color-muted); font-size: 1.05rem; margin: 0 auto; max-width: 34rem; }

/* Duas colunas no desktop, empilhado no celular. minmax(0,1fr) e não 1fr: sem o
   minmax o texto longo do bloco força a coluna a crescer e a grade estoura. */
.entrada-blocos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem;
}
.entrada-bloco {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  text-align: left;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.35);
  background: var(--color-panel);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04);
  /* O bloco é um <button>: sem isto ele herda a fonte do agente do usuário. */
  font: inherit;
  color: inherit;
}
.entrada-bloco:hover, .entrada-bloco:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgb(0 0 0 / .09);
  outline: none;
}
.entrada-bloco-arte {
  width: 3.6rem; height: 3.6rem;
  display: grid; place-items: center;
  border-radius: 1rem;
  flex: 0 0 auto;
}
.entrada-bloco-arte svg { width: 2rem; height: 2rem; }
.entrada-bloco-txt { display: grid; gap: .3rem; min-width: 0; }
.entrada-bloco-txt strong {
  font-family: var(--font-display);
  font-size: 1.5rem; line-height: 1.1;
  color: var(--color-primary-dark);
}
.entrada-bloco-txt em {
  font-style: normal; font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-muted);
}
.entrada-bloco-txt small { font-size: .88rem; line-height: 1.5; color: var(--color-muted); }
.entrada-bloco-seta { color: var(--color-muted); display: grid; place-items: center; flex: 0 0 auto; }
.entrada-bloco-seta svg { width: 1.4rem; height: 1.4rem; }
.entrada-bloco:hover .entrada-bloco-seta { color: var(--color-primary); }

/* Cada bloco leva a cor do seu módulo — é o primeiro sinal de que são dois
   sistemas com a mesma conta, e não um só. */
.entrada-bloco-medico .entrada-bloco-arte {
  background: var(--color-secondary); color: var(--color-primary);
}
.entrada-bloco-medico:hover { border-color: var(--color-primary); }
.entrada-bloco-nutri .entrada-bloco-arte {
  background: oklch(94% 0.03 20); color: oklch(48% 0.09 18);
}
.entrada-bloco-nutri:hover { border-color: oklch(48% 0.09 18); }
.entrada-bloco-nutri .entrada-bloco-txt strong { color: oklch(34% 0.07 18); }

/* Psicanálise: azul-ardósia. Distinto dos outros dois sem sair da mesma família sóbria. */
.entrada-bloco-psi .entrada-bloco-arte {
  background: oklch(93% 0.03 255); color: oklch(46% 0.09 258);
}
.entrada-bloco-psi:hover { border-color: oklch(46% 0.09 258); }
.entrada-bloco-psi .entrada-bloco-txt strong { color: oklch(33% 0.07 258); }

.entrada-nota {
  text-align: center; margin-top: 1.75rem;
  font-size: .84rem; color: var(--color-muted);
}

/* =====================================================================
   PÁGINA DE VENDA v2, estrutura em seções (herói, faixa de números,
   problema, módulos alternados, ÁREA DO PACIENTE, IA, fluxo, diferença,
   privacidade, planos, dúvidas, chamada final).
   Sem fonte externa de propósito: a CSP fecha host de fora, e a página usa
   as duas famílias que o app já carrega.
   ===================================================================== */

/* barra de âncoras da própria página (o cabeçalho do app fica acima) */
.lp2-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  padding: 0.15rem 0;
}
.lp2-nav a {
  font-size: 0.84rem;
  color: var(--color-muted);
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-panel);
  white-space: nowrap;
}
.lp2-nav a:hover { color: var(--color-primary-dark); border-color: var(--color-primary); }

/* herói: ponto no selo, destaque no título e a arte emoldurada */
.lp2-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-right: 0.4rem;
  vertical-align: middle;
}
.lp2-title-accent { color: #f1e6cf; }

.lp2-heroart {
  margin: 0;
  background: rgba(246, 241, 231, 0.96);
  border-radius: 1.6rem;
  padding: 0.9rem;
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.45);
  transform: rotate(1deg);
}
.lp2-heroart-label {
  display: block;
  padding: 0.2rem 0.4rem 0.6rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.lp2-heroart img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.9rem;
  border: 1px solid rgba(20, 40, 30, 0.08);
}
.lp2-heroart figcaption {
  margin: 0.7rem 0.25rem 0.1rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--color-muted);
}

/* faixa de números, em linha com divisórias */
.lp2-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1.2rem;
  overflow: hidden;
}
.lp2-strip-item {
  padding: 1.4rem 1rem;
  text-align: center;
  border-right: 1px solid var(--color-border);
}
.lp2-strip-item:last-child { border-right: 0; }
.lp2-strip .lp-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--color-primary-dark);
}
.lp2-strip-lbl {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--color-muted);
  line-height: 1.35;
}

/* cabeçalho de seção centralizado */
.lp2-head-center { text-align: center; max-width: 46rem; margin: 0 auto 2rem; }
.lp2-head-center .landing-section-title::after { margin-left: auto; margin-right: auto; }

/* o problema + a citação */
.lp2-problem {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2.5rem;
  align-items: center;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1.4rem;
  padding: 2.2rem;
}
.lp2-plist { display: grid; gap: 0; margin-top: 1.2rem; }
.lp2-pitem {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--color-border);
}
.lp2-pitem:last-child { border-bottom: 0; }
.lp2-pitem b { display: block; font-size: 0.95rem; }
.lp2-pitem span { color: var(--color-muted); font-size: 0.88rem; }
.lp2-check {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.8rem;
}
.lp2-quote {
  margin: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-cream);
  border-radius: 1.4rem;
  padding: 2.2rem;
}
.lp2-quote p {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.25;
  margin: 0;
  color: #fff;
}
.lp2-quote cite {
  display: block;
  margin-top: 1.3rem;
  font-style: normal;
  font-size: 0.85rem;
  color: rgba(246, 241, 231, 0.7);
}

/* módulos alternados */
.lp2-mods { display: flex; flex-direction: column; }
.lp2-mod {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2.4rem 0;
  border-bottom: 1px solid var(--color-border);
}
.lp2-mod:last-child { border-bottom: 0; }
.lp2-mod-flip .lp2-mod-copy { order: 2; }
.lp2-mod-flip .lp2-screen { order: 1; }
.lp2-tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-gold-deep, var(--color-accent));
}
.lp2-mod-copy h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1.15;
  margin: 0.5rem 0 0.7rem;
  color: var(--color-primary-dark);
}
.lp2-mod-copy > p { margin: 0; color: var(--color-muted); font-size: 0.95rem; }
.lp2-flist { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.lp2-flist li { display: flex; gap: 0.55rem; font-size: 0.9rem; }
.lp2-flist li::before { content: "✓"; color: var(--color-gold-deep, var(--color-accent)); font-weight: 700; flex: none; }

/* "tela" ilustrativa dos módulos: moldura + linhas com o nome real das coisas */
.lp2-screen {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1.2rem;
  padding: 0.75rem;
  box-shadow: 0 22px 50px -30px rgba(20, 40, 30, 0.5);
}
.lp2-screen-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.4rem 0.7rem;
}
.lp2-screen-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); }
.lp2-screen-bar b {
  margin-left: 0.5rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.lp2-screen-body { background: var(--color-cream); border-radius: 0.9rem; padding: 0.6rem; display: grid; gap: 0.45rem; }
.lp2-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 0.7rem;
  padding: 0.65rem 0.8rem;
}
.lp2-row b { font-size: 0.88rem; font-weight: 600; color: var(--color-text); }
.lp2-row span { font-size: 0.72rem; color: var(--color-muted); text-align: right; }
.lp2-row-src { background: var(--color-secondary); border-color: transparent; }

.lp2-curva { display: block; width: 100%; height: 130px; color: var(--color-primary); }
.lp2-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.4rem 0.15rem 0.1rem; }
.lp2-chips span {
  font-size: 0.7rem;
  color: var(--color-muted);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.55rem;
}
.lp2-chips .lp2-chip-on { color: #fff; background: var(--color-primary); border-color: transparent; }
.lp2-chips .lp2-chip-z { color: var(--color-primary-dark); background: var(--color-secondary); border-color: transparent; }

/* ÁREA DO PACIENTE */
.lp2-shared {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: 1.4rem;
  padding: 2.2rem;
}
.lp2-shared-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 2.5rem; align-items: center; }
.lp2-portal {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1.4rem;
  padding: 1.5rem;
  box-shadow: 0 25px 60px -32px rgba(20, 40, 30, 0.45);
}
.lp2-portal-top { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; }
.lp2-portal-badge {
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
}
.lp2-portal-status {
  font-size: 0.72rem;
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.lp2-portal-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--color-primary-dark);
}
.lp2-portal-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 1rem; }
.lp2-portal-tabs span {
  font-size: 0.72rem;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.6rem;
}
.lp2-portal-tabs .lp2-portal-tab-on { color: #fff; background: var(--color-primary); border-color: transparent; }
.lp2-portal-files { display: grid; gap: 0.5rem; }
.lp2-portal-file {
  display: grid;
  grid-template-columns: 40px 1fr 20px;
  align-items: center;
  gap: 0.7rem;
  background: var(--color-cream);
  border-radius: 0.8rem;
  padding: 0.7rem;
}
.lp2-fico {
  width: 38px; height: 38px;
  border-radius: 0.6rem;
  background: var(--color-secondary);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 700;
}
.lp2-portal-file b { display: block; font-size: 0.86rem; font-weight: 600; }
.lp2-portal-file small { display: block; font-size: 0.72rem; color: var(--color-muted); margin-top: 0.1rem; }
.lp2-fok {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  font-size: 0.68rem;
}
.lp2-portal-foot {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  font-size: 0.72rem;
  color: var(--color-muted);
}
.lp2-portal-foot strong { color: var(--color-primary); font-weight: 600; }

.lp2-points { display: grid; gap: 0; margin-top: 1.4rem; }
.lp2-points > div { padding: 0.9rem 0; border-bottom: 1px solid var(--color-border); }
.lp2-points > div:last-child { border-bottom: 0; }
.lp2-points b { display: block; font-size: 0.97rem; margin-bottom: 0.15rem; color: var(--color-primary-dark); }
.lp2-points span { font-size: 0.89rem; color: var(--color-muted); }

/* IA */
.lp2-ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lp2-ai-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1.2rem;
  padding: 1.5rem;
}
.lp2-ai-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.2;
  margin: 0.45rem 0 0.5rem;
  color: var(--color-primary-dark);
}
.lp2-ai-card p { margin: 0; font-size: 0.9rem; color: var(--color-muted); }

/* fluxo em 5 passos */
.lp2-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.7rem; }
.lp2-step {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1.1rem;
  padding: 1.2rem;
}
.lp2-step-n {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--color-gold-deep, var(--color-accent));
}
.lp2-step h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0.5rem 0 0.35rem;
  color: var(--color-primary-dark);
}
.lp2-step p { margin: 0; font-size: 0.82rem; color: var(--color-muted); line-height: 1.45; }

/* a diferença, em fundo escuro */
.lp2-diff {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-cream);
  border-radius: 1.4rem;
  padding: 2.4rem;
}
.lp2-diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.lp2-diff .landing-section-title { color: #fff; }
.lp2-diff .landing-section-title::after { background: var(--color-accent); }
.lp2-diff .landing-section-sub { color: rgba(246, 241, 231, 0.75); }
.lp2-diff-list { display: grid; gap: 0.7rem; }
.lp2-diff-card {
  border: 1px solid rgba(246, 241, 231, 0.18);
  background: rgba(246, 241, 231, 0.06);
  border-radius: 1.1rem;
  padding: 1.2rem;
}
.lp2-diff-card h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 0.3rem; color: #fff; }
.lp2-diff-card p { margin: 0; font-size: 0.87rem; color: rgba(246, 241, 231, 0.75); }

/* privacidade */
.lp2-sec-box {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: 1.4rem;
  padding: 2.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem;
}
.lp2-sec-list { display: grid; gap: 0; }
.lp2-sec-list > div { padding: 0.85rem 0; border-bottom: 1px solid var(--color-border); }
.lp2-sec-list > div:last-child { border-bottom: 0; }
.lp2-sec-list b { display: block; font-size: 0.95rem; color: var(--color-primary-dark); }
.lp2-sec-list span { font-size: 0.87rem; color: var(--color-muted); }

/* dúvidas, com + / − */
.lp2-faq { max-width: 52rem; margin: 0 auto; }
.lp2-faq details {
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 0;
}
.lp2-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.2rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-primary-dark);
}
.lp2-faq summary::-webkit-details-marker { display: none; }
.lp2-faq summary::after {
  content: "+";
  color: var(--color-gold-deep, var(--color-accent));
  font-size: 1.4rem;
  line-height: 1;
  flex: none;
}
.lp2-faq details[open] summary::after { content: "−"; }
.lp2-faq details p { margin: 0.8rem 0 0; color: var(--color-muted); font-size: 0.92rem; }

/* chamada final */
.lp2-final {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-cream);
  border-radius: 1.4rem;
  padding: 3rem 2rem;
  text-align: center;
}
.lp2-final h2 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1.15;
  margin: 0 auto 0.8rem;
  max-width: 34ch;
  color: #fff;
}
.lp2-final p { margin: 0 auto 1.5rem; max-width: 46ch; color: rgba(246, 241, 231, 0.78); }
.lp2-final-cta { justify-content: center; }

/* ---------------- telas estreitas ---------------- */
@media (max-width: 860px) {
  .lp2-strip { grid-template-columns: 1fr 1fr; }
  .lp2-strip-item:nth-child(2) { border-right: 0; }
  .lp2-strip-item:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
  .lp2-problem,
  .lp2-mod,
  .lp2-shared-grid,
  .lp2-ai-grid,
  .lp2-diff-grid,
  .lp2-sec-box { grid-template-columns: 1fr; }
  .lp2-mod-flip .lp2-mod-copy,
  .lp2-mod-flip .lp2-screen { order: 0; }
  .lp2-steps { grid-template-columns: 1fr 1fr; }
  .lp2-heroart { transform: none; }
}
@media (max-width: 520px) {
  .lp2-strip { grid-template-columns: 1fr; }
  .lp2-strip-item { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .lp2-strip-item:last-child { border-bottom: 0; }
  .lp2-steps { grid-template-columns: 1fr; }
  .lp2-problem, .lp2-shared, .lp2-sec-box, .lp2-diff { padding: 1.4rem; }
  .lp2-quote { padding: 1.5rem; }
  .lp2-quote p { font-size: 1.25rem; }
  .lp2-final { padding: 2.2rem 1.3rem; }
  .lp2-portal-file { grid-template-columns: 34px 1fr 18px; }
}

/* Título e subtítulo de seção nascem centralizados (uso antigo). Nas seções de
   duas colunas da v2 eles ficam à ESQUERDA, junto da coluna a que pertencem. */
.lp2-problem .landing-section-title,
.lp2-shared-copy .landing-section-title,
.lp2-diff-grid .landing-section-title,
.lp2-sec-box .landing-section-title {
  text-align: left;
  font-size: 1.7rem;
  line-height: 1.15;
  margin-top: 0.4rem;
}
.lp2-problem .landing-section-title::after,
.lp2-shared-copy .landing-section-title::after,
.lp2-diff-grid .landing-section-title::after,
.lp2-sec-box .landing-section-title::after { margin-left: 0; margin-right: 0; }
.lp2-problem .landing-section-sub,
.lp2-shared-copy .landing-section-sub,
.lp2-diff-grid .landing-section-sub,
.lp2-sec-box .landing-section-sub { text-align: left; margin-left: 0; max-width: 46ch; }

/* O cartão da área do paciente acompanha o topo do texto, em vez de flutuar
   no meio de uma coluna muito mais alta. */
.lp2-shared-grid { align-items: start; }
.lp2-shared-visual { position: sticky; top: 1rem; }
@media (max-width: 860px) { .lp2-shared-visual { position: static; } }

/* Quadrinho do roteiro de puericultura: mostra que a faixa vem da IDADE do paciente,
   sem o médico procurar. Os grupos e itens são os do js/puericultura-checklist.js. */
.lp2-pueri {
  margin-top: 0.75rem;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 0.9rem 1rem;
}
.lp2-pueri-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.7rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border);
}
.lp2-pueri-top b { font-size: 0.92rem; color: var(--color-primary-dark); }
.lp2-pueri-auto {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-secondary);
  border-radius: var(--radius-pill);
  padding: 0.22rem 0.55rem;
  white-space: nowrap;
}
.lp2-pueri-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.lp2-pueri-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.55rem;
  align-items: start;
}
/* a caixinha marcada é desenhada no ::before, para não usar input de mentira na página */
.lp2-pueri-list li::before {
  content: "✓";
  grid-row: span 2;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  border-radius: 0.35rem;
  background: var(--color-secondary);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 700;
}
.lp2-pueri-g {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.lp2-pueri-i { font-size: 0.85rem; color: var(--color-text); grid-column: 2; }
.lp2-pueri-foot {
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 0.8rem;
  font-size: 0.7rem;
  color: var(--color-muted);
}
.lp2-pueri-foot strong { color: var(--color-primary); font-weight: 600; }

/* =====================================================================================
 * SUGESTÃO PELA CONSULTA (exames e encaminhamentos)
 *
 * A lista existe para a sugestão ser CONFERÍVEL: cada item traz o motivo citando a consulta.
 * Antes, o botão marcava caixas por palavra-chave e não dizia nada, então não havia como saber
 * se "Neurologia" foi marcada porque a mãe relatou regressão ou porque ela NEGOU convulsão.
 * ===================================================================================== */
.sug-msg { margin: .35rem 0 .6rem; }
.sug-msg .pr-msg { margin: .2rem 0 .4rem; }
.sug-lista {
  margin: .2rem 0 .4rem;
  padding-left: 1.1rem;
  font-size: .88rem;
  line-height: 1.5;
}
.sug-lista li { margin: .15rem 0; }
.sug-lista strong { font-weight: 600; }

/* ============================================================================
   OBSERVAÇÃO DE ATENÇÃO VISUAL (atencao-visual.html)

   A atividade e a calibração acontecem num canvas escuro de borda a borda da
   coluna: fundo claro em volta do estímulo roubaria o olhar da criança, que é
   exatamente o que a ferramenta mede. O restante veste a roupa do app.
   ============================================================================ */
.av-tela { max-width: 46rem; margin: 0 auto; }
.av-tela .panel { display: grid; gap: .8rem; }
.av-honestidade {
  margin: 0; padding: .8rem .95rem;
  background: oklch(96% 0.02 85); border-left: 4px solid oklch(70% 0.11 85);
  border-radius: .5rem; font-size: .92rem; line-height: 1.55;
}
.av-lista { display: grid; gap: .45rem; margin-top: .6rem; max-height: 21rem; overflow-y: auto; }
.av-paciente {
  text-align: left; padding: .7rem .9rem; font: inherit; cursor: pointer;
  background: var(--color-panel); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: .7rem;
}
.av-paciente:hover { border-color: var(--color-primary); }
.av-consentimento-itens { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; line-height: 1.5; }
.av-consentimento-caixa {
  display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  padding: .8rem .9rem; background: oklch(97% 0.012 160);
  border: 1px solid var(--color-border); border-radius: .7rem;
}
.av-consentimento-caixa input { margin-top: .2rem; width: 1.1rem; height: 1.1rem; flex: none; }
.av-preview-caixa { position: relative; border-radius: var(--radius); overflow: hidden; background: #0d2019; }
.av-preview-caixa video { display: block; width: 100%; max-height: 340px; object-fit: cover; transform: scaleX(-1); }
.av-rosto-selo {
  position: absolute; left: .8rem; bottom: .8rem;
  padding: .3rem .7rem; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff; font-size: .8rem;
}
.av-rosto-selo.av-rosto-ok { background: oklch(45% 0.09 155); }
.av-canvas { display: block; width: 100%; border-radius: var(--radius); background: #10241c; }
.av-instrucao { max-width: 46rem; margin: 0 auto .6rem; text-align: center; }
#av-tela-calibracao, #av-tela-atividade { max-width: 60rem; }
.av-atividade-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; }
.av-placar { display: grid; gap: .35rem; margin: .4rem 0; }
/* O título de cada bloco do placar carrega a BASE da porcentagem (tempo total × tempo em
   estímulo): sem ele o dono somou 49+51+35 e cobrou, com razão. */
.av-placar-titulo {
  margin: .9rem 0 .15rem; font-size: .82rem; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; color: var(--color-muted, #5a6b63);
}

/* ---- O relatório da observação (leitura + evolução + campos do médico) ---- */
.av-rel-doc { margin-top: 1rem; padding: 1.4rem 1.6rem; }
.av-rel-titulo { margin: 0 0 .2rem; font-size: 1.25rem; }
.av-rel-sub { margin: 0 0 .9rem; font-size: .85rem; color: var(--color-muted); }
.av-rel-ident { display: grid; gap: .3rem; margin: .5rem 0 1rem; }
.av-rel-ident-linha {
  display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem;
  border-bottom: 1px dashed var(--color-border); padding-bottom: .25rem;
}
.av-rel-doc h3 { margin: 1.1rem 0 .35rem; font-size: 1.02rem; }
.av-rel-base { margin: .5rem 0 .15rem; font-size: .82rem; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; color: var(--color-muted, #5a6b63); }
.av-rel-lista { margin: .3rem 0; padding-left: 1.2rem; }
.av-rel-lista li { margin-bottom: .45rem; line-height: 1.5; }
/* O ponto de atenção tem moldura própria: é a parte que pede correlação clínica. */
.av-rel-atencao {
  border: 1.5px solid #8a6400; border-radius: .6rem; background: #fdf3e3;
  padding: .6rem 1rem .8rem; margin: .8rem 0;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.av-rel-atencao h3 { margin: .2rem 0 .4rem; color: #8a6400; }
.av-rel-atencao p { margin: .3rem 0; line-height: 1.5; }
/* Hipótese e conduta são do médico: rótulo + pauta em branco para escrever à mão. */
.av-rel-medico { margin-top: 1rem; }
.av-rel-rotulo { margin: .8rem 0 .2rem; font-weight: 600; }
.av-rel-pauta {
  height: 4.2rem;
  background: repeating-linear-gradient(to bottom,
    transparent 0 1.35rem, var(--color-border) 1.35rem calc(1.35rem + 1px));
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.av-rel-refs { margin: .3rem 0; padding-left: 1.2rem; font-size: .8rem; color: var(--color-muted); }
.av-rel-refs li { margin-bottom: .3rem; }
@media print {
  .av-rel-doc h3, .av-rel-rotulo { break-after: avoid; page-break-after: avoid; }
  .av-rel-atencao, .av-placar-linha, .av-rel-pauta { break-inside: avoid; }
  .av-rel-lista li { orphans: 3; widows: 3; }
}
.av-placar-linha {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem .8rem; background: oklch(97% 0.012 160);
  border: 1px solid var(--color-border); border-radius: .6rem; font-size: .95rem;
}
.av-selo {
  display: inline-block; padding: .3rem .75rem; border-radius: 999px;
  background: oklch(96% 0.02 85); border: 1px solid oklch(80% 0.08 85);
  font-size: .82rem; font-weight: 600;
}
.av-selo-ok { background: oklch(94% 0.03 155); border-color: var(--color-primary); color: var(--color-primary-dark); }
.av-acoes { display: flex; gap: .6rem; flex-wrap: wrap; }
.av-msg-ok { color: var(--color-primary-dark); }
#av-calibracao-resultado { max-width: 46rem; margin: .8rem auto 0; display: grid; gap: .6rem; justify-items: start; }
.av-fotos-caixa { display: grid; gap: .5rem; padding: .9rem 1rem; background: oklch(97% 0.012 160); border: 1px solid var(--color-border); border-radius: .8rem; }
.av-fotos-caixa h3 { margin: 0; font-size: 1.02rem; }
.av-fotos-previa { display: flex; flex-wrap: wrap; gap: .45rem; }
.av-fotos-previa img { width: 72px; height: 72px; object-fit: cover; border-radius: .55rem; border: 1px solid var(--color-border); }

/* ---- Gasometria: distúrbio ácido-base e conduta ---- */
.gaso-grupo-titulo { margin: 1.1rem 0 .4rem; font-size: .95rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.gaso-campos { display: flex; flex-wrap: wrap; gap: .8rem; }
/* * A base de 130px é medida, e não estética: a 390px de largura o conteúdo do painel tem ~310px,
 * e com base de 150px mais o vão só cabia UM campo por linha, o que empurrava o resultado para
 * baixo de oito rolagens. Com 130px cabem dois, e os oito campos ocupam quatro linhas.
 */
.gaso-campos .auth-field { flex: 1 1 130px; margin: 0; }
.gaso-ref { display: block; margin-top: .2rem; font-size: .74rem; color: var(--color-muted); }
.gaso-progresso { margin: .7rem 0 0; font-size: .85rem; color: var(--color-muted); }
.gaso-progresso-ok { color: var(--color-primary); font-weight: 600; }
/*
 * NÃO usa .form-toolbar, e a diferença importa: aquela classe é `position: sticky; bottom: 0`,
 * feita para formulário longo cujo botão de enviar precisa continuar alcançável. Aqui não há o
 * que enviar (o resultado sai a cada tecla), e o sticky se sobrepunha ao campo de albumina,
 * escondendo um campo inteiro. Medido em print de 390px antes de existir esta regra.
 */
.gaso-acoes { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.gaso-auto { font-size: .82rem; }
.gaso-vazio { text-align: center; }

.gaso-placar { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; border-radius: .7rem; background: var(--color-cream); margin-bottom: .9rem; }
.gaso-placar-rot { font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--color-muted); }
.gaso-placar-val { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--color-primary-dark); }
.gaso-placar-sub { font-size: .84rem; color: var(--color-muted); }
.gaso-ph-acidemia { background: color-mix(in oklch, var(--color-high) 12%, white); }
.gaso-ph-alcalemia { background: color-mix(in oklch, var(--color-accent) 14%, white); }
.gaso-ph-normal { background: color-mix(in oklch, var(--color-primary) 12%, white); }

.gaso-disturbio { border-left: 6px solid var(--color-border); background: var(--color-cream); border-radius: .6rem; padding: .7rem .9rem; margin-bottom: .7rem; }
.gaso-disturbio-primario { border-left-color: var(--color-primary); }
.gaso-disturbio-topo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gaso-disturbio-ordem { font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--color-muted); }
.gaso-tag { font-size: .7rem; font-weight: 600; padding: .1rem .5rem; border-radius: var(--radius-pill); background: color-mix(in oklch, var(--color-primary) 16%, white); color: var(--color-primary-dark); }
.gaso-tag-assoc { background: color-mix(in oklch, var(--color-accent) 18%, white); }
.gaso-disturbio h3 { margin: .3rem 0 .2rem; font-size: 1.02rem; }
.gaso-disturbio p { margin: 0 0 .55rem; font-size: .9rem; }
.gaso-ver { padding: .35rem .8rem; font-size: .85rem; }
.gaso-sem-disturbio { margin: 0; font-size: .95rem; }

.gaso-bloco { margin-top: 1rem; }
.gaso-bloco h3 { margin: 0 0 .4rem; font-size: 1rem; }
.gaso-bloco p { margin: .3rem 0; font-size: .9rem; }
.gaso-formula { color: var(--color-muted); font-size: .82rem !important; }
.gaso-numeros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.gaso-num { flex: 1 1 130px; background: var(--color-cream); border-radius: .6rem; padding: .5rem .7rem; }
.gaso-num-rot { display: block; font-size: .74rem; color: var(--color-muted); }
.gaso-num-val { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--color-primary-dark); }

.gaso-avisos { margin-bottom: .8rem; }
.gaso-aviso { margin: 0 0 .4rem; padding: .55rem .8rem; border-radius: .6rem; background: color-mix(in oklch, var(--color-high) 10%, white); color: color-mix(in oklch, var(--color-high) 72%, black); font-size: .87rem; }

.gaso-conduta-card { border-left: 6px solid var(--color-primary); }
.gaso-conduta-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.gaso-conduta-topo h2 { margin: 0; font-size: 1.15rem; }
.gaso-objetivo { margin: .7rem 0; padding: .6rem .85rem; border-radius: .6rem; background: color-mix(in oklch, var(--color-primary) 10%, white); }
.gaso-objetivo-rot { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--color-muted); }
.gaso-objetivo p { margin: .2rem 0 0; font-size: .92rem; }
.gaso-conduta-card h3 { margin: 1rem 0 .4rem; font-size: 1rem; }
.gaso-lista { margin: .3rem 0; padding-left: 1.1rem; }
.gaso-lista li { margin: .3rem 0; font-size: .9rem; }
.gaso-causa { border-top: 1px solid var(--color-border); padding: .6rem 0; }
.gaso-causa summary { cursor: pointer; list-style-position: outside; }
.gaso-causa summary::marker { color: var(--color-muted); }
.gaso-causa-nome { display: block; font-weight: 600; font-size: .95rem; color: var(--color-primary-dark); }
.gaso-causa-pista { display: block; font-size: .84rem; color: var(--color-muted); }
.gaso-causa p { margin: .5rem 0 0; font-size: .89rem; }
.gaso-causa[open] { background: var(--color-cream); border-radius: .6rem; padding: .6rem .8rem; }
.gaso-alertas { margin-top: 1rem; padding: .7rem .9rem; border-radius: .6rem; background: color-mix(in oklch, var(--color-accent) 12%, white); }
.gaso-alertas h3 { margin: 0 0 .3rem; }
.gaso-ferramentas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.gaso-ferramenta { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: .85rem; text-decoration: none; color: var(--color-primary-dark); background: var(--color-panel); }
.gaso-ferramenta:hover { border-color: var(--color-primary); background: var(--color-secondary); }
.gaso-fontes { margin-top: 1rem; font-size: .78rem; }
.gaso-ref-grid p { font-size: .88rem; }