/* =============================================================================
   GPlanSiS Clima — tema macOS, Liquid Glass, claro e escuro.
   Tokens em :root; o escuro vale para prefers-color-scheme (quando o usuário
   não fixou "claro") e para data-theme="dark".
   ============================================================================= */
:root{
  color-scheme: light;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  --font-d: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  --font-r: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --bg:#DCE6F2;
  --ink:#0F1A28; --ink-2:#3E4C5E; --ink-3:#6E7B8C;
  --grid:rgba(30,50,80,.12); --line:rgba(30,50,80,.16);
  --heat:#E8702A; --cold:#2F6BE0; --rain:#0E86B8; --dew:#1F9A6E; --storm:#7B4FD0; --warn:#C98A0C; --danger:#D6362B;
  --accent:#0A84FF;

  /* vidro */
  --glass: rgba(255,255,255,.42);
  --glass-strong: rgba(255,255,255,.62);
  --glass-hover: rgba(255,255,255,.6);
  --glass-edge: rgba(255,255,255,.75);
  --glass-edge-2: rgba(255,255,255,.18);
  --glass-shadow: 0 1px 1px rgba(10,20,40,.04), 0 10px 30px -6px rgba(20,40,80,.18);
  --glass-blur: blur(28px) saturate(185%);
  --specular: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 70%, rgba(255,255,255,.22) 100%);
  --fill: rgba(120,130,150,.14);
  --fill-2: rgba(120,130,150,.22);

  /* céu de fundo — sobrescrito por body[data-sky] */
  --s1:#7FB2F0; --s2:#F6C58B; --s3:#9AD0F5; --s4:#C9B8F2;

  --r-xl:26px; --r-lg:20px; --r-md:14px; --r-sm:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#070C16;
    --ink:#EEF3F9; --ink-2:#B3BFCD; --ink-3:#7F8C9C;
    --grid:rgba(200,220,255,.09); --line:rgba(200,220,255,.13);
    --heat:#FF9F5A; --cold:#6FA0FF; --rain:#42B8E8; --dew:#4FD1A0; --storm:#B08CFF; --warn:#F2BE46; --danger:#FF6B5E;
    --accent:#0A84FF;
    --glass: rgba(28,34,48,.42);
    --glass-strong: rgba(36,42,58,.66);
    --glass-hover: rgba(60,70,92,.5);
    --glass-edge: rgba(255,255,255,.22);
    --glass-edge-2: rgba(255,255,255,.04);
    --glass-shadow: 0 1px 1px rgba(0,0,0,.3), 0 14px 40px -8px rgba(0,0,0,.55);
    --specular: linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 72%, rgba(255,255,255,.06) 100%);
    --fill: rgba(200,210,230,.1);
    --fill-2: rgba(200,210,230,.16);
    --s1:#1B3A78; --s2:#5B2C6F; --s3:#0F4C6E; --s4:#2A2468;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#070C16;
  --ink:#EEF3F9; --ink-2:#B3BFCD; --ink-3:#7F8C9C;
  --grid:rgba(200,220,255,.09); --line:rgba(200,220,255,.13);
  --heat:#FF9F5A; --cold:#6FA0FF; --rain:#42B8E8; --dew:#4FD1A0; --storm:#B08CFF; --warn:#F2BE46; --danger:#FF6B5E;
  --accent:#0A84FF;
  --glass: rgba(28,34,48,.42);
  --glass-strong: rgba(36,42,58,.66);
  --glass-hover: rgba(60,70,92,.5);
  --glass-edge: rgba(255,255,255,.22);
  --glass-edge-2: rgba(255,255,255,.04);
  --glass-shadow: 0 1px 1px rgba(0,0,0,.3), 0 14px 40px -8px rgba(0,0,0,.55);
  --specular: linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 72%, rgba(255,255,255,.06) 100%);
  --fill: rgba(200,210,230,.1);
  --fill-2: rgba(200,210,230,.16);
  --s1:#1B3A78; --s2:#5B2C6F; --s3:#0F4C6E; --s4:#2A2468;
}

/* paletas do céu por condição (claro) */
body[data-sky="clear-day"]   {--s1:#6FA8F2; --s2:#FFC98A; --s3:#8FD3FF; --s4:#B7C6FF}
body[data-sky="cloud-day"]   {--s1:#9DB2CC; --s2:#D6DEE8; --s3:#A9C4DD; --s4:#C2C3DA}
body[data-sky="rain-day"]    {--s1:#6E8DA8; --s2:#9FB8C9; --s3:#5E9CB5; --s4:#8E9BB8}
body[data-sky="storm-day"]   {--s1:#6B6A9C; --s2:#A39BC4; --s3:#56708F; --s4:#8C7AB5}
body[data-sky="night"]       {--s1:#3B4F8F; --s2:#7C6BB8; --s3:#4C79A8; --s4:#5C5296}
/* no escuro o céu fica profundo, mantendo o matiz da condição */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body[data-sky="clear-day"] {--s1:#1D4590; --s2:#6B3A2A; --s3:#0E5578; --s4:#2C2E7A}
  :root:not([data-theme="light"]) body[data-sky="cloud-day"] {--s1:#2A3A52; --s2:#3A4152; --s3:#22445C; --s4:#33325A}
  :root:not([data-theme="light"]) body[data-sky="rain-day"]  {--s1:#173A55; --s2:#24435A; --s3:#0F4C63; --s4:#2A2F55}
  :root:not([data-theme="light"]) body[data-sky="storm-day"] {--s1:#2E2560; --s2:#4A2A66; --s3:#1C3550; --s4:#3B2470}
  :root:not([data-theme="light"]) body[data-sky="night"]     {--s1:#16245A; --s2:#3E2468; --s3:#0D3550; --s4:#231C5C}
}
:root[data-theme="dark"] body[data-sky="clear-day"] {--s1:#1D4590; --s2:#6B3A2A; --s3:#0E5578; --s4:#2C2E7A}
:root[data-theme="dark"] body[data-sky="cloud-day"] {--s1:#2A3A52; --s2:#3A4152; --s3:#22445C; --s4:#33325A}
:root[data-theme="dark"] body[data-sky="rain-day"]  {--s1:#173A55; --s2:#24435A; --s3:#0F4C63; --s4:#2A2F55}
:root[data-theme="dark"] body[data-sky="storm-day"] {--s1:#2E2560; --s2:#4A2A66; --s3:#1C3550; --s4:#3B2470}
:root[data-theme="dark"] body[data-sky="night"]     {--s1:#16245A; --s2:#3E2468; --s3:#0D3550; --s4:#231C5C}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid color-mix(in srgb, var(--accent) 70%, transparent);outline-offset:2px;border-radius:8px}
.hidden{display:none!important}
svg{flex:none}

/* --- céu animado ---------------------------------------------------------- */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--bg);transition:background .6s}
.sky i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.85;transition:background 1.2s}
.sky .b1{width:62vmax;height:62vmax;left:-14vmax;top:-20vmax;background:var(--s1)}
.sky .b2{width:48vmax;height:48vmax;right:-12vmax;top:-8vmax;background:var(--s2);opacity:.7}
.sky .b3{width:55vmax;height:55vmax;left:18vmax;bottom:-28vmax;background:var(--s3)}
.sky .b4{width:40vmax;height:40vmax;right:-6vmax;bottom:-12vmax;background:var(--s4);opacity:.75}
@media (prefers-reduced-motion:no-preference){
  .sky .b1{animation:drift1 38s ease-in-out infinite alternate}
  .sky .b2{animation:drift2 46s ease-in-out infinite alternate}
  .sky .b3{animation:drift3 52s ease-in-out infinite alternate}
  .sky .b4{animation:drift2 41s ease-in-out infinite alternate-reverse}
  @keyframes drift1{to{transform:translate(8vmax,6vmax) scale(1.08)}}
  @keyframes drift2{to{transform:translate(-7vmax,5vmax) scale(.94)}}
  @keyframes drift3{to{transform:translate(-6vmax,-7vmax) scale(1.06)}}
}

/* --- vidro líquido -------------------------------------------------------- */
.glass{
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge-2);
  box-shadow:
    inset 0 1px 0 0 var(--glass-edge),
    inset 0 -1px 0 0 var(--glass-edge-2),
    inset 1px 0 0 0 color-mix(in srgb, var(--glass-edge) 40%, transparent),
    var(--glass-shadow);
  border-radius:var(--r-lg);
  isolation:isolate;
}
/* reflexo especular: luz batendo na borda superior-esquerda */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:var(--specular);
}
/* aresta refrativa: anel claro e fino com máscara, imita a lente na borda */
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(160deg, var(--glass-edge), transparent 35%, transparent 65%, var(--glass-edge) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.8;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--glass-strong)}
}

/* --- estrutura ------------------------------------------------------------ */
.shell{
  position:relative;z-index:1;
  display:grid;grid-template-columns:232px minmax(0,1fr);grid-template-rows:auto 1fr;
  gap:14px;max-width:1400px;margin:0 auto;
  padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));
  min-height:100vh;
}
.toolbar{
  grid-column:1/-1;position:sticky;top:calc(10px + env(safe-area-inset-top,0px));z-index:30;
  display:flex;align-items:center;gap:14px;padding:9px 12px 9px 16px;border-radius:var(--r-xl);
}
.lights{display:flex;gap:8px;margin-right:6px}
.lights i{width:12px;height:12px;border-radius:50%;background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15)}
.lights i:nth-child(2){background:#FEBC2E}
.lights i:nth-child(3){background:#28C840}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:650;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.brand small{font-weight:500;font-size:12px;color:var(--ink-3);padding:2px 7px;border-radius:999px;background:var(--fill)}
.search{position:relative;flex:1 1 280px;max-width:460px;margin-left:auto}
.search input{
  width:100%;height:34px;padding:0 14px 0 34px;border-radius:999px;border:1px solid var(--line);
  background:var(--fill);outline:none;transition:background .2s, box-shadow .2s;
}
.search input:focus{background:var(--glass-strong);box-shadow:0 0 0 3.5px color-mix(in srgb, var(--accent) 35%, transparent)}
.search input::-webkit-search-cancel-button{opacity:.5}
.sico{position:absolute;left:11px;top:9px;width:16px;height:16px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round}
.results{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;display:none;max-height:340px;overflow:auto;padding:6px;border-radius:var(--r-md);background:var(--glass-strong)}
.results button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none;cursor:pointer;border-radius:8px}
.results button:hover,.results button:focus{background:var(--accent);color:#fff;outline:none}
.results button:hover small,.results button:focus small{color:rgba(255,255,255,.8)}
.results small{color:var(--ink-3)}
.tools{display:flex;align-items:center;gap:8px}
.ibtn{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);
  background:var(--fill);cursor:pointer;transition:background .2s, transform .15s;
}
.ibtn:hover{background:var(--glass-hover)}
.ibtn:active{transform:scale(.94)}
.ibtn svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ibtn.sm{width:26px;height:26px}
.ibtn.sm svg{width:14px;height:14px}
.ibtn.on svg{fill:var(--warn);stroke:var(--warn)}

.seg{display:inline-flex;padding:3px;gap:2px;border-radius:999px;background:var(--fill);border:1px solid var(--line)}
.seg button{
  height:28px;min-width:32px;padding:0 9px;display:grid;place-items:center;border:0;border-radius:999px;background:none;cursor:pointer;
  color:var(--ink-2);font-size:13px;font-weight:500;transition:background .25s, color .25s, box-shadow .25s;
}
.seg button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.seg button svg .fillc{fill:currentColor;stroke:none}
.seg button[aria-checked="true"],.seg button[aria-pressed="true"]{
  background:var(--glass-strong);color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.12), inset 0 1px 0 var(--glass-edge);
}
.seg.txt button{padding:0 14px}

/* barra lateral */
.sidebar{position:sticky;top:calc(80px + env(safe-area-inset-top,0px));align-self:start;padding:14px 10px;border-radius:var(--r-xl);max-height:calc(100vh - 100px);overflow:auto}
.sidebar h4{margin:4px 10px 6px;font-size:11.5px;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:500;font-size:14px}
.nav a svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav a:hover{background:var(--fill)}
.nav a.on{background:var(--fill-2)}
.places{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ph{display:flex;align-items:center;justify-content:space-between;padding-right:4px}
.ph h4{margin-bottom:6px}
.pl{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;border-radius:12px;background:none;cursor:pointer;text-align:left}
.pl:hover{background:var(--fill)}
.pl.on{background:var(--accent);color:#fff}
.pl.on small,.pl.on .pt{color:#fff}
.pl .pn{flex:1;min-width:0}
.pl .pn b{display:block;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl .pn small{display:block;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl .pt{font-family:var(--font-r);font-size:20px;font-weight:500;color:var(--ink)}
.pl .x{opacity:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:14px;line-height:1;color:inherit;background:var(--fill-2);border:0;cursor:pointer}
.pl:hover .x,.pl:focus-within .x{opacity:.8}
.empty{padding:6px 10px;font-size:12.5px;color:var(--ink-3)}

/* conteúdo */
.content{min-width:0}
.status{padding:56px 20px;text-align:center;color:var(--ink-2);border-radius:var(--r-xl)}
.err{color:var(--danger)}
section{scroll-margin-top:90px;margin-bottom:26px}
.sh{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:6px 4px 12px}
.sh h2{font-family:var(--font-d);font-weight:700;font-size:24px;margin:0;letter-spacing:-.02em;text-shadow:0 1px 12px color-mix(in srgb, var(--bg) 40%, transparent)}
.sh p{margin:0;color:var(--ink-2);font-size:13.5px;flex:1 1 300px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px}
.hero-main{padding:22px 24px 16px;border-radius:var(--r-xl);min-width:0}
.place{font-family:var(--font-d);font-size:19px;font-weight:600;margin:0}
.place span{display:block;color:var(--ink-3);font-size:13px;font-weight:400;margin-top:2px}
.now{display:flex;align-items:flex-start;gap:20px;margin-top:6px}
.temp{font-family:var(--font-r);font-weight:200;font-size:clamp(88px,11vw,140px);line-height:.9;letter-spacing:-.04em;margin:0}
.temp sup{font-size:.32em;font-weight:300;vertical-align:top;position:relative;top:.3em;margin-left:2px;letter-spacing:0}
.cond{padding-top:12px}
.cond .name{font-family:var(--font-d);font-size:22px;font-weight:600;line-height:1.15;margin-top:4px}
.cond .feels{color:var(--ink-2);font-size:14px}
.reading{margin:16px 0 0;max-width:66ch;font-size:15px}
.reading p{margin:0 0 6px}
.past{color:var(--ink-3);font-size:13px;margin-top:8px}
.hours{display:flex;gap:4px;overflow-x:auto;margin:16px -8px 0;padding:10px 8px 6px;border-top:1px solid var(--line);scrollbar-width:thin}
.hr{flex:0 0 54px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;border-radius:14px;font-size:12.5px}
.hr.cur{background:var(--fill)}
.hr .ht{color:var(--ink-2);font-weight:500}
.hr .hv{font-family:var(--font-r);font-size:17px;font-weight:500}
.hr .hp{font-size:11px;color:var(--rain);font-weight:600;min-height:14px}

.instruments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:start}
.inst{padding:13px 15px;min-height:128px;border-radius:var(--r-lg)}
.inst h3{margin:0 0 6px;font-size:11.5px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.inst .v{font-family:var(--font-r);font-size:30px;font-weight:500;line-height:1.05}
.inst .v small{font-size:14px;font-weight:500;color:var(--ink-2);margin-left:3px}
.inst .s{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.4}
.compass{display:flex;gap:12px;align-items:center}
.uvbar{position:relative;height:5px;border-radius:3px;margin:9px 0 2px;background:linear-gradient(90deg,#3EC46D,#F5D33B 30%,#F59A2F 55%,#E4422F 75%,#A54BD8)}
.uvbar i{position:absolute;top:-2.5px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--ink),0 1px 3px rgba(0,0,0,.3);transform:translateX(-50%)}

/* alertas */
.alerts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.alert{display:flex;gap:12px;padding:13px 15px;border-radius:var(--r-lg)}
.alert .dot{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;background:var(--ink-3)}
.alert b{display:block;font-family:var(--font-d);font-size:15.5px;font-weight:650;line-height:1.25}
.alert span{font-size:13.5px;color:var(--ink-2)}
.alert.l1 .dot{background:var(--dew)} .alert.l2 .dot{background:var(--warn)} .alert.l3 .dot{background:var(--danger)}
.alert.l3{box-shadow:inset 0 1px 0 var(--glass-edge), 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent), var(--glass-shadow)}

/* meteograma */
.meteo{padding:8px 14px 12px;border-radius:var(--r-xl)}
.panel{position:relative;border-bottom:1px solid var(--grid);padding:8px 0}
.panel:last-child{border-bottom:0}
.panel .lbl{position:absolute;left:4px;top:4px;font-size:12px;font-weight:500;color:var(--ink-2);z-index:2;padding:1px 8px;border-radius:999px;background:var(--fill)}
.panel .lbl i{display:inline-block;width:12px;height:3px;border-radius:2px;vertical-align:middle;margin:0 4px 0 8px}
.cv{position:relative;height:150px}
.cv.sm{height:110px}
.arrows{height:24px;margin-left:44px;margin-right:44px;position:relative}
.arrows svg{position:absolute;top:2px}

/* 16 dias */
.days{border-radius:var(--r-xl);overflow-x:auto;padding:4px 0}
.day,.days-head{display:grid;grid-template-columns:84px 30px minmax(150px,1fr) 62px 54px 82px 74px;gap:12px;align-items:center;padding:8px 18px;min-width:660px}
.day{border-top:1px solid var(--grid)}
.day:hover{background:var(--fill)}
.days-head{font-size:11.5px;font-weight:600;color:var(--ink-3);padding-top:10px;padding-bottom:8px}
.days-head span:nth-child(n+4){text-align:right}
.day .d{font-weight:600;font-size:14.5px;line-height:1.15}
.day .d small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:400}
.range{position:relative;height:22px}
.range .track{position:absolute;top:8px;left:0;right:0;height:6px;border-radius:3px;background:var(--fill-2)}
.range .bar{position:absolute;top:8px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--cold),#38BDB0 35%,#F5C84A 65%,var(--heat))}
.range .clim{position:absolute;top:3px;width:2px;height:16px;border-radius:1px;background:var(--ink);opacity:.5}
.range .t{position:absolute;top:0;font-size:12.5px;font-family:var(--font-r);font-weight:600}
.num{font-family:var(--font-r);font-size:15px;font-weight:500;text-align:right}
.num small{display:block;font-family:var(--font);font-size:11px;color:var(--ink-3);font-weight:400}
.anom{font-family:var(--font-r);font-size:14.5px;font-weight:600;text-align:right}

/* cartões */
.two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px}
.card{padding:16px 18px;border-radius:var(--r-xl);min-width:0}
.card h3{font-family:var(--font-d);font-weight:650;font-size:17px;margin:0 0 3px}
.card .sub{color:var(--ink-2);font-size:13px;margin:0 0 12px}
table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
th,td{padding:6px 8px;text-align:right;border-bottom:1px solid var(--grid)}
th:first-child,td:first-child{text-align:left}
th{font-weight:600;color:var(--ink-3);font-size:11.5px}
tr:last-child td{border-bottom:0}
.tbl{overflow-x:auto}
.aqi{display:flex;align-items:center;gap:14px}
.aqi .v{font-family:var(--font-r);font-weight:500;font-size:56px;line-height:1}
.pills{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.pill{background:var(--fill);border-radius:12px;padding:8px 10px}
.pill small{display:block;color:var(--ink-3);font-size:11px}
.pill b{font-family:var(--font-r);font-size:17px;font-weight:600}

.foot{margin:18px 4px 0;font-size:12px;color:var(--ink-3)}
.foot a{color:var(--ink-2)}

/* --- responsivo ----------------------------------------------------------- */
@media (max-width:1080px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .instruments{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr);padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .lights,.brand small{display:none}
  /* a barra lateral vira barra de abas flutuante, como no iOS */
  .sidebar{
    position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));top:auto;z-index:30;
    max-height:none;overflow:visible;padding:6px;border-radius:999px;
  }
  .sidebar h4,.places{display:none}
  .nav{display:flex;justify-content:space-between;gap:2px}
  .nav a{flex:1;flex-direction:column;gap:2px;padding:6px 2px;font-size:10.5px;border-radius:999px;text-align:center}
  .two{grid-template-columns:minmax(0,1fr)}
  .instruments{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .toolbar{flex-wrap:wrap;gap:10px;padding:10px 12px}
  .search{order:3;flex:1 1 100%;max-width:none;margin:0}
  .tools{margin-left:auto}
  .hero-main{padding:18px 16px 12px}
  .now{gap:12px}
  .pills{grid-template-columns:repeat(2,1fr)}
  .arrows{margin-left:36px;margin-right:36px}
}
@media (prefers-reduced-motion:no-preference){
  .temp{animation:rise .7s cubic-bezier(.2,.7,.2,1)}
  .glass{transition:background .4s, box-shadow .4s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
@media (max-width:560px){
  .brand span{display:none}
  .seg button{min-width:28px;padding:0 6px}
  .temp{font-size:84px}
  .cond .name{font-size:19px}
  .inst{min-height:0}
  .inst .v{font-size:26px}
  html,body{overflow-x:hidden}
}

/* --- PWA / toque ---------------------------------------------------------- */
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{overscroll-behavior-y:none}
@media (hover:none){
  .ibtn,.seg button,.pl,.nav a{min-height:40px}
  .ibtn{width:40px;height:40px}
  .pl .x{opacity:.7}
  .search input{font-size:16px;height:40px} /* 16px evita o zoom automático do iOS */
  .sico{top:12px}
}
/* instalado como app: sem semáforos falsos da janela, barra mais próxima do topo */
@media (display-mode: standalone), (display-mode: window-controls-overlay){
  .lights{display:none}
  .toolbar{-webkit-app-region:drag}
  .toolbar input,.toolbar button{-webkit-app-region:no-drag}
}
@media (max-width:860px){
  .nav a svg{width:21px;height:21px}
  .hours{scroll-snap-type:x mandatory}
  .hr{scroll-snap-align:start}
}

/* =============================================================================
   Módulos especialistas
   ============================================================================= */
.xmod{display:none}
body[data-view="agro"] #app, body[data-view="ops"] #app{display:none!important}
body[data-view="agro"] #m-agro, body[data-view="ops"] #m-ops{display:block}
.xload{padding:48px 20px;text-align:center;color:var(--ink-2)}
.nav .h4x{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.nav a.xl span{display:flex;flex-direction:column;line-height:1.15}
.nav a.xl small{font-size:11px;font-weight:400;color:var(--ink-3)}

.xhead{padding:20px 22px;border-radius:var(--r-xl);margin-bottom:26px}
.xid{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.xid h2{margin:0;font-family:var(--font-d);font-size:26px;font-weight:800;letter-spacing:.08em}
.xid .cargo{font-weight:600;color:var(--ink-2);font-size:14px}
.xid .bio{margin:6px 0 0;max-width:60ch;color:var(--ink-2);font-size:13.5px;font-style:italic}
.xid > div:nth-child(2){flex:1 1 260px}
.ava{flex:none;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px -6px rgba(0,0,0,.35)}
.ava svg{width:32px;height:32px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ava-agro{background:linear-gradient(145deg,#4CC38A,#1C7A4E 70%,#B88A1E)}
.ava-ops{background:linear-gradient(145deg,#FF8A3D,#C8341F 65%,#5B1A12)}
.xpick{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);font-weight:500}
.xpick select{font:inherit;color:var(--ink);background:var(--fill);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer}

.verdict{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:18px;padding:16px 18px;border-radius:var(--r-lg);background:var(--fill)}
.vtxt{flex:1 1 320px;min-width:0}
.vtxt small{display:block;font-size:11.5px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.vtxt strong{display:block;font-family:var(--font-d);font-size:clamp(20px,2.4vw,28px);font-weight:800;line-height:1.15;letter-spacing:-.015em}
.gauges{display:flex;gap:14px}
.gauge{position:relative;width:78px;text-align:center}
.gauge svg{width:64px;height:64px;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:6;stroke-linecap:round}
.gauge .gtr{stroke:var(--fill-2)}
.gauge .gv{transition:stroke-dasharray .8s cubic-bezier(.2,.7,.2,1)}
.gauge b{position:absolute;top:20px;left:0;right:0;font-family:var(--font-r);font-size:19px;font-weight:600}
.gauge small{display:block;font-size:11px;color:var(--ink-3);font-weight:600;margin-top:2px}
.xact{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.xbtn{height:34px;padding:0 16px;border-radius:999px;border:0;background:var(--accent);color:#fff;font-weight:600;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.xbtn:active{transform:scale(.97)}
.xsig{font-size:12.5px;color:var(--ink-3);font-style:italic}

/* linha do tempo */
.tl{border-radius:var(--r-xl);padding:12px 14px 14px;overflow-x:auto;margin-bottom:26px}
.tl-in{min-width:720px}
.tl-row{display:grid;grid-template-columns:170px repeat(48,minmax(0,1fr));gap:2px;align-items:center;margin:3px 0}
.tl-l{font-size:12.5px;font-weight:600;color:var(--ink-2);padding-right:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-h{font-size:11px;color:var(--ink-3);height:16px}
.tl-h span{grid-row:1;white-space:nowrap}
.tl-row i{height:22px;border-radius:4px;cursor:help;transition:transform .12s}
.tl-row i:hover{transform:scaleY(1.25)}
.c0{background:color-mix(in srgb, var(--dew) 70%, transparent)}
.c1{background:color-mix(in srgb, var(--warn) 80%, transparent)}
.c2{background:color-mix(in srgb, var(--danger) 85%, transparent)}
.lg{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin:0 4px 0 8px}

/* diagnóstico e ordens */
.xgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
.xfs{display:grid;gap:10px}
.xf{display:flex;gap:12px;padding:12px 14px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--glass-edge-2);box-shadow:inset 0 1px 0 var(--glass-edge), var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.xf .dot{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
.xf.l0 .dot{background:var(--dew)} .xf.l1 .dot{background:var(--accent)} .xf.l2 .dot{background:var(--warn)} .xf.l3 .dot{background:var(--danger)}
.xf.l3{box-shadow:inset 0 1px 0 var(--glass-edge), 0 0 0 1.5px color-mix(in srgb, var(--danger) 55%, transparent), var(--glass-shadow)}
.xf b{font-family:var(--font-d);font-size:15px;font-weight:700}
.xf p{margin:3px 0 0;font-size:13.5px;color:var(--ink-2)}
.xf p.ord{color:var(--ink);font-weight:500}
.xf p.ord::before{content:"→ ";color:var(--accent);font-weight:700}
.orders{margin:0;padding:14px 18px 14px 38px;border-radius:var(--r-xl);counter-reset:o}
.orders li{margin:0 0 10px;font-size:14px;line-height:1.45}
.orders li:last-child{margin:0}
.orders li::marker{font-weight:800;color:var(--accent)}

@media (max-width:1080px){ .xgrid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:860px){
  .nav .dsk{display:none}
  .nav a.xl small{display:none}
  .nav a.xl span{align-items:center}
  .tl-row{grid-template-columns:120px repeat(48,minmax(0,1fr))}
  .gauges{width:100%;justify-content:flex-start}
}
@media (max-width:560px){
  .xhead{padding:16px}
  .ava{width:48px;height:48px;border-radius:15px}
  .xid h2{font-size:22px}
}
.tl-tip{margin-top:10px;font-size:12.5px;color:var(--ink-2);min-height:18px}
.tl-row i.sel{outline:2px solid var(--ink);outline-offset:1px}

/* =============================================================================
   Modais (dialog nativo) — vidro líquido; vira folha inferior no celular
   ============================================================================= */
.modal{
  position:fixed;padding:0;border:0;margin:auto;width:min(780px, calc(100vw - 32px));max-height:calc(100dvh - 48px);
  border-radius:28px;color:var(--ink);overflow:hidden;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(40px) saturate(190%);backdrop-filter:blur(40px) saturate(190%);
  box-shadow:inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-edge-2), 0 30px 80px -20px rgba(0,0,0,.45);
}
.modal::backdrop{background:rgba(8,14,28,.32);-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%)}
.modal[open]{display:flex;flex-direction:column}
.mbody{position:relative;padding:22px 24px 22px;overflow-y:auto;max-height:inherit;background:var(--specular)}
html.modal-open{overflow:hidden}
.mh{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.mt{flex:1;min-width:0}
.mh h3{margin:0;font-family:var(--font-d);font-size:22px;font-weight:700;letter-spacing:-.015em}
.mh p{margin:2px 0 0;color:var(--ink-2);font-size:14px}
.mx svg{width:15px;height:15px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.kpi{padding:10px 12px;border-radius:14px;background:var(--fill);border:1px solid var(--glass-edge-2)}
.kpi small{display:block;font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em}
.kpi b{display:block;font-family:var(--font-r);font-size:24px;font-weight:600;line-height:1.2;margin-top:2px}
.kpi b em{font-style:normal;font-size:13px;font-weight:500;color:var(--ink-2);margin-left:3px}
.kpi span{display:block;font-size:12px;color:var(--ink-2);margin-top:1px}
.mcv{position:relative;height:190px;margin:16px 0 4px;padding:8px 6px 4px;border-radius:16px;background:var(--fill)}
.msub{margin:18px 0 8px;font-size:12px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.mscale{display:grid;gap:3px}
.mscale div{display:grid;grid-template-columns:64px 150px 1fr;gap:10px;align-items:baseline;padding:6px 10px;border-radius:10px;font-size:13px}
.mscale div.on{background:var(--accent);color:#fff}
.mscale div.on small{color:rgba(255,255,255,.85)}
.mscale b{font-family:var(--font-r);font-weight:600}
.mscale span{font-weight:600}
.mscale small{color:var(--ink-2);font-size:12.5px}
.mst{display:grid;gap:4px}
.mst div{display:grid;grid-template-columns:12px 190px 1fr auto;gap:10px;align-items:center;padding:6px 10px;border-radius:10px;background:var(--fill);font-size:13px}
.mst i{width:12px;height:12px;border-radius:4px}
.mst span{color:var(--ink-2)}
.mst small{font-size:10.5px;font-weight:700;color:var(--ink-3);letter-spacing:.06em}
.mact{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.mbtn{height:34px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--fill);color:var(--ink);font-weight:600;cursor:pointer}
.mbtn:hover{background:var(--glass-hover)}
.mact .xbtn{order:2}
.mact .mbtn:last-child:not(:first-child){margin-left:auto;order:3}
@media (prefers-reduced-motion:no-preference){
  .modal[open]{animation:pop .32s cubic-bezier(.2,.9,.25,1.05)}
  .modal[open]::backdrop{animation:fade .25s ease}
  @keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}}
}
@media (max-width:560px){
  .modal{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:26px 26px 0 0;max-height:90dvh}
  .mbody{padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px))}
  .mbody::before{content:"";display:block;width:38px;height:5px;border-radius:3px;background:var(--fill-2);margin:-6px auto 12px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mscale div{grid-template-columns:52px 1fr;}
  .mscale small{grid-column:1/-1}
  .mst div{grid-template-columns:12px 1fr auto}
  .mst span{grid-column:2/-1}
  .mact .mbtn:last-child:not(:first-child){margin-left:0}
  @media (prefers-reduced-motion:no-preference){ @keyframes pop{from{transform:translateY(100%)}to{transform:none}} }
}

/* elementos que abrem modal */
.inst[data-m],.hr[data-i],.day[data-k]{cursor:pointer}
.inst[data-m]{transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s}
.inst[data-m]:hover{transform:translateY(-2px)}
.inst[data-m]:active{transform:scale(.985)}
.inst h3{display:flex;align-items:center;justify-content:space-between;gap:6px}
.chev{width:14px;height:14px;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:opacity .2s, transform .2s}
.inst[data-m]:hover .chev{opacity:1;transform:translateX(2px)}
.hr[data-i]:hover{background:var(--fill)}

/* rolagem horizontal discreta (a faixa de 24 h mostrava trilho branco) */
.hours,.days,.tl,.tbl{scrollbar-width:thin;scrollbar-color:var(--fill-2) transparent}
.hours::-webkit-scrollbar,.days::-webkit-scrollbar,.tl::-webkit-scrollbar,.tbl::-webkit-scrollbar{height:6px;background:transparent}
.hours::-webkit-scrollbar-thumb,.days::-webkit-scrollbar-thumb,.tl::-webkit-scrollbar-thumb,.tbl::-webkit-scrollbar-thumb{background:var(--fill-2);border-radius:3px}
.hours::-webkit-scrollbar-track,.days::-webkit-scrollbar-track,.tl::-webkit-scrollbar-track,.tbl::-webkit-scrollbar-track{background:transparent}
.nav a:focus-visible{outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent);outline-offset:-2px;border-radius:10px}

/* =============================================================================
   Laboratório
   ============================================================================= */
body[data-view="lab"] #app{display:none!important}
body[data-view="lab"] #m-lab{display:block}
.ava-lab{background:linear-gradient(145deg,#6E8BFF,#4B2DBF 65%,#1A1446)}
.lab-kpis{margin-top:16px}
.lab-read{margin-top:14px;display:grid;gap:6px}
.lab-read p{margin:0;font-size:14px;line-height:1.5;padding:8px 12px;border-radius:12px;background:var(--fill)}
.lab-sec{margin-bottom:22px}
.lab-sec .card{padding:14px}
.lab-sec .two{gap:14px}
.prof-ctl{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.prof-ctl input{flex:1;accent-color:var(--accent)}
.prof-ctl b{font-family:var(--font-r);font-size:14px;min-width:90px;text-align:right}
table.idx{margin-top:10px}
table.idx td:nth-child(2),table.idx th:nth-child(2){text-align:right}
table.idx td:last-child,table.idx th:last-child{text-align:left;color:var(--ink-2)}
/* mapa de calor */
.heat-card{overflow-x:auto}
.hm{min-width:640px}
.hm-row{display:grid;grid-template-columns:70px repeat(24,minmax(0,1fr));gap:2px;margin-bottom:2px}
.hm-row i{height:20px;border-radius:3px;cursor:pointer;transition:transform .1s}
.hm-row i:hover{transform:scale(1.25);position:relative;z-index:1;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.hm-row i.hm-now{outline:2px solid var(--ink);outline-offset:-1px}
.hm-row i.hm-x{background:var(--fill);cursor:default}
.hm-d{font-size:12px;font-weight:600;color:var(--ink-2);align-self:center}
.hm-h span{font-size:10.5px;color:var(--ink-3);text-align:center}
.hm-leg{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--ink-2);flex-wrap:wrap}
.hm-leg div{display:flex;flex:0 1 220px;height:10px;border-radius:5px;overflow:hidden}
.hm-leg div i{flex:1}
.hm-leg small{margin-left:auto;color:var(--ink-3);font-weight:600}
/* rosa dos ventos */
.rose-card{display:flex;flex-direction:column;align-items:center}
.rose{width:100%;max-width:300px}
.rose .rr{fill:none;stroke:var(--grid);stroke-width:1}
.rose .rt{font-size:9px;fill:var(--ink-3)}
.rose .rl{font-size:12px;font-weight:700;fill:var(--ink-2)}
.rose .rc{fill:var(--glass-strong);stroke:var(--line)}
.rose .rcal{font-size:8.5px;fill:var(--ink-2);font-weight:600}
.rose path{stroke:var(--glass-strong);stroke-width:.5}
.rose path:hover{opacity:.8}
.rose-leg{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-size:11.5px;color:var(--ink-2);margin-top:6px}
.rose-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.rose-note{margin:8px 0 0;font-size:13px;color:var(--ink-2);text-align:center}

/* =============================================================================
   Satélite de fundo — fica abaixo do céu; o céu vira um véu translúcido
   ============================================================================= */
:root{--veil:rgba(214,228,244,.42);--veil-blob:.32}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--veil:rgba(6,11,22,.46);--veil-blob:.30} }
:root[data-theme="dark"]{--veil:rgba(6,11,22,.46);--veil-blob:.30}
.satbg{position:fixed;inset:0;z-index:0;background:#0E2240;display:none}
body.sat-bg .satbg, body.mapview .satbg{display:block}
body.sat-bg .sky{background:var(--veil)}
body.sat-bg .sky i{opacity:var(--veil-blob)}
.satbg .leaflet-container,.satbg.leaflet-container{background:#050912;font:inherit}
.satbg .leaflet-control-attribution{background:rgba(0,0,0,.35);color:rgba(255,255,255,.75);font-size:10px;border-radius:8px 0 0 0;padding:1px 6px}
.satbg .leaflet-control-attribution a{color:#fff}
body:not(.mapview) .satbg .leaflet-control-container{display:none}
.starcv{position:absolute;inset:0;z-index:450;pointer-events:none}
.here i{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#0A84FF;border:2.5px solid #fff;box-shadow:0 0 0 0 rgba(10,132,255,.6);animation:ping 2s infinite}
.here b{position:absolute;left:18px;top:-3px;white-space:nowrap;font:600 12px var(--font);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(10,132,255,.6)}100%{box-shadow:0 0 0 18px rgba(10,132,255,0)}}

/* página de satélite: mapa interativo em tela cheia, controles em vidro */
body.mapview .sky{opacity:0;transition:opacity .4s}
body.mapview .shell{pointer-events:none}
body.mapview .toolbar{pointer-events:auto}
body.mapview .sidebar, body.mapview .content{display:none}
body.mapview .satbg{z-index:2}
body.mapview .toolbar{z-index:40}
body.mapview .shell{z-index:3}
.satpanel{display:none}
body.mapview .satpanel{
  display:block;position:fixed;z-index:30;left:16px;top:calc(84px + env(safe-area-inset-top,0px));width:320px;max-height:calc(100dvh - 110px);overflow:auto;
  padding:16px;border-radius:24px;color:var(--ink);
  background:var(--glass);-webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
  box-shadow:inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-edge-2), var(--glass-shadow)}
.sp-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.sp-h h3{margin:0;font-family:var(--font-d);font-size:18px;font-weight:700}
.sp-h p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2)}
.sp-seg{margin:12px 0 10px;display:flex;width:100%}
.sp-seg button{flex:1;padding:0 6px;font-size:12px}
.sp-row{display:flex;gap:8px;margin-bottom:10px}
.sp-row .mbtn{flex:1;font-size:13px}
.sw{display:flex;align-items:center;gap:10px;padding:7px 2px;font-size:13.5px;font-weight:500;cursor:pointer}
.sw input{position:absolute;opacity:0}
.sw span{position:relative;flex:none;width:40px;height:24px;border-radius:12px;background:var(--fill-2);transition:background .2s}
.sw span::after{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.sw input:checked + span{background:#34C759}
.sw input:checked + span::after{transform:translateX(16px)}
.sw input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.sp-star{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.sp-k{padding:10px;border-radius:14px;background:var(--fill)}
.sp-k b{display:block;font-family:var(--font-r);font-size:24px;font-weight:600}
.sp-k small{font-size:11px;color:var(--ink-2)}
.sp-list{display:grid;gap:4px;margin-top:8px}
.sp-list div{padding:6px 10px;border-radius:10px;background:var(--fill);font-size:12px}
.sp-list b{display:block;font-size:12.5px}
.sp-list span{color:var(--ink-2)}
.sp-cred{margin:12px 0 0;font-size:10.5px;color:var(--ink-3);line-height:1.4}
@media (max-width:560px){
  body.mapview .satpanel{left:8px;right:8px;width:auto;top:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px));max-height:46dvh}
}

/* =============================================================================
   Minha tela — widgets
   ============================================================================= */
body[data-view="home"] #app{display:none!important}
body[data-view="home"] #m-home{display:block}
.home-h{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:6px 4px 16px}
.home-h h2{margin:0;font-family:var(--font-d);font-size:34px;font-weight:800;letter-spacing:-.02em;text-shadow:0 2px 18px color-mix(in srgb, var(--bg) 60%, transparent)}
.home-h p{margin:2px 0 0;color:var(--ink-2);font-size:14px;text-transform:capitalize}
.home-act{display:flex;gap:8px;flex-wrap:wrap}
.glassbtn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 1px 0 var(--glass-edge)}
.glassbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.home-act .mbtn,.home-act .xbtn{height:36px;display:inline-flex;align-items:center}
.home-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:158px;grid-auto-flow:dense;gap:14px}
.w{display:flex;flex-direction:column;padding:13px 15px;border-radius:24px;min-width:0;overflow:hidden;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.w-s{grid-column:span 1;grid-row:span 1}
.w-m{grid-column:span 2;grid-row:span 1}
.w-l{grid-column:span 2;grid-row:span 2}
.w:not(.dragging):hover{transform:translateY(-2px)}
.w header{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.w-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:3px}
.w-big{font-family:var(--font-r);font-size:44px;font-weight:300;line-height:1;letter-spacing:-.03em}
.w-big.sm{font-size:32px;font-weight:400}
.w-big em{font-style:normal;font-size:14px;font-weight:500;color:var(--ink-2);margin-left:3px;letter-spacing:0}
.w-line{font-weight:600;font-size:14px}
.w-sub{font-size:12.5px;color:var(--ink-2)}
.w-place{font-weight:600;font-size:13px}
.w-now{display:flex;justify-content:space-between;align-items:center}
.w-read{margin-top:8px;font-size:13px;color:var(--ink-2);overflow:hidden}
.w-read p{margin:0 0 4px}
.w-hours{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;text-align:center;flex:1}
.w-hours.two-rows{grid-template-columns:repeat(6,1fr);grid-template-rows:1fr 1fr}
.w-hr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.w-hr small{font-size:11.5px;color:var(--ink-2);font-weight:600}
.w-hr b{font-family:var(--font-r);font-weight:600;font-size:15px}
.w-hr em{font-style:normal;font-size:10.5px;color:var(--rain);font-weight:700;min-height:12px}
.w-day{display:grid;grid-template-columns:36px 22px 28px 1fr 28px 44px;gap:6px;align-items:center;font-size:12.5px;padding:2px 0}
.w-day span{font-weight:600}
.w-day small{text-align:center;color:var(--ink-2);font-family:var(--font-r)}
.w-day i{position:relative;height:5px;border-radius:3px;background:var(--fill-2)}
.w-day i b{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,var(--cold),#F5C84A,var(--heat))}
.w-day em{font-style:normal;color:var(--rain);font-size:11px;font-weight:600;text-align:right}
.w-al{display:flex;gap:8px;align-items:flex-start;padding:5px 0}
.w-al i{flex:none;width:9px;height:9px;border-radius:50%;margin-top:5px;background:var(--dew)}
.w-al.l2 i{background:var(--warn)} .w-al.l3 i{background:var(--danger)}
.w-al b{display:block;font-size:13px}
.w-al small{display:block;font-size:12px;color:var(--ink-2);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.w-x{display:flex;gap:12px;align-items:center;flex:1}
.w-ring{--p:0;--c:var(--dew);flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%), var(--fill-2) 0);position:relative}
.w-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--glass-strong)}
.w-ring b{position:relative;font-family:var(--font-r);font-size:16px}
.w-verdict{font-family:var(--font-d);font-weight:800;font-size:15.5px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.w-verdict.sm{font-size:12px;-webkit-line-clamp:3}
.w-s .w-x{flex-direction:column;align-items:flex-start;gap:6px}
.w-s .w-ring{width:40px;height:40px}
.w-wind{display:flex;gap:10px;align-items:center}
.w-wind svg{width:54px;height:54px;flex:none}
.w-wind circle{fill:none;stroke:var(--line);stroke-width:1.5}
.w-wind path{fill:var(--accent)} .w-wind line{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.w-s .w-wind{flex-direction:column;align-items:flex-start;gap:4px}
.w-s .w-wind svg{width:40px;height:40px}
.w-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;flex:1;align-items:end;margin-top:6px}
.w-bars div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px}
.w-bars i{width:100%;max-width:22px;border-radius:5px 5px 2px 2px;background:var(--rain)}
.w-bars small{font-size:10.5px;color:var(--ink-3);font-weight:600}
.w-pl{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:0;border-radius:10px;background:var(--fill);cursor:pointer;margin-bottom:4px;text-align:left}
.w-pl span{flex:1;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-pl b{font-family:var(--font-r);font-size:16px}
.w-pl:hover{background:var(--fill-2)}
.w-sat svg{width:34px;height:34px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.w-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.w-gal button{text-align:left;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--fill);cursor:pointer}
.w-gal button:hover{background:var(--accent);color:#fff}
.w-gal button:hover small,.w-gal button:hover em{color:rgba(255,255,255,.85)}
.w-gal b{display:block;font-size:14px}
.w-gal small{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.w-gal em{display:block;font-style:normal;font-size:11px;color:var(--ink-3);margin-top:6px;font-weight:600}

/* modo edição: tremor de ícone, como no iOS */
.home-grid.editing .w{cursor:grab;touch-action:none;user-select:none}
.w-tools{display:flex;gap:4px}
.w-tools button{min-width:24px;height:24px;padding:0 6px;border-radius:999px;border:0;background:var(--fill-2);color:var(--ink);font-weight:700;font-size:12px;cursor:pointer}
.w-tools button[data-del]{background:var(--danger);color:#fff;font-size:15px;line-height:1}
.w.dragging{position:fixed;z-index:60;pointer-events:none;transform:scale(1.04) rotate(-1deg);box-shadow:0 30px 60px -12px rgba(0,0,0,.45);cursor:grabbing}
.w-ph{border-radius:24px;border:2px dashed color-mix(in srgb, var(--accent) 60%, transparent);background:color-mix(in srgb, var(--accent) 10%, transparent)}
.home-hint{margin:12px 4px 0;font-size:12.5px;color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){
  .home-grid.editing .w:not(.dragging){animation:jiggle .32s ease-in-out infinite alternate}
  .home-grid.editing .w:nth-child(2n):not(.dragging){animation-delay:-.16s}
  @keyframes jiggle{from{transform:rotate(-.6deg)}to{transform:rotate(.6deg)}}
}
@media (max-width:1080px){ .home-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:700px){
  .home-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px;gap:10px}
  .home-h h2{font-size:28px}
}

/* =============================================================================
   Barras de rolagem do sistema inteiro: finas, trilho transparente, nos dois temas
   ============================================================================= */
:root{--sb:rgba(30,50,80,.24);--sb-h:rgba(30,50,80,.42)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--sb:rgba(220,230,255,.20);--sb-h:rgba(220,230,255,.38)} }
:root[data-theme="dark"]{--sb:rgba(220,230,255,.20);--sb-h:rgba(220,230,255,.38)}
*{scrollbar-width:thin;scrollbar-color:var(--sb) transparent}
::-webkit-scrollbar{width:8px;height:8px;background:transparent}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sb);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--sb-h);background-clip:padding-box}
.hours,.days,.tl,.tbl{scrollbar-color:var(--sb) transparent}
.hours::-webkit-scrollbar-thumb,.days::-webkit-scrollbar-thumb,.tl::-webkit-scrollbar-thumb,.tbl::-webkit-scrollbar-thumb{background:var(--sb)}

/* widget transparente: sem vidro, flutua direto sobre o satélite */
.w.w-clear{background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:8px 6px}
.w.w-clear::before,.w.w-clear::after{display:none}
.w.w-clear:hover{transform:none}
.w.w-clear header{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.home-grid.editing .w.w-clear{outline:1.5px dashed color-mix(in srgb, var(--accent) 70%, transparent);outline-offset:-2px;border-radius:24px}
.w3d{position:relative;flex:1;min-height:0}
.w3d canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.w3d canvas:active{cursor:grabbing}
.w3d-info{position:absolute;left:4px;top:0;display:flex;flex-direction:column;gap:1px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.65);pointer-events:none}
.w3d-info b{font-family:var(--font-r);font-size:38px;font-weight:300;line-height:1}
.w3d-info b em{font-style:normal;font-size:13px;font-weight:600;margin-left:3px}
.w3d-info span{font-size:13px;font-weight:600}
.w3d-info small{font-size:11.5px;opacity:.9}
.w-m .w3d-info b{font-size:28px}

/* globo MapLibre */
.satbg.maplibregl-map{position:fixed!important;inset:0}
.here{width:14px;height:14px}
body:not(.mapview) .satbg .maplibregl-ctrl-bottom-right{display:none}
.satbg .maplibregl-ctrl-attrib{background:rgba(0,0,0,.4);color:rgba(255,255,255,.8)}
.satbg .maplibregl-ctrl-attrib a{color:#fff}
.satbg .maplibregl-ctrl-group{background:var(--glass-strong);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:14px;box-shadow:inset 0 1px 0 var(--glass-edge), var(--glass-shadow)}
.sp-grid{display:grid!important;grid-template-columns:1fr 1fr;border-radius:16px}
.sp-grid button{border-radius:12px;height:30px}
.sp-tip{margin:0 0 8px;font-size:12px;color:var(--ink-2);line-height:1.45;padding:8px 10px;border-radius:12px;background:var(--fill)}

/* =============================================================================
   Aparência "Satélite" (todo o sistema): imagem nítida, vidro escuro translúcido
   ============================================================================= */
:root[data-mode="sat"]{
  --veil:rgba(4,8,18,.10);
  --glass:rgba(12,18,32,.40);
  --glass-strong:rgba(14,20,36,.68);
  --glass-hover:rgba(40,52,78,.55);
  --glass-edge:rgba(255,255,255,.26);
  --glass-edge-2:rgba(255,255,255,.06);
  --glass-blur:blur(22px) saturate(170%);
  --glass-shadow:0 1px 1px rgba(0,0,0,.35), 0 18px 44px -10px rgba(0,0,0,.6);
  --fill:rgba(255,255,255,.08);
  --fill-2:rgba(255,255,255,.15);
  --ink-2:#C4CEDB; --ink-3:#93A1B3;
}
:root[data-mode="sat"] .satbg{display:block}
:root[data-mode="sat"] .sky{background:var(--veil)}
:root[data-mode="sat"] .sky i{opacity:0}
/* títulos soltos sobre a imagem ganham sombra para ler sobre nuvem branca */
:root[data-mode="sat"] .sh h2,:root[data-mode="sat"] .sh p,:root[data-mode="sat"] .home-h h2,:root[data-mode="sat"] .home-h p,:root[data-mode="sat"] .foot{text-shadow:0 1px 8px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.5)}
:root[data-mode="sat"] .sh p,:root[data-mode="sat"] .home-h p{color:#E3EAF3}

/* =============================================================================
   Menu de contexto
   ============================================================================= */
.ctx{position:fixed;z-index:200;min-width:250px;max-width:320px;max-height:calc(100dvh - 16px);overflow:auto;padding:6px;border-radius:14px;outline:none;color:var(--ink);
  background:var(--glass-strong);-webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
  box-shadow:inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-edge-2), 0 18px 50px -10px rgba(0,0,0,.5);font-size:13.5px}
.ctx-h{padding:6px 10px 6px}
.ctx-h b{display:block;font-size:12.5px;font-weight:700}
.ctx-h small{display:block;font-size:12px;color:var(--ink-2);margin-top:1px}
.ctx hr{border:0;border-top:1px solid var(--line);margin:4px 6px}
.ctx button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:0;border-radius:8px;background:none;color:inherit;text-align:left;cursor:pointer;font-size:13.5px}
.ctx button:hover,.ctx button:focus{background:var(--accent);color:#fff;outline:none}
.ctx button:hover kbd,.ctx button:focus kbd{color:rgba(255,255,255,.8)}
.ctx button[disabled]{opacity:.45;cursor:default}
.ctx .ci{width:18px;text-align:center;flex:none;font-size:13px}
.ctx .ct{flex:1}
.ctx .ck{font-weight:700}
.ctx kbd{font:500 11.5px var(--font);color:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){ .ctx:not([hidden]){animation:ctxIn .14s ease-out} @keyframes ctxIn{from{opacity:0;transform:scale(.97)}} }

/* leitura de altitude sob o cursor */
.alttip{position:fixed;z-index:35;pointer-events:none;padding:6px 10px;border-radius:10px;background:rgba(8,12,22,.78);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.alttip b{display:block;font-family:var(--font-r);font-size:16px}
.alttip small{font-size:11px;opacity:.8}
/* legenda da altitude */
.alt-leg{margin:2px 0 8px;padding:8px 10px;border-radius:12px;background:var(--fill)}
.alt-leg i{display:block;height:9px;border-radius:5px;background:linear-gradient(90deg,#1B7F4B 0%,#3FA34D 3%,#9BC53D 9%,#E3D26F 17%,#F2A541 26%,#D9622B 37%,#A63D2B 51%,#8C6E63 74%,#E8E6E3 100%)}
.alt-leg div{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-2);margin-top:3px}
.alt-leg small{display:block;font-size:11px;color:var(--ink-3);margin-top:4px;line-height:1.35}
/* medição com perfil de elevação */
.measure{position:fixed;z-index:31;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(720px, calc(100vw - 24px));padding:12px 14px;border-radius:20px;color:var(--ink);
  background:var(--glass-strong);-webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);box-shadow:inset 0 1px 0 var(--glass-edge), 0 18px 50px -10px rgba(0,0,0,.5)}
.ms-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ms-h b{font-family:var(--font-d);font-size:16px}
.ms-h span{flex:1;font-size:13px;color:var(--ink-2)}
.ms-h div{display:flex;gap:6px}
.ms-k{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:10px}
.ms-k div{padding:6px 8px;border-radius:10px;background:var(--fill)}
.ms-k small{display:block;font-size:10.5px;color:var(--ink-3);font-weight:600}
.ms-k b{font-family:var(--font-r);font-size:14.5px}
.ms-cv{position:relative;height:150px;margin-top:8px}
@media (max-width:700px){ .ms-k{grid-template-columns:repeat(3,minmax(0,1fr))} body.mapview .measure{bottom:calc(46dvh + 16px)} }

/* rodapé de status: hora de cada imagem e a fonte */
.statusbar{position:fixed;z-index:25;left:0;right:0;bottom:0;display:flex;gap:6px 16px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;
  padding:5px 16px calc(5px + env(safe-area-inset-bottom,0px));font-size:11.5px;color:rgba(255,255,255,.88);
  background:rgba(6,10,20,.55);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border-top:1px solid rgba(255,255,255,.08);scrollbar-width:none}
.statusbar::-webkit-scrollbar{display:none}
.statusbar b{font-weight:700;color:#fff;margin-right:3px}
.statusbar span span{opacity:.6;margin-left:4px}
.sb-i{display:inline-flex;align-items:center}
.sb-i + .sb-i::before{content:"";width:1px;height:12px;background:rgba(255,255,255,.2);margin-right:16px}
.shell{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
body.mapview .satbg .maplibregl-ctrl-bottom-right{bottom:26px}
body.mapview .measure{bottom:calc(40px + env(safe-area-inset-bottom,0px))}
@media (max-width:860px){
  .statusbar{bottom:calc(74px + env(safe-area-inset-bottom,0px));padding:4px 12px;background:rgba(6,10,20,.45);font-size:10.5px}
  .shell{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
  body.mapview .statusbar{bottom:0}
}

/* cartão da região demarcada */
.region{position:fixed;z-index:31;top:calc(84px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(420px, calc(100vw - 24px));padding:12px 14px;border-radius:18px;color:var(--ink);
  background:var(--glass-strong);-webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);box-shadow:inset 0 1px 0 var(--glass-edge), 0 18px 50px -10px rgba(0,0,0,.5)}
body:not(.mapview) .region{display:none}
.rg-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.rg-h b{display:block;font-family:var(--font-d);font-size:17px}
.rg-h small{display:block;font-size:12.5px;color:var(--ink-2);text-transform:capitalize}
.rg-k{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px;margin-top:10px}
.rg-k div{padding:6px 8px;border-radius:10px;background:var(--fill)}
.rg-k small{display:block;font-size:10.5px;color:var(--ink-3);font-weight:600}
.rg-k b{font-family:var(--font-r);font-size:14px}
.rg-n{margin:8px 0 0;font-size:11.5px;color:var(--ink-2);line-height:1.4}
.rg-a{display:flex;gap:6px;margin-top:10px}
.rg-a .mbtn{flex:1;font-size:13px}
@media (max-width:860px){ .region{left:12px;right:12px;width:auto;transform:none} }
@media (min-width:861px){ body.mapview .region{left:calc(50% + 170px)} }

/* =============================================================================
   Botões responsivos (sistema inteiro): ícone + texto numa linha, sem quebrar,
   centralizados; linhas de botões quebram por inteiro quando falta largura
   ============================================================================= */
.mbtn,.xbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;min-height:34px;height:auto;padding:0 14px;line-height:1.1;min-width:0;text-overflow:ellipsis;overflow:hidden}
.sp-row,.rg-a,.mact,.home-act,.ms-h div{display:flex;flex-wrap:wrap;gap:6px}
.sp-row .mbtn,.rg-a .mbtn{flex:1 1 0;min-width:84px;padding:0 10px;font-size:13px}
.sp-grid button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;font-size:12.5px}
.seg button{white-space:nowrap}
.ibtn{flex:none}
@media (hover:none){ .mbtn,.xbtn{min-height:40px} .sp-row .mbtn,.rg-a .mbtn{font-size:14px} }
@media (max-width:380px){ .sp-row .mbtn{min-width:72px;padding:0 6px;font-size:12.5px} }
/* sem WebGL: sem satélite de fundo, volta o céu do tema */
.no-gl .satbg{display:none!important}
.no-gl[data-mode="sat"] .sky{background:var(--bg)}
.no-gl[data-mode="sat"] .sky i{opacity:.5}

/* =============================================================================
   Linha do tempo (satélite)
   ============================================================================= */
.tline{position:fixed;z-index:30;bottom:calc(36px + env(safe-area-inset-bottom,0px));left:352px;right:70px;display:flex;gap:12px;align-items:stretch;padding:8px 12px;border-radius:18px;color:var(--ink);
  background:var(--glass-strong);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);box-shadow:inset 0 1px 0 var(--glass-edge), 0 14px 40px -10px rgba(0,0,0,.5)}
body:not(.mapview) .tline{display:none}
.tl-ctl{display:flex;flex-direction:column;gap:6px;justify-content:center}
.tl-b{width:38px;height:38px;border-radius:50%;border:0;background:var(--accent);color:#fff;font-size:14px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.tl-now{height:24px;padding:0 8px;border-radius:999px;border:1px solid var(--line);background:var(--fill);color:var(--ink);font-size:11px;font-weight:600;cursor:pointer}
.tl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tl-read{display:flex;align-items:center;gap:10px;font-size:12.5px;white-space:nowrap;overflow:hidden;min-height:22px}
.tl-read b{font-family:var(--font-r);font-size:14px}
.tl-read span{color:var(--ink-2)}
.tl-read .tl-k{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:6px;background:var(--fill-2);color:var(--ink)}
.tl-read .tl-img{color:#FFD60A}
.tl-track{position:relative;height:46px;cursor:pointer;touch-action:none;border-radius:10px;outline:none}
.tl-track:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.tl-track svg{position:absolute;inset:0;width:100%;height:100%}
.tl-past{fill:rgba(255,214,10,.10)}
.tl-temp{fill:none;stroke:var(--heat);stroke-width:2;stroke-linejoin:round}
.tl-rain rect{fill:var(--rain);opacity:.85}
.tl-day{stroke:var(--line);stroke-width:1}
.tl-dl{font:700 10px var(--font);fill:var(--ink-2);text-transform:uppercase}
.tl-hl{font:500 9px var(--font);fill:var(--ink-3)}
.tl-nowl{stroke:#FFD60A;stroke-width:1.5;stroke-dasharray:3 2}
.tl-tag{font:600 9px var(--font);fill:var(--ink-3)}
.tl-thumb{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1.5px;border-radius:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 0 10px rgba(255,255,255,.6);pointer-events:none}
.tl-thumb::after{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
body.mapview .satbg .maplibregl-ctrl-bottom-right{bottom:110px}
body.mapview .measure{bottom:calc(120px + env(safe-area-inset-bottom,0px))}
@media (max-width:860px){
  .tline{left:8px;right:8px;top:calc(124px + env(safe-area-inset-top,0px));bottom:auto;padding:6px 8px;gap:8px}
  .tl-read span:nth-of-type(n+4){display:none}
  .tl-b{width:32px;height:32px}
}
/* widget Linha do tempo */
.w-tl{width:100%;flex:1;min-height:0}
.w-tl polyline{fill:none;stroke:var(--heat);stroke-width:2;vector-effect:non-scaling-stroke}
.w-tl rect{fill:var(--rain)}
.w-tl rect.p{fill:rgba(255,214,10,.10)}
.w-tl .n{stroke:#FFD60A;stroke-width:1.5;stroke-dasharray:3 2;vector-effect:non-scaling-stroke}
.w-tl text{font:600 9px var(--font);fill:var(--ink-3)}
.tline{right:16px}
body.mapview .satbg .maplibregl-ctrl-bottom-right{bottom:132px}
@media (max-width:860px){ body.mapview .satbg .maplibregl-ctrl-bottom-right{bottom:calc(46dvh + 20px)} }

/* =============================================================================
   Celular: painel do satélite atrás do botão ☰ (folha inferior)
   ============================================================================= */
.satfab{display:none}
@media (max-width:860px){
  body.mapview .satfab{display:grid;place-items:center;position:fixed;z-index:32;left:12px;top:calc(128px + env(safe-area-inset-top,0px));width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;color:var(--ink);
    background:var(--glass-strong);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 1px 0 var(--glass-edge), 0 8px 24px -6px rgba(0,0,0,.5)}
  .satfab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  body.sp-open.mapview .satfab{opacity:0;pointer-events:none}
  body.mapview .satpanel{left:0!important;right:0!important;width:auto!important;top:auto!important;bottom:0!important;max-height:74dvh!important;
    border-radius:26px 26px 0 0!important;padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px))!important;z-index:40;
    transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1);box-shadow:0 -12px 40px -10px rgba(0,0,0,.55), inset 0 1px 0 var(--glass-edge)}
  body.sp-open.mapview .satpanel{transform:none}
  body.mapview .satpanel::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:var(--fill-2);margin:0 auto 10px}
  /* linha do tempo na base, ao alcance do polegar; controles do mapa acima dela */
  .tline{top:auto!important;bottom:calc(30px + env(safe-area-inset-bottom,0px))!important}
  body.mapview .satbg .maplibregl-ctrl-bottom-right{bottom:calc(150px + env(safe-area-inset-bottom,0px))!important}
  body.mapview .measure{bottom:calc(150px + env(safe-area-inset-bottom,0px))!important}
  body.mapview .region{top:calc(128px + env(safe-area-inset-top,0px));left:68px;right:12px}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){ body.mapview .satpanel{transition:none} }

/* =============================================================================
   Controle de modo unificado: Widgets | Mapa | Editar
   ============================================================================= */
.vseg{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-edge-2), var(--glass-shadow)}
.vseg button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--ink-2);font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.vseg button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vseg button:hover{color:var(--ink);background:var(--fill)}
.vseg button[aria-pressed="true"]{background:var(--glass-strong);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18), inset 0 1px 0 var(--glass-edge)}
.vseg button[data-vm="edit"][aria-pressed="true"]{background:var(--accent);color:#fff}
.home-act{align-items:center}
/* no painel do satélite o controle ocupa a largura e substitui o ✕ no desktop */
.satpanel .vseg{display:flex;width:100%;margin-bottom:12px;box-shadow:inset 0 0 0 1px var(--glass-edge-2)}
.satpanel .vseg button{flex:1;justify-content:center;padding:0 8px;font-size:12.5px}
@media (min-width:861px){ #satClose{display:none} }
/* globo da barra: aceso quando o Mapa está aberto */
#satBtn[aria-pressed="true"]{background:var(--accent);border-color:transparent}
#satBtn[aria-pressed="true"] svg{stroke:#fff}
.w-btn{margin-top:8px;align-self:flex-start;height:30px;min-height:30px;font-size:12.5px}
/* rodapé: itens não encolhem; começa sempre do início */
.statusbar .sb-i{flex:none}
@media (max-width:560px){ .vseg button span{display:none} .vseg button{padding:0 12px} .satpanel .vseg button span{display:inline} }
@media (min-width:861px){ body.mapview .satbg .maplibregl-ctrl-bottom-right{bottom:150px} }

/* =============================================================================
   Mapa integrado (desktop): coluna esquerda = navegação + satélite;
   coluna direita = widgets do clima; centro = mapa interativo
   ============================================================================= */
:root{--dockL:300px;--dockR:min(500px, 36vw)}
@media (min-width:861px){
  body.mapview .sidebar{display:block!important;position:fixed;left:16px;top:calc(84px + env(safe-area-inset-top,0px));bottom:40px;width:var(--dockL);max-height:none;overflow-y:auto;pointer-events:auto;z-index:31}
  body.mapview .content{display:block!important;position:fixed;right:16px;top:calc(84px + env(safe-area-inset-top,0px));bottom:40px;width:var(--dockR);overflow-y:auto;overflow-x:hidden;pointer-events:auto;z-index:31;padding:2px 4px 8px 2px}
  body.mapview.widgets-off .content{display:none!important}
  body.mapview #status{display:none}
  /* o painel do satélite dentro da coluna esquerda */
  body.mapview .sidebar .satpanel{position:static!important;display:block;width:auto;max-height:none;margin-top:14px;padding:12px;border-radius:18px;
    background:var(--fill);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--glass-edge-2);z-index:auto}
  body.mapview .sidebar .satpanel .vseg{display:none}
  /* Minha tela vira coluna: cabeçalho compacto e grade de 2 colunas */
  body.mapview .home-h{margin:0 2px 12px;align-items:center}
  body.mapview .home-h h2{font-size:24px}
  body.mapview .home-act{width:100%;justify-content:space-between}
  body.mapview .home-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* o que fica no centro respeita as colunas */
  body.mapview .tline{left:calc(var(--dockL) + 32px)!important;right:16px!important}
  body.mapview:not(.widgets-off) .tline{right:calc(var(--dockR) + 32px)!important}
  body.mapview:not(.widgets-off) .satbg .maplibregl-ctrl-bottom-right{right:calc(var(--dockR) + 24px)}
  body.mapview .region{left:calc(var(--dockL) + 32px + (100vw - var(--dockL) - 64px)/2)}
  body.mapview:not(.widgets-off) .region{left:calc(var(--dockL) + 32px + (100vw - var(--dockL) - var(--dockR) - 96px)/2)}
  body.mapview .measure{left:calc(50% + (var(--dockL) - var(--dockR))/2)}
  /* no modo Mapa o controle de modo fica no topo do centro */
  body.mapview.widgets-off .satpanel-seg{display:flex}
}
/* widgets: alturas explícitas (recolher libera a altura) */
.home-grid{grid-auto-rows:auto!important}
.w-s,.w-m{height:158px}
.w-l{height:330px;grid-row:auto!important}
.w.w-c{height:auto}
.w.w-c .w-body{display:none}
.w.w-c header{margin-bottom:0}
.w-tools{display:flex;gap:4px;align-items:center}
.w-tools button{min-width:24px;height:24px;padding:0 6px;border-radius:999px;border:0;background:var(--fill-2);color:var(--ink);font-weight:700;font-size:11px;cursor:pointer;opacity:.0;transition:opacity .15s}
.w:hover .w-tools button,.w:focus-within .w-tools button,.home-grid.editing .w-tools button,.w.w-c .w-tools button{opacity:1}
@media (hover:none){ .w-tools button{opacity:.85} }
.w-cl svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.w.w-c .w-cl svg{transform:rotate(-90deg)}
.w header .chev{display:none}
/* seções recolhíveis da barra lateral */
.sec-h{cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none}
.sec-h::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-right:6px;transition:transform .2s;opacity:.7}
.sec-h.off::after{transform:rotate(-45deg)}
.sec-hidden{display:none!important}
.ph .sec-h::after{margin-left:8px}
/* painel do satélite recolhível */
.sp-tg{display:flex;align-items:center;gap:6px;border:0;background:none;color:inherit;padding:0;cursor:pointer;text-align:left}
.sp-tg h3{margin:0}
.sp-tg svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform .2s}
.satpanel.sp-collapsed .sp-tg svg{transform:rotate(-90deg)}
.satpanel.sp-collapsed > :not(.sp-h):not(.vseg){display:none!important}
.sp-h{flex-direction:column;align-items:stretch}
.sp-h > p{margin:2px 0 0}
/* colunas do mapa integrado: altura explícita (top+bottom com altura automática não segurava a caixa) */
@media (min-width:861px){
  body.mapview .sidebar,body.mapview .content{bottom:auto!important;height:calc(100dvh - 124px - env(safe-area-inset-top,0px))!important;max-height:none!important;grid-row:auto;align-self:auto}
  body.mapview .shell{max-width:none}
}

/* =============================================================================
   Preditivo
   ============================================================================= */
body[data-view="pred"] #app{display:none!important}
body[data-view="pred"] #m-pred{display:block}
.ava-pred{background:linear-gradient(145deg,#FFB547,#E0332A 60%,#5B0E1E)}
.pr-act{display:flex;gap:8px;flex-wrap:wrap;align-self:center}
.pr-cnt{display:flex;gap:10px}
.pr-cnt div{min-width:72px;text-align:center;padding:8px 10px;border-radius:14px;background:var(--fill);box-shadow:inset 0 -3px 0 var(--c)}
.pr-cnt b{display:block;font-family:var(--font-r);font-size:26px;font-weight:600;color:var(--c)}
.pr-cnt small{font-size:11px;color:var(--ink-2);font-weight:600}
.pr-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:18px 0 22px}
.pr-day{padding:12px;border-radius:18px;display:flex;flex-direction:column;gap:4px;box-shadow:inset 0 3px 0 var(--c), var(--glass-shadow)}
.pr-dh{display:flex;justify-content:space-between;align-items:baseline}
.pr-dh b{font-family:var(--font-d);font-size:16px;text-transform:capitalize}
.pr-dh small{color:var(--ink-3);font-size:12px}
.pr-t{display:flex;gap:8px;align-items:baseline;font-family:var(--font-r)}
.pr-t span{color:var(--cold);font-size:15px} .pr-t b{color:var(--heat);font-size:20px}
.pr-m{font-size:12px;color:var(--ink-2)}
.pr-risk{height:5px;border-radius:3px;background:var(--fill-2);margin-top:4px;overflow:hidden}
.pr-risk i{display:block;height:100%;background:linear-gradient(90deg,#3EC46D,#E8C21C,#F28A1E,#E0332A);background-size:220px 100%}
.pr-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.pr-chips span{font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:6px;background:color-mix(in srgb, var(--c) 22%, transparent);color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent)}
.pr-gantt{padding:12px 14px 14px;border-radius:var(--r-xl);margin-bottom:22px;overflow-x:auto}
.pr-ticks{position:relative;height:16px;margin-left:150px;min-width:600px}
.pr-ticks span{position:absolute;font-size:11px;font-weight:700;color:var(--ink-2);text-transform:capitalize;border-left:1px solid var(--line);padding-left:4px}
.pr-lane{display:grid;grid-template-columns:150px 1fr;align-items:center;min-width:750px;margin:4px 0}
.pr-ln{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.pr-track{position:relative;height:22px;border-radius:6px;background:var(--fill)}
.pr-track i{position:absolute;top:2px;bottom:2px;border-radius:5px;cursor:help;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.pr-al{box-shadow:inset 3px 0 0 var(--c), inset 0 1px 0 var(--glass-edge), var(--glass-shadow)}
.pr-w{color:var(--ink)!important;font-size:12.5px!important}
.pr-nar{padding:14px 16px}
.pr-nar p{margin:0 0 10px;font-size:14px;line-height:1.55}
.pr-nar p:last-child{margin:0}
.pr-arrows{position:relative;height:22px;margin:4px 30px 0 40px}
.pr-arrows span{position:absolute;top:0;transform:translateX(-50%)}
.pr-arrows svg{width:14px;height:14px;fill:var(--ink-2)}
@media (max-width:1080px){ .pr-days{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:560px){ .pr-days{grid-template-columns:repeat(2,minmax(0,1fr))} .pr-cnt div{min-width:58px} }
/* cartão da aeronave */
.region.plane{border-top:3px solid #FFD60A}
.pl-rt{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--fill)}
.pl-rt div{text-align:center;flex:1}
.pl-rt b{display:block;font-family:var(--font-d);font-size:22px;letter-spacing:.04em}
.pl-rt small{font-size:11.5px;color:var(--ink-2)}
.pl-rt span{font-size:20px;color:#FFD60A}
.sp-n{font-style:normal;font-size:11px;font-weight:700;color:var(--ink-3);margin-left:auto}