:root{
  --ink:#0b1a24;
  --ink-2:#0e2230;
  --sea:#0d1f2b;
  --panel:#efe6d0;
  --panel-2:#e7dabb;
  --panel-edge:#cdbb8e;
  --panel-ink:#233a33;
  --panel-ink-2:#5a6a55;
  --gold:#c29b46;
  --gold-2:#e3c477;
  --gold-soft:rgba(194,155,70,.35);
  --hair:rgba(226,196,119,.20);
  --s-dentro:#3f9e77;
  --s-limitrofe:#d99a3a;
  --s-alto:#d1553f;
  --s-baixo:#4a86bd;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --ff-disp:"Fraunces",Georgia,serif;
  --ff-map:"Spectral",Georgia,serif;
  --ff-ui:"Inter",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);overscroll-behavior:none}
html,body{overflow-x:hidden}
body{font-family:var(--ff-ui);color:#eae0c8;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.app{position:fixed;inset:0;overflow:hidden}

/* ---------- Mapa ---------- */
.atlas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  background:radial-gradient(120% 120% at 50% 35%, #12303f 0%, #0b1a24 60%, #071119 100%);
  touch-action:none;cursor:grab;
}
.atlas.dragging{cursor:grabbing}
.atlas:focus-visible{outline:2px solid var(--gold-2);outline-offset:-4px}

/* ---------- Moldura ---------- */
.frame{position:absolute;inset:14px;pointer-events:none;border:1px solid var(--gold-soft);
  box-shadow:inset 0 0 0 1px rgba(11,26,36,.55), inset 0 0 90px rgba(5,12,18,.55);border-radius:3px;z-index:6}
.frame::before{content:"";position:absolute;inset:5px;border:1px solid rgba(226,196,119,.12)}
.corner{position:absolute;width:26px;height:26px;border:2px solid var(--gold);opacity:.55}
.corner.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.corner.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.corner.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.corner.br{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ---------- Bússola ---------- */
.compass{position:absolute;right:288px;bottom:28px;width:82px;height:82px;z-index:7;opacity:.92;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.cmp-ring{fill:rgba(12,26,36,.55);stroke:var(--gold);stroke-width:1.4}
.cmp-ring2{fill:none;stroke:rgba(226,196,119,.4);stroke-width:.7}
.cmp-star path{fill:var(--gold-2)}
.cmp-star .cmp-s{fill:rgba(226,196,119,.45)}
.cmp-n{fill:#f3e7c4;font:600 15px var(--ff-disp);text-anchor:middle;letter-spacing:.5px}

/* ---------- Masthead ---------- */
.masthead{position:absolute;top:30px;left:34px;z-index:8;display:flex;gap:14px;align-items:center;
  max-width:min(72vw,520px)}
.crest{flex:0 0 auto;width:46px;height:46px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.crest svg{width:46px;height:46px}
.crest-ring{fill:rgba(12,26,36,.45);stroke:var(--gold);stroke-width:1.4}
.crest-drop{fill:none;stroke:var(--gold-2);stroke-width:1.5}
.crest-relief{fill:none;stroke:var(--s-alto);stroke-width:1.4;opacity:.9}
.ttl h1{margin:0;font-family:var(--ff-disp);font-weight:600;font-size:clamp(24px,4.2vw,40px);
  line-height:.98;letter-spacing:.2px;color:#f6eccf;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.ttl .sub{margin:.28em 0 0;font-family:var(--ff-map);font-style:italic;font-size:clamp(12px,1.6vw,15px);
  color:#cdb98a;letter-spacing:.2px}

/* ---------- Painel parchment base ---------- */
.rail,.consult,.cartouche,.legend,.tour-bar{
  background:linear-gradient(160deg,var(--panel) 0%,var(--panel-2) 100%);
  color:var(--panel-ink);border:1px solid var(--panel-edge);
  box-shadow:var(--shadow);border-radius:8px;
}
.rail::after,.consult::after{content:"";position:absolute;inset:3px;border:1px solid rgba(120,96,40,.14);
  border-radius:5px;pointer-events:none}

/* ---------- Rail ---------- */
.rail{position:absolute;top:96px;left:34px;z-index:8;width:262px;max-height:calc(100vh - 210px);
  display:flex;flex-direction:column;overflow:hidden}
.rail-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;
  border-bottom:1px solid rgba(120,96,40,.2)}
.rail-kicker{font-family:var(--ff-map);font-style:italic;font-size:13px;letter-spacing:.4px;color:#7a6127;
  text-transform:uppercase}
.rail-toggle{width:24px;height:24px;line-height:1;border:1px solid var(--panel-edge);background:rgba(255,255,255,.35);
  border-radius:5px;color:var(--panel-ink);font-size:16px;font-weight:600}
.rail-body{overflow-y:auto;padding:6px 8px 10px;scrollbar-width:thin;scrollbar-color:var(--panel-edge) transparent}
.rail.collapsed .rail-body{display:none}

.reg-group{margin:4px 0 8px}
.reg-btn{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:transparent;
  padding:7px 8px;border-radius:6px;color:var(--panel-ink);font-weight:600;font-size:14.5px;letter-spacing:.1px}
.reg-btn:hover,.reg-btn:focus-visible{background:rgba(194,155,70,.16);outline:none}
.reg-btn.is-active{background:rgba(194,155,70,.22)}
.reg-swatch{width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.25);flex:0 0 auto}
.reg-count{margin-left:auto;font-size:12px;color:var(--panel-ink-2);font-weight:500}
.mk-list{list-style:none;margin:2px 0 0;padding:0 0 0 4px}
.mk-item{margin:1px 0}
.mk-btn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;
  padding:5px 8px 5px 10px;border-radius:5px;color:#3d4c3f;font-size:13px;font-family:var(--ff-map)}
.mk-btn:hover,.mk-btn:focus-visible{background:rgba(194,155,70,.14);outline:none}
.mk-btn.is-active{background:rgba(194,155,70,.2);color:#233a33}
.mk-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.mk-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-val{font-size:12px;color:var(--panel-ink-2);font-variant-numeric:tabular-nums}

/* ---------- Consulta ---------- */
.consult{position:absolute;top:30px;right:34px;z-index:8;width:250px;padding:13px 15px 15px}
.consult-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.consult-kicker{font-family:var(--ff-map);font-style:italic;font-size:13px;letter-spacing:.4px;color:#7a6127;
  text-transform:uppercase}
.patient-tag{font-size:12.5px;font-weight:600;background:rgba(35,58,51,.1);border:1px solid rgba(120,96,40,.25);
  padding:3px 9px;border-radius:20px;font-variant-numeric:tabular-nums}
.consult-ctl{display:block;margin:11px 0 4px}
.consult-ctl>span{display:block;font-size:12px;color:var(--panel-ink-2);margin-bottom:6px;font-weight:500}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;
  background:linear-gradient(90deg,var(--s-baixo),var(--s-dentro),var(--s-alto));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--panel);border:2px solid var(--gold);box-shadow:0 2px 5px rgba(0,0,0,.35);cursor:pointer}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--panel);
  border:2px solid var(--gold);box-shadow:0 2px 5px rgba(0,0,0,.35);cursor:pointer}
input[type=range]:focus-visible{box-shadow:0 0 0 3px var(--gold-soft)}
.seg{display:flex;gap:0;margin-top:12px}
.seg-btn{flex:1;border:1px solid var(--panel-edge);background:rgba(255,255,255,.32);color:var(--panel-ink);
  padding:7px 0;font-size:13px;font-weight:600}
.seg-btn:first-child{border-radius:6px 0 0 6px}
.seg-btn:last-child{border-radius:0 6px 6px 0;border-left:0}
.seg-btn.is-on{background:var(--gold);color:#3a2e12;border-color:var(--gold)}
.seg-btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.tour-btn{margin-top:13px;width:100%;border:1px solid var(--gold);background:rgba(194,155,70,.14);
  color:#5a4718;font-weight:600;font-size:13.5px;padding:9px 0;border-radius:6px;letter-spacing:.2px}
.tour-btn:hover{background:rgba(194,155,70,.24)}
.tour-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.consult-hint{margin:11px 0 0;font-size:11.5px;line-height:1.45;color:var(--panel-ink-2);font-family:var(--ff-map)}

/* ---------- Cartucho ---------- */
.cartouche{position:absolute;left:34px;bottom:64px;z-index:9;width:318px;padding:16px 18px 17px}
.cartouche[hidden]{display:none}
.cart-close{position:absolute;top:8px;right:9px;width:26px;height:26px;border:0;background:transparent;
  color:var(--panel-ink-2);font-size:20px;line-height:1;border-radius:5px}
.cart-close:hover{background:rgba(0,0,0,.06);color:var(--panel-ink)}
.cart-head-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:26px}
.cart-prov{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--ff-map);font-style:italic;font-size:11px;color:#7a6127;letter-spacing:.15px;
  text-transform:uppercase}
.cart-head h2{margin:3px 0 0;font-family:var(--ff-disp);font-weight:600;font-size:22px;line-height:1.05;color:#233a33}
.cart-val{display:flex;align-items:baseline;gap:8px;margin:12px 0 4px;flex-wrap:wrap}
.cart-num{font-family:var(--ff-disp);font-size:34px;font-weight:600;line-height:1;color:#233a33;
  font-variant-numeric:tabular-nums}
.cart-unit{font-size:13px;color:var(--panel-ink-2);font-family:var(--ff-map)}
.cart-status{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;color:#fff;white-space:nowrap}
.cart-status.s-dentro{background:var(--s-dentro)}
.cart-status.s-limitrofe{background:var(--s-limitrofe)}
.cart-status.s-alto{background:var(--s-alto)}
.cart-status.s-baixo{background:var(--s-baixo)}
.cart-range{margin:10px 0 2px}
.range-bar{position:relative;height:9px;border-radius:6px;background:rgba(35,58,51,.14);overflow:visible}
.range-band{position:absolute;top:0;bottom:0;left:24%;right:24%;background:rgba(63,158,119,.5);
  border-radius:6px;box-shadow:inset 0 0 0 1px rgba(63,158,119,.7)}
.range-mark{position:absolute;top:-4px;width:3px;height:17px;background:#233a33;border-radius:2px;
  box-shadow:0 0 0 2px var(--panel)}
.range-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--panel-ink-2);
  font-variant-numeric:tabular-nums}
.range-labels .range-mid{font-family:var(--ff-map);font-style:italic}
.relief-glyph{display:block;width:100%;height:62px;margin:13px 0 2px;border-radius:8px;
  background:rgba(35,58,51,.05);border:1px solid rgba(120,96,40,.18)}
.cart-relief{margin:12px 0 0;font-family:var(--ff-map);font-size:14px;line-height:1.4;color:#3a4a3d;
  padding-left:11px;border-left:2px solid var(--gold)}
.cart-patient{margin:9px 0 0;font-size:13px;line-height:1.5;color:#3a4a3d;font-style:italic;
  padding-left:11px;border-left:2px solid rgba(63,158,119,.5)}
.cart-patient::before{content:"Para o paciente: ";font-style:normal;font-weight:600;color:#2f7d5c}
.cart-note{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--panel-ink-2)}

/* ---------- Panorama ---------- */
.panorama{margin-top:14px;padding-top:13px;border-top:1px solid rgba(120,96,40,.22)}
.pan-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;margin-bottom:8px}
.pan-head span:first-child{font-family:var(--ff-map);font-style:italic;color:#7a6127;letter-spacing:.3px;
  text-transform:uppercase}
.pan-head span:last-child{color:var(--panel-ink-2);font-size:11px;font-variant-numeric:tabular-nums}
.pan-bar{display:flex;height:9px;border-radius:6px;overflow:hidden;border:1px solid rgba(0,0,0,.12)}
.pan-seg{height:100%}
.pan-seg.s-dentro{background:var(--s-dentro)}.pan-seg.s-limitrofe{background:var(--s-limitrofe)}
.pan-seg.s-alto{background:var(--s-alto)}.pan-seg.s-baixo{background:var(--s-baixo)}
.pan-legend{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;margin-top:9px;font-size:11.5px;color:#3a4a3d}
.pan-legend span{display:flex;align-items:center;gap:6px}
.pan-legend b{font-variant-numeric:tabular-nums;color:#233a33}

/* ---------- Legenda ---------- */
.legend{position:absolute;right:34px;bottom:64px;z-index:8;width:236px;padding:0;overflow:hidden}
.legend-toggle{width:100%;text-align:left;border:0;background:transparent;padding:11px 15px;
  font-family:var(--ff-map);font-style:italic;font-size:13px;color:#7a6127;letter-spacing:.4px;
  text-transform:uppercase;border-bottom:1px solid rgba(120,96,40,.2)}
.legend-body{padding:12px 15px 14px}
.legend.collapsed .legend-body{display:none}
.hypso-strip{height:11px;border-radius:6px;border:1px solid rgba(0,0,0,.2);
  background:linear-gradient(90deg,#0d3549,#1f6f8b,#d6c696,#96a86e,#c4aa6e,#aa804e,#78562f,#ebe8e0)}
.hypso-ends{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;color:var(--panel-ink-2);
  font-family:var(--ff-map)}
.legend-status{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:11px;font-size:12px;color:#3a4a3d}
.legend-status span{display:flex;align-items:center;gap:6px}
.dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.d-dentro{background:var(--s-dentro)}.d-limitrofe{background:var(--s-limitrofe)}
.d-alto{background:var(--s-alto)}.d-baixo{background:var(--s-baixo)}

/* ---------- Hint ---------- */
.hint{position:absolute;left:50%;transform:translateX(-50%);bottom:24px;z-index:7;
  font-family:var(--ff-map);font-style:italic;font-size:12.5px;color:#b8a877;letter-spacing:.3px;
  background:rgba(11,26,36,.5);padding:5px 14px;border-radius:20px;border:1px solid var(--hair);pointer-events:none}

/* ---------- Disclaimer ---------- */
.disclaimer{position:absolute;left:50%;transform:translateX(-50%);top:14px;z-index:8;
  max-width:min(92vw,640px);text-align:center;font-size:11.5px;line-height:1.4;color:#e9dcb6;
  background:rgba(139,64,52,.9);border:1px solid rgba(226,196,119,.45);padding:5px 16px;border-radius:20px;
  box-shadow:0 6px 18px rgba(0,0,0,.4)}
.disclaimer strong{color:#fff}

/* ---------- Guide link ---------- */
.guide-link{display:inline-block;margin-top:9px;font-size:12.5px;color:#d9c48a;
  text-decoration:none;border:1px solid var(--gold-soft);border-radius:20px;padding:3px 12px;
  background:rgba(11,26,36,.4);letter-spacing:.2px}
.guide-link:hover{color:#f3e7c4;border-color:var(--gold);background:rgba(11,26,36,.6)}

/* ---------- Tour bar ---------- */
.tour-bar{position:absolute;left:50%;transform:translateX(-50%);bottom:24px;z-index:10;
  display:flex;align-items:center;gap:4px;padding:6px 8px}
.tour-bar[hidden]{display:none}
.tb-btn{width:34px;height:34px;border:1px solid var(--panel-edge);background:rgba(255,255,255,.35);
  color:var(--panel-ink);border-radius:6px;font-size:15px;line-height:1}
.tb-btn:hover{background:rgba(194,155,70,.2)}
.tb-btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.tb-label{min-width:150px;text-align:center;font-family:var(--ff-map);font-size:13px;font-weight:500;
  padding:0 8px;color:#3a4a3d}
.tb-stop{background:rgba(139,64,52,.14);border-color:rgba(139,64,52,.4);color:#8b4034}

/* ---------- Mobile ---------- */
@media (max-width:820px){
  .masthead{top:66px;left:16px;max-width:72vw}
  .ttl h1{font-size:25px}
  .disc-extra{display:none}
  .compass{width:46px;height:46px;right:14px;bottom:auto;top:150px}
  .consult{top:auto;right:0;left:0;bottom:0;width:100%;border-radius:14px 14px 0 0;
    padding:16px 18px calc(14px + env(safe-area-inset-bottom));z-index:16;
    transform:translateY(calc(100% - 46px));transition:transform .28s ease}
  .consult.open{transform:translateY(0)}
  .consult::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:3px;background:rgba(120,96,40,.4)}
  .consult-row{margin-top:8px}
  .rail{top:auto;left:0;right:0;bottom:0;width:100%;max-height:56vh;border-radius:14px 14px 0 0;
    transform:translateY(calc(100% - 46px));transition:transform .28s ease;z-index:16}
  .rail.open{transform:translateY(0)}
  .rail::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:3px;background:rgba(120,96,40,.4);z-index:2}
  .rail-toggle{display:none}
  .legend{display:none}
  .cartouche{left:14px !important;right:auto !important;transform:none !important;bottom:60px !important;width:332px !important;max-width:none !important}
  .cart-num{font-size:30px}
  .hint{display:none}
  .disclaimer{top:12px;font-size:10.5px;max-width:96vw;padding:4px 12px}
  .tour-bar{bottom:14px}
  .app.touring .mtabs{display:none}
  /* abas mobile */
  .mtabs{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:17;display:flex;gap:8px}
}
.mtabs{display:none}
@media (max-width:820px){.mtabs{display:flex}}
@media (min-width:401px) and (max-width:820px){
  .cartouche{width:384px !important}
}
.mtab{border:1px solid var(--panel-edge);background:linear-gradient(160deg,var(--panel),var(--panel-2));
  color:var(--panel-ink);border-radius:20px;padding:8px 16px;font-size:13px;font-weight:600;box-shadow:var(--shadow)}
.mtab.is-on{background:var(--gold);color:#3a2e12;border-color:var(--gold)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .consult,.rail{transition:none}
}