/*
 * Klientský portál AI Guru — vlastní styl, ne CRM.
 *
 * Portál je pro zákazníka, ne pro zaměstnance: jiná značka (zelená místo
 * indigové), jiné rozvržení, žádný sidebar. Načítá se samostatně, bez
 * aplikačního balíčku — stránka přihlášení nemá důvod stahovat jQuery,
 * Bootstrap ani Select2, které by na ní nic nedělaly.
 */

/*
 * Zelená má dvě role a nejdou sloučit do jedné hodnoty: text a plocha pod
 * textem potřebují kontrast 4,5:1, čistá výplň bez textu si vystačí se 3:1.
 * Měřeno na bílé: #16a34a = 3,30 (propadá AA), #15803d = 5,02, #166534 = 7,13.
 * Původní #16a34a proto zůstal jen jako `--agp-zelena-vypln`.
 *
 * Šedá má role tři, protože záleží na tom, na čem leží: #6b7280 je 4,83 na bílé,
 * ale jen 4,39 na štítku #f3f4f6 (propadá), a na tmavém panelu projde i #9ca3af
 * (6,99 na #111827). Token nese tu roli, ne odstín.
 */
:root {
    /* ── Akcent je MODRÁ ────────────────────────────────────────────────
       Podle nové podoby veřejných stránek ai-guru.cz. Modrá nese odkazy,
       ikony, aktivní položky menu, zaostření a rozsvícení ploch; zelená
       zůstává tlačítkům, značce a stavům „hotovo". Odstíny jsou odečtené
       z té stránky, ne odhadnuté: #2f5bff, hover #1849ea, světlé podbarvení
       #f3f6ff, rámeček při najetí #aebde4. */
    --agp-modra: #2f5bff;
    --agp-modra-tmava: #1849ea;
    --agp-modra-svetla: #f3f6ff;
    --agp-modra-znacka: #dde5ff;
    --agp-modra-linka: #aebde4;

    /* ── Zelená je ZNAČKA, ne tlačítko ──────────────────────────────────
       Návrh členské sekce (temp/ai-guru-clenska-sekce.html) nemá na žádné
       z dvanácti obrazovek zelené tlačítko — všechna jsou modrá. Limetka
       v něm nese jen značku: avatar, nápis „GURU", číslo tématu, štítek
       „NOVINKA". Tlačítka se proto 13. 10. 2026 vrátila na modrou.

       Tmavé odstíny zůstávají stavům „hotovo", kde zelená něco znamená. */
    --agp-zelena: #15803d;
    --agp-zelena-tmava: #166534;
    --agp-zelena-vypln: #16a34a;
    --agp-zelena-jasna: #4ade80;
    --agp-zelena-svetla: #f0fdf4;
    --agp-zelena-znacka: #dcfce7;

    --agp-limetka: #c7f464;
    --agp-limetka-svetla: #d6fb8a;

    --agp-tmava: #111827;
    --agp-tmava-linka: #374151;
    --agp-text: #1f2937;

    --agp-seda: #6b7280;
    --agp-seda-tmava: #4b5563;
    --agp-seda-panel: #9ca3af;
    --agp-seda-panel-text: #d1d5db;

    --agp-bila: #fff;
    --agp-linka: #e5e7eb;
    --agp-linka-silna: #d1d5db;
    --agp-pozadi: #f2f4f7;
    --agp-podklad: #f3f4f6;
    --agp-podklad-pole: #f9fafb;

    --agp-chyba: #b91c1c;
    --agp-chyba-sytá: #dc2626;
    --agp-chyba-svetla: #fef2f2;

    --agp-stin: 0 1px 3px rgba(17, 24, 39, .06);
    --agp-stin-zvednuty: 0 4px 12px rgba(17, 24, 39, .1);
    --agp-zaves: rgba(17, 24, 39, .45);

    /* Zaškrtnutí má dvě místa použití: ikona v obsahu a odrážka v seznamu výhod. */
    /* Šipka „sem jde kliknout" — bi-chevron-right. */
    --agp-sipka: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>");
    --agp-ico-hotovo: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/></svg>");
    --agp-prejezd-tmavy: rgba(255, 255, 255, .07);
}

* { box-sizing: border-box; }

body.agp {
    margin: 0;
    background: var(--agp-pozadi);
    color: var(--agp-text);
    font: 15px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/*
 * Povrchy, které kreslí prohlížeč.
 *
 * Výběr textu, kurzor, posuvník, podtržení odkazů a číslice v tabulkách mají
 * výchozí podobu, která nepatří k žádné značce. Portál si je bere na sebe —
 * je to pár řádků a je na nich nejvíc poznat, že stránka byla navržená.
 */
body.agp ::selection {
    background: var(--agp-modra-znacka);
    color: var(--agp-tmava);
}
body.agp { caret-color: var(--agp-modra); scrollbar-color: var(--agp-linka-silna) transparent; }
body.agp a { text-underline-offset: 2px; }
.agp-tab td, .agp-tab th, .agp-stav, .agp-znacka, .agp-konzultace-termin {
    font-variant-numeric: tabular-nums;
}

/*
 * Jeden viditelný prstenec pro všechno, co jde zaostřit.
 *
 * Dřív byl popsaný jen `.agp-input`; u tlačítek a menu zbyl výchozí prstenec
 * prohlížeče, který se na zelené aktivní položce skoro ztratí. `:focus-visible`
 * se objeví při ovládání klávesnicí, ne po kliknutí myší.
 */
.agp-btn:focus-visible,
.agp-nav-item:focus-visible,
.agp-odhlasit:focus-visible,
.agp-burger:focus-visible,
.agp-lekce-radek:focus-visible,
.agp-link:focus-visible,
.agp-obsah a:focus-visible,
.agp-drobecek a:focus-visible,
.agp-udaje a:focus-visible,
.agp-paticka a:focus-visible {
    outline: 2px solid var(--agp-modra);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Na tmavém panelu by tmavě zelený prstenec zanikl. */
.agp-side .agp-nav-item:focus-visible {
    outline-color: var(--agp-zelena-jasna);
}

/* ── Rozvržení nepřihlášených stránek ───────────────────────────────────── */

.agp-split {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    min-height: 100vh;
}

/* Značka v BÍLÉM pruhu nahoře, pod ním tmavé pole — podle grafického návrhu.
   Sloupec proto nemá vlastní odsazení; má ho každá z obou částí zvlášť. */
.agp-brand {
    display: flex;
    flex-direction: column;
    background: var(--agp-tmava);
}

.agp-brand-hlava {
    padding: 22px 32px;
    background: var(--agp-bila);
}

.agp-brand-telo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 36px 32px;
    color: var(--agp-bila);
}

/*
 * Značka AI Guru — typografická.
 *
 * Návrh z 13. 10. 2026 obrazový znak (tři rostoucí sloupce) zrušil: zůstal
 * verzálkový nápis a pod ním „by Everbot". Proto tu nezbyly žádné předpisy
 * pro SVG ani pro zelené výplně sloupců.
 *
 * Parametry písma jsou z návrhu doslova: 28 px, váha 900, prostrkání -1.4 px.
 * Záporné prostrkání je u verzálek podstatné — bez něj se nápis rozjede
 * a přestane držet pohromadě jako značka.
 */
.agp-znacka-logo {
    display: block;
}

.agp-znacka-nazev {
    display: block;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -1.4px;
    line-height: 1;
    white-space: nowrap;
}

.agp-znacka-podpis {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 400;
    color: var(--agp-seda-panel);
}

/* V liště nad obsahem (úzké okno) je na značku míň místa. */
.agp-znacka-logo--maly .agp-znacka-nazev { font-size: 22px; }
.agp-znacka-logo--maly .agp-znacka-podpis { margin-top: 6px; }

.agp-claim {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    margin: 28px 0 0;
}

.agp-vyhody {
    /* ikona odrážky, dědí ji `li::before` */
    --i: var(--agp-ico-hotovo);
    list-style: none;
    padding: 0;
    margin: 0 0 auto;
    color: var(--agp-seda-panel-text);
    font-size: 14px;
}
.agp-vyhody li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
}
/*
 * Odrážka je kreslená ikona, ne znak „✓" z písma.
 *
 * Textové zaškrtnutí se vykreslí v každém systému jinak — někde jako tenká
 * čárka, jinde jako emoji v barvě — a vedle kreslených ikon menu to bylo vidět.
 * Tady se použije stejná sada jako všude jinde (bi-check-circle-fill).
 */
.agp-vyhody li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .3em;
    width: 15px;
    height: 15px;
    background: var(--agp-zelena-jasna);
    -webkit-mask: var(--i) center / contain no-repeat;
    mask: var(--i) center / contain no-repeat;
}

/* Linka nad kontaktem je KRÁTKÁ, ne přes celý sloupec — v návrhu odděluje,
   ale nerozřezává panel na dvě poloviny. */
.agp-kontakt {
    position: relative;
    margin: 32px 0 0;
    padding-top: 22px;
    color: var(--agp-seda-panel);
    font-size: 13px;
}
.agp-kontakt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 1px;
    background: var(--agp-tmava-linka);
}
.agp-kontakt a { color: var(--agp-zelena-jasna); text-decoration: underline; }

.agp-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 24px;
}

.agp-card {
    width: 100%;
    max-width: 460px;
    background: var(--agp-bila);
    border-radius: 16px;
    padding: 40px;
    box-shadow: var(--agp-stin);
}

.agp-h1 {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 6px;
    text-align: center;
    text-wrap: balance;
}
.agp-sub {
    margin: 0 0 28px;
    color: var(--agp-seda);
    text-align: center;
}

.agp-paticka {
    margin-top: 20px;
    color: var(--agp-seda);
    font-size: 13px;
}
.agp-paticka a, .agp-link { color: var(--agp-modra); }

/* ── Formulář ───────────────────────────────────────────────────────────── */

.agp-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin: 16px 0 6px;
}

.agp-input {
    width: 100%;
    /* 44 px kvůli dotykové ploše — portál se bude otevírat hlavně z telefonu. */
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--agp-linka);
    border-radius: 10px;
    font: inherit;
    background: var(--agp-podklad-pole);
}
.agp-input:focus {
    outline: 2px solid var(--agp-modra);
    outline-offset: 1px;
    background: var(--agp-bila);
}

.agp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-top: 24px;
    padding: 12px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--agp-modra);
    color: var(--agp-bila);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.agp-btn:hover { background: var(--agp-modra-tmava); }
.agp-btn--odkaz { margin-top: 8px; }

/* Přechody drží změnu barvy a zvednutí plynule. Nic se nehýbe, když si o to
   člověk řekne vypnutím animací. */
.agp-btn,
.agp-btn--druhotne,
a.agp-dlazdice-karta,
.agp-akce-polozka,
.agp-lekce-radek {
    transition: background-color .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .15s ease;
}
@media (prefers-reduced-motion: reduce) {
    .agp-btn, .agp-btn--druhotne, a.agp-dlazdice-karta,
    .agp-akce-polozka, .agp-lekce-radek { transition: none; }
    a.agp-dlazdice-karta:hover { transform: none; }
}

.agp-hint {
    margin: 10px 0 0;
    color: var(--agp-seda);
    font-size: 13px;
}
.agp-right { text-align: right; margin: 10px 0 0; font-size: 14px; }
.agp-center { text-align: center; margin: 18px 0 0; font-size: 14px; }
.agp-mb0 { margin: 0; }

.agp-panel-info {
    background: var(--agp-modra-svetla);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 8px;
}

.agp-alert {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
}
.agp-alert--error { background: var(--agp-chyba-svetla); color: var(--agp-chyba); }
.agp-alert--success { background: var(--agp-zelena-svetla); color: var(--agp-zelena); }

/* ── Přihlášená část ────────────────────────────────────────────────────── */

.agp-app-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    background: var(--agp-tmava);
    color: var(--agp-bila);
}

.agp-app-body {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 24px;
}
.agp-app-body .agp-h1, .agp-app-body .agp-sub { text-align: left; }

/* ── Telefon ────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    /* Značkový sloupec se nad kartu jen zkrátí; celý text claimu by na telefonu
       odsunul formulář pod okraj displeje. */
    .agp-split { grid-template-columns: minmax(0, 1fr); }
    .agp-brand { padding: 20px 24px; }
    .agp-claim, .agp-vyhody, .agp-kontakt { display: none; }
    .agp-card { padding: 28px 20px; }
    .agp-h1 { font-size: 24px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Skořápka přihlášeného portálu — boční menu, horní lišta, obsah.
   ════════════════════════════════════════════════════════════════════════════ */

.agp-shell {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    min-height: 100vh;
}

/* ── Boční menu ─────────────────────────────────────────────────────────
   SVĚTLÉ, ne tmavé. Podle návrhu členské sekce: bílé pole oddělené jen
   linkou, 230 px. Tmavé menu zůstává nepřihlášeným stránkám, kde dělá
   značkový sloupec — tam se o barvu opírá celá kompozice. */

.agp-side {
    display: flex;
    flex-direction: column;
    background: var(--agp-bila);
    border-right: 1px solid var(--agp-linka);
    padding: 32px 18px 22px;
}

.agp-side-logo {
    padding: 0 14px 34px;
}

.agp-nav {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.agp-side-dole {
    margin-top: auto;
    padding-top: 20px;
}

.agp-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 44 px na dotyk — portál se otevírá hlavně z telefonu. */
    min-height: 49px;
    padding: 0 16px;
    border-radius: 12px;
    color: var(--agp-seda-tmava);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.agp-nav-item:hover { background: var(--agp-pozadi); color: var(--agp-tmava); }
.agp-nav-item.is-active { background: var(--agp-modra); color: var(--agp-bila); font-weight: 600; }

/* ── Horní lišta ────────────────────────────────────────────────────────── */

.agp-topbar {
    display: flex;
    align-items: center;
    gap: 18px;
    /* Pevná výška, ne odvozená z obsahu — lišta má v návrhu 79 px a drží
       vodorovnou linku s horním okrajem menu. */
    min-height: 79px;
    padding: 0 35px;
    background: var(--agp-bila);
    border-bottom: 1px solid var(--agp-linka);
}

.agp-topbar-kdo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* Avatar je jedno z mála míst, kde v návrhu limetka je — nese značku,
   ne akci. Tmavý text kvůli kontrastu, bílá by na ní nebyla vidět. */
.agp-ini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--agp-limetka);
    color: var(--agp-tmava);
    font-weight: 650;
    font-size: 12px;
}

.agp-kdo-text { display: flex; flex-direction: column; line-height: 1.25; }
.agp-kdo-text strong { font-size: 14px; }
.agp-kdo-text small { color: var(--agp-seda); font-size: 13px; }

.agp-odhlasit {
    display: inline-flex;
    align-items: center;
    /* 44 px je dotyková plocha, ne velikost písma — proto min-height, ne padding. */
    min-height: 44px;
    color: var(--agp-seda);
    text-decoration: none;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 8px;
}
.agp-odhlasit:hover { background: var(--agp-podklad); color: var(--agp-text); }

/* Hamburger se ukazuje až na telefonu, kde se menu zasouvá. */
.agp-burger { display: none; }

/* ── Obsah ──────────────────────────────────────────────────────────────── */

.agp-main-col { display: flex; flex-direction: column; min-width: 0; }

/* Bez stropu šířky: návrh z 13. 10. 2026 chce, aby členské stránky
   využívaly celou dostupnou šířku. Dřív tu bylo 1500 px.
   `none` se musí napsat výslovně — o pár set řádků výš je na stejném
   selektoru starší `max-width: 960px`, které by se jinak prosadilo. */
.agp-app-body {
    max-width: none;
    width: 100%;
    padding: 36px 35px 42px;
}

.agp-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.agp-page-head .agp-h1,
.agp-page-head .agp-sub { text-align: left; margin-bottom: 0; }
.agp-page-head .agp-h1 { margin-bottom: 4px; }

.agp-datum { color: var(--agp-seda); font-size: 14px; white-space: nowrap; }

.agp-h2 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 14px;
}

.agp-sub--vlevo { text-align: left; margin-bottom: 16px; }

/* ── Dlaždice na přehledu ───────────────────────────────────────────────── */

.agp-dlazdice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.agp-dlazdice-karta {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: var(--agp-bila);
    /* Rámeček má karta i v klidu — jinak by neměl hover co obarvit a zvednutí
       by vypadalo, že se karta jen posunula. `box-sizing: border-box` je
       globální, takže se o ty dva pixely nic neroztáhne. */
    border: 1px solid var(--agp-linka);
    border-radius: 14px;
    box-shadow: var(--agp-stin);
    color: inherit;
    text-decoration: none;
}
.agp-dlazdice-karta strong { display: block; font-size: 15px; margin-bottom: 2px; }
.agp-dlazdice-karta span { color: var(--agp-seda); font-size: 14px; }
.agp-dlazdice-karta > div { flex: 1 1 auto; min-width: 0; }

/* Ikona sedí v barevném kolečku, ne volně na bílé — jinak se na kartě ztrácí. */
.agp-dlazdice-karta > .agp-ico { --kolecko: 11px; }

/*
 * Šipka říká „sem jde kliknout".
 *
 * Dlaždice jsou dvojí: na jedny se kliká, druhé jen hlásí stav („objeví se tu,
 * jakmile…"). Vypadaly stejně. Šipka se proto kreslí jen u odkazu — selektor
 * `a.`, ne třída, aby to nešlo omylem napsat k nekliknutelné kartě.
 */
a.agp-dlazdice-karta::after {
    content: '';
    flex: 0 0 8px;
    align-self: center;
    width: 8px;
    height: 13px;
    background: var(--agp-seda);
    -webkit-mask: var(--agp-sipka) center / contain no-repeat;
    mask: var(--agp-sipka) center / contain no-repeat;
}
a.agp-dlazdice-karta:hover::after { background: var(--agp-modra); }

/* Čekající dlaždice je tlumená schválně — ať nevypadá jako hotová funkce. */
.agp-dlazdice-karta.is-ceka { opacity: .72; }
a.agp-dlazdice-karta:hover {
    box-shadow: var(--agp-stin-zvednuty);
    border-color: var(--agp-modra-linka);
    transform: translateY(-4px);
}

/* ── Bloky a mřížka ─────────────────────────────────────────────────────── */

.agp-mrizka {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.agp-blok {
    background: var(--agp-bila);
    /* Návrh karty: velký rádius a linka místo stínu. Stín zůstává jen tam,
       kde se karta zvedá při najetí (dlaždice). */
    border: 1px solid var(--agp-linka);
    border-radius: 22px;
    padding: 24px;
    margin-bottom: 18px;
}
.agp-mrizka .agp-blok { margin-bottom: 0; }

.agp-prazdno { color: var(--agp-seda); margin: 0; }
.agp-prazdno--mala { font-size: 13px; margin-top: 12px; }

/* ── Tabulka ────────────────────────────────────────────────────────────── */

.agp-tab {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.agp-tab th {
    text-align: left;
    font-weight: 600;
    color: var(--agp-seda);
    font-size: 13px;
    padding: 0 12px 8px 0;
    border-bottom: 1px solid var(--agp-linka);
}
.agp-tab td {
    padding: 11px 12px 11px 0;
    border-bottom: 1px solid var(--agp-podklad);
}
.agp-tab tr:last-child td { border-bottom: 0; }

/* ── Dvojice popisek + hodnota ──────────────────────────────────────────── */

.agp-udaje {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}
.agp-udaje small { display: block; color: var(--agp-seda); font-size: 13px; margin-bottom: 2px; }
.agp-udaje strong { font-weight: 600; }
/*
 * Kontakt se na telefonu hlavně maká prstem, ne čte.
 *
 * `mailto:` a `tel:` byly vysoké 18 px — výška řádku. Výjimka pro odkaz v běhu
 * textu tu neplatí, tohle je samostatný údaj na kartě, ne věta.
 */
.agp-udaje a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--agp-modra);
}

/* ── Rychlé akce ────────────────────────────────────────────────────────── */

.agp-akce { display: flex; flex-direction: column; gap: 8px; }

.agp-akce-polozka {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}
.agp-akce-polozka:hover { background: var(--agp-modra-svetla); }
.agp-akce-polozka span { display: flex; flex-direction: column; line-height: 1.3; flex: 1 1 auto; min-width: 0; }
.agp-akce-polozka strong { font-size: 14px; font-weight: 600; }
.agp-akce-polozka small { color: var(--agp-seda); font-size: 13px; }

.agp-akce-polozka .agp-ico { --kolecko: 10px; padding: 8px; }
.agp-akce-polozka .agp-ico::before { width: 18px; height: 18px; }

.agp-akce-polozka::after {
    content: '';
    flex: 0 0 7px;
    width: 7px;
    height: 12px;
    background: var(--agp-seda);
    -webkit-mask: var(--agp-sipka) center / contain no-repeat;
    mask: var(--agp-sipka) center / contain no-repeat;
}
.agp-akce-polozka:hover::after { background: var(--agp-modra); }

/* ── Formulář v profilu ─────────────────────────────────────────────────── */

.agp-form-radek {
    display: grid;
    /* Dva pevné sloupce, ne `auto-fit`: ten na široké stránce nadělal čtyři
       a osamocené krátké pole v nich zabralo čtvrtinu šířky a oříznulo text. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.agp-form .agp-label { margin-top: 0; }
.agp-btn--uzke { width: auto; min-width: 200px; }

/* ── Ikony ──────────────────────────────────────────────────────────────────
   Kreslené v CSS přes maskovaný inline SVG, ne ikonovou sadou: portál by kvůli
   šesti obrázkům stahoval celé Bootstrap Icons.
   ────────────────────────────────────────────────────────────────────────── */

/*
 * Ikona je maska obarvená `background: currentColor`.
 *
 * Z toho plyne past: kolečko pod ikonou NEJDE udělat změnou `background`,
 * tím se přebarví sama kresba a ikona zmizí. Proto se tvar kreslí v `::before`
 * a `background` prvku zůstává volný pro podklad. Kolečko se zapíná tím, že
 * prvek dostane `--kolecko` (poloměr zaoblení).
 */
.agp-ico {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: currentColor;
    -webkit-mask: var(--i) center / contain no-repeat;
    mask: var(--i) center / contain no-repeat;
}

/*
 * Kolečko pod ikonou (dlaždice na přehledu, rychlé akce).
 *
 * Masku je nutné vypnout a kresbu přesunout do `::before`, jinak by podklad
 * kolečka přepsal barvu ikony a zůstalo by prázdné pole.
 */
.agp-dlazdice-karta > .agp-ico,
.agp-akce-polozka .agp-ico,
.agp-novinka > .agp-ico,
.aka-video > .agp-ico--video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    padding: 9px;
    border-radius: var(--kolecko, 11px);
    background: var(--agp-modra-svetla);
    color: var(--agp-modra);
    -webkit-mask: none;
    mask: none;
}
.agp-dlazdice-karta > .agp-ico::before,
.agp-akce-polozka .agp-ico::before,
.agp-novinka > .agp-ico::before,
.aka-video > .agp-ico--video::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: var(--i) center / contain no-repeat;
    mask: var(--i) center / contain no-repeat;
}

/* Čekající dlaždice má kolečko šedé — zelená by slibovala, že je kam kliknout. */
.agp-dlazdice-karta.is-ceka > .agp-ico {
    background: var(--agp-podklad);
    color: var(--agp-seda-tmava);
}

.agp-ico--prehled  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='2'/%3E%3Crect x='14' y='3' width='7' height='7' rx='2'/%3E%3Crect x='3' y='14' width='7' height='7' rx='2'/%3E%3Crect x='14' y='14' width='7' height='7' rx='2'/%3E%3C/svg%3E"); } /* návrh: overview */
.agp-ico--akademie { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5c-3-2-6-2-9-1v15c3-1 6-1 9 1 3-2 6-2 9-1V4c-3-1-6-1-9 1v15'/%3E%3C/svg%3E"); } /* návrh: book */
.agp-ico--kalendar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M7 3v4M17 3v4M3 10h18M7 14h2M13 14h2M7 17h2'/%3E%3C/svg%3E"); } /* návrh: calendar */
.agp-ico--ukoly    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 2 2 3-4M11 6h10M3 13l2 2 3-4M11 13h10M4 20h3M11 20h10'/%3E%3C/svg%3E"); } /* návrh: tasks */
.agp-ico--dotaznik { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9zM14 3v6h6M8 13h8M8 17h6'/%3E%3C/svg%3E"); } /* návrh: file */
.agp-ico--profil   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-2a8 8 0 0 1 16 0v2'/%3E%3C/svg%3E"); } /* návrh: profile */
.agp-ico--otazky   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11a9 9 0 0 1-9 9H3l2-5a9 9 0 1 1 16-4z'/%3E%3C/svg%3E"); } /* návrh: message */
.agp-ico--napoveda { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.7 8.5a2.5 2.5 0 1 1 3.2 3.2c-.9.4-.9 1.1-.9 2M12 17h.01'/%3E%3C/svg%3E"); } /* návrh: help */
.agp-ico--firma    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V3h12v18M15 9h6v12M2 21h20M7 7h1M11 7h1M7 11h1M11 11h1M7 15h1M11 15h1M8 21v-3h3v3M18 13h1M18 17h1'/%3E%3C/svg%3E"); } /* návrh: building */
.agp-ico--cile     { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='m12 12 8-8M16 4h4v4'/%3E%3C/svg%3E"); } /* návrh: target */
.agp-ico--tym      { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-2a8 8 0 0 1 16 0v2'/%3E%3C/svg%3E"); } /* návrh: profile */
.agp-ico--marketing { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13 2.5a1.5 1.5 0 0 1 3 0v11a1.5 1.5 0 0 1-3 0v-.214c-2.162-1.241-4.49-1.843-6.912-2.083l.405 2.712A1 1 0 0 1 5.51 15.1h-.548a1 1 0 0 1-.916-.599l-1.85-3.49-.202-.003A2.014 2.014 0 0 1 0 9V7a2.02 2.02 0 0 1 1.992-2.013 75 75 0 0 0 2.483-.075c3.043-.154 6.148-.849 8.525-2.199zm1 0v11a.5.5 0 0 0 1 0v-11a.5.5 0 0 0-1 0m-1 1.35c-2.344 1.205-5.209 1.842-8 2.033v4.233q.27.015.537.036c2.568.189 5.093.744 7.463 1.993zm-9 6.215v-4.13a95 95 0 0 1-1.992.052A1.02 1.02 0 0 0 1 7v2c0 .55.448 1.002 1.006 1.009A61 61 0 0 1 4 10.065m-.657.975 1.609 3.037.01.024h.548l-.002-.014-.443-2.966a68 68 0 0 0-1.722-.082z'/></svg>"); } /* bi-megaphone */
.agp-ico--prekazky  { --i: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z'/> <path d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/></svg>"); } /* bi-exclamation-triangle */
.agp-ico--nastroje { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5zM20 2v4M18 4h4'/%3E%3C/svg%3E"); } /* návrh: spark */
.agp-ico--zamek    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='11' rx='3'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3M12 14v3'/%3E%3C/svg%3E"); } /* návrh: lock */
.agp-ico--sipka-ven { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M6 6h12v12'/%3E%3C/svg%3E"); } /* návrh: arrow */
.agp-ico--srdce    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 1 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E"); } /* návrh: heart */
.agp-ico--komentar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11a9 9 0 0 1-9 9H3l2-5a9 9 0 1 1 16-4z'/%3E%3C/svg%3E"); } /* návrh: message */
.agp-ico--hotovo   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E"); } /* návrh: check */

/* Dlaždice: ikona ve zvýrazněném kolečku. */

/* ── Telefon ────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    /* Menu se zasouvá — na úzkém displeji by 248 px sloupce ukrojilo obsah. */
    .agp-shell { grid-template-columns: minmax(0, 1fr); }

    .agp-side {
        position: fixed;
        inset: 0 auto 0 0;
        width: 248px;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .2s ease;
    }
    body.agp-menu-otevreno .agp-side { transform: none; }

    .agp-prekryv {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: var(--agp-zaves);
    }

    .agp-burger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 44px;
        height: 44px;
        padding: 0 11px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        cursor: pointer;
    }
    .agp-burger span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: var(--agp-text);
    }

    .agp-mrizka { grid-template-columns: minmax(0, 1fr); }

    /*
        Tabulka se na telefonu rozpadne na karty — vlastní obdoba `ef-cards-mobile`
        z CRM (portál jeho styly nenačítá). Popisek sloupce nese `data-popisek`,
        který dopisuje šablona; bez něj by ze sloupců zbyly holé hodnoty.
    */
    .agp-tab thead { display: none; }
    .agp-tab, .agp-tab tbody, .agp-tab tr, .agp-tab td { display: block; width: 100%; }
    .agp-tab tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--agp-linka);
    }
    .agp-tab tr:last-child { border-bottom: 0; padding-bottom: 0; }
    .agp-tab td {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 3px 0;
        border: 0;
    }
    .agp-tab td::before {
        content: attr(data-popisek);
        color: var(--agp-seda);
        font-size: 13px;
        flex: 0 0 auto;
    }
    .agp-app-body { padding: 20px 16px 40px; }
    .agp-page-head { flex-direction: column; }
    .agp-kdo-text { display: none; }
}

/* ── Vstupní dotazník ───────────────────────────────────────────────────── */

.agp-stav {
    align-self: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--agp-podklad);
    color: var(--agp-seda-tmava);
    font-size: 13px;
    white-space: nowrap;
}
.agp-stav--hotovo { background: var(--agp-zelena-znacka); color: var(--agp-zelena-tmava); font-weight: 600; }

/* Hlavička s údaji firmy nad formulářem. */
.agp-hlavicka-firmy {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 18px;
}
.agp-hlavicka-firmy small { display: block; color: var(--agp-seda); font-size: 13px; margin-bottom: 2px; }
.agp-hlavicka-firmy strong { font-weight: 600; }

.agp-blok .agp-h2 .agp-ico { color: var(--agp-modra); vertical-align: -4px; margin-right: 6px; }

/* Dlouhá odpověď zabere celou šířku — na odstavec dvousloupcová mřížka nestačí. */
.agp-pole--siroke { grid-column: 1 / -1; }

.agp-povinne { color: var(--agp-chyba-sytá); }

.agp-select {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--agp-linka);
    border-radius: 10px;
    font: inherit;
    background: var(--agp-podklad-pole);
}

.agp-form textarea.agp-input { min-height: 88px; resize: vertical; }

.agp-form-paticka {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.agp-form-paticka .agp-prazdno { flex: 1 1 320px; margin: 0; }

.agp-form-tlacitka { display: flex; gap: 10px; }
.agp-form-tlacitka .agp-btn { margin-top: 0; }

/* ── Návod k vyplnění ───────────────────────────────────────────────────
   Pět bodů nad formulářem. Číslování jde z <ol>, ne z textu — kdyby se
   bod přidal nebo ubral, ručně psaná čísla by se rozešla. */
.agp-navod-perex { margin: 0 0 18px; color: var(--agp-seda-tmava); }

.agp-navod-body {
    list-style: none;
    counter-reset: navod;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.agp-navod-body li {
    counter-increment: navod;
    padding-left: 34px;
    position: relative;
    line-height: 1.6;
}
.agp-navod-body li::before {
    content: counter(navod) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--agp-modra);
    font-variant-numeric: tabular-nums;
}
.agp-navod-body strong { display: block; }
.agp-navod-body span { color: var(--agp-seda-tmava); }
.agp-navod-body a { color: var(--agp-modra); word-break: break-all; }

/* Číslo otázky podle zadání. Šedé a lehčí než znění — orientační údaj,
   ne součást otázky; čte se, až když ho někdo hledá („otázka 94“). */
.agp-cislo-otazky {
    color: var(--agp-seda);
    font-weight: 600;
    margin-right: 6px;
    font-variant-numeric: tabular-nums;
}

/* ── Plovoucí „Uložit koncept" ──────────────────────────────────────────
   Dotazník má 178 otázek; tlačítko na jeho konci je po pár minutách
   vyplňování mimo dosah a kdo odejde dřív, přijde o všechno. Visí proto
   po straně formuláře a je vidět pořád.

   Sloupec obsahu má nejvýš 1100 px a stojí vedle postranního menu, takže
   na širokém okně vpravo zbývá místo. Jakmile ho ubude, tlačítko by leželo
   přes otázky — proto níž sjede dolů do rohu a na telefonu se roztáhne přes
   celou šířku, kde o něj nikdo nezakopne palcem. */
.agp-koncept-plovouci {
    position: fixed;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    z-index: 20;
}
.agp-koncept-plovouci .agp-btn {
    margin-top: 0;
    box-shadow: 0 6px 20px rgba(17, 24, 39, .16);
}

@media (max-width: 1399.98px) {
    .agp-koncept-plovouci { top: auto; bottom: 24px; transform: none; }
}
@media (max-width: 575.98px) {
    .agp-koncept-plovouci { left: 16px; right: 16px; bottom: 16px; }
    .agp-koncept-plovouci .agp-btn { width: 100%; }
}

/* „Uložit koncept" je druhá volba, ne rovnocenná — odeslání je ten krok, o který jde. */
.agp-btn--druhotne {
    width: auto;
    min-width: 160px;
    background: var(--agp-bila);
    color: var(--agp-text);
    border: 1px solid var(--agp-linka);
}
.agp-btn--druhotne:hover { background: var(--agp-modra-svetla); border-color: var(--agp-modra-linka); }

/* Ukazatel postupu v dlaždici. */
.agp-postup {
    display: block;
    height: 6px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--agp-linka);
    overflow: hidden;
}
.agp-postup span {
    display: block;
    height: 100%;
    background: var(--agp-modra);
}

/* Přečtení odeslaných odpovědí. */
.agp-odpovedi { display: grid; gap: 16px; }
.agp-odpovedi small { display: block; color: var(--agp-seda); font-size: 13px; margin-bottom: 4px; }
.agp-odpovedi p { margin: 0; }

@media (max-width: 991.98px) {
    .agp-form-radek { grid-template-columns: minmax(0, 1fr); }
    .agp-form-paticka { flex-direction: column; align-items: stretch; }
    .agp-form-tlacitka { flex-direction: column; }
    .agp-form-tlacitka .agp-btn { width: 100%; }
}

/* ── Úkoly ──────────────────────────────────────────────────────────────── */

.agp-ukoly { display: flex; flex-direction: column; }

.agp-ukol {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--agp-podklad);
}
.agp-ukol:first-child { padding-top: 0; }
.agp-ukol:last-child { border-bottom: 0; padding-bottom: 0; }

.agp-ukol-telo { flex: 1 1 auto; min-width: 0; }
.agp-ukol-telo strong { display: block; font-size: 15px; }
.agp-ukol-telo p { margin: 4px 0 0; color: var(--agp-seda); font-size: 14px; }

/* Hotový úkol se jen ztlumí, nemizí — klient má vidět, co už odbavil. */
.agp-ukol.is-hotovy .agp-ukol-telo strong { text-decoration: line-through; color: var(--agp-seda); }

.agp-ukol-znacky { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.agp-znacka {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--agp-podklad);
    color: var(--agp-seda-tmava);
    font-size: 13px;
}
.agp-znacka.is-pozde { background: var(--agp-chyba-svetla); color: var(--agp-chyba); font-weight: 600; }
.agp-znacka.is-hotovo { background: var(--agp-zelena-znacka); color: var(--agp-zelena-tmava); }

.agp-ukol-akce { flex: 0 0 auto; }
.agp-btn--male {
    width: auto;
    min-height: 44px;
    margin-top: 0;
    padding: 8px 14px;
    font-size: 14px;
}

@media (max-width: 575.98px) {
    /* Na úzkém displeji se tlačítko nevejde vedle textu a ukrojilo by název. */
    .agp-ukol { flex-direction: column; gap: 10px; }
    .agp-ukol-akce { width: 100%; }
    .agp-ukol-akce .agp-btn { width: 100%; }
}

/* ── Akademie ───────────────────────────────────────────────────────────── */

.agp-sada-hlavicka {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.agp-sada-hlavicka .agp-h2 { margin-bottom: 2px; }

.agp-postup--siroky { margin: 12px 0 16px; }

.agp-lekce { display: flex; flex-direction: column; }

.agp-lekce-radek {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--agp-podklad);
    text-decoration: none;
    color: inherit;
}
.agp-lekce-radek:hover { background: var(--agp-modra-svetla); }

/* Číslo lekce se po dokončení mění na zelenou fajfku — postup má jít přečíst
   jedním pohledem po sloupci, ne luštěním z popisků. */
.agp-lekce-cislo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--agp-podklad);
    color: var(--agp-seda-tmava);
    font-weight: 700;
    font-size: 14px;
}
.agp-lekce-radek.is-hotova .agp-lekce-cislo { background: var(--agp-zelena); color: var(--agp-bila); }
/* Hotová lekce: číslo vystřídá kreslená ikona, ne znak „✓" z písma. */
.agp-lekce-cislo .agp-ico { width: 17px; height: 17px; flex: 0 0 17px; }

.agp-lekce-telo { flex: 1 1 auto; min-width: 0; }
.agp-lekce-telo strong { display: block; font-size: 15px; }
.agp-lekce-telo small { color: var(--agp-seda); font-size: 13px; }

.agp-drobecek { margin: 0 0 4px; color: var(--agp-seda); font-size: 13px; }
.agp-drobecek a { color: var(--agp-modra); }

/* Obsah lekce přichází z editoru Akademie — ať se v portálu chová jako text,
   ne jako cizí stránka. */
.agp-obsah { line-height: 1.7; }
.agp-obsah :first-child { margin-top: 0; }
.agp-obsah :last-child { margin-bottom: 0; }
.agp-obsah img { max-width: 100%; height: auto; border-radius: 10px; }
.agp-obsah a { color: var(--agp-modra); }
.agp-obsah a:hover { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.agp-obsah table { width: 100%; border-collapse: collapse; }
.agp-obsah td, .agp-obsah th { border: 1px solid var(--agp-linka); padding: 8px; }
.agp-obsah pre { overflow-x: auto; background: var(--agp-podklad); padding: 12px; border-radius: 10px; }

.agp-lekce-paticka {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

@media (max-width: 575.98px) {
    .agp-sada-hlavicka { flex-direction: column; }
    .agp-lekce-paticka { flex-direction: column; align-items: stretch; }
    .agp-lekce-paticka .agp-btn { width: 100%; }
}

/* ── Konzultace ─────────────────────────────────────────────────────────── */

.agp-konzultace {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--agp-podklad);
}
.agp-konzultace:first-child { padding-top: 0; }
.agp-konzultace:last-child { border-bottom: 0; padding-bottom: 0; }

.agp-konzultace-telo { flex: 1 1 auto; min-width: 0; }
.agp-konzultace-telo strong { display: block; font-size: 15px; }

.agp-konzultace-termin {
    display: block;
    margin-top: 2px;
    color: var(--agp-modra-tmava);
    font-weight: 600;
    font-size: 14px;
}

/* Proběhlé termíny se ztlumí — jsou tu kvůli historii, ne kvůli plánování. */
.agp-konzultace.is-minula { opacity: .66; }
.agp-konzultace.is-minula .agp-konzultace-termin { color: var(--agp-seda); font-weight: 400; }

@media (max-width: 575.98px) {
    .agp-konzultace { flex-direction: column; gap: 10px; }
    .agp-konzultace .agp-ukol-akce { width: 100%; }
    .agp-konzultace .agp-btn { width: 100%; }
}

/* ── Tlumený pohyb ──────────────────────────────────────────────────────── */

/*
 * Menu se nezasouvá, ale pořád se otevře a zavře. Nerušíme změnu stavu,
 * jen cestu k ní — proto `transition: none` a ne nulová doba přes celý portál.
 */
@media (prefers-reduced-motion: reduce) {
    .agp-side { transition: none; }
}

/* Tlačítko akce je uvnitř formuláře (POST) — obal nesmí rozbít rozvržení řádku. */
.agp-akce-form { display: contents; }

/* Značka v horní liště — viz `@layout.latte`, jen na úzkém displeji. */
.agp-topbar-znacka { display: none; }

@media (max-width: 991.98px) {
    .agp-topbar-znacka { display: inline-flex; margin-right: auto; }
    .agp-topbar-znacka .agp-znacka-nazev { font-size: 18px; }
    .agp-topbar-znacka .agp-znacka-podpis { display: none; }

    /* Jméno a firma se vedle značky nevejdou; zůstanou iniciály a odhlášení. */
    .agp-kdo-text { display: none; }
}

/* ── Odpověď na pozvánku na setkání ────────────────────────────────
   Dvě malá tlačítka vedle sebe. Odpověď jde kdykoli změnit, takže se kreslí
   obě i po odpovědi; zvolená je zvýrazněná, druhá tlumená. */
.agp-btn--male.is-aktivni { box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25); }

/* ── Detail setkání v portálu ──────────────────────────────────────── */
.agp-odkaz-setkani { color: inherit; text-decoration: none; }
.agp-odkaz-setkani:hover { text-decoration: underline; }
.agp-zpet {
    display: inline-block;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--agp-seda, #6b7280);
    text-decoration: none;
}

.agp-popis-text { color: #374151; }

.agp-chyba-blok {
    padding: 10px 12px;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    margin-bottom: 10px;
}

/* ── Úkoly: tabulka a panel ─────────────────────────────────────────────
 *
 * Portál nemá Bootstrap ani Lattice, takže tabulka i panel stojí na vlastních
 * stylech. Tabulka se na telefonu rozpadne na karty sdíleným `.agp-tab`
 * pravidlem výš — proto `data-popisek` u každé buňky.
 */

/* Ikony navíc proti menu. Portál je kreslí maskou, ne písmem. */
.agp-ico--plus     { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } /* návrh: plus */
/* Zvonek a šipka dolů — potřebuje je hlavička podle návrhu. */
.agp-ico--zvonek   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4'/%3E%3C/svg%3E"); } /* návrh: bell */
.agp-ico--chevron  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); } /* návrh: chevron */
.agp-ico--hledat   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E"); } /* návrh: search */
.agp-ico--tools    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 6a5 5 0 0 0-6 6L3 17a2.8 2.8 0 0 0 4 4l5-5a5 5 0 0 0 6-6l-3 3-4-4 3-3Z'/%3E%3C/svg%3E"); } /* návrh: tools */
.agp-ico--info     { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E"); } /* návrh: info */
.agp-ico--zavrit   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 6 12 12M6 18 18 6'/%3E%3C/svg%3E"); } /* návrh: x */

/* Rámeček se zeleným pruhem nahoře — podle grafického návrhu. */
.agu-ram { padding: 0; overflow: hidden; }

.agu-hlava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* Hlavička je BÍLÁ, jako v návrhu. Modrý pruh přes celou kartu z ní
       dělal druhou lištu a bral pozornost tabulce, kvůli které sem člověk
       chodí. Modrá zůstala jen na tlačítku. */
    padding: 18px 20px 4px;
}
.agu-hlava-nadpis {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--agp-seda);
}
.agu-hlava-nadpis .agp-ico { width: 16px; height: 16px; flex-basis: 16px; }

.agu-btn-novy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border: 0;
    /* Pilulka, ne obdélník — sjednoceno s ostatními tlačítky návrhu. */
    border-radius: 999px;
    background: var(--agp-modra);
    color: var(--agp-bila);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.agu-btn-novy:hover { background: var(--agp-modra-tmava); }

.agu-ovladani {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 20px 0;
}

.agu-zalozky { display: flex; gap: 6px; flex-wrap: wrap; }

.agu-zalozka {
    min-height: 40px;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--agp-seda-tmava);
    font-size: 14px;
    cursor: pointer;
}
.agu-zalozka:hover { background: var(--agp-podklad); }
.agu-zalozka.is-aktivni {
    background: var(--agp-modra-znacka);
    color: var(--agp-modra-tmava);
    font-weight: 600;
}

.agu-hledani { position: relative; display: flex; align-items: center; }
.agu-hledani .agp-ico { position: absolute; left: 12px; color: var(--agp-seda); pointer-events: none; }
.agu-hledani input {
    min-height: 40px;
    width: 260px;
    max-width: 100%;
    padding: 8px 12px 8px 40px;
    border: 1px solid var(--agp-linka);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
}

.agu-tabulka-ram { padding: 10px 20px 0; }
.agu-tabulka th, .agu-tabulka td { padding-left: 0; }
.agu-tabulka .agu-sl-stav { width: 36px; }

/* Hotový úkol se jen ztlumí, nemizí — klient má vidět, co už odbavil. */
.agu-tabulka tr.is-hotovy .agu-nazev { text-decoration: line-through; color: var(--agp-seda); }

.agu-nazev {
    padding: 0;
    border: 0;
    background: none;
    color: var(--agp-modra);
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}

.agu-stavy { display: flex; gap: 6px; flex-wrap: wrap; }
.agp-znacka.is-otevreny { background: var(--agp-modra-znacka); color: var(--agp-modra-tmava); }

.agu-komentaru {
    padding: 0;
    border: 0;
    background: none;
    color: var(--agp-modra);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.agu-prazdno { padding: 16px 0 0; }

.agu-pata {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 20px;
    color: var(--agp-seda);
    font-size: 13px;
}

/* ── Panel detailu ──
   Vyjíždí zprava. Není to `<dialog>`: ten by si vynutil modální chování
   a klient má mít tabulku za panelem pořád vidět. */
.agu-panel-kryt {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--agp-zaves);
}

/* `display: flex` níž by přebilo `[hidden]` — bez tohohle je panel vidět hned
   po načtení stránky. Stejná past jako u každého skrývaného flex prvku. */
.agu-panel[hidden], .agu-panel-kryt[hidden] { display: none; }

.agu-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    display: flex;
    flex-direction: column;
    width: min(520px, 100%);
    background: var(--agp-bila);
    box-shadow: var(--agp-stin-zvednuty);
}

.agu-poznamka {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 16px;
    color: var(--agp-seda);
    font-size: 13px;
}

/* Tabulka se rozpadá na karty už pod 992 px (sdílené pravidlo `.agp-tab` výš),
   takže se ve stejnou chvíli musí přizpůsobit i ovládání nad ní. */
@media (max-width: 991.98px) {
    .agu-hlava, .agu-ovladani, .agu-tabulka-ram, .agu-pata { padding-left: 16px; padding-right: 16px; }
    .agu-hledani input { width: 100%; }
    .agu-ovladani { flex-direction: column; align-items: stretch; }
    /* V kartě je zaškrtávátko řádek jako každý jiný — pevná šířka by ho ořízla. */
    .agu-tabulka .agu-sl-stav { width: auto; }
}

@media (max-width: 575.98px) {
    /* Panel na telefonu zabere celou šířku — na užším proužku se nedá číst. */
    .agu-panel { width: 100%; }
}

/* ── Vyhledávání firem ──────────────────────────────────────────────────
   Přepínač trhů je čtveřice rovnoměrných polí přes celou šířku — tak to má
   návrh; vybraný je modrý. Jsou to odkazy, ne tlačítka: volba se drží
   v adrese, aby šel odkaz na firmu poslat i s tím, kde se hledala. */
.agf-zeme { margin-bottom: 16px; }
.agf-zeme .agp-label { display: block; margin-bottom: 8px; }

.agf-zeme-volby {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--agp-linka);
    border-radius: 12px;
    overflow: hidden;
}
.agf-zeme-volba {
    padding: 12px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--agp-seda-tmava);
    text-decoration: none;
    background: var(--agp-bila);
    border-right: 1px solid var(--agp-linka);
}
.agf-zeme-volba:last-child { border-right: 0; }
.agf-zeme-volba:hover { background: var(--agp-modra-svetla); color: var(--agp-tmava); }
.agf-zeme-volba.is-aktivni { background: var(--agp-modra); color: var(--agp-bila); }

.agf-radek { display: flex; gap: 12px; align-items: flex-start; }
.agf-pole { position: relative; flex: 1 1 auto; min-width: 0; }
.agf-radek .agp-btn { width: auto; min-width: 128px; margin-top: 0; }

/* Našeptávač leží NAD obsahem, ne v toku — jinak by při psaní poskakoval
   zbytek stránky. */
.agf-naseptavac {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
    background: var(--agp-bila);
    border: 1px solid var(--agp-linka);
    border-radius: 12px;
    box-shadow: var(--agp-stin-zvednuty);
}
.agf-naseptavac-polozka {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    font: inherit;
}
.agf-naseptavac-polozka:hover { background: var(--agp-modra-svetla); }
.agf-naseptavac-polozka strong { display: block; font-size: 15px; }
.agf-naseptavac-polozka span { color: var(--agp-seda); font-size: 13px; }
.agf-naseptavac-prazdno { padding: 10px 12px; color: var(--agp-seda); font-size: 14px; }

/* ── Detail firmy ─────────────────────────────────────────────────────── */
.agf-identita {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--agp-linka);
    font-size: 14px;
    color: var(--agp-seda-tmava);
}
.agf-dobre { color: var(--agp-zelena); }
.agf-varovani { color: var(--agp-chyba); font-weight: 600; }

.agf-mrizka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.agf-podnadpis { font-size: 15px; margin: 0 0 10px; }

.agf-udaje { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.agf-udaje dt { color: var(--agp-seda); }
.agf-udaje dd { margin: 0; }

.agf-osoby { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.agf-osoby span { display: block; color: var(--agp-seda); font-size: 13px; }

.agf-akce { white-space: nowrap; }
.agf-zapomen { margin-left: 12px; color: var(--agp-seda); text-decoration: none; font-size: 18px; }
.agf-zapomen:hover { color: var(--agp-chyba); }

@media (max-width: 991.98px) {
    .agf-mrizka { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .agf-radek { flex-direction: column; }
    .agf-radek .agp-btn { width: 100%; }
}

/* ── Hlavička: hledání, zvonek, uživatelské menu ────────────────────────
   Hodnoty jsou odečtené z návrhu členské sekce, ne odhadnuté. */

.agp-hledani { max-width: 520px; width: 100%; margin-right: 20px; }
.agp-hledani button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 15px;
    background: var(--agp-pozadi);
    border: 1px solid var(--agp-linka);
    border-radius: 11px;
    text-align: left;
    font: inherit;
    font-size: 12px;
    color: var(--agp-seda);
    cursor: pointer;
}
.agp-hledani button:hover { border-color: var(--agp-modra-linka); }
.agp-hledani span { flex: 1 1 auto; }
.agp-hledani kbd {
    font: inherit;
    font-size: 11px;
    padding: 2px 6px;
    border: 1px solid var(--agp-linka);
    border-radius: 6px;
    background: var(--agp-bila);
    color: var(--agp-seda);
}

.agp-zvonek {
    position: relative;
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    flex: none;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--agp-text);
}
/* Tečka nepřečtených. Bílý lem ji odděluje od ikony pod ní. */
.agp-zvonek-tecka {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 6px;
    height: 6px;
    background: var(--agp-modra);
    border: 1px solid var(--agp-bila);
    border-radius: 50%;
}

.agp-ucet {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    color: inherit;
    font: inherit;
}
.agp-ucet strong { font-size: 12px; font-weight: 600; }
/* Návrh má JEDNU šipku (doprava) a otáčí ji — viz `.root-account-button>.icon`. */
.agp-ucet .agp-ico--chevron { color: var(--agp-seda); transform: rotate(90deg); }

/* ── Nabídky v hlavičce ─────────────────────────────────────────────────
   Jsou to <dialog>: Escape, klik mimo i návrat fokusu umí prohlížeč sám
   a nemusíme to psát. */
.agp-dialog {
    padding: 0;
    border: 1px solid var(--agp-linka);
    border-radius: 22px;
    width: min(620px, calc(100vw - 28px));
    max-height: calc(100dvh - 32px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .13);
    color: var(--agp-text);
}
.agp-dialog::backdrop { background: rgba(17, 24, 39, .35); }

.agp-dialog-hlava {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    border-bottom: 1px solid var(--agp-linka);
}
.agp-dialog-hlava h2 { margin: 0; font-size: 18px; }
.agp-dialog-zavrit {
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--agp-seda);
}
.agp-dialog-zavrit:hover { color: var(--agp-text); }
.agp-dialog-telo { padding: 25px; }

.agp-dialog-polozka {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--agp-linka);
    font-size: 13px;
    color: inherit;
    text-decoration: none;
}
.agp-dialog-polozka:last-child { border-bottom: 0; }
.agp-dialog-polozka:hover { color: var(--agp-modra); }
.agp-dialog-telo .agp-input { margin-bottom: 8px; }

@media (max-width: 767.98px) {
    /* Na úzkém okně se hledání do lišty nevejde vedle jména firmy. */
    .agp-hledani { display: none; }
    .agp-ucet strong { display: none; }
}

/* ── Ikony doplněné pro Akademii ───────────────────────────────────────── */
.agp-ico--kniha    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5c-3-2-6-2-9-1v15c3-1 6-1 9 1 3-2 6-2 9-1V4c-3-1-6-1-9 1v15'/%3E%3C/svg%3E"); } /* návrh: book */
.agp-ico--prehrat  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 11 7-11 7z'/%3E%3C/svg%3E"); } /* návrh: play */
.agp-ico--hodiny   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); } /* návrh: clock */
.agp-ico--video    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='13' height='14' rx='3'/%3E%3Cpath d='m16 10 5-3v10l-5-3'/%3E%3C/svg%3E"); } /* návrh: video */

/* ── Drobnosti, které používá víc stránek ──────────────────────────────── */
.agp-sub--mala    { font-size: 14px; }
.agp-nadtitulek {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--agp-modra);
}

/* ══ AKADEMIE ═══════════════════════════════════════════════════════════
   Tři sloupce podle návrhu členské sekce: učebny, lekce, článek.
   Sloupce mají pevnou šířku, aby se článek nerozpadl na šířku okna; na
   užším okně se skládají pod sebe. */
.aka-mrizka {
    display: grid;
    grid-template-columns: 240px 280px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.aka-mrizka--uvod { grid-template-columns: 240px minmax(0, 1fr); }

@media (max-width: 1200px) {
    .aka-mrizka,
    .aka-mrizka--uvod { grid-template-columns: 240px minmax(0, 1fr); }
    /* Článek pod dvojici sloupců, ať zůstane čitelně široký. */
    .aka-clanek { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
    .aka-mrizka,
    .aka-mrizka--uvod { grid-template-columns: minmax(0, 1fr); }
}

/* ── Sloupec 1: učebny ─────────────────────────────────────────────────── */
/* Užší odsazení než ostatní karty: jinak na název učebny zbyde 64 px
   a „Onboarding" se zlomí uprostřed slova. */
.aka-ucebny { padding: 18px; }
.aka-ucebny-seznam { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.aka-ucebna {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    color: var(--agp-tmava);
    text-decoration: none;
    font-size: 14px;
    transition: background-color .15s ease;
}
.aka-ucebna:hover    { background: var(--agp-jemna); }
.aka-ucebna.is-aktivni { background: var(--agp-jemna); font-weight: 700; }
.aka-ucebna--uvod .agp-ico { color: var(--agp-modra); }
.aka-ucebna.is-aktivni .aka-ucebna-nazev { color: var(--agp-modra); }
.aka-ucebna-nazev    {
    flex: 1;
    min-width: 0;
    /* Dlouhý název se zalomí na druhý řádek, jako v návrhu („Řízení firmy").
       Uříznout ho třemi tečkami nejde — učebny se jmenují podobně a zákazník
       by je od sebe nerozeznal. */
    overflow-wrap: break-word;
    line-height: 1.3;
}
.aka-ucebna-procenta { font-size: 13px; color: var(--agp-seda); font-variant-numeric: tabular-nums; }

/* Čísla učeben. Pětice barev se opakuje dokola — viz komentář v šabloně. */
.aka-ucebna-cislo {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 800;
}
.aka-ucebna-cislo--1 { background: var(--agp-modra);  color: #fff; }
.aka-ucebna-cislo--2 { background: #d1f7e4;           color: #0b6b45; }
.aka-ucebna-cislo--3 { background: #e4f8a8;           color: #41560a; }
.aka-ucebna-cislo--4 { background: #ffe2cc;           color: #8a4a12; }
.aka-ucebna-cislo--5 { background: #eadcfb;           color: #5b2e9d; }

.aka-souhrn { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--agp-linka); }
.aka-souhrn-popisek {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--agp-seda);
}
.aka-souhrn-cislo  { margin: 2px 0 10px; font-size: 34px; font-weight: 800; line-height: 1; }
.aka-souhrn-radek  { margin: 6px 0 0; font-size: 13px; color: var(--agp-seda); font-variant-numeric: tabular-nums; }

/* ── Sloupec 2: lekce v sekcích ────────────────────────────────────────── */
.aka-lekce-postup {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 8px 0 16px;
    font-size: 13px;
    color: var(--agp-seda);
}
.aka-lekce-postup strong { font-size: 16px; color: var(--agp-modra); }

.aka-sekce { border-top: 1px solid var(--agp-linka); }
.aka-sekce-hlavicka {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 2px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
}
.aka-sekce-hlavicka::-webkit-details-marker { display: none; }
.aka-sekce-nazev { flex: 1; min-width: 0; font-weight: 700; }
.aka-sekce-pocet { font-size: 12px; color: var(--agp-seda); }
/* Šipka se otáčí podle stavu <details> — bez JS. */
.aka-sekce-hlavicka .agp-ico--chevron {
    width: 14px; height: 14px; flex-basis: 14px;
    color: var(--agp-seda);
    transition: transform .15s ease;
}
.aka-sekce[open] .aka-sekce-hlavicka .agp-ico--chevron { transform: rotate(-90deg); }
.aka-sekce-telo { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; }

.aka-lekce-radek {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    color: var(--agp-tmava);
    text-decoration: none;
    transition: background-color .15s ease;
}
.aka-lekce-radek:hover        { background: var(--agp-jemna); }
.aka-lekce-radek.is-otevrena  { background: var(--agp-jemna); }
.aka-lekce-radek.is-otevrena strong { color: var(--agp-modra); }
.aka-lekce-radek.is-hotova .agp-ico--hotovo { color: #16a34a; }
.aka-lekce-radek .agp-ico     { width: 16px; height: 16px; flex-basis: 16px; color: var(--agp-seda); }
.aka-lekce-telo               { display: flex; flex-direction: column; min-width: 0; }
.aka-lekce-telo strong        { font-size: 14px; font-weight: 600; }
.aka-lekce-telo small         { font-size: 12px; color: var(--agp-seda); }

/* ── Sloupec 3: článek lekce ───────────────────────────────────────────── */
.aka-clanek-hlavicka {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.aka-clanek-perex { margin: 0 0 18px; font-size: 16px; color: var(--agp-seda); }
/* Odškrtnutí je doplňková akce, ne hlavní tlačítko stránky — v návrhu je
   lehké, s odsazenou ikonou. */
.aka-clanek-hlavicka .agp-btn { display: inline-flex; align-items: center; gap: 8px; }
.aka-clanek-hlavicka .agp-btn .agp-ico { width: 15px; height: 15px; flex-basis: 15px; }
.aka-clanek .agp-drobecek a { color: var(--agp-seda); text-decoration: none; }
.aka-clanek .agp-drobecek a:hover { color: var(--agp-modra); }

/* Plocha videa. Odkaz, ne <iframe> — viz komentář v šabloně. */
.aka-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    padding: 44px 20px;
    border: 1px solid var(--agp-linka);
    border-radius: 17px;
    background: var(--agp-pozadi);
    text-align: center;
}
/* Větší kolečko než jinde — plocha videa je prázdná a ikona ji drží. */
.aka-video > .agp-ico--video { --kolecko: 16px; padding: 14px; background: #fff; }
.aka-video > .agp-ico--video::before { width: 26px; height: 26px; }
.aka-video-nadpis { margin: 0; font-weight: 700; }
.aka-video-delka  {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: var(--agp-seda);
}
.aka-video-delka .agp-ico { width: 14px; height: 14px; flex-basis: 14px; }

/* Materiály lekce (zadání 15.2). */
.aka-materialy { margin: 0 0 24px; }
.aka-materialy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aka-materialy li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.aka-materialy small { font-size: 14px; color: var(--agp-muted, #667085); }

/* ══ KALENDÁŘ ═══════════════════════════════════════════════════════════
   Záložky Kalendář / Archiv akcí, uvnitř přepínač Seznam / Měsíc.
   Všechno jsou odkazy, ne JS: pohled má jít poslat adresou. */
.kal-zalozky { display: flex; gap: 10px; margin-bottom: 20px; }
.kal-zalozka {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid var(--agp-linka);
    border-radius: 999px;
    background: #fff;
    color: var(--agp-tmava);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.kal-zalozka:hover { border-color: #aebde4; }
.kal-zalozka.is-aktivni { background: var(--agp-modra); border-color: var(--agp-modra); color: #fff; }
.kal-zalozka .agp-ico { width: 17px; height: 17px; flex-basis: 17px; }

.kal-prepinac { display: inline-flex; gap: 4px; }
.kal-prepinac-volba {
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--agp-seda);
    text-decoration: none;
}
.kal-prepinac-volba:hover { background: var(--agp-pozadi); }
.kal-prepinac-volba.is-aktivni { background: var(--agp-jemna); color: var(--agp-modra); font-weight: 700; }

/* ── Blok jedné události ───────────────────────────────────────────────── */

.kal-udalost-cas   { font-size: 13px; font-weight: 700; color: var(--agp-modra); font-variant-numeric: tabular-nums; }
.kal-udalost-nazev { font-size: 15px; font-weight: 600; }
.kal-udalost-typ   { font-size: 12px; color: var(--agp-seda); }

/* ── Seznam ────────────────────────────────────────────────────────────── */
.kal-seznam { display: flex; flex-direction: column; gap: 12px; }
.kal-seznam-radek {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}
.kal-seznam-datum { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
    .kal-seznam-radek { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ── Mřížka měsíce ─────────────────────────────────────────────────────── */
.kal-mesic-ovladani { display: flex; align-items: center; gap: 10px; }
/* `.agp-btn` je stavěné na plnou šířku formuláře; v liště musí zůstat úzké. */
.kal-mesic-ovladani .agp-btn { width: auto; flex: 0 0 auto; }
.kal-mesic-ovladani .agp-h2 { margin: 0 0 0 6px; }
.kal-sipka {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--agp-linka);
    border-radius: 10px;
    color: var(--agp-tmava);
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
}
.kal-sipka:hover { border-color: #aebde4; }

/* Mřížka roluje uvnitř svého rámečku, ne celá stránka — viz pravidlo
   o srovnávacích tabulkách v docs/prestavba/PLAN.md. */
.kal-mrizka-obal { overflow-x: auto; }
.kal-mrizka {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    table-layout: fixed;
}
.kal-mrizka th {
    padding: 8px;
    border-bottom: 1px solid var(--agp-linka);
    font-size: 12px;
    font-weight: 700;
    color: var(--agp-seda);
    text-align: left;
}
.kal-mrizka td {
    height: 110px;
    padding: 6px;
    border: 1px solid var(--agp-linka);
    vertical-align: top;
}
.kal-mrizka td.is-mimo { background: var(--agp-pozadi); }
.kal-mrizka td.is-mimo .kal-den-cislo { color: var(--agp-seda); opacity: .55; }
.kal-mrizka td.is-dnes { box-shadow: inset 0 0 0 2px var(--agp-modra); }
.kal-den-cislo {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.kal-udalost--mala { padding: 5px 7px; border-radius: 0 8px 8px 0; margin-bottom: 4px; }
.kal-udalost--mala .kal-udalost-cas   { font-size: 11px; }
.kal-udalost--mala .kal-udalost-nazev { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }

/* ══ PŘEHLED ════════════════════════════════════════════════════════════
   Podle návrhu členské sekce: datum pod pozdravem, tři dlaždice,
   doporučený krok vedle rychlých akcí, dole novinky z Akademie. */
.agp-page-head--prehled { display: block; }
.agp-page-head--prehled .agp-datum {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--agp-seda);
}
.agp-page-head--prehled .agp-datum .agp-ico { width: 16px; height: 16px; flex-basis: 16px; }

/* Doporučený krok vlevo (širší), rychlé akce vpravo. */
.agp-mrizka--prehled { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 991.98px) {
    .agp-mrizka--prehled { grid-template-columns: minmax(0, 1fr); }
}

/* Podbarvené pole uvnitř karty — v návrhu je krok „karta v kartě". */
.agp-krok {
    margin-top: 14px;
    padding: 28px;
    border-radius: 17px;
    background: var(--agp-jemna);
}
.agp-krok-nadpis { margin: 0 0 12px; font-size: 28px; font-weight: 800; letter-spacing: -.5px; }
.agp-krok-text   { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--agp-seda); }
.agp-krok-akce   { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.agp-krok-akce .agp-btn { width: auto; flex: 0 0 auto; }
.agp-krok-pozdeji { font-size: 14px; color: var(--agp-modra); text-decoration: none; }
.agp-krok-pozdeji:hover { text-decoration: underline; }

/* ── Novinky z Akademie ────────────────────────────────────────────────── */
.agp-blok-hlavicka {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.agp-odkaz-vic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--agp-modra);
    text-decoration: none;
}
.agp-odkaz-vic:hover { text-decoration: underline; }
.agp-odkaz-vic .agp-ico { width: 13px; height: 13px; flex-basis: 13px; }

.agp-novinky { display: flex; flex-direction: column; margin-top: 8px; }
.agp-novinka {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 8px;
    border-top: 1px solid var(--agp-linka);
    color: var(--agp-tmava);
    text-decoration: none;
    transition: background-color .15s ease;
}
.agp-novinka:first-child { border-top: 0; }
.agp-novinka:hover { background: var(--agp-pozadi); }
.agp-novinka-telo   { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.agp-novinka-telo strong { font-size: 15px; font-weight: 600; }
.agp-novinka-telo small  { font-size: 13px; color: var(--agp-seda); }
.agp-novinka-datum  { font-size: 13px; color: var(--agp-seda); white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 575.98px) {
    .agp-novinka { align-items: flex-start; flex-wrap: wrap; }
    .agp-novinka-datum { width: 100%; padding-left: 50px; }
    .agp-krok { padding: 20px; }
    .agp-krok-nadpis { font-size: 22px; }
}

/* ── Komunitní zeď („Úvod" Akademie) ─────────────────────────────────────
   Celá zeď je JEDEN box, jako v návrhu — příspěvky uvnitř se oddělují
   linkou, ne vlastními kartami. */
.aka-komunita { display: flex; flex-direction: column; gap: 18px; }
.aka-prispevek + .aka-prispevek { padding-top: 18px; border-top: 1px solid var(--agp-linka); }
.aka-prazdno-akce { display: flex; }
.aka-prazdno-akce .agp-btn { width: auto; flex: 0 0 auto; }

.aka-filtry { display: flex; flex-wrap: wrap; gap: 8px; }
.aka-filtr {
    padding: 8px 18px;
    border: 1px solid var(--agp-linka);
    border-radius: 999px;
    background: #fff;
    color: var(--agp-tmava);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s ease;
}
.aka-filtr:hover { border-color: #aebde4; }
.aka-filtr.is-aktivni { background: var(--agp-modra); border-color: var(--agp-modra); color: #fff; font-weight: 600; }

.aka-prispevek { display: flex; gap: 22px; align-items: flex-start; }

/* Obálka drží poměr 2:1 (1400 × 700) i na úzkém okně — upřesnění zadavatele
   z 13. 10. 2026. Proto `aspect-ratio`, ne pevná výška. */
.aka-obalka {
    width: 220px;
    flex: 0 0 220px;
    aspect-ratio: 2 / 1;
    border-radius: 14px;
    /* Rozepsané vlastnosti, ne zkratka `background:`. Zkratka s `var()`
       uvnitř se vyhodnocuje až při výpočtu hodnoty, a když se v ní něco
       nepovede, spadnou VŠECHNY její části na výchozí — `background-size`
       skončilo na `auto` a z obálky byl vidět jen levý horní roh. */
    background-color: var(--agp-jemna);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
/* Bez nahrané obálky se vysází název — prázdné pole by vypadalo jako chyba. */
.aka-obalka--bez {
    display: grid;
    place-items: center;
    padding: 14px;
    text-align: center;
}
.aka-obalka-text {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--agp-modra-tmava, var(--agp-modra));
    overflow-wrap: anywhere;
}

.aka-prispevek-telo { flex: 1; min-width: 0; }
.aka-prispevek-hlavicka { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.aka-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--agp-limetka, #c7f464);
    color: var(--agp-tmava);
    font-size: 11px;
    font-weight: 700;
}
.aka-autor { display: flex; flex-direction: column; line-height: 1.3; }
.aka-autor strong { font-size: 14px; font-weight: 600; }
.aka-autor small  { font-size: 12px; color: var(--agp-seda); }

.aka-prispevek-nazev { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.aka-prispevek-text  { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--agp-seda); }

.aka-prispevek-paticka { display: flex; align-items: center; gap: 18px; }
.aka-pocet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--agp-seda);
    font-variant-numeric: tabular-nums;
}
.aka-pocet .agp-ico { width: 15px; height: 15px; flex-basis: 15px; }
.aka-cteni { margin-left: auto; font-size: 12px; color: var(--agp-seda); }

@media (max-width: 767.98px) {
    .aka-prispevek { flex-direction: column; }
    .aka-obalka { width: 100%; flex-basis: auto; }
}
/* Obálka nad textem v otevřeném příspěvku — přes celou šířku článku. */
.aka-obalka--siroka { width: 100%; flex-basis: auto; margin: 4px 0 20px; }

/* ── Pohled Týden ──────────────────────────────────────────────────────────
   Hodnoty jsou z návrhu doslova. Řádek 61 px musí sedět s konstantou
   `PortalUdalosti::TYDEN_RADEK` — podle ní se počítá posazení události. */
.kal-tyden { min-width: 760px; }
.kal-tyden-hlava {
    display: grid;
    grid-template-columns: 42px repeat(5, 1fr);
    text-align: center;
    border: 1px solid var(--agp-linka);
    border-radius: 12px 12px 0 0;
    background: #fafbfc;
}
.kal-tyden-hlava strong {
    padding: 15px 4px;
    border-left: 1px solid var(--agp-linka);
    font-size: 12px;
    font-weight: 600;
}
.kal-tyden-hlava strong.is-dnes { color: var(--agp-modra); }
.kal-tyden-hlava small {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 400;
    color: var(--agp-seda);
}

.kal-tyden-telo {
    display: grid;
    grid-template-columns: 42px repeat(5, 1fr);
    border: 1px solid var(--agp-linka);
    border-top: 0;
    min-height: 610px;
}
.kal-tyden-osa {
    display: flex;
    flex-direction: column;
    padding-right: 8px;
    text-align: right;
    font-size: 9px;
    color: var(--agp-seda);
}
.kal-tyden-osa span { height: 61px; }

/* Hodinové linky kreslí pozadí, ne 50 prázdných buněk. */
.kal-tyden-den {
    position: relative;
    border-left: 1px solid var(--agp-linka);
    background: repeating-linear-gradient(
        to bottom,
        transparent 0, transparent 60px,
        var(--agp-linka) 60px, var(--agp-linka) 61px
    );
}
.kal-tyden-slot { position: absolute; left: 3px; right: 3px; }

/* Limetkový štítek „V ceně programu" podle návrhu. */
.agp-znacka--limetka { background: var(--agp-limetka, #c7f464); color: var(--agp-tmava); }

/* ── Dialog příspěvku („Číst více") ────────────────────────────────────── */
.aka-dialog-podnadpis { margin: 6px 0 0; font-size: 13px; color: var(--agp-seda); }
/* Obálka se do dialogu nedává — na malé ploše zabere půlku okna a nic
   neříká; v návrhu tam taky není. */
.aka-dialog .agp-dialog-telo { font-size: 15px; line-height: 1.7; }
.aka-dialog .agp-dialog-telo p:last-child { margin-bottom: 0; }

/* ── Detail akce v bočním panelu ───────────────────────────────────────
   Vysouvá se zprava přes celou výšku, jako v návrhu. `<dialog>` se jinak
   staví doprostřed, proto se poloha přepisuje. */
.kal-panel {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(620px, 100vw);
    max-width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
}
/*
 * `display` JEN PRO OTEVŘENÝ PANEL.
 *
 * Prohlížeč zavřený `<dialog>` schovává pravidlem `dialog:not([open])
 * { display: none }`. Autorský předpis ho přebije bez ohledu na specificitu,
 * takže `display: flex` na `.kal-panel` nechal panel viset na stránce pořád.
 */
.kal-panel[open] { display: flex; flex-direction: column; }
.kal-panel .agp-dialog-hlava { flex: 0 0 auto; }

@media (max-width: 575.98px) {
    .kal-panel { width: 100vw; }
}

/* ── Můj profil ────────────────────────────────────────────────────────── */
.agp-mrizka--profil { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 991.98px) {
    .agp-mrizka--profil { grid-template-columns: minmax(0, 1fr); }
}

/* Stavový pruh (dotazník odeslán / rozpracovaný koncept). */
.agp-stav-pruh {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0;
    padding: 16px;
    border-radius: 14px;
    background: var(--agp-jemna);
}
.agp-stav-pruh > .agp-ico { width: 20px; height: 20px; flex-basis: 20px; color: var(--agp-modra); }
.agp-stav-pruh span  { display: flex; flex-direction: column; gap: 3px; }
.agp-stav-pruh small { font-size: 13px; color: var(--agp-seda); }
/* Odeslaný dotazník je limetkový, jako „hotovo" v návrhu. */
.agp-stav-pruh--hotovo { background: #eefbd6; }
.agp-stav-pruh--hotovo > .agp-ico { color: #4a7a0f; }

.agp-hlavni-cil {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--agp-pozadi);
    font-size: 14px;
    line-height: 1.6;
}

.agp-btn--ikona { display: inline-flex; align-items: center; gap: 8px; width: auto; }
.agp-btn--ikona .agp-ico { width: 15px; height: 15px; flex-basis: 15px; }

/* ══ VSTUPNÍ DOTAZNÍK ═══════════════════════════════════════════════════
   Lišta s postupem je PŘIŠPENDLENÁ: dotazník má 178 otázek a tlačítko
   „Uložit koncept" na jeho konci je po pár minutách mimo dosah. */
.agp-dot-lista {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 16px 20px;
    border: 1px solid var(--agp-linka);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(17, 24, 39, .06);
}
.agp-dot-postup { flex: 1 1 320px; min-width: 0; }
.agp-dot-cisla { display: flex; align-items: baseline; gap: 16px; }
.agp-dot-cisla strong { font-size: 20px; font-weight: 800; color: var(--agp-modra); }
.agp-dot-cisla span   { font-size: 13px; color: var(--agp-seda); }
.agp-dot-postup .agp-postup { margin: 8px 0 6px; }
.agp-dot-ulozeno { font-size: 12px; color: var(--agp-seda); }

.agp-dot-tlacitka { display: flex; gap: 10px; flex: 0 0 auto; }
.agp-dot-tlacitka .agp-btn { width: auto; flex: 0 0 auto; }
/* Zablokované finální uložení musí jít poznat, ne jen nejít stisknout. */
.agp-dot-tlacitka .agp-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ── Rozcestník po částech ─────────────────────────────────────────────── */
.agp-dot-navigace {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 18px;
    padding: 16px 20px;
    border: 1px solid var(--agp-linka);
    border-radius: 17px;
    background: #fff;
}
.agp-dot-navigace .agp-label { margin: 0; white-space: nowrap; }
.agp-dot-zbyva { grid-column: 1 / 2; margin: 0; font-size: 13px; color: var(--agp-seda); }
.agp-dot-navigace [data-dot-prvni-nevyplnena] {
    grid-column: 2 / 3;
    justify-self: end;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0;
}

/* Počet vyplněných u nadpisu části. */
.agp-dot-sekce-hlava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.agp-dot-sekce-hlava .agp-h2 { margin: 0; }
.agp-dot-sekce-pocet { font-size: 14px; color: var(--agp-seda); font-variant-numeric: tabular-nums; }

/* ── Historie odpovědí ─────────────────────────────────────────────────── */
.agp-historie-stara { color: var(--agp-seda); }
.agp-historie-stara em { font-style: normal; opacity: .7; }

@media (max-width: 767.98px) {
    .agp-dot-lista { flex-direction: column; align-items: stretch; gap: 14px; }
    .agp-dot-tlacitka .agp-btn { flex: 1 1 auto; }
    .agp-dot-navigace { grid-template-columns: minmax(0, 1fr); }
    .agp-dot-navigace [data-dot-prvni-nevyplnena] { grid-column: 1; justify-self: start; }
}

/* ── Dokumenty: vzhled je ve vygenerovaném ai-guru-dokumenty-navrh.css (aktuální prototyp). */
/* Hláška po nahrání. Návrh má toast; portál vlastní nemá, tak proužek pod obsahem. */
.agdk-hlaska {
    margin-top: 15px;
    padding: 12px 16px;
    border-radius: 11px;
    font-size: 13px;
    background: var(--soft);
    color: var(--dark);
}
.agdk-hlaska.is-chyba { background: #fef2f2; color: #b91c1c; }

/* ── Náhled konzultanta ──────────────────────────────────────────────
   Pruh přes celou šířku, přišpendlený nahoře. Záměrně nepřehlédnutelný:
   konzultant se dívá na cizí účet a nesmí si ho splést se svým. */
.agp-nahled {
    position: sticky;
    top: 0;
    z-index: 1080;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 9px 16px;
    background: #b45309;
    color: #fff;
    font-size: 13px;
    text-align: center;
}
.agp-nahled strong { font-weight: 700; }
.agp-nahled-konec {
    color: #fff;
    text-decoration: underline;
    white-space: nowrap;
}
.agp-nahled-konec:hover { color: #fff; opacity: .85; }