@font-face {
  font-family: PalmoSans;
  src: url("assets/fonts/figtree-var.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: PalmoSerif;
  src: url("assets/fonts/young-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  --teal: #075956;
  --teal-dark: #063f3d;
  --aqua: #dff2ef;
  --cream: #f5f7f4;
  --paper: #fff;
  --ink: #173331;
  --muted: #6b7c79;
  --line: #dfe8e5;
  --coral: #e86d5b;
  --gold: #d6a452;
  --blue: #3f75a8;
  --shadow: 0 18px 55px rgba(18, 55, 51, 0.1);
  /* Séries de rotina: uma cor por entidade em todo o portal (validadas para daltonismo). */
  --breast: #0d9488;
  --bottle: #3d4fc4;
  --complement: #cf7a1a;
  --night: #5a4db8;
  --nap: #1198bd;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: PalmoSans, system-ui, sans-serif;
}
button,
input,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
.hidden {
  display: none !important;
}
.eyebrow {
  display: block;
  color: var(--teal);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow.light {
  color: #acd9d4;
}
h1,
h2,
p {
  margin: 0;
}
h1,
h2 {
  font-family: PalmoSerif, Georgia, serif;
  font-weight: 400;
}
.button {
  border: 0;
  border-radius: 14px;
  min-height: 46px;
  padding: 0 17px;
  font-weight: 850;
  transition: 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.button:hover {
  transform: translateY(-1px);
}
.button.primary {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 9px 20px rgba(7, 89, 86, 0.18);
}
.button.primary:hover {
  background: var(--teal-dark);
}
.button.ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.button.wide {
  width: 100%;
  justify-content: space-between;
}
.icon-button {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 1.1rem;
}
.toast {
  position: fixed;
  right: 24px;
  top: 24px;
  z-index: 80;
  background: var(--ink);
  color: #fff;
  border-radius: 15px;
  padding: 13px 17px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: 0.2s;
}
.toast.show {
  opacity: 1;
  transform: none;
}
.toast.error {
  background: #9e3d32;
}
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
}
.login-brand {
  padding: clamp(42px, 8vw, 112px);
  background:
    linear-gradient(145deg, rgba(6, 63, 61, 0.96), rgba(7, 89, 86, 0.91)),
    radial-gradient(circle at 15% 18%, #7bcac2, transparent 36%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.login-brand:after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  right: -130px;
  bottom: -130px;
  box-shadow:
    0 0 0 70px rgba(255, 255, 255, 0.035),
    0 0 0 140px rgba(255, 255, 255, 0.025);
}
.palmo-wordmark {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 44px;
  position: relative;
  z-index: 1;
}
.palmo-wordmark img {
  width: 72px;
  height: 72px;
  border-radius: 23px;
  background: #fff;
  padding: 7px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
  object-fit: contain;
}
.palmo-wordmark div {
  display: flex;
  flex-direction: column;
}
.palmo-wordmark strong {
  font-family: PalmoSans, system-ui, sans-serif;
  font-size: 2.15rem;
  line-height: 1;
  letter-spacing: -0.055em;
}
.palmo-wordmark strong span,
.logo-row strong i {
  color: var(--coral);
  font-style: normal;
  margin-left: 3px;
}
.palmo-wordmark small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.palmo-wordmark em {
  margin-top: 7px;
  color: currentColor;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.72;
}
.palmo-wordmark.light small {
  color: #acd9d4;
}
.login-brand h1 {
  font-size: clamp(2.65rem, 5vw, 5.3rem);
  line-height: 0.98;
  max-width: 850px;
  margin: 14px 0 24px;
  position: relative;
  z-index: 1;
}
.login-brand > p {
  font-size: 1.08rem;
  color: #d2e9e6;
  line-height: 1.7;
  max-width: 600px;
}
.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 48px;
  color: #d7eeeb;
  font-size: 0.84rem;
  font-weight: 750;
}
.trust-list span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.trust-list i {
  font-style: normal;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
}
.login-panel {
  padding: 30px;
  display: grid;
  place-items: center;
  background: #f9fbf9;
}
.login-card {
  width: min(460px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: clamp(27px, 4vw, 52px);
  box-shadow: var(--shadow);
}
.palmo-wordmark.mobile {
  display: none;
  margin-bottom: 28px;
}
.palmo-wordmark.mobile img {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  box-shadow: none;
}
.palmo-wordmark.mobile strong {
  font-size: 1.75rem;
}
.login-card h2 {
  font-size: 2.25rem;
  line-height: 1.08;
  margin: 12px 0;
}
.login-card > p {
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 32px;
}
.login-card label,
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 850;
  color: var(--ink);
}
input,
textarea {
  width: 100%;
  border: 1px solid #d6e2df;
  background: #fbfcfb;
  border-radius: 14px;
  padding: 13px 14px;
  color: var(--ink);
  outline: none;
  transition: 0.16s;
}
input:focus,
textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(7, 89, 86, 0.08);
  background: #fff;
}
.code-input {
  font-size: 2rem;
  text-align: center;
  letter-spacing: 0.25em;
  font-weight: 900;
  margin: 8px 0 4px;
}
.form-error {
  display: block;
  min-height: 20px;
  color: #b64c3f;
  font-weight: 700;
  font-size: 0.75rem;
  margin: 6px 0;
}
.security-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 16px;
  border-radius: 16px;
  background: var(--aqua);
  margin-top: 22px;
  /* #496b67 ja passava no AA (5.05:1 sobre --aqua). Escurecido para 6.06:1
     por conforto em corpo pequeno, nao por reprovacao. */
  color: #3d5f5b;
}
.security-note > span {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #2f7a74;
  margin-top: 1px;
}
.security-note > span svg {
  width: 20px;
  height: 20px;
  display: block;
}
.security-note strong {
  color: #24544f;
  font-weight: 700;
}
.security-note p {
  /* 0.73rem = ~11.7px: pequeno demais para um aviso que precisa ser lido. */
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 0;
}
.app-shell {
  min-height: 100vh;
}
.sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  width: 255px;
  background: var(--teal-dark);
  color: #fff;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
}
.logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  padding: 0 8px 16px;
}
.logo-row img {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #fff;
  padding: 4px;
}
.logo-row div {
  display: flex;
  flex-direction: column;
}
.logo-row strong {
  font-family: PalmoSans, system-ui, sans-serif;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -0.05em;
}
.logo-row small {
  margin-top: 2px;
  color: #fff;
  font-size: 0.52rem;
  font-weight: 750;
  letter-spacing: 0.08em;
}
.logo-row span {
  font-size: 0.56rem;
  color: #acd9d4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 3px;
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.sidebar nav a {
  color: #bcd7d4;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 11px;
  /* Era 0.84rem/780: corpo pequeno com peso muito alto fecha as contraformas
     e custa legibilidade. Um corpo maior com peso menor lê melhor no mesmo espaco. */
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 13px;
}
/* Slot de largura fixa: o icone nao empurra o rotulo, entao todos os textos
   comecam na mesma coluna. */
.sidebar nav a span {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #8fb8b4;
  transition: color .18s ease;
}
.sidebar nav a span svg {
  width: 20px;
  height: 20px;
  display: block;
}
.nav-group {
  margin: 10px 12px 4px;
  color: #8fb8b4;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav-group:first-child {
  margin-top: 0;
}
/* Em telas baixas (notebook com barra do navegador) o menu aperta em vez de rolar. */
@media (max-height: 720px) {
  .sidebar { padding-top: 14px; }
  .logo-row { padding-bottom: 10px; }
  .sidebar nav { gap: 1px; }
  .sidebar nav a { padding: 6px 12px; }
  .nav-group { margin: 6px 12px 2px; }
}
.sidebar nav a:hover,
.sidebar nav a.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.sidebar nav a:hover span,
.sidebar nav a.active span {
  color: #fff;
}
.sidebar-footer {
  display: none;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  /* Era `19px 8px 0`: o conteudo do rodape caia numa coluna 6px a esquerda da
     navegacao. Sem recuo lateral aqui, os filhos usam o mesmo padding dos
     itens de menu e tudo alinha na mesma vertical. */
  padding: 18px 0 0;
  flex-direction: column;
  gap: 12px;
}
.access-clock {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 0 14px;
}
.access-clock > span {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #8fb8b4;
}
.access-clock > span svg {
  width: 20px;
  height: 20px;
  display: block;
}
/* Sair: acao terminal do portal. Fundo sutil para ler como botao e ficar
   ancorado, sem competir com a navegacao. Mesma coluna, corpo e peso do menu. */
.logout-button {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.08);
  color: #e6f4f3;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.logout-button:hover,
.logout-button:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.logout-button > span {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #a8ccc8;
  transition: color 0.18s ease;
}
.logout-button:hover > span,
.logout-button:focus-visible > span {
  color: #fff;
}
.logout-button > span svg {
  width: 20px;
  height: 20px;
  display: block;
}
.access-clock div {
  display: flex;
  flex-direction: column;
}
.access-clock small {
  font-size: 0.62rem;
  color: #9fc3bf;
}
.access-clock strong {
  font-size: 0.75rem;
  margin-top: 3px;
}
.content {
  margin-left: 255px;
}
.topbar {
  height: 84px;
  padding: 0 34px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
}
#menuButton {
  display: none;
}
.child-identity {
  display: flex;
  align-items: center;
  gap: 11px;
}
.child-avatar {
  width: 43px;
  height: 43px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--aqua), #c5e6e1);
  display: grid;
  place-items: center;
  color: var(--teal);
  font-family: PalmoSerif;
  font-size: 1.3rem;
}
.child-identity div:last-child {
  display: flex;
  flex-direction: column;
}
.child-identity small {
  color: var(--muted);
  font-size: 0.63rem;
}
.child-identity strong {
  font-size: 0.9rem;
}
.top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 13px;
}
.access-until {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 12px;
  background: var(--aqua);
  color: var(--teal);
}
.access-until > span,
.logout-top > span {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}
.access-until svg,
.logout-top svg {
  width: 18px;
  height: 18px;
  display: block;
}
.access-until small {
  display: block;
  color: #3d6f6a;
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.access-until strong {
  display: block;
  font-size: 0.82rem;
  line-height: 1.2;
}
.logout-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.logout-top:hover,
.logout-top:focus-visible {
  border-color: #b9d8d2;
  background: #f2f8f6;
  outline: none;
}
.logout-top > span {
  color: var(--teal);
}
.page {
  padding: 34px;
  max-width: 1580px;
  margin: 0 auto;
}
.filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
}
.segmented {
  display: flex;
  padding: 4px;
  border-radius: 14px;
  background: #e9efed;
}
.segmented button,
.mini-tabs button {
  border: 0;
  background: none;
  color: var(--muted);
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 800;
}
.segmented button.active,
.mini-tabs button.active {
  background: #fff;
  color: var(--teal);
  box-shadow: 0 3px 10px rgba(22, 54, 51, 0.08);
}
.custom-dates {
  margin: -10px 0 22px auto;
  width: max-content;
  background: #fff;
  border: 1px solid var(--line);
  padding: 12px;
  border-radius: 16px;
  display: flex;
  gap: 10px;
  align-items: end;
}
.custom-dates label {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 800;
}
.custom-dates input {
  width: 128px;
  padding: 9px 11px;
  font-variant-numeric: tabular-nums;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
  scroll-margin-top: 105px;
}
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 23px;
  padding: 20px;
  min-width: 0;
}
.panel.span-2 {
  grid-column: span 1;
}
.dashboard-grid:first-of-type {
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.7fr);
}
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
}
.panel h2,
.section-heading h2 {
  font-size: 1.55rem;
  margin-top: 4px;
}
.mini-tabs {
  display: flex;
  background: #f0f4f2;
  padding: 3px;
  border-radius: 11px;
}
.chart {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-items: center;
  justify-content: center;
}
.chart.large {
  min-height: 280px;
}
.chart svg {
  width: 100%;
  min-width: 0;
  display: block;
  height: auto;
  overflow: visible;
}
.chart-empty {
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
  padding: 45px 15px;
}
.chart-label {
  font-size: 11px;
  fill: #5d6f6c;
}
.chart-value {
  font-size: 10px;
  fill: #315e5a;
  font-weight: 800;
}
.clinical-summary {
  background: linear-gradient(155deg, #fff, #f5faf8);
}
#attentionList,
.fact-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.attention,
.fact {
  border-radius: 15px;
  padding: 12px;
  background: #f6f9f7;
  border: 1px solid #e5ece9;
}
.attention strong,
.fact strong {
  display: block;
  font-size: 0.78rem;
}
.attention span,
.fact span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.5;
  margin-top: 3px;
}
.attention.warning {
  background: #fff8ef;
  border-color: #f1dfc4;
}
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
}
.timeline-item {
  display: grid;
  grid-template-columns: 104px 16px 1fr;
  gap: 12px;
  min-height: 73px;
}
.timeline-date {
  font-size: 0.68rem;
  color: var(--muted);
  padding-top: 3px;
}
.timeline-node {
  position: relative;
}
.timeline-node:before {
  content: "";
  position: absolute;
  left: 6px;
  top: 7px;
  bottom: -7px;
  width: 1px;
  background: var(--line);
}
.timeline-node:after {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
  border: 2px solid var(--aqua);
}
.timeline-item:last-child .timeline-node:before {
  display: none;
}
.timeline-copy strong {
  font-size: 0.78rem;
}
.timeline-copy p {
  font-size: 0.69rem;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 3px;
}
.consultations-section {
  background: #eaf3f1;
  border-radius: 28px;
  padding: 24px;
  margin-top: 14px;
  scroll-margin-top: 170px;
}
.report-section {
  margin-top: 58px;
  padding-top: 8px;
  scroll-margin-top: 170px;
}
.report-heading {
  display: flex;
  align-items: flex-start;
  margin-bottom: 18px;
}
.report-heading > div {
  position: relative;
}
.report-heading h2 {
  margin: 5px 0 7px;
  color: var(--ink);
  font-family: PalmoSerif, Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  font-weight: 400;
  line-height: 1.05;
}
.report-heading p {
  max-width: 780px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
}
.chapter-number {
  position: absolute;
  left: 0;
  top: 0;
  width: 43px;
  height: 43px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  line-height: 1;
  background: var(--aqua);
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 900;
}
.chapter-number.coral { background:#fff0ed; color:#c45d4c; }
.chapter-number.lavender { background:#f1ebfa; color:#735594; }
.chapter-number.blue { background:#e8eff8; color:#3f75a8; }
.chapter-number.gold { background:#fff2df; color:#a87324; }
.coral-text { color:#c45d4c; }
.lavender-text { color:#735594; }
.blue-text { color:#3f75a8; }
.gold-text { color:#a87324; }
.report-section .panel.span-2 { grid-column:1/-1; }
.growth-grid { grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr); }
.growth-grid .panel.span-2 { grid-column:auto; }
.clinical-chart-panel { background:linear-gradient(155deg,#fff,#f8fcfb); }
.chart-source {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.5;
}
.who-unavailable {
  padding: 8px 12px;
  border-radius: 11px;
  background:#fff7e9;
  color:#866531;
  font-size:.68rem;
  text-align:center;
}
.who-limit,.who-secondary,.who-median,.child-growth-line {
  fill:none;
  vector-effect:non-scaling-stroke;
}
.who-limit { stroke:#8bbab4; stroke-width:1.2; stroke-dasharray:4 4; }
.who-secondary { stroke:#a9cbc7; stroke-width:1; stroke-dasharray:2 5; }
.who-median { stroke:#16837d; stroke-width:2.2; }
.child-growth-line { stroke:var(--coral); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.chart-legend {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  color:#4f625f;
  font-size:.74rem;
  font-weight:700;
}
.who-legend { justify-content:center; margin-top:4px; }
.chart-legend span { display:flex; gap:6px; align-items:center; }
.chart-legend i { width:15px; height:7px; border-radius:5px; display:inline-block; }
.chart-legend .child-line { height:3px; background:var(--coral); }
.chart-legend .who-p50 { height:2px; background:var(--teal); }
.chart-legend .who-band { background:var(--aqua); border:1px solid #b9ded9; }
.chart-legend .mild { background:#8bc6a8; }
.chart-legend .moderate { background:#e2ad54; }
.chart-legend .severe { background:var(--coral); }
.interactive-mark { transition:opacity .15s,filter .15s; outline:none; cursor:crosshair; }
.interactive-mark:hover,.interactive-mark:focus { opacity:.82; filter:drop-shadow(0 3px 5px rgba(13,52,48,.2)); }
.chart-tooltip {
  position:fixed;
  z-index:100;
  width:max-content;
  max-width:min(260px, calc(100vw - 16px));
  padding:9px 12px;
  border-radius:11px;
  background:#173331;
  color:#fff;
  font-size:.68rem;
  font-weight:750;
  line-height:1.4;
  box-shadow:0 12px 30px rgba(11,46,43,.24);
  opacity:0;
  pointer-events:none;
  transform:translateY(5px);
  transition:.13s;
}
.chart-tooltip.show { opacity:1; transform:none; }
.compact-kpis {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.compact-kpi {
  padding:15px 17px;
  border:1px solid var(--line);
  border-radius:17px;
  background:#fff;
}
.compact-kpi strong { display:block; color:var(--teal); font-family:PalmoSans,system-ui,sans-serif; font-size:1.3rem; font-weight:700; letter-spacing:-.01em; }
.compact-kpi span { display:block; margin-top:2px; color:var(--ink); font-size:.78rem; font-weight:750; }
.compact-kpi small { display:block; margin-top:3px; color:var(--muted); font-size:.72rem; line-height:1.4; }
.rank-list { display:flex; flex-direction:column; gap:13px; }
.rank-row > div { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.rank-row strong { font-size:.75rem; }
.rank-row span { color:var(--muted); font-size:.63rem; white-space:nowrap; }
.rank-row > i { display:block; height:7px; margin-top:7px; border-radius:99px; background:#edf3f1; overflow:hidden; }
.rank-row > i em { display:block; height:100%; min-width:4px; border-radius:inherit; background:linear-gradient(90deg,var(--coral),#ef9b8f); }
.rank-row.medication > i em { background:linear-gradient(90deg,#735594,#aa8ccb); }
.medication-status-panel { position:relative; overflow:hidden; }
.medication-status-panel.active { background:linear-gradient(150deg,#fff,#f4faf7); border-color:#cee4dd; }
.medication-status-panel .panel-head { position:relative; z-index:1; }
.treatment-count {
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  background:#edf1f0;
  color:#667470;
  font-size:.58rem;
  font-weight:900;
  white-space:nowrap;
}
.treatment-count.active { background:#dff2e9; color:#24705a; }
.treatment-group-list { display:flex; flex-direction:column; gap:9px; }
.treatment-scroll { max-height:390px; overflow-y:auto; padding-right:5px; overscroll-behavior-y:auto; }
.treatment-item {
  padding:14px 15px;
  border:1px solid #e1eae7;
  border-radius:16px;
  background:#fbfdfc;
}
.treatment-item.active { border-color:#cfe6de; background:#f6fcf9; }
.treatment-item-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.treatment-item-head > div { min-width:0; }
.treatment-item-head strong { display:block; font-size:.77rem; }
.treatment-item-head span { display:block; margin-top:3px; color:var(--teal); font-size:.64rem; font-weight:800; }
.treatment-item-head b { flex:0 0 auto; padding:5px 8px; border-radius:999px; background:#edf1f0; color:#65736f; font-size:.54rem; }
.treatment-item.active .treatment-item-head b { background:#dff2e9; color:#24705a; }
.treatment-item p { margin-top:9px; color:#536965; font-size:.65rem; line-height:1.45; }
.treatment-item small { display:block; margin-top:4px; color:var(--muted); font-size:.6rem; }
.treatment-item em { display:block; margin-top:8px; padding-top:8px; border-top:1px solid #e5eeeb; color:#536965; font-size:.61rem; font-style:normal; line-height:1.5; white-space:pre-wrap; }
.no-active-treatment {
  min-height:126px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:18px;
  border:1px dashed #bddbd1;
  border-radius:17px;
  background:rgba(255,255,255,.72);
}
.no-active-treatment > i { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:#dff2e9; color:#24705a; font-style:normal; font-weight:900; }
.no-active-treatment strong { display:block; color:#225f50; font-size:.78rem; }
.no-active-treatment span { display:block; margin-top:4px; color:var(--muted); font-size:.63rem; line-height:1.45; }
.medication-usage-panel { background:linear-gradient(155deg,#fff,#faf7fd); }
.medication-top-chart { display:flex; flex-direction:column; gap:15px; }
.medication-usage-row { display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; align-items:center; }
.medication-rank { width:28px; height:28px; display:grid; place-items:center; border-radius:10px; background:#f1ebfa; color:#735594; font-family:PalmoSerif,Georgia,serif; font-size:.9rem; }
.medication-usage-label { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.medication-usage-label strong { min-width:0; font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.medication-usage-label span { flex:0 0 auto; color:var(--muted); font-size:.6rem; }
.medication-usage-row i { display:block; height:10px; margin-top:7px; overflow:hidden; border-radius:999px; background:#eeeaf3; }
.medication-usage-row i em { display:block; height:100%; min-width:5px; border-radius:inherit; background:linear-gradient(90deg,#735594,#b497cf); box-shadow:0 3px 8px rgba(115,85,148,.22); }
.clinical-event-list { display:flex; flex-direction:column; gap:0; }
.clinical-event-list.compact { margin-top:14px; max-height:520px; overflow:auto; padding-right:5px; }
.clinical-event {
  display:grid;
  grid-template-columns:108px 18px minmax(0,1fr);
  gap:11px;
  padding:0;
  border:0;
  background:transparent;
}
.clinical-event time { padding-top:13px; color:var(--muted); font-size:.62rem; line-height:1.45; text-align:right; }
.clinical-event time small { display:block; margin-top:3px; color:var(--coral); font-size:.54rem; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.event-node { position:relative; display:block; min-height:76px; }
.event-node:before { content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background:#dce9e5; }
.event-node:after { content:""; position:absolute; left:3px; top:17px; width:10px; height:10px; border:2px solid var(--teal); border-radius:50%; background:#fff; box-shadow:0 0 0 4px #eef7f4; }
.clinical-event:first-child .event-node:before { top:22px; }
.clinical-event:last-child .event-node:before { bottom:calc(100% - 22px); }
.event-content { margin-bottom:12px; padding:13px 15px; border:1px solid #e4ece9; border-radius:15px; background:#fbfdfc; }
.clinical-event strong { display:block; font-size:.76rem; }
.clinical-event span { display:block; margin-top:3px; color:var(--teal); font-size:.65rem; font-weight:750; line-height:1.45; }
.clinical-event p,.fact p { margin-top:7px; color:#596d69; font-size:.67rem; line-height:1.55; white-space:pre-wrap; }
.event-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.event-title-row strong { min-width:0; }
.event-title-row .dose-status { flex:0 0 auto; display:inline-flex; margin:0; padding:4px 8px; border-radius:999px; font-size:.56rem; white-space:nowrap; }
.exam-result-status { flex:0 0 auto; display:inline-flex; margin:0; padding:4px 8px; border-radius:999px; background:#fff3d8; color:#98701d; font-size:.54rem; font-style:normal; font-weight:850; letter-spacing:.025em; text-transform:uppercase; white-space:nowrap; }
.exam-result-status.ready { background:#def3ee; color:#087565; }
.dose-status.confirmed { color:#176a50; background:#e1f4e9; }
.dose-status.skipped,.dose-status.cancelled { color:#6d7774; background:#edf1f0; }
.dose-status.overdue { color:#a44338; background:#fff0ed; }
.dose-status.pending { color:#5d4a83; background:#f1ebfa; }
.fact small { display:block; margin-top:4px; color:var(--muted); font-size:.61rem; line-height:1.45; }
.symptom-fact + .symptom-fact { border-top:1px solid #e7eeec; padding-top:11px; }
.panel-description { margin-top:4px; color:var(--muted); font-size:.66rem; line-height:1.5; }
.medication-dose-scroll {
  max-height: 520px;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  padding-right: 7px;
  scrollbar-color: #a8cbc6 #edf4f2;
  scrollbar-width: thin;
}
.medication-dose-scroll::-webkit-scrollbar,
.vaccine-calendar::-webkit-scrollbar { width:8px; height:8px; }
.medication-dose-scroll::-webkit-scrollbar-track,
.vaccine-calendar::-webkit-scrollbar-track { background:#edf4f2; border-radius:999px; }
.medication-dose-scroll::-webkit-scrollbar-thumb,
.vaccine-calendar::-webkit-scrollbar-thumb { background:#a8cbc6; border-radius:999px; }
.read-only-badge,
.today-date {
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  background:#eef7f5;
  color:var(--teal);
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.vaccine-panel {
  background:linear-gradient(150deg,#fff 0%,#fbfefd 62%,#f2f9f7 100%);
  overflow:hidden;
}
.vaccine-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:18px;
}
.vaccine-summary > div {
  padding:13px 15px;
  border:1px solid #dceae6;
  border-radius:16px;
  background:rgba(255,255,255,.82);
}
.vaccine-summary strong {
  display:block;
  font-family:PalmoSerif,Georgia,serif;
  font-size:1.8rem;
  font-weight:400;
  line-height:1;
}
.vaccine-summary span { display:block; margin-top:5px; color:var(--muted); font-size:.63rem; font-weight:800; }
.vaccine-summary .applied strong { color:#257b65; }
.vaccine-summary .upcoming strong { color:#3f75a8; }
.vaccine-summary .attention strong { color:var(--coral); }
.vaccine-calendar {
  position:relative;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  padding:4px 4px 14px;
  scrollbar-color:#a8cbc6 #edf4f2;
  scrollbar-width:thin;
}
.vaccine-track {
  min-width:max-content;
  display:flex;
  align-items:flex-start;
  gap:4px;
  position:relative;
  padding:10px 8px 13px;
}
.vaccine-track:before {
  content:"";
  position:absolute;
  left:48px;
  right:48px;
  top:38px;
  height:2px;
  background:#d6e6e2;
}
.vaccine-node {
  width:118px;
  min-height:105px;
  padding:0 7px;
  border:0;
  border-radius:18px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  text-align:center;
  cursor:pointer;
  position:relative;
  z-index:1;
  transition:background .16s ease,transform .16s ease,color .16s ease;
}
.vaccine-node:hover,.vaccine-node:focus-visible { background:#edf6f3; color:var(--teal); outline:none; transform:translateY(-2px); }
.vaccine-node.selected { background:#e7f4f1; color:var(--teal); }
.vaccine-node > i {
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin:0 auto 8px;
  border:3px solid #a9cbc5;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 5px #f5faf8;
  color:var(--teal);
  font-style:normal;
}
.vaccine-node > i b { font-family:PalmoSerif,Georgia,serif; font-size:1.2rem; font-weight:500; }
.vaccine-node.applied > i { border-color:#63a78e; background:#e9f6f0; }
.vaccine-node.overdue > i { border-color:#df7c6e; background:#fff0ed; color:#ac4c40; }
.vaccine-node.month.selected > i { border-color:var(--teal); box-shadow:0 0 0 5px #dcefeb; }
.vaccine-node > span { display:block; font-size:.59rem; font-weight:900; letter-spacing:.035em; white-space:nowrap; }
.vaccine-node > small { display:block; margin-top:4px; color:#397966; font-size:.53rem; font-weight:800; }
.vaccine-group-details {
  margin-top:13px;
  border:1px solid #dfeae7;
  border-radius:19px;
  background:rgba(255,255,255,.9);
  overflow:hidden;
}
.vaccine-group-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 17px;
  border-bottom:1px solid #e4eeeb;
  background:#f8fbfa;
}
.vaccine-group-head span { color:var(--muted); font-size:.56rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.vaccine-group-head h3 { margin-top:3px; font-size:1rem; }
.vaccine-group-head > b { color:var(--teal); font-size:.62rem; white-space:nowrap; }
.vaccine-dose-list { display:flex; flex-direction:column; }
.vaccine-dose {
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  padding:13px 17px;
}
.vaccine-dose + .vaccine-dose { border-top:1px solid #e8efed; }
.vaccine-dose > i {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#edf4f2;
  color:var(--teal);
  font-size:.69rem;
  font-style:normal;
  font-weight:900;
}
.vaccine-dose.applied > i { background:#e2f3ea; color:#26735d; }
.vaccine-dose.overdue > i { background:#fff0ed; color:#b14f42; }
.vaccine-dose strong { display:block; font-size:.72rem; }
.vaccine-dose span { display:block; margin-top:3px; color:var(--muted); font-size:.61rem; }
.vaccine-dose > b { color:#586b67; font-size:.59rem; font-weight:850; text-align:right; }
.vaccine-administered-heading { display:flex; justify-content:space-between; margin-top:25px; }
.vaccine-administered-heading h3 { margin-top:3px; font-size:1rem; }
.vaccine-history { max-height:360px !important; }
.vaccine-disclaimer { margin-top:16px; padding:11px 13px; border-radius:13px; background:#fff8eb; color:#80663b; font-size:.6rem; line-height:1.55; }
.today-panel { background:linear-gradient(155deg,#fff,#f4faf8); }
.panel-column { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.allergy-panel { background: linear-gradient(155deg, #fff, #fff7f5); }
.allergy-fact { border-color: #f3d6cf; background: #fff6f3; }
.allergy-fact strong { color: #a23f33; font-size: .84rem; }
.allergy-fact span { color: #6b5a57; }
.today-timeline { max-height:520px; overflow-y:auto; padding-right:7px; }
.file-library-panel { padding:0; overflow:hidden; }
.file-toolbar {
  display:grid;
  grid-template-columns:minmax(240px,1.5fr) minmax(190px,.65fr) auto;
  gap:13px;
  align-items:end;
  padding:19px 20px;
  border-bottom:1px solid var(--line);
  background:#fbfdfc;
}
.file-toolbar label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:.62rem; font-weight:850; }
.file-toolbar input,.file-toolbar select { width:100%; padding:10px 12px; border:1px solid #dbe6e3; border-radius:12px; background:#fff; color:var(--ink); font:inherit; font-size:.72rem; outline:none; }
.file-toolbar input:focus,.file-toolbar select:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(22,131,125,.1); }
.file-total { min-width:112px; padding:8px 12px; border-radius:13px; background:var(--aqua); text-align:center; }
.file-total strong { display:block; color:var(--teal); font-family:PalmoSerif,Georgia,serif; font-size:1.35rem; font-weight:400; }
.file-total span { display:block; color:var(--muted); font-size:.57rem; }
.files-list { display:flex; flex-direction:column; }
.file-row { display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:15px; align-items:center; padding:17px 20px; }
.file-row + .file-row { border-top:1px solid #e7eeec; }
.file-kind { width:52px; height:58px; display:grid; place-items:center; position:relative; border-radius:10px 10px 14px 14px; background:#edf3fa; color:var(--blue); }
.file-kind:before { content:""; position:absolute; right:0; top:0; width:14px; height:14px; border-radius:0 10px 0 7px; background:#d5e4f2; }
.file-kind.image { color:var(--teal); background:#e6f4f1; }
.file-kind.image:before { background:#cce9e3; }
.file-kind strong { font-size:.62rem; letter-spacing:.04em; }
.file-information { min-width:0; }
.file-information > span { color:var(--blue); font-size:.58rem; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.file-information h3 { margin-top:3px; font-size:.82rem; line-height:1.35; }
.file-information p { margin-top:3px; color:#62736f; font-size:.66rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-information small { display:block; margin-top:5px; color:var(--muted); font-size:.59rem; }
.file-actions { display:flex; gap:8px; }
.button.compact { min-height:35px; padding:8px 12px; border-radius:11px; font-size:.64rem; }
.inline-summary { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.inline-summary.standalone { justify-content:flex-start; margin:-7px 0 8px; }
.inline-summary span { padding:7px 10px; border-radius:10px; background:var(--aqua); color:var(--muted); font-size:.62rem; }
.inline-summary b { color:var(--teal); }
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 18px;
}
.section-heading p {
  color: var(--muted);
  font-size: 0.74rem;
  margin-top: 4px;
}
.consultation-list {
  display: grid;
  gap: 11px;
}
.consultation-summary { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.consultation-summary > div { padding: 18px 12px; border-radius: 15px; background: #edf7f3; text-align: center; }
.consultation-summary > div:nth-child(2) { background: #eef5fc; }
.consultation-summary > div:nth-child(3) { background: #f3effa; }
.consultation-summary > div:nth-child(4) { background: #fff5e9; }
.consultation-summary strong { display: block; color: var(--teal); font-size: 1.18rem; overflow-wrap: break-word; }
.consultation-summary span { display: block; margin-top: 7px; color: var(--muted); font-size: .78rem; }
.consultation-upcoming { padding: 19px; border: 1px solid #d5e7f3; border-radius: 18px; background: #eef7fd; }
.consultation-upcoming > span, .consultation-upcoming > small { display: block; color: var(--muted); font-size: .75rem; }
.consultation-upcoming > strong { display: block; margin-top: 8px; font-size: 1.05rem; color: var(--teal); }
.consultation-upcoming p { margin: 7px 0; font-size: .85rem; }
.consultation-explanation { color: var(--muted); font-size: .76rem; line-height: 1.5; }
.consultation-track { display: grid; gap: 12px; border-left: 1px solid #cbded8; padding-left: 20px; margin-left: 6px; }
.consultation-refined { position: relative; min-width: 0; }
.consultation-refined::before { content: ""; position: absolute; left: -27px; top: 20px; width: 10px; height: 10px; border: 2px solid var(--teal); background: white; border-radius: 50%; }
.consultation-reason { color: var(--muted); font-size: .8rem; line-height: 1.5; }
.consultation-details { padding: 12px; background: #f4f7f8; border-radius: 12px; margin-top: 12px; }
.consultation-details summary { cursor: pointer; color: var(--teal); font-size: .78rem; font-weight: 700; line-height: 1.5; }
.consultation-refined .provider { font-size: .82rem; line-height: 1.5; }
.consultation-refined time { white-space: normal; font-size: .75rem; }
.consultation {
  background: #fff;
  border: 1px solid #d8e6e2;
  border-radius: 19px;
  padding: 17px;
}
.consultation-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.consultation h3 {
  margin: 0;
  font-size: 0.9rem;
}
.consultation time {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
}
.consultation-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}
.consultation-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid #b9d8d2;
  border-radius: 10px;
  background: #f3faf8;
  color: var(--teal);
  font-size: 0.63rem;
  font-weight: 850;
  transition: background .15s, border-color .15s, transform .15s;
}
.consultation-edit:hover {
  border-color: #80b8ae;
  background: var(--aqua);
  transform: translateY(-1px);
}
.consultation .provider {
  font-size: 0.67rem;
  color: var(--teal);
  font-weight: 850;
  margin-top: 4px;
}
.consultation .notes {
  font-size: 0.75rem;
  color: #516966;
  line-height: 1.65;
  white-space: pre-wrap;
  margin-top: 12px;
}
.attachments {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.attachments a {
  font-size: 0.67rem;
  color: var(--teal);
  font-weight: 800;
  text-decoration: none;
  background: var(--aqua);
  border-radius: 10px;
  padding: 8px 10px;
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 22px;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 42, 39, 0.58);
  backdrop-filter: blur(6px);
}
.modal-card {
  position: relative;
  width: min(780px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border-radius: 27px;
  padding: 26px;
  box-shadow: 0 30px 90px rgba(8, 34, 31, 0.25);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.modal-head h2 {
  font-size: 1.9rem;
  margin: 5px 0;
}
.modal-head p {
  font-size: 0.72rem;
  color: var(--muted);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.form-grid .full {
  grid-column: 1/-1;
}
.form-grid textarea {
  resize: vertical;
}
.attachment-picker {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 76px;
  padding: 13px 15px;
  border: 1px dashed #9fc7c0;
  border-radius: 17px;
  background: linear-gradient(145deg, #f8fcfb, #eef8f5);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.attachment-picker:hover,
.attachment-picker:focus-within {
  border-color: var(--teal);
  background: #f1faf7;
  box-shadow: 0 0 0 3px rgba(7, 89, 86, .07);
}
.attachment-picker input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.attachment-picker > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--aqua);
  color: var(--teal);
  font-size: 1.15rem;
  font-style: normal;
  font-weight: 900;
}
.attachment-picker > span {
  min-width: 0;
}
.attachment-picker strong,
.attachment-picker small {
  display: block;
}
.attachment-picker strong {
  overflow: hidden;
  color: var(--ink);
  font-size: .74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-picker small {
  margin-top: 4px;
  color: var(--muted);
  font-size: .61rem;
  font-weight: 500;
}
.attachment-picker > b {
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--teal);
  color: #fff;
  font-size: .63rem;
  white-space: nowrap;
}
.existing-consultation-files {
  display: grid;
  gap: 14px;
  padding: 15px;
  border: 1px solid #dce9e5;
  border-radius: 15px;
  background: #fbfdfc;
}
.existing-consultation-files section > strong,
.existing-consultation-files section > span {
  display: block;
}
.existing-consultation-files section + section {
  padding-top: 13px;
  border-top: 1px solid #e2eeeb;
}
.existing-consultation-files section > strong { font-size: .7rem; }
.existing-consultation-files section > span { margin-top: 3px; color: var(--muted); font-size: .61rem; }
.consultation-file-list { display: grid; gap: 7px; margin-top: 10px; }
.consultation-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #dcebe7;
  border-radius: 11px;
  background: var(--aqua);
}
.consultation-file > span { min-width: 0; }
.consultation-file b,
.consultation-file small { display: block; }
.consultation-file b {
  overflow: hidden;
  color: var(--teal);
  font-size: .64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.consultation-file small { margin-top: 2px; color: var(--muted); font-size: .56rem; }
.consultation-file button {
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid #b8d8d1;
  border-radius: 8px;
  background: #fff;
  color: #a44f44;
  font: inherit;
  font-size: .56rem;
  font-weight: 800;
  cursor: pointer;
}
.consultation-file button:hover { border-color: #d89489; background: #fff7f5; }
.consultation-file.pending { border-style: dashed; }
.consultation-file.removed { border-color: #ead5d1; background: #faf4f2; opacity: .78; }
.consultation-file.removed b { color: #8a7672; text-decoration: line-through; }
.consultation-file.removed button { color: var(--teal); }
.consultation-file.removed button:hover { border-color: #8ebdb4; background: #f1faf7; }
@media (max-width: 560px) {
  .consultation-file { align-items: flex-start; }
  .consultation-file button { padding: 6px; }
}
.feeding-interval-panel { background: linear-gradient(155deg, #fff, #f3faf8); }
.feeding-top { grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); }
/* Tabela-resumo de um capítulo: rótulo à esquerda, valor forte e detalhe à direita. */
.summary-table { width: 100%; border-collapse: collapse; }
.summary-table th { width: 44%; padding: 10px 10px 10px 0; border-bottom: 1px solid #edf2f0; color: #3f5451; font-size: .82rem; font-weight: 600; text-align: left; vertical-align: top; line-height: 1.35; }
.summary-table td { padding: 10px 0; border-bottom: 1px solid #edf2f0; vertical-align: top; }
.summary-table tr:last-child th, .summary-table tr:last-child td { border-bottom: 0; }
.summary-table strong { display: block; color: var(--teal); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.summary-table small { display: block; margin-top: 2px; color: var(--muted); font-size: .74rem; line-height: 1.4; }
.feeding-legend { justify-content: center; margin-top: 5px; }
.feeding-legend .breast { background: var(--breast); }
.feeding-legend .bottle { background: var(--bottle); }
.feeding-legend .translactation { background: var(--complement); }
.feeding-distribution { min-height: 180px; justify-content: center; }
.feeding-rank progress {
  width: 100%;
  height: 7px;
  margin-top: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 99px;
  background: #edf3f1;
  color: var(--teal);
  appearance: none;
}
.feeding-rank progress::-webkit-progress-bar { background: #edf3f1; border-radius: 99px; }
.feeding-rank progress::-webkit-progress-value { background: var(--teal); border-radius: 99px; }
.feeding-rank progress::-moz-progress-bar { background: var(--teal); border-radius: 99px; }
.feeding-rank progress { color: var(--breast); }
.feeding-rank progress::-webkit-progress-value { background: var(--breast); }
.feeding-rank progress::-moz-progress-bar { background: var(--breast); }
.feeding-rank.bottle progress { color: var(--bottle); }
.feeding-rank.bottle progress::-webkit-progress-value { background: var(--bottle); }
.feeding-rank.bottle progress::-moz-progress-bar { background: var(--bottle); }
.feeding-rank.translactation progress { color: var(--complement); }
.feeding-rank.translactation progress::-webkit-progress-value { background: var(--complement); }
.feeding-rank.translactation progress::-moz-progress-bar { background: var(--complement); }
.feeding-history { max-height: 520px; overflow-y: auto; padding-right: 5px; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
@media (max-width: 1100px) {
  .dashboard-grid:first-of-type {
    grid-template-columns: 1fr;
  }
  .growth-grid,
  .feeding-top {
    grid-template-columns: 1fr;
  }
  .panel.span-2 {
    grid-column: auto;
  }
  .login-brand {
    padding: 60px;
  }
  .login-brand h1 {
    font-size: 3.4rem;
  }
}
@media (max-width: 820px) {
  .login-shell {
    grid-template-columns: 1fr;
  }
  .login-brand {
    display: none;
  }
  .login-panel {
    /* Sem a coluna da marca, o card ficava centralizado numa altura de tela
       inteira e caia ~96px abaixo do topo. Alinhado ao topo com respiro fixo.
       svh acompanha a barra do navegador que recolhe; vh fica de fallback.
       O safe-area importa porque o viewport usa viewport-fit=cover. */
    min-height: 100vh;
    min-height: 100svh;
    align-items: start;
    padding: calc(28px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
  }
  .palmo-wordmark.mobile {
    display: flex;
  }
  .sidebar {
    transform: translateX(-100%);
    transition: 0.2s;
  }
  .sidebar.open {
    transform: none;
    box-shadow: 20px 0 50px rgba(8, 34, 31, 0.2);
  }
  .content {
    margin-left: 0;
  }
  .topbar {
    height: 74px;
    padding: 0 16px;
    gap: 10px;
  }
  #menuButton {
    display: block;
  }
  .sidebar-footer {
    display: flex;
  }
  .access-until small {
    display: none;
  }
  .logout-top {
    width: 42px;
    padding: 0;
    justify-content: center;
  }
  .logout-top b {
    display: none;
  }
  .page {
    padding: 22px 16px;
  }
  .filter-bar {
    width: 100%;
    flex-wrap: wrap;
  }
  .segmented {
    width: 100%;
  }
  .segmented button {
    flex: 1;
    padding: 9px 5px;
  }
  .custom-dates {
    width: 100%;
    margin: 0 0 20px;
    flex-wrap: wrap;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .compact-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .clinical-event-list {
    grid-template-columns: 1fr;
  }
  .vaccine-node { width:104px; }
  .vaccine-dose { grid-template-columns:32px minmax(0,1fr); }
  .vaccine-dose > b { grid-column:2; text-align:left; }
  .file-toolbar { grid-template-columns:1fr 1fr; }
  .file-search { grid-column:1/-1; }
  .file-total { min-width:0; }
  .file-row { grid-template-columns:52px minmax(0,1fr); }
  .file-actions { grid-column:2; }
  .report-section {
    margin-top: 42px;
  }
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .consultations-section {
    padding: 18px;
  }
  .modal {
    padding: 10px;
  }
  .modal-card {
    padding: 20px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-grid .full {
    grid-column: auto;
  }
}
@media (max-width: 520px) {
  .top-actions .button {
    font-size: 0;
    width: 42px;
    padding: 0;
  }
  .top-actions .button:first-letter {
    font-size: 1rem;
  }
  .child-identity small {
    display: none;
  }
  .compact-kpis {
    grid-template-columns: 1fr 1fr;
  }
  .compact-kpi {
    padding: 13px;
  }
  .compact-kpi strong {
    font-size: 1.1rem;
  }
  .panel {
    padding: 16px;
  }
  .panel-head {
    flex-direction: column;
  }
  .vaccine-summary { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .vaccine-summary > div { padding:11px; }
  .vaccine-summary strong { font-size:1.45rem; }
  .vaccine-group-head { align-items:flex-start; }
  .mini-tabs {
    width: 100%;
  }
  .mini-tabs button {
    flex: 1;
  }
  .timeline-item {
    grid-template-columns: 77px 14px 1fr;
    gap: 8px;
  }
  .clinical-event {
    grid-template-columns: 78px 16px minmax(0,1fr);
    gap: 7px;
  }
  .clinical-event time { font-size:.56rem; }
  .medication-usage-label { align-items:flex-start; flex-direction:column; gap:3px; }
  .medication-usage-label span { white-space:normal; }
  .treatment-item-head { flex-direction:column; gap:8px; }
  .event-node:before { left:7px; }
  .event-node:after { left:2px; }
  .event-content { padding:11px; }
  .event-title-row { flex-direction:column; gap:7px; }
  .file-toolbar { grid-template-columns:1fr; }
  .file-search { grid-column:auto; }
  .file-row { grid-template-columns:42px minmax(0,1fr); gap:11px; padding:15px; }
  .file-kind { width:42px; height:48px; }
  .file-actions { grid-column:1/-1; }
  .file-actions .button { flex:1; }
  .consultation-head {
    flex-direction: column;
    gap: 5px;
  }
  .consultation-meta { align-items: flex-start; }
  .attachment-picker { grid-template-columns: 38px minmax(0, 1fr); }
  .attachment-picker > i { width: 38px; height: 38px; }
  .attachment-picker > b { grid-column: 1/-1; text-align: center; }
}

/* Mobile portal */
.sidebar-backdrop,
.mobile-action-label,
.mobile-header-brand { display:none; }

body.modal-open {
  position:fixed;
  width:100%;
  overflow:hidden;
}

.modal {
  overflow:hidden;
  overscroll-behavior:contain;
}

.modal-card {
  min-width:0;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.modal-card > *,
.form-grid,
.form-grid > *,
.existing-consultation-files,
.existing-consultation-files section,
.consultation-file-list,
.consultation-file {
  min-width:0;
  max-width:100%;
}

@media (max-width: 820px) {
  /* Contém o transbordo horizontal sem quebrar o `position:sticky` da .topbar.
     `overflow-x:hidden` faria o navegador calcular `overflow-y:auto`, e cada
     ancestral viraria um container de rolagem — a barra deixava de grudar no topo.
     `clip` corta sem criar container. Na raiz (html/body) nem `clip` serve: ele
     propaga para a viewport e trava a rolagem da página, então lá vai só max-width. */
  html,body { max-width:100%; }
  .app-shell,.content { max-width:100%; overflow-x:clip; }
  body.menu-open { overflow:hidden; }
  .sidebar {
    z-index:72;
    width:min(86vw,320px);
    padding:22px 17px calc(20px + env(safe-area-inset-bottom));
    visibility:hidden;
    transition:transform .22s ease,visibility .22s ease;
  }
  .sidebar.open { visibility:visible; }
  .sidebar-backdrop {
    position:fixed;
    z-index:71;
    inset:0;
    display:block;
    border:0;
    background:rgba(8,34,31,.5);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    backdrop-filter:blur(3px);
  }
  body.menu-open .sidebar-backdrop { opacity:1; pointer-events:auto; }
  .sidebar nav a,.sidebar-footer button { min-height:44px; }
  .topbar { min-height:72px; height:auto; padding:10px 14px; }
  #menuButton { flex:0 0 44px; width:44px; height:44px; }
  .child-identity { min-width:0; flex:1 1 auto; }
  .child-identity > div:last-child { min-width:0; }
  .child-identity strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .top-actions { flex:0 0 auto; }
  .page { padding:22px 14px calc(34px + env(safe-area-inset-bottom)); }
  .filter-bar > .button { width:100%; }
  .custom-dates label,.custom-dates .button { flex:1 1 140px; }
  .custom-dates input { width:100%; }
  .panel,.consultations-section { border-radius:20px; }
  .mini-tabs {
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
  }
  .mini-tabs button { flex:0 0 auto; white-space:nowrap; }
  .chart-legend { gap:10px 14px; }
  .chart-legend span { min-width:0; }
  .chart-legend i { flex-shrink:0; }
  .chart {
    justify-content:flex-start;
    max-width:100%;
    overflow:visible;
  }
  .vaccine-calendar { overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
  .medication-dose-scroll,.clinical-event-list.compact { overscroll-behavior-y:auto; }
  .form-grid input,.form-grid textarea,.form-grid select,.custom-dates input { font-size:16px; }
}

@media (max-width: 520px) {
  .topbar {
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 42px;
    gap:8px 10px;
    padding:10px 10px 9px;
  }
  #menuButton { grid-column:1; grid-row:1; }
  .mobile-header-brand {
    grid-column:2;
    grid-row:1;
    display:flex;
    align-items:center;
    justify-self:center;
    min-width:0;
    color:var(--ink);
    text-decoration:none;
  }
  .mobile-header-brand img {
    width:34px;
    height:34px;
    flex:0 0 auto;
    padding:3px;
    border-radius:10px;
    background:#fff;
  }
  .mobile-header-brand > span {
    display:flex;
    min-width:0;
    margin-left:8px;
    flex-direction:column;
  }
  .mobile-header-brand strong {
    font-size:1rem;
    line-height:1;
    letter-spacing:-.04em;
  }
  .mobile-header-brand strong i { color:var(--coral); font-style:normal; }
  .mobile-header-brand small {
    margin-top:3px;
    color:var(--muted);
    font-size:.48rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .top-actions { grid-column:3; grid-row:1; margin:0; }
  .access-until { display:none; }
  .child-identity {
    grid-column:1/-1;
    grid-row:2;
    width:100%;
    padding:9px 4px 0;
    border-top:1px solid var(--line);
  }
  .child-avatar { width:38px; height:38px; border-radius:12px; font-size:1.05rem; }
  .child-identity { gap:8px; }
  .child-identity small { display:block; }
  .child-identity strong { max-width:calc(100vw - 84px); font-size:.82rem; }
  .desktop-action-label { display:none; }
  .mobile-action-label { display:inline; font-size:1.2rem; line-height:1; }
  .top-actions .button {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    min-height:42px;
    font-size:inherit;
  }
  .segmented { overflow-x:auto; }
  .segmented button { min-width:68px; }
  .report-heading h2,.panel h2,.section-heading h2 { font-size:1.28rem; line-height:1.12; }
  .panel-description,.report-heading p { font-size:.7rem; }
  .chart { margin-inline:0; }
  .timeline-item {
    grid-template-columns:15px minmax(0,1fr);
    column-gap:10px;
    min-height:0;
    padding-bottom:14px;
  }
  .timeline-date {
    grid-column:2;
    grid-row:1;
    padding-top:0;
    font-size:.62rem;
    font-weight:750;
  }
  .timeline-node { grid-column:1; grid-row:1/3; }
  .timeline-copy { grid-column:2; grid-row:2; }
  .timeline-node:before { top:6px; bottom:-14px; }
  .clinical-event {
    grid-template-columns:16px minmax(0,1fr);
    gap:0 9px;
    padding-bottom:13px;
  }
  .clinical-event time {
    grid-column:2;
    grid-row:1;
    padding:0 0 6px;
    text-align:left;
    font-size:.59rem;
    font-weight:750;
  }
  .clinical-event time small { display:inline; margin:0 0 0 6px; }
  .event-node { grid-column:1; grid-row:1/3; min-height:100%; }
  .event-node:before { left:7px; }
  .event-node:after { left:2px; top:3px; }
  .clinical-event:first-child .event-node:before { top:8px; }
  .clinical-event:last-child .event-node:before { bottom:calc(100% - 8px); }
  .event-content { grid-column:2; grid-row:2; margin-bottom:0; }
  .vaccine-summary span { line-height:1.25; }
  .vaccine-group-details { padding:14px; }
  .vaccine-administered-heading { align-items:flex-start; }
  .file-information h3,.file-information p,.consultation-file b { overflow-wrap:anywhere; }
  .consultations-section { margin-inline:-2px; padding:16px 14px; }
  .consultation { padding:16px; }
  .modal { align-items:end; padding:0; }
  .modal-card {
    width:100%;
    max-height:92dvh;
    overflow-y:auto;
    overflow-x:hidden;
    border-radius:24px 24px 0 0;
    padding:20px 16px calc(18px + env(safe-area-inset-bottom));
    touch-action:pan-y;
  }
  .form-grid { width:100%; overflow:hidden; }
  .form-grid label { width:100%; }
  .form-grid input,.form-grid textarea,.form-grid select { width:100%; max-width:100%; }
  .attachment-picker { width:100%; overflow:hidden; }
  .existing-consultation-files { width:100%; overflow:hidden; }
  .consultation-file { align-items:flex-start; flex-wrap:wrap; }
  .consultation-file > span { flex:1 1 150px; max-width:100%; }
  .consultation-file button { max-width:100%; }
  .modal-head { margin-bottom:17px; }
  .modal-head h2 { font-size:1.55rem; }
  .modal-actions {
    position:sticky;
    bottom:calc(-18px - env(safe-area-inset-bottom));
    z-index:2;
    margin:18px -16px calc(-18px - env(safe-area-inset-bottom));
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    border-top:1px solid var(--line);
  }
  .modal-actions .button { flex:1; }
}

.birth-history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.birth-history-panel h3{margin:0 0 16px;color:var(--teal,#006d6b);font-size:18px}
.birth-history-panel dl{display:grid;gap:12px;margin:0}
.birth-history-panel dl>div{padding:12px 14px;border-radius:12px;background:#f2f8f5;min-width:0}
.birth-history-panel dt{font-size:13px;color:#687873;margin-bottom:5px}
.birth-history-panel dd{margin:0;color:#172321;font-size:15px;font-weight:600;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:700px){.birth-history-grid{grid-template-columns:minmax(0,1fr)}}

/* Barras de ranking (sintomas, medicamentos): <progress>, porque a CSP bloqueia style inline. */
.rank-bar { display: block; width: 100%; height: 7px; margin-top: 7px; border: 0; border-radius: 99px; overflow: hidden; background: #edf3f1; color: var(--coral); appearance: none; }
.rank-bar::-webkit-progress-bar { background: #edf3f1; border-radius: 99px; }
.rank-bar::-webkit-progress-value { background: var(--coral); border-radius: 99px; }
.rank-bar::-moz-progress-bar { background: var(--coral); border-radius: 99px; }
.rank-bar.medication { height: 10px; color: #735594; }
.rank-bar.medication::-webkit-progress-value { background: #735594; }
.rank-bar.medication::-moz-progress-bar { background: #735594; }

/* ===================================================================
   Visão geral da consulta (overview.js). Tudo abaixo é novo; as regras
   dos capítulos continuam acima. Tamanhos de corpo aqui ficam entre
   0.74rem e 0.95rem por serem lidos em consultório, não de relance.
   =================================================================== */
.overview { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 100px; }
.patient-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px 28px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
}
.patient-main { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.patient-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--aqua), #c5e6e1);
  color: var(--teal);
  font-family: PalmoSerif, Georgia, serif;
  font-size: 1.6rem;
}
.patient-avatar.has-photo, .child-avatar.has-photo { overflow: hidden; padding: 0; background: #e6efec; }
.patient-avatar img, .child-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.patient-title { flex: 1 1 260px; min-width: 0; }
.patient-title h1 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; text-wrap: balance; }
.patient-meta { margin-top: 4px; color: var(--muted); font-size: .88rem; }
.patient-ages { display: flex; flex-wrap: wrap; gap: 10px; }
.age-block { min-width: 150px; padding: 10px 14px; border: 1px solid #e1ebe8; border-radius: 14px; background: #f3f8f6; }
.age-block span, .fact-cell dt, .consult-today span, .consult-reference label, .consult-reference > span, .growth-fact span, .gain-row span, .change-label, .measure-table th, .development-domain h4, .attention-kind, .since-kind {
  display: block;
  color: #4f625f;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.age-block strong { display: block; margin-top: 3px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.age-block small { display: block; margin-top: 3px; color: var(--muted); font-size: .74rem; line-height: 1.4; }
.age-block.corrected { border-color: #d3e0f2; background: #eef3fb; }
.age-block.corrected strong { color: #2f5f96; }
.age-block.missing { border-color: #f0e2c3; background: #fff8ec; }
.patient-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 18px; align-content: start; margin: 0; }
.fact-cell dd { margin: 3px 0 0; font-size: .9rem; font-weight: 600; line-height: 1.4; }
.fact-cell.muted dd { color: var(--muted); font-weight: 500; }
.fact-cell.alert dd { color: #a23f33; }
.consult-context { display: flex; flex-direction: column; gap: 10px; }
.consult-today { padding: 12px 14px; border-radius: 14px; background: var(--aqua); }
.consult-today span, .consult-reference label, .consult-reference > span { color: #24544f; }
.consult-today strong { display: block; margin-top: 3px; font-size: .95rem; }
.consult-today small, .consult-reference small { display: block; margin-top: 3px; color: #3d5f5b; font-size: .78rem; line-height: 1.4; }
.consult-reference select {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #d6e2df;
  border-radius: 12px;
  background: #fbfcfb;
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
}
.consult-reference select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(7, 89, 86, .08); }
.consult-reference.empty strong { display: block; margin-top: 3px; font-size: .95rem; }
.consult-notes { margin-top: 8px; }
.consult-notes summary { cursor: pointer; color: var(--teal); font-size: .8rem; font-weight: 700; }
.consult-notes p { margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: #f6f9f7; color: #2e4744; font-size: .84rem; line-height: 1.55; white-space: pre-wrap; }

.overview-grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ov-panel { min-width: 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.ov-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.ov-head h2 { font-size: 1.35rem; }
.ov-meta { max-width: 70ch; margin-top: 4px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.ov-count { padding: 6px 10px; border-radius: 999px; background: #fff0ed; color: #a23f33; font-size: .74rem; font-weight: 800; white-space: nowrap; }
.ov-link { padding: 6px 10px; border-radius: 10px; background: var(--aqua); color: var(--teal); font-size: .8rem; font-weight: 700; text-decoration: none; }
.ov-link:hover { background: #cfeae5; }
.link-button { margin-top: 10px; padding: 6px 0; border: 0; background: none; color: var(--teal); font-size: .82rem; font-weight: 700; cursor: pointer; }

/* Pontos de atenção */
.attention-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.attention-item a {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e5ece9;
  border-radius: 14px;
  background: #f8fbf9;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.attention-item a:hover, .attention-item a:focus-visible { border-color: #b9d8d2; background: #f2f8f6; outline: none; }
.attention-item.warn a { border-color: #f3d6cf; background: #fff6f3; }
.attention-item i, .attention-empty i {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e3ebe8;
  color: #4f625f;
  font-size: .8rem;
  font-style: normal;
  font-weight: 900;
}
.attention-item.warn i { background: #e87866; color: #fff; }
.attention-item.warn .attention-kind { color: #a23f33; }
.attention-item strong { display: block; margin-top: 2px; font-size: .92rem; line-height: 1.35; }
.attention-item p, .attention-empty p { margin-top: 3px; color: #4f625f; font-size: .8rem; line-height: 1.45; }
.attention-empty { display: flex; gap: 12px; padding: 14px; border: 1px dashed #bddbd1; border-radius: 14px; background: #eef7f3; }
.attention-empty i { background: #dff2e9; color: #24705a; }
.attention-empty strong { display: block; color: #225f50; font-size: .92rem; }

/* Desde a consulta de referência */
/* Rankings e fatos clicáveis: viram botão sem perder o desenho; o selecionado ganha fundo. */
.rank-button { display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rank-button:hover strong, .rank-button:focus-visible strong { color: var(--teal); }
.rank-button:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.rank-button[aria-pressed="true"] { background: #eef7f4; box-shadow: 0 0 0 6px #eef7f4; }
.rank-button[aria-pressed="true"] strong { color: var(--teal); }
.fact.rank-button { padding: 12px; box-shadow: none; }
.fact.rank-button[aria-pressed="true"] { border-color: #b9d8d2; }
.medication-usage-row.rank-button { display: grid; }
.mini-link { flex: 0 0 auto; padding: 5px 9px; border: 1px solid #b9d8d2; border-radius: 9px; background: #fff; color: var(--teal); font: inherit; font-size: .66rem; font-weight: 800; cursor: pointer; }
.mini-link:hover, .mini-link:focus-visible { background: var(--aqua); outline: none; }
.mini-link[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: #fff; }
.list-filter { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: #eef7f4; color: #24544f; font-size: .8rem; }
.list-filter .link-button { margin: 0; padding: 2px 0; }
.interactive-mark.filterable, .lane-label { cursor: pointer; }
.lane-label:hover, .lane-label:focus { fill: var(--teal); font-weight: 700; outline: none; }
.fact-cell dd a, .since-item strong a { color: inherit; text-decoration: none; border-bottom: 1px dotted #9fc3bf; }
.fact-cell dd a:hover, .since-item strong a:hover, .fact-cell dd a:focus-visible, .since-item strong a:focus-visible { color: var(--teal); border-bottom-style: solid; outline: none; }

/* Filtros por categoria (pontos de atenção e desde a consulta): um chip por tipo, com contagem. */
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filter-chips:empty { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid #dfe8e5;
  border-radius: 999px;
  background: #f0f4f2;
  color: #3f5451;
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chip b { color: var(--ink); font-size: .9rem; }
.chip:hover, .chip:focus-visible { border-color: #b9d8d2; background: #e6f1ee; outline: none; }
.chip[aria-pressed="true"] { border-color: var(--teal-dark); background: var(--teal-dark); color: #fff; }
.chip[aria-pressed="true"] b { color: #fff; }
.chip.has-warn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e87866; }
.chip.has-warn[aria-pressed="true"]::before { background: #ffb3a6; }
.since-list { margin: 0; padding: 0; list-style: none; }
.since-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid #edf2f0; }
.since-item:first-child { padding-top: 0; border-top: 0; }
.since-item time { padding-top: 2px; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.since-item.symptom .since-kind, .since-item.occurrence .since-kind, .since-item.disease .since-kind { color: #a23f33; }
.since-item.vaccine .since-kind, .since-item.exam .since-kind { color: #2f5f96; }
.since-item.milestone .since-kind { color: #5d4a83; }
.since-item.measure .since-kind, .since-item.treatment .since-kind { color: #1f6f69; }
.since-item strong { display: block; margin-top: 2px; font-size: .92rem; line-height: 1.35; }
.since-item.flag strong::after { content: " ●"; color: #e87866; font-size: .6em; vertical-align: middle; }
.since-item p { margin-top: 2px; color: #4f625f; font-size: .8rem; line-height: 1.45; white-space: pre-wrap; }
.since-empty { padding: 16px 0; color: var(--muted); font-size: .85rem; }

/* Crescimento */
.growth-panel { scroll-margin-top: 100px; }
.growth-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr); gap: 22px; }
.chart-title { margin: 0 0 6px; color: #3f5451; font-family: PalmoSans, system-ui, sans-serif; font-size: .9rem; font-weight: 700; }
.growth-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.growth-fact { min-width: 0; padding: 12px; border: 1px solid #e1ebe8; border-radius: 14px; background: #f3f8f6; }
.growth-fact.outside { border-color: #f3d6cf; background: #fff6f3; }
.growth-fact strong { display: block; margin-top: 4px; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.growth-fact strong em { margin-left: 2px; color: var(--muted); font-size: .75rem; font-style: normal; font-weight: 600; }
.growth-fact small { display: block; margin-top: 3px; color: #4f625f; font-size: .74rem; line-height: 1.4; }
.growth-gain { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.gain-row { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.gain-row strong { display: block; margin-top: 3px; color: var(--teal); font-size: 1.3rem; font-weight: 700; }
.gain-row small { display: block; margin-top: 3px; color: #4f625f; font-size: .76rem; line-height: 1.45; }
.growth-table { margin-top: 12px; overflow-x: auto; }
.measure-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.measure-table th { display: table-cell; padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.measure-table td { padding: 7px 8px; border-bottom: 1px solid #edf2f0; font-variant-numeric: tabular-nums; }

/* O que mudou na rotina */
.changes-highlight { margin: -4px 0 12px; color: #3f5451; font-size: .86rem; }
.changes-highlight strong { color: #a23f33; }
.changes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.change {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfdfc;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease;
}
.change:hover, .change:focus-visible { border-color: #b9d8d2; outline: none; }
.change.flag { border-color: #f3d6cf; background: #fff6f3; }
.change strong { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.change strong small { margin-left: 4px; color: var(--muted); font-size: .72rem; font-weight: 600; }
.change-delta { display: inline-flex; align-items: center; gap: 5px; color: #4f625f; font-size: .82rem; font-weight: 700; }
.change-delta i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #e3ebe8; font-size: .75rem; font-style: normal; }
.change-delta.up i { background: #e1f4e9; color: #176a50; }
.change-delta.down i { background: #e8eff8; color: #2f5f96; }
.change.flag .change-delta { color: #a23f33; }
.change.flag .change-delta i { background: #e87866; color: #fff; }
.change-before { color: var(--muted); font-size: .74rem; }

/* Período dos resumos e capítulos */
.period-scope { margin-top: 36px; }
.scope-heading { margin: 0 0 14px; scroll-margin-top: 100px; }
.scope-heading h2 { font-size: 1.6rem; }
.scope-heading p { max-width: 70ch; margin-top: 6px; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.period-scope + .scope-heading { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.changes-panel { scroll-margin-top: 100px; }
/* Flutua 12px abaixo da barra superior, nos tons do aviso de acesso (verde-água e verde-escuro). */
.period-bar {
  position: sticky;
  top: 96px;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
  border: 1px solid #b9dcd6;
  border-radius: 18px;
  background: rgba(223, 242, 239, .97);
  color: var(--teal);
  box-shadow: 0 10px 28px rgba(7, 89, 86, .14);
  backdrop-filter: blur(10px);
}
.period-label { display: flex; flex-direction: column; min-width: 150px; }
.period-label strong { color: var(--teal); font-size: .9rem; }
.period-label span { color: #3d6f6a; font-size: .76rem; }
.period-bar .filter-bar { margin-left: auto; }
.period-bar .segmented { background: rgba(255, 255, 255, .6); }
.period-bar .segmented button { color: #3d6f6a; }
.period-bar .segmented button.active { background: var(--teal); color: #fff; box-shadow: 0 3px 10px rgba(7, 89, 86, .22); }
.period-bar .button.ghost { border-color: #b9dcd6; background: #fff; color: var(--teal); }
.period-bar .custom-dates { flex-basis: 100%; width: auto; margin: 4px 0 0; border-color: #b9dcd6; }
.period-bar .custom-dates label { color: #3d6f6a; }
.compact-kpis.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compact-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compact-kpis.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feeding-insight-panel { background:linear-gradient(155deg,#fff,#f8fcfb); }
.feeding-insight-kpis { margin:0; }
.feeding-insight-kpis .compact-kpi { padding:12px 13px; background:#fbfdfc; }
.feeding-insight-kpis .compact-kpi strong { font-size:1.05rem; }
.feeding-insight-kpis .compact-kpi span { font-size:.68rem; }
.feeding-insight-kpis .compact-kpi small { font-size:.6rem; }
.metric-footnote { grid-column:1/-1; margin:0; padding:9px 11px; border-radius:11px; background:#f0f7f5; color:var(--muted); font-size:.61rem; line-height:1.45; }
.clinical-summary-kpis { margin:13px 0 4px; }
#diseaseSummary { grid-template-columns:repeat(2,minmax(0,1fr)); }
#occurrenceSummary { grid-template-columns:repeat(4,minmax(0,1fr)); }
.clinical-summary-kpis .compact-kpi { padding:12px 13px; background:#fbfdfc; }
.clinical-summary-kpis .compact-kpi strong { color:var(--teal); font-size:1.05rem; }
.clinical-summary-kpis .compact-kpi span { font-size:.65rem; }
.exam-summary-kpis { margin-top:16px; }
.exam-summary-kpis .compact-kpi { padding:12px 13px; background:#fbfdfc; }
.exam-summary-kpis .compact-kpi strong { color:var(--teal); font-size:1.05rem; }
.exam-summary-kpis .compact-kpi span { font-size:.65rem; }
.clinical-event.surgery .event-node:after { border-color:#8065a6; box-shadow:0 0 0 4px #f2edf8; }
.clinical-event.surgery .event-content { background:#fbf9fd; border-color:#e8dff1; }
.clinical-event.surgery .event-content>span { color:#6f5592; }
.clinical-event.occurrence .event-node:after { border-color:#c99638; box-shadow:0 0 0 4px #fff7e8; }
.clinical-event.occurrence .event-content { background:#fffdf8; border-color:#f0e1c4; }
.clinical-event.occurrence .event-content>span { color:#987126; }
.clinical-event.disease .event-node:after { border-color:var(--teal); }
.disease-timeline { margin-top:12px; padding:3px 0 0 13px; border-left:2px solid #d9e9e5; }
.disease-timeline-entry { display:grid; grid-template-columns:105px minmax(0,1fr); gap:11px; padding:9px 0; }
.disease-timeline-entry + .disease-timeline-entry { border-top:1px solid #e7eeec; }
.disease-timeline-entry>time { padding:0; color:var(--muted); font-size:.57rem; text-align:left; }
.disease-timeline-entry small { display:block; color:var(--teal); font-size:.53rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.disease-timeline-entry strong { margin-top:2px; font-size:.69rem; }
.disease-timeline-entry p { margin-top:4px; font-size:.62rem; }
.chart.small { min-height: 170px; }
.chart.lanes { min-height: 120px; }
.sleep-legend { justify-content: center; margin-top: 5px; }
.sleep-legend .night { background: var(--night); }
.sleep-legend .nap { background: var(--nap); }

/* Desenvolvimento */
.development-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.development-panel.upcoming { border-style: dashed; background: #fbfcfb; }
.development-panel h3 { margin-top: 2px; font-family: PalmoSerif, Georgia, serif; font-size: 1.35rem; font-weight: 400; }
.development-count { padding-top: 6px; color: #4f625f; font-size: .78rem; white-space: nowrap; }
.development-count b { color: var(--teal); font-size: 1rem; }
.development-count em { color: #a23f33; font-style: normal; font-weight: 700; }
.development-domain + .development-domain { margin-top: 12px; }
.development-domain h4 { margin: 0 0 6px; }
.development-domain ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.development-domain li { display: flex; gap: 10px; padding: 7px 10px; border-radius: 10px; background: #f8fbf9; }
.development-domain li i { flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #e3ebe8; color: #4f625f; font-size: .7rem; font-style: normal; font-weight: 900; }
.development-domain li.achieved i { background: #dff2e9; color: #24705a; }
.development-domain li.not-observed { background: #fff6f3; }
.development-domain li.not-observed i { background: #e87866; color: #fff; }
.development-domain li span { display: block; font-size: .84rem; line-height: 1.35; }
.development-domain li small { display: block; margin-top: 1px; color: #5d6f6c; font-size: .72rem; }
.sleep-distribution-panel { display: grid; gap: 12px; margin-top: 18px; }
.sleep-share-bar { display: flex; height: 14px; overflow: hidden; border-radius: 999px; background: #e7eceb; }
.sleep-share-bar i, .sleep-share-bar em { display: block; height: 100%; }
.sleep-share-bar i { background: #5a4db8; }
.sleep-share-bar em { background: #1198bd; }
.sleep-share-labels { display: flex; justify-content: space-between; gap: 16px; color: #53605d; font-size: .8rem; }
.sleep-share-labels strong:first-child { color: #5a4db8; }
.sleep-share-labels strong:last-child { color: #0a7894; text-align: right; }
#sleepCurrentPanel { border-color: rgba(90,77,184,.2); background: linear-gradient(120deg,#faf8ff,#fff); }

@media (max-width: 1100px) {
  .growth-layout { grid-template-columns: 1fr; }
  .development-lists { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .patient-card { grid-template-columns: 1fr; padding: 18px; }
  .overview-grid.two { grid-template-columns: 1fr; }
  .ov-panel { padding: 18px; border-radius: 20px; }
  .period-bar { position: static; }
  .report-section, .consultations-section { scroll-margin-top: 84px; }
  .period-bar .filter-bar { width: 100%; margin-left: 0; }
  .since-item { grid-template-columns: 1fr; gap: 2px; }
  .compact-kpis.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compact-kpis.three,#occurrenceSummary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .disease-timeline-entry { grid-template-columns:1fr; gap:4px; }
  .sleep-share-labels { flex-direction: column; gap: 4px; }
  .sleep-share-labels strong:last-child { text-align: left; }
}
@media (max-width: 520px) {
  .growth-facts { grid-template-columns: 1fr; }
  .patient-title h1 { font-size: 1.45rem; }
  .changes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .change strong { font-size: 1.15rem; }
  .age-block { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .attention-item a, .change, .ov-link, .button, .kpi-link { transition: none; }
}