/* Farby podľa unipoistenie.sk */
:root {
  --cervena: #cc0c0c;
  --cervena-tmava: #a80a0a;
  --cervena-svetla: #fdecec;
  --modra: #16347f;
  --modra-svetla: #e8edf7;
  --oranzova: #f2592b;
  --zelena: #2e7d32;
  --zelena-svetla: #e7f4e8;
  --pozadie: #f6f7fa;
  --biela: #ffffff;
  --text: #1f1f1f;
  --text-tlmeny: #666666;
  --ciara: #e2e5ec;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--pozadie);
  line-height: 1.5;
}

a { color: var(--modra); }

/* Hlavička */
.hlavicka {
  background: var(--biela);
  border-bottom: 3px solid var(--cervena);
}
.hlavicka-obsah {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.hlavicka img { height: 28px; display: block; }
.hlavicka .nazov-aplikacie {
  color: var(--modra);
  font-weight: 600;
  border-left: 1px solid var(--ciara);
  padding-left: 16px;
}
.hlavicka nav { margin-left: auto; display: flex; gap: 18px; }
.hlavicka nav a { text-decoration: none; font-weight: 500; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.hlavicka nav a.aktivna { border-bottom-color: var(--cervena); }

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 16px 64px;
}

h1, h2, h3 { color: var(--modra); font-weight: 600; line-height: 1.25; }
h1 { font-size: 26px; margin: 0 0 6px; }
h2 { font-size: 19px; margin: 28px 0 12px; }
.podnadpis { color: var(--text-tlmeny); margin: 0 0 24px; }

/* Karty a tabuľky */
.karta {
  background: var(--biela);
  border: 1px solid var(--ciara);
  border-radius: var(--radius);
  padding: 20px;
}

table { width: 100%; border-collapse: collapse; background: var(--biela); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ciara); }
th { font-size: 13px; color: var(--text-tlmeny); font-weight: 600; }
tr:last-child td { border-bottom: none; }
.tabulka-obal {
  border: 1px solid var(--ciara);
  border-radius: var(--radius);
  overflow-x: auto;
}

/* Tlačidlá */
.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn-hlavne { background: var(--cervena); color: var(--biela); }
.btn-hlavne:hover { background: var(--cervena-tmava); }
.btn-druhe { background: var(--biela); color: var(--modra); border-color: var(--modra); }
.btn-druhe:hover { background: var(--modra-svetla); }

/* Formuláre */
label { display: block; font-weight: 500; margin: 14px 0 6px; }
input[type=text], input[type=password], textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  border: 1px solid var(--ciara);
  border-radius: 8px;
  background: var(--biela);
}
input:focus, textarea:focus { outline: 2px solid var(--modra); outline-offset: -1px; }
.napoveda { font-size: 13px; color: var(--text-tlmeny); margin-top: 4px; }

.nahravanie {
  border: 2px dashed var(--ciara);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  background: var(--pozadie);
}

/* Štítky stavu */
.stitok {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--modra-svetla);
  color: var(--modra);
}
.stitok-ok { background: var(--zelena-svetla); color: var(--zelena); }
.stitok-pozor { background: var(--cervena-svetla); color: var(--cervena); }

/* Záložky */
.zalozky {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--ciara);
  margin: 20px 0 24px;
  overflow-x: auto;
}
.zalozky a {
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text-tlmeny);
  font-weight: 500;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.zalozky a.aktivna { color: var(--modra); border-bottom-color: var(--cervena); }

.prazdne {
  text-align: center;
  color: var(--text-tlmeny);
  padding: 40px 20px;
}

.mriezka-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .mriezka-2 { grid-template-columns: 1fr; } }

.chyba { color: var(--cervena); font-weight: 500; }

.prihlasenie {
  max-width: 380px;
  margin: 10vh auto 0;
}
.prihlasenie img { height: 32px; margin-bottom: 20px; }

/* Spracovanie */
.spracovanie {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  border-color: var(--modra);
  background: var(--modra-svetla);
  color: var(--modra);
  font-weight: 500;
}
.spinner {
  width: 18px;
  height: 18px;
  border: 3px solid var(--modra);
  border-right-color: transparent;
  border-radius: 50%;
  animation: tocenie 0.8s linear infinite;
  flex: none;
}
@keyframes tocenie { to { transform: rotate(360deg); } }

/* Kontrola údajov */
.kontrola-zoznam { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.kontrola-zoznam a {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--ciara);
  background: var(--biela);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.kontrola-zoznam a.pozor { border-color: var(--cervena); color: var(--cervena); }
.kontrola-zoznam a.ok { border-color: var(--zelena); color: var(--zelena); }
.kontrola-zoznam a.aktivne { background: var(--modra); border-color: var(--modra); color: var(--biela); }

.kontrola { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .kontrola { grid-template-columns: 1fr; } }
.kontrola-tp { display: flex; flex-direction: column; gap: 12px; }
.tp-obrazok {
  width: 100%;
  display: block;
  border: 1px solid var(--ciara);
  border-radius: var(--radius);
  background: var(--biela);
}
.kontrola-formular { position: sticky; top: 16px; }
.polia { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.pole label { font-size: 13px; margin: 10px 0 4px; }
.pole input { padding: 8px 10px; }
.pole-pozor label { color: var(--cervena); }
.pole-pozor input { border-color: var(--cervena); background: var(--cervena-svetla); }
.upozornenia {
  background: var(--cervena-svetla);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
}
.upozornenia ul { margin: 6px 0 0; padding-left: 18px; }

/* Nastavenia a export */
select {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  border: 1px solid var(--ciara);
  border-radius: 8px;
  background: var(--biela);
}
input[type=date] {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  border: 1px solid var(--ciara);
  border-radius: 8px;
}
.export { margin-bottom: 14px; }
.export h3 { margin: 0; font-size: 17px; }
.export-hlavicka { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.export-upozornenia { margin-top: 12px; font-size: 14px; }
.export-upozornenia summary { cursor: pointer; color: var(--cervena); font-weight: 500; }
.export-upozornenia ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-tlmeny); }
.sekcia-formulara { font-size: 15px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--ciara); }
.pole select { padding: 8px 10px; }

/* Živý priebeh spracovania */
.priebeh { margin-bottom: 18px; border-color: var(--modra); }
.priebeh-hlavicka { display: flex; align-items: center; gap: 12px; color: var(--modra); flex-wrap: wrap; }
.priebeh-vozidla { margin-left: auto; font-weight: 600; color: var(--modra); }
.priebeh-subor { margin-top: 14px; }
.priebeh-riadok { display: flex; justify-content: space-between; gap: 12px; }
.priebeh-nazov { font-weight: 600; overflow-wrap: anywhere; }
.priebeh-text { font-size: 14px; color: var(--text); margin: 4px 0 6px; }
.priebeh-lista { height: 8px; background: var(--modra-svetla); border-radius: 999px; overflow: hidden; }
.priebeh-vypln { height: 100%; background: var(--cervena); border-radius: 999px; transition: width 0.6s ease; }
.priebeh-neurcity { width: 30%; animation: neurcity 1.4s ease-in-out infinite; }
@keyframes neurcity { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
.btn-male { padding: 4px 10px; font-size: 13px; margin-left: 8px; }

/* MyPort a ocenenie CEBIA */
.myport { margin: 18px 0 8px; }
.myport h3, .cebia h3 { margin: 0 0 4px; font-size: 16px; }
.myport-hlavicka { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.myport-formular { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
a.stitok { text-decoration: none; }
.kontrola-pravy { display: flex; flex-direction: column; gap: 16px; }
.cebia { border-color: var(--modra); }
.cebia-volba {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 0; border-bottom: 1px solid var(--ciara);
  font-weight: 400; cursor: pointer;
}
.cebia-volba span { flex: 1; }
.cebia-volba b { white-space: nowrap; color: var(--modra); }
.cebia-oddelovac { font-size: 12px; color: var(--text-tlmeny); text-transform: uppercase; margin: 12px 0 2px; letter-spacing: .04em; }
/* SMS kampane */
.sms-ha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sms-ha .napoveda { margin: 4px 0 0; }
.sms-stop-upozornenie { margin-bottom: 16px; border-color: var(--cervena); background: var(--cervena-svetla); }
.sms-stop-upozornenie ul { margin: 6px 0 8px; padding-left: 18px; }
.sms-test { background: #fff3e0; color: #b26a00; margin-left: 6px; }
.sms-test-banner { margin-bottom: 16px; border-color: #f0a742; background: #fff3e0; color: #8a5200; font-weight: 500; }
.sms-test-volba { margin-top: 18px; padding: 14px 16px; border-radius: 8px; background: #fff3e0; }
.sms-check { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 0 0 8px; }
.sms-check input { width: auto; margin: 0; }
td.sms-text { max-width: 560px; }
.sms-log {
  background: var(--biela);
  border: 1px solid var(--ciara);
  border-radius: var(--radius);
  padding: 14px;
  font-size: 13px;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
}
.sms-nastavenia { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.sms-nastavenia .sms-cele { grid-column: 1 / -1; }
@media (max-width: 800px) { .sms-nastavenia { grid-template-columns: 1fr; } }
.sms-zdroj { margin-left: 6px; font-weight: 500; }
.sms-diagnostika dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; align-items: center; }
.sms-diagnostika dt { font-weight: 500; }
.sms-diagnostika dd { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sms-diagnostika .napoveda { margin: 0; }
.cebia-potvrdene {
  background: var(--zelena-svetla); color: var(--zelena);
  border-radius: 8px; padding: 10px 14px; font-weight: 500;
}
.cebia-potvrdene .napoveda { color: var(--text-tlmeny); font-weight: 400; margin-top: 2px; }
.cebia-zmenit { margin-top: 12px; }
.cebia-zmenit summary { cursor: pointer; color: var(--modra); font-weight: 500; font-size: 14px; margin-bottom: 6px; }

/* Ponuky poisťovní a výstup PONUKA */
.nahravanie-ponuk { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.ponuka-poistovne { margin-bottom: 14px; }
.ponuka-poistovne.vylucena { opacity: .6; }
.pp-hlavicka { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.pp-hlavicka h3 { margin: 0 0 2px; font-size: 17px; }
.pp-akcie { display: flex; gap: 14px; align-items: center; }
.pp-cena { color: var(--modra); font-size: 18px; white-space: nowrap; }
.pp-formular textarea, .vystup-akcie + h2 ~ .mriezka-2 textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--ciara); border-radius: 8px; }
.vystup-akcie { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.vystup-sekcia { font-size: 16px; margin: 20px 0 8px; }
.vystup-tabulka tbody th { color: var(--text-tlmeny); font-weight: 500; width: 22%; }
.vystup-tabulka td.najlepsia { background: var(--zelena-svetla); }
#email-text { width: 100%; font-family: ui-monospace, monospace; font-size: 13px; padding: 10px; border: 1px solid var(--ciara); border-radius: 8px; background: var(--pozadie); }
.mriezka-2 textarea[name=odporucanie] { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--ciara); border-radius: 8px; }

.vystup-uprava { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.vystup-uprava .btn { margin-left: 0; }

/* Údaj, ktorý v dokumente poisťovne chýba – maklér ho doplní */
.pp-formular input:placeholder-shown { border-color: #e3a008; background: #fffaf0; }
.pp-formular [hidden] { display: none !important; }

/* Poistenie majetku */
.rizika-tabulka input[type=text], .rizika-tabulka select, .rizika-tabulka textarea { width: 100%; padding: 6px 8px; font: inherit; font-size: 13px; box-sizing: border-box; }
.rizika-tabulka textarea { resize: vertical; overflow: hidden; line-height: 1.35; min-height: 32px; border: 1px solid var(--ciara); border-radius: 8px; }
.rizika-tabulka textarea:placeholder-shown { border-color: #e3a008; background: #fffaf0; }
.rizika-tabulka td { padding: 4px; }
.majetok-porovnanie td { font-size: 13px; vertical-align: top; }
.majetok-porovnanie td div + div { margin-top: 4px; }

/* Výber rozsahu tendra: len PZP / PZP + havarijné */
.volba-poistenia { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 6px 0 16px; }
.volba-poistenia label {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px;
  border: 1px solid var(--ciara); border-radius: 8px; font-weight: 400; cursor: pointer; background: var(--biela);
}
.volba-poistenia label:has(input:checked) { border-color: var(--modra); background: var(--modra-svetla); }
.volba-poistenia input { margin-top: 3px; }
.volba-poistenia b { color: var(--modra); }

/* Poznámky na úpravu – panel vpravo (Flotily, Majetok) */
.poznamky-zalozka {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  z-index: 40; padding: 22px 14px; border: none; border-radius: 0 12px 12px 0; cursor: pointer;
  background: var(--cervena); color: var(--biela); font: 600 17px/1 Poppins, sans-serif; letter-spacing: .03em;
  box-shadow: 4px 0 16px rgba(0, 0, 0, .25);
}
.poznamky-zalozka:hover { padding-bottom: 28px; }
.poznamky-zalozka #poznamky-pocet:not(:empty) {
  display: inline-block; margin-top: 12px; padding: 8px 5px; border-radius: 14px;
  background: var(--biela); color: var(--cervena); font-weight: 700;
}
.poznamky-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(520px, 100vw); overflow-y: auto;
  padding: 22px 22px 40px; font-size: 15px; background: var(--biela); border-left: 1px solid var(--ciara);
  box-shadow: -8px 0 24px rgba(0, 0, 0, .08); transform: translateX(100%); transition: transform .2s ease;
}
.poznamky-panel.otvoreny { transform: none; }
.poznamky-hlavicka { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.poznamky-hlavicka h3 { margin: 0; font-size: 20px; }
.poznamky-zavriet { border: none; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--text-tlmeny); }
.poznamky-panel textarea { width: 100%; box-sizing: border-box; font-size: 15px; min-height: 90px; }
.poznamky-odoslat { display: flex; gap: 8px; align-items: center; margin: 8px 0 16px; }
.poznamky-odoslat input { flex: 1; min-width: 0; }
.poznamky-odoslat .btn-male { margin-left: 0; white-space: nowrap; }
.poznamky-zoznam { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.poznamka { border: 1px solid var(--ciara); border-radius: 8px; padding: 10px 12px; }
.poznamka-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.poznamka-upravena { border-left: 4px solid var(--modra); }
.poznamka-schvalena { border-left: 4px solid var(--zelena); background: var(--zelena-svetla); opacity: .8; }
.poznamka-stavy { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px; font-size: 14px; }
.poznamka-stavy input[type="checkbox"] { width: 18px; height: 18px; }
.poznamka-stavy label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; cursor: pointer; }
.poznamka-zmazat { margin-left: auto; border: none; background: none; color: var(--text-tlmeny); font-size: 12px; cursor: pointer; text-decoration: underline; }

/* Majetok – poistné podmienky */
.podmienky-dokument { border-top: 1px solid var(--ciara); padding-top: 12px; margin-top: 14px; }
.z-podmienok { color: var(--zelena); font-style: italic; }
ul.vyluky { margin: 0; padding-left: 16px; font-size: 13px; }

/* Majetok – formulár nového porovnania v krokoch */
.krok { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--ciara); }
.krok:first-of-type { border-top: none; padding-top: 4px; }
.krok-cislo {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--modra); color: var(--biela); font-weight: 600;
}
.krok-obsah { flex: 1; min-width: 0; }
.krok-obsah h4 { margin: 4px 0 10px; font-size: 17px; color: var(--modra); }
.krok-obsah h4 .napoveda { font-weight: 400; margin-left: 6px; }
.krok-obsah .mriezka-2 label { margin-top: 0; }
label.subor-pole { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; cursor: pointer; font-weight: 400; }
label.subor-pole:hover { border-color: var(--modra); }
.subor-vyzva { font-weight: 600; color: var(--modra); }
label.subor-pole-male { padding: 14px; margin-top: 14px; }
.vybrane-subory { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vybrane-subory li { background: var(--modra-svetla); border-radius: 14px; padding: 3px 4px 3px 12px; font-size: 13px; }
.vybrane-subory button { border: none; background: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--cervena); padding: 0 6px; }
.podmienky-riadok { border: 1px solid var(--ciara); border-radius: var(--radius); padding: 12px 16px 14px; margin-top: 12px; background: var(--pozadie); }
.podmienky-riadok-hlavicka { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.odstranit-riadok { border: none; background: none; color: var(--cervena); cursor: pointer; font: inherit; font-size: 13px; }