/* Súkromie podnikateľov – vzhľad sprievodcu.
   Jeden súbor, žiadny build. Farby cez premenné, aby sa dal doplniť tmavý režim
   bez prepisovania pravidiel. */

:root {
  --papier: #f7f6f3;
  --plocha: #ffffff;
  --plocha-tlmena: #f1efea;
  --atrament: #1b2430;
  --atrament-tlmeny: #5b6572;
  --linka: #ddd8cf;
  --akcent: #1d4e6f;
  --akcent-svetly: #e8f0f5;
  --akcent-tmavy: #143c56;
  --akcent-text: #ffffff;
  --vystraha: #8a5a00;
  --vystraha-pozadie: #fdf6e6;
  --chyba: #a32020;
  --radius: 10px;
  --tien: 0 1px 2px rgba(27, 36, 48, .06), 0 8px 24px rgba(27, 36, 48, .05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-rezim="svetly"]) {
    --papier: #14181d;
    --plocha: #1b2027;
    --plocha-tlmena: #222932;
    --atrament: #e8eaed;
    --atrament-tlmeny: #a3adba;
    --linka: #333c47;
    --akcent: #7db3d6;
    --akcent-svetly: #1e2a34;
    --akcent-tmavy: #a9cfe8;
    --akcent-text: #14181d;
    --vystraha: #e0b25f;
    --vystraha-pozadie: #2a2418;
    --chyba: #f0908c;
    --tien: 0 1px 2px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.obal { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.uzky { max-width: 720px; margin-left: auto; margin-right: auto; }

.preskocit {
  position: absolute; left: -9999px;
  background: var(--akcent); color: var(--akcent-text); padding: 10px 16px; border-radius: 0 0 var(--radius) 0;
}
.preskocit:focus { left: 0; top: 0; z-index: 100; }

/* ───────────────────────────────────────────────── hlavička */

.hlavicka {
  background: var(--plocha);
  border-bottom: 1px solid var(--linka);
  padding: 14px 0;
}
.hlavicka-obal { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.znacka { text-decoration: none; color: inherit; display: flex; flex-direction: column; line-height: 1.25; }
.znacka-nazov { font-weight: 700; letter-spacing: -.01em; }
.znacka-popis { font-size: 13px; color: var(--atrament-tlmeny); }
.hlavicka-stitky { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.hlavicka-stitok {
  margin: 0; font-size: 13px; color: var(--akcent);
  background: var(--akcent-svetly); border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}

/* ───────────────────────────────────────────────── kroky */

.krok { display: none; padding: 40px 0 72px; }
.krok.je-aktivny { display: block; }

h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 16px; }
h2 { font-size: 18px; margin: 0 0 8px; letter-spacing: -.01em; }
.perex { font-size: 18px; color: var(--atrament-tlmeny); margin: 0 0 28px; }
.cislo-kroku {
  margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--akcent);
}
.drobne { font-size: 13px; color: var(--atrament-tlmeny); }
.napoveda { font-size: 14px; color: var(--atrament-tlmeny); margin: -4px 0 16px; }
.chyba { color: var(--chyba); font-weight: 600; margin-top: 12px; }
.stav { min-height: 22px; font-size: 14px; color: var(--atrament-tlmeny); }
.pravne-vyhradenie { margin-top: 28px; border-top: 1px solid var(--linka); padding-top: 16px; }

/* ───────────────────────────────────────────────── postup */

.postup { padding: 20px 0 0; }
.postup ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.postup li { border-radius: 999px; background: var(--plocha-tlmena); }

/* Položka je tlačidlo – celá pilulka je terč, nie len text v nej. Výplň je preto
   na tlačidle, nie na li. */
.postup li button {
  font: inherit; font-size: 13px; color: var(--atrament-tlmeny);
  padding: 5px 12px; border: 0; border-radius: inherit; background: none;
  cursor: pointer;
}
.postup li button:hover { color: var(--atrament); }
.postup li button:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

.postup li.je-aktivny { background: var(--akcent); }
.postup li.je-aktivny button { color: var(--akcent-text); font-weight: 600; cursor: default; }
.postup li.je-aktivny button:hover { color: var(--akcent-text); }
.postup li.je-hotovy button { color: var(--akcent); }

/* Ovládanie úložiska pod lištou krokov. Drobné zámerne – je to pomocná
   funkcia, nie krok sprievodcu. */
.ulozisko {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px;
}
.tl-drobne { font-size: 13px; padding: 5px 12px; }
.stav-ulozenia { font-size: 13px; color: var(--atrament-tlmeny); flex: 1 1 220px; }

/* ───────────────────────────────────────────────── karty a upozornenia */

/* Medzinadpis v úvodnom texte – menší než h1, výraznejší než nadpis karty. */
.oddiel-uvodu { font-size: 22px; margin: 34px 0 10px; letter-spacing: -.01em; }

/* Trojica kariet uzatvára úvod, preto má odstup zhora, nie zdola. */
.karty-tri { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 36px 0 8px; }
.karta-info {
  background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--tien);
}
.karta-info p { margin: 0; font-size: 14px; color: var(--atrament-tlmeny); }

.upozornenie {
  border-radius: var(--radius); padding: 18px 20px; margin: 24px 0;
  border: 1px solid var(--linka); background: var(--plocha);
}
.upozornenie.dolezite { border-left: 4px solid var(--akcent); background: var(--akcent-svetly); }
.upozornenie.mierne {
  border-left: 4px solid var(--vystraha); background: var(--vystraha-pozadie);
  font-size: 14px;
}
.upozornenie ul { margin: 8px 0 0; padding-left: 20px; }
.upozornenie li { margin-bottom: 6px; }
.upozornenie p:last-child { margin-bottom: 0; }

/* ───────────────────────────────────────────────── adresáti */

/* Dve rovnocenné cesty k adresátovi – overený zoznam a vlastné zadanie.
   Rovnaký typ nadpisu nad oboma, aby ani jedna nepôsobila ako náhradné riešenie. */
.cesta {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--akcent); margin: 32px 0 4px;
}
.cesta:first-of-type { margin-top: 8px; }
.cesta-popis { font-size: 14px; color: var(--atrament-tlmeny); margin: 0 0 14px; }

.zoznam-adresatov { display: grid; gap: 12px; margin-bottom: 0; }
.adresat {
  display: block; background: var(--plocha); border: 1px solid var(--linka);
  border-radius: var(--radius); padding: 16px 18px; cursor: pointer; box-shadow: var(--tien);
}
.adresat:hover { border-color: var(--akcent); }
.adresat.je-vybraty { border-color: var(--akcent); box-shadow: 0 0 0 2px var(--akcent-svetly), var(--tien); }
.adresat-riadok { display: flex; gap: 12px; align-items: flex-start; }
.adresat input { margin-top: 5px; flex: none; }
.adresat-nazov { font-weight: 600; }
.adresat-sluzba { font-size: 13px; color: var(--akcent); }
.adresat-popis { font-size: 14px; color: var(--atrament-tlmeny); margin: 6px 0 0; }
.adresat-kontakt { font-size: 13px; color: var(--atrament-tlmeny); margin: 8px 0 0; }
.adresat-kontakt a { color: var(--akcent); }
.adresat-vlastny { cursor: default; }
.adresat-vlastny .vlastny-prepinac { cursor: pointer; }
.adresat-vlastny .podrobnosti { padding-left: 28px; }
.zaklad-volba { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.zaklad-volba input { margin-top: 5px; flex: none; }
.zaklad-volba .kod { font-weight: 600; }
.zaklad-volba .popis { display: block; font-size: 13px; color: var(--atrament-tlmeny); }

/* ───────────────────────────────────────────────── formulárové polia */

.pole-skupina { border: 1px solid var(--linka); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 24px; background: var(--plocha); }
.pole-skupina legend { font-weight: 600; padding: 0 6px; }

.volba { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; cursor: pointer; }
.volba input { margin-top: 5px; flex: none; }
.volba span { font-size: 15px; }

.pole { display: block; margin-bottom: 18px; font-size: 14px; font-weight: 600; }
.pole input, .pole select, .pole textarea {
  display: block; width: 100%; margin-top: 6px;
  font: inherit; font-weight: 400;
  padding: 10px 12px; border: 1px solid var(--linka); border-radius: 8px;
  background: var(--plocha); color: var(--atrament);
}
.pole textarea { resize: vertical; }
.pole input:focus, .pole select:focus, .pole textarea:focus {
  outline: 2px solid var(--akcent); outline-offset: 1px; border-color: var(--akcent);
}
.pole input.je-chybne, .pole textarea.je-chybne { border-color: var(--chyba); background: color-mix(in srgb, var(--chyba) 6%, var(--plocha)); }
.povinne { font-weight: 400; font-size: 12px; color: var(--chyba); }
.pole .drobne { font-weight: 400; }

.mriezka { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.mriezka .uzke { max-width: 220px; }

/* ───────────────────────────────────────────────── práva */

.pravo {
  background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 12px;
}
.pravo.je-zapnute { border-color: var(--akcent); box-shadow: 0 0 0 2px var(--akcent-svetly); }
.pravo-zaklad { border-left: 4px solid var(--akcent); background: var(--akcent-svetly); margin-bottom: 28px; }
.pravo-zaklad p { margin: 0; font-size: 15px; }
.hlavicka-prava { padding: 2px 0; }
.clanok {
  font-size: 12px; color: var(--atrament-tlmeny); background: var(--plocha-tlmena);
  padding: 2px 8px; border-radius: 999px; margin-left: 6px; white-space: nowrap;
}
.podrobnosti { padding: 14px 0 0 28px; border-top: 1px solid var(--linka); margin-top: 12px; }

/* Nedostupné právo ostáva viditeľné – človek sa má dozvedieť, prečo ho nemá. */
.pravo.je-nedostupne { background: var(--plocha-tlmena); }
.pravo.je-nedostupne .hlavicka-prava { cursor: default; }
.pravo.je-nedostupne .hlavicka-prava span { color: var(--atrament-tlmeny); }
.preco-nie {
  font-size: 13px; line-height: 1.55; color: var(--vystraha);
  background: var(--vystraha-pozadie); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 10px;
}

/* Vloženie navrhovaného znenia. Zámerne nenápadné tlačidlo – je to ponuka,
   nie krok, ktorý treba urobiť. */
.navrh-riadok { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: -8px 0 18px; }
.tl-navrh {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px;
  border: 1px dashed var(--akcent); background: transparent; color: var(--akcent);
}
.tl-navrh:hover { background: var(--akcent-svetly); border-style: solid; }
.tl-navrh:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.navrh-riadok .drobne { flex: 1 1 220px; }

/* ───────────────────────────────────────────────── tlačidlá */

.akcie { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.akcie-hotovo { margin-bottom: 8px; }
.tl {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 11px 22px; border-radius: 8px;
  border: 1px solid var(--linka); background: var(--plocha); color: var(--atrament);
}
.tl:hover { border-color: var(--akcent); color: var(--akcent); }
.tl:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.tl-hlavne { background: var(--akcent); border-color: var(--akcent); color: var(--akcent-text); }
.tl-hlavne:hover { background: var(--akcent-tmavy); border-color: var(--akcent-tmavy); color: var(--akcent-text); }
.tl-tiche { background: transparent; border-color: transparent; color: var(--atrament-tlmeny); }
.tl-tiche:hover { background: var(--plocha-tlmena); }
.tl[disabled] { opacity: .5; cursor: default; }

/* ───────────────────────────────────────────────── náhľad */

.prepinac-nahladu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 24px 0 12px; }
#prepinac-tlacidla { display: flex; gap: 8px; flex-wrap: wrap; }
#prepinac-tlacidla button {
  font: inherit; font-size: 13px; cursor: pointer; padding: 5px 12px;
  border-radius: 999px; border: 1px solid var(--linka); background: var(--plocha); color: var(--atrament);
}
#prepinac-tlacidla button.je-aktivny { background: var(--akcent); border-color: var(--akcent); color: var(--akcent-text); }

.nahlad {
  background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--radius);
  padding: 44px clamp(20px, 5vw, 60px); margin: 12px 0 32px;
  box-shadow: var(--tien);
  max-width: 820px; margin-left: auto; margin-right: auto;
  font-size: 15px;
}
.nahlad-hlavicka { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 28px; }
.nahlad-odosielatel { font-size: 13px; color: var(--atrament-tlmeny); }
.nahlad-prijemca { min-width: 260px; }
.nahlad-prijemca .prvy { font-weight: 700; }
.nahlad-datum { text-align: right; color: var(--atrament-tlmeny); font-size: 14px; margin-bottom: 22px; }
.nahlad-vec {
  font-weight: 700; border-bottom: 1px solid var(--linka); padding-bottom: 10px; margin-bottom: 20px;
}
.nahlad h3 { font-size: 15px; margin: 22px 0 8px; }
.nahlad p { margin: 0 0 10px; text-align: justify; }
.nahlad p.doslovne { padding-left: 16px; border-left: 2px solid var(--linka); font-style: italic; }
.nahlad .polozka { display: flex; gap: 10px; margin: 0 0 6px; padding-left: 14px; }
.nahlad .polozka .znacka { flex: none; color: var(--atrament-tlmeny); }
.nahlad .udaj { display: flex; gap: 12px; margin: 0 0 4px; }
.nahlad .udaj .popis { flex: none; min-width: 190px; color: var(--atrament-tlmeny); }
.nahlad-podpis { margin-top: 36px; }
.nahlad-ciara { width: 200px; border-top: 1px solid var(--linka); margin: 42px 0 6px; }

/* ───────────────────────────────────────────────── pätička */

.paticka { border-top: 1px solid var(--linka); background: var(--plocha); padding: 28px 0 40px; margin-top: 40px; }
.paticka p { margin: 0 0 6px; font-size: 14px; }
.paticka a { color: var(--akcent); }
/* Odkazy v pätičke na jednom riadku. Na úzkom displeji sa zalomia a oddeľovač
   ide s nimi – preto je súčasťou toku textu, nie orámovaním odkazu. */
.paticka .odkazy-paticky { margin-top: 14px; line-height: 1.9; }
.oddelovac { color: var(--linka); margin: 0 10px; user-select: none; }

/* ───────────────────────────────────────────────── obsahová stránka */

.obsahova h1 { margin-top: 40px; }
.obsahova h2 { font-size: 20px; margin: 32px 0 10px; }
.obsahova { padding-bottom: 60px; }

/* ───────────────────────────────────────────────── tlač */

@media print {
  .hlavicka, .paticka, .akcie, .postup, .prepinac-nahladu, .preskocit, .upozornenie { display: none !important; }
  body { background: #fff; }
  .nahlad { border: 0; box-shadow: none; padding: 0; max-width: none; }
  .krok { padding: 0; }
}