/* Bella V2 — Porta SAÚDE (sobre fundo azul).
 * Visual aprovado: prototype-bella-portas-tabs.html.
 */

/* CTAs no topo da sub-tab — pills/outlines naturais, sem stretch */
.doencas-ctas {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  align-items: center;
}

/* Resumo de busca (filtro ativo) */
.busca-resumo {
  font-size: 12px;
  color: rgba(255,250,235,0.75);
  margin: 0 0 12px;
  padding: 8px 12px;
  background: rgba(255,250,235,0.10);
  border-radius: var(--radius-card);
}
.busca-resumo strong { color: var(--cream); }

/* ─── Empty state Bella (Cuidando sem episódio ativo) ─── */
.ep-empty {
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-card);
  padding: 24px 18px 20px;
  text-align: center;
  margin-bottom: 12px;
  color: var(--cream);
}
.ep-empty-icon {
  margin-bottom: 12px;
  color: rgba(255,255,255,0.78);
  display: flex;
  justify-content: center;
}
.ep-empty-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 8px;
}
.ep-empty-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.82);
  line-height: 1.45;
  margin-bottom: 12px;
}
.ep-empty-tip {
  font-size: 13.5px;
  color: rgba(255,255,255,0.68);
  font-style: italic;
  line-height: 1.45;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: rgba(255,250,235,0.08);
  border-radius: 8px;
}
.ep-empty-cta {
  display: inline-block;
  padding: 11px 22px;
  font-size: 14px;
}

/* ─── Card episódio ATIVO ─── */
.doenca-ativa-card {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.doenca-ativa-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--cream);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.doenca-ativa-meta {
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  margin-top: 5px;
}
.doenca-ativa-notas {
  margin-top: 12px;
  padding: 11px 14px;
  background: rgba(255,250,235,0.10);
  border-left: 3px solid rgba(255,250,235,0.4);
  border-radius: 6px;
  font-size: 14px;
  color: rgba(255,255,255,0.88);
  font-style: italic;
  line-height: 1.5;
}

.ep-badge-internacao {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,180,140,0.22);
  color: #FFD9C2;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}
.ep-internacao-linha {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255,180,140,0.10);
  border-left: 3px solid rgba(255,180,140,0.6);
  border-radius: 6px;
  font-size: 11.5px;
  color: #FFD9C2;
  line-height: 1.45;
}

/* Chip buttons (6 ações no topo do card ativo) */
.doenca-ativa-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.doenca-chip-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  background: rgba(255,250,235,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  color: var(--cream);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.08s, background 0.15s;
  min-height: 64px;
}
.doenca-chip-btn:active { transform: scale(0.96); background: rgba(255,250,235,0.20); }
.doenca-chip-btn .bella-icon {
  opacity: 0.92;
}
.doenca-chip-lbl { font-size: 12px; line-height: 1.2; }

.doenca-share-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.doenca-share-row > .sc-cta,
.doenca-share-row > .sc-cta-outline {
  flex: 1;
  font-size: 13px;
  padding: 10px 14px;
}

/* ─── Timeline de eventos ─── */
.doenca-timeline {
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 4px;
}
.dev-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.dev-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,250,235,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}
.dev-card {
  flex: 1;
  min-width: 0;
  background: rgba(255,250,235,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--cream);
}
.dev-card-time {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 3px;
}
.dev-card-title {
  font-size: 15px;
  font-weight: 600;
}
.dev-card-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  margin-top: 2px;
}
.dev-card-febre {
  background: rgba(217,65,65,0.22);
  border-color: rgba(217,65,65,0.5);
}
/* Separador de dia na timeline de eventos */
.dev-day-sep {
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 1px 8px;
  align-self: flex-start;
  margin: 2px 0;
}
/* Evento clicável (editar/excluir) + miniatura da foto na timeline */
.dev-card-clickable {
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.dev-card-clickable:active { transform: scale(0.985); }
.dev-card-thumb {
  display: block;
  width: 100%;
  max-width: 160px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  margin-top: 8px;
  cursor: zoom-in;
  border: 1px solid rgba(255,255,255,0.18);
}
.enc-ev-clickable { cursor: pointer; }
.enc-ev-clickable:active { opacity: 0.7; }
.enc-ev-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  cursor: zoom-in;
  border: 1px solid rgba(255,255,255,0.18);
}
.ep-timeline-empty {
  text-align: center;
  padding: 16px;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-style: italic;
}

/* ─── Botão Novo Monitoramento (sage CTA grande) ─── */
.cuidando-novo-monit {
  display: block;
  width: 100%;
  margin: 12px 0 8px;
  padding: 13px 16px;
  background: rgba(255,250,235,0.12);
  border: 1.5px dashed rgba(255,255,255,0.30);
  border-radius: 10px;
  color: var(--cream);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 46px;
}
.cuidando-novo-monit:active { transform: scale(0.985); }

/* ─── Card de monitoramento ─── */
.monit-card {
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.monit-card-header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.monit-card-titulo {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.15;
}
.monit-card-meta {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin-top: 3px;
}
.monit-card-chip {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(255,250,235,0.18);
  color: var(--cream);
  font-size: 12px;
  font-weight: 600;
}

.monit-empty-galeria {
  padding: 14px 12px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  background: rgba(255,250,235,0.06);
  border-radius: 8px;
  font-style: italic;
}
.monit-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  margin: 4px 0 6px;
}
.monit-foto {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(0,0,0,0.18);
}
.monit-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.monit-foto-data {
  position: absolute;
  left: 4px; bottom: 4px;
  padding: 1px 6px;
  background: rgba(0,0,0,0.55);
  color: var(--cream);
  font-size: 9px;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.4px;
}
.monit-foto-add {
  aspect-ratio: 1;
  border: 1.5px dashed rgba(255,255,255,0.32);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(255,255,255,0.78);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
  gap: 2px;
}
.monit-foto-add:active { transform: scale(0.97); }

.monit-card-acoes {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.monit-card-acoes > button {
  flex: 1;
  min-width: 80px;
  font-size: 13px;
  padding: 9px 12px;
}
.cuidando-danger {
  color: rgba(255,180,180,0.85);
  border: 1px solid rgba(255,180,180,0.35);
}

/* ─── Seção "O que [nome] tem" — alergias + condições crônicas ───
 * Renderiza sobre o fundo scrapbook (cream). Cards com tape terracota. */
.cuidando-condicoes {
  margin-bottom: 18px;
}
.cuidando-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 12px;
}
.cuidando-sec-titulo {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--foreground);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cuidando-sec-titulo svg { color: var(--sage); flex-shrink: 0; }
.saude-screen .cuidando-sec-add { flex-shrink: 0; padding: 7px 12px !important; font-size: 12px !important; }

.cuidando-cond-empty {
  background: var(--card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
  box-shadow: var(--bella-shadow-card);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.cuidando-cond-empty strong { color: var(--foreground); font-style: normal; }

.cuidando-condicao-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius);
  box-shadow: var(--bella-shadow-card);
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease;
}
.cuidando-condicao-card:active { transform: scale(0.995); }
.cuidando-condicao-card.resolvida {
  opacity: 0.62;
  border-left-color: var(--sage);
}
.cuidando-condicao-icone {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--terracotta) 14%, var(--card));
  color: var(--terracotta);
}
.cuidando-condicao-card.resolvida .cuidando-condicao-icone {
  background: color-mix(in oklab, var(--sage) 16%, var(--card));
  color: var(--sage);
}
.cuidando-condicao-main { flex: 1; min-width: 0; }
.cuidando-condicao-titulo {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.25;
}
.cuidando-condicao-meta {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 3px;
  line-height: 1.4;
}
.cond-sev-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: color-mix(in oklab, var(--peach) 30%, var(--card));
  color: oklch(0.35 0.08 35);
}
.cond-sev-badge.sev-grave {
  background: color-mix(in oklab, var(--destructive) 16%, var(--card));
  color: var(--destructive);
}
.cuidando-condicao-link {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--terracotta);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cuidando-condicao-resolvida-info {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--muted-foreground);
  line-height: 1.4;
}

.cuidando-cond-passado {
  margin-top: 4px;
}
.cuidando-cond-passado > summary {
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--muted-foreground);
  padding: 6px 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cuidando-cond-passado > summary::-webkit-details-marker { display: none; }
.cuidando-cond-chevron {
  font-size: 18px;
  transition: transform 0.2s ease;
}
.cuidando-cond-passado[open] .cuidando-cond-chevron { transform: rotate(90deg); }
.cuidando-cond-passado-body { margin-top: 8px; }

/* ─── Bloco de resolução dentro do modal de condição (corpo, fora de .saude-screen) ───
 * Estilo próprio: os .btn/.btn-ghost só têm estilo em .v2-modal-actions (rodapé).
 * Sem isto o botão renderiza transparente/sem borda e some da vista. */
.cond-resolucao { margin-top: 2px; }
.cond-resolucao-divider {
  height: 1px;
  background: rgba(42,26,14,0.12);
  margin: 4px 0 12px;
}
.cond-resolucao-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(42,26,14,0.6);
  margin-bottom: 8px;
}
.cond-resolucao-toggle {
  width: 100%;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(42,26,14,0.20);
  background: rgba(42,26,14,0.04);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cond-resolucao-toggle:active { transform: scale(0.985); }
.cond-resolucao-toggle.is-reabrir {
  border-color: rgba(45,106,79,0.45);
  background: rgba(45,106,79,0.10);
  color: #2D6A4F;
}
/* :not([hidden]) — senão o display:flex vence o atributo `hidden` e o form
 * de resolução aparece desde o início (deve ficar oculto até clicar no toggle). */
[data-resolucao-form]:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}

/* ─── Episódios encerrados (collapsable via <details>) ─── */
.doenca-encerrada {
  background: rgba(255,250,235,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-card);
  margin-bottom: 8px;
  overflow: hidden;
}
.doenca-encerrada[open] { background: rgba(255,250,235,0.12); }
.doenca-encerrada-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.doenca-encerrada-summary::-webkit-details-marker { display: none; }
.doenca-encerrada-info { flex: 1; min-width: 0; color: var(--cream); }
.doenca-encerrada-title {
  font-size: 15px;
  font-weight: 600;
}
.doenca-encerrada-meta {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-top: 3px;
}
.doenca-encerrada-chevron {
  font-size: 22px;
  color: rgba(255,255,255,0.55);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.doenca-encerrada[open] .doenca-encerrada-chevron {
  transform: rotate(90deg);
}
.doenca-encerrada-body {
  padding: 0 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.enc-ev-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.enc-ev-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,250,235,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}
.enc-ev-main { flex: 1; min-width: 0; color: var(--cream); }
.enc-ev-title {
  font-size: 14px;
  font-weight: 600;
}
.enc-ev-sub {
  color: rgba(255,255,255,0.7);
  font-weight: 400;
}
.enc-ev-time {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
}
.enc-ev-empty {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  font-style: italic;
}
.doenca-encerrada-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.doenca-encerrada-actions > button {
  flex: 1;
  font-size: 13px;
  padding: 9px 12px;
}
.doenca-encerrada-excluir {
  margin-top: 4px;
  text-align: right;
}

/* Busca */
.busca-wrap {
  margin-bottom: 14px;
}
.busca-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,250,235,0.12);
  color: var(--cream);
  font-size: 16px;
}
.busca-input::placeholder { color: rgba(255,255,255,0.55); }
.busca-input:focus {
  outline: none;
  background: rgba(255,250,235,0.20);
  border-color: rgba(255,255,255,0.5);
}

/* ─── Episódio card (em curso / monitoramento) ─── */
.ep-active {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  color: var(--cream);
}
.ep-active-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--cream);
  opacity: 0.7;
  margin-bottom: 4px;
}
.ep-active-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}
.ep-active-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 8px;
  font-style: italic;
}

.ep-eventos {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ep-evento {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 11px;
}
.ep-evento-tipo {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.18);
  color: var(--cream);
}
.ep-evento-valor { flex: 1; }
.ep-evento-time {
  font-family: ui-monospace, monospace;
  color: rgba(255,255,255,0.6);
  font-size: 10px;
}

.ep-acoes {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid oklch(0.24 0.03 35 / 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ep-acoes > .sc-cta,
.ep-acoes > .sc-cta-outline,
.ep-acoes > .sc-cta-ghost {
  font-size: 12px;
  padding: 7px 14px;
}

/* ─── Vacinas: Card Jornada ─── */
.vac-jornada {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin-bottom: 12px;
  color: var(--cream);
}
.vac-jornada-titulo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
}
.vac-jornada-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.68);
  margin-top: 2px;
  margin-bottom: 14px;
}
.vac-jornada-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}
.vac-stat-big {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
}
.vac-stat-lbl {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  text-transform: lowercase;
  margin-top: 3px;
}
.vac-jornada-bar {
  height: 6px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow: hidden;
}
.vac-jornada-fill {
  height: 100%;
  background: rgba(255,250,235,0.85);
  border-radius: 999px;
  transition: width 0.5s ease;
}
.vac-jornada-proxima {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(255,250,235,0.12);
  border-radius: 8px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.9);
  display: inline-block;
}

/* ─── CTA Importar Carteirinha ─── */
.vac-cta-carteirinha {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: rgba(255,250,235,0.12);
  border: 1.5px dashed rgba(255,255,255,0.30);
  border-radius: var(--radius-card);
  color: var(--cream);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.vac-cta-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.vac-cta-texts { flex: 1; min-width: 0; }
.vac-cta-titulo {
  font-size: 15px;
  font-weight: 600;
}
.vac-cta-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}
.vac-cta-chev {
  font-size: 20px;
  color: rgba(255,255,255,0.45);
}

/* ─── Timeline visual com dots por idade ─── */
.vac-timeline {
  position: relative;
  padding-left: 28px;
  margin-bottom: 20px;
}
.vac-timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 12px;
  bottom: 12px;
  width: 1.5px;
  background: rgba(255,255,255,0.18);
}
.vac-milestone {
  position: relative;
  margin-bottom: 20px;
}
.vac-mile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  margin-left: -28px;
}
.vac-mile-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  z-index: 1;
  position: relative;
}
.vac-mile-dot-done { background: #2D6A4F; color: var(--cream); }
.vac-mile-dot-late { background: var(--danger); color: var(--cream); }
.vac-mile-dot-now  { background: rgba(255,193,73,0.95); color: var(--ink); }
.vac-mile-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vac-mile-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.vac-mile-badge.done { background: rgba(45,106,79,0.30); color: #B8E0CC; }
.vac-mile-badge.late { background: rgba(217,65,65,0.30); color: #FFD0D0; }
.vac-mile-badge.now  { background: rgba(255,193,73,0.20); color: #FFE3B8; }
.vac-mile-head { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vac-mile-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* ── Collapse / expand por faixa de idade ── */
.vac-milestone[data-collapsed="true"]  .vac-mile-cards { display: none; }
.vac-mile-count {
  font-size: 11px; margin-left: auto; white-space: nowrap;
  color: rgba(255,255,255,0.40);
  font-family: var(--font-ui, system-ui);
}
.vac-milestone[data-collapsed="false"] .vac-mile-count { display: none; }
.vac-mile-chevron {
  font-size: 16px; flex-shrink: 0;
  color: rgba(255,255,255,0.35);
  transition: transform 0.2s ease;
  padding-left: 2px;
}
.vac-milestone[data-collapsed="false"] .vac-mile-chevron { transform: rotate(90deg); }
.vac-mile-badge.soon { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.45); }

.vac-multi-badge {
  display: inline-block;
  background: rgba(255,250,235,0.20);
  color: var(--cream);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ─── Balão da Bella (visível quando 0 vacinas aplicadas) ─── */
.vac-bella-balao {
  background: rgba(255,250,235,0.14);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin-bottom: 14px;
  font-family: var(--font-script);
  font-size: 18px;
  line-height: 1.4;
  color: rgba(255,250,235,0.96);
}

/* ─── Card de vacina (azul mais escuro + fonte cream, igual o card Jornada) ─── */
.vac-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.14);
  border-left: 4px solid rgba(255,255,255,0.30);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--cream);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease;
}
.vac-card:active { transform: scale(0.995); background: rgba(0,0,0,0.26); }

/* Borda esquerda por status — cores indicativas */
.vac-card.vacina-aplicada {
  border-left-color: #6FAE8A;
  opacity: 0.92;
}
.vac-card.vacina-atrasada {
  border-left-color: #E88080;
}
.vac-card.vacina-na_hora {
  border-left-color: #E6BD66;
}
.vac-card.vacina-futura,
.vac-card.vacina-agendada {
  border-left-color: rgba(255,255,255,0.30);
}

/* Icon box — branco translúcido + svg cream */
.vac-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,250,235,0.16);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vac-content { flex: 1; min-width: 0; }

.vac-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.vac-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--cream);
}
.vac-label {
  margin-top: 3px;
  font-size: 13px;
  color: rgba(255,250,235,0.78);
  line-height: 1.4;
}
.vac-info {
  margin-top: 8px;
  font-size: 13.5px;
  color: rgba(255,250,235,0.88);
  line-height: 1.5;
}
.vac-info strong { color: var(--cream); font-weight: 700; }
.vac-info-fab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,250,235,0.88);
}
.vac-info-multi {
  font-size: 12px;
  color: rgba(255,250,235,0.62);
  font-style: italic;
}

.vac-details {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.16);
}
.vac-details > summary {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,250,235,0.82);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  list-style: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vac-details > summary::-webkit-details-marker { display: none; }
.vac-details > summary::after {
  content: '›';
  display: inline-block;
  margin-left: 4px;
  font-weight: 800;
  transition: transform 0.2s ease;
}
.vac-details[open] > summary::after { transform: rotate(90deg); }
.vac-details > p {
  margin-top: 8px;
  font-size: 14px;
  color: rgba(255,250,235,0.85);
  line-height: 1.5;
  font-style: italic;
}

/* Status badges — pílulas claras com cor de status visível */
.vacina-badge { font-weight: 700; }
.vacina-badge-aplicada {
  background: rgba(111,174,138,0.22);
  color: #B7E3C8;
}
.vacina-badge-agendada {
  background: rgba(255,250,235,0.20);
  color: var(--cream);
}
.vacina-badge-na_hora {
  background: rgba(230,189,102,0.22);
  color: #F0D5A0;
}
.vacina-badge-atrasada {
  background: rgba(232,128,128,0.22);
  color: #FFC7C7;
}
.vacina-badge-futura {
  background: rgba(255,255,255,0.10);
  color: rgba(255,250,235,0.65);
  opacity: 1;
}

.vac-multi-badge {
  background: rgba(255,250,235,0.20);
  color: var(--cream);
}

/* ─── Vacinas: dimensões base do badge ─── */
.vacina-badge {
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
  align-self: center;
}

/* ─── Consultas ─── */
.consultas-header {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.consultas-header .btn-cream {
  flex: 1;
  min-width: 140px;
}
.consultas-header .btn-outline {
  flex: 1;
  min-width: 140px;
}

.consultas-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.consultas-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,250,235,0.75);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.consultas-chip-active {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
  font-weight: 600;
}

.consultas-section {
  margin-bottom: 18px;
}
.consultas-section-title {
  font-family: var(--font-display), serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}

.consulta-card {
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  margin-bottom: 8px;
  overflow: hidden;
  color: var(--cream);
}
.consulta-card[open] {
  background: rgba(0,0,0,0.28);
  border-color: rgba(255,255,255,0.18);
}
.consulta-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.consulta-summary::-webkit-details-marker { display: none; }
.consulta-summary::marker { display: none; }

.consulta-data {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 6px 4px;
  background: rgba(0,0,0,0.18);
  border-radius: 8px;
}
.consulta-dia {
  font-family: var(--font-display), serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--cream);
}
.consulta-mes {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-soft);
  margin-top: 2px;
}

.consulta-info {
  flex: 1;
  min-width: 0;
}
.consulta-medico {
  font-size: 15px;
  font-weight: 600;
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.3;
}
.consulta-badge-esp {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,250,235,0.14);
  color: var(--accent-soft);
  font-weight: 500;
}
.consulta-badge-agendada {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(230,189,102,0.22);
  color: #F0D5A0;
  font-weight: 600;
}
.consulta-motivo {
  font-size: 13px;
  color: rgba(255,250,235,0.78);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.consulta-hora {
  font-size: 12px;
  color: rgba(255,250,235,0.55);
  margin-top: 2px;
  font-family: ui-monospace, monospace;
}
.consulta-chevron {
  flex-shrink: 0;
  color: rgba(255,250,235,0.45);
  transition: transform 0.15s ease;
}
.consulta-card[open] .consulta-chevron {
  transform: rotate(180deg);
}

.consulta-body-expanded {
  padding: 0 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.consulta-medidas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.consulta-medida {
  background: rgba(0,0,0,0.16);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
}
.cm-valor {
  font-family: var(--font-display), serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.1;
}
.cm-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-soft);
  margin-top: 2px;
}
.consulta-obs-text {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255,250,235,0.80);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.consulta-acoes {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.consulta-acoes button {
  flex: 1;
  min-width: 100px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--cream);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.consulta-acoes button.btn-danger {
  background: rgba(232,128,128,0.14);
  border-color: rgba(232,128,128,0.32);
  color: #FFC7C7;
}
.consulta-acoes button.btn-realizar {
  background: rgba(166,210,148,0.16);
  border-color: rgba(166,210,148,0.32);
  color: #D6EDC0;
}

/* Botões de ação dentro do card expandido */
.ca-btn {
  flex: 1;
  min-width: 110px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--cream);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ca-btn-realizar {
  background: rgba(166,210,148,0.18);
  border-color: rgba(166,210,148,0.36);
  color: #D6EDC0;
}
.ca-btn-cal {
  background: rgba(230,189,102,0.18);
  border-color: rgba(230,189,102,0.36);
  color: #F0D5A0;
}
.ca-btn-acoes {
  background: rgba(255,250,235,0.10);
  border-color: rgba(255,250,235,0.24);
  color: var(--cream);
}
.ca-btn-danger {
  background: rgba(232,128,128,0.14);
  border-color: rgba(232,128,128,0.32);
  color: #FFC7C7;
}

/* ─── Card de tópicos pra próxima consulta ─── */
.topicos-card {
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 3px solid var(--accent-soft);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
  color: var(--cream);
}
.topicos-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.topicos-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-soft);
}
.topicos-headline {
  font-family: var(--font-display), serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--cream);
  margin-top: 3px;
  line-height: 1.25;
}
.topicos-add-btn {
  flex-shrink: 0;
  padding: 7px 12px;
  font-size: 12px;
}
.topicos-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  background: rgba(0,0,0,0.18);
  border-radius: 10px;
  overflow: hidden;
}
.topico-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topico-item:last-child { border-bottom: none; }
.topico-text { flex: 1; min-width: 0; }
.topico-quote {
  font-size: 13px;
  line-height: 1.45;
  color: var(--cream);
  word-break: break-word;
}
.topico-meta {
  font-size: 10.5px;
  color: rgba(255,250,235,0.55);
  margin-top: 3px;
}
.topico-acts { display: flex; gap: 2px; flex-shrink: 0; }
.topico-acts button {
  background: none;
  border: none;
  color: rgba(255,250,235,0.55);
  font-size: 16px;
  font-family: inherit;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.topico-acts button:hover { color: var(--cream); background: rgba(255,255,255,0.06); }

/* Tag de profissional (PR #67 portado pro V2) — pílula terracota, ícone branco.
 * Auto-contida: lê bem no card escuro (Consultas) e no card claro (Hoje). */
.topico-medico-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  margin-left: 5px;
  padding: 1px 7px 1px 5px;
  border-radius: var(--radius-pill);
  background: var(--terracotta);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}
.topico-medico-chip svg { width: 11px; height: 11px; flex-shrink: 0; }

/* Filtro de tópicos por profissional (vive no card escuro de Consultas). */
.topico-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}
.topico-filtro {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--cream);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.topico-filtro:active { transform: scale(0.97); }
.topico-filtro-active {
  background: var(--terracotta);
  color: #fff;
  border-color: transparent;
}
.topicos-hint {
  font-size: 12px;
  color: rgba(255,250,235,0.65);
  font-style: italic;
  margin: 8px 0 0;
}

/* ─── Ações prescritas (dentro do card de consulta) ─── */
.consulta-acoes-box {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.18);
  border-radius: 10px;
}
.consulta-acoes-titulo {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-soft);
  margin-bottom: 6px;
}
.acao-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
}
.acao-chip {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,250,235,0.16);
  color: var(--cream);
  flex-shrink: 0;
}
.acao-chip-medicamento    { background: rgba(166,210,148,0.22); color: #D6EDC0; }
.acao-chip-alimentacao    { background: rgba(230,189,102,0.22); color: #F0D5A0; }
.acao-chip-rotina         { background: rgba(255,250,235,0.16); color: var(--cream); }
.acao-chip-retorno        { background: rgba(140,180,220,0.22); color: #CDDDF0; }
.acao-chip-encaminhamento { background: rgba(204,140,200,0.22); color: #ECCBE8; }
.acao-desc {
  flex: 1;
  color: rgba(255,250,235,0.85);
  line-height: 1.35;
  word-break: break-word;
}
.acao-status {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.acao-status-pendente  { background: rgba(230,189,102,0.22); color: #F0D5A0; }
.acao-status-feita     { background: rgba(166,210,148,0.22); color: #D6EDC0; }
.acao-status-ignorada  { background: rgba(255,255,255,0.10); color: rgba(255,250,235,0.55); }

/* ─── Empty state rico ─── */
.consultas-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--cream);
}
.consultas-empty h3 {
  font-family: var(--font-display), serif;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--cream);
}
.consultas-empty p {
  font-size: 13px;
  color: rgba(255,250,235,0.78);
  margin: 0 0 10px;
  line-height: 1.5;
}
.consultas-empty-tip {
  font-size: 12px;
  color: rgba(255,250,235,0.6);
  font-style: italic;
  background: rgba(0,0,0,0.18);
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 2px solid var(--accent-soft);
  text-align: left;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SCRAPBOOK OVERRIDE (Lovable 12/05/2026)
 * Sobrescreve as classes do markup antigo pra usar tokens Scrapbook.
 * Cards passam a ser cream com sombra de papel; texto vira foreground escuro;
 * accent muda pra cor da porta (sage).
 * ═══════════════════════════════════════════════════════════════════════════ */

.saude-screen {
  font-family: var(--font-serif);
  color: var(--foreground);
  max-width: 440px;
  margin: 0 auto;
}

/* Header editorial */
.saude-header { padding: 4px 4px 4px; }
.hand-tag-sage { color: var(--sage); }
.saude-sub {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--muted-foreground);
  margin: 8px 0 0;
}

/* ─── Cards Scrapbook (override .sc-card e variantes) ──────────────────── */
.saude-screen .sc-card,
.saude-screen .doenca-ativa,
.saude-screen .doenca-card,
.saude-screen .vac-card,
.saude-screen .med-card,
.saude-screen .prof-row {
  background: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.06) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--bella-shadow-card) !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
}
.saude-screen .sc-card-done { opacity: 0.55 !important; }

.saude-screen .sc-time,
.saude-screen .sc-name,
.saude-screen .sc-meta,
.saude-screen .doenca-ativa-title,
.saude-screen .doenca-card-title,
.saude-screen .vac-name,
.saude-screen .med-name,
.saude-screen .prof-nome {
  color: var(--foreground) !important;
}

.saude-screen .sc-meta,
.saude-screen .doenca-ativa-meta,
.saude-screen .doenca-card-meta,
.saude-screen .vac-meta,
.saude-screen .med-meta,
.saude-screen .prof-meta {
  color: var(--muted-foreground) !important;
  font-style: italic;
  font-size: 12px;
}

/* Section titles (sc-section-title) */
.saude-screen .sc-section-title {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--foreground) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 22px 0 12px !important;
  padding: 0 !important;
  border: none !important;
}

/* Empty states */
.saude-screen .sc-empty,
.saude-screen .ep-empty {
  background: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.06) !important;
  box-shadow: var(--bella-shadow-card) !important;
  border-radius: var(--radius) !important;
}
.saude-screen .ep-empty-title { color: var(--foreground) !important; }
.saude-screen .ep-empty-text,
.saude-screen .ep-empty-icon { color: var(--muted-foreground) !important; }

/* CTAs */
.saude-screen .sc-cta {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: none !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
}
.saude-screen .sc-cta-outline {
  background: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.12) !important;
  box-shadow: var(--bella-shadow-card) !important;
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  border-radius: var(--radius) !important;
  font-size: 13px !important;
}
.saude-screen .sc-cta-ghost {
  background: transparent !important;
  color: var(--muted-foreground) !important;
  font-family: var(--font-serif) !important;
  font-style: italic !important;
}

/* Busca */
.saude-screen .busca-input {
  background: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.10) !important;
  box-shadow: var(--bella-shadow-card) !important;
  border-radius: var(--radius) !important;
  padding: 11px 14px !important;
  font-family: var(--font-serif) !important;
}
.saude-screen .busca-input::placeholder {
  color: var(--muted-foreground) !important;
  font-style: italic;
}
.saude-screen .busca-resumo {
  background: var(--card) !important;
  color: var(--muted-foreground) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.06) !important;
  font-style: italic;
}
.saude-screen .busca-resumo strong { color: var(--foreground) !important; }

/* Tópicos card */
.saude-screen .topicos-card {
  background: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.06) !important;
  border-left: 3px solid var(--peach) !important;
  box-shadow: var(--bella-shadow-card) !important;
}
.saude-screen .topicos-eyebrow,
.saude-screen .consulta-acoes-titulo,
.saude-screen .consultas-section-title {
  color: var(--muted-foreground) !important;
}
.saude-screen .topicos-headline {
  color: var(--foreground) !important;
  font-family: var(--font-serif) !important;
  font-style: italic;
}
.saude-screen .topicos-list { background: color-mix(in oklab, var(--muted) 60%, var(--card)) !important; }
.saude-screen .topico-quote,
.saude-screen .topicos-hint { color: var(--foreground) !important; }
.saude-screen .topicos-hint { color: var(--muted-foreground) !important; }
.saude-screen .topico-meta { color: var(--muted-foreground) !important; }
.saude-screen .topico-acts button { color: var(--muted-foreground) !important; }

/* Consultas */
.saude-screen .consulta-card {
  background: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.06) !important;
  box-shadow: var(--bella-shadow-card) !important;
  margin-bottom: 12px !important;
}
.saude-screen .consulta-card[open] { background: var(--card) !important; }
.saude-screen .consulta-data {
  background: color-mix(in oklab, var(--peach) 18%, var(--card)) !important;
}
.saude-screen .consulta-dia,
.saude-screen .consulta-medico { color: var(--foreground) !important; }
.saude-screen .consulta-mes { color: var(--muted-foreground) !important; }
.saude-screen .consulta-motivo,
.saude-screen .consulta-obs-text,
.saude-screen .consulta-hora { color: var(--muted-foreground) !important; }
.saude-screen .consulta-badge-esp {
  background: color-mix(in oklab, var(--sage) 18%, var(--card)) !important;
  color: oklch(0.4 0.05 165) !important;
}
.saude-screen .consulta-badge-agendada {
  background: color-mix(in oklab, var(--peach) 35%, var(--card)) !important;
  color: oklch(0.35 0.08 35) !important;
}
.saude-screen .consulta-body-expanded {
  border-top: 1px solid oklch(0.24 0.03 35 / 0.08) !important;
}
.saude-screen .consulta-medida {
  background: color-mix(in oklab, var(--muted) 60%, var(--card)) !important;
}
.saude-screen .cm-valor { color: var(--foreground) !important; }
.saude-screen .cm-lbl { color: var(--muted-foreground) !important; }
.saude-screen .consulta-acoes-box {
  background: color-mix(in oklab, var(--muted) 70%, var(--card)) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.06) !important;
}
.saude-screen .acao-row { color: var(--foreground) !important; }
.saude-screen .acao-desc { color: var(--foreground) !important; }
.saude-screen .ca-btn {
  background: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.12) !important;
}
.saude-screen .ca-btn-realizar {
  background: color-mix(in oklab, var(--sage) 22%, var(--card)) !important;
  color: oklch(0.32 0.05 165) !important;
}
.saude-screen .ca-btn-cal {
  background: color-mix(in oklab, var(--peach) 28%, var(--card)) !important;
  color: oklch(0.35 0.08 35) !important;
}
.saude-screen .ca-btn-danger {
  background: color-mix(in oklab, var(--destructive) 14%, var(--card)) !important;
  color: var(--destructive) !important;
}

/* Filtro chips */
.saude-screen .consultas-chip {
  background: var(--card) !important;
  color: var(--muted-foreground) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.10) !important;
  font-family: var(--font-ui) !important;
}
.saude-screen .consultas-chip-active {
  background: var(--porta-color) !important;
  color: var(--porta-foreground) !important;
  border-color: var(--porta-color) !important;
}

/* Empty consultas */
.saude-screen .consultas-empty {
  background: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.06) !important;
  box-shadow: var(--bella-shadow-card) !important;
  border-radius: var(--radius) !important;
}
.saude-screen .consultas-empty h3 {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  color: var(--foreground) !important;
}
.saude-screen .consultas-empty p { color: var(--muted-foreground) !important; }
.saude-screen .consultas-empty-tip {
  background: color-mix(in oklab, var(--peach) 14%, var(--card)) !important;
  color: var(--muted-foreground) !important;
  border-left-color: var(--peach) !important;
}

/* Vacinas - badges + dots cor mais legível */
.saude-screen .vacina-badge {
  background: color-mix(in oklab, var(--muted) 50%, var(--card)) !important;
  color: var(--foreground) !important;
}
.saude-screen .vacina-badge-na_hora {
  background: color-mix(in oklab, var(--peach) 28%, var(--card)) !important;
  color: oklch(0.35 0.08 35) !important;
}
.saude-screen .vacina-badge-atrasada {
  background: color-mix(in oklab, var(--destructive) 16%, var(--card)) !important;
  color: var(--destructive) !important;
}
.saude-screen .vacina-badge-aplicada {
  background: color-mix(in oklab, var(--sage) 25%, var(--card)) !important;
  color: oklch(0.32 0.05 165) !important;
}

/* Doença ativa - destaque com tape stripe terra */
.saude-screen .doenca-ativa {
  position: relative !important;
  border-left: 3px solid var(--terracotta) !important;
}

/* ─── Episódios no visual scrapbook ───────────────────────────────────────
 * Estes cards (ativo / monitoramento / encerrado / timeline) foram desenhados
 * pro fundo azul antigo (texto cream). Faltou o override do scrapbook: no fundo
 * cream o texto branco fica invisível. Aqui converte tudo pra card cream +
 * texto foreground. (Pré-existente — migração incompleta da V2.) */

/* Card episódio ativo */
.saude-screen .doenca-ativa-card,
.saude-screen .monit-card,
.saude-screen .doenca-encerrada {
  background: var(--card) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.06) !important;
  box-shadow: var(--bella-shadow-card) !important;
}
.saude-screen .doenca-ativa-card { border-left: 3px solid var(--terracotta) !important; }
.saude-screen .doenca-ativa-title,
.saude-screen .monit-card-titulo,
.saude-screen .doenca-encerrada-title,
.saude-screen .dev-card-title,
.saude-screen .enc-ev-title { color: var(--foreground) !important; }
.saude-screen .doenca-ativa-meta,
.saude-screen .monit-card-meta,
.saude-screen .doenca-encerrada-meta,
.saude-screen .dev-card-time,
.saude-screen .dev-card-sub,
.saude-screen .enc-ev-sub,
.saude-screen .enc-ev-time,
.saude-screen .enc-ev-empty,
.saude-screen .ep-timeline-empty { color: var(--muted-foreground) !important; }
.saude-screen .doenca-encerrada-chevron { color: var(--muted-foreground) !important; }

/* Notas (caixa de destaque) */
.saude-screen .doenca-ativa-notas {
  background: color-mix(in oklab, var(--peach) 14%, var(--card)) !important;
  border-left-color: var(--peach) !important;
  color: var(--foreground) !important;
}

/* Chips de ação do card ativo (Temperatura/Sintoma/… ) */
.saude-screen .doenca-chip-btn {
  background: color-mix(in oklab, var(--muted) 60%, var(--card)) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.12) !important;
  color: var(--foreground) !important;
}

/* Timeline de eventos */
.saude-screen .dev-card {
  background: color-mix(in oklab, var(--muted) 55%, var(--card)) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.08) !important;
  color: var(--foreground) !important;
}
.saude-screen .dev-dot,
.saude-screen .enc-ev-icon {
  background: color-mix(in oklab, var(--terracotta) 12%, var(--card)) !important;
  color: var(--terracotta) !important;
}
.saude-screen .dev-card-febre {
  background: color-mix(in oklab, var(--destructive) 12%, var(--card)) !important;
  border-color: color-mix(in oklab, var(--destructive) 30%, var(--card)) !important;
}
.saude-screen .dev-card-thumb,
.saude-screen .enc-ev-thumb { border-color: oklch(0.24 0.03 35 / 0.12) !important; }
.saude-screen .dev-day-sep {
  color: var(--muted-foreground) !important;
  background: color-mix(in oklab, var(--muted) 70%, var(--card)) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.10) !important;
  font-weight: 600;
}

/* Chip de cadência do monitoramento */
.saude-screen .monit-card-chip {
  background: color-mix(in oklab, var(--sage) 20%, var(--card)) !important;
  color: oklch(0.32 0.05 165) !important;
}

/* Encerrados — summary + corpo */
.saude-screen .doenca-encerrada[open] { background: var(--card) !important; }
.saude-screen .doenca-encerrada-info { color: var(--foreground) !important; }
.saude-screen .doenca-encerrada-body { border-top-color: oklch(0.24 0.03 35 / 0.08) !important; }

/* Botão "+ Novo monitoramento" (dashed) */
.saude-screen .cuidando-novo-monit {
  background: var(--card) !important;
  border: 1.5px dashed oklch(0.24 0.03 35 / 0.28) !important;
  color: var(--foreground) !important;
}

/* Internação (faixa de alerta) */
.saude-screen .ep-internacao-linha {
  background: color-mix(in oklab, var(--peach) 16%, var(--card)) !important;
  border-left-color: var(--peach) !important;
  color: oklch(0.35 0.08 35) !important;
}
.saude-screen .ep-badge-internacao {
  background: color-mix(in oklab, var(--peach) 30%, var(--card)) !important;
  color: oklch(0.35 0.08 35) !important;
}

/* Modais herdam — só os cards das screens precisavam de override */

/* ═══════════════════════════════════════════════════════════════════════════
 * FICHA (redesign 4 abas, Estágio 1) — composição própria.
 * Reusa os componentes scrapbook globais do hoje.css (polaroid, sticky-card,
 * section-head, hand-tag). Aqui só o que é exclusivo da Ficha.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Alerta de alergia grave — sticker vermelho, topo da Ficha */
.saude-screen .ficha-alerta-grave {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 4px 0 6px;
  padding: 14px 16px;
  background: color-mix(in oklab, var(--destructive) 8%, var(--card));
  border: 1px solid color-mix(in oklab, var(--destructive) 30%, var(--card));
  border-left: 4px solid var(--destructive);
  border-radius: var(--radius);
  box-shadow: var(--bella-shadow-card);
  transform: rotate(-0.6deg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.saude-screen .ficha-alerta-grave:active { transform: rotate(-0.6deg) scale(0.99); }
.saude-screen .ficha-alerta-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--destructive) 14%, var(--card));
  color: var(--destructive);
}
.saude-screen .ficha-alerta-kicker {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--destructive);
}
.saude-screen .ficha-alerta-what {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--foreground);
  margin-top: 1px;
}

/* Botão "+ X" no fim de cada seção da Ficha (condição / med / profissional) */
.saude-screen .ficha-add-btn {
  margin-top: 12px;
  padding: 9px 16px !important;
  font-size: 12.5px !important;
}

/* Empty state leve dentro de uma seção da Ficha */
.saude-screen .ficha-empty {
  background: var(--card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
  box-shadow: var(--bella-shadow-card);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.saude-screen .ficha-empty strong { color: var(--foreground); font-style: normal; }

/* Chip de status vacinal (leva pra aba Vacinas) */
.saude-screen .ficha-status-chip {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
  border-radius: var(--radius);
  box-shadow: var(--bella-shadow-card);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-serif);
  transform: rotate(-0.5deg);
  -webkit-tap-highlight-color: transparent;
}
.saude-screen .ficha-status-chip:active { transform: rotate(-0.5deg) scale(0.99); }
.saude-screen .ficha-chip-body { flex: 1; min-width: 0; }
.saude-screen .ficha-chip-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--foreground);
}
.saude-screen .ficha-chip-sub {
  font-size: 12px;
  font-style: italic;
  color: var(--muted-foreground);
  margin-top: 2px;
}
.saude-screen .ficha-chip-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--muted);
  overflow: hidden;
  margin-top: 6px;
}
.saude-screen .ficha-chip-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: oklch(0.46 0.05 165); /* sage-deep */
}
.saude-screen .ficha-chip-chev {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--muted-foreground);
}

/* CTA "Gerar ficha pro médico" — pill terracota full-width */
.saude-screen .ficha-cta-relatorio {
  margin-top: 26px;
  width: 100%;
  padding: 13px 16px !important;
  font-size: 13.5px !important;
}

/* "Já teve no passado" — collapsable */
.saude-screen .ficha-passado { margin-top: 18px; }
.saude-screen .ficha-passado > summary {
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--muted-foreground);
  padding: 6px 2px;
}
.saude-screen .ficha-passado > summary::-webkit-details-marker { display: none; }
.saude-screen .ficha-passado-body { margin-top: 12px; opacity: 0.72; }
.saude-screen .ficha-card-resolvida { border-left: 3px solid var(--sage); }

/* ═══════════════════════════════════════════════════════════════════════════
 * CORREÇÕES PÓS-SMOKE (04/06) — legibilidade scrapbook em Acompanhar e Vacinas.
 * Essas telas foram desenhadas pro fundo azul antigo (texto branco); no cream
 * o texto sumia. Aqui converte tudo pra papel cream + texto legível + adesivos.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── #6 Acompanhar: empty state (sub/tip eram brancos = invisíveis) ─── */
.saude-screen .ep-empty-sub,
.saude-screen .ep-empty-tip { color: var(--muted-foreground) !important; }
.saude-screen .ep-empty-tip {
  background: color-mix(in oklab, var(--peach) 12%, var(--card)) !important;
  font-style: italic;
}

/* Adesivo (washi tape) nos cards de episódio ativo / monitoramento */
.saude-screen .doenca-ativa-card,
.saude-screen .monit-card { position: relative; overflow: visible; margin-top: 14px; }
.saude-screen .doenca-ativa-card::before,
.saude-screen .monit-card::before {
  content: "";
  position: absolute;
  top: -9px; left: 24px;
  width: 60px; height: 14px;
  border-radius: 2px;
  border-left: 1px dashed oklch(0.24 0.03 35 / 0.08);
  border-right: 1px dashed oklch(0.24 0.03 35 / 0.08);
  box-shadow: 0 1px 3px oklch(0.24 0.03 35 / 0.15);
}
.saude-screen .doenca-ativa-card::before { background: color-mix(in oklab, var(--terracotta) 40%, transparent); transform: rotate(-2deg); }
.saude-screen .monit-card::before { background: color-mix(in oklab, var(--peach) 52%, transparent); transform: rotate(2deg); }

/* ─── #5 Vacinas: tudo pro scrapbook ─── */

/* Card Jornada → papel sage-tinted com sombra + tape */
.saude-screen .vac-jornada {
  position: relative;
  background: color-mix(in oklab, var(--sage) 12%, var(--card)) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.06) !important;
  box-shadow: var(--bella-shadow-card) !important;
  color: var(--foreground) !important;
  transform: rotate(-0.5deg);
  margin-top: 6px !important;
}
.saude-screen .vac-jornada::before {
  content: "";
  position: absolute;
  top: -10px; left: 50%;
  width: 64px; height: 14px;
  transform: translateX(-50%) rotate(-2deg);
  background: color-mix(in oklab, var(--sage) 40%, transparent);
  border-radius: 2px;
  border-left: 1px dashed oklch(0.24 0.03 35 / 0.08);
  border-right: 1px dashed oklch(0.24 0.03 35 / 0.08);
  box-shadow: 0 1px 3px oklch(0.24 0.03 35 / 0.15);
}
.saude-screen .vac-jornada-titulo {
  font-family: var(--font-serif) !important;
  font-style: italic;
  color: var(--foreground) !important;
}
.saude-screen .vac-jornada-sub { color: var(--muted-foreground) !important; }
.saude-screen .vac-stat-big { font-family: var(--font-serif) !important; color: var(--foreground) !important; }
.saude-screen .vac-stat-lbl { color: var(--muted-foreground) !important; }
.saude-screen .vac-jornada-bar { background: var(--muted) !important; }
.saude-screen .vac-jornada-fill { background: oklch(0.46 0.05 165) !important; }
.saude-screen .vac-jornada-proxima {
  background: color-mix(in oklab, var(--sage) 18%, var(--card)) !important;
  color: var(--foreground) !important;
}

/* CTA importar carteirinha → cream tracejado */
.saude-screen .vac-cta-carteirinha {
  background: var(--card) !important;
  border: 1.5px dashed oklch(0.24 0.03 35 / 0.28) !important;
  color: var(--foreground) !important;
}
.saude-screen .vac-cta-titulo { color: var(--foreground) !important; font-family: var(--font-serif) !important; }
.saude-screen .vac-cta-sub,
.saude-screen .vac-cta-chev { color: var(--muted-foreground) !important; }

/* Balão da Bella (0 aplicadas) */
.saude-screen .vac-bella-balao {
  background: color-mix(in oklab, var(--peach) 14%, var(--card)) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.06) !important;
  color: var(--foreground) !important;
}

/* Timeline: linha + dots por idade + labels */
.saude-screen .vac-timeline::before { background: oklch(0.24 0.03 35 / 0.18) !important; }
.saude-screen .vac-mile-dot {
  background: color-mix(in oklab, var(--muted) 70%, var(--card)) !important;
  color: var(--foreground) !important;
}
.saude-screen .vac-mile-dot-done { background: oklch(0.46 0.05 165) !important; color: var(--card) !important; }
.saude-screen .vac-mile-dot-late { background: var(--destructive) !important; color: var(--card) !important; }
.saude-screen .vac-mile-dot-now  { background: color-mix(in oklab, var(--peach) 60%, var(--card)) !important; color: oklch(0.35 0.08 35) !important; }
.saude-screen .vac-mile-label { font-family: var(--font-serif) !important; color: var(--foreground) !important; }
.saude-screen .vac-mile-badge.done { background: color-mix(in oklab, var(--sage) 24%, var(--card)) !important; color: oklch(0.32 0.05 165) !important; }
.saude-screen .vac-mile-badge.late { background: color-mix(in oklab, var(--destructive) 16%, var(--card)) !important; color: var(--destructive) !important; }
.saude-screen .vac-mile-badge.now  { background: color-mix(in oklab, var(--peach) 28%, var(--card)) !important; color: oklch(0.35 0.08 35) !important; }
.saude-screen .vac-mile-badge.soon { background: color-mix(in oklab, var(--muted) 50%, var(--card)) !important; color: var(--muted-foreground) !important; }
.saude-screen .vac-mile-count   { color: var(--muted-foreground) !important; }
.saude-screen .vac-mile-chevron { color: oklch(0.68 0.02 35) !important; }

/* Card de vacina → papel cream + texto legível + tape por status */
.saude-screen .vac-card {
  position: relative;
  background: var(--card) !important;
  border: 1px solid oklch(0.24 0.03 35 / 0.06) !important;
  box-shadow: var(--bella-shadow-card) !important;
  color: var(--foreground) !important;
  overflow: visible;
  margin-top: 12px;
}
.saude-screen .vac-card::before {
  content: "";
  position: absolute;
  top: -8px; left: 20px;
  width: 52px; height: 13px;
  transform: rotate(-2deg);
  background: color-mix(in oklab, var(--sage) 38%, transparent);
  border-radius: 2px;
  border-left: 1px dashed oklch(0.24 0.03 35 / 0.08);
  border-right: 1px dashed oklch(0.24 0.03 35 / 0.08);
  box-shadow: 0 1px 3px oklch(0.24 0.03 35 / 0.15);
}
.saude-screen .vac-card.vacina-na_hora::before { background: color-mix(in oklab, var(--peach) 50%, transparent); }
.saude-screen .vac-card.vacina-atrasada::before { background: color-mix(in oklab, var(--destructive) 35%, transparent); }
.saude-screen .vac-card.vacina-futura::before,
.saude-screen .vac-card.vacina-agendada::before { background: color-mix(in oklab, var(--muted) 70%, transparent); }
.saude-screen .vac-name { color: var(--foreground) !important; }
.saude-screen .vac-label,
.saude-screen .vac-info,
.saude-screen .vac-info-multi,
.saude-screen .vac-info-fab { color: var(--muted-foreground) !important; }
.saude-screen .vac-info strong { color: var(--foreground) !important; }
.saude-screen .vac-icon {
  background: color-mix(in oklab, var(--sage) 18%, var(--card)) !important;
  color: oklch(0.46 0.05 165) !important;
}
.saude-screen .vac-details { border-top-color: oklch(0.24 0.03 35 / 0.12) !important; }
.saude-screen .vac-details > summary { color: var(--muted-foreground) !important; }
.saude-screen .vac-details > p { color: var(--foreground) !important; }
.saude-screen .vac-multi-badge {
  background: color-mix(in oklab, var(--muted) 55%, var(--card)) !important;
  color: var(--foreground) !important;
}
.saude-screen .vacina-badge-agendada,
.saude-screen .vacina-badge-futura {
  background: color-mix(in oklab, var(--muted) 55%, var(--card)) !important;
  color: var(--muted-foreground) !important;
}

/* ─── #4 Resumo em PDF da consulta (anexo manual da família) ─── */
.saude-screen .consulta-pdf-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.saude-screen .ca-btn-pdf {
  flex: 1;
  text-decoration: none;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--peach) 24%, var(--card)) !important;
  color: oklch(0.35 0.08 35) !important;
  border-color: color-mix(in oklab, var(--peach) 40%, var(--card)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * REDESIGN scrapbook 08/06 — Consultas + Vacinas + Acompanhar (episódios).
 * Padroniza as 3 sub-tabs no mesmo idioma da Ficha/Hoje: card = papel cream com
 * washi tape (.scrap-tape, global em hoje.css) + leve rotação (.rot-l/.rot-r) +
 * carimbo de data (.ck-stamp). Escopado em .saude-screen pra ganhar dos muitos
 * overrides legados .saude-screen ...!important. Mirror dos valores do
 * prototype-saude-v2.html (date-box, medida, jornada, bar, acao-chip).
 * Classes legadas (.consulta-card, .ca-btn, .vac-jornada dark, .doenca-ativa-card
 * dark) ficam dead — não são mais referenciadas pelo render.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Listas (espaçamento entre cards colados) ─── */
.saude-screen .consultas-lista {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 4px;
}

/* ─── Card base (papel cream + tape + rotação) ─── */
.saude-screen .ck-card {
  position: relative;
  background: var(--card);
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
  border-radius: var(--radius);
  box-shadow: var(--bella-shadow-card);
  padding: 0;
  margin: 0;
  overflow: visible;
}
/* .scrap-tape / .rot-l / .rot-r / .tone-* vêm de hoje.css (globais) */

.saude-screen .ck-card > summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.saude-screen .ck-card > summary::-webkit-details-marker { display: none; }

/* ─── Cabeçalho do card (carimbo + corpo + chevron) ─── */
.saude-screen .ck-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 16px 16px 18px;
}
.saude-screen .ck-head-static { cursor: default; }

.saude-screen .ck-stamp {
  flex-shrink: 0;
  min-width: 48px;
  text-align: center;
  background: color-mix(in oklab, var(--peach) 18%, var(--card));
  border-radius: 9px;
  padding: 7px 5px;
}
.saude-screen .tone-sage  > .ck-head > .ck-stamp { background: color-mix(in oklab, var(--sage) 16%, var(--card)); }
.saude-screen .tone-terra > .ck-head > .ck-stamp { background: color-mix(in oklab, var(--terracotta) 14%, var(--card)); }
.saude-screen .ck-stamp-dia {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  color: var(--foreground);
}
.saude-screen .ck-stamp-mes {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  margin-top: 3px;
}

.saude-screen .ck-body { flex: 1; min-width: 0; }
.saude-screen .ck-medico {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  color: var(--foreground);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.saude-screen .ck-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--muted-foreground);
  margin-top: 4px;
  line-height: 1.4;
}
.saude-screen .ck-hora {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--terracotta);
  margin-top: 4px;
}
.saude-screen .ck-chev {
  flex-shrink: 0;
  align-self: center;
  font-size: 22px;
  color: var(--muted-foreground);
  transition: transform 0.18s ease;
}
.saude-screen .ck-card[open] > .ck-head .ck-chev { transform: rotate(90deg); }

/* ─── Badges suaves ─── */
.saude-screen .ck-badge {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--sage) 20%, var(--card));
  color: oklch(0.36 0.05 165);
  white-space: nowrap;
}
.saude-screen .ck-badge-ag {
  background: color-mix(in oklab, var(--peach) 32%, var(--card));
  color: oklch(0.35 0.08 35);
}
.saude-screen .ck-badge-aplicada,
.saude-screen .ck-badge-coberta {
  background: color-mix(in oklab, var(--sage) 24%, var(--card));
  color: oklch(0.32 0.05 165);
}
.saude-screen .ck-badge-na_hora {
  background: color-mix(in oklab, var(--peach) 30%, var(--card));
  color: oklch(0.35 0.08 35);
}
.saude-screen .ck-badge-atrasada {
  background: color-mix(in oklab, var(--destructive) 16%, var(--card));
  color: var(--destructive);
}
.saude-screen .ck-badge-futura,
.saude-screen .ck-badge-agendada,
.saude-screen .ck-badge-dispensada {
  background: color-mix(in oklab, var(--muted) 60%, var(--card));
  color: var(--muted-foreground);
}
/* "Não se aplica": card mutado e tape cinza (sobrepõe o tone-sage do JS) —
   sinaliza "deixada de lado", sem o verde de "feita" nem o vinho de "atrasada". */
.saude-screen .vacina-dispensada { opacity: 0.66; }
.saude-screen .vacina-dispensada .scrap-tape {
  background: color-mix(in oklab, var(--muted) 70%, transparent);
}
.saude-screen .ck-badge-monit {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: color-mix(in oklab, var(--sage) 20%, var(--card));
  color: oklch(0.32 0.05 165);
}
.saude-screen .ck-badge-internacao {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: color-mix(in oklab, var(--peach) 30%, var(--card));
  color: oklch(0.35 0.08 35);
}

/* ─── Corpo expandido (<details>) ─── */
.saude-screen .ck-exp {
  padding: 0 16px 16px 18px;
  border-top: 1px dashed oklch(0.24 0.03 35 / 0.12);
  margin-top: 2px;
  padding-top: 14px;
}
.saude-screen .ck-exp-static { border-top: none; padding-top: 0; margin-top: -4px; }

/* Medidas (peso/altura/PC) — mirror .medida do protótipo */
.saude-screen .ck-medidas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.saude-screen .ck-medida {
  text-align: center;
  background: color-mix(in oklab, var(--muted) 60%, var(--card));
  border-radius: 10px;
  padding: 9px 6px;
}
.saude-screen .ck-medida-val {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--foreground);
  line-height: 1;
}
.saude-screen .ck-medida-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted-foreground);
  margin-top: 3px;
}

.saude-screen .ck-obs {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--foreground);
  margin: 0 0 12px;
}

/* Ações prescritas — caixa suave */
.saude-screen .ck-acoes-box {
  background: color-mix(in oklab, var(--muted) 55%, var(--card));
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 12px;
}
.saude-screen .ck-acoes-tit {
  font-family: var(--font-ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  margin-bottom: 8px;
}
.saude-screen .ck-acao {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-serif);
  font-size: 12.5px;
  padding: 4px 0;
}
.saude-screen .ck-acao-desc { flex: 1; min-width: 0; color: var(--foreground); }
.saude-screen .ck-acao-status {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted-foreground);
  flex-shrink: 0;
}
.saude-screen .ck-acao-status-feito,
.saude-screen .ck-acao-status-concluido { color: oklch(0.4 0.05 165); }

/* Resumo em PDF (anexo manual) */
.saude-screen .ck-pdf-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}
.saude-screen .ck-pdf-link {
  flex: 1;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.saude-screen .ck-pdf-row { flex-wrap: wrap; }
.saude-screen .ck-anexos-label { font-size: 13px; color: var(--muted-foreground); }
/* Anexos numerados (relatório com várias fotos) — quadradinhos compactos. */
.saude-screen .ck-anexo-num {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 6px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Linha de botões (sc-cta*) */
.saude-screen .ck-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.saude-screen .ck-btns .sc-cta,
.saude-screen .ck-btns .sc-cta-outline { flex: 1 1 auto; }
.saude-screen .ck-danger { color: var(--destructive) !important; flex: 0 0 auto; }

/* Carimbo de "em curso" puxa o título; sem stamp no card ativo/monit/custom */

/* ─── Notas / tópicos pra próxima consulta (notas-card global de hoje.css) ─── */
.saude-screen .ck-notas { margin-bottom: 4px; }
.saude-screen .ck-notas-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.saude-screen .ck-notas-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  font-weight: 500;
  color: var(--foreground);
  margin: 2px 0 0;
  line-height: 1.2;
}
.saude-screen .ck-notas-add { flex-shrink: 0; }
.saude-screen .ck-notas-lista { margin-bottom: 0; }
.saude-screen .ck-nota-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed oklch(0.24 0.03 35 / 0.12);
}
.saude-screen .ck-nota-item:last-child { border-bottom: none; }
.saude-screen .ck-nota-text { flex: 1; min-width: 0; }
.saude-screen .ck-nota-quote {
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--foreground);
}
.saude-screen .ck-nota-meta {
  display: block;
  font-style: italic;
  font-size: 11px;
  color: var(--muted-foreground);
  margin-top: 2px;
}
.saude-screen .ck-nota-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-style: normal;
  background: color-mix(in oklab, var(--terracotta) 14%, var(--card));
  color: var(--terracotta);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-ui);
  padding: 1px 6px;
  border-radius: 99px;
  margin-left: 4px;
}
.saude-screen .ck-nota-acts { display: flex; gap: 6px; flex-shrink: 0; }
.saude-screen .ck-nota-acts button {
  background: transparent;
  border: none;
  color: var(--muted-foreground);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.saude-screen .ck-nota-acts button:hover { color: var(--foreground); }
.saude-screen .ck-notas-hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted-foreground);
  margin: 0;
  line-height: 1.5;
}

/* ─── Acompanhar: grade de ações do episódio ativo (Temperatura/Sintoma/…) ─── */
.saude-screen .ck-acoes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.saude-screen .ck-acao-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 4px;
  background: color-mix(in oklab, var(--muted) 55%, var(--card));
  border: 1px solid oklch(0.24 0.03 35 / 0.08);
  border-radius: 12px;
  color: var(--foreground);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.saude-screen .ck-acao-chip:active { transform: scale(0.95); }
.saude-screen .ck-acao-chip svg { color: var(--terracotta); }

/* Medicamentos vinculados ao episódio (medicamentos.doenca_id) */
.saude-screen .ep-meds {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: color-mix(in oklab, var(--muted) 55%, var(--card));
  border: 1px solid oklch(0.24 0.03 35 / 0.08);
  border-radius: 12px;
}
.saude-screen .ep-meds-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: oklch(0.45 0.04 40);
  margin-bottom: 8px;
}
.saude-screen .ep-meds-titulo svg { color: var(--terracotta); }
.saude-screen .ep-med-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid oklch(0.24 0.03 35 / 0.08);
  border-radius: 9px;
  padding: 8px 11px;
  margin-top: 6px;
  cursor: pointer;
  font-family: var(--font-ui);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.saude-screen .ep-med-row:active { transform: scale(0.98); }
.saude-screen .ep-med-nome { font-size: 13.5px; font-weight: 600; color: var(--foreground); }
.saude-screen .ep-med-sub { font-size: 12px; color: oklch(0.5 0.03 40); }

/* Atalho discreto: registrar dose avulsa sem criar prescrição */
.saude-screen .ep-dose-avulsa {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: oklch(0.5 0.03 40);
  font-family: var(--font-ui);
  font-size: 11.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 2px 0 10px;
  margin-top: -6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.saude-screen .ck-internacao {
  background: color-mix(in oklab, var(--peach) 14%, var(--card));
  border-left: 3px solid var(--peach);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--font-serif);
  font-size: 12.5px;
  color: oklch(0.35 0.08 35);
  margin-bottom: 12px;
}
.saude-screen .ck-internacao strong { color: var(--foreground); }

/* Indicador de lembrete agendado no card do episódio ativo */
.saude-screen .ck-lembrete {
  display: flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in oklab, var(--sage) 14%, var(--card));
  border-left: 3px solid var(--sage);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--font-serif);
  font-size: 12.5px;
  color: var(--foreground);
  margin-bottom: 12px;
}
.saude-screen .ck-lembrete-x {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  color: var(--destructive, #C85C35);
}

/* ─── Vacinas: card jornada (mirror .jornada do protótipo) ─── */
.saude-screen .ck-jornada {
  position: relative;
  background: color-mix(in oklab, var(--sage) 12%, var(--card));
  border: 1px solid oklch(0.24 0.03 35 / 0.06);
  box-shadow: var(--bella-shadow-card);
  border-radius: var(--radius);
  padding: 16px;
  transform: rotate(-0.5deg);
}
.saude-screen .ck-jornada-stats {
  display: flex;
  gap: 22px;
  margin-bottom: 12px;
}
.saude-screen .ck-jornada-n {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  color: var(--foreground);
}
.saude-screen .ck-jornada-n-now { color: var(--terracotta); }
.saude-screen .ck-jornada-n-late { color: var(--destructive); }
.saude-screen .ck-jornada-l {
  font-size: 11px;
  color: var(--muted-foreground);
  margin-top: 3px;
}
.saude-screen .ck-jornada-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--muted);
  overflow: hidden;
}
.saude-screen .ck-jornada-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: oklch(0.46 0.05 165);
}
.saude-screen .ck-jornada-proxima {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--foreground);
}
.saude-screen .ck-jornada-proxima span { display: inline-flex; align-items: center; gap: 6px; }

/* CTA importar carteirinha (sc-cta-outline custom layout) */
.saude-screen .ck-carteirinha {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  text-align: left;
  padding: 13px 14px !important;
  border-style: dashed !important;
}
.saude-screen .ck-carteirinha-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--sage) 18%, var(--card));
  color: oklch(0.46 0.05 165);
}
.saude-screen .ck-carteirinha-texts { flex: 1; min-width: 0; font-style: normal; }
.saude-screen .ck-carteirinha-titulo {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--foreground);
}
.saude-screen .ck-carteirinha-sub {
  display: block;
  font-size: 12px;
  font-style: italic;
  color: var(--muted-foreground);
  margin-top: 2px;
}
.saude-screen .ck-carteirinha-chev { flex-shrink: 0; font-size: 20px; color: var(--muted-foreground); }

/* Balão da Bella (0 aplicadas) */
.saude-screen .ck-bella-balao {
  background: color-mix(in oklab, var(--peach) 13%, var(--card));
  border: 1px solid color-mix(in oklab, var(--peach) 26%, var(--card));
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 4px;
}
.saude-screen .ck-bella-msg {
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--foreground);
}

/* ─── Vacina card (ck-card + ícone à esquerda) ─── */
.saude-screen .ck-vac { padding: 0; }
.saude-screen .ck-vac-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
}
.saude-screen .ck-vac-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--sage) 18%, var(--card));
  color: oklch(0.46 0.05 165);
}
.saude-screen .vacina-na_hora > .ck-vac-row > .ck-vac-icon { background: color-mix(in oklab, var(--peach) 26%, var(--card)); color: oklch(0.35 0.08 35); }
.saude-screen .vacina-atrasada > .ck-vac-row > .ck-vac-icon { background: color-mix(in oklab, var(--destructive) 14%, var(--card)); color: var(--destructive); }
.saude-screen .ck-vac-content { flex: 1; min-width: 0; }
.saude-screen .ck-vac-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.saude-screen .ck-vac-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--foreground);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.saude-screen .ck-vac-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 3px;
}
.saude-screen .ck-vac .vac-info {
  font-family: var(--font-serif);
  font-size: 12.5px;
  color: var(--muted-foreground);
  margin-top: 6px;
  line-height: 1.45;
}
.saude-screen .ck-vac .vac-info strong { color: var(--foreground); }
.saude-screen .ck-vac .vac-info-fab,
.saude-screen .ck-vac .vac-info-multi { display: inline-flex; align-items: center; gap: 4px; }
.saude-screen .ck-vac .vac-multi-badge {
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  background: color-mix(in oklab, var(--muted) 55%, var(--card));
  color: var(--foreground);
  padding: 1px 6px;
  border-radius: 99px;
}
.saude-screen .ck-vac .vac-details {
  margin-top: 8px;
  border-top: 1px dashed oklch(0.24 0.03 35 / 0.12);
  padding-top: 6px;
}
.saude-screen .ck-vac .vac-details > summary {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--muted-foreground);
  cursor: pointer;
  list-style: none;
}
.saude-screen .ck-vac .vac-details > summary::-webkit-details-marker { display: none; }
.saude-screen .ck-vac .vac-details > p {
  font-family: var(--font-serif);
  font-size: 12.5px;
  color: var(--foreground);
  margin: 6px 0 0;
  line-height: 1.45;
}

/* Galeria de fotos do monitoramento dentro do ck-exp (reusa .monit-* legado) */
.saude-screen .ck-card-monit .monit-galeria { margin-bottom: 12px; }

/* Tile "+ foto" no card claro de scrapbook — o estilo base (.monit-foto-add,
   ~linha 362) é do card escuro legado (borda/texto BRANCOS): no fundo creme
   fica invisível (só se percebia encostado nas fotos; com 4 fotos ele quebra
   pra 2ª linha sozinho e some de vez — report do Fabio 04/07). */
.saude-screen .ck-card-monit .monit-foto-add {
  border-color: rgba(42,26,14,0.35);
  color: rgba(42,26,14,0.7);
  background: rgba(42,26,14,0.03);
}

/* Espaço pros cards de vacina na timeline (tape projeta 9px acima) */
.saude-screen .vac-mile-cards { gap: 16px; padding-top: 6px; }

/* Press feedback nos cards clicáveis (consulta/vacina/custom) */
.saude-screen .ck-card[data-vacina-codigo],
.saude-screen .ck-card[data-vacina-custom-id] { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* Linha de grupo de medicamento inativo (histórico agrupado por nome) */
.saude-screen .med-inativo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.saude-screen .med-inativo-row .sc-name { flex: 1; min-width: 0; }
.saude-screen .med-inativo-count {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-ui);
  color: var(--muted-foreground);
  background: color-mix(in oklab, var(--muted) 55%, var(--card));
  padding: 1px 7px;
  border-radius: 99px;
  flex: 0 0 auto;
}
.saude-screen .med-inativo-chev {
  font-size: 18px;
  color: var(--muted-foreground);
  flex: 0 0 auto;
}

/* ─── Ficha: check de dose do dia + arquivar no card de med ──────────────── */
.saude-screen .sticky-card .ficha-med-check {
  align-self: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--terracotta) 55%, transparent);
  background: var(--card);
  color: var(--muted-foreground);
  font-size: 18px;
  line-height: 1;
  font-family: var(--font-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.saude-screen .sticky-card .ficha-med-check.is-done {
  border-color: var(--sage);
  background: color-mix(in oklab, var(--sage) 18%, var(--card));
  color: var(--sage);
  font-weight: 700;
}
.saude-screen .sticky-card .ficha-med-check-multi {
  width: auto;
  min-width: 44px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.saude-screen .ficha-med-arquivar {
  margin-top: 8px;
  padding: 0;
  background: none;
  border: none;
  color: var(--muted-foreground);
  font-family: var(--font-ui);
  font-size: 11.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* "Remédios anteriores" — linhas de inativo agrupado dentro da Ficha */
.saude-screen .ficha-inativos-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}
.saude-screen .ficha-inativo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid oklch(0.24 0.03 35 / 0.10);
  background: var(--card);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.saude-screen .ficha-inativo-nome {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--foreground);
}

/* ─── Orientações da pediatra (histórico) ─────────────────────────────────── */
.saude-screen .tone-wine > .ck-head > .ck-stamp {
  background: color-mix(in oklab, var(--wine) 14%, var(--card));
}
.saude-screen .ck-badge-orientacao {
  background: color-mix(in oklab, var(--wine) 12%, var(--card));
  color: var(--wine);
  border: 1px solid color-mix(in oklab, var(--wine) 20%, transparent);
}
.saude-screen .ck-aviso-async {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted-foreground);
  background: color-mix(in oklab, var(--wine) 8%, var(--card));
  border-left: 3px solid color-mix(in oklab, var(--wine) 40%, transparent);
  padding: 6px 10px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 8px;
}

/* ─── Análise IA da evolução (monitoramento de mancha/lesão) ──────────────── */
/* Badge ✨ na miniatura da foto que já tem análise */
.saude-screen .monit-foto-ai {
  position: absolute;
  top: 4px; right: 4px;
  font-size: 11px;
  line-height: 1;
  padding: 2px 4px;
  background: rgba(0,0,0,0.55);
  border-radius: 4px;
}

/* Bloco de evolução no card (abaixo da galeria) */
.saude-screen .monit-analise {
  margin: 2px 0 10px;
  padding: 10px 12px;
  background: color-mix(in oklab, var(--sage) 10%, var(--card));
  border-left: 3px solid color-mix(in oklab, var(--sage) 45%, transparent);
  border-radius: 0 8px 8px 0;
}
.saude-screen .monit-analise-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: 99px;
  margin-bottom: 6px;
}
.saude-screen .monit-analise-badge-ok {
  background: color-mix(in oklab, var(--sage) 18%, var(--card));
  color: var(--sage);
}
.saude-screen .monit-analise-badge-limitada {
  background: color-mix(in oklab, var(--terracotta) 14%, var(--card));
  color: var(--terracotta);
}
.saude-screen .monit-analise-resumo {
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--foreground);
  margin: 0 0 6px;
}
.saude-screen .monit-analise-linha {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-foreground);
  margin: 0 0 3px;
}
.saude-screen .monit-analise-linha strong { color: var(--foreground); }
.saude-screen .monit-analise-disclaimer {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted-foreground);
  margin: 8px 0 0;
}
.saude-screen .monit-analise-loading {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted-foreground);
  margin: 0;
}
.saude-screen .monit-analise-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-foreground);
  margin: 0;
  font-style: italic;
}
.saude-screen .monit-analise-btn { width: 100%; font-size: 13px; }
.saude-screen .monit-analise-hist {
  display: block;
  background: transparent;
  border: none;
  padding: 6px 0 0;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--muted-foreground);
  text-decoration: underline;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Chips visuais da análise (card E modal "Evolução" — por isso sem escopo).
   Tons: ok=sage (estável) · mudou=terracota · incerto=apagado. */
.monit-chips-grupo { margin: 0 0 8px; }
.monit-chips-rotulo {
  display: block;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(42,26,14,0.5);
  margin-bottom: 4px;
}
.monit-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.monit-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.monit-chip-glifo { font-size: 12px; font-weight: 700; }
.monit-chip-ok {
  background: color-mix(in oklab, var(--sage) 16%, transparent);
  color: var(--sage);
}
.monit-chip-mudou {
  background: color-mix(in oklab, var(--terracotta) 14%, transparent);
  color: var(--terracotta);
}
.monit-chip-incerto {
  background: rgba(42,26,14,0.06);
  color: rgba(42,26,14,0.55);
}
.monit-chip-mini { font-size: 10px; padding: 3px 7px; }

/* Linha do tempo da mancha (modal "Evolução" — fora do .saude-screen):
   tira horizontal com scroll — foto → chips de mudança → foto → … */
.monit-timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 10px;
}
.monit-tl-foto {
  flex: 0 0 auto;
  width: 84px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}
.monit-tl-foto img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.monit-tl-mes {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgba(42,26,14,0.6);
  margin-top: 4px;
}
.monit-tl-conector {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  max-width: 120px;
}
.monit-tl-sem { color: rgba(42,26,14,0.35); font-size: 16px; }
.monit-tl-resumo {
  margin-top: 10px;
  padding: 10px 12px;
  background: color-mix(in oklab, var(--sage) 10%, transparent);
  border-left: 3px solid color-mix(in oklab, var(--sage) 45%, transparent);
  border-radius: 0 8px 8px 0;
}
.monit-tl-resumo .monit-analise-resumo { font-size: 13px; line-height: 1.5; margin: 8px 0 6px; }
.monit-tl-resumo .monit-analise-badge-limitada {
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 99px;
  background: color-mix(in oklab, var(--terracotta) 14%, transparent); color: var(--terracotta);
}
.monit-analise-disclaimer { font-size: 11px; line-height: 1.45; color: rgba(42,26,14,0.6); }

/* Comparador anterior×nova no modal Foto do mês (fora do .saude-screen) */
.monit-compare {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 300px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.08);
}
.monit-compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.monit-compare-legenda {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(42,26,14,0.6);
  margin: 6px 2px 2px;
}
.monit-compare-range {
  width: 100%;
  margin: 4px 0 6px;
  accent-color: var(--terracotta);
}