/* [cc 17.10] site26 · sx-telematica2.css, refăcut de la zero: UN ecran static (David 17.10: „just make a screen showing the credential photo, and how the gps normally looks”).
   Pânza .tla-cv: lat (container ≥ 880 px) = 1200×480: foaia Conexiuni Telematic (372) + fereastra Telematic (804×480);
   îngust = 360 lățime: foaia deasupra, fereastra (360×512) dedesubt. JS-ul doar scalează pânza cât încape (--tla-k); fără JS, pânza stă la mărimea ei.
   Ce imită programul rămâne luminos și pe tema închisă (gradul ferestrelor de pe site). Desenul hărții/listei = versiunea din 16.10, fără animații. */

/* ---------- 0. Tokeni ---------- */
.sx-telematica2 {
  --tla-bb: #1e1d1a; --tla-bb-hi: #2d2b27; --tla-bb-ink: #efebe1; --tla-bb-mute: #a19c91;
  --tla-cv: #f7f6f2; --tla-dot: rgba(29, 39, 51, .085);
  --tla-sf: #ffffff; --tla-sf2: #f3f2ee; --tla-line: #e3e1db; --tla-line2: #d3d0c8; --tla-tl: #dcdad3;
  --tla-ink: #1d2733; --tla-ink2: #4f5b68; --tla-ink3: #5f6a78;
  --tla-acc: #1a74a2; --tla-acc-ink: #ffffff; --tla-link: #1a6a95;
  --tla-ok: #1c8a51; --tla-ok-soft: #e7f6ee; --tla-err: #c0392b;
  --tla-in-bd: #cdd4dc; --tla-card-bd: #e3e8ee; --tla-sh-bg: #fbfbf9; --tla-sh-bar: #f1f0ec;
  --tla-cx-bg: #e4f1f7; --tla-cx-ink: #145f82; --tla-cx-bd: #b9d9e8;
  --tla-land: #efebe2; --tla-water: #c2d6e2; --tla-bd: #a99f8d; --tla-rd: #ffffff; --tla-rd-c: #d8d2c5;
  --tla-mw: #f2c47c; --tla-mw-c: #d29a4a; --tla-map-bd: rgba(20, 22, 26, .55);
  --tla-place: #3f4a57; --tla-place-dot: #5f6a78; --tla-country: #958b78; --tla-halo: rgba(239, 235, 226, .95);
  --tla-lbl: #000000;
  --tla-pen: hsl(40 13% 23% / .72);   /* creionul stă în fereastra luminoasă: aceeași cerneală pe ambele teme */
  --tla-hand: "Cmd Hand", "Caveat", "Segoe Print", cursive;
  --tla-win-sh: 0 0 0 1px rgba(14, 13, 11, .92), 0 2px 4px rgba(23, 32, 43, .10), 0 14px 28px -10px rgba(23, 32, 43, .22),
                0 40px 80px -28px rgba(23, 32, 43, .34);
  --tla-pop-sh: 0 0 0 1px rgba(23, 32, 43, .08), 0 2px 4px rgba(23, 32, 43, .08), 0 16px 32px -12px rgba(23, 32, 43, .26),
                0 40px 70px -30px rgba(23, 32, 43, .30);
  overflow-x: clip;
}
html[data-theme="dark"] .sx-telematica2 {
  --tla-bb: #161616; --tla-bb-hi: #262626; --tla-bb-ink: #ededed; --tla-bb-mute: #a1a1a1;
  --tla-win-sh: 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 6px rgba(0, 0, 0, .5), 0 44px 96px -30px rgba(0, 0, 0, .9);
  --tla-pop-sh: 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .45), 0 30px 60px -20px rgba(0, 0, 0, .85);
}
html[data-theme="dark"] .sx-telematica2 :is(.tla-page, .tla-sheet) {
  --sx-panel: #ffffff; --sx-ink2: #4f5b68; --sx-hair-strong: #d6dce4;
  filter: brightness(.92) contrast(1.06);
}
.sx-telematica2 .tla-nw { white-space: nowrap; }
.sx-telematica2 .tla-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sx-telematica2 .tla-i { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 1. Antetul ---------- */
.sx-telematica2 .tla-head { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
.sx-telematica2 .tla-head > h2 { font-size: clamp(31px, calc(2.4vw + 17px), 50px); line-height: 1.05; letter-spacing: -0.034em; max-width: 20ch; }
.sx-telematica2 .tla-sub { margin: 0; font-size: 18px; line-height: 1.55; color: var(--sx-ink2); max-width: 58ch; text-wrap: pretty; }

/* ---------- 2. Scena: pânza scalată ---------- */
.sx-telematica2 .tla-pin { margin-top: clamp(26px, 2.6vw, 34px); padding-inline: var(--sx-gutter); }
.sx-telematica2 .tla-stage { position: relative; max-width: 1200px; margin-inline: auto; container: tla / inline-size; }
.sx-telematica2 .tla-cv {
  position: relative; width: 360px; margin-inline: auto; display: flex; flex-direction: column; gap: 14px;
  color: var(--tla-ink); font-family: var(--sx-f-sans); font-size: 12px; line-height: 1.35; font-variant-numeric: tabular-nums;
}
.sx-telematica2.tla-js .tla-cv { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; transform: translateX(var(--tla-ox, 0px)) scale(var(--tla-k, 1)); }
.sx-telematica2 .tla-cv, .sx-telematica2 .tla-cv * { letter-spacing: -0.012em; word-spacing: 0; }
.sx-telematica2 .tla-cv :where(p) { margin: 0; }
.sx-telematica2 .tla-cv :where(b) { font-weight: 600; color: inherit; }
.sx-telematica2 .tla-cv :where(small) { font-size: inherit; }

/* ---------- 3. Setările Programului → Conexiuni Telematic (după captura din 17.10) ---------- */
.sx-telematica2 .tla-sheet { position: relative; z-index: 2; width: 360px; overflow: hidden; border-radius: 12px; background: var(--tla-sh-bg); box-shadow: var(--tla-pop-sh); }
.sx-telematica2 .tla-sh-bar {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px;
  background: var(--tla-sh-bar); border-bottom: 1px solid var(--tla-line); font-size: 11.5px; font-weight: 600; color: var(--tla-ink2);
}
.sx-telematica2 .tla-sh-bar .tla-i { width: 14px; height: 14px; color: var(--tla-ink3); }
.sx-telematica2 .tla-sh-b { padding: 12px 12px 12px; }
.sx-telematica2 .tla-sh-t { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.sx-telematica2 .tla-sh-t b { font-size: 16px; font-weight: 700; letter-spacing: -0.022em; color: var(--tla-ink); }
.sx-telematica2 .tla-sh-all { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--tla-link); }
.sx-telematica2 .tla-sh-all .tla-i { width: 13px; height: 13px; }
.sx-telematica2 .tla-sh-s { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sx-telematica2 .tla-sh-box {
  position: relative; flex: 0 0 236px; display: flex; align-items: center; height: 31px; padding: 0 30px;
  border: 1px solid var(--tla-in-bd); border-radius: 8px; background: var(--tla-sf); font-size: 12.5px; color: var(--tla-ink);
}
.sx-telematica2 .tla-sh-si { position: absolute; left: 10px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--tla-ink3); }
.sx-telematica2 .tla-sh-clr { position: absolute; right: 10px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; color: var(--tla-ink3); }
.sx-telematica2 .tla-sh-n { font-size: 12px; color: var(--tla-ink3); }
.sx-telematica2 .tla-card { overflow: hidden; background: var(--tla-sf); border: 1px solid var(--tla-card-bd); border-radius: 9px; box-shadow: 0 1px 2px rgba(22, 33, 55, .05); }
.sx-telematica2 .tla-card-h { display: flex; align-items: center; gap: 11px; padding: 9px 11px; }
.sx-telematica2 .tla-lg { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #c0392b; color: #ffffff; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.sx-telematica2 .tla-nm { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.sx-telematica2 .tla-nm b { font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--tla-ink); }
.sx-telematica2 .tla-nm small { font-size: 11px; line-height: 1.3; color: var(--tla-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-telematica2 .tla-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px;
  background: var(--tla-ok-soft); color: var(--tla-ok); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.sx-telematica2 .tla-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sx-telematica2 .tla-caret-d { width: 13px; height: 13px; color: var(--tla-ink3); transform: rotate(180deg); }
.sx-telematica2 .tla-card-b { border-top: 1px solid var(--tla-line); padding: 9px 12px 10px; }
.sx-telematica2 .tla-f { margin-bottom: 7px; }
.sx-telematica2 .tla-fl { margin-bottom: 3px; font-size: 11.5px; font-weight: 600; color: var(--tla-ink); }
.sx-telematica2 .tla-fl b { color: var(--tla-err); font-weight: 700; }
.sx-telematica2 .tla-in {
  display: flex; align-items: center; height: 27px; padding: 0 9px; overflow: hidden; white-space: nowrap;
  border: 1px solid var(--tla-in-bd); border-radius: 6px; background: var(--tla-sf); font-size: 12px; color: var(--tla-ink);
}
.sx-telematica2 .tla-in--pw { letter-spacing: .12em; }
.sx-telematica2 .tla-help { display: flex; gap: 6px; margin-top: 3px; font-size: 10.5px; line-height: 1.4; color: var(--tla-ink3); }
.sx-telematica2 .tla-help b { font-weight: 600; color: var(--tla-ink2); }
.sx-telematica2 .tla-help-a { flex: 0 0 auto; opacity: .7; }
.sx-telematica2 .tla-acts { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.sx-telematica2 .tla-b {
  display: inline-flex; align-items: center; gap: 6px; height: 29px; padding: 0 12px; white-space: nowrap;
  border: 1px solid var(--tla-in-bd); border-radius: 6px; background: var(--tla-sf); color: var(--tla-ink); font-size: 11.5px; font-weight: 600;
}
.sx-telematica2 .tla-b .tla-i { width: 13px; height: 13px; }
.sx-telematica2 .tla-b--pri { background: var(--tla-acc); border-color: var(--tla-acc); color: var(--tla-acc-ink); }
.sx-telematica2 .tla-res { margin-top: 8px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--tla-ok); }

/* ---------- 4. Fereastra programului: pagina Telematic (îngust: 360×512) ---------- */
.sx-telematica2 .tla-win { position: relative; flex: 0 0 auto; width: 360px; height: 512px; border-radius: 14px; background: var(--tla-bb); box-shadow: var(--tla-win-sh); }
.sx-telematica2 .tla-top { position: absolute; left: 0; right: 0; top: 0; height: 32px; display: flex; align-items: center; padding-right: 8px; color: var(--tla-bb-mute); }
.sx-telematica2 .tla-logo { flex: 0 0 auto; width: 40px; height: 32px; display: grid; place-items: center; color: var(--tla-bb-ink); }
.sx-telematica2 .tla-logo .tla-i { width: 18px; height: 18px; }
.sx-telematica2 .tla-tab {
  position: relative; align-self: flex-end; display: flex; align-items: center; gap: 9px; height: 26px; margin-left: 2px;
  padding: 0 10px 0 13px; border-radius: 9px 9px 0 0; background: var(--tla-cv); color: var(--tla-ink); font-size: 11.5px; font-weight: 500;
}
.sx-telematica2 .tla-tab::before, .sx-telematica2 .tla-tab::after { content: ""; position: absolute; bottom: 0; width: 9px; height: 9px; }
.sx-telematica2 .tla-tab::before { left: -9px; background: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 8.5px, var(--tla-cv) 9px); }
.sx-telematica2 .tla-tab::after { right: -9px; background: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 8.5px, var(--tla-cv) 9px); }
.sx-telematica2 .tla-tab-x { width: 11px; height: 11px; opacity: .6; }
.sx-telematica2 .tla-tab-add { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; margin-left: 10px; border-radius: 7px; }
.sx-telematica2 .tla-tab-add .tla-i { width: 13px; height: 13px; }
.sx-telematica2 .tla-ezb {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 22px; margin-left: auto; padding: 0 11px 0 4px;
  border-radius: 999px; background: var(--tla-bb-hi); color: var(--tla-bb-ink); font-size: 11px; font-weight: 500;
}
.sx-telematica2 .tla-ezb-av { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--tla-acc); color: var(--tla-acc-ink); font-size: 9.5px; font-weight: 700; line-height: 1; }
.sx-telematica2 .tla-me { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; border-radius: 50%; background: var(--tla-bb-hi); }
.sx-telematica2 .tla-me .tla-i { width: 14px; height: 14px; }
.sx-telematica2 .tla-rail { display: none; position: absolute; left: 0; top: 40px; bottom: 0; width: 50px; flex-direction: column; align-items: center; gap: 5px; padding-top: 12px; }
.sx-telematica2 .tla-ri { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--tla-bb-mute); }
.sx-telematica2 .tla-ri.is-act { background: var(--tla-bb-hi); color: var(--tla-bb-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.sx-telematica2 .tla-page {
  position: absolute; left: 0; top: 32px; right: 0; bottom: 0; overflow: hidden; border-radius: 10px 10px 14px 14px;
  background-color: var(--tla-cv); background-image: radial-gradient(circle, var(--tla-dot) 1px, rgba(0, 0, 0, 0) 1.3px);
  background-size: 20px 20px; background-position: 10px 10px;
}
.sx-telematica2 .tla-pt { display: none; position: absolute; left: 16px; top: 11px; font-size: 15px; font-weight: 600; letter-spacing: -0.022em; color: var(--tla-ink); }
.sx-telematica2 .tla-flt { position: absolute; left: 10px; right: 10px; top: 8px; height: 26px; display: flex; gap: 6px; }
.sx-telematica2 .tla-sel {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 26px; overflow: hidden;
  border: 1px solid var(--tla-line2); border-radius: 6px; background: var(--tla-sf); color: var(--tla-ink); font-size: 11px;
}
.sx-telematica2 .tla-sel-a { align-self: stretch; flex: 0 0 auto; width: 22px; display: grid; place-items: center; background: var(--tla-sf2); border-right: 1px solid var(--tla-line2); color: var(--tla-ink3); }
.sx-telematica2 .tla-sel-a .tla-i { width: 13px; height: 13px; }
.sx-telematica2 .tla-sel-v { flex: 1 1 auto; min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-telematica2 .tla-sel-c { width: 12px; height: 12px; margin-right: 5px; color: var(--tla-ink3); }
.sx-telematica2 .tla-sel--u { width: 148px; }
.sx-telematica2 .tla-sel--w { display: none; width: 150px; }
.sx-telematica2 .tla-cx {
  flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px;
  border: 1px solid var(--tla-cx-bd); border-radius: 6px; background: var(--tla-cx-bg); color: var(--tla-cx-ink);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.sx-telematica2 .tla-cx .tla-i { width: 12px; height: 12px; }

/* ---------- 5. Harta (lumea de 940×600, camera fixă) ---------- */
.sx-telematica2 .tla-map { position: absolute; left: 10px; top: 42px; width: 340px; height: 236px; overflow: hidden; background: var(--tla-land); }
.sx-telematica2 .tla-map::after { content: ""; position: absolute; inset: 0; z-index: 5; border: 1px dashed var(--tla-map-bd); pointer-events: none; }
.sx-telematica2 .tla-fict {
  position: absolute; left: 8px; bottom: 8px; z-index: 6; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--sx-panel); box-shadow: 0 0 0 1px var(--sx-hair-strong); color: var(--sx-ink2);
  font-family: var(--sx-f-sans); font-size: 11px; font-weight: 500; line-height: 16px; letter-spacing: 0;
}
.sx-telematica2 .tla-world {
  --tla-s: .7489; --tla-tx: -293.6; --tla-ty: -105.9;
  position: absolute; left: 0; top: 0; width: 940px; height: 600px; transform-origin: 0 0;
  transform: translate(calc(var(--tla-tx) * 1px), calc(var(--tla-ty) * 1px)) scale(var(--tla-s));
}
.sx-telematica2 .tla-geo { position: absolute; left: 0; top: 0; width: 940px; height: 600px; max-width: none; overflow: visible; }
.sx-telematica2 .tla-geo path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sx-telematica2 .tla-geo .tla-g-land { fill: var(--tla-land); }
.sx-telematica2 .tla-geo .tla-g-lk { fill: var(--tla-water); stroke: var(--tla-water); stroke-width: 1.6; }
.sx-telematica2 .tla-geo .tla-g-rv { stroke: var(--tla-water); stroke-width: 2.4; }
.sx-telematica2 .tla-geo .tla-g-bd { stroke: var(--tla-bd); stroke-width: 1; stroke-dasharray: 5 3; }
.sx-telematica2 .tla-geo .tla-g-rdc { stroke: var(--tla-rd-c); stroke-width: 3.2; }
.sx-telematica2 .tla-geo .tla-g-rd { stroke: var(--tla-rd); stroke-width: 1.8; }
.sx-telematica2 .tla-geo .tla-g-mwc { stroke: var(--tla-mw-c); stroke-width: 3.9; }
.sx-telematica2 .tla-geo .tla-g-mw { stroke: var(--tla-mw); stroke-width: 2.3; }
.sx-telematica2 .tla-pl, .sx-telematica2 .tla-ct { position: absolute; width: 0; height: 0; }
.sx-telematica2 .tla-pl > span, .sx-telematica2 .tla-ct > span { position: absolute; left: 0; top: 0; transform: scale(calc(1 / var(--tla-s))); transform-origin: 0 0; }
.sx-telematica2 .tla-pl i { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--tla-place-dot); box-shadow: 0 0 0 1.5px var(--tla-land); }
.sx-telematica2 .tla-pl[data-nd] i, .sx-telematica2 .tla-pl[data-wide] { display: none; }
.sx-telematica2 .tla-pl b {
  position: absolute; top: calc(-7px + var(--dy, 0px)); font-size: 10.5px; font-weight: 500; line-height: 14px; letter-spacing: 0;
  color: var(--tla-place); white-space: nowrap; text-shadow: 0 0 2px var(--tla-halo), 0 0 3px var(--tla-halo), 0 0 5px var(--tla-halo);
}
.sx-telematica2 .tla-pl[data-a="r"] b { left: calc(6px + var(--dx, 0px)); }
.sx-telematica2 .tla-pl[data-a="l"] b { right: calc(6px + var(--dx, 0px)); }
.sx-telematica2 .tla-ct b {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap;
  font-size: 9.5px; font-weight: 600; letter-spacing: .22em !important; text-transform: uppercase; color: var(--tla-country);
}
/* semnul camionului deasupra punctului, eticheta neagră dedesubt (telematics.map.php:296-318) */
.sx-telematica2 .tla-mk { position: absolute; width: 0; height: 0; z-index: 2; }
.sx-telematica2 .tla-mk-c { position: absolute; left: 0; top: 0; transform: scale(calc(1 / var(--tla-s))); transform-origin: 0 0; }
.sx-telematica2 .tla-mk-i { position: absolute; left: -10px; top: -21px; width: 20px; height: 20px; max-width: none; overflow: visible; filter: drop-shadow(0 1px 1.2px rgba(0, 0, 0, .28)); }
.sx-telematica2 .tla-mk-l {
  position: absolute; left: -31px; top: 0; display: block; width: 62px; height: 17px;
  background: var(--tla-lbl); color: #ffffff; border: 1px solid #ffffff; font-size: 10px; font-weight: 700; line-height: 15px;
  text-align: center; white-space: nowrap; letter-spacing: 0;
}

/* ---------- 6. Lista de lângă hartă: comanda activă și viteza ---------- */
.sx-telematica2 .tla-list { position: absolute; left: 10px; top: 286px; width: 340px; bottom: 0; font-size: 11px; }
.sx-telematica2 .tla-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) 26px 56px 62px; height: 30px;
  background: var(--tla-sf); border: 1px solid var(--tla-tl); border-top-width: 0;
}
.sx-telematica2 .tla-row:first-child { border-top-width: 1px; }
.sx-telematica2 .tla-c { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 5px; border-left: 1px solid var(--tla-tl); color: var(--tla-ink2); white-space: nowrap; overflow: hidden; }
.sx-telematica2 .tla-c:first-child { border-left: 0; }
.sx-telematica2 .tla-c-n { justify-content: flex-end; }
.sx-telematica2 .tla-c-t { justify-content: flex-start; color: var(--tla-ink); }
.sx-telematica2 .tla-c-t b { font-weight: 700; }
.sx-telematica2 .tla-c-o u { color: var(--tla-link); text-decoration: none; }
.sx-telematica2 .tla-c-v { justify-content: flex-end; color: var(--tla-ink); }
.sx-telematica2 .tla-c-v small { margin-left: 3px; font-size: 9.5px; color: var(--tla-ink3); }
.sx-telematica2 .tla-c-i .tla-i { width: 14px; height: 14px; color: var(--tla-ink3); }

/* notița de creion (scrisul „Cmd Hand” de la #captura): km bord vine din GPS în comandă */
.sx-telematica2 .tla-pen { position: absolute; left: 0; right: 0; top: 160px; color: var(--tla-pen); pointer-events: none; }
.sx-telematica2 .tla-pen-a { display: none; position: absolute; overflow: visible; }
.sx-telematica2 .tla-pen-a path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sx-telematica2 .tla-pen-t { font-family: var(--tla-hand); font-size: 18px; font-weight: 500; line-height: 1.1; letter-spacing: 0 !important; text-align: center; transform: rotate(-1.5deg); }

/* ---------- 7. Lat (pânza 1200×480): foaia în stânga, fereastra Telematic 804×480 în dreapta ---------- */
@container tla (min-width: 880px) {
  .sx-telematica2 .tla-cv { width: 1240px; display: grid; grid-template-columns: 372px 804px; column-gap: 24px; align-items: center; }
  .sx-telematica2 .tla-sheet { width: 372px; }
  .sx-telematica2 .tla-win { width: 804px; height: 480px; border-radius: 16px; }
  .sx-telematica2 .tla-top { height: 40px; padding-right: 12px; }
  .sx-telematica2 .tla-logo { width: 50px; height: 40px; }
  .sx-telematica2 .tla-logo .tla-i { width: 21px; height: 21px; }
  .sx-telematica2 .tla-tab { height: 31px; margin-left: 13px; font-size: 12px; }
  .sx-telematica2 .tla-tab-add { margin-left: 12px; }
  .sx-telematica2 .tla-ezb { height: 26px; font-size: 11.5px; }
  .sx-telematica2 .tla-ezb-av { width: 18px; height: 18px; font-size: 10.5px; }
  .sx-telematica2 .tla-me { width: 26px; height: 26px; margin-left: 8px; }
  .sx-telematica2 .tla-rail { display: flex; }
  .sx-telematica2 .tla-page { left: 50px; top: 40px; border-radius: 12px 0 16px 0; }
  .sx-telematica2 .tla-pt { display: block; }
  .sx-telematica2 .tla-flt { left: 16px; right: 16px; top: 42px; height: 28px; gap: 8px; }
  .sx-telematica2 .tla-sel { height: 28px; font-size: 11.5px; }
  .sx-telematica2 .tla-sel-a { width: 26px; }
  .sx-telematica2 .tla-sel-v { padding: 0 8px; }
  .sx-telematica2 .tla-sel-c { margin-right: 7px; }
  .sx-telematica2 .tla-sel--u { width: 170px; }
  .sx-telematica2 .tla-sel--w { display: inline-flex; }
  .sx-telematica2 .tla-cx { height: 28px; gap: 7px; font-size: 11.5px; }
  .sx-telematica2 .tla-cx .tla-i { width: 14px; height: 14px; }
  .sx-telematica2 .tla-map { left: 16px; top: 82px; width: 436px; height: 342px; }
  .sx-telematica2 .tla-world { --tla-s: .85; --tla-tx: -289; --tla-ty: -97.75; }
  .sx-telematica2 .tla-pl[data-wide] { display: block; }
  .sx-telematica2 .tla-mk-l { left: -35px; width: 70px; height: 18px; font-size: 10.5px; line-height: 16px; }
  .sx-telematica2 .tla-list { left: 464px; top: 82px; width: 274px; height: 342px; bottom: auto; font-size: 11.5px; }
  .sx-telematica2 .tla-row { grid-template-columns: 28px minmax(0, 1fr) 30px 64px 72px; height: 33px; }
  .sx-telematica2 .tla-c { padding: 0 6px; }
  /* săgeata urcă la coloana comenzii (x 170 în listă), scrisul pe două rânduri sub ea */
  .sx-telematica2 .tla-pen { top: 166px; }
  .sx-telematica2 .tla-pen-a { display: block; left: 128px; top: -4px; }
  .sx-telematica2 .tla-pen-t { position: absolute; left: 0; right: 0; top: 62px; font-size: 22px; line-height: 1.05; transform: rotate(-3deg); }
  .sx-telematica2 .tla-pen-2 { display: block; }
}

/* ---------- 8. Sub scenă: furnizorii, un rând liniștit, și prețul ---------- */
.sx-telematica2 .tla-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 28px; margin-top: clamp(22px, 2.4vw, 30px); text-align: center; }
.sx-telematica2 .tla-prov { margin: 0; font-size: 14px; line-height: 1.55; color: var(--sx-ink2); text-wrap: balance; }
.sx-telematica2 .tla-prov-k { font-weight: 600; color: var(--sx-ink); }
.sx-telematica2 .tla-price { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; font-size: 15px; line-height: 1.5; color: var(--sx-ink2); }
.sx-telematica2 .tla-price b { font-weight: 600; color: var(--sx-ink); }

/* lat: titlul și rândul de sub el pe câte un rând, secțiunea încape într-un ecran de 900 */
@media (min-width: 1024px) {
  .sx.sx-telematica2 { --sx-pad-top: 72px; --sx-pad-bottom: 72px; }
  .sx.sx-telematica2 header.tla-head > h2 { max-width: none; }   /* site27.css: .s27 .sx header h2 {max-width: 15.5em} ar rupe titlul în două */
  .sx-telematica2 .tla-head { row-gap: 18px; }
  .sx-telematica2 .tla-sub { max-width: none; }
}
@media (max-width: 599px) {
  .sx-telematica2 .tla-head > h2 { font-size: 31px; }
  .sx-telematica2 .tla-sub { font-size: 16px; }
  .sx-telematica2 .tla-prov { font-size: 13.5px; }
}