/* NEU App (app do colaborador): celular com a tela de Serviços e painel de Chegada ao trabalho (home + páginas de solução) */
.sv-app{ position:relative; display:grid; place-items:center; padding:10px 0 34px; background:none; border:0; box-shadow:none }
.na-phone{ --nap:#ff1533; --naa:#171a22; position:relative; width:min(290px,78vw); aspect-ratio:290/590; border-radius:42px; border:10px solid #05070d; background:#f6f7f9; overflow:hidden;
  display:flex; flex-direction:column; font-family:Inter,system-ui,sans-serif; color:#0f1117; text-align:left;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 50px 90px -40px rgba(255,77,94,.55), 0 30px 60px -30px rgba(0,0,0,.9) }
.na-phone svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.na-notch{ position:absolute; top:0; left:50%; z-index:3; transform:translateX(-50%); width:34%; height:20px; background:#05070d; border-radius:0 0 14px 14px }
.na-top{ display:flex; align-items:center; gap:8px; padding:30px 12px 10px; color:#fff; background:radial-gradient(90% 140% at 100% 0%,rgba(255,21,51,.34),transparent 55%), var(--naa) }
.na-top b{ flex:1; font-size:14px; font-weight:800; letter-spacing:-.01em }
.na-top i{ width:26px; height:26px; padding:6px; border-radius:50%; background:rgba(255,255,255,.1) }
.na-mark{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--nap); font-weight:800; font-size:12px }
.na-body{ position:relative; flex:1; overflow:hidden; padding-bottom:64px }
.na-body::before{ content:""; position:absolute; top:-2px; left:0; right:0; height:58px; border-radius:0 0 20px 20px; background:var(--naa) }
.na-card{ position:relative; margin:8px 10px 8px; padding:12px 12px 2px; border-radius:18px; background:#fff; box-shadow:0 12px 24px -16px rgba(16,24,40,.4) }
.na-hello{ display:flex; align-items:center; gap:8px; padding-bottom:10px }
.na-bar{ width:3px; align-self:stretch; border-radius:3px; background:var(--nap) }
.na-hello > div{ flex:1; display:grid; gap:2px } .na-hello b{ font-size:16px; font-weight:800; letter-spacing:-.02em }
.na-hello small{ font-size:8.5px; font-weight:700; letter-spacing:.07em; color:#6b7280 } .na-hello em{ font-style:normal; font-size:9.5px; font-weight:700; color:var(--nap) }
.na-ring{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--nap) 66%,#eceef2 0) }
.na-ring span{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#dde1e8; box-shadow:0 0 0 3px #fff; font-weight:800; font-size:12px; color:#4b5261 }
.na-clock{ display:flex; align-items:center; gap:8px; margin:0 -12px; padding:9px 12px; border-top:1px solid #eceef2 }
.na-clock > svg{ width:16px; height:16px; flex:0 0 auto; color:var(--nap) } .na-clock > div{ flex:1; display:grid } .na-clock b{ font-size:11px } .na-clock small{ font-size:9px; color:#6b7280 }
.na-clock em{ font-style:normal; padding:5px 10px; border-radius:99px; background:var(--nap); color:#fff; font-size:10px; font-weight:700; animation:na-pulse 2.6s ease-in-out infinite }
@keyframes na-pulse{ 50%{ box-shadow:0 0 0 6px rgba(255,21,51,.18) } }
.na-rh{ display:flex; align-items:center; gap:10px; margin:0 10px 8px; padding:10px; border-radius:16px; background:#fff; box-shadow:0 6px 14px -10px rgba(16,24,40,.25) }
.na-rh > svg, .na-tile span{ width:32px; height:32px; padding:7px; flex:0 0 auto; border-radius:50%; color:var(--nap); background:#ffe8eb }
.na-rh > div{ display:grid } .na-rh b{ font-size:11px } .na-rh small{ font-size:9px; color:#6b7280 }
.na-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 10px }
.na-tile{ display:grid; gap:10px; padding:10px; border-radius:16px; background:#fff; box-shadow:0 6px 14px -10px rgba(16,24,40,.25) }
.na-tile b{ font-size:10.5px; font-weight:600 }
.na-tabs{ position:absolute; left:10px; right:10px; bottom:10px; height:44px; padding:0 8px; border-radius:22px; display:flex; align-items:center; justify-content:space-between; background:var(--naa) }
.na-tabs i{ width:18px; height:18px; border-radius:6px; border:2px solid rgba(255,255,255,.45); font-style:normal }
.na-tabs i.on{ width:auto; height:30px; padding:0 14px; border:0; border-radius:15px; display:grid; place-items:center; background:var(--nap); color:#fff; font-size:10.5px; font-weight:700 }
.na-toast{ position:absolute; left:50%; bottom:0; z-index:4; transform:translateX(-50%); width:min(310px,88%); display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:18px; text-align:left;
  background:rgba(13,16,28,.92); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(10px); box-shadow:0 22px 44px -18px rgba(0,0,0,.9); animation:na-toast 6s ease-in-out infinite }
.na-toast span{ width:34px; height:34px; flex:0 0 auto; padding:8px; border-radius:11px; color:#fff; background:#ff1533 }
.na-toast svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.na-toast div{ display:grid; gap:1px } .na-toast b{ font-size:.82rem; color:#fff } .na-toast small{ font-size:.74rem; color:#b9bfd0 }
@keyframes na-toast{ 0%,12%{ opacity:0; transform:translate(-50%,16px) } 20%,84%{ opacity:1; transform:translate(-50%,0) } 94%,100%{ opacity:0; transform:translate(-50%,16px) } }

/* painel de chegada */
.na-arr{ display:grid; gap:12px; padding:18px; border-radius:22px; background:rgba(8,11,22,.72); border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 80px -40px rgba(0,0,0,.9); text-align:left }
.na-arr-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px } .na-arr-head b{ font-size:1rem; color:#fff } .na-arr-head span{ font-size:.78rem; color:#9aa2b8 }
.na-arr-chips{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px }
.na-arr-chips span{ --c:#9aa1ae; display:grid; gap:2px; padding:9px 10px; border-radius:12px; font-size:.68rem; color:#b9bfd0; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08) }
.na-arr-chips b{ font-size:1.15rem; line-height:1; color:var(--c) }
.na-arr .g{ --c:#34d399 } .na-arr .b{ --c:#60a5fa } .na-arr .a{ --c:#fbbf24 } .na-arr .r{ --c:#f87171 }
.na-map{ position:relative; height:170px; border-radius:14px; overflow:hidden; background:linear-gradient(135deg,#101a2e,#0b1220);
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:26px 26px; border:1px solid rgba(255,255,255,.08) }
.na-map svg{ position:absolute; inset:0; width:100%; height:100% }
.na-map .rd{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:5; stroke-linecap:round }
.na-map .rt{ fill:none; stroke:#60a5fa; stroke-width:2; stroke-dasharray:5 6; stroke-linecap:round; animation:na-dash 1.6s linear infinite }
@keyframes na-dash{ to{ stroke-dashoffset:-22 } }
.na-site{ position:absolute; left:51%; top:48%; width:86px; height:86px; margin:-43px 0 0 -43px; border-radius:50%; border:1.5px dashed rgba(255,255,255,.45); background:rgba(255,255,255,.05) }
.na-site::after{ content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:5px; background:#fff }
.na-pin{ position:absolute; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; display:grid; place-items:center; font-size:.62rem; font-weight:800; color:#fff; background:#171a22; box-shadow:0 0 0 2.5px var(--c), 0 6px 14px -4px #000 }
.na-pin.b{ animation:na-move 5s ease-in-out infinite alternate }
@keyframes na-move{ to{ left:30%; top:64% } }
.na-eta{ position:absolute; left:8%; top:8%; padding:5px 10px; border-radius:99px; font-size:.7rem; font-weight:700; color:#fff; background:rgba(96,165,250,.22); border:1px solid rgba(96,165,250,.5) }
.na-arr-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.na-arr-list li{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; font-size:.82rem; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07) }
.na-arr-list i{ width:9px; height:9px; border-radius:50%; background:var(--c); flex:0 0 auto } .na-arr-list b{ color:#fff } .na-arr-list span{ margin-left:auto; color:#b9bfd0; font-size:.76rem; text-align:right }

/* seção da página inicial */
.app-home{ padding:40px 0 90px }
.app-home .sl-spot-in{ grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr); border-color:rgba(255,77,94,.4);
  background:radial-gradient(700px circle at 85% 20%,rgba(255,77,94,.2),transparent 60%), radial-gradient(500px circle at 0% 100%,rgba(96,165,250,.1),transparent 60%), rgba(255,255,255,.03); box-shadow:0 40px 90px -50px rgba(255,77,94,.8) }
.app-home .chapter{ margin-bottom:6px }
.app-home .sl-new{ background:linear-gradient(90deg,rgba(255,77,94,.3),rgba(255,154,92,.14)); border-color:rgba(255,77,94,.6); box-shadow:0 0 0 4px rgba(255,77,94,.08), 0 10px 30px -12px rgba(255,77,94,.8) }
.app-home .sl-new .sl-ic{ background:linear-gradient(135deg,#ff6b78,#d80724) }
.app-home .sl-spot-flow li b{ background:linear-gradient(135deg,#ff6b78,#d80724) }
.app-home .sl-ic{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#ff6b78; background:rgba(255,77,94,.14); border:1px solid rgba(255,77,94,.35); flex:0 0 auto }
.app-home .sl-spot-points .sl-ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.app-home-art{ display:grid; gap:18px; justify-items:center }
.app-home-art .na-arr{ width:100% }
@media (max-width:900px){ .app-home .sl-spot-in{ grid-template-columns:minmax(0,1fr) } }
@media (prefers-reduced-motion:reduce){ .na-toast,.na-clock em,.na-map .rt,.na-pin.b{ animation:none } .na-toast{ opacity:1 } }