/*
  CSS da aplicação, sem Tailwind. O bundle standalone do Shadleaf inclui o reset (preflight) do Tailwind, então
  títulos e listas ficam sem estilo até a aplicação estilizá-los. Os componentes são do Shadleaf; aqui só a página.
*/

/*
  Paleta "mel": creme e amarelo-mel quentes no lugar do cinza neutro do vega, para um consultório acolhedor e não
  corporativo. São os tokens do shadcn (o Shadleaf desenha tudo com eles e os deixa numa cascade layer, então estes
  valem). O amarelo é claro demais para texto branco: botões primários usam texto marrom-escuro (contraste > 7:1), e
  texto de destaque usa --brand-ink, nunca --primary.
*/
:root {
  --radius: 0.75rem;
  --background: oklch(0.985 0.012 85);
  --foreground: oklch(0.27 0.035 60);
  --card: oklch(0.995 0.008 85);
  --card-foreground: oklch(0.27 0.035 60);
  --popover: oklch(0.995 0.008 85);
  --popover-foreground: oklch(0.27 0.035 60);
  --primary: oklch(0.83 0.15 82);
  --primary-foreground: oklch(0.27 0.05 60);
  --secondary: oklch(0.95 0.035 88);
  --secondary-foreground: oklch(0.32 0.05 65);
  --muted: oklch(0.955 0.02 85);
  --muted-foreground: oklch(0.5 0.03 65);
  --accent: oklch(0.93 0.06 90);
  --accent-foreground: oklch(0.3 0.05 65);
  --destructive: oklch(0.56 0.19 32);
  --border: oklch(0.9 0.025 85);
  --input: oklch(0.88 0.03 85);
  --ring: oklch(0.76 0.14 80);
  --chart-1: oklch(0.78 0.15 80);
  --chart-2: oklch(0.62 0.09 150);
  --chart-3: oklch(0.6 0.15 40);
  --chart-4: oklch(0.6 0.08 230);
  --chart-5: oklch(0.55 0.1 330);
  --sidebar: oklch(0.965 0.025 86);
  --sidebar-foreground: oklch(0.27 0.035 60);
  --sidebar-primary: oklch(0.83 0.15 82);
  --sidebar-primary-foreground: oklch(0.27 0.05 60);
  --sidebar-accent: oklch(0.92 0.06 88);
  --sidebar-accent-foreground: oklch(0.27 0.05 60);
  --sidebar-border: oklch(0.89 0.03 85);
  --sidebar-ring: oklch(0.76 0.14 80);
  /* Texto e traços de destaque: o mel escurecido, legível sobre o creme. */
  --brand-ink: oklch(0.5 0.11 70);
  --success-ink: oklch(0.5 0.1 150);
}

.dark {
  --background: oklch(0.2 0.02 60);
  --foreground: oklch(0.95 0.015 85);
  --card: oklch(0.24 0.022 60);
  --card-foreground: oklch(0.95 0.015 85);
  --popover: oklch(0.24 0.022 60);
  --popover-foreground: oklch(0.95 0.015 85);
  --primary: oklch(0.84 0.14 84);
  --primary-foreground: oklch(0.24 0.04 60);
  --secondary: oklch(0.3 0.03 65);
  --secondary-foreground: oklch(0.95 0.015 85);
  --muted: oklch(0.29 0.025 62);
  --muted-foreground: oklch(0.74 0.03 80);
  --accent: oklch(0.33 0.045 72);
  --accent-foreground: oklch(0.95 0.015 85);
  --destructive: oklch(0.68 0.17 30);
  --border: oklch(0.92 0.05 85 / 0.12);
  --input: oklch(0.92 0.05 85 / 0.16);
  --ring: oklch(0.7 0.12 80);
  --chart-1: oklch(0.82 0.14 82);
  --chart-2: oklch(0.7 0.1 150);
  --chart-3: oklch(0.68 0.14 40);
  --chart-4: oklch(0.68 0.08 230);
  --chart-5: oklch(0.65 0.1 330);
  --sidebar: oklch(0.22 0.022 60);
  --sidebar-foreground: oklch(0.95 0.015 85);
  --sidebar-primary: oklch(0.84 0.14 84);
  --sidebar-primary-foreground: oklch(0.24 0.04 60);
  --sidebar-accent: oklch(0.31 0.04 70);
  --sidebar-accent-foreground: oklch(0.95 0.015 85);
  --sidebar-border: oklch(0.92 0.05 85 / 0.1);
  --sidebar-ring: oklch(0.7 0.12 80);
  --brand-ink: oklch(0.84 0.13 84);
  --success-ink: oklch(0.78 0.11 150);
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

h1 { font-size: 1.875rem; font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 600; margin: 2rem 0 0.75rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
p { margin: 0 0 0.75rem; }

.page { padding: 0 1rem 1rem; }
.page > h1 { margin-block-end: 1rem; }

.app-logo { display: block; flex-shrink: 0; inline-size: 2rem; block-size: 2rem; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.muted { color: var(--muted-foreground); }

/* Barra de ações no topo de uma página (botões à direita). */
.page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-block-end: 1rem; }
.page-actions form { display: contents; }
.page-actions-spacer { flex: 1; }

/* Busca e filtros acima de uma tabela. */
.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 1rem; }
.toolbar-search { flex: 1 1 16rem; }
.toolbar-filter { flex: 0 0 10rem; }
.table-link { font-weight: 500; color: inherit; text-decoration: none; }
.table-link:hover { text-decoration: underline; }
.table-row-clickable, .table-row-clickable > td { cursor: pointer; }
.table-row-clickable:hover .table-link { text-decoration: underline; }
.table-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block-start: 1rem;
}
.table-footer-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.table-footer .pagination { inline-size: auto; margin: 0; }
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Formulários de página inteira: seções (field-set) em coluna, campos curtos em grade. */
.form-page { display: grid; gap: 2rem; max-inline-size: 48rem; }
.form-grid { display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }

/* Ficha: cartões lado a lado, viram coluna no celular. */
.detail-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.detail-wide { grid-column: 1 / -1; }
.details { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; margin: 0; }
.details dt { color: var(--muted-foreground); }
.details dd { margin: 0; }
.detail-note { margin-block-start: 1.5rem; }
.pre-line { white-space: pre-line; margin: 0; }

/* Agenda da semana: 7 colunas no desktop, dias empilhados no celular. */
.agenda-pending { margin-block-end: 1rem; }
.agenda-pending a { color: inherit; font-weight: 500; text-decoration: underline; }
.appointment-date { font-size: 0.75rem; color: var(--muted-foreground); text-transform: capitalize; }
.agenda-toolbar { justify-content: flex-start; }
.week-nav { display: flex; align-items: center; gap: 0.5rem; }
.week-title { margin: 0 0 0 0.5rem; font-size: 1rem; font-weight: 600; }
.week { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 64rem) {
  .week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.week-day { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem; min-block-size: 6rem; }
.week-day.is-today { border-color: var(--brand-ink); box-shadow: 0 0 0 1px var(--brand-ink); background: color-mix(in oklch, var(--primary) 10%, transparent); }
.week-day-header { display: flex; align-items: center; gap: 0.375rem; margin-block-end: 0.5rem; }
.week-day-name { font-weight: 600; text-transform: capitalize; }
.week-day-date { color: var(--muted-foreground); }
.week-day-add { margin-inline-start: auto; }
.week-day-list, .appointment-list { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.week-day-empty { margin: 0; font-size: 0.875rem; }

/* Sessão clicável (fragments :: appointment-link). */
.appointment {
  display: grid; gap: 0.125rem; padding: 0.375rem 0.5rem; border-radius: calc(var(--radius) - 2px);
  background: var(--muted); color: inherit; text-decoration: none; font-size: 0.875rem;
  border-inline-start: 3px solid var(--primary);
}
.appointment:hover { background: var(--accent); }
.appointment[data-status="NO_SHOW"] { border-inline-start-color: var(--destructive); }
.appointment[data-status="CANCELLED_BY_PATIENT"], .appointment[data-status="CANCELLED_BY_THERAPIST"],
.appointment[data-status="RESCHEDULED"] { border-inline-start-color: var(--border); opacity: 0.7; }
.appointment[data-status="CANCELLED_BY_PATIENT"] .appointment-patient,
.appointment[data-status="CANCELLED_BY_THERAPIST"] .appointment-patient,
.appointment[data-status="RESCHEDULED"] .appointment-patient { text-decoration: line-through; }
.appointment[data-status="COMPLETED"] { border-inline-start-color: var(--muted-foreground); }
.appointment-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.appointment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; color: var(--muted-foreground); }
.appointment-meta svg { inline-size: 0.875rem; block-size: 0.875rem; }

/* Detalhes e ações da sessão (dialog e página). */
.appointment-details { margin-block-end: 1rem; }
.appointment-actions-title { margin: 0 0 0.5rem; font-size: 0.875rem; }
.appointment-outcomes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.appointment-outcomes form, .appointment-links form { display: contents; }
.appointment-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1rem; }
.appointment-page { max-inline-size: 40rem; }

/* Sessões sem lançamento. */
.pending-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; max-inline-size: 48rem; }
.pending-item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius);
}
.pending-info { display: grid; }
.pending-actions { display: flex; gap: 0.5rem; }
.pending-actions form { display: contents; }
.empty-state { font-size: 1.125rem; }

/* Agenda na ficha do paciente. */
.patient-schedule { margin-block-start: 2rem; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.section-header h2 { margin: 0; }
.series-list { display: grid; gap: 0.5rem; margin: 1rem 0; padding: 0; list-style: none; }
.series-item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius);
}
.series-item svg {
  display: inline-block; inline-size: 1rem; block-size: 1rem; vertical-align: -0.125rem; margin-inline-end: 0.25rem;
}
.series-actions { display: flex; gap: 0.25rem; }
.series-actions form { display: contents; }

/* Página pública de confirmação. */
.confirmation-details { margin-block-end: 1.25rem; }
.confirmation-answer { margin-block-end: 1rem; }
.confirmation-actions { display: grid; gap: 0.5rem; }

/* Telas de autenticação (layout/auth.html): um cartão centralizado. */
.auth-page {
  display: grid; justify-items: center; align-content: start; gap: 1.5rem;
  min-block-size: 100dvh; padding: 3rem 1rem;
}
.auth-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; color: inherit; text-decoration: none; }
.auth-card { inline-size: 100%; max-inline-size: 26rem; }
.auth-submit { inline-size: 100%; }
.auth-notice { margin-block-end: 1rem; }
.auth-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }

/*
  Indicador do htmx escrito aqui porque o htmx-config desliga os estilos que ele injetaria (um <style>, que uma CSP
  estrita bloqueia). Aparece só após 200 ms, para respostas rápidas não piscarem o spinner.
*/
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: revert-layer;
  animation: htmx-indicator-in 150ms ease-in 200ms backwards;
}
@keyframes htmx-indicator-in {
  from { display: none; opacity: 0; }
}

/*
  Barra de navegação (js/nav-progress.js), nas cores do logo. Aparece 150 ms depois do clique e avança devagar até
  ~85%; ao chegar a resposta, completa e some. No body::before porque o <body> continua o mesmo na troca do boost.
*/
body::before {
  content: "";
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  block-size: 3px;
  background: linear-gradient(90deg, #FBE38E, #F2C94C, #E09938, #B86814);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}
.is-navigating body::before {
  opacity: 1;
  transform: scaleX(0.85);
  transition: opacity 0s 150ms, transform 8s cubic-bezier(0.1, 0.7, 0.2, 1) 150ms;
}
.nav-done body::before {
  transform: scaleX(1);
  transition: transform 150ms ease-out, opacity 200ms ease-in 150ms;
}
@media (prefers-reduced-motion: reduce) {
  .is-navigating body::before { transform: scaleX(1); transition: opacity 0s 150ms; }
  .nav-done body::before { transition: opacity 200ms; }
}

/* Confirmação do paciente nos cartões e no dialog. */
.confirmation-confirmed { color: var(--success-ink); }
.confirmation-declined { color: var(--destructive); }
.declined-list { margin: 0.25rem 0 0.5rem; padding-inline-start: 1.25rem; list-style: disc; }
.declined-list a { color: inherit; text-decoration: underline; }

/* Financeiro */
.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin-block-end: 1.5rem; }
.stat-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-value.is-overdue { color: var(--destructive); }
.stat-link { color: inherit; font-weight: 500; text-decoration: underline; }
.charge-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
.charge-actions form { display: contents; }
.month-nav { display: flex; align-items: center; gap: 0.5rem; margin-block: 1rem; }
.month-title { margin: 0; font-size: 1rem; font-weight: 600; text-transform: capitalize; }
.amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.invoice-list { display: grid; gap: 1rem; max-inline-size: 48rem; }
.invoice-items { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.invoice-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.invoice-item-label { flex: 1 1 14rem; display: flex; align-items: center; gap: 0.5rem; }
.invoice-total { font-weight: 600; }
.payment-charge { margin-block-end: 1rem; }
.patient-billing { margin-block-start: 2rem; }

/* Painel do mês e alertas */
.stat-value.is-positive { color: var(--success-ink); }
.alert-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; max-inline-size: 56rem; }
.alert-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius);
}
.alert-item[data-alert-type="OVERDUE_CHARGE"], .alert-item[data-alert-type="CONSECUTIVE_NO_SHOWS"],
.alert-item[data-alert-type="RECEIPT_TO_CANCEL"] {
  border-inline-start: 3px solid var(--destructive);
}
.alert-message { flex: 1 1 16rem; min-inline-size: 0; }
.alert-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-inline-start: auto; }
.alert-actions form { display: contents; }
.alert-empty { display: none; padding: 0.5rem 0; }
.alert-list > .alert-empty:only-child { display: block; }
.sidebar-menu-badge[hidden] { display: none; }
.patient-alerts { margin-block-end: 1.5rem; }
.patient-alerts .alert-list { max-inline-size: none; }
.period-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-block-end: 1rem; }
.stat-grid.is-compact { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.stat-grid.is-compact .stat-value { font-size: 1.25rem; }
/* Seis cards: duas linhas de três em tela larga, em vez de cinco + um sobrando. */
@media (min-width: 64rem) { .stat-grid.is-six { grid-template-columns: repeat(3, 1fr); } }
.list-alert-icon { display: inline-block; color: var(--brand-ink); vertical-align: -0.2rem; margin-inline-start: 0.375rem; inline-size: 1rem; block-size: 1rem; }
.nowrap { white-space: nowrap; }
.patient-indicators { margin-block-start: 2rem; }

/* Assinatura e onboarding */
.trial-note { font-size: 0.8125rem; color: var(--muted-foreground); text-decoration: none; white-space: nowrap; margin-inline-end: 0.5rem; }
.trial-note:hover { color: var(--foreground); text-decoration: underline; }
.subscription-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 1rem 1rem; padding: 0.625rem 0.875rem;
  border: 1px solid var(--destructive); border-inline-start-width: 4px; border-radius: var(--radius);
  background: color-mix(in oklch, var(--destructive) 8%, var(--card));
}
.subscription-banner > svg { flex-shrink: 0; inline-size: 1.125rem; block-size: 1.125rem; color: var(--destructive); }
.subscription-banner > span { flex: 1 1 18rem; }
.subscription-page { display: grid; gap: 1rem; max-inline-size: 40rem; }
.subscription-alert { margin-block-start: 1rem; }
.subscription-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.subscription-actions form { display: contents; }
.plan-points { margin: 0; padding-inline-start: 1.25rem; list-style: disc; font-size: 0.875rem; display: grid; gap: 0.25rem; }
.reminder-disabled { display: grid; gap: 0.25rem; }
.reminder-disabled a { text-decoration: underline; }

.onboarding-card { inline-size: 100%; max-inline-size: 34rem; }
.onboarding-progress { display: grid; gap: 0.5rem; margin-block-end: 0.5rem; }
.onboarding-step-label { margin: 0; font-size: 0.8125rem; font-weight: 500; }
.onboarding-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.onboarding-steps li { block-size: 0.375rem; border-radius: 999px; background: var(--border); }
.onboarding-steps li.is-done { background: var(--brand-ink); }
.onboarding-form { display: grid; gap: 1.25rem; }
.onboarding-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-block-start: 0.5rem; }
.onboarding-subtitle { margin-block-start: 0; }
.plan-price { font-size: 1.75rem; margin-block-end: 1rem; }
.plan-price .muted { font-size: 1rem; }
.plan-list { display: grid; gap: 0.625rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.plan-list li { display: flex; align-items: flex-start; gap: 0.625rem; }
.plan-list svg { flex-shrink: 0; margin-block-start: 0.125rem; inline-size: 1.125rem; block-size: 1.125rem; color: var(--success-ink); }
.first-steps { display: grid; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.first-steps li {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border);
  border-radius: var(--radius);
}
.first-steps li > svg { flex-shrink: 0; inline-size: 1.25rem; block-size: 1.25rem; color: var(--brand-ink); }
.first-steps li > div { flex: 1; display: grid; min-inline-size: 0; }
.first-steps li > div span { font-size: 0.875rem; }
.details + .onboarding-form { margin-block-start: 1.25rem; }

/* Auditoria: histórico da sessão, atividade do paciente e página de atividades. */
.appointment-history { margin-block-start: 1.25rem; padding-block-start: 1rem; border-block-start: 1px solid var(--border); }
.history-list { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.appointment-history .history-list { max-block-size: 10rem; overflow-y: auto; }
.patient-activity { margin-block-start: 2rem; }
.patient-activity .history-list { margin-block-start: 0.75rem; }
.activity-intro { margin-block-start: 0; }
.toolbar-date { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.toolbar { align-items: center; }

/* Dados do consultório (configurações): registro de atividades, exportação e textos legais. */
.settings-data { margin-block-start: 2rem; }
.settings-links { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.settings-links li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.settings-links li > div { display: grid; gap: 0.125rem; min-inline-size: 0; }
.settings-links li > div .muted { font-size: 0.875rem; }
.settings-legal-links { white-space: nowrap; font-size: 0.875rem; }
.settings-legal-links a { text-decoration: underline; }

/* Termos de uso e Política de privacidade (layout de auth, em cartão mais largo). */
.legal-card { max-inline-size: 46rem; }
.legal-draft { margin-block-end: 1.25rem; }
.legal-doc h2 { margin: 1.5rem 0 0.5rem; font-size: 1.0625rem; }
.legal-doc p { margin: 0 0 0.75rem; line-height: 1.6; }
.legal-doc ul, .legal-summary { display: grid; gap: 0.375rem; margin: 0 0 0.75rem; padding-inline-start: 1.25rem; list-style: disc; line-height: 1.55; }
.legal-doc a, .legal-card p a { text-decoration: underline; color: var(--brand-ink); }
.legal-summary { margin-block-end: 1rem; }
.auth-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--muted-foreground); }
.auth-footer a { color: inherit; text-decoration: underline; }
.terms-label { display: block; font-weight: 400; line-height: 1.5; }
.terms-label a { text-decoration: underline; color: var(--brand-ink); }
.legal-nav { color: var(--brand-ink); text-decoration: underline; font-size: 0.875rem; }
.legal-nav-button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.875rem; }

/* Campo obrigatório: asterisco depois do rótulo, a partir do atributo required do controle (input, select, textarea). */
.field:has(:required) .field-label::after { content: "*"; color: var(--destructive); }
.required-legend { font-size: 0.8125rem; margin: 0; }
.required-mark { color: var(--destructive); }
.projection-notice { margin-block-end: 1rem; max-inline-size: 56rem; }

/* Recibos do Receita Saúde (billing/receita-saude.html). */
.receipts-intro { max-inline-size: 48rem; }
.receipts-notice { margin-block-end: 1rem; max-inline-size: 48rem; }
.receipts-notice a { text-decoration: underline; }
.receipts-actions { justify-content: flex-start; }
.receipts-howto { max-inline-size: 48rem; margin-block-end: 1.5rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); }
.receipts-howto summary { cursor: pointer; font-weight: 500; }
.receipts-howto ol { margin: 0.75rem 0; padding-inline-start: 1.25rem; list-style: decimal; display: grid; gap: 0.375rem; }
.receipts-howto a { text-decoration: underline; color: var(--brand-ink); }
.receipts-howto p { margin: 0; font-size: 0.875rem; }
.receipts-missing, .receipts-cancel { margin-block-end: 1.5rem; }
.receipts-missing h2, .receipts-cancel h2 { margin-block-start: 0; }
.receipt-description { display: block; font-size: 0.8125rem; }
#receipt-payer a { text-decoration: underline; }
.receipts-page .month-title { text-transform: none; }