/* Sledovanie stavebného povolenia – stránka klienta */
:root{--sl-hotovo:#2e7d32;--sl-caka:#d98b1f;--sl-plan:#b9b4aa;--sl-modra:#2f6fb0}

/* hlavička */
.sl-hlava{background:var(--zelena-tmava);color:#fff;padding-block:clamp(28px,calc(56 * var(--u)),60px) clamp(36px,calc(64 * var(--u)),68px)}
.sl-ukazka{display:inline-flex;align-items:center;gap:8px;background:#f7d77c;color:#3a2c08;font-weight:700;font-size:var(--t-male);padding:8px 14px;border-radius:8px;margin:0 0 24px}
.sl-ukazka .ico{width:18px;height:18px;flex:none}
.sl-hlava__in{display:flex;justify-content:space-between;align-items:center;gap:24px 40px}
.sl-stitok{display:inline-flex;align-items:center;gap:8px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(13px,calc(15 * var(--u)),15px);color:#b9e3c6;margin:0 0 12px}
.sl-stitok .ico{width:20px;height:20px}
.sl-hlava h1{font-size:clamp(30px,calc(56 * var(--u)),60px);font-weight:900;line-height:1.02;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.sl-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;color:#cfe0d8;font-size:var(--t-male)}
.sl-meta span{display:inline-flex;align-items:center;gap:6px}
.sl-meta .ico{width:18px;height:18px;opacity:.8}
.sl-percent{position:relative;flex:none;width:clamp(108px,calc(140 * var(--u)),140px);aspect-ratio:1;display:grid;place-items:center;text-align:center}
.sl-percent svg{position:absolute;inset:0;transform:rotate(-90deg)}
.sl-percent circle{fill:none;stroke:rgba(255,255,255,.15);stroke-width:10}
.sl-percent .sl-percent__obluk{stroke:#8fe0a6;stroke-linecap:round;stroke-dasharray:var(--p) 100;animation:sl-obluk 1.4s ease-out both}
@keyframes sl-obluk{from{stroke-dasharray:0 100}}
.sl-percent strong{font-size:clamp(26px,calc(34 * var(--u)),36px);font-weight:900;line-height:1;margin-top:8px}
.sl-percent span{font-size:13px;color:#cfe0d8;margin-top:-28px}
.sl-status{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:clamp(20px,calc(30 * var(--u)),32px);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:10px 20px 10px 14px;font-size:clamp(15px,calc(18 * var(--u)),19px)}
.sl-status span:last-child{color:#cfe0d8}
.sl-status__bod{width:12px;height:12px;border-radius:50%;background:#8fe0a6;box-shadow:0 0 0 0 rgba(143,224,166,.7);animation:sl-pulz 1.8s infinite}
.sl-status--caka .sl-status__bod{background:#f3bd5f;box-shadow:0 0 0 0 rgba(243,189,95,.7)}
@keyframes sl-pulz{70%{box-shadow:0 0 0 12px rgba(143,224,166,0)}100%{box-shadow:0 0 0 0 rgba(143,224,166,0)}}

/* karta s ilustráciou a trasou */
.sl-scena{background:linear-gradient(var(--zelena-tmava) 0 60px,var(--svetla) 60px)}
.sl-karta{background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(30,50,40,.10);border:1px solid var(--okraj)}
.sl-karta--scena{overflow:hidden}
.scena{display:block;width:100%;height:clamp(230px,38vw,420px)}
.scena__popis{font:700 13px Barlow,sans-serif;fill:#4d5a53}
.scena__tabula{font:800 13px Barlow,sans-serif;fill:#24493d;letter-spacing:.06em}
.scena__schvalene{font:900 26px Barlow,sans-serif;fill:#2e7d32;letter-spacing:.08em}
.mrak{animation:sl-mrak 40s linear infinite alternate}
.mrak--2{animation-duration:55s}
@keyframes sl-mrak{to{transform:translateX(60px)}}
.v{animation:sl-objav .8s ease-out both}
@keyframes sl-objav{from{opacity:0;transform:translateY(6px)}}
.je-akt{animation:sl-objav .8s ease-out both,sl-svieti 2.4s ease-in-out .8s infinite}
@keyframes sl-svieti{50%{opacity:.55}}
.dom rect,.dom path{fill:rgba(47,111,176,.10);stroke:var(--sl-modra);stroke-width:2.5;stroke-dasharray:8 6}
.dom--hotovo rect,.dom--hotovo path{fill:rgba(255,255,255,.7);stroke-dasharray:none}
.siet{fill:none}
.siet--caka{stroke:#a39e93!important;stroke-dasharray:6 8;animation:sl-tok 1.2s linear infinite}
@keyframes sl-tok{to{stroke-dashoffset:-28}}
.cesta-spis{stroke:#24493d;stroke-width:2.5;stroke-dasharray:4 7;opacity:.6}
.v--podanie.je-akt .cesta-spis{animation:sl-tok 1s linear infinite}
.presypacky{transform-origin:0 0;animation:sl-otoc 2.4s ease-in-out infinite}
@keyframes sl-otoc{40%,50%{transform:rotate(180deg)}90%,100%{transform:rotate(360deg)}}
.scena__peciatka{animation:sl-peciatka .6s cubic-bezier(.3,1.6,.5,1) both .4s}
@keyframes sl-peciatka{from{opacity:0;transform:translate(330px,236px) rotate(-10deg) scale(1.8)}}

/* trasa (ako pri zásielke) */
.trasa-obal{overflow-x:auto;border-top:1px solid var(--okraj);padding:30px clamp(16px,calc(40 * var(--u)),44px) 24px}
.trasa{position:relative;min-width:720px;margin:0 30px;height:96px}
.trasa__linka{position:absolute;left:0;right:0;top:16px;height:6px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--sl-plan) 0 8px,transparent 8px 14px)}
.trasa__hotovo{position:absolute;left:0;top:0;bottom:0;width:var(--poz);background:var(--sl-hotovo);border-radius:3px;animation:sl-rast 1.6s cubic-bezier(.4,0,.2,1) both}
@keyframes sl-rast{from{width:0}}
.trasa__pohyb{position:absolute;top:0;bottom:0;left:var(--poz);width:var(--krok);background:repeating-linear-gradient(90deg,var(--sl-hotovo) 0 10px,transparent 10px 18px);background-size:36px 100%;opacity:.55;animation:sl-pas 1s linear infinite}
@keyframes sl-pas{to{background-position:36px 0}}
.trasa__auto{position:absolute;top:-6px;left:var(--poz);transform:translateX(-50%);width:50px;height:50px;border-radius:50%;background:var(--zelena);color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(36,73,61,.35);z-index:2;animation:sl-jazda 1.6s cubic-bezier(.4,0,.2,1) both}
.trasa__auto .ico{width:24px;height:24px}
.trasa__auto::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--zelena);opacity:.5;animation:sl-vlna 2s ease-out 1.6s infinite}
@keyframes sl-jazda{from{left:0}}
@keyframes sl-vlna{to{inset:-18px;opacity:0}}
.trasa__zastavky{list-style:none;margin:0;padding:0}
.z{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;width:110px;text-align:center}
.z__bod{width:38px;height:38px;border-radius:50%;background:#fff;border:3px solid var(--sl-plan);display:grid;place-items:center;color:#fff}
.z__bod .ico{width:18px;height:18px;stroke-width:3}
.z--hotovo .z__bod{background:var(--sl-hotovo);border-color:var(--sl-hotovo)}
.z--caka .z__bod{background:var(--sl-caka);border-color:var(--sl-caka)}
.z--prebieha .z__bod{border-color:var(--sl-hotovo)}
.z__nazov{margin-top:10px;font-size:13px;font-weight:700;line-height:1.2;color:#333}
.z--planovane .z__nazov{color:#999;font-weight:600}

/* telo */
.sl-telo{background:var(--svetla);padding-block:clamp(36px,calc(70 * var(--u)),76px) clamp(56px,calc(110 * var(--u)),118px)}
.sl-scena .wrap{padding-bottom:0}
.sl-mriezka{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:clamp(24px,calc(48 * var(--u)),50px);align-items:start}
.sl-h{font-size:clamp(24px,calc(34 * var(--u)),36px);font-weight:900;letter-spacing:-.02em;margin:0 0 20px}
.sl-h:not(:first-child){margin-top:clamp(40px,calc(64 * var(--u)),66px)}

.kroky-sl{list-style:none;margin:0;padding:0;display:grid}
.krok{display:grid;grid-template-columns:44px 1fr;gap:16px;position:relative;padding-bottom:22px}
.krok:not(:last-child)::before{content:"";position:absolute;left:21px;top:44px;bottom:0;width:3px;background:var(--sl-plan);opacity:.5}
.krok--hotovo:not(:last-child)::before{background:var(--sl-hotovo);opacity:1}
.krok__znak{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;border:3px solid var(--sl-plan);color:#999;z-index:1}
.krok__znak .ico{width:20px;height:20px;stroke-width:2.6}
.krok__znak b{font-size:16px}
.krok--hotovo .krok__znak{background:var(--sl-hotovo);border-color:var(--sl-hotovo);color:#fff}
.krok--prebieha .krok__znak{border-color:var(--sl-hotovo);color:var(--sl-hotovo);box-shadow:0 0 0 0 rgba(46,125,50,.4);animation:sl-pulz2 2s infinite}
.krok--prebieha .krok__znak .ico{animation:sl-kyvaj 1.6s ease-in-out infinite}
.krok--caka .krok__znak{background:var(--sl-caka);border-color:var(--sl-caka);color:#fff}
@keyframes sl-pulz2{70%{box-shadow:0 0 0 12px rgba(46,125,50,0)}100%{box-shadow:0 0 0 0 rgba(46,125,50,0)}}
@keyframes sl-kyvaj{50%{transform:rotate(-18deg)}}
.krok__telo{background:#fff;border:1px solid var(--okraj);border-radius:12px;padding:16px 20px;min-width:0}
.krok--prebieha .krok__telo,.krok--caka .krok__telo{border:2px solid var(--sl-hotovo);box-shadow:0 12px 30px rgba(46,125,50,.12)}
.krok--caka .krok__telo{border-color:var(--sl-caka)}
.krok--planovane .krok__telo{background:transparent;border-style:dashed}
.krok__hlava{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px}
.krok h3{font-size:clamp(18px,calc(22 * var(--u)),23px);font-weight:800;margin:0}
.krok--planovane h3{color:#777}
.krok p{margin:.5em 0 0;font-size:clamp(15px,calc(18 * var(--u)),19px);line-height:1.45;color:#333}
.chip{font-size:13px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap}
.chip--hotovo{background:#e3f1e4;color:var(--sl-hotovo)}
.chip--prebieha{background:var(--sl-hotovo);color:#fff}
.chip--caka{background:#fbe9cc;color:#8a5a0d}
.chip--planovane{background:#ecebe7;color:#777}
.krok details{margin-top:6px}
.krok summary{cursor:pointer;font-size:clamp(15px,calc(18 * var(--u)),19px);color:#333;list-style:none}
.krok summary::-webkit-details-marker{display:none}
.krok summary::after{content:" · podrobnosti";color:var(--zelena);font-weight:700;font-size:.85em}
.krok details[open] summary::after{content:" · skryť"}
.podkroky{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.podkroky li{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;font-size:clamp(14px,calc(17 * var(--u)),17px)}
.podkroky .ico{width:20px;height:20px}
.p--hotovo .ico{color:var(--sl-hotovo)}
.p--caka .ico{color:var(--sl-caka);animation:sl-svieti 2s infinite}
.p--caka span{font-weight:700}
.podkroky time{font-size:13px;color:#777}
.podkroky em{font-style:normal;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#8a5a0d;background:#fbe9cc;padding:2px 8px;border-radius:999px}
.dokumenty{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px!important}
.dokumenty span{display:inline-flex;align-items:center;gap:6px;font-size:14px;background:var(--svetla);border:1px solid var(--okraj);padding:5px 10px;border-radius:6px}
.dokumenty .ico{width:16px;height:16px;color:var(--zelena)}

.historia{list-style:none;margin:0;padding:0;border-left:3px solid var(--okraj);margin-left:8px}
.historia li{position:relative;padding:0 0 16px 24px;display:grid;gap:2px}
.historia li::before{content:"";position:absolute;left:-8px;top:5px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid #b5b0a6}
.historia li:first-child::before{border-color:var(--sl-hotovo);background:var(--sl-hotovo)}
.historia li.je-milnik span{font-weight:800}
.historia time{font-size:13px;color:#777;font-weight:600}
.historia span{font-size:clamp(15px,calc(18 * var(--u)),19px)}

/* bočný panel */
.sl-bok{position:sticky;top:100px;display:grid;gap:14px}
.sl-bok .sl-karta{padding:22px 24px}
.sl-teraz{border:2px solid var(--sl-hotovo)!important}
.sl-teraz__stitok{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:var(--sl-hotovo)}
.pracuje{display:inline-flex;gap:4px}
.pracuje i{width:7px;height:7px;border-radius:50%;background:var(--sl-hotovo);animation:sl-skok 1.2s infinite ease-in-out}
.pracuje i:nth-child(2){animation-delay:.15s}.pracuje i:nth-child(3){animation-delay:.3s}
@keyframes sl-skok{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.sl-teraz h3{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:#777;margin:16px 0 4px}
.sl-teraz p{margin:0;font-size:17px;line-height:1.45}
.cakame{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cakame li{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:16px;line-height:1.4}
.cakame .ico{width:18px;height:18px;color:var(--sl-caka);margin-top:2px}
.sl-odhad{display:grid;gap:2px}
.sl-odhad span{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#777}
.sl-odhad strong{font-size:28px;font-weight:900;color:var(--zelena);text-transform:capitalize}
.sl-odhad small{font-size:14px;color:#666}
.sl-kontakt{display:grid;grid-template-columns:72px 1fr;gap:10px 14px;align-items:center}
.sl-kontakt img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.sl-kontakt span{display:block;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#777}
.sl-kontakt strong{display:block;font-size:20px;font-weight:900}
.sl-kontakt small{font-size:14px;color:#666}
.sl-kontakt .btn{grid-column:1/-1;justify-content:center}
.sl-sukromne{display:flex;gap:8px;font-size:14px;color:#666;margin:0;padding:0 6px}
.sl-sukromne .ico{width:18px;height:18px;flex:none}

@media (max-width:960px){.sl-mriezka{grid-template-columns:1fr}.sl-bok{position:static;order:-1}}
@media (max-width:600px){.sl-hlava__in{flex-direction:column;align-items:flex-start}.sl-percent{width:104px}.sl-status{border-radius:14px}.krok{grid-template-columns:36px 1fr;gap:10px}.krok__znak{width:36px;height:36px}.krok:not(:last-child)::before{left:17px;top:36px}.krok__telo{padding:14px 16px}}
@media (prefers-reduced-motion:reduce){.sl-hlava *,.sl-scena *,.sl-telo *{animation:none!important}}