/* Spartak DB — ruční CSS, žádný build krok. Mobile-first. */

:root {
	--barva-pozadi: #f7f5f2;
	--barva-povrch: #ffffff;
	--barva-text: #1c1b1a;
	--barva-text-tlumeny: #5b5854;
	--barva-okraj: #ddd8d1;
	--barva-akcent: #DD6822;
	--barva-akcent-text: #ffffff;
	/* Značková #DD6822 na světlém pozadí/bílém textu nedosáhne WCAG AA
	   (4.5:1) pro běžně velký text — tenhle tmavší odstín se používá
	   tam, kde barva NESE text (odkazy, tlačítka, popisky štítků),
	   zatímco --barva-akcent zůstává pro ikony/okraje/odznaky beze
	   změny. V tmavém režimu už samotná --barva-akcent kontrast má. */
	--barva-akcent-silna: #b0531b;
	--barva-chyba: #b3261e;
	--barva-uspech: #1e7a34;
	--vyska-horni-listy: 56px;
	--vyska-spodni-navigace: 64px;
	--radius: 10px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--barva-pozadi: #171615;
		--barva-povrch: #232220;
		--barva-text: #f2f0ed;
		--barva-text-tlumeny: #b4b0a9;
		--barva-okraj: #3a3835;
		--barva-akcent: #f08a4b;
		--barva-akcent-text: #171615;
		--barva-akcent-silna: #f08a4b;
	}
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--barva-pozadi);
	color: var(--barva-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.45;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-bottom: calc(var(--vyska-spodni-navigace) + env(safe-area-inset-bottom));
}

a { color: var(--barva-akcent-silna); }

/* Viditelný focus pro klávesnici/tablet s klávesnicí — nikdy neodstraňovat
   bez náhrady, jen jinou vizuální podobou. */
:focus-visible {
	outline: 3px solid var(--barva-akcent);
	outline-offset: 2px;
	border-radius: 4px;
}

h1 { font-size: 1.5rem; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 0.75rem; }

.horni-lista {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--vyska-horni-listy);
	padding: 0 1rem;
	background: var(--barva-povrch);
	border-bottom: 1px solid var(--barva-okraj);
	position: sticky;
	top: 0;
	z-index: 10;
}

.horni-lista__znacka {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	color: var(--barva-akcent-silna);
}

.horni-lista__logo {
	height: 40px;
	width: 40px;
	object-fit: contain;
	flex-shrink: 0;
}

/* Logo je černá kresba na průhledném pozadí — v tmavém režimu se musí obrátit,
   jinak by splynulo s pozadím. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .horni-lista__logo { filter: invert(1); }
}
:root[data-theme="dark"] .horni-lista__logo { filter: invert(1); }

.horni-navigace {
	display: none;
}

/* Kompaktní menu pro mobil — <details>/<summary>, funguje bez JS/CSP problémů */
.kompaktni-menu {
	position: relative;
}

.kompaktni-menu > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}

.kompaktni-menu > summary .ikona-svg { width: 24px; height: 24px; }

.kompaktni-menu > summary::-webkit-details-marker {
	display: none;
}

.kompaktni-menu__obsah {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	display: flex;
	flex-direction: column;
	min-width: 180px;
	background: var(--barva-povrch);
	border: 1px solid var(--barva-okraj);
	border-radius: var(--radius);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	z-index: 20;
}

.kompaktni-menu__obsah a,
.kompaktni-menu__obsah .tlacitko-odkaz {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.5rem 1rem;
	color: var(--barva-text);
	text-decoration: none;
	text-align: left;
	width: 100%;
}

.kompaktni-menu__obsah .formular-inline {
	display: block;
}

/* Tlačítko, které vypadá jako odkaz — pro odhlášení přes POST formulář */
.tlacitko-odkaz {
	background: none;
	border: none;
	padding: 0;
	min-height: auto;
	font: inherit;
	color: var(--barva-akcent-silna);
	cursor: pointer;
	text-align: left;
}

.obsah {
	flex: 1;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 1rem;
}

/* Spodní navigace — mobil */
.spodni-navigace {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	background: var(--barva-povrch);
	border-top: 1px solid var(--barva-okraj);
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 10;
}

.spodni-navigace a {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: var(--vyska-spodni-navigace);
	color: var(--barva-text);
	text-decoration: none;
	font-size: 0.7rem;
}

.ikona-svg {
	width: 1.4em;
	height: 1.4em;
	vertical-align: -0.25em;
}

.ikona-svg--velka {
	width: 3rem;
	height: 3rem;
}

.spodni-navigace .ikona { display: flex; font-size: 1.3rem; }
.spodni-navigace .ikona-svg { width: 22px; height: 22px; }

.spodni-navigace__neaktivni {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: var(--vyska-spodni-navigace);
	color: var(--barva-text-tlumeny);
	font-size: 0.7rem;
	opacity: 0.55;
}

.stitek-pripravujeme {
	font-size: 0.55rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Text "KB" nahrazuje "Knowledge base" v úzké horní navigaci (768–1023 px) —
   viz .text-kratky/.text-plny níž. Mimo horní navigaci se nepoužívají, proto
   výchozí stav (mobil, kompaktní menu) zobrazuje oba shodně přes display:contents. */
.text-kratky { display: none; }

/* Desktop — horní navigace nahradí spodní. Položek je 8 (Domů, Zkoušky,
   Členové, Knowledge base, Import, Uživatelé, EOS, Odhlásit), proto je
   textový popisek značky ("Spartak DB") mezi 768–1023 px schovaný — jinak
   se navigace nevejde a zalomí se, viz ověření v Playwrightu na 768/1024 px. */
@media (min-width: 768px) {
	.horni-lista__znacka span { display: none; }

	.horni-navigace {
		display: flex;
		align-items: center;
		gap: 0.4rem;
		min-width: 0;
	}
	.horni-navigace a,
	.horni-navigace .tlacitko-odkaz {
		display: inline-flex;
		align-items: center;
		gap: 0.2rem;
		color: var(--barva-text);
		text-decoration: none;
		padding: 0.4rem 0.1rem;
		min-height: 44px;
		font-size: 0.8rem;
		white-space: nowrap;
		border-bottom: 2px solid transparent;
	}
	.horni-navigace .ikona-svg { width: 15px; height: 15px; flex-shrink: 0; }
	.horni-navigace a:hover { color: var(--barva-akcent-silna); }
	.horni-navigace .tlacitko-odkaz { background: none; border: none; border-bottom: 2px solid transparent; }
	.horni-navigace .tlacitko-odkaz:hover { color: var(--barva-akcent-silna); }
	.horni-navigace a.aktivni,
	.horni-navigace .tlacitko-odkaz.aktivni {
		color: var(--barva-akcent-silna);
		font-weight: 700;
		border-bottom-color: var(--barva-akcent-silna);
	}
	.horni-navigace .formular-inline {
		display: inline-flex;
		align-items: center;
		height: 100%;
	}
	.horni-navigace .formular-inline .tlacitko-odkaz {
		display: inline-flex;
		align-items: center;
		height: 100%;
	}

	.text-kratky { display: inline; }
	.text-plny { display: none; }

	.kompaktni-menu { display: none; }

	.spodni-navigace { display: none; }
	body { padding-bottom: 0; }
}

/* Od 1024 px je místa dost na plné popisky a na název klubu vedle loga. */
@media (min-width: 1024px) {
	.horni-lista__znacka span { display: inline; }

	.horni-navigace { gap: 1.3rem; }
	.horni-navigace a, .horni-navigace .tlacitko-odkaz {
		font-size: 1rem;
		padding: 0.5rem 0.1rem;
	}

	.text-kratky { display: none; }
	.text-plny { display: inline; }
}

/* Aktivní položka v kompaktním menu (mobil) a ve spodní navigaci. */
.kompaktni-menu__obsah a.aktivni,
.kompaktni-menu__obsah .tlacitko-odkaz.aktivni {
	color: var(--barva-akcent-silna);
	font-weight: 700;
}

.spodni-navigace a.aktivni {
	color: var(--barva-akcent-silna);
	font-weight: 700;
}

/* Dlaždice rozcestníku */
.dlazdice {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

.dlazdice__polozka {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 110px;
	background: var(--barva-povrch);
	border: 1px solid var(--barva-okraj);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--barva-text);
	font-weight: 600;
}

.dlazdice__ikona { display: flex; }
.dlazdice__ikona .ikona-svg { width: 2rem; height: 2rem; }

.dlazdice__polozka--neaktivni {
	color: var(--barva-text-tlumeny);
	opacity: 0.55;
	cursor: default;
}

.dlazdice__polozka--neaktivni .stitek-pripravujeme {
	font-weight: 400;
}

/* Formuláře */
.formular {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 420px;
}

.formular-inline { display: inline; }

label { font-weight: 600; margin-top: 0.5rem; }

input, select, button, textarea {
	font-family: inherit;
	font-size: 1rem;
	padding: 0.65rem 0.75rem;
	min-height: 44px;
	border-radius: var(--radius);
	border: 1px solid var(--barva-okraj);
	background: var(--barva-povrch);
	color: var(--barva-text);
}

textarea {
	resize: vertical;
}

.tlacitko {
	display: inline-block;
	background: var(--barva-akcent-silna);
	color: var(--barva-akcent-text);
	border: none;
	border-radius: var(--radius);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.6;
	padding: 0.65rem 0.75rem;
	min-height: 44px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.tlacitko--primarni { margin-top: 0.5rem; }

.tlacitko--maly {
	/* Vizuálně kompaktnější (menší padding/písmo), ale dotyková plocha
	   pořád aspoň 44 px — je to jediné tlačítko v řádku admin tabulky
	   na mobilu i tabletu. */
	min-height: 44px;
	padding: 0.4rem 0.75rem;
	font-size: 0.85rem;
}

.tlacitko--nebezpecne {
	background: var(--barva-chyba);
	color: #fff;
}

.akce-bunka {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}

.karta {
	background: var(--barva-povrch);
	border: 1px solid var(--barva-okraj);
	border-radius: var(--radius);
	padding: 1.25rem;
	max-width: 420px;
	margin: 2rem auto;
}

.podnadpis { color: var(--barva-text-tlumeny); margin-top: -0.5rem; }

.chyba { color: var(--barva-chyba); font-weight: 600; }

/* Konzistentní odkaz zpět na nadřazenou sekci v záhlaví podstránky. */
.zpet {
	margin: 0 0 0.75rem;
}

.zpet a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 44px;
	color: var(--barva-text-tlumeny);
	text-decoration: none;
}

.zpet a:hover { color: var(--barva-akcent-silna); }

/* Flash zpráva po přesměrování (Post/Redirect/Get) — potvrzuje, že se
   akce (uložení, smazání, import…) skutečně provedla. */
.flash {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
	font-weight: 600;
	border: 1px solid transparent;
}

.flash--uspech {
	background: color-mix(in srgb, var(--barva-uspech) 14%, var(--barva-povrch));
	border-color: var(--barva-uspech);
	color: var(--barva-uspech);
}

.flash--chyba {
	background: color-mix(in srgb, var(--barva-chyba) 14%, var(--barva-povrch));
	border-color: var(--barva-chyba);
	color: var(--barva-chyba);
}

.tabulka {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.tabulka th, .tabulka td {
	text-align: left;
	padding: 0.5rem;
	border-bottom: 1px solid var(--barva-okraj);
}

.uspech { color: var(--barva-uspech); font-weight: 600; }

/* Členové — karty místo tabulky, hlavní scénář je telefon v tělocvičně */
.formular--filtr {
	max-width: none;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
}

.formular--filtr__pole {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.formular--filtr label { margin-top: 0; }

.formular--filtr__tlacitko { align-self: flex-start; }

.pocet-vysledku {
	color: var(--barva-text-tlumeny);
	margin: 1rem 0 0.75rem;
}

@media (min-width: 768px) {
	.formular--filtr {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
	}
	.formular--filtr__pole { flex: 1 1 200px; }
	.formular--filtr__tlacitko { align-self: flex-end; }
}

/* Prázdné stavy — zkoušky bez disciplín, členové bez výsledku hledání,
   knowledge base bez dokumentů, uživatelé bez záznamů apod. */
.prazdny-stav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	background: var(--barva-povrch);
	border: 1px dashed var(--barva-okraj);
	border-radius: var(--radius);
	padding: 1.5rem;
	color: var(--barva-text-tlumeny);
}

.prazdny-stav__ikona { color: var(--barva-text-tlumeny); }

.prazdny-stav p { margin: 0; }

/* Stránkování seznamu členů */
.strankovani {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 1.25rem 0;
}

.strankovani__stav {
	color: var(--barva-text-tlumeny);
	font-size: 0.9rem;
	white-space: nowrap;
}

.tlacitko--zakazane {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	background: var(--barva-pozadi);
	color: var(--barva-text-tlumeny);
	border: 1px solid var(--barva-okraj);
	border-radius: var(--radius);
	font-weight: 700;
	padding: 0.65rem 0.75rem;
	min-height: 44px;
	cursor: default;
}

.strankovani .tlacitko {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

/* Seznam členů — tabulka, jeden člověk = jeden řádek (viz knowhow: hlavní
   scénář je trenér s telefonem, ale seznam se prohlíží i na počítači a
   s kartami se jich vejde málo). Obalový div dovoluje vodorovné posouvání
   JEN téhle tabulce, nikdy ne celé stránce — v praxi se na 360 px nepoužije
   díky skrytým sloupcům níž, je to jen pojistka pro extrémně úzké displeje. */
.tabulka-clenu-posuv {
	width: 100%;
	overflow-x: auto;
}

.tabulka--clenove {
	min-width: 360px;
}

.tabulka--clenove td {
	padding: 0.6rem;
	vertical-align: middle;
}

.tabulka--clenove thead th {
	padding: 0.5rem 0.6rem;
	font-size: 0.8rem;
	color: var(--barva-text-tlumeny);
	white-space: nowrap;
}

.radek-clena {
	position: relative;
}

.radek-clena:hover,
.radek-clena:focus-within {
	background: color-mix(in srgb, var(--barva-akcent) 8%, transparent);
}

.radek-clena--neaktivni {
	color: var(--barva-text-tlumeny);
}

.bunka-jmeno {
	padding: 0 !important;
}

/* Odkaz vyplňuje celou buňku jména a přes ::after i celý zbytek řádku
   (position:absolute; inset:0 vůči .radek-clena), takže je dotykový cíl
   "celý řádek", ne jen text jména. */
.odkaz-radku {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.6rem;
	color: var(--barva-text);
	text-decoration: none;
	font-weight: 600;
}

.odkaz-radku::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bunka-jmeno__mobil {
	display: none;
	font-weight: 400;
	color: var(--barva-text-tlumeny);
	font-size: 0.8rem;
	padding: 0 0.6rem 0.5rem;
}

.sloupec-stav .stitek--aktivni {
	color: var(--barva-uspech);
	border-color: var(--barva-uspech);
}

/* Pod 600 px se tým a STV schovají ze svých sloupců a přesunou se jako
   druhý řádek textu pod jméno — čitelnější než vodorovné posouvání celé
   tabulky na 390 px. Rok narození a stav zůstávají vlastní sloupce, ať jde
   na první pohled vidět, kdo je neaktivní. */
@media (max-width: 599px) {
	.sloupec-tym, .sloupec-stv { display: none; }
	.bunka-jmeno__mobil:not(:empty) { display: block; }
	.tabulka--clenove { min-width: 0; }
	.tabulka-clenu-posuv { overflow-x: visible; }
}

/* Knowledge base */
.formular--hledani {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	max-width: none;
}

/* display:none by popisek vyřadilo z accessibility stromu u části
   asistenčních technologií — vizuálně skryté, ale pořád čitelné čtečkou. */
.formular--hledani label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.formular--hledani input[type="search"] { flex: 1; min-width: 160px; }

.seznam-dokumentu {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.karta-dokumentu {
	background: var(--barva-povrch);
	border: 1px solid var(--barva-okraj);
	border-radius: var(--radius);
	padding: 1rem;
}

.karta-dokumentu__nazev {
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
}

.karta-dokumentu__uryvek {
	color: var(--barva-text-tlumeny);
	margin: 0.5rem 0 0;
}

.karta-dokumentu__stitky {
	margin: 0.5rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.stitek, .stitek-typ {
	display: inline-block;
	background: var(--barva-pozadi);
	border: 1px solid var(--barva-okraj);
	border-radius: 999px;
	padding: 0.15rem 0.6rem;
	font-size: 0.8rem;
	color: var(--barva-text-tlumeny);
}

.stitek--stv { color: var(--barva-akcent-silna); border-color: var(--barva-akcent); }
.stitek--neaktivni { color: var(--barva-chyba); border-color: var(--barva-chyba); }
.stitek--pripravujeme { opacity: 0.6; }

/* Karta detailu člena */
.karta--detail {
	max-width: 560px;
	text-align: left;
}

.popisky {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 1rem;
	margin: 0 0 1rem;
}

.popisky dt {
	color: var(--barva-text-tlumeny);
	font-weight: 600;
}

.popisky dd {
	margin: 0;
}

/* Import */
.karta--import {
	max-width: 560px;
	text-align: left;
	margin: 0 0 1rem;
}

.karta--chyby {
	max-width: none;
	margin: 0 0 1rem;
	border-color: var(--barva-chyba);
}

.karta--chyby ul {
	margin: 0;
	padding-left: 1.2rem;
}

/* Zaškrtávací seznam disciplín — hromadné odkliknutí na mobilu v tělocvičně,
   proto velké dotykové cíle (celý řádek je label, min. 44px výšky). */
/* Zaškrtávací seznam disciplín — každá položka je samostatný grid se dvěma
   sloupci (zaškrtávátko | text), takže dlouhý název se zalomí uvnitř své
   vlastní buňky a nikdy nepřeteče do sousední položky. Zaškrtávátko je
   svisle na střed vůči CELÉMU obsahu položky (jméno + štítek STV), i když
   se text zalomí na víc řádků. */
.seznam-zaskrtavani {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
	margin: 0.75rem 0;
}

@media (min-width: 640px) {
	.seznam-zaskrtavani {
		grid-template-columns: repeat(2, 1fr);
	}
}

.seznam-zaskrtavani__polozka {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: 0.75rem;
	align-items: center;
	min-height: 44px;
	padding: 0.6rem 0.75rem;
	background: var(--barva-povrch);
	border: 1px solid var(--barva-okraj);
	border-radius: var(--radius);
	cursor: pointer;
}

.seznam-zaskrtavani__polozka input[type="checkbox"] {
	grid-column: 1;
	grid-row: 1 / -1;
	width: 24px;
	height: 24px;
	min-height: 0;
	align-self: center;
	justify-self: center;
	flex: none;
}

.seznam-zaskrtavani__polozka > span {
	grid-column: 2;
	min-width: 0;
	overflow-wrap: anywhere;
}

.seznam-zaskrtavani__stv {
	color: var(--barva-text-tlumeny);
	font-size: 0.85rem;
}

/* Vizuální odlišení zaškrtnuté položky — nespoléhá jen na stav políčka.
   :has() pokrývá moderní prohlížeče; app.js navíc přepíná stejnou třídu
   ručně, takže to funguje i bez podpory :has(). */
.seznam-zaskrtavani__polozka:has(input:checked),
.seznam-zaskrtavani__polozka--zaskrtnuto {
	background: color-mix(in srgb, var(--barva-akcent) 12%, var(--barva-povrch));
	border-color: var(--barva-akcent);
}

.seznam-zaskrtavani__polozka:has(input:checked) .seznam-zaskrtavani__nazev,
.seznam-zaskrtavani__polozka--zaskrtnuto .seznam-zaskrtavani__nazev {
	font-weight: 700;
}

.stav-splneno { color: var(--barva-uspech); font-weight: 700; }
.stav-nesplneno { color: var(--barva-text-tlumeny); }

/* Řádkový editační formulář v administraci číselníku disciplín. */
.formular-radek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.formular-radek input[type="text"] { flex: 1 1 160px; }

/* Úzká číselná pole v řádkovém formuláři admin číselníku — dřív inline
   style="width:...", což CSP (style-src 'self') zakazuje. */
.pole--uzke { width: 4rem; flex: none; }
.pole--uzsi { width: 4.5rem; flex: none; }

.stitky-vyber {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.stitek-checkbox {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 400;
	min-height: 44px;
}

.stitek-checkbox input { min-height: auto; width: 20px; height: 20px; }

.tlacitko--nebezpecny {
	background: var(--barva-chyba);
	color: #fff;
}