/* Aplikácia šoféra – veľké ťuknuteľné prvky, čitateľné aj na slnku */
.app { max-width: 640px; margin: 0 auto; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.obal { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.obal > h1 { margin-top: 4px; }
.spat { text-decoration: none; font-weight: 700; color: var(--zlata-t); padding: 6px 0; align-self: flex-start; }
.sync { white-space: nowrap; flex: none; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font: inherit; font-size: .8rem; font-weight: 700; padding: .35em .7em; border-radius: 999px; cursor: pointer; }
.sync:empty { display: none; }
.sync.ok::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #7fc48a; margin-right: 6px; }
.sync.caka { border-color: var(--zlata); color: var(--zlata); }
.sync.zle { background: var(--cervena); border-color: var(--cervena); }
.rozvoz-karta { display: block; text-decoration: none; color: inherit; }
.postup { height: 8px; background: var(--svetla); border-radius: 99px; overflow: hidden; margin: 10px 0 4px; }
.postup span { display: block; height: 100%; background: var(--zelena); border-radius: 99px; }
.poznamka { background: #fffaf0; border: 1px solid var(--zlata); }
.zastavky { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.zastavka-hlava { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; }
.poradie { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tmava); color: var(--zlata); font-weight: 700; display: grid; place-items: center; }
.zastavka.vybavena { opacity: .72; }
.zastavka.vybavena .poradie { background: var(--zelena); color: #fff; }
.mini { margin-top: 8px; }
.akcie { margin-top: 10px; }
.akcie .tlac { flex: 1; }
.adresa { font-size: 1.1rem; font-weight: 700; }
.suma { font-size: 1.15rem; }
.suma-velka { font-size: 2rem; font-weight: 700; margin: .1em 0 .4em; }
.polozky { list-style: none; padding: 0; margin: 0; }
.polozky li { padding: 10px 0; border-bottom: 1px solid var(--svetla); }
.polozky li:last-child { border-bottom: 0; }
.tlac.velke { min-height: 58px; font-size: 1.1rem; }
/* odškrtávanie kusov */
.kus { padding: 12px 0; border-bottom: 1px solid var(--svetla); }
.kus:last-child { border-bottom: 0; }
.kus.ok .kus-nazov { color: var(--zelena); }
.kus.zle .kus-nazov { color: var(--cervena); }
.volba { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.volba.trojita { grid-template-columns: 1fr 1fr 1fr; }
.volba button { min-height: 48px; border-radius: var(--r); border: 1px solid var(--ciara); background: #fff; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; }
.volba button.zvolene[data-v=ok], .volba button.zvolene[data-s] { background: var(--zelena); border-color: var(--zelena); color: #fff; }
.volba button.zvolene[data-v=chyba], .volba button.zvolene[data-s=nic] { background: var(--cervena); border-color: var(--cervena); color: #fff; }
.dovod { margin-top: 8px; }
/* fotky */
.fotky { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.foto { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--svetla); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto .zmaz { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(43,39,35,.8); color: #fff; font-size: 14px; cursor: pointer; }
.pridaj-foto { aspect-ratio: 1; border: 2px dashed var(--zlata); border-radius: 8px; background: #fffaf0; color: var(--tmava); font: inherit; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.ikona-foto { width: 30px; height: 24px; border: 3px solid var(--tmava); border-radius: 6px; position: relative; }
.ikona-foto::after { content: ''; position: absolute; width: 10px; height: 10px; border: 3px solid var(--tmava); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* kroky */
.kroky { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0; margin: 4px 0; }
.kroky li { font-size: .75rem; font-weight: 700; text-align: center; padding: 6px 2px; border-radius: 6px; background: #fff; color: var(--text2); border-bottom: 3px solid var(--ciara); }
.kroky li.aktivny { color: var(--tmava); border-bottom-color: var(--zlata); }
.kroky li.hotovy { color: var(--zelena); border-bottom-color: var(--zelena); }
.zaskrt, .volba-riadok { display: flex; align-items: center; gap: 12px; font-weight: 400; font-size: 1rem; padding: 10px 0; margin: 0; cursor: pointer; }
.zaskrt input, .volba-riadok input { width: 24px; height: 24px; accent-color: var(--tmava); flex: none; }
/* krok zákazníka */
.zakaznik-krok { font-size: 1.05rem; }
.suhrn { list-style: none; padding: 0; margin: 6px 0; }
.suhrn li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--svetla); }
.suhrn li.ok strong { color: var(--zelena); }
.suhrn li.chyba strong { color: var(--cervena); }
.podpis-plocha { width: 100%; height: 190px; margin-top: 8px; border: 2px dashed var(--ciara); border-radius: var(--r); background: #fff linear-gradient(to top, transparent 44px, var(--ciara) 44px, var(--ciara) 45px, transparent 45px); display: block; }
.velka-fajka { width: 72px; height: 72px; margin: 4px auto 10px; border-radius: 50%; background: var(--zelena); color: #fff; font-size: 40px; display: grid; place-items: center; }
.instal { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); background: var(--tmava); color: #fff; border: 1px solid var(--zlata); border-radius: 14px; padding: 14px 44px 14px 14px; z-index: 50; box-shadow: var(--tien); }
.instal .zavriet { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; background: transparent; color: #fff; font-size: 16px; cursor: pointer; }
.instal .tlac { margin-top: 8px; }
/* skener QR štítkov */
.skener { position: fixed; inset: 0; z-index: 300; background: #111; color: #fff; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.skener-hlava { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 2px solid var(--zlata); }
.skener-video { position: relative; flex: 1; overflow: hidden; display: grid; place-items: center; }
.skener-video video { width: 100%; height: 100%; object-fit: cover; }
.skener-ram { position: absolute; width: min(70vw, 300px); aspect-ratio: 1; border: 3px solid var(--zlata); border-radius: 18px; box-shadow: 0 0 0 9999px rgba(0,0,0,.35); }
.skener-sprava { padding: 14px 16px; font-size: 1.05rem; font-weight: 700; min-height: 3.2em; }
.skener-sprava.dobre { background: var(--zelena); }
.skener-sprava.zle { background: var(--cervena); }
.skener-stav { padding: 0 16px 16px; }
.skener-pocet { font-size: 1.6rem; font-weight: 700; color: var(--zlata); }
.volba.stvorita { grid-template-columns: repeat(4, 1fr); }
.volba button[data-min] { min-height: 44px; }
.volba button.zvolene[data-v=poskodene] { background: var(--oranzova); border-color: var(--oranzova); color: #fff; }
.kus.pozor .kus-nazov { color: var(--oranzova); }
.stitok.skeny.ok { background: var(--zelena-bg); color: var(--zelena); }
.posk { margin-top: 8px; display: grid; gap: 8px; }
.posk .jemny { margin: 0; }
.karta.poskodena { border: 2px solid var(--oranzova); }
.okno { color: var(--tmava); font-size: .95rem; }
.suhrn li.poskodene strong { color: var(--oranzova); }
.suhrn li small { color: var(--text2); }
.gdpr { margin-top: 10px; font-size: .78rem; }
.nacestu { margin-top: 6px; border-top: 1px solid var(--svetla); padding-top: 4px; }
/* nová úloha od kancelárie – pás hore cez obrazovku */
.nova-uloha { position: fixed; left: 10px; right: 10px; top: calc(62px + env(safe-area-inset-top)); z-index: 250; background: var(--cervena); color: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 8px 28px rgba(0,0,0,.28); animation: nova-uloha .35s ease-out; }
.nova-uloha .tlac { background: #fff; color: var(--cervena); border-color: #fff; }
.nova-uloha .tlac.vedlajsie { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
@keyframes nova-uloha { from { transform: translateY(-20px); opacity: 0; } to { transform: none; opacity: 1; } }