/* ============================================================================
   SDÍLENÝ VZHLED KALKULAČEK — jeden styl pro všech 6 produktů.

   PROČ EXISTUJE: CSS bylo zkopírované 6× (3 skoro shodné verze, ~55 řádků každá).
   Změna vzhledu se tak musela dělat šestkrát a verze se rozcházely. Tenhle soubor
   je jejich NADMNOŽINA — nic se nezahazuje, jen se to sjednotilo:
     · `.seg{flex-wrap}`      měly jen Komfort/Excelent/Premium
     · `input[type=text]`     chybělo v selektoru u KLIMO
     · `input[type=range]`, `.flag`, `.ruletbl`  má jen KLIMO (ostatní je nepoužijí)

   FIREMNÍ BARVA: magenta #A70545 je vzatá z firemní šablony nabídky
   (`nabidka.js` → MAGENTA=[167,5,69]), ne vymyšlená. Dřív tu byla zelená #1f6f54,
   která s brandem Futurol nesouvisela vůbec.

   ZÁMĚR: tmavý pruh + magenta akcent = Futurol; obsah zůstává světlý, protože
   je to nástroj na každý den, ne plakát.
   ========================================================================== */

:root{
  /* brand */
  --brand:#a70545;          /* Futurol magenta (shodná s nabídkou) */
  --brand-dark:#7d0434;
  --brand-soft:#fdeff5;
  --bar:#141216;            /* tmavý pruh hlavičky */

  /* plocha */
  --bg:#f5f5f6; --card:#fff; --ink:#1a181c; --muted:#6d6a72; --line:#e5e3e8;

  /* akcent = brand (názvy zůstávají, markup je používá) */
  --accent:var(--brand); --accent-soft:var(--brand-soft);

  --warn:#b4691a; --warn-soft:#fbf0e2;
  --danger:#b0322b; --danger-soft:#f7e7e6;
  --ok:#0a7d2c; --ok-soft:#e9f8ee;      /* sleva / „Zdarma" — význam, ne brand */
  --radius:10px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.45;font-size:15px}

/* ---- hlavička ----
   Logo je firemní `futurol-logo.png` (inbox/LOGO). Je to HLAVNÍ verze = tmavé písmo
   na průhledném pozadí → patří na SVĚTLÝ pruh. Na tmavém by zmizelo (bílou verzi
   nemáme; ta na obálce nabídky je z PPTX). Proto je pruh bílý, ne černý. */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 24px;background:#fff;border-bottom:1px solid var(--line)}
.topbar .brand{display:flex;align-items:center;text-decoration:none}
.topbar .brand img{height:30px;width:auto;display:block}
.topbar .back{color:var(--muted);text-decoration:none;font-size:13px}
.topbar .back:hover{color:var(--brand)}
header{padding:18px 24px 6px}
h1{font-size:19px;margin:0 0 3px;letter-spacing:-.01em}
.sub{color:var(--muted);font-size:13px;font-weight:400}
h1 .sub{margin-left:4px}

/* ---- plocha ---- */
.wrap{display:flex;flex-direction:column;gap:16px;padding:12px 24px 32px}
.cfg-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:start}
@media(max-width:1100px){.cfg-top{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.cfg-top{grid-template-columns:1fr}}
.cfg-col{display:flex;flex-direction:column;gap:16px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 12px;font-weight:700}
.card.primary{border-color:var(--brand);box-shadow:0 1px 10px rgba(167,5,69,.10)}
.card.muted{background:#fbfbfc}
.card.muted h2{color:#9a97a0}

.row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:9px 0}
.row label{font-size:14px}
.row .hint{color:var(--muted);font-size:12px}
.note{font-size:12.5px;color:var(--muted);margin-top:8px}

/* ---------------------------------------------------------------------------
   ŠÍŘKY V KONFIGURACI
   Pole měla šířku natvrdo v HTML (90/110/130/150/170/180/200 px) — nesourodě,
   a hlavně tak úzce, že se text OŘEZÁVAL („Standard RAL 7016 (bez…").

   ⚠️ Uživatel 2026-07-17: **výběry a přepínače se mají řídit textem, ne rovnat**
   („aby se do nich vešel celý text … a nemusí být stejně velké"). Zarovnat mají
   ČÍSELNÁ pole — proto jsou jednotná a karty typu „Doprava, montáž a slevy",
   kde jsou samá čísla, vyjdou zarovnané samy od sebe.
   Nenutit sem jeden sloupec: ořezaný popisek varianty je horší než ragged hrana.
   --------------------------------------------------------------------------- */
.cfg-top .row > input[type=number],
.cfg-top .row > input[type=text]{width:184px;flex:0 0 auto}
/* Výběr i přepínač = tak široké, jak potřebuje text; přes kartu ale nepřetečou. */
.cfg-top .row > select{width:auto;min-width:184px;max-width:100%}
.cfg-top .row > .seg{flex:0 1 auto;max-width:100%}
.cfg-top .row > .seg button{white-space:nowrap}

input[type=number],input[type=text],select{width:110px;padding:6px 8px;border:1px solid var(--line);
  border-radius:7px;font:inherit;text-align:right;background:#fff;color:var(--ink)}
select{text-align:left}
input[type=number]:focus,input[type=text]:focus,select:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
input[type=range]{width:150px}                      /* jen KLIMO */

/* segmentová tlačítka */
.seg{display:flex;gap:0;border:1px solid var(--line);border-radius:7px;overflow:hidden;flex-wrap:wrap;background:#fff}
.seg button{border:0;background:#fff;padding:6px 10px;font:inherit;cursor:pointer;color:var(--muted)}
.seg button:hover{background:var(--brand-soft);color:var(--brand-dark)}
.seg button.on{background:var(--brand);color:#fff}
.seg button.on:hover{background:var(--brand-dark);color:#fff}

/* rozpad ceny */
.break{margin:4px 0}
.break .l{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--line);font-size:14px}
.break .l span:last-child{font-variant-numeric:tabular-nums}
.tot{display:flex;justify-content:space-between;padding:8px 0;font-weight:600;font-size:15px}
.big{display:flex;justify-content:space-between;align-items:baseline;padding:10px 12px;border-radius:8px;margin:6px 0}
.big.sell{background:var(--brand-soft)}
.big b{font-size:22px;font-variant-numeric:tabular-nums;color:var(--brand-dark)}

.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600}
.ok{background:var(--ok-soft);color:var(--ok)}
.bad{background:var(--danger-soft);color:var(--danger)}
.flag{font-size:12px;padding:2px 6px;border-radius:5px;background:var(--danger-soft);color:var(--danger);font-weight:600}
.flagw{font-size:12px;padding:2px 6px;border-radius:5px;background:var(--warn-soft);color:var(--warn);font-weight:600}

/* matice */
table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
th,td{border:1px solid var(--line);padding:5px 7px;text-align:right}
th{background:#faf9fb;color:var(--muted);font-weight:600}
td.h,th.h{text-align:left;background:#faf9fb;color:var(--ink);font-weight:600}
td.cur{outline:2px solid var(--brand);outline-offset:-2px;background:var(--brand-soft);font-weight:600}
.ruletbl td,.ruletbl th{text-align:left}   /* jen KLIMO */

/* doplňky */
#doplnkyList{column-width:230px;column-count:4;column-gap:24px}
.dopl-group{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:2px}
.dopl-group .row{margin:6px 0}

/* tlačítka */
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
button.act{border:1px solid var(--brand);background:var(--brand);color:#fff;padding:7px 12px;border-radius:8px;font:inherit;cursor:pointer}
button.act:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
button.gho{border:1px solid var(--line);background:#fff;padding:7px 12px;border-radius:8px;font:inherit;cursor:pointer;color:var(--ink)}
button.gho:hover{border-color:var(--brand);color:var(--brand)}

/* ---------------------------------------------------------------------------
   INTERNÍ BLOK — matice, náklady a páky.
   Obchodník je při nabídce nepotřebuje (páky jsou navíc u zamčeného ceníku jen
   dopočet), ale zabíraly půlku obrazovky. Proto jsou složené; stav si stránka
   pamatuje, takže kdo je chce mít otevřené, otevře je jednou.
   --------------------------------------------------------------------------- */
/* Obchodník (role sales) nevidí interní blok = náklady, marže, přirážka, režie, kurz a sazby.
   Třídu role-* dává na <html> engine.js podle __SRV.role ze serveru.
   ⚠️ Je to závěs, ne zámek — data jsou pořád ve zdroji stránky. Viz engine.js. */
.role-sales .interni{display:none}
.interni{border:1px solid var(--line);border-radius:var(--radius);background:#fbfbfc}
.interni>summary{cursor:pointer;padding:12px 16px;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  list-style:none;display:flex;align-items:center;gap:9px}
.interni>summary::-webkit-details-marker{display:none}
.interni>summary::before{content:"›";color:var(--brand);font-size:17px;line-height:1;
  transition:transform .15s;display:inline-block}
.interni[open]>summary::before{transform:rotate(90deg)}
.interni>summary:hover{color:var(--ink)}
.interni>summary .hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
.interni-body{display:flex;flex-direction:column;gap:16px;padding:0 14px 14px}
.interni-body .card{background:#fff}