/* ═══════════════════════════════════════════════════════════════════════════
   auth.css – prihlasovacie obrazovky (INTX)
   ───────────────────────────────────────────────────────────────────────────
   Spoločné pre interný systém (/login, /login-2fa) aj pre klientsky portál
   (/portal/login, /portal/registracia, /portal/login-2fa), aby sa priebeh
   prihlásenia nikde vizuálne nerozišiel. Stránky sú samostatné (bez shellu)
   a zámerne NEnačítajú Tabler – na prihlásenie netreba 400 kB frameworku.

   Režim (svetlý/tmavý) sa preberá z voľby užívateľa (localStorage `intx_tema`);
   atribút data-tema nastavuje inline skript v hlavičke stránky.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{
    font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap;
    src:url('/assets/fonts/manrope/manrope-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                  U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
    font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap;
    src:url('/assets/fonts/manrope/manrope-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;
}

/* ── Tokeny ──────────────────────────────────────────────────────────────── */
:root{
    --brand:#12386E; --brand-ink:#0F305F; --on-brand:#fff;
    /* --faint je najsvetlejší text na stránke; #667382 drží 4,84:1 na bielej
       (WCAG 1.4.3 žiada 4,5:1) – svetlejší odtieň by prahom neprešiel. */
    --ink:#101A18; --dim:#5A6572; --faint:#667382;
    --plocha:#FFFFFF; --pole:#F2F5F9; --pole-fokus:#FFFFFF;
    --linka:rgba(16,26,24,.10); --linka-silna:rgba(16,26,24,.16);
    --pozadie:#EAEEF4;
    --zle:#B3261E; --zle-bg:#FBEAE8;
    --dobre:#12714A; --dobre-bg:#E6F4EC;
    --varovanie:#8A5A06; --varovanie-bg:#FDF4E3;
    --r-pole:14px; --r-karta:20px;
    --ziara:rgba(18,56,110,.16);
}
html[data-tema="dark"]{
    --brand:#2E5FA8; --brand-ink:#8FB4E6; --on-brand:#fff;
    --ink:#EEF1F4; --dim:rgba(238,241,244,.68); --faint:rgba(238,241,244,.58);
    --plocha:#171C22; --pole:#111820; --pole-fokus:#0E141B;
    --linka:rgba(255,255,255,.10); --linka-silna:rgba(255,255,255,.18);
    --pozadie:#080C10;
    --zle:#FF8A7A; --zle-bg:rgba(255,138,122,.14);
    --dobre:#7BD88F; --dobre-bg:rgba(123,216,143,.14);
    --varovanie:#F0C05A; --varovanie-bg:rgba(240,192,90,.14);
    --ziara:rgba(46,95,168,.30);
}

/* ── Základ ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
    margin:0;
    font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    font-size:14px; line-height:1.5; color:var(--ink);
    background:radial-gradient(760px 520px at 50% -8%, var(--ziara), transparent 70%), var(--pozadie);
    -webkit-font-smoothing:antialiased;
    font-variant-numeric:tabular-nums;
}

.obal{
    min-height:100%;
    display:flex; align-items:center; justify-content:center;
    padding:32px 20px calc(32px + env(safe-area-inset-bottom,0px));
}
.karta{
    width:100%; max-width:412px;
    background:var(--plocha);
    border:1px solid var(--linka);
    border-radius:var(--r-karta);
    padding:36px 32px 30px;
    box-shadow:0 28px 60px -34px rgba(10,22,44,.45);
}
@media (max-width:420px){ .karta{ padding:28px 22px 24px; border-radius:16px } }

/* Logo je pozadie, nie <img>: dve <img> verzie (tmavá/svetlá) by sa stiahli
   obe, aj tá skrytá cez display:none. Takto sa načíta len tá, ktorej pravidlo
   naozaj platí. Obe verzie majú iný pomer strán, preto `contain` + zarovnanie
   vľavo – šírka je nastavená podľa širšej z nich. */
.znacka{
    display:block; width:146px; height:30px; margin-bottom:26px;
    background:url('/assets/img/logo.png') left center / contain no-repeat;
}
/* logo_biele.png má okolo kresby 60 px priehľadného okraja (kresba 904×192
   v ploche 1024×312), kým logo.png je orezané natesno. Pri rovnakej výške
   rámčeka by preto biela verzia vyšla opticky menšia a odsadená od ľavého kraja.
   Prepočet na výšku rámčeka 30 px:
     výška obrázka = 30 × 312/192       = 48,75 px  → kresba vyjde presne 30 px
     posun vľavo   = 48,75 × 60/312     =  9,375 px → zruší priehľadný okraj
   Pri zmene výšky .znacka prepočítaj obe hodnoty. */
html[data-tema="dark"] .znacka{
    background-image:url('/assets/img/logo_biele.png');
    background-size:auto 48.75px;
    background-position:-9.375px center;
}

h1{ margin:0; font-size:29px; font-weight:800; letter-spacing:-.045em; line-height:1.15 }
.podnadpis{ margin:7px 0 26px; font-size:13.5px; color:var(--dim) }

/* Odznak so zámkom (druhý krok overenia) */
.odznak{
    width:52px; height:52px; margin-bottom:20px;
    display:flex; align-items:center; justify-content:center;
    border-radius:15px;
    background:var(--brand); color:var(--on-brand);
}

/* ── Oznámenia ───────────────────────────────────────────────────────────── */
.oznam{
    display:flex; gap:10px; align-items:flex-start;
    margin-bottom:20px; padding:12px 14px;
    border-radius:12px; font-size:13px; font-weight:600; line-height:1.45;
}
.oznam svg{ flex:none; margin-top:1px }
.oznam--zle{ background:var(--zle-bg); color:var(--zle) }
.oznam--dobre{ background:var(--dobre-bg); color:var(--dobre) }
.oznam--varovanie{ background:var(--varovanie-bg); color:var(--varovanie) }
.oznam[hidden]{ display:none }

/* ── Polia ───────────────────────────────────────────────────────────────── */
.pole{ margin-bottom:16px }
.pole label{
    display:block; margin-bottom:7px;
    font-size:12.5px; font-weight:700; color:var(--dim); letter-spacing:-.01em;
}
.vstup{ position:relative }
.vstup input{
    width:100%; height:54px;
    padding:0 16px;
    border:1px solid transparent; border-radius:var(--r-pole);
    background:var(--pole); color:var(--ink);
    /* 16 px zámerne – pri menšom písme iOS Safari pri fokuse stránku priblíži */
    font:inherit; font-size:16px; font-weight:600;
    outline:none;
    transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.vstup input::placeholder{ color:var(--faint); font-weight:500 }
.vstup input:hover{ border-color:var(--linka-silna) }
.vstup input:focus{
    background:var(--pole-fokus);
    border-color:var(--brand);
    box-shadow:0 0 0 3px var(--ziara);
}
.vstup--heslo input{ padding-right:52px }

/* Pole na 6-miestny overovací kód */
.vstup--kod input{
    height:64px; text-align:center;
    font-size:27px; font-weight:800; letter-spacing:.22em; text-indent:.22em;
}

.oko{
    position:absolute; top:50%; right:6px; transform:translateY(-50%);
    width:42px; height:42px;
    display:flex; align-items:center; justify-content:center;
    border:0; border-radius:11px; background:transparent;
    color:var(--faint); cursor:pointer;
    transition:color .15s ease, background-color .15s ease;
}
.oko:hover{ color:var(--ink); background:var(--pole) }
html[data-tema="dark"] .oko:hover{ background:rgba(255,255,255,.06) }
/* Ikony sa prepínajú triedou na tlačidle. Vlastnosť `hidden` sa na SVG použiť
   nedá – je to IDL vlastnosť HTMLElement, na SVGElement by z priradenia vznikla
   len bezvýznamná expando vlastnosť a ikona by sa neskryla. */
.oko .oko-zavrete{ display:none }
.oko.je-zobrazene .oko-otvorene{ display:none }
.oko.je-zobrazene .oko-zavrete{ display:block }

.napoveda{
    display:flex; gap:6px; align-items:center;
    margin-top:8px; font-size:12px; font-weight:600; color:var(--varovanie);
}
.napoveda--tlmena{ color:var(--faint); font-weight:500; justify-content:center; text-align:center }
.napoveda[hidden]{ display:none }

/* ── Tlačidlá ────────────────────────────────────────────────────────────── */
.tlacidlo{
    width:100%; height:54px;
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    border:1px solid transparent; border-radius:var(--r-pole);
    font:inherit; font-size:15px; font-weight:800; letter-spacing:-.01em;
    cursor:pointer; text-decoration:none;
    transition:filter .15s ease, border-color .15s ease, background-color .15s ease, transform .06s ease;
}
.tlacidlo:active{ transform:translateY(1px) }
/* display:inline-flex vyššie prebíja UA pravidlo [hidden]{display:none},
   preto skrytie tlačidla (krok 2, odomknutie) musíme povedať výslovne. */
.tlacidlo[hidden]{ display:none }
.tlacidlo--hlavne{ margin-top:8px; background:var(--brand); color:var(--on-brand) }
.tlacidlo--hlavne:hover{ filter:brightness(1.12) }
.tlacidlo--hlavne[disabled]{ opacity:.72; cursor:progress; transform:none; filter:none }
.tlacidlo--druhe{ background:transparent; color:var(--ink); border-color:var(--linka-silna); font-weight:700 }
.tlacidlo--druhe:hover{ border-color:var(--brand); color:var(--brand-ink) }
.tlacidlo--text{
    height:auto; width:auto; margin:0 auto; padding:6px 10px;
    background:transparent; color:var(--dim); font-size:12.5px; font-weight:700;
}
.tlacidlo--text:hover{ color:var(--ink) }

/* Pokračovať cez Google – biele tlačidlo s originálnym farebným logom.
   V tmavom režime ostáva plocha tmavá (pravidlá Google to pripúšťajú),
   logo si farby drží samo. */
.tlacidlo--google{
    background:var(--plocha); color:var(--ink);
    border-color:var(--linka-silna); font-weight:700;
}
.tlacidlo--google:hover{ border-color:var(--brand) }

/* ── Dva kroky prihlásenia (najprv e-mail, potom heslo) ──────────────────── */
/* Krok sa skrýva atribútom hidden, ktorý nastaví až JS – bez neho sú
   viditeľné obidva kroky a formulár funguje po starom. */
.krok[hidden]{ display:none }
.krok{ display:flex; flex-direction:column }

/* Nad heslom svieti účet z prvého kroku a zároveň je to cesta späť. */
.ucet-spat{
    align-self:flex-start;
    display:inline-flex; align-items:center; gap:8px;
    margin:0 0 16px; padding:7px 12px 7px 10px;
    border:1px solid var(--linka); border-radius:999px;
    background:var(--pole); color:var(--dim);
    font:inherit; font-size:13px; font-weight:700;
    max-width:100%; cursor:pointer;
    transition:border-color .15s ease, color .15s ease;
}
.ucet-spat:hover{ border-color:var(--brand); color:var(--ink) }
.ucet-spat[hidden]{ display:none }
.ucet-spat span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ucet-spat svg{ flex:none }

/* Odomknutie odtlačkom/tvárou sa zobrazí len v natívnej appke. */
[data-znamka-odomkni]{ margin-top:12px }
[data-znamka-odomkni][hidden]{ display:none }

.krutok{ animation:tocenie .8s linear infinite }
@keyframes tocenie{ to{ transform:rotate(360deg) } }

/* Dvojica polí vedľa seba (meno / priezvisko pri registrácii) */
.dvojica{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:420px){ .dvojica{ grid-template-columns:1fr; gap:0 } }

/* ── Oddeľovač a pätka ───────────────────────────────────────────────────── */
.oddelovac{
    display:flex; align-items:center; gap:12px;
    margin:22px 0 16px;
    font-size:12px; font-weight:700; color:var(--faint);
}
.oddelovac::before,.oddelovac::after{ content:""; flex:1; height:1px; background:var(--linka) }

.patka{
    margin:26px 0 0; padding-top:18px;
    border-top:1px solid var(--linka);
    font-size:11.5px; line-height:1.6; color:var(--faint); text-align:center;
}
.patka a{ color:var(--dim); text-decoration:none }
.patka a:hover{ color:var(--ink); text-decoration:underline }
.patka strong a{ color:var(--brand-ink); font-weight:800 }

/* ── Prístupnosť ─────────────────────────────────────────────────────────── */
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:8px }
.len-pre-citacky{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}