:root{
    --ink:#141C24;
    --ink-2:#4A5764;
    --ink-3:#7D8994;
    --line:#DFE4E8;
    --bg:#F4F6F7;
    --surface:#FFFFFF;
    --pine:#0E5C4F;
    --pine-soft:#E4F0EC;
    --amber:#8A5300;
    --amber-soft:#FBF0DC;
    --red:#9B2226;
    --red-soft:#FBE9E9;
    --radius:14px;
    --pad:16px;
    --safe-b:env(safe-area-inset-bottom, 0px);
    --safe-t:env(safe-area-inset-top, 0px);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:16px;
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
    overscroll-behavior-y:none;
  }
  button,input,select,textarea{font:inherit;color:inherit}
  button{cursor:pointer;border:0;background:none}
  time,.num{font-variant-numeric:tabular-nums}

  /* ---------- estrutura ---------- */
  .app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}
  header.top{
    position:sticky;top:0;z-index:30;
    background:var(--surface);
    border-bottom:1px solid var(--line);
    padding:calc(var(--safe-t) + 10px) var(--pad) 10px;
  }
  .top-row{display:flex;align-items:center;gap:10px;min-height:36px}
  .top-title{font-size:19px;font-weight:650;letter-spacing:-.01em;margin:0;flex:1;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-sub{font-size:13px;color:var(--ink-3);margin:2px 0 0}
  .icon-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink-2);flex:none}
  .icon-btn:active{background:var(--bg)}
  .icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

  nav.tabs{display:flex;gap:4px;margin-top:10px}
  nav.tabs button{
    flex:1;padding:9px 8px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink-2);
    border:1px solid transparent;
  }
  nav.tabs button[aria-current="true"]{background:var(--pine-soft);color:var(--pine)}

  main{flex:1;padding:14px var(--pad) calc(96px + var(--safe-b))}

  /* ---------- componentes ---------- */
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
  .list{display:flex;flex-direction:column;gap:10px}

  .row{display:flex;align-items:center;gap:12px;padding:12px;width:100%;text-align:left}
  .avatar{
    width:52px;height:52px;border-radius:50%;flex:none;object-fit:cover;background:var(--pine-soft);
    display:grid;place-items:center;color:var(--pine);font-weight:650;font-size:17px;overflow:hidden
  }
  .avatar img{width:100%;height:100%;object-fit:cover;display:block}
  .avatar svg{width:44%;height:44%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .row-main{flex:1;min-width:0}
  .row-title{font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .row-meta{font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
  .chev{color:var(--ink-3);flex:none}
  .chev svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  .tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;
    padding:3px 8px;border-radius:999px;background:var(--bg);color:var(--ink-2)}
  .tag.done{background:var(--pine-soft);color:var(--pine)}
  .tag.wait{background:var(--amber-soft);color:var(--amber)}
  .tag.old{background:#EAE7F2;color:#4C3F73}

  .search{position:relative;margin-bottom:12px}
  .search input{
    width:100%;padding:11px 40px 11px 38px;border:1px solid var(--line);border-radius:12px;
    background:var(--surface);font-size:15px
  }
  .search input:focus{outline:2px solid var(--pine);outline-offset:-1px;border-color:var(--pine)}
  .search input::placeholder{color:var(--ink-3)}
  .search input::-webkit-search-cancel-button,
  .search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
  .search .lupa{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none;display:grid}
  .search .lupa svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  .search .limpar{
    position:absolute;right:5px;top:50%;transform:translateY(-50%);
    width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--ink-3)
  }
  .search .limpar svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
  mark{background:var(--pine-soft);color:inherit;border-radius:3px;padding:0 1px}

  /* ---------- prontuário ---------- */
  .q{padding:14px}
  .q-texto{font-size:15px;font-weight:600;line-height:1.35;display:flex;gap:9px;align-items:flex-start}
  .q-num{
    flex:none;width:22px;height:22px;border-radius:7px;background:var(--bg);color:var(--ink-3);
    display:grid;place-items:center;font-size:12px;font-weight:650;margin-top:1px
  }
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin:11px 0 0 31px}
  .chip{
    padding:9px 15px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);
    font-size:14px;font-weight:600;color:var(--ink-2)
  }
  .chip[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:#fff}
  .escala{display:flex;align-items:center;gap:14px;margin:13px 0 0 31px}
  .escala .range{flex:1;accent-color:var(--pine);height:26px}
  .escala-val{
    flex:none;min-width:44px;text-align:center;font-size:19px;font-weight:650;color:var(--pine);
    font-variant-numeric:tabular-nums;background:var(--pine-soft);border-radius:9px;padding:4px 0
  }
  .escala-val.vazio{color:var(--ink-3);background:var(--bg)}
  .escala-legenda{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);margin:4px 0 0 31px}
  .q .livre,.q .obs{
    width:100%;margin:11px 0 0;padding:11px;border:1px solid var(--line);border-radius:11px;
    background:var(--surface);font-size:15px;resize:vertical
  }
  .q .obs{background:var(--bg);font-size:14px}
  .q .livre:focus,.q .obs:focus{outline:2px solid var(--pine);outline-offset:-1px;border-color:var(--pine)}
  .q .link-btn.add{margin-left:31px}
  .ordena{display:flex;flex-direction:column;gap:2px;flex:none}
  .icon-btn.sm{width:30px;height:26px;border-radius:7px}
  .icon-btn.sm svg{width:16px;height:16px}
  .icon-btn[disabled]{opacity:.28}

  .empty{text-align:center;padding:44px 18px;color:var(--ink-3)}
  .empty strong{display:block;color:var(--ink);font-size:16px;margin-bottom:5px;font-weight:600}
  .empty p{margin:0;font-size:14px}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 18px;border-radius:12px;font-weight:650;font-size:15px;
    background:var(--pine);color:#fff;width:100%;
  }
  .btn:active{opacity:.85}
  .btn[disabled]{background:var(--line);color:var(--ink-3);cursor:not-allowed}
  .btn.ghost{background:var(--surface);color:var(--pine);border:1px solid var(--line)}
  .btn.danger{background:var(--red-soft);color:var(--red);border:1px solid #F2D6D6}
  .btn.sm{padding:9px 13px;font-size:14px;width:auto}
  .btn.antiga{margin-top:12px;gap:9px}
  .btn.antiga svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .btn.antiga.on{background:#EAE7F2;color:#4C3F73;border-color:#D6CFE6}

  .fab{
    position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(18px + var(--safe-b));width:min(528px,calc(100% - 32px));z-index:20;
    box-shadow:0 6px 22px rgba(14,92,79,.24);
  }

  /* ---------- ficha do paciente ---------- */
  .profile{display:flex;gap:14px;align-items:center;padding:16px}
  .profile .avatar{width:72px;height:72px;font-size:23px}
  .profile h2{margin:0;font-size:20px;font-weight:650;letter-spacing:-.02em}
  .profile dl{margin:6px 0 0;font-size:13.5px;color:var(--ink-2);display:grid;gap:2px}
  .profile dl div{display:flex;gap:6px}
  .profile dt{color:var(--ink-3);flex:none}
  .profile dd{margin:0}

  .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:22px 2px 9px}
  .section-head h3{margin:0;font-size:14px;font-weight:650;color:var(--ink-2);letter-spacing:.01em}
  .section-head span{font-size:13px;color:var(--ink-3)}

  .bar{height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:9px}
  .bar i{display:block;height:100%;background:var(--pine);border-radius:99px;transition:width .35s ease}

  /* ---------- escada de sessões ---------- */
  .ladder{padding:4px 12px 12px}
  .step{display:flex;gap:13px;align-items:stretch;position:relative}
  .rail{width:30px;flex:none;display:flex;flex-direction:column;align-items:center}
  .rail .dot{
    width:30px;height:30px;border-radius:50%;flex:none;margin-top:12px;
    display:grid;place-items:center;font-size:13px;font-weight:650;
    background:var(--bg);color:var(--ink-3);border:1.5px solid var(--line);
  }
  .rail .line{flex:1;width:2px;background:var(--line);margin:4px 0 0}
  .step:last-child .rail .line{display:none}
  .step.done .rail .dot{background:var(--pine);border-color:var(--pine);color:#fff}
  .step.done .rail .line{background:var(--pine)}
  .step.next .rail .dot{border-color:var(--pine);color:var(--pine);border-width:2px;background:var(--surface)}
  .step-body{flex:1;min-width:0;padding:12px 0 14px;border-bottom:1px solid var(--line)}
  .step:last-child .step-body{border-bottom:0;padding-bottom:4px}
  .step-title{font-weight:600;font-size:15px}
  .step-when{font-size:13.5px;color:var(--pine);font-weight:600;margin-top:2px}
  .step-note{font-size:13px;color:var(--ink-3);margin-top:3px;white-space:pre-wrap}
  .step-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  .link-btn{font-size:13px;font-weight:600;color:var(--ink-3);padding:6px 2px}
  .link-btn.warn{color:var(--red)}
  .link-btn.add{color:var(--pine);display:inline-flex;align-items:center;gap:5px}
  .link-btn.add b{
    display:inline-grid;place-items:center;width:19px;height:19px;border-radius:6px;
    background:var(--pine-soft);font-size:15px;font-weight:600;line-height:1;padding-bottom:1px
  }

  .notice{
    display:flex;gap:9px;padding:11px 13px;border-radius:11px;font-size:13.5px;line-height:1.4;
    background:var(--amber-soft);color:var(--amber);margin:0 0 12px;
  }
  .notice.info{background:var(--pine-soft);color:var(--pine)}
  .notice svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  /* ---------- modal ---------- */
  .scrim{position:fixed;inset:0;background:rgba(20,28,36,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center}
  .sheet{
    background:var(--surface);width:100%;max-width:560px;max-height:92dvh;overflow-y:auto;
    border-radius:20px 20px 0 0;padding:8px var(--pad) calc(20px + var(--safe-b));
    animation:up .22s cubic-bezier(.22,.9,.3,1);
  }
  @keyframes up{from{transform:translateY(22px);opacity:.4}to{transform:none;opacity:1}}
  @media (prefers-reduced-motion:reduce){.sheet{animation:none}}
  .grab{width:38px;height:4px;border-radius:99px;background:var(--line);margin:6px auto 12px}
  .sheet h2{margin:0 0 4px;font-size:19px;font-weight:650;letter-spacing:-.02em}
  .sheet .lead{margin:0 0 16px;font-size:14px;color:var(--ink-3)}

  .field{margin-bottom:13px}
  .field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
  .field .hint{font-weight:400;color:var(--ink-3)}
  /* idade calculada, logo abaixo do campo de nascimento */
  .field .hint.calc{display:block;margin-top:6px;font-size:13px;min-height:18px;color:var(--pine)}
  .field input,.field select,.field textarea{
    width:100%;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--pine);outline-offset:-1px;border-color:var(--pine)}
  .field-row{display:flex;gap:10px}
  .field-row .field{flex:1}
  .photo-pick{display:flex;align-items:center;gap:13px;margin-bottom:15px}
  .photo-pick .avatar{width:66px;height:66px;font-size:21px}
  .photo-acoes{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
  .photo-acoes .btn{gap:7px}
  .photo-acoes .btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .sheet-actions{display:flex;gap:10px;margin-top:18px}
  .sheet-actions .btn{flex:1}

  .pick{width:100%;text-align:left;padding:13px;border:1px solid var(--line);border-radius:12px;margin-bottom:9px}
  .pick:active{border-color:var(--pine);background:var(--pine-soft)}
  .pick .row-title{font-size:15px}

  .toast{
    position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + var(--safe-b));z-index:80;
    background:var(--ink);color:#fff;padding:11px 17px;border-radius:11px;font-size:14px;font-weight:500;
    max-width:calc(100% - 32px);text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.22)
  }
  .banner{
    background:var(--amber-soft);color:var(--amber);font-size:12.5px;padding:8px var(--pad);text-align:center
  }
  /* falha de gravação: precisa ser mais forte que o aviso de demonstração */
  .banner.erro{background:var(--red-soft);color:var(--red);font-weight:600}
  .stack{display:flex;flex-direction:column;gap:9px;margin-top:8px}
  hr.sep{border:0;border-top:1px solid var(--line);margin:20px 0}
  .foot-note{font-size:12.5px;color:var(--ink-3);text-align:center;margin-top:18px;line-height:1.5}