/* Ecrãs da app KINESTA recriados em HTML (tools/screens.py). Tudo sob .kscreen.
   Medidas em pontos iOS: 1 pt = var(--u) = 1/393 da largura do ecrã (container query units), por isso o ecrã
   escala com a moldura .phone. Cores = Kinesta/Support/Theme.swift (não usar as variáveis do site). */

.kscreen {
  position: absolute; inset: 1.48% 3.2%; width: 93.6%; height: 97.04%;
  border-radius: 10% / 4.6%; overflow: hidden; isolation: isolate;
  container-type: inline-size;
  background: #0C0907; color: #F3ECE4; text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none; user-select: none; pointer-events: none;
}
.kscreen *, .kscreen *::before, .kscreen *::after { box-sizing: border-box; margin: 0; padding: 0; }
.kscreen img, .kscreen svg { display: block; max-width: none; }
.kscreen .ks {
  --u: calc(100cqw / 393);
  --serif: ui-serif, "New York", "Newsreader", Georgia, serif;
  --ink: #F3ECE4; --sec: #B9AEA2; --ter: #7A6F65; --accent: #B8977A; --accent-deep: #8E6F55;
  --accent-soft: rgba(184, 151, 122, .14); --card: #1A1512; --raised: #221C17; --line: #3A2F27; --line-2: #56473B;
  --good: #6DBF8E; --attn: #E0B04A; --marked: #D9675F; --bgc: #0C0907;
  --ks-cut: #1A1512;
  position: absolute; inset: 0; font-size: calc(var(--u) * 17); line-height: 1.19; color: var(--ink);
}
.kscreen .ks-i { width: 1.18em; height: 1.18em; flex: none; overflow: visible; }

/* fundo da marca (KinestaBackground): escuro + brilho radial quente no topo */
.kscreen .ks-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle calc(var(--u) * 412.6) at 50% calc(var(--u) * -42.6),
      rgba(64, 41, 24, .85) 0%, rgba(64, 41, 24, .25) 50%, rgba(12, 9, 7, 0) 100%),
    #0C0907;
}

/* ---------- barra de estado (alinhada com a dynamic island da moldura .phone) */
.kscreen .ks-status { position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: calc(var(--u) * 70); color: #fff; }
.kscreen .ks-time {
  position: absolute; left: calc(var(--u) * 12); width: calc(var(--u) * 108); top: calc(var(--u) * 33.5);
  text-align: center; font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 21); font-weight: 600; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.kscreen .ks-sicons {
  position: absolute; right: calc(var(--u) * 21); top: calc(var(--u) * 37.6); height: calc(var(--u) * 12.5);
  display: flex; align-items: center; gap: calc(var(--u) * 6);
}
.kscreen .ks-sicons svg { fill: currentColor; }
.kscreen .ks-cell { width: calc(var(--u) * 18); height: calc(var(--u) * 12); }
.kscreen .ks-wifi { width: calc(var(--u) * 16); height: calc(var(--u) * 12); }
.kscreen .ks-batt { width: calc(var(--u) * 27); height: calc(var(--u) * 13); }

/* ---------- barra de navegação (inline; aparência "scroll edge" transparente) */
.kscreen .ks-nav {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(var(--u) * 70); height: calc(var(--u) * 44);
  color: var(--accent); font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 22);
}
.kscreen .ks-nav > span { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; }
.kscreen .ks-nav-back { left: calc(var(--u) * 8); display: flex; align-items: center; gap: calc(var(--u) * 6); }
.kscreen .ks-backchev { width: calc(var(--u) * 12); height: calc(var(--u) * 21); }
.kscreen .ks-nav-title {
  left: 50%; transform: translate(-50%, -50%) !important; max-width: calc(var(--u) * 190); overflow: hidden; text-overflow: ellipsis;
  font-family: var(--serif); font-size: calc(var(--u) * 18); color: var(--ink); font-weight: 400;
}
.kscreen .ks-nav-right { right: calc(var(--u) * 16); }
.kscreen .ks-nav-right.is-bold { font-weight: 600; }
.kscreen .ks-nav-left { left: calc(var(--u) * 16); display: flex; }
.kscreen .ks-nav-left .ks-i { width: calc(var(--u) * 23); height: calc(var(--u) * 23); }

/* ---------- separadores (TabView) */
.kscreen .ks-tabbar {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 83);
  background: #0C0907; box-shadow: 0 calc(var(--u) * -0.5) 0 #3A2F27; --ks-cut: #0C0907;
  display: flex; padding: 0 calc(var(--u) * 4);
}
.kscreen .ks-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; color: var(--ter);
  padding-top: calc(var(--u) * 6); font-size: calc(var(--u) * 10); line-height: calc(var(--u) * 12); font-weight: 500;
}
.kscreen .ks-tab.is-on { color: var(--accent); }
.kscreen .ks-tab .ks-tab-i { width: calc(var(--u) * 28); height: calc(var(--u) * 25); margin-bottom: calc(var(--u) * 4); }

/* ---------- área de conteúdo */
.kscreen .ks-scroll { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; }
.kscreen .ks-scroll--list { top: calc(var(--u) * 114); }
.kscreen .ks-scroll--flow { top: calc(var(--u) * 114); }
.kscreen .ks-scroll--home { top: calc(var(--u) * 70); }

/* List .insetGrouped com .kinestaRow() (fundo das linhas = Theme.card) */
.kscreen .ks-list { padding: calc(var(--u) * 32) calc(var(--u) * 16) 0; }
.kscreen .ks-sec { background: var(--card); border-radius: calc(var(--u) * 10); overflow: hidden; --ks-cut: #1A1512; }
.kscreen .ks-sec--gap { margin-top: calc(var(--u) * 35); }
.kscreen .ks-row { position: relative; padding: calc(var(--u) * 7) calc(var(--u) * 20); }
.kscreen .ks-row + .ks-row::before {
  content: ""; position: absolute; top: 0; right: 0; left: var(--sep, calc(var(--u) * 20));
  border-top: max(1px, calc(var(--u) * .33)) solid rgba(84, 84, 88, .6);
}
.kscreen .ks-row--ar { --sep: calc(var(--u) * 72); }
.kscreen .ks-sechead {
  padding: calc(var(--u) * 22) calc(var(--u) * 20) calc(var(--u) * 7);
  font-size: calc(var(--u) * 13); line-height: calc(var(--u) * 18); color: rgba(235, 235, 245, .6); text-transform: uppercase;
}
.kscreen .ks-row--destructive {
  min-height: calc(var(--u) * 44); display: flex; align-items: center; justify-content: center; color: #FF453A;
  font-size: calc(var(--u) * 17);
}

/* cabeçalho da ficha */
.kscreen .ks-detail { padding-top: calc(var(--u) * 15); padding-bottom: calc(var(--u) * 15); display: flex; flex-direction: column; gap: calc(var(--u) * 16); }
.kscreen .ks-who { display: flex; align-items: center; gap: calc(var(--u) * 16); }
.kscreen .ks-avatar {
  flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--accent-soft); box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(184, 151, 122, .3);
  color: var(--accent); font-family: var(--serif); font-weight: 400;
}
.kscreen .ks-avatar--56 { width: calc(var(--u) * 56); height: calc(var(--u) * 56); font-size: calc(var(--u) * 22.4); }
.kscreen .ks-who-t { display: flex; flex-direction: column; gap: calc(var(--u) * 4); min-width: 0; }
.kscreen .ks-who-name { font-family: var(--serif); font-size: calc(var(--u) * 21); line-height: calc(var(--u) * 25); color: var(--ink); }
.kscreen .ks-who-mail { font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 17); color: var(--sec); }
.kscreen .ks-infogrid { display: flex; flex-direction: column; gap: calc(var(--u) * 6); }
.kscreen .ks-info { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 17); white-space: nowrap; }
.kscreen .ks-info-i { width: calc(var(--u) * 20); height: calc(var(--u) * 16.5); color: var(--ter); }
.kscreen .ks-info-l { color: var(--sec); }
.kscreen .ks-info-v { margin-left: auto; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }

/* PrimaryButtonStyle */
.kscreen .ks-btn-primary {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 7);
  min-height: calc(var(--u) * 54); padding: 0 calc(var(--u) * 16); border-radius: calc(var(--u) * 10);
  background: var(--accent); color: var(--bgc); font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 19); font-weight: 600;
}
.kscreen .ks-btn-primary .ks-i { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }

/* IconTile */
.kscreen .ks-tile {
  flex: none; display: flex; align-items: center; justify-content: center; color: var(--accent);
  background: var(--accent-soft); box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(184, 151, 122, .25);
}
.kscreen .ks-tile--40 { width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: calc(var(--u) * 10.4); }
.kscreen .ks-tile--40 .ks-i { width: calc(var(--u) * 23); height: calc(var(--u) * 23); }
.kscreen .ks-tile--48 { width: calc(var(--u) * 48); height: calc(var(--u) * 48); border-radius: calc(var(--u) * 12.5); }
.kscreen .ks-tile--48 .ks-i { width: calc(var(--u) * 27); height: calc(var(--u) * 27); }

/* cartão "Avaliação do pé (scan 3D)" */
.kscreen .ks-footcard {
  display: flex; align-items: flex-start; gap: calc(var(--u) * 12); padding: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 10); background: var(--raised); box-shadow: inset 0 0 0 calc(var(--u) * 1) var(--line);
}
.kscreen .ks-footcard-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.kscreen .ks-footcard-title { font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 19); font-weight: 600; color: var(--ink); }
.kscreen .ks-footcard-sub { font-size: calc(var(--u) * 13); line-height: calc(var(--u) * 15.5); color: var(--sec); }
.kscreen .ks-chev { width: calc(var(--u) * 13); height: calc(var(--u) * 13); color: var(--ter); }
.kscreen .ks-chev--top { margin-top: calc(var(--u) * 12); }

/* AssessmentRow */
.kscreen .ks-ar { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 4) 0; }
.kscreen .ks-ar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.kscreen .ks-ar-name, .kscreen .ks-ar-title { font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 19); font-weight: 600; color: var(--ink); }
.kscreen .ks-ar-title.is-sub { font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 17); font-weight: 400; color: var(--sec); }
.kscreen .ks-ar-date { font-size: calc(var(--u) * 13); line-height: calc(var(--u) * 15.5); color: var(--ter); white-space: nowrap; }

/* FlagSummaryView */
.kscreen .ks-flags { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 12); }
.kscreen .ks-flag { display: flex; align-items: center; gap: calc(var(--u) * 4); }
.kscreen .ks-flag .ks-i { width: calc(var(--u) * 14.5); height: calc(var(--u) * 14.5); }
.kscreen .ks-flag b { font-size: calc(var(--u) * 13); line-height: calc(var(--u) * 16); font-weight: 600; font-variant-numeric: tabular-nums; }
.kscreen .ks-flag--good { color: var(--good); }
.kscreen .ks-flag--attention { color: var(--attn); }
.kscreen .ks-flag--marked { color: var(--marked); }
.kscreen .ks-flag.is-zero { color: var(--ter); }

/* ---------- fluxo da avaliação: barra de topo + grupos */
.kscreen .ks-flowbar {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(var(--u) * 70); height: calc(var(--u) * 44);
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 8);
}
.kscreen .ks-flowbar-b { width: calc(var(--u) * 44); height: calc(var(--u) * 44); display: flex; align-items: center; justify-content: center; color: var(--sec); }
.kscreen .ks-flowbar-b .ks-i { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }
.kscreen .ks-flowbar-x .ks-i { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.kscreen .ks-eyebrow {
  font-size: calc(var(--u) * 11); line-height: calc(var(--u) * 13); font-weight: 600; letter-spacing: calc(var(--u) * 1.6);
  color: var(--accent); white-space: nowrap;
}
.kscreen .ks-stack { padding: calc(var(--u) * 20); display: flex; flex-direction: column; gap: calc(var(--u) * 16); }
.kscreen .ks-header { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.kscreen .ks-header--group { padding-bottom: calc(var(--u) * 8); }
.kscreen .ks-h-title { font-family: var(--serif); font-size: calc(var(--u) * 28); line-height: calc(var(--u) * 33.5); font-weight: 400; color: var(--ink); }
.kscreen .ks-h-sub { font-size: calc(var(--u) * 15); line-height: calc(var(--u) * 18); color: var(--sec); }
.kscreen .ks-gcard {
  display: flex; align-items: flex-start; gap: calc(var(--u) * 16); padding: calc(var(--u) * 16);
  background: var(--card); border-radius: calc(var(--u) * 18); box-shadow: inset 0 0 0 calc(var(--u) * 1) var(--line);
}
.kscreen .ks-gcard-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 6); }
.kscreen .ks-gcard-title { font-family: var(--serif); font-size: calc(var(--u) * 21); line-height: calc(var(--u) * 25); color: var(--ink); }
.kscreen .ks-gcard-intro { font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 17); color: var(--sec); }
.kscreen .ks-gcard-tests { font-size: calc(var(--u) * 13); line-height: calc(var(--u) * 15.5); color: rgba(184, 151, 122, .85); }
.kscreen .ks-chev--g { width: calc(var(--u) * 14); height: calc(var(--u) * 14); margin-top: calc(var(--u) * 14); }

/* ---------- relatório (ReportView: cores do sistema em modo escuro, tint = acento da clínica) */
.kscreen--report { background: #000; }
.kscreen--report .ks { --tint: #B8977A; }
.kscreen--report .ks-nav { color: var(--tint); }
.kscreen--report .ks { display: flex; flex-direction: column; }
.kscreen .ks-pdf { position: relative; flex: 1 1 0; min-height: 0; margin-top: calc(var(--u) * 114); overflow: hidden; background: #000; }
.kscreen .ks-page {
  width: calc(var(--u) * 385); aspect-ratio: 595 / 842; margin: calc(var(--u) * 4.75) auto calc(var(--u) * 4.75);
  background: #fff; overflow: hidden; box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 4) rgba(0, 0, 0, .5);
}
.kscreen .ks-page + .ks-page { margin-top: calc(var(--u) * 9.5); }
.kscreen .ks-page img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.kscreen .ks-actionbar {
  position: relative; z-index: 5; flex: none;
  padding: calc(var(--u) * 10) calc(var(--u) * 16) calc(var(--u) * 44);
  background: rgba(30, 30, 30, .92); display: flex; flex-direction: column; gap: calc(var(--u) * 10);
}
.kscreen .ks-actionrow { display: flex; gap: calc(var(--u) * 12); }
.kscreen .ks-sbtn {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6);
  min-height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 12);
  font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 22); white-space: nowrap;
}
.kscreen .ks-sbtn .ks-i { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }
.kscreen .ks-sbtn--bordered { background: rgba(184, 151, 122, .2); color: var(--tint); }
.kscreen .ks-sbtn--prominent { background: var(--tint); color: #fff; --ks-cut: #B8977A; }
.kscreen .ks-sbtn--vesta { flex-direction: column; gap: calc(var(--u) * 2); padding: calc(var(--u) * 14) calc(var(--u) * 12); }
.kscreen .ks-sbtn-l { display: flex; align-items: center; gap: calc(var(--u) * 6); font-weight: 600; }
.kscreen .ks-sbtn-cap .nw { white-space: nowrap; }
.kscreen .ks-sbtn-cap { font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 16); opacity: .85; white-space: normal; text-align: center; }

/* ---------- início (HomeView) */
.kscreen .ks-stack--home { gap: calc(var(--u) * 24); }
.kscreen .ks-wordmark { display: flex; justify-content: center; padding: calc(var(--u) * 12) 0; }
.kscreen .ks-wordmark img { height: calc(var(--u) * 40.3); width: auto; }
.kscreen .ks-hero {
  display: flex; align-items: center; gap: calc(var(--u) * 16); padding: calc(var(--u) * 24);
  border-radius: calc(var(--u) * 18); color: var(--bgc);
  background: linear-gradient(to bottom right, #B8977A, #8E6F55);
}
.kscreen .ks-hero-i { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.kscreen .ks-hero-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.kscreen .ks-hero-title { font-family: var(--serif); font-size: calc(var(--u) * 21); line-height: calc(var(--u) * 25); }
.kscreen .ks-hero-sub { font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 17); opacity: .85; }
.kscreen .ks-hero-arrow { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.kscreen .ks-recent { display: flex; flex-direction: column; gap: calc(var(--u) * 12); }
.kscreen .ks-card--list { background: var(--card); border-radius: calc(var(--u) * 18); box-shadow: inset 0 0 0 calc(var(--u) * 1) var(--line); }
.kscreen .ks-hrow { position: relative; padding: calc(var(--u) * 8) calc(var(--u) * 16); }
.kscreen .ks-hrow + .ks-hrow::before { content: ""; position: absolute; top: 0; right: 0; left: calc(var(--u) * 68); border-top: max(1px, calc(var(--u) * .5)) solid var(--line); }