/* =================================================================
   HACCP Denník — ROZHRANIE.

   Načítava sa PO `zaklad.css` a je nadradené: `zaklad.css` drží
   komponenty jednotlivých modulov, tento súbor drží dizajn celku —
   tokeny, typografiu, rámec aplikácie a vzhľad spoločných prvkov.

   Prečo dva súbory a nie prepísaný jeden: modulových štýlov je 900
   riadkov a sú rozptýlené po pätnástich obrazovkách. Prepisovať ich
   naraz znamená rozbiť niečo, čo sa ukáže až o týždeň. Takto sa dizajn
   mení na jednom mieste a staré pravidlá ostávajú ako záchranná sieť.

   Rámec:
     • počítač  — tmavé bočné menu (17 rem), obsah vedľa neho
     • tablet a mobil — bočné menu preč, dole pás piatich cieľov pre palec
   Navigácia je dole zámerne: kuchár drží tablet oboma rukami a hore
   na obrazovku nedosiahne bez toho, aby ho prehodil v dlaniach.
   ================================================================= */

/* ═══ 1. TOKENY ══════════════════════════════════════════════════ */
:root {
  /* Značka */
  --znacka:        #0f766e;
  --znacka-tmava:  #115e59;
  --znacka-svetla: #14b8a6;
  --znacka-jemna:  #f0fdfa;
  --znacka-obrys:  #99f6e4;

  /* Plochy a text */
  --pozadie:     #f5f7f8;
  --plocha:      #ffffff;
  --plocha-2:    #fafbfc;
  --ciara:       #e4e8ec;
  --ciara-silna: #cfd6dd;
  --text:        #0e161d;
  --text-tichy:  #5a6873;
  --text-slaby:  #8b97a2;

  /* Stavy */
  --ok:          #15803d;
  --ok-jemna:    #f0fdf4;
  --ok-obrys:    #bbf7d0;
  --varovanie:   #b45309;
  --varovanie-jemna: #fffbeb;
  --varovanie-obrys: #fde68a;
  --odchylka:    #dc2626;
  --odchylka-jemna: #fef2f2;
  --odchylka-obrys: #fecaca;

  /* Bočné menu — tmavé, aby obsah vedľa neho vyzeral svetlejší
     a pokojnejší. Kontrast textu je nad 7:1. */
  --bocne-pozadie:   #0c1a1e;
  --bocne-plocha:    #12262b;
  --bocne-text:      #9fb0b5;
  --bocne-text-jasny:#ffffff;
  --bocne-ciara:     rgba(255, 255, 255, .07);

  /* Tvar a hĺbka */
  --r-s:  8px;
  --r-m:  12px;
  --r-l:  16px;
  --r-xl: 20px;
  --tien-1: 0 1px 2px rgba(14, 22, 29, .04), 0 1px 3px rgba(14, 22, 29, .05);
  --tien-2: 0 2px 4px rgba(14, 22, 29, .04), 0 10px 24px rgba(14, 22, 29, .07);
  --tien-3: 0 12px 40px rgba(14, 22, 29, .14);

  --bocne-sirka: 17rem;
  --pas-vyska: 4.25rem;
  /* Kde končí spodná lišta. Oznamovacie pruhy si podľa toho posunú
     svoj spodok, aby ju neprekryli. Na desktope, kde je lišta skrytá
     (media query nižšie), je nula. */
  --pas-odstup: calc(var(--pas-vyska) + env(safe-area-inset-bottom, 0px));
}

/* ═══ 2. ZÁKLAD ══════════════════════════════════════════════════ */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--pozadie);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  letter-spacing: -.018em;
  line-height: 1.22;
  font-weight: 650;
  color: var(--text);
}
h1 { font-size: 1.65rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }

a { color: var(--znacka-tmava); text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--znacka-svetla);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Odkaz pre klávesnicu — mimo obrazovky, kým naň niekto neprejde tabom. */
.preskocit {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .7rem 1.1rem; background: var(--znacka); color: #fff;
  border-radius: 0 0 var(--r-m) 0; text-decoration: none; font-weight: 600;
}
.preskocit:focus { left: 0; }

/* Ikony — jeden ťah, farbu dedia z textu. Nikdy nesmú tlačiť riadok
   do výšky, preto `flex: 0 0 auto` a zarovnanie na účiaru. */
.ikony-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ik {
  width: 1.25rem; height: 1.25rem;
  flex: 0 0 auto;
  vertical-align: -.18em;
}
.ik-velka { width: 1.5rem; height: 1.5rem; }

/* ═══ 3. RÁMEC APLIKÁCIE ═════════════════════════════════════════ */
body.app {
  display: block;
  min-height: 100vh;
  /* Spodný pás prekrýva obsah — päte treba nechať miesto. */
  padding-bottom: calc(var(--pas-vyska) + env(safe-area-inset-bottom, 0px));
}
body.verejna { display: flex; flex-direction: column; min-height: 100vh; }

/* Výška rámca počíta so spodným pásom. Bez odčítania by bola stránka
   vždy o výšku pásu vyššia než obrazovka a na každej obrazovke by sa
   dalo o kúsok poscrolovať do prázdna. */
.ramec {
  display: flex; flex-direction: column; min-width: 0;
  min-height: calc(100vh - var(--pas-vyska) - env(safe-area-inset-bottom, 0px));
}

/* ── Bočné menu (počítač) ──────────────────────────────────────── */
.bocne { display: none; }

/* ── Hlavička ──────────────────────────────────────────────────── */
.hlavicka {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
  padding: .5rem 1rem;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ciara);
}
.hlavicka-nadpis { display: none; }

.znacka {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 48px; text-decoration: none;
  color: var(--text); font-weight: 700; font-size: 1rem;
  letter-spacing: -.01em;
}
.znacka-znak {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: 0 0 auto;
  color: #fff; background: var(--znacka); border-radius: 9px;
}
.znacka-znak .ik { width: 1.15rem; height: 1.15rem; vertical-align: 0; }

.hlavicka-stav { display: flex; align-items: center; gap: .35rem; }

.hlavicka-ikona {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  /* 48 px, nie 44 (CLAUDE.md §7). Menší cieľ mokrý prst na tablete
     netrafí a test_ovladacie_prvky_maju_dotykovy_ciel to meria
     v skutočnom prehliadači, nie v CSS. */
  width: 48px; height: 48px; min-height: 48px;
  color: var(--text-tichy); background: none; border: 0;
  border-radius: var(--r-m); cursor: pointer; text-decoration: none;
}
.hlavicka-ikona:hover { color: var(--text); background: var(--pozadie); }

.odznak-trial {
  display: inline-flex; align-items: center;
  min-height: 48px; padding: .2rem .75rem;
  font-size: .8rem; font-weight: 600; text-decoration: none;
  color: #92400e; background: var(--varovanie-jemna);
  border: 1px solid var(--varovanie-obrys); border-radius: 99px;
  white-space: nowrap;
}
.odznak-trial:hover { background: #fef3c7; }

.bublina {
  position: absolute; top: 4px; right: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem;
  background: var(--odchylka); color: #fff; border: 2px solid var(--plocha);
  border-radius: 99px; font-size: .65rem; font-weight: 700; line-height: 1;
}

/* ── Obsah ─────────────────────────────────────────────────────── */
.obsah {
  flex: 1; width: 100%; max-width: 72rem;
  margin: 0 auto; padding: 1.5rem 1rem 2.5rem;
}

/* ── Pásy s upozorneniami ──────────────────────────────────────── */
/* Odsadenie nesú bannery, nie obal: Jinja necháva v `.pasy` biele znaky,
   takže `:empty` by nesadlo NIKDY a nad obsahom by bola večná medzera. */
.pasy { padding: 0 1rem; max-width: 72rem; margin: 0 auto; width: 100%; }

.banner {
  /* Bez flexu — viď zaklad.css. Inline značky vo vete musia ostať vo vete. */
  display: block;
  margin: .75rem 0 0; padding: .75rem 1rem;
  font-size: .92rem; text-align: left;
  border: 1px solid; border-radius: var(--r-m);
  box-shadow: var(--tien-1);
}
.banner > a, .banner > form, .banner > button {
  display: inline-flex; vertical-align: middle; margin-left: .5rem;
}
.banner > form { gap: .5rem; }
.banner-upozornenie { color: #92400e; background: var(--varovanie-jemna); border-color: var(--varovanie-obrys); }
.banner-uspech      { color: #14532d; background: var(--ok-jemna);        border-color: var(--ok-obrys); }
.banner-chyba       { color: #991b1b; background: var(--odchylka-jemna);  border-color: var(--odchylka-obrys); }
.banner-upsell      { color: #92400e; background: var(--varovanie-jemna); border-color: var(--varovanie-obrys); }
.banner .tlacidlo-text { color: inherit; font-weight: 600; }

.impersonacia-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  margin-bottom: .6rem; padding: .75rem 1rem;
  color: #fff; background: #b91c1c; border-radius: var(--r-m);
  font-size: .9rem; font-weight: 600;
}
.impersonacia-banner .tlacidlo-text { color: #fff; }

/* ── Pruh ukážky a prepínač balíčkov ───────────────────────────────
   Iná farba ako impersonácia (červená = „pozor, si v cudzom účte")
   zámerne: ukážka nie je výstraha, je to výklad. Tmavá značková modrozelená
   hovorí „toto je náš výklad", nie „niečo je zle".

   Tlačidlá majú 48 px (CLAUDE.md §7) — prepínač je prvá vec, na ktorú
   záujemca na tablete ťukne, a keby ju musel triafať, neťukne. */
.demo-pruh {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  margin-bottom: .6rem; padding: .6rem 1rem;
  color: #fff; background: #134e4a; border-radius: var(--r-m);
  font-size: .88rem;
}
.demo-pruh-text { flex: 1 1 18rem; }
.demo-pruh-odkaz { color: #fff; font-weight: 700; text-decoration: underline; }

.demo-prepinac { display: inline-flex; gap: .2rem; padding: .2rem;
                 background: rgba(255, 255, 255, .14); border-radius: var(--r-m); }
.demo-prepinac form { margin: 0; }
.demo-prepinac-tlacidlo {
  min-height: 48px; padding: .4rem .9rem;
  border: 0; border-radius: var(--r-s); cursor: pointer;
  background: transparent; color: #fff;
  font: inherit; font-weight: 600; white-space: nowrap;
}
.demo-prepinac-tlacidlo:hover { background: rgba(255, 255, 255, .18); }
.demo-prepinac-tlacidlo.je-aktivne { background: #fff; color: #134e4a; }

/* ── Päta ──────────────────────────────────────────────────────── */
.pata {
  padding: 1.25rem 1rem 1.75rem;
  border-top: 1px solid var(--ciara);
  background: transparent;
  text-align: center; font-size: .82rem; color: var(--text-slaby);
}

/* ── Spodný pás (mobil, tablet) ────────────────────────────────── */
.spodny-pas {
  /* LIŠTA JE NAD OZNAMOVACÍMI PRUHMI. Pruh fronty aj výzva „pridať na
     plochu" sú tiež `position: fixed` na spodku obrazovky; kým mali
     rovnaký alebo vyšší z-index, sadli na lištu a zakryli tlačidlá
     vpravo. Cez zakryté tlačidlo „Režim kontroly" sa z režimu kontroly
     nedalo vypnúť — a to je stav, v ktorom sa nedá zapisovať. */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--ciara);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 12px rgba(14, 22, 29, .05);
}
.pas-odkaz {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .18rem;
  min-height: var(--pas-vyska); padding: .4rem .2rem;
  color: var(--text-tichy); text-decoration: none;
}
.pas-ikona {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 1.85rem; border-radius: 99px;
}
.pas-ikona .ik { width: 1.35rem; height: 1.35rem; vertical-align: 0; }
.pas-text {
  font-size: .68rem; font-weight: 600; letter-spacing: -.01em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.pas-odkaz.aktivny { color: var(--znacka-tmava); }
.pas-odkaz.aktivny .pas-ikona { background: var(--znacka-jemna); }
.pas-odkaz:active .pas-ikona { background: var(--pozadie); }

/* ═══ 4. SPOLOČNÉ KOMPONENTY ═════════════════════════════════════ */

/* ── Karty ─────────────────────────────────────────────────────── */
.karta {
  background: var(--plocha);
  border: 1px solid var(--ciara);
  border-radius: var(--r-l);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--tien-1);
}
.karta h2 { margin: 0 0 .7rem; font-size: 1.05rem; }
.karty { gap: 1rem; }
.karta-cakanie { background: var(--plocha-2); border-style: dashed; box-shadow: none; }

.karta-formulara {
  max-width: 30rem; margin: 2.5rem auto;
  background: var(--plocha);
  border: 1px solid var(--ciara);
  border-radius: var(--r-xl);
  padding: 2rem;
  box-shadow: var(--tien-2);
}
.karta-formulara h1 { margin: 0 0 .4rem; font-size: 1.4rem; }
.kroky {
  margin: 0 0 .5rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--znacka);
}

/* ── Tlačidlá ──────────────────────────────────────────────────── */
.tlacidlo-hlavne {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem;
  width: auto; min-height: 48px;
  padding: .7rem 1.35rem;
  font-size: .98rem; font-weight: 600; letter-spacing: -.005em;
  color: #fff; background: var(--znacka);
  border: 0; border-radius: var(--r-m);
  box-shadow: 0 1px 2px rgba(15, 118, 110, .3);
  cursor: pointer; text-decoration: none;
  transition: background .13s ease, transform .08s ease;
}
.tlacidlo-hlavne:hover { background: var(--znacka-tmava); }
.tlacidlo-hlavne:active { transform: translateY(1px); }
.tlacidlo-hlavne[disabled] { opacity: .5; cursor: not-allowed; }
/* Vo formulári je tlačidlo cez celú šírku zámerne — mokrý prst na
   tablete trafí pás cez displej vždy, malý obdĺžnik nie vždy. */
.formular .tlacidlo-hlavne,
.karta-formulara .tlacidlo-hlavne { width: 100%; }
.riadok-akcii .tlacidlo-hlavne { width: auto; }

.tlacidlo-text {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .35rem;
  min-height: 48px; padding: .5rem .85rem;
  font-size: .9rem; font-weight: 600;
  color: var(--text-tichy); background: none;
  border: 1px solid transparent; border-radius: var(--r-m);
  cursor: pointer; text-decoration: none;
}
.tlacidlo-text:hover { color: var(--text); background: var(--pozadie); }
.tlacidlo-text.nebezpecne { color: var(--odchylka); }
.tlacidlo-text.nebezpecne:hover { background: var(--odchylka-jemna); }

/* ── Formuláre ─────────────────────────────────────────────────── */
.formular { gap: 1rem; }
.pole .popis, .pole legend.popis {
  margin-bottom: .35rem; font-weight: 600; font-size: .88rem;
  color: var(--text);
}
.pole input[type="text"], .pole input[type="email"],
.pole input[type="password"], .pole input[type="number"],
.pole input[type="tel"], .pole input[type="date"],
.pole input[type="time"], .pole select, .pole textarea {
  width: 100%; min-height: 48px;
  padding: .65rem .8rem;
  font-size: 1rem; color: var(--text);
  background: var(--plocha);
  border: 1px solid var(--ciara-silna);
  border-radius: var(--r-m);
  box-shadow: inset 0 1px 1px rgba(14, 22, 29, .03);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.pole input:focus, .pole select:focus, .pole textarea:focus {
  outline: none;
  border-color: var(--znacka-svetla);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .16);
}
.pole input::placeholder, .pole textarea::placeholder { color: var(--text-slaby); }
.napoveda { font-size: .8rem; color: var(--text-tichy); }

/* ── Dotykové ciele samostatných odkazov (CLAUDE.md §7) ─────────────
   Zmerané na 375 px aj 834 px: navigačné odkazy v pätičkách obrazoviek
   („Späť na Dnes", „História príjmov", „Kôš") a zoznam zostáv na
   /export/ mali 17 až 21 px — tretinu minima. Kuchár s mokrými rukami
   na tablete ich netrafí.

   Odkazy VNÚTRI VETY sem nepatria a zámerne: 48 px vysoký odkaz
   v odstavci rozlomí text a WCAG 2.5.8 inline odkazy z požiadavky
   vynímá. Preto sa cielí na pätičkové riadky a zoznamy, nie na `p a`. */
.tep-odkazy a, .pod-formularom a, .kan-odkazy a,
.karta ul.zoznam > li > a {
  display: inline-flex; align-items: center;
  min-height: 48px; padding: .35rem .15rem;
}
.karta ul.zoznam > li > a { padding-left: 0; }
/* Odstavec, ktorého celým obsahom je odkaz — tiež dotykový cieľ. */
.odkaz-samostatny a {
  display: inline-flex; align-items: center;
  min-height: 48px; padding: .35rem 0;
}

.oko, .tlacidlo-vedla {
  border: 1px solid var(--ciara-silna); border-radius: var(--r-m);
  background: var(--plocha);
}
.oko:hover, .tlacidlo-vedla:hover { background: var(--pozadie); }

.chyba {
  padding: .8rem 1rem; font-size: .9rem;
  color: #991b1b; background: var(--odchylka-jemna);
  border: 1px solid var(--odchylka-obrys); border-radius: var(--r-m);
}

/* ── Štítky, odznaky, čipy ─────────────────────────────────────── */
.stitok {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .005em;
  color: var(--text-tichy); background: var(--pozadie);
  border: 1px solid var(--ciara); border-radius: 99px;
}
.stitok-ok      { color: #14532d; background: var(--ok-jemna);        border-color: var(--ok-obrys); }
.stitok-chyba   { color: #991b1b; background: var(--odchylka-jemna);  border-color: var(--odchylka-obrys); }
.stitok-vysoka  { color: #fff;    background: var(--odchylka);        border-color: var(--odchylka); }
.stitok-stredna { color: #92400e; background: var(--varovanie-jemna); border-color: var(--varovanie-obrys); }

.odznak-pocet {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .38rem;
  font-size: .72rem; font-weight: 700; color: #fff;
  background: var(--odchylka); border-radius: 99px;
}

.odznak {
  padding: .12rem .45rem; font-size: .72rem; font-weight: 700;
  background: var(--znacka-jemna); color: var(--znacka-tmava);
  border-radius: 99px; text-transform: none; letter-spacing: 0;
}

/* ── Podzáložky ako segmentový prepínač ────────────────────────── */
.podzalozky {
  display: inline-flex; gap: .2rem; flex-wrap: wrap;
  padding: .25rem;
  background: var(--plocha); border: 1px solid var(--ciara);
  border-radius: 99px; box-shadow: var(--tien-1);
}
.podzalozky a {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 48px; padding: .35rem .95rem;
  font-size: .88rem; font-weight: 600;
  color: var(--text-tichy); background: transparent;
  border: 0; border-radius: 99px;
}
.podzalozky a:hover { background: var(--pozadie); color: var(--text); }
.podzalozky a.aktivna {
  color: #fff; background: var(--znacka);
  box-shadow: 0 1px 2px rgba(15, 118, 110, .28);
}

/* ── Tabuľky ───────────────────────────────────────────────────── */
.san-tabulka, .pri-tabulka, .ev-tabulka {
  background: var(--plocha);
  border: 1px solid var(--ciara);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--tien-1);
}
.san-tabulka th, .pri-tabulka th, .ev-tabulka th {
  padding: .7rem .85rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-slaby);
  background: var(--plocha-2);
  border-bottom: 1px solid var(--ciara);
}
.san-tabulka td, .pri-tabulka td, .ev-tabulka td {
  padding: .75rem .85rem; border-bottom: 1px solid var(--ciara);
}
.san-tabulka tbody tr:last-child td,
.pri-tabulka tbody tr:last-child td,
.ev-tabulka tbody tr:last-child td { border-bottom: 0; }
.san-tabulka tbody tr:hover,
.pri-tabulka tbody tr:hover,
.ev-tabulka tbody tr:hover { background: var(--plocha-2); }

/* Číselné hodnoty v jednej šírke znaku — stĺpec teplôt sa dá čítať
   zhora nadol bez toho, aby cifry skákali. */
.cislo, .cislo-bunka, .parovaci-kod, .pole-kodu {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Režim kontroly ────────────────────────────────────────────── */
.rezim-kontroly {
  background: var(--odchylka-jemna); color: #991b1b;
  border: 1px solid var(--odchylka-obrys); border-radius: var(--r-m);
  box-shadow: var(--tien-1);
}

/* ═══ 5. PREHĽAD ═════════════════════════════════════════════════ */
.prehlad { max-width: 100%; }

.prehlad-hlava { margin-bottom: 1.25rem; }
.prehlad-hlava h1 { font-size: 1.6rem; }
.prehlad-prevadzka {
  display: inline-flex; align-items: center; gap: .35rem;
  margin: .3rem 0 0; color: var(--text-tichy); font-size: .92rem;
}
.prehlad-trial {
  color: #14532d; background: var(--ok-jemna);
  border: 1px solid var(--ok-obrys);
}

/* ── Dnes ──────────────────────────────────────────────────────── */
.dnes {
  background: var(--plocha);
  border: 1px solid var(--ciara);
  border-radius: var(--r-xl);
  padding: 1.25rem;
  box-shadow: var(--tien-1);
  margin: 0 0 1.75rem;
}
.dnes-hlava { gap: 1.1rem; }
.dnes-hlava h2 { font-size: 1.2rem; }
.dnes-kruh {
  width: 4rem; height: 4rem;
  color: var(--znacka-tmava); background: var(--znacka-jemna);
  border: 2px solid var(--znacka-obrys);
  font-size: 1rem;
}
.dnes-kruh strong { font-size: 1.35rem; }
.dnes-kruh-hotovo { color: #fff; background: var(--ok); border-color: var(--ok); }
.dnes-kruh-zatvorene { color: var(--text-slaby); background: var(--pozadie); border-color: var(--ciara); }
.dnes-kruh .ik { width: 1.6rem; height: 1.6rem; vertical-align: 0; }

.dnes-odchylky {
  color: #991b1b; background: var(--odchylka-jemna);
  border: 1px solid var(--odchylka-obrys); border-radius: var(--r-m);
  font-size: .9rem;
}
.dnes-sekcia { font-size: .72rem; letter-spacing: .07em; color: var(--text-slaby); }

.dnes-riadok a {
  min-height: 58px; gap: .8rem;
  background: var(--plocha-2);
  border: 1px solid var(--ciara);
  border-radius: var(--r-m);
  transition: border-color .12s ease, background .12s ease;
}
.dnes-riadok a:hover { border-color: var(--znacka-obrys); background: var(--znacka-jemna); }
.dnes-ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex: 0 0 auto;
  color: var(--znacka-tmava); background: var(--znacka-jemna);
  border-radius: 10px; font-size: 1rem;
}
.dnes-ikona .ik { vertical-align: 0; }
.dnes-riadok.odchylka .dnes-ikona { color: #991b1b; background: var(--odchylka-jemna); }
.dnes-riadok.hotovo .dnes-ikona { color: var(--ok); background: var(--ok-jemna); }
.dnes-stav { font-size: 1.05rem; }
.dnes-stav .ik { width: 1.3rem; height: 1.3rem; }

/* ── Dlaždice ──────────────────────────────────────────────────── */
.sekcia-nadpis {
  display: flex; align-items: baseline; gap: .6rem;
  margin: 1.9rem 0 .8rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-slaby);
}
.sekcia-nadpis::after {
  content: ""; flex: 1; height: 1px; background: var(--ciara);
}

/* POZOR NA SELEKTOR. `dlazdica` má v systéme dva významy:
   navigačná dlaždica (`<a class="dlazdica">`) a prepínač vo formulári
   (`<label class="dlazdica">` s vnoreným `.dlazdica-obsah` — výber typu
   prevádzky a typu zariadenia). Preto sa všetko nižšie viaže na `a.` —
   inak by prepínač dostal kartu v karte a dvojitý rám. */
.dlazdice { gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
a.dlazdica {
  position: relative;
  min-height: 6.5rem; padding: 1rem;
  background: var(--plocha);
  border: 1px solid var(--ciara);
  border-radius: var(--r-l);
  box-shadow: var(--tien-1);
  transition: border-color .13s ease, box-shadow .13s ease, transform .1s ease;
}
a.dlazdica:hover {
  border-color: var(--znacka-obrys);
  box-shadow: var(--tien-2);
  transform: translateY(-1px);
}
a.dlazdica:active { transform: translateY(0); }
a.dlazdica .dlazdica-ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin-bottom: .7rem;
  color: var(--znacka-tmava); background: var(--znacka-jemna);
  border-radius: 11px; font-size: 1rem;
}
a.dlazdica .dlazdica-ikona .ik { width: 1.35rem; height: 1.35rem; vertical-align: 0; }
a.dlazdica .dlazdica-text { font-size: .98rem; font-weight: 650; }
a.dlazdica small { color: var(--text-tichy); font-size: .8rem; }
a.dlazdica-hlavna {
  background: linear-gradient(180deg, #ffffff 0%, var(--znacka-jemna) 100%);
  border-color: var(--znacka-obrys);
}
a.dlazdica-hlavna .dlazdica-ikona { color: #fff; background: var(--znacka); }
a.dlazdica-pozor { border-color: var(--odchylka-obrys); }
a.dlazdica-pozor .dlazdica-ikona { color: #991b1b; background: var(--odchylka-jemna); }

/* Prepínač vo formulári: menšia mriežka, aby sa doň zmestilo osem typov
   prevádzky bez skrolovania. */
.formular .dlazdice, .karta-formulara .dlazdice {
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .6rem;
}
.dlazdica-obsah { border-radius: var(--r-m); border-color: var(--ciara-silna); }
.dlazdica input:checked + .dlazdica-obsah {
  border-color: var(--znacka); background: var(--znacka-jemna);
  box-shadow: 0 0 0 2px rgba(15, 118, 110, .18);
}

/* ── Zoznam nastavení ──────────────────────────────────────────── */
.nastavenia-zoznam { gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.nastavenia-zoznam a {
  gap: .65rem; min-height: 52px; padding: .6rem .9rem;
  background: var(--plocha);
  border: 1px solid var(--ciara);
  border-radius: var(--r-m);
  box-shadow: var(--tien-1);
  font-size: .93rem; font-weight: 500;
}
.nastavenia-zoznam a:hover { border-color: var(--znacka-obrys); background: var(--znacka-jemna); }
.nastavenia-zoznam .ik { color: var(--text-tichy); }
.nastavenia-zoznam a:hover .ik { color: var(--znacka); }

/* ── Kalendár ──────────────────────────────────────────────────── */
.kal-den { border-radius: 10px; font-variant-numeric: tabular-nums; }
.kal-zeleny    { background: var(--ok-jemna);        border-color: var(--ok-obrys); }
.kal-ciastocny { background: var(--varovanie-jemna); border-color: var(--varovanie-obrys); }
.kal-dnes { outline: 2px solid var(--znacka); }

/* ═══ 6. POČÍTAČ ═════════════════════════════════════════════════ */
@media (min-width: 62rem) {
  body.app {
    display: grid;
    grid-template-columns: var(--bocne-sirka) 1fr;
    padding-bottom: 0;
  }

  .ramec { min-height: 100vh; }

  .bocne {
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    background: var(--bocne-pozadie);
    border-right: 1px solid var(--bocne-ciara);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .bocne .znacka {
    margin: 0; padding: 1.1rem 1.1rem .9rem;
    color: var(--bocne-text-jasny); font-size: 1.02rem;
  }
  .bocne .znacka-znak { background: var(--znacka-svetla); color: #06231f; }

  .bocne-menu { flex: 1; padding: .35rem .65rem 1rem; }

  .bocne-skupina {
    margin: 1.1rem 0 .35rem; padding: 0 .55rem;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
  }

  .bocne-odkaz {
    position: relative;
    display: flex; align-items: center; gap: .7rem;
    min-height: 48px; padding: .5rem .55rem;
    margin-bottom: .1rem;
    color: var(--bocne-text); text-decoration: none;
    font-size: .92rem; font-weight: 500;
    border-radius: var(--r-m);
    transition: background .12s ease, color .12s ease;
  }
  .bocne-odkaz .ik { color: rgba(255, 255, 255, .55); }
  .bocne-odkaz > span:not(.odznak-pocet) {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .bocne-odkaz:hover { color: var(--bocne-text-jasny); background: var(--bocne-plocha); }
  .bocne-odkaz:hover .ik { color: var(--znacka-svetla); }
  .bocne-odkaz.aktivny {
    color: var(--bocne-text-jasny); background: var(--bocne-plocha);
    font-weight: 600;
  }
  .bocne-odkaz.aktivny .ik { color: var(--znacka-svetla); }
  .bocne-odkaz.aktivny::before {
    content: ""; position: absolute; left: -.65rem; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 1.35rem;
    background: var(--znacka-svetla); border-radius: 0 3px 3px 0;
  }

  .bocne-pata {
    display: flex; align-items: center; gap: .5rem;
    padding: .75rem .9rem calc(.9rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--bocne-ciara);
  }
  .bocne-kto { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1; }
  .avatar-maly {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; flex: 0 0 auto;
    color: #06231f; background: var(--znacka-svetla);
    border-radius: 50%; font-size: .82rem; font-weight: 700;
  }
  .bocne-kto-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .bocne-kto-text strong {
    font-size: .85rem; font-weight: 600; color: var(--bocne-text-jasny);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .bocne-kto-text small {
    font-size: .72rem; color: rgba(255, 255, 255, .42);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .bocne-odhlasit {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; min-height: 48px;
    color: var(--bocne-text); background: none; border: 0;
    border-radius: var(--r-m); cursor: pointer;
  }
  .bocne-odhlasit span { position: absolute; left: -9999px; }
  .bocne-odhlasit:hover { color: var(--bocne-text-jasny); background: var(--bocne-plocha); }

  /* Hlavička na počítači nesie názov sekcie — značka je v bočnom menu. */
  .znacka-mobil, .hlavicka-odhlasit { display: none; }
  .hlavicka { padding: .5rem 2rem; }
  .hlavicka-nadpis {
    display: block; margin: 0; flex: 1;
    font-size: 1rem; font-weight: 650; letter-spacing: -.01em;
  }
  .spodny-pas { display: none; }
  /* Bez lišty nie je čo obchádzať — pruhy môžu ísť až k spodku. */
  :root { --pas-odstup: 0px; }

  .obsah { padding: 2rem 2rem 3rem; }
  .pasy { padding: 0 2rem; }

  .dlazdice { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }
}

/* ═══ 7. MOBIL ═══════════════════════════════════════════════════ */
@media (max-width: 40rem) {
  .obsah { padding: 1.1rem .85rem 2rem; }
  .pasy { padding: 0 .85rem; }
  .hlavicka { padding: .4rem .75rem; min-height: 3.4rem; }
  .znacka-text { font-size: .95rem; }
  .odznak-trial { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; }

  .prehlad-hlava h1 { font-size: 1.35rem; }
  .karta-formulara { margin: 1.25rem auto; padding: 1.35rem; border-radius: var(--r-l); }

  .dlazdice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  a.dlazdica { min-height: 6rem; padding: .8rem; border-radius: var(--r-m); }
  a.dlazdica .dlazdica-ikona { width: 2.15rem; height: 2.15rem; margin-bottom: .5rem; }
  a.dlazdica .dlazdica-text { font-size: .9rem; }
  a.dlazdica small { font-size: .74rem; }

  .dnes { padding: 1rem; border-radius: var(--r-l); }
  .dnes-kruh { width: 3.4rem; height: 3.4rem; }
  .nastavenia-zoznam { grid-template-columns: 1fr; }
  .podzalozky { display: flex; width: 100%; }
  .podzalozky a { flex: 1; justify-content: center; }
}

/* ═══ 8. TLAČ ════════════════════════════════════════════════════ */
@media print {
  .bocne, .spodny-pas, .hlavicka, .pata, .preskocit,
  .rezim-kontroly-prepinac { display: none !important; }
  body.app { display: block; padding: 0; }
  .obsah { max-width: none; padding: 0; }
  .karta, .dlazdica, .dnes { box-shadow: none; }
}

/* ═══ 9. ANIMÁCIE VYPNUTÉ NA ŽELANIE ═════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ═══ 10. KANCELÁRSKE OBRAZOVKY MODULOV ══════════════════════════
   Spoločný tvar pre obrazovky, ktoré majú aj kioskovú verziu na
   tablete (teploty, neskôr sanitácia). Rám je kancelársky, ostrov
   zapisovania je ten istý. */

.kan-hlava {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.kan-hlava h1 { margin: 0; }
.kan-hlava .napoveda { margin: .2rem 0 0; }

/* Dni na spätný zápis — vodorovný pás, na mobile sa dá posúvať prstom. */
.kan-dni {
  display: flex; gap: .4rem; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: thin;
  margin: 0 0 1.25rem; padding-bottom: .25rem;
}
.kan-den {
  display: inline-flex; align-items: center;
  min-height: 48px; padding: .4rem .9rem;
  font-size: .88rem; font-weight: 600; white-space: nowrap;
  color: var(--text-tichy); text-decoration: none;
  background: var(--plocha); border: 1px solid var(--ciara);
  border-radius: 99px;
}
.kan-den:hover { border-color: var(--znacka-obrys); color: var(--text); }
.kan-den.aktivny {
  color: #fff; background: var(--znacka); border-color: var(--znacka);
}

.kan-zoznam { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.kan-riadok {
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  padding: .85rem 1rem;
  background: var(--plocha);
  border: 1px solid var(--ciara);
  border-left: 4px solid var(--ciara);
  border-radius: var(--r-m);
  box-shadow: var(--tien-1);
}
.kan-riadok.hotovo { border-left-color: var(--ok); }
.kan-riadok.odchylka { border-left-color: var(--odchylka); background: var(--odchylka-jemna); }

/* Stornovaný riadok sa NESKRÝVA, len prečiarkne. Denník, z ktorého sa
   dá niečo odstrániť, nie je dôkaz (CLAUDE.md §3). */
.kan-riadok.stornovany { opacity: .72; border-left-color: var(--ciara-silna); }
.kan-riadok.stornovany .kan-telo strong,
.kan-riadok.stornovany .kan-hodnota { text-decoration: line-through; }

.kan-ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; flex: 0 0 auto;
  font-size: 1.15rem;
  background: var(--plocha-2); border-radius: 10px;
}
.kan-telo { flex: 1 1 12rem; display: flex; flex-direction: column; min-width: 0; }
.kan-telo small { color: var(--text-tichy); font-size: .8rem; }
.kan-priznak { color: var(--varovanie) !important; }
.kan-hodnota {
  text-align: right; font-weight: 700; font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.kan-hodnota small { display: block; font-weight: 400; font-size: .76rem; color: var(--text-tichy); }
.kan-stav { margin-left: auto; }

.kan-storno { flex: 1 1 100%; margin-top: .35rem; }
.kan-storno summary {
  display: inline-flex; align-items: center; min-height: 48px;
  font-size: .85rem; font-weight: 600; color: var(--text-tichy); cursor: pointer;
}
.kan-storno summary:hover { color: var(--odchylka); }
.kan-storno .formular { max-width: 26rem; }

.kan-prazdne { text-align: center; padding: 2.5rem 1.25rem; }
.kan-prazdne h2 { margin: .5rem 0 .25rem; }
.kan-prazdne-ikona { margin: 0; color: var(--text-slaby); }
.kan-prazdne-ikona .ik { width: 2.5rem; height: 2.5rem; }

/* Ostrov zapisovania (kiosk.css) v kancelárii: bez čiernych kiosk
   plôch okolo, len jeho vlastný obsah. */
.kan-teploty #ostrov-teploty { margin-top: 1.25rem; }

/* Veľká ikona na chybovej a potvrdzovacej stránke. */
.velka-ikona { margin: 0 0 .75rem; line-height: 1; color: var(--text-slaby); }
.velka-ikona .ik { width: 2.75rem; height: 2.75rem; vertical-align: 0; }
.karta-formulara.stred .velka-ikona .ik { color: var(--znacka); }

/* ── Verejné stránky s jedinou kartou (prihlásenie, registrácia,
      chybová stránka) ── karta patrí do stredu plochy, nie nalepená
      pod hlavičku. */
body.verejna .obsah {
  display: flex; align-items: center; justify-content: center;
  padding-top: 1rem;
}
body.verejna .karta-formulara { width: 100%; margin: 0 auto; }
@media (max-width: 40rem) {
  body.verejna .obsah { align-items: flex-start; }
}

/* ── Prepínač prevádzky ────────────────────────────────────────
   Kto nevie, do ktorej prevádzky zapisuje, zapíše do nesprávnej.
   Preto je pás nad obsahom a na každej obrazovke, nie schovaný
   v nastaveniach. */
/* Jedna prevádzka: jeden riadok, nie panel. Prepínať sa nedá nikam,
   takže z pásu ostáva len odpoveď na otázku „kam zapisujem". */
.prepinac-prevadzky.prepinac-jedna {
  padding: .3rem .9rem; gap: .45rem;
}
/* Popis OSTÁVA VIDITEĽNÝ, len menší. Skryť ho bolo lákavé (ušetrí
   riadok), ale „kam zapisujem" je práve to, čo pôvodný nález
   žiadal — bez popisu je v páse len holý názov a majiteľ nevie,
   čo znamená. */
.prepinac-jedna .prepinac-popis { font-size: .72rem; }
.prepinac-jedna .prepinac-tu { flex-direction: row; gap: .35rem;
  align-items: baseline; flex-wrap: wrap; }
.prepinac-jedna .prepinac-nazov { font-size: .88rem; }
.prepinac-jedna .prepinac-znak svg { width: 1rem; height: 1rem; }

.prepinac-prevadzky {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  max-width: 72rem; margin: .75rem auto 0; padding: .5rem .85rem;
  width: calc(100% - 2rem);
  background: var(--plocha); border: 1px solid var(--ciara);
  border-radius: var(--r-m); box-shadow: var(--tien-1);
}
.prepinac-znak {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: 0 0 auto;
  color: var(--znacka-tmava); background: var(--znacka-jemna);
  border-radius: 8px;
}
.prepinac-znak .ik { width: 1.1rem; height: 1.1rem; vertical-align: 0; }
.prepinac-popis {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-slaby);
}
/* Potvrdenie tvrdého prepnutia prevádzky. Karta na stred, dve veľké
   tlačidlá pod sebou — na tablete sa rozhoduje palcom, nie myšou. */
.potvrdenie-prepnutia {
  max-width: 34rem; margin: 2rem auto; padding: 1.5rem;
  background: var(--plocha); border: 1px solid var(--ciara);
  border-radius: var(--r-m); box-shadow: var(--tien-1);
}
.potvrdenie-prepnutia h1 { margin: .75rem 0 .5rem; font-size: 1.3rem; }
.potvrdenie-prepnutia p { margin: 0 0 .75rem; }
.potvrdenie-znak {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  color: var(--znacka-tmava); background: var(--znacka-jemna);
  border-radius: 10px;
}
.potvrdenie-znak .ik { width: 1.5rem; height: 1.5rem; vertical-align: 0; }
.potvrdenie-tlacidla {
  display: flex; flex-direction: column; gap: .5rem; margin-top: 1.25rem;
}
.potvrdenie-tlacidla .tlacidlo-hlavne { width: 100%; }

/* Kde práve stojím. Názov je NAPÍSANÝ, nie len vybraný v zozname —
   hodnotu ovládacieho prvku človek prečíta ako ponuku, nie ako stav. */
.prepinac-tu {
  display: flex; flex-direction: column; gap: .1rem;
  flex: 1 1 auto; min-width: 0;
}
.prepinac-nazov {
  font-size: 1.05rem; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prepinac-forma {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  flex: 0 1 auto; min-width: 0;
}
.prepinac-prevadzky select {
  flex: 1 1 10rem; min-width: 0; min-height: 44px;
  padding: .4rem .7rem; font-size: .95rem; font-weight: 600;
  color: var(--text); background: var(--plocha);
  border: 1px solid var(--ciara-silna); border-radius: var(--r-s);
}
@media (min-width: 62rem) {
  .prepinac-prevadzky { width: calc(100% - 4rem); margin-top: 1rem; }
}

/* Tlačidlo „Ako na to“ v hlavičke. Slovo vedľa ikony je tam preto, že
   otáznik si človek musí preložiť — a pomocník, ktorý sa nedá nájsť,
   neexistuje. Na úzkej obrazovke text zmizne a ostane ikona. */
.hlavicka-napoveda { gap: .4rem; width: auto; padding: 0 .6rem; }
.hlavicka-napoveda-text { font-size: .88rem; font-weight: 500; }
@media (max-width: 46rem) {
  .hlavicka-napoveda-text { display: none; }
  .hlavicka-napoveda { padding: 0; }
}