/* APS DOMICILIAR — AJUSTES 04 · visual inspirado na interface iOS/iPadOS
   Camada de aparência. O fluxo e a estrutura clínica permanecem inalterados.
   Usa apenas tipografia de sistema; nenhum arquivo de fonte proprietário. */
:root {
  color-scheme: light;
  --ios-bg:#f5f5f7;
  --ios-card:#ffffff;
  --ios-secondary:#f2f2f7;
  --ios-text:#1c1c1e;
  --ios-muted:#6e6e73;
  --ios-tertiary:#8e8e93;
  --ios-line:#e5e5ea;
  --ios-blue:#007aff;
  --ios-blue-press:#0066d6;
  --ios-bluewash:#eef6ff;
  --ios-green:#248a60;
  --ios-red:#e34249;
  --ios-warn:#986b1c;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",system-ui,sans-serif;
  color:var(--ios-text);
  background:var(--ios-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html { scroll-behavior:smooth }
body { background:var(--ios-bg);color:var(--ios-text);letter-spacing:-.01em }
header {
  background:rgba(251,251,253,.88);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  box-shadow:none;
  border-bottom:1px solid rgba(199,199,204,.7);
  padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));
}
header .topbar { max-width:1430px;margin:auto; min-height:46px; }
.brand-group {display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark {
  width:38px;height:38px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:11px;background:var(--ios-blue);color:white;
  box-shadow:0 2px 6px rgba(0,122,255,.18);
}
.brand-symbol {font-size:23px;font-weight:700;line-height:1;transform:translateY(-.5px)}
header h1 {font-size:17px;font-weight:750;letter-spacing:-.035em;color:var(--ios-text);margin:0}
header small {color:var(--ios-muted);font-size:11px;letter-spacing:0;font-weight:500}
header .tag {background:#ebebf0;color:#58585f;border:0;font-weight:650}
.wrap { max-width:1470px;margin:auto;padding:22px clamp(13px,2.3vw,32px) 95px }
.panel {
  background:var(--ios-card);
  border:1px solid #e8e8ed;
  border-radius:20px;
  box-shadow:0 2px 14px rgba(30,30,50,.035);
  padding:23px;
  margin-bottom:16px;
  backdrop-filter:none;
}
h2 {font-size:23px;line-height:1.18;letter-spacing:-.04em;font-weight:750;color:var(--ios-text);margin:0 0 15px}
h3 {color:var(--ios-text);font-weight:700}
.muted,.empty {color:var(--ios-muted)}
.alert {
  background:#fff9eb;
  border:1px solid #f5e5ba;
  border-left:3px solid #d6aa46;
  border-radius:13px;
  box-shadow:none;
  color:#6a5429;
  padding:11px 14px;
  font-size:12px;
  margin-bottom:18px;
}
button,button.secondary,button.danger {
  font-family:inherit;
  letter-spacing:-.012em;
  min-height:44px;
  padding:10px 16px;
  border-radius:12px;
  font-size:14px;
  font-weight:650;
  box-shadow:none;
  border:1px solid transparent;
  transition:background-color .14s ease, box-shadow .14s ease,transform .1s ease;
}
button {background:var(--ios-blue);color:#fff}
button:hover {background:var(--ios-blue-press);transform:none;box-shadow:none}
button:active {transform:scale(.985);box-shadow:none}
button.secondary {
  background:#eff0f4;
  color:#076cda;
  border-color:transparent;
}
button.secondary:hover {background:#e5e7ec;color:#075bb6;box-shadow:none}
button.danger {background:#ffeded;color:#c52832;border:1px solid #ffd8db}
button.danger:hover {background:#ffe1e3}
button:focus-visible,.choice:focus-within,.stage-tab:focus-visible,summary:focus-visible {
  outline:3px solid rgba(0,122,255,.35);outline-offset:2px;
}
button:disabled {opacity:.46;box-shadow:none}
.nav {gap:8px;margin-bottom:15px}
label {font-weight:650;color:#35353a;font-size:13px;letter-spacing:-.01em}
input,textarea,select {
  background:#fff;color:var(--ios-text);
  border:1px solid #d4d4da;
  border-radius:11px;
  box-shadow:none;
  font-family:inherit;
  font-size:16px;
  padding:11px 13px;
  min-height:44px;
  transition:border-color .14s ease,box-shadow .14s ease;
}
input::placeholder,textarea::placeholder {color:#98989f}
input:focus,textarea:focus,select:focus {border-color:var(--ios-blue);outline:0;box-shadow:0 0 0 3px rgba(0,122,255,.11)}
input[type=checkbox],input[type=radio] {accent-color:var(--ios-blue)}
#search {border-radius:13px;padding:13px 15px;background:#f6f6f8;border-color:#ececf0}
#search:focus {background:#fff}
#list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px}
#list>.patient {
  margin:0;background:#fff;
  border:1px solid #e8e8ed;border-radius:17px;
  padding:16px 17px;
  min-width:0;
  box-shadow:0 2px 6px rgba(30,30,50,.028);
}
#list>.patient .row {align-items:start}
#list>.patient strong {font-size:15px;letter-spacing:-.015em;line-height:1.35;color:#202027}
#list>.patient button {padding:9px 13px;font-size:13px;min-height:38px;border-radius:11px}
#list>.patient .muted {margin-top:4px;font-size:12px}
#history>.patient {border:1px solid #e8e8ed;border-radius:14px;padding:16px;margin:10px 0}
#history>.patient:first-child {border-top:1px solid #e8e8ed}
.chip {background:#f1f3f7;border:0;color:#565f6f;font-size:11px;font-weight:550;padding:4px 8px}
.tag {background:#eaf4ff;color:#0065cf;border:0;font-size:11px;padding:5px 10px;font-weight:700;box-shadow:none}
.section-title {color:#303039;font-weight:700;letter-spacing:-.025em}
.notice {background:#f4f8ff;border:1px solid #e4efff;border-radius:13px;color:#4b6584;padding:11px 13px;font-size:12px;line-height:1.55}
.warning {background:#fff8ec;border:1px solid #f0e4cd;border-left:3px solid #d6a24f;color:#69512b;border-radius:11px}
.ok {background:#eaf8f1;color:#1f744a;border:1px solid #d6eee1}
.status {font-size:12px;color:var(--ios-muted)}
/* iPadOS-style sidebar navigation */
.form-layout {display:grid;grid-template-columns:220px minmax(0,1fr);gap:23px;align-items:start}
.stage-nav {
  position:sticky;top:90px;
  display:flex;flex-direction:column;gap:3px;
  overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 120px);
  padding:7px;background:#f7f7f9;border:1px solid #ebebf0;border-radius:17px;
}
.stage-tab,.stage-tab.active {
  width:100%;min-width:0;min-height:44px;
  border-radius:10px;
  padding:10px 12px;
  box-shadow:none;text-align:left;
  font-size:13px;line-height:1.25;font-weight:620;
}
.stage-tab {background:transparent;border:0;color:#56565e}
.stage-tab:hover {background:#ebeef3;color:#24242a;box-shadow:none}
.stage-tab.active {
  background:#e5f1ff;color:#0066d6;border:0;box-shadow:none;
}
.stage-tab.active:hover {background:#dfedff;color:#005ec4}
.stage-tab small {font-size:10px;font-weight:520;opacity:.75;margin-bottom:3px;letter-spacing:.015em}
#stageContent {min-width:0}
#visit>.panel {padding:clamp(15px,2.1vw,28px)}
#visit .frame-title {border-bottom:1px solid #ececf0;padding-bottom:15px;margin-bottom:14px}
#visit .frame-title h2 {font-size:22px;margin-bottom:5px}
#visit .notice {margin:7px 0 15px}
/* Apple-style grouped cards and progressive disclosures */
.q-card {
  background:#fff;
  border:1px solid #e4e4e9;
  border-radius:14px;
  margin:8px 0;
  box-shadow:none;
  overflow:hidden;
}
.q-card[open] {
  border:1px solid #c8ddf5;
  box-shadow:0 2px 12px rgba(0,122,255,.035);
}
.q-heading {
  min-height:48px;
  padding:12px 15px;
  color:#26262e;
  gap:10px;
  align-items:center;
}
.q-heading:hover {background:#fafafd}
.q-card[open]>.q-heading {background:#f5f9ff;border-bottom:1px solid #e1eaf6}
.q-heading-label {font-size:14px;font-weight:670;letter-spacing:-.018em}
.q-heading:after {color:#9a9aa3;font-size:15px}
.q-check {font-size:18px;color:#c5c5cc}
.q-done .q-check {color:var(--ios-green)}
.q-answer,.q-done .q-answer {
  max-width:44%;font-size:11px;font-weight:600;
  border:0;border-radius:8px;
  color:#6b6b72;background:#f1f1f4;
  padding:5px 9px;
}
.q-done .q-answer {color:#136d4f;background:#e8f7ee}
.q-body {padding:14px 15px 15px}
.q-body .help {color:#83838a;font-size:12px;line-height:1.45}
.q-body .options {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.q-body .choice,.choice {
  background:#f9f9fb;
  border:1px solid #e6e6eb;
  min-height:47px;
  border-radius:11px;
  box-shadow:none;
  padding:10px 12px;
  font-size:13px;line-height:1.35;
  color:#303036;
}
.q-body .choice:hover,.choice:hover {background:#f4f7fc;transform:none;box-shadow:none;border-color:#d5e4f6}
.q-body .choice:has(input:checked),.choice:has(input:checked) {
  background:#eaf3ff;
  border-color:#75b2ff;
  box-shadow:inset 0 0 0 1px rgba(0,122,255,.12);
  color:#005fc5;
}
.choice input {width:18px;height:18px;min-height:18px}
.q-body .choice input {width:18px;height:18px;min-height:18px}
.q-controls {margin-top:12px}
.q-controls button {min-height:38px;border-radius:10px}
.question {border-top-color:#ececf0}
.subgroup {background:#f8f9fc;border:1px solid #ececf0;border-left:3px solid #afccef;border-radius:12px}
/* Compact vitals on iPad/desktop */
.vitals-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.vitals-grid>.question {border:1px solid #e8e8ed;border-radius:13px;background:#fbfbfd;padding:10px 11px}
.vitals-grid label {font-size:12px;color:#57575f;min-height:29px;line-height:1.25;margin:0 0 7px}
.vitals-grid input {background:white;border-radius:9px;min-height:39px;padding:8px 9px;font-size:16px}
.lesion,.med-item {background:#fff;border:1px solid #e7e7ec;border-radius:15px;box-shadow:none;padding:15px}
.lesion-head h3 {margin:2px 0}
.previewbox {background:#f8f9fc;border:1px solid #e8e8ed;border-radius:14px}
.frame-title {border-bottom-color:#ececf0}
details:not(.q-card) {border:1px solid #e7e7ec;border-radius:13px;background:#fafafd;padding:13px 15px}
details:not(.q-card) summary {color:#36363e}
details:not(.q-card)[open] {background:#fff}
canvas {border-color:#d8d8df;border-radius:13px}
.bottom {
  z-index:3;
  position:sticky;bottom:0;
  margin-top:18px;
  padding:12px 0 max(9px,env(safe-area-inset-bottom));
  border:0;border-top:1px solid #e4e4e9;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  box-shadow:none;
  border-radius:0;
}
.bottom .row {gap:8px}
.bottom button {min-height:44px}
#toast {background:rgba(35,35,40,.94);border-radius:13px;box-shadow:0 10px 28px rgba(0,0,0,.16);font-weight:550}
.summary {line-height:1.72}
#reportText {font-size:14px;white-space:pre-wrap;word-break:break-word}
@media(min-width:1100px){#home .panel {padding:26px 30px}#home .nav {margin-top:14px!important}}
@media(max-width:1080px){
  .form-layout {grid-template-columns:1fr;gap:13px}
  .stage-nav {
    position:static;display:flex;flex-direction:row;
    gap:7px;max-height:none;overflow-x:auto;overflow-y:hidden;
    background:transparent;border:0;border-radius:0;padding:3px 0 10px;
  }
  .stage-tab,.stage-tab.active {min-width:134px;width:auto;flex-shrink:0;padding:9px 12px;border-radius:12px;min-height:47px;border:1px solid #e1e1e7}
  .stage-tab {background:#fff}
  .stage-tab.active {background:#e5f1ff;border-color:#b8d8ff}
  .q-body .options {grid-template-columns:repeat(2,minmax(0,1fr))}
  .vitals-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .wrap {padding:13px 11px 95px}
  header {padding-left:13px;padding-right:13px}
  header h1 {font-size:15px}
  header small {font-size:10px}
  .brand-mark {width:34px;height:34px;border-radius:10px}
  .brand-symbol {font-size:21px}
  .panel {padding:16px 13px;border-radius:16px}
  h2 {font-size:21px}
  #list {grid-template-columns:1fr;gap:9px}
  #list>.patient {padding:14px}
  #visit>.panel {padding:13px}
  .q-body .options {grid-template-columns:1fr}
  .q-heading {padding:12px 11px;gap:8px;align-items:center}
  .q-heading-label {font-size:13px}
  .q-answer,.q-done .q-answer {font-size:10px;max-width:38%;padding:4px 6px}
  .q-body {padding:12px 11px}
  .vitals-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .vitals-grid>.question {padding:8px}
  .vitals-grid label {font-size:11px;min-height:29px}
  .stage-tab,.stage-tab.active {min-width:115px}
  .nav button {font-size:13px;min-height:43px}
  #home .nav {display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #home .nav button:first-child {grid-column:1/-1}
}
@media(max-width:370px){
 header .tag {font-size:10px;padding:4px 7px}
 header h1 {font-size:14px}
 .q-answer,.q-done .q-answer {max-width:34%}
 .bottom button {font-size:12px;padding:10px 7px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 button,.choice,input,textarea,select{transition:none!important}
}
/* Print exactly the clinical report, without iOS surface styling. */
@media print{
  header,.nav,.alert,#toast,.hide-print,button{display:none!important}
  body,.wrap,.panel {background:white!important;color:black!important;box-shadow:none!important;border:0!important}
  .wrap{max-width:none;padding:0}
  .panel{padding:0;margin:0}
  #home,#detail,#visit{display:none!important}
  #report{display:block!important}
  #reportText{font-size:11pt;line-height:1.5;color:#000}
}
/* Mobile action toolbar: deliberate two-row grouping instead of a stranded button. */
@media(max-width:700px){
  #visit>.nav {display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:7px}
  #visit>.nav button {min-width:0;width:100%;padding:10px 9px}
  #visit>.nav button:nth-child(3) {grid-column:1/-1}
}
