/* [cc 16.10] site26 · sx-ziua.css: „Ziua dispecerului” portat din site-sectiuni/sectiuni/dispecerat-a.css (05.10, #50), totul sub .sx-ziua, clasele sx-ziua-*, doar px.
   Faptele și sursele: comentariul de sus din parts/ziua.ro.php (F-dispecerat.md, cod v34-final @ f964de3).
   UN obiect: fereastra programului (cadrul v34), fixată cât derulezi; derularea mută ceasul 07:00 → 17:00 (js/sx-ziua.js).
   Starea scenei: data-beat (0–5) + is-b1 … is-b5 (cumulat). Coregrafia (întârzieri, cursorul, sertarul, emailul) stă DOAR sub
   .is-play, deci fără JS / cu mișcare redusă totul apare pe loc, în starea finală a momentului (implicit 14:40).
   Calendarul: Detaliat de la 900 px în sus; dedesubt Simplificat (azi + 3 zile, fără galben, verdele doar pe primul punct de azi).
   Sertarul „Panou Comenzi” devine foaie de jos pe telefon.
   Temele: secțiunea (ceasul, jurnalul, nota de jos) urmează pagina prin --sx-* (site27.css le leagă de --ink/--line/--bg).
   Fereastra programului și emailul ajuns la client rămân în culorile programului pe ambele teme, ca fereastra „Importare Comandă”
   din partea ai (David: „demo-ul alb, puțin mai întunecat”); pe html[data-theme="dark"] doar se întunecă puțin și primesc umbra de pe negru. */

/* ---------- 0. Tokeni ---------- */
.sx-ziua {
  --zi-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --zi-drw-ease: cubic-bezier(0.4, 0, 0.2, 1);          /* sertarul din program: 0,42 s (css/main.css:1090) */
  /* fereastra programului: bara de sus și șina sunt închise (ca în v34); pânza și ferestrele, deschise */
  --zi-bb: #1e1d1a; --zi-bb-hi: #2d2b27; --zi-bb-ink: #efebe1; --zi-bb-mute: #a19c91;
  --zi-msg-on: #7cb8f2;                                   /* plicul cu mesaje necitite (.msg-state) */
  --zi-cv: #f7f6f2; --zi-dot: rgba(29, 39, 51, .085);
  --zi-sf: #ffffff; --zi-sf2: #f8f7f3; --zi-line: #e3e1db; --zi-line2: #d3d0c8;
  --zi-ink: #1d2733; --zi-ink2: #4f5b68; --zi-ink3: #5d6876;
  --zi-acc: #1a74a2; --zi-acc-ink: #ffffff; --zi-acc-soft: #e7f0f7; --zi-acc-text: #17618a;
  --zi-link: #1f5f94;                                     /* ID-ul comenzii (link, italic) */
  --zi-info: #31708f;                                     /* silueta șoferului (text-info) */
  --zi-primary: #2a6aa6;                                  /* „Planificat”, „Intervenții”, titlul ferestrei (text-primary) */
  --zi-danger: #b3302a;                                   /* cheia de service, ceasul „Planificare Fixă” (text-danger) */
  --zi-mute-icon: #9a9a9a;                                /* siluetele gri din Simplificat (#aaaaaa) */
  --zi-today: #f2f5a9;                                    /* truck_calendar_color_today */
  --zi-cur: #99ff66;                                      /* truck_calendar_color_current_location */
  --zi-late: #e3150e;                                     /* triunghiul „În întârziere” (#FF0000) */
  --zi-ban: #c25555;                                      /* „Fără comandă” (#cc6060) */
  --zi-arrow: #428bca;
  --zi-drw-bg: #e6e9ee; --zi-drw-title: #d9d9d9; --zi-drw-title-ink: #111111;
  --zi-row: #ffffff; --zi-row-ink: #1a1a1a; --zi-row-loc: #535960; --zi-row-date: #646a72;
  --zi-row-sel: #fff7cc;                                  /* rândul ales (li.active) */
  --zi-btn-warn: #f0ad4e; --zi-btn-warn-ink: #2b1a00;     /* „Trimitere” (btn-warning) */
  --zi-tip-bg: #ffffff; --zi-tip-line: #767676; --zi-tip-ink: #1d1d1d;
  --zi-scrim: rgba(14, 16, 20, .44);
  --zi-msg-new: #fff7cc;
  --zi-badge: #cf271d;
  /* vocea sitului peste fereastră (notele, iconița emailului): cerneala închisă, ca accentul ferestrei ai pe site27 */
  --zi-mark: #142a3e; --zi-mark-soft: rgba(20, 42, 62, .07); --zi-wire: rgba(29, 39, 51, .42);
  --zi-glow: rgba(20, 42, 62, .10);
  --zi-note-bg: #1d2733; --zi-note-ink: #ffffff; --zi-note-ring: rgba(23, 32, 43, .0);
  --zi-note-sh: 0 1px 2px rgba(23, 32, 43, .14), 0 10px 22px -8px rgba(23, 32, 43, .38);
  --zi-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), 0 90px 140px -60px rgba(23, 32, 43, .30);
  --zi-pop-sh: 0 0 0 1px rgba(23, 32, 43, .08), 0 1px 2px rgba(23, 32, 43, .08), 0 12px 26px -10px rgba(23, 32, 43, .26),
               0 34px 64px -26px rgba(23, 32, 43, .32);
  --zi-mail-sh: 0 0 0 1px rgba(23, 32, 43, .07), 0 2px 4px rgba(23, 32, 43, .08), 0 18px 36px -12px rgba(23, 32, 43, .30),
                0 50px 90px -34px rgba(23, 32, 43, .38);
  /* coregrafia: când apasă dispecerul „Caută” și când se schimbă celulele (desktop; pe telefon mai târziu, după mesaj) */
  --zi-tap1: 1.3s; --zi-upd1: 1.62s; --zi-tap3: 1.6s; --zi-upd3: 1.92s; --zi-note3: 2.5s;
  /* 15:00: cursorul trece peste cele două rânduri B 101 DEM (bula cu CIRC-41), apoi ajunge la CJ 12 ABC la --zi-hv;
     --zi-pitch = un rând din sertar + golul dintre rânduri (cursorul coboară exact cu atât) */
  --zi-hv: 3.3s; --zi-pitch: 36.25px;
}
/* tema închisă a paginii: fereastra rămâne deschisă, puțin întunecată (ca .sx-ai-win în site27.css), cu umbra de pe negru */
html[data-theme="dark"] .sx-ziua {
  --zi-glow: rgba(255, 255, 255, .035);
  --zi-win-sh: 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .45), 0 40px 90px -30px rgba(0, 0, 0, .8);
  --zi-mail-sh: 0 0 0 1px rgba(255, 255, 255, .10), 0 2px 6px rgba(0, 0, 0, .45), 0 40px 80px -24px rgba(0, 0, 0, .85);
}
html[data-theme="dark"] .sx-ziua .sx-ziua-win, html[data-theme="dark"] .sx-ziua .sx-ziua-mail { filter: brightness(.92) contrast(1.06); }
@media (max-width: 639px) {
  .sx-ziua { --zi-tap1: 2.5s; --zi-upd1: 2.8s; --zi-tap3: 3s; --zi-upd3: 3.3s; --zi-note3: 3.85s; --zi-hv: 1.9s; }
}

.sx-ziua { overflow-x: clip; padding-bottom: clamp(48px, 6vw, 80px); }
.sx-ziua .sx-ziua-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sx-ziua .sx-ziua-i { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sx-ziua .sx-ziua-g { width: 11px; height: 11px; flex: 0 0 auto; fill: currentColor; stroke: none; vertical-align: -1.5px; overflow: visible; }
/* final.css (pagina 1) are svg{display:block}: glifele din program stau în rând cu textul, ca în celulele calendarului */
.sx-ziua .sx-ziua-i, .sx-ziua .sx-ziua-g { display: inline-block; }

/* ---------- 1. Antetul (eticheta, titlul, lede-ul; pe site27 lede-ul iese și intră rândul de fapte) ---------- */
.sx-ziua .sx-ziua-head { margin-bottom: 0; }
.sx-ziua .sx-ziua-nw { white-space: nowrap; }
.sx-ziua .sx-ziua-demo { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--sx-ink2); letter-spacing: -0.005em; word-spacing: 0; }
.sx-ziua .sx-ziua-foot { margin-top: clamp(28px, 4vw, 48px); font-size: 13px; line-height: 1.5; color: var(--sx-ink2); text-align: center; }

/* ---------- 2. Pista și scena fixată ---------- */
.sx-ziua .sx-ziua-track { position: relative; margin-top: var(--sx-head-after); }
/* cu mișcare: pista = scena + 6 pași de 48vh; scena e centrată, deci pista urcă cu golul de deasupra ferestrei
   (antetul rămâne la --sx-head-after, ca la celelalte părți) */
.sx-ziua.sx-ziua-js .sx-ziua-track { height: calc(100vh + 6 * 48vh); margin-top: calc(var(--sx-head-after) - (100vh - var(--zi-wh) - var(--zi-band)) / 2); }
.sx-ziua .sx-ziua-pin { position: relative; }
.sx-ziua.sx-ziua-js .sx-ziua-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; pointer-events: none; }
.sx-ziua.sx-ziua-js .sx-ziua-grid { pointer-events: auto; }
@supports (height: 100svh) {
  .sx-ziua.sx-ziua-js .sx-ziua-track { height: calc(100svh + 6 * 48svh); margin-top: calc(var(--sx-head-after) - (100svh - var(--zi-wh) - var(--zi-band)) / 2); }
  .sx-ziua.sx-ziua-js .sx-ziua-pin { height: 100svh; }
}
.sx-ziua .sx-ziua-grid {
  width: 100%; max-width: var(--sx-wrap); margin-inline: auto; padding-inline: var(--sx-gutter);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "time" "stage" "log"; row-gap: 14px;
}
.sx-ziua .sx-ziua-side { display: contents; }
.sx-ziua .sx-ziua-time { grid-area: time; }
.sx-ziua .sx-ziua-stage { grid-area: stage; }
.sx-ziua .sx-ziua-log { grid-area: log; }
@media (min-width: 640px) {
  .sx-ziua .sx-ziua-grid { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "time log" "stage stage"; column-gap: clamp(28px, 4vw, 48px); row-gap: 20px; align-items: end; }
}
@media (min-width: 1200px) {
  /* coloana din stânga începe la marginea de sus a ferestrei și nu sare când textul momentului e mai lung */
  .sx-ziua .sx-ziua-grid { grid-template-columns: 256px minmax(0, 1fr); grid-template-areas: "side stage"; column-gap: clamp(36px, 3.2vw, 52px); align-items: start; }
  .sx-ziua .sx-ziua-side { grid-area: side; display: flex; flex-direction: column; gap: 18px; margin-top: -3px; }
  .sx-ziua.sx-ziua-js .sx-ziua-side { max-height: var(--zi-wh); }
  .sx-ziua:not(.sx-ziua-js) .sx-ziua-stage { position: sticky; top: 24px; }
}

/* ---------- 3. Ceasul ---------- */
.sx-ziua .sx-ziua-time { display: grid; grid-template-columns: auto; justify-items: start; row-gap: 2px; }
.sx-ziua .sx-ziua-date { font-size: 14px; line-height: 1.4; color: var(--sx-ink2); letter-spacing: -0.01em; word-spacing: 0; }
.sx-ziua .sx-ziua-clock {
  font-size: clamp(60px, 6.1vw, 92px); font-weight: 300; line-height: .95; letter-spacing: -0.045em; word-spacing: 0;
  font-variant-numeric: tabular-nums; color: var(--sx-ink); white-space: nowrap; margin-left: -.04em;
}
.sx-ziua .sx-ziua-clock-c { color: var(--sx-ink2); position: relative; top: -.07em; margin-inline: .015em; }
.sx-ziua .sx-ziua-ruler { position: relative; width: 236px; height: 30px; margin-top: 14px; }
.sx-ziua .sx-ziua-ruler::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--sx-hair-strong); }
.sx-ziua .sx-ziua-ruler::after {
  content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 9px;
  background: repeating-linear-gradient(to right, var(--sx-hair-strong) 0 1px, transparent 1px calc((100% - 1px) / 10));
}
.sx-ziua .sx-ziua-ruler-fill { position: absolute; z-index: 1; left: 0; top: 5.5px; height: 2px; width: calc(var(--zi-q, 0) * 100%); border-radius: 2px; background: var(--sx-accent); }
.sx-ziua .sx-ziua-ruler-dot { position: absolute; z-index: 2; top: 2px; left: calc(var(--zi-q, 0) * 100%); width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--sx-accent); box-shadow: 0 0 0 3px var(--sx-bg0); }
.sx-ziua .sx-ziua-ruler-l {
  position: absolute; top: 15px; left: calc(var(--x) * 100%); transform: translateX(calc(var(--x) * -100%));
  font-size: 11.5px; line-height: 1.2; color: var(--sx-ink2); font-variant-numeric: tabular-nums; letter-spacing: 0; word-spacing: 0;
}
.sx-ziua .sx-ziua-steps { display: none; gap: 5px; align-items: center; }
.sx-ziua .sx-ziua-steps i { width: 6px; height: 6px; border-radius: 50%; background: var(--sx-hair-strong); transition: background-color .3s ease, transform .3s ease; }
.sx-ziua .sx-ziua-steps i.is-past { background: color-mix(in srgb, var(--sx-accent) 45%, var(--sx-hair-strong)); }
.sx-ziua .sx-ziua-steps i.is-on { background: var(--sx-accent); transform: scale(1.35); }

/* ---------- 4. Jurnalul zilei (butoanele duc la moment) ---------- */
.sx-ziua .sx-ziua-log { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1px; }
.sx-ziua .sx-ziua-log::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 1px; background: var(--sx-hair-strong); }
.sx-ziua .sx-ziua-li { position: relative; padding-left: 24px; }
.sx-ziua .sx-ziua-li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sx-bg0); box-shadow: inset 0 0 0 1.5px var(--sx-hair-strong); transition: background-color .3s ease, box-shadow .3s ease;
}
.sx-ziua .sx-ziua-li.is-past::before { background: color-mix(in srgb, var(--sx-accent) 50%, var(--sx-bg0)); box-shadow: none; }
.sx-ziua .sx-ziua-li.is-on::before { background: var(--sx-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sx-accent) 16%, transparent); }
.sx-ziua .sx-ziua-lb {
  display: flex; align-items: baseline; gap: 10px; width: 100%; margin: 0; padding: 3px 6px 3px 0; border: 0; border-radius: 6px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sx-ziua .sx-ziua-lb time {
  flex: 0 0 40px; font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--sx-ink2);
  letter-spacing: 0; word-spacing: 0; transition: color .25s ease;
}
.sx-ziua .sx-ziua-lt { font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; word-spacing: 0; color: var(--sx-ink2); transition: color .25s ease; text-wrap: balance; }
.sx-ziua .sx-ziua-li.is-on .sx-ziua-lt { color: var(--sx-ink); }
.sx-ziua .sx-ziua-li.is-on time { color: var(--sx-accent-text); font-weight: 600; }
.sx-ziua .sx-ziua-lb:hover .sx-ziua-lt { color: var(--sx-ink); }
.sx-ziua .sx-ziua-lb:hover time { color: var(--sx-ink); }
.sx-ziua .sx-ziua-lb:active .sx-ziua-lt { color: var(--sx-accent-text); }
.sx-ziua .sx-ziua-lb:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 2px; border-radius: 6px; }
.sx-ziua .sx-ziua-lp { padding: 3px 0 9px; }
.sx-ziua .sx-ziua-lp > p:not(.sx-sr) { font-size: 15px; line-height: 1.5; color: var(--sx-ink2); max-width: 38ch; text-wrap: pretty; letter-spacing: -0.012em; word-spacing: -0.02em; }
/* cu mișcare, pe lat: doar momentul de acum își arată textul (celelalte rămân pentru cititorul de ecran) */
.sx-ziua.sx-ziua-js .sx-ziua-li:not(.is-on) .sx-ziua-lp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sx-ziua.sx-ziua-js .sx-ziua-li.is-on .sx-ziua-lp { animation: sx-ziua-fade .45s var(--zi-ease) both; }
@keyframes sx-ziua-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* sub 1200 px: ceasul și momentul de acum stau deasupra ferestrei; restul jurnalului e doar pentru cititorul de ecran */
@media (max-width: 1199px) {
  .sx-ziua .sx-ziua-ruler { display: none; }
  .sx-ziua .sx-ziua-steps { display: flex; margin-top: 10px; }
  .sx-ziua .sx-ziua-demo { margin-top: 6px; }
  .sx-ziua.sx-ziua-js .sx-ziua-log::before, .sx-ziua.sx-ziua-js .sx-ziua-li::before { display: none; }
  .sx-ziua.sx-ziua-js .sx-ziua-li { padding-left: 0; }
  .sx-ziua.sx-ziua-js .sx-ziua-li:not(.is-on):not(:focus-within) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .sx-ziua.sx-ziua-js .sx-ziua-lp { padding-left: 50px; padding-bottom: 0; }
  .sx-ziua.sx-ziua-js .sx-ziua-lp > p:not(.sx-sr) { max-width: 62ch; }
}
@media (max-width: 639px) {
  .sx-ziua .sx-ziua-time { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "clock date steps" "demo demo demo"; align-items: end; column-gap: 12px; }
  .sx-ziua .sx-ziua-clock { grid-area: clock; font-size: 46px; }
  .sx-ziua .sx-ziua-date { grid-area: date; font-size: 13px; line-height: 1.3; padding-bottom: 5px; }
  .sx-ziua .sx-ziua-date-d, .sx-ziua .sx-ziua-date-n { display: block; }
  .sx-ziua .sx-ziua-steps { grid-area: steps; margin: 0 0 9px; }
  .sx-ziua .sx-ziua-demo { grid-area: demo; margin-top: 4px; font-size: 12.5px; }
  .sx-ziua.sx-ziua-js .sx-ziua-lp { padding-left: 0; padding-top: 4px; }
  .sx-ziua .sx-ziua-lt { font-size: 16px; }
  .sx-ziua .sx-ziua-lp > p:not(.sx-sr) { font-size: 15px; }
}

/* ---------- 5. Fereastra programului ---------- */
/* înălțimea ferestrei stă pe secțiune: o folosesc și coloana din stânga, și pista (--zi-band = ceasul de deasupra, sub 1200 px, cu rândul „Exemplu cu date inventate”) */
.sx-ziua { --zi-wh: 652px; --zi-band: 0px; }
.sx-ziua.sx-ziua-js { --zi-wh: min(652px, calc(100vh - 64px)); }
@media (max-width: 1199px) {
  .sx-ziua { --zi-wh: 612px; --zi-band: 148px; }
  .sx-ziua.sx-ziua-js { --zi-wh: min(612px, calc(100vh - 180px)); }
}
@media (max-width: 639px) {
  .sx-ziua { --zi-wh: 456px; --zi-band: 222px; }
  .sx-ziua.sx-ziua-js { --zi-wh: min(456px, calc(100vh - 322px)); }
}
@supports (height: 100svh) {
  .sx-ziua.sx-ziua-js { --zi-wh: min(652px, calc(100svh - 64px)); }
  @media (max-width: 1199px) { .sx-ziua.sx-ziua-js { --zi-wh: min(612px, calc(100svh - 180px)); } }
  @media (max-width: 639px) { .sx-ziua.sx-ziua-js { --zi-wh: min(456px, calc(100svh - 322px)); } }
}
.sx-ziua .sx-ziua-stage { position: relative; }

.sx-ziua .sx-ziua-glow { position: absolute; left: -7%; right: -7%; top: -10%; bottom: -12%; pointer-events: none; background: radial-gradient(closest-side, var(--zi-glow), rgba(0, 0, 0, 0)); }
.sx-ziua .sx-ziua-win {
  position: relative; z-index: 1; height: var(--zi-wh); min-height: 300px; border-radius: 16px; overflow: hidden;
  display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: 40px minmax(0, 1fr);
  background: var(--zi-bb); box-shadow: var(--zi-win-sh); color: var(--zi-ink);
  font-family: var(--sx-f-sans); font-size: 11px; line-height: 1.3; font-variant-numeric: tabular-nums;
}
.sx-ziua .sx-ziua-win, .sx-ziua .sx-ziua-win * { letter-spacing: -0.004em; word-spacing: 0; }
.sx-ziua .sx-ziua-win :where(p, ul, ol) { margin: 0; padding: 0; list-style: none; }
.sx-ziua .sx-ziua-win :where(b, strong) { color: inherit; font-weight: 700; }
.sx-ziua .sx-ziua-win :where(i) { font-style: normal; }

/* bara de sus */
.sx-ziua .sx-ziua-top { grid-column: 1 / -1; display: flex; align-items: center; min-width: 0; padding-right: 10px; color: var(--zi-bb-mute); }
.sx-ziua .sx-ziua-logo { flex: 0 0 auto; width: 48px; height: 40px; display: grid; place-items: center; color: var(--zi-bb-ink); }
.sx-ziua .sx-ziua-i--logo { width: 21px; height: 21px; }
.sx-ziua .sx-ziua-tabs { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; align-items: flex-end; gap: 3px; padding-left: 12px; }
.sx-ziua .sx-ziua-tab {
  position: relative; flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; height: 31px; padding: 0 13px 0 11px;
  border-radius: 9px 9px 0 0; font-size: 11.5px; font-weight: 500; color: var(--zi-bb-mute); white-space: nowrap;
  transition: background-color .3s ease, color .3s ease;
}
.sx-ziua .sx-ziua-tab .sx-ziua-i { width: 13px; height: 13px; }
.sx-ziua .sx-ziua-tab-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sx-ziua .sx-ziua-tab::before, .sx-ziua .sx-ziua-tab::after { content: ""; position: absolute; bottom: 0; width: 9px; height: 9px; opacity: 0; transition: opacity .3s ease; }
.sx-ziua .sx-ziua-tab::before { left: -9px; background: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 8.5px, var(--zi-cv) 9px); }
.sx-ziua .sx-ziua-tab::after { right: -9px; background: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 8.5px, var(--zi-cv) 9px); }
.sx-ziua .sx-ziua-stage:not(.is-b4) .sx-ziua-tab--cal, .sx-ziua .sx-ziua-stage.is-b4 .sx-ziua-tab--cmd { background: var(--zi-cv); color: var(--zi-ink); }
.sx-ziua .sx-ziua-stage:not(.is-b4) .sx-ziua-tab--cal::before, .sx-ziua .sx-ziua-stage:not(.is-b4) .sx-ziua-tab--cal::after,
.sx-ziua .sx-ziua-stage.is-b4 .sx-ziua-tab--cmd::before, .sx-ziua .sx-ziua-stage.is-b4 .sx-ziua-tab--cmd::after { opacity: 1; }
.sx-ziua .sx-ziua-scs { flex: 0 0 auto; display: flex; align-items: center; gap: 1px; margin-left: 8px; }
.sx-ziua .sx-ziua-sc { position: relative; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--zi-bb-mute); transition: color .3s ease; }
.sx-ziua .sx-ziua-sc .sx-ziua-i { width: 17px; height: 17px; }
.sx-ziua .sx-ziua-sc-sep { width: 1px; height: 18px; margin: 0 8px 0 7px; background: rgba(255, 255, 255, .13); }
.sx-ziua .sx-ziua-stage.is-b1 .sx-ziua-sc--msg { color: var(--zi-msg-on); }
.sx-ziua .sx-ziua-badge {
  position: absolute; top: 1px; right: -1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--zi-badge);
  color: #ffffff; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center; box-shadow: 0 0 0 2px var(--zi-bb);
  transform: scale(0); transition: transform .3s var(--zi-ease);
}
.sx-ziua .sx-ziua-badge i { display: none; }
.sx-ziua .sx-ziua-stage.is-b1 .sx-ziua-badge { transform: scale(1); }
.sx-ziua .sx-ziua-stage[data-beat="1"] .sx-ziua-n1, .sx-ziua .sx-ziua-stage[data-beat="2"] .sx-ziua-n2, .sx-ziua .sx-ziua-stage.is-b3 .sx-ziua-n5 { display: inline; }
.sx-ziua .sx-ziua-me { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--zi-bb-hi); color: var(--zi-bb-ink); font-size: 10px; font-weight: 600; }

/* șina din stânga */
.sx-ziua .sx-ziua-rail { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 12px; }
.sx-ziua .sx-ziua-ri { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--zi-bb-mute); transition: background-color .3s ease, color .3s ease; }
.sx-ziua .sx-ziua-stage:not(.is-b4) .sx-ziua-ri--cal, .sx-ziua .sx-ziua-stage.is-b4 .sx-ziua-ri--cmd { background: var(--zi-bb-hi); color: var(--zi-bb-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }

/* pânza: puncte la 20 px, colțul rotunjit sus-stânga */
.sx-ziua .sx-ziua-canvas {
  grid-column: 2; grid-row: 2; position: relative; overflow: hidden; border-radius: 12px 0 16px 0;
  background-color: var(--zi-cv); background-image: radial-gradient(circle, var(--zi-dot) 1px, rgba(0, 0, 0, 0) 1.3px);
  background-size: 20px 20px; background-position: 10px 10px;
}
.sx-ziua .sx-ziua-pg { position: absolute; inset: 0; padding: 12px 14px 0; overflow: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.sx-ziua .sx-ziua-pg--cmd { opacity: 0; visibility: hidden; }
.sx-ziua .sx-ziua-stage.is-b4 .sx-ziua-pg--cal { opacity: 0; visibility: hidden; }
.sx-ziua .sx-ziua-stage.is-b4 .sx-ziua-pg--cmd { opacity: 1; visibility: visible; transition: opacity .3s ease .08s, visibility 0s linear 0s; }

/* butoane și câmpuri din program */
.sx-ziua .sx-ziua-ph { display: flex; align-items: center; gap: 7px; min-height: 26px; margin-bottom: 10px; white-space: nowrap; }
.sx-ziua .sx-ziua-pt { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; margin-right: 6px; }
.sx-ziua .sx-ziua-sel {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 6px 0 9px; border-radius: 6px;
  background: var(--zi-sf); box-shadow: inset 0 0 0 1px var(--zi-line2); color: var(--zi-ink); font-size: 11px;
}
.sx-ziua .sx-ziua-sel .sx-ziua-i { width: 12px; height: 12px; color: var(--zi-ink3); }
.sx-ziua .sx-ziua-sel-s { display: none; }
.sx-ziua .sx-ziua-btn {
  position: relative; display: inline-flex; align-items: center; height: 24px; padding: 0 13px; border-radius: 6px;
  background: var(--zi-acc); color: var(--zi-acc-ink); font-size: 11px; font-weight: 600;
}
.sx-ziua .sx-ziua-ib { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--zi-sf); box-shadow: inset 0 0 0 1px var(--zi-line2); color: var(--zi-ink2); }
.sx-ziua .sx-ziua-ib .sx-ziua-i { width: 13px; height: 13px; }

/* ---------- 6. Calendar Camioane (Detaliat) ---------- */
.sx-ziua .sx-ziua-cal-w { position: relative; border-radius: 8px; background: var(--zi-sf); box-shadow: 0 0 0 1px var(--zi-line), 0 1px 2px rgba(23, 32, 43, .05); overflow: hidden; }
/* celulele la 11,5 px (ca ferestrele din celelalte secțiuni); antetul rămâne la 10,5 / 9,5 px. Tabel „auto”: coloanele goale de
   sâmbătă și duminică iau 5%, dar niciodată mai puțin decât numele zilei (în program, tot tabel auto) */
.sx-ziua .sx-ziua-cal-w { container-type: inline-size; }
.sx-ziua .sx-ziua-cal { width: 100%; table-layout: auto; border-collapse: collapse; font-size: 11px; line-height: 13px; color: var(--zi-ink); }
/* 11,5 px acolo unde încape tot calendarul în fereastră (lat ≥ 1280 și înalt ≥ 716: fereastra are 652 px); 10,5 px în tabelele
   înguste (900–999 px, 1200–1239 px și modul Simplificat de pe tabletă) */
@media (min-width: 1280px) and (min-height: 716px) { .sx-ziua .sx-ziua-cal { font-size: 11.5px; line-height: 14px; } }
@container (max-width: 800px) { .sx-ziua .sx-ziua-cal { font-size: 10.5px; line-height: 12.5px; } }
.sx-ziua .sx-ziua-cal th, .sx-ziua .sx-ziua-cal td { border: 1px solid var(--zi-line); padding: 3px 4px 4px; vertical-align: top; text-align: left; overflow: visible; }
.sx-ziua .sx-ziua-cal tr > :first-child { border-left: 0; }
.sx-ziua .sx-ziua-cal tr > :last-child { border-right: 0; }
.sx-ziua .sx-ziua-cal thead tr > * { border-top: 0; }
.sx-ziua .sx-ziua-cal tbody tr:last-child > * { border-bottom: 0; }
.sx-ziua .sx-ziua-cal thead th { font-size: 10.5px; line-height: 13px; font-weight: 700; white-space: nowrap; background: var(--zi-sf); padding-block: 5px 4px; }
.sx-ziua .sx-ziua-cal thead th:is(.sx-ziua-c-sat, .sx-ziua-c-sun) { white-space: normal; padding-inline: 3px; }
.sx-ziua .sx-ziua-cal thead th > span { display: block; }
.sx-ziua .sx-ziua-cal thead th > span + span:not(.sx-ziua-r) { font-weight: 600; font-size: 9.5px; color: var(--zi-ink2); }
.sx-ziua .sx-ziua-cal thead .sx-ziua-u-today { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.sx-ziua .sx-ziua-cal thead th.sx-ziua-c-tue .sx-ziua-u-today + .sx-ziua-u-today { color: var(--zi-ink); }
.sx-ziua .sx-ziua-cal .sx-ziua-c-tk { width: 10.2%; }
.sx-ziua .sx-ziua-cal .sx-ziua-c-sat, .sx-ziua .sx-ziua-cal .sx-ziua-c-sun { width: 5%; }
.sx-ziua .sx-ziua-cal .sx-ziua-c-mon { width: 13.2%; }
.sx-ziua .sx-ziua-cal .sx-ziua-c-tue { width: 19.8%; }
.sx-ziua .sx-ziua-cal .sx-ziua-c-wed { width: 15.6%; }
.sx-ziua .sx-ziua-cal .sx-ziua-c-thu { width: 16%; }
.sx-ziua .sx-ziua-cal .sx-ziua-c-fri { width: 15.2%; }
.sx-ziua .sx-ziua-cal tbody tr:nth-child(even) > * { background: var(--zi-sf2); }
.sx-ziua .sx-ziua-cal tbody tr > td.sx-ziua-c-tue, .sx-ziua .sx-ziua-cal thead tr > th.sx-ziua-c-tue { background: var(--zi-today); }
.sx-ziua .sx-ziua-r {
  display: inline-grid !important; place-items: center; width: 15px; height: 14px; margin-top: 2px; border-radius: 3px;
  background: var(--zi-sf); box-shadow: inset 0 0 0 1px var(--zi-line2); color: #c9302c; font-size: 9px; font-weight: 800; line-height: 1;
}
.sx-ziua .sx-ziua-tk { font-weight: 700; white-space: nowrap; }
.sx-ziua .sx-ziua-tk-nr { font-weight: 500; color: var(--zi-ink2); }
.sx-ziua .sx-ziua-tk-l { display: block; margin-top: 2px; color: var(--zi-primary); font-weight: 600; }
.sx-ziua .sx-ziua-tk-dr { display: none; color: var(--zi-mute-icon); margin-right: 3px; }
.sx-ziua .sx-ziua-p { position: relative; margin: -2px -2px; padding: 2px 2px 3px; border-radius: 3px; transition: background-color .35s ease; }
.sx-ziua .sx-ziua-p > p { margin: 0; overflow-wrap: anywhere; }
.sx-ziua .sx-ziua-p > .sx-ziua-ps { display: none; }
.sx-ziua .sx-ziua-hr { border: 0; border-top: 1px solid var(--zi-line); margin: 4px 0 3px; }
.sx-ziua .sx-ziua-oid { color: var(--zi-link); font-style: italic !important; }
.sx-ziua .sx-ziua-gu { color: var(--zi-info); width: 10px; height: 11px; }
.sx-ziua .sx-ziua-fix { color: var(--zi-danger); width: 10px; height: 10px; }
.sx-ziua .sx-ziua-wr { color: var(--zi-danger); width: 13px; height: 13px; vertical-align: -2.5px; }
.sx-ziua .sx-ziua-plus { font-weight: 600; font-size: 12px; margin-left: 2px; }
/* ora plecării și săgețile apar abia după „Caută” */
.sx-ziua .sx-ziua-t1 { display: none; }
.sx-ziua .sx-ziua-tw { display: inline-grid; vertical-align: -1.5px; }
.sx-ziua .sx-ziua-tw > .sx-ziua-g { grid-area: 1 / 1; vertical-align: 0; opacity: 0; transition: opacity .25s ease; }
/* punctul curent: Timișoara de ieri, apoi Oradea (09:20), Arad și Nürnberg (14:40) */
.sx-ziua .sx-ziua-p--tim,
.sx-ziua .sx-ziua-stage.is-b1 .sx-ziua-p--ora,
.sx-ziua .sx-ziua-stage.is-b3 .sx-ziua-p--arad,
.sx-ziua .sx-ziua-stage.is-b3 .sx-ziua-p--nur { background: var(--zi-cur); }
.sx-ziua .sx-ziua-stage.is-b1:not(.is-b2) .sx-ziua-p--ora .sx-ziua-tw-rt,
.sx-ziua .sx-ziua-stage.is-b2 .sx-ziua-p--ora .sx-ziua-tw-go,
.sx-ziua .sx-ziua-stage.is-b3 .sx-ziua-p--arad .sx-ziua-tw-go,
.sx-ziua .sx-ziua-stage.is-b3 .sx-ziua-p--nur .sx-ziua-tw-rt { opacity: 1; }
.sx-ziua .sx-ziua-stage.is-b2 .sx-ziua-p--ora .sx-ziua-t0, .sx-ziua .sx-ziua-stage.is-b3 .sx-ziua-p--arad .sx-ziua-t0 { display: none; }
.sx-ziua .sx-ziua-stage.is-b2 .sx-ziua-p--ora .sx-ziua-t1, .sx-ziua .sx-ziua-stage.is-b3 .sx-ziua-p--arad .sx-ziua-t1 { display: inline; }

/* nota de la CJ 12 ABC (vocea sitului, nu text din program) */
.sx-ziua .sx-ziua-note {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; padding: 6px 12px 6px 11px; border-radius: 999px;
  background: var(--zi-note-bg); color: var(--zi-note-ink); box-shadow: var(--zi-note-sh), 0 0 0 1px var(--zi-note-ring);
  font-family: var(--sx-f-sans); font-size: 12px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; font-style: normal;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
}
.sx-ziua .sx-ziua-note::before {
  content: ""; position: absolute; top: 50%; height: 1.5px; margin-top: -.75px;
  background: repeating-linear-gradient(to right, var(--zi-wire) 0 6px, rgba(0, 0, 0, 0) 6px 10px);
}
.sx-ziua .sx-ziua-note::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--zi-mark); box-shadow: 0 0 0 2px var(--zi-sf); }
.sx-ziua .sx-ziua-note--late { left: calc(100% + 30px); top: 6px; }
.sx-ziua .sx-ziua-note--late::before { right: 100%; width: 30px; }
.sx-ziua .sx-ziua-note--late::after { left: -33px; }
.sx-ziua .sx-ziua-stage.is-b3 .sx-ziua-note--late { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s linear 0s; }

/* ---------- 7. Lista „Mesaje” de sub plic ---------- */
.sx-ziua .sx-ziua-msgs {
  position: absolute; z-index: 6; top: 41px; right: 44px; width: 292px; padding: 6px 6px 4px; border-radius: 10px;
  background: var(--zi-sf); color: var(--zi-ink); box-shadow: var(--zi-pop-sh);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .3s var(--zi-ease), visibility 0s linear .2s;
}
.sx-ziua .sx-ziua-msgs::before { content: ""; position: absolute; top: -5px; right: 26px; width: 10px; height: 10px; background: var(--zi-sf); transform: rotate(45deg); border-radius: 2px 0 0 0; }
.sx-ziua .sx-ziua-stage:is([data-beat="1"], [data-beat="2"], [data-beat="3"]) .sx-ziua-msgs { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .4s var(--zi-ease), visibility 0s linear 0s; }
.sx-ziua .sx-ziua-msgs-h { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 7px 6px; font-size: 11.5px; font-weight: 700; }
.sx-ziua .sx-ziua-msgs-c { font-size: 10.5px; font-weight: 500; color: var(--zi-ink3); }
/* fiecare mesaj e o grilă cu un rând: în coregrafie rândul crește de la 0fr la 1fr, deci mesajul nou își face loc singur
   (nu rămâne un gol alb care așteaptă să fie umplut) */
.sx-ziua .sx-ziua-m { display: none; grid-template-rows: 1fr; padding: 7px 8px 8px; border-top: 1px solid var(--zi-line); border-radius: 0; transition: background-color .6s ease; }
.sx-ziua .sx-ziua-m-in { min-height: 0; overflow: hidden; }
.sx-ziua .sx-ziua-stage.is-b1 .sx-ziua-m--1, .sx-ziua .sx-ziua-stage.is-b2 .sx-ziua-m--2,
.sx-ziua .sx-ziua-stage.is-b3 :is(.sx-ziua-m--3, .sx-ziua-m--4, .sx-ziua-m--5) { display: grid; }
.sx-ziua .sx-ziua-stage.is-b3 :is(.sx-ziua-m--1, .sx-ziua-m--2) { display: none; }
.sx-ziua .sx-ziua-stage[data-beat="1"] .sx-ziua-m--1, .sx-ziua .sx-ziua-stage[data-beat="2"] .sx-ziua-m--2, .sx-ziua .sx-ziua-stage[data-beat="3"] .sx-ziua-m--5 { background: var(--zi-msg-new); border-radius: 6px; border-top-color: transparent; }
.sx-ziua .sx-ziua-m-h { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; font-size: 10.5px; color: var(--zi-ink3); }
.sx-ziua .sx-ziua-m-h b { color: var(--zi-ink); font-weight: 600; }
.sx-ziua .sx-ziua-m-t { font-size: 11px; line-height: 1.4; color: var(--zi-ink); }

/* ---------- 8. Pagina Comenzi ---------- */
.sx-ziua .sx-ziua-mast { display: flex; align-items: center; gap: 8px; min-height: 28px; margin-bottom: 10px; white-space: nowrap; }
.sx-ziua .sx-ziua-mast-t { font-size: 16px; font-weight: 700; letter-spacing: -0.025em; }
.sx-ziua .sx-ziua-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; background: var(--zi-acc-soft); color: var(--zi-acc-text); font-size: 10.5px; font-weight: 600; }
.sx-ziua .sx-ziua-sp { flex: 1 1 auto; }
.sx-ziua .sx-ziua-obtn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 7px;
  background: var(--zi-sf); box-shadow: inset 0 0 0 1px var(--zi-line2); color: var(--zi-ink); font-size: 11px; font-weight: 500;
}
.sx-ziua .sx-ziua-obtn .sx-ziua-i { width: 12px; height: 12px; stroke-width: 1.4; }
.sx-ziua .sx-ziua-stage[data-beat="4"] .sx-ziua-obtn--cz { box-shadow: inset 0 0 0 1px var(--zi-acc); color: var(--zi-acc-text); background: var(--zi-acc-soft); }
.sx-ziua .sx-ziua-ol { border-radius: 8px; background: var(--zi-sf); box-shadow: 0 0 0 1px var(--zi-line); overflow: hidden; }
.sx-ziua .sx-ziua-olh, .sx-ziua .sx-ziua-or {
  display: grid; grid-template-columns: 38px 58px minmax(0, 1fr) minmax(0, 1.35fr) 86px 56px; gap: 8px; align-items: center;
  min-height: 31px; padding: 0 10px; border-bottom: 1px solid var(--zi-line); font-size: 11px;
}
.sx-ziua .sx-ziua-olh { min-height: 26px; background: var(--zi-sf2); color: var(--zi-ink3); font-weight: 600; font-size: 10.5px; }
.sx-ziua .sx-ziua-or:last-child { border-bottom: 0; }
.sx-ziua .sx-ziua-or > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-ziua .sx-ziua-oc { font-weight: 700; }
.sx-ziua .sx-ziua-otr { color: var(--zi-ink2); }
.sx-ziua .sx-ziua-or > .sx-ziua-oa { display: flex; justify-content: flex-end; gap: 4px; overflow: visible; }
.sx-ziua .sx-ziua-ob {
  position: relative; display: grid; place-items: center; width: 24px; height: 22px; border-radius: 5px; background: var(--zi-sf);
  box-shadow: inset 0 0 0 1px var(--zi-line2); color: var(--zi-ink2); font-size: 12px; font-weight: 600; line-height: 1;
}
.sx-ziua .sx-ziua-ob .sx-ziua-i { width: 12px; height: 12px; }
.sx-ziua .sx-ziua-or--old > span:not(.sx-ziua-oa) { color: var(--zi-ink2); font-weight: 400; }
.sx-ziua .sx-ziua-or--old > .sx-ziua-oid { color: var(--zi-link); }
.sx-ziua .sx-ziua-stage.is-b5 .sx-ziua-or--sel { background: var(--zi-row-sel); }   /* TR-2051, comanda pe care se apasă @ */
.sx-ziua .sx-ziua-stage.is-b5 .sx-ziua-ob--at { box-shadow: inset 0 0 0 1px var(--zi-acc); color: var(--zi-acc-text); }

/* ---------- 9. Sertarul „Panou Comenzi (5)” (css/main.css:1081-1163) ---------- */
.sx-ziua .sx-ziua-drw {
  position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; width: min(500px, 60%); display: flex; flex-direction: column;
  background: var(--zi-drw-bg); box-shadow: -1px 0 0 rgba(23, 24, 26, .15), -10px 0 24px -6px rgba(0, 0, 0, .18);
  transform: translateX(104%); visibility: hidden;
  transition: transform .42s var(--zi-drw-ease), visibility 0s linear .42s;
}
.sx-ziua .sx-ziua-stage[data-beat="4"] .sx-ziua-drw { transform: none; visibility: visible; transition: transform .42s var(--zi-drw-ease), visibility 0s linear 0s; }
.sx-ziua .sx-ziua-drw-t {
  flex: 0 0 auto; height: 25px; line-height: 25px; text-align: center; background: var(--zi-drw-title); color: var(--zi-drw-title-ink);
  border-bottom: 1px solid rgba(23, 24, 26, .15); font-size: 13px; font-weight: 800;
}
.sx-ziua .sx-ziua-drw-l { display: flex; flex-direction: column; gap: 6px; padding: 7px; overflow: visible; }
.sx-ziua .sx-ziua-drw-l li {
  position: relative; display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px;
  background: var(--zi-row); color: var(--zi-row-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .07); white-space: nowrap;
  transition: box-shadow .15s ease;
}
.sx-ziua .sx-ziua-rp { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; }
.sx-ziua .sx-ziua-rp b { font-weight: 800; }
.sx-ziua .sx-ziua-rp small { font-size: 10px; font-weight: 500; margin-right: 1px; }
.sx-ziua .sx-ziua-ric { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; }
.sx-ziua .sx-ziua-ric .sx-ziua-g { width: 12px; height: 12px; vertical-align: 0; }
.sx-ziua .sx-ziua-rl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--zi-row-loc); }
.sx-ziua .sx-ziua-rl b { color: inherit; }
.sx-ziua .sx-ziua-ra { color: var(--zi-arrow); font-weight: 700; margin: 0 4px; }
.sx-ziua .sx-ziua-rd { flex: 0 0 auto; margin-left: auto; font-size: 10.5px; color: var(--zi-row-date); }
.sx-ziua .sx-ziua-g--late { color: var(--zi-late); }
.sx-ziua .sx-ziua-g--ban { color: var(--zi-ban); width: 12px; height: 12px; vertical-align: -1.5px; }
.sx-ziua .sx-ziua-r--free .sx-ziua-rp { font-weight: 600; }
.sx-ziua .sx-ziua-iw { position: relative; display: inline-grid; }   /* iconița peste care stă cursorul (cuburile, triunghiul) */
.sx-ziua .sx-ziua-drw-l li.sx-ziua-r--late { z-index: 2; }
.sx-ziua .sx-ziua-stage[data-beat="4"] .sx-ziua-r--late { box-shadow: 0 3px 10px rgba(0, 0, 0, .13); }
/* bula rândului (Bootstrap, data-placement="left"): comanda și clientul, plus grupajul (CIRC-41) la B 101 DEM; dispecerul nu apare
   pe rândurile lui. Starea finală a momentului arată doar bula lui CJ 12 ABC; cele două de la B 101 DEM apar doar cât trece cursorul. */
.sx-ziua .sx-ziua-btip {
  position: absolute; z-index: 3; right: calc(100% + 9px); top: 50%; padding: 4px 9px 5px; border-radius: 4px;
  background: rgba(0, 0, 0, .9); color: #ffffff; font-size: 11px; font-weight: 500; line-height: 1.4; text-align: center; white-space: nowrap;
  transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s;
}
.sx-ziua .sx-ziua-btip::after { content: ""; position: absolute; left: 100%; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left-color: rgba(0, 0, 0, .9); border-right: 0; }
.sx-ziua .sx-ziua-stage[data-beat="4"] .sx-ziua-btip--late { opacity: 1; visibility: visible; transition: opacity .15s ease, visibility 0s linear 0s; }
/* bula nativă a iconiței (title „În întârziere”) */
.sx-ziua .sx-ziua-tipn {
  position: absolute; z-index: 3; left: 9px; top: 19px; padding: 2px 6px 3px; background: var(--zi-tip-bg); color: var(--zi-tip-ink);
  border: 1px solid var(--zi-tip-line); box-shadow: 1px 2px 5px rgba(0, 0, 0, .18); font-size: 11px; font-weight: 500; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s;
}
.sx-ziua .sx-ziua-stage[data-beat="4"] .sx-ziua-tipn { opacity: 1; visibility: visible; transition: opacity .15s ease, visibility 0s linear 0s; }

/* ---------- 10. Fereastra „Situație Curentă Comandă” + emailul ajuns la client ---------- */
.sx-ziua .sx-ziua-scrim { position: absolute; z-index: 5; inset: 0; background: var(--zi-scrim); opacity: 0; visibility: hidden; }
.sx-ziua .sx-ziua-dlg {
  --zi-dx: -50%;
  position: absolute; z-index: 6; left: 50%; top: 30px; width: min(470px, 86%); border-radius: 6px; background: var(--zi-sf); color: var(--zi-ink);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .14), 0 5px 15px rgba(0, 0, 0, .3); transform: translateX(var(--zi-dx)); opacity: 0; visibility: hidden;
}
.sx-ziua .sx-ziua-dlg-h { position: relative; padding: 10px 36px 9px; border-bottom: 1px solid var(--zi-line); text-align: center; color: var(--zi-primary); font-size: 13px; font-weight: 600; }
.sx-ziua .sx-ziua-x { position: absolute; right: 11px; top: 3px; font-size: 22px; line-height: 1; font-weight: 300; color: var(--zi-ink3); }
.sx-ziua .sx-ziua-dlg-b { display: grid; gap: 8px; padding: 12px 16px 12px 12px; }
.sx-ziua .sx-ziua-f { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 9px; }
.sx-ziua .sx-ziua-fl { text-align: right; font-weight: 700; font-size: 11px; }
.sx-ziua .sx-ziua-fi { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 4px; background: var(--zi-sf); box-shadow: inset 0 0 0 1px var(--zi-line2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sx-ziua .sx-ziua-tag { padding: 1px 7px; border-radius: 3px; background: var(--zi-acc-soft); color: var(--zi-acc-text); font-size: 10.5px; font-weight: 600; }
.sx-ziua .sx-ziua-ta { margin-left: 71px; padding: 7px 10px 9px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--zi-line2); font-size: 11px; line-height: 1.5; }
.sx-ziua .sx-ziua-dlg-f { display: flex; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid var(--zi-line); }
.sx-ziua .sx-ziua-wbtn { position: relative; display: inline-flex; align-items: center; height: 26px; padding: 0 20px; border-radius: 4px; background: var(--zi-btn-warn); color: var(--zi-btn-warn-ink); font-size: 11px; font-weight: 700; }

.sx-ziua .sx-ziua-mail {
  position: absolute; z-index: 7; right: -26px; bottom: -34px; width: 376px; border-radius: 12px; background: var(--zi-sf); color: var(--zi-ink);
  box-shadow: var(--zi-mail-sh); font-size: 12.5px; line-height: 1.45; letter-spacing: -0.008em; word-spacing: 0; font-variant-numeric: tabular-nums;
  opacity: 0; visibility: hidden; transform: translate(-80px, -64px) scale(.9); transform-origin: 100% 100%;
  transition: opacity .2s ease, transform .3s ease, visibility 0s linear .3s;
}
.sx-ziua .sx-ziua-mail * { letter-spacing: inherit; word-spacing: 0; }
/* 640–1199 px: fereastra stă aproape de marginea de jos a ecranului, deci emailul rămâne înăuntrul ei */
@media (min-width: 640px) and (max-width: 1199px) { .sx-ziua .sx-ziua-mail { right: 16px; bottom: 16px; } }
.sx-ziua .sx-ziua-stage.is-b5 .sx-ziua-mail { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .85s var(--zi-ease), visibility 0s linear 0s; }
.sx-ziua .sx-ziua-mail-h { padding: 13px 16px 11px; border-bottom: 1px solid var(--zi-line); }
.sx-ziua .sx-ziua-mail-s { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--zi-ink); }
.sx-ziua .sx-ziua-mail-s .sx-ziua-i { width: 15px; height: 15px; margin-top: 1px; color: var(--zi-mark); }
.sx-ziua .sx-ziua-mail-m { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--zi-ink2); }
.sx-ziua .sx-ziua-mail-m b { font-weight: 600; color: var(--zi-ink); }
.sx-ziua .sx-ziua-mail-to { font-size: 12px; color: var(--zi-ink2); }
.sx-ziua .sx-ziua-mail-b { padding: 11px 16px 14px; }
.sx-ziua .sx-ziua-mail-b p { margin: 0; }
.sx-ziua .sx-ziua-mail-eta { position: relative; margin: 3px -6px 0 !important; padding: 2px 6px; border-radius: 5px; background: var(--zi-mark-soft); font-weight: 600; }
.sx-ziua .sx-ziua-mail-sig { margin-top: 10px !important; color: var(--zi-ink2); }
.sx-ziua .sx-ziua-note--eta { right: calc(100% + 42px); top: 50%; transform: translateY(-50%); }
.sx-ziua .sx-ziua-note--eta::before { left: 100%; width: 40px; }
.sx-ziua .sx-ziua-note--eta::after { left: calc(100% + 38px); box-shadow: 0 0 0 2px var(--zi-sf); }
.sx-ziua .sx-ziua-stage.is-b5 .sx-ziua-note--eta { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s linear 0s; }

/* ---------- 11. Cursorul dispecerului (doar în coregrafie) ---------- */
.sx-ziua .sx-ziua-tap, .sx-ziua .sx-ziua-hov { position: absolute; z-index: 3; left: 56%; top: 62%; width: 0; height: 0; opacity: 0; pointer-events: none; }
.sx-ziua .sx-ziua-tap::before { content: ""; position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: rgba(26, 116, 162, .3); opacity: 0; transform: scale(.2); }
.sx-ziua .sx-ziua-cur { position: absolute; left: -1px; top: -1px; width: 13px; height: 19px; max-width: none; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.sx-ziua .sx-ziua-hov { left: 5px; top: 6px; }
@keyframes sx-ziua-tap { 0% { opacity: 0; transform: translate(20px, 18px); } 30% { opacity: 1; transform: none; } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes sx-ziua-ring { 0%, 36% { opacity: 0; transform: scale(.2); } 46% { opacity: 1; } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes sx-ziua-press { 0%, 100% { transform: none; } 50% { transform: scale(.93); } }
@keyframes sx-ziua-hov { 0% { opacity: 0; transform: translate(22px, 20px); } 35%, 100% { opacity: 1; transform: none; } }
/* 15:00 pe lat: un singur cursor, desenat pe rând în trei locuri; fiecare pornește de unde a rămas cel dinainte */
@keyframes sx-ziua-hov1 { 0% { opacity: 0; transform: translate(22px, 20px); } 40%, 99.9% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes sx-ziua-hov2 { 0% { opacity: 1; transform: translateY(calc(-1 * var(--zi-pitch))); } 30%, 99.9% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes sx-ziua-hov3 { 0% { opacity: 1; transform: translate(2px, calc(-2 * var(--zi-pitch))); } 100% { opacity: 1; transform: none; } }
@keyframes sx-ziua-tip { 0% { opacity: 0; visibility: visible; } 15%, 85% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes sx-ziua-lift { 0%, 100% { box-shadow: 0 1px 3px rgba(0, 0, 0, .07); } 15%, 85% { box-shadow: 0 3px 10px rgba(0, 0, 0, .13); } }
@keyframes sx-ziua-pop { 0% { transform: scale(.3); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
/* mesajul nou: înălțimea (rândul grilei), marginile și opacitatea pornesc de la zero; „to” = valorile lui obișnuite */
@keyframes sx-ziua-new { from { grid-template-rows: 0fr; padding-top: 0; padding-bottom: 0; border-top-width: 0; opacity: 0; transform: translateY(-4px); } }
@keyframes sx-ziua-row { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes sx-ziua-dlg {
  0% { opacity: 0; visibility: visible; transform: translate(var(--zi-dx), 14px) scale(.98); }
  9% { opacity: 1; transform: translate(var(--zi-dx), 0) scale(1); }
  86% { opacity: 1; transform: translate(var(--zi-dx), 0) scale(1); }
  100% { opacity: 0; visibility: hidden; transform: translate(var(--zi-dx), -6px) scale(.99); }
}
@keyframes sx-ziua-scrim { 0% { opacity: 0; visibility: visible; } 9% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes sx-ziua-peek { 0% { opacity: 0; visibility: visible; transform: translateY(-6px); } 10% { opacity: 1; transform: none; } 86% { opacity: 1; transform: none; } 100% { opacity: 0; visibility: hidden; transform: none; } }
@keyframes sx-ziua-spin { to { transform: rotate(360deg); } }
@keyframes sx-ziua-keep-in { 0%, 100% { display: inline; } }
@keyframes sx-ziua-keep-out { 0%, 100% { display: none; } }

/* ---------- 12. Coregrafia, moment cu moment (doar .is-play) ---------- */
/* 1 · 09:20 și 2 · 11:05: mesajul intră, dispecerul apasă „Caută”, celula se schimbă */
.sx-ziua .sx-ziua-stage.is-play:is([data-beat="1"], [data-beat="2"], [data-beat="3"]) .sx-ziua-badge { animation: sx-ziua-pop .45s var(--zi-ease) .1s both; }
.sx-ziua .sx-ziua-stage.is-play:is([data-beat="1"], [data-beat="2"], [data-beat="3"]) .sx-ziua-msgs { transition-delay: .3s, .3s, .3s; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="1"] .sx-ziua-m--1,
.sx-ziua .sx-ziua-stage.is-play[data-beat="2"] .sx-ziua-m--2 { animation: sx-ziua-new .5s var(--zi-ease) .45s both; }
.sx-ziua .sx-ziua-stage.is-play:is([data-beat="1"], [data-beat="2"]) .sx-ziua-btn--go .sx-ziua-tap { animation: sx-ziua-tap 1.1s var(--zi-ease) calc(var(--zi-tap1) - .5s) both; }
.sx-ziua .sx-ziua-stage.is-play:is([data-beat="1"], [data-beat="2"]) .sx-ziua-btn--go .sx-ziua-tap::before { animation: sx-ziua-ring 1.1s ease-out calc(var(--zi-tap1) - .5s) both; }
.sx-ziua .sx-ziua-stage.is-play:is([data-beat="1"], [data-beat="2"]) .sx-ziua-btn--go { animation: sx-ziua-press .26s ease var(--zi-tap1) both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="1"] .sx-ziua-p--ora,
.sx-ziua .sx-ziua-stage.is-play[data-beat="1"] .sx-ziua-p--ora .sx-ziua-tw > .sx-ziua-g,
.sx-ziua .sx-ziua-stage.is-play[data-beat="2"] .sx-ziua-p--ora .sx-ziua-tw > .sx-ziua-g { transition-delay: var(--zi-upd1); }
/* până la „Caută” celula păstrează liniuța: animație pe display (o tranziție arăta deodată „-” și ora, „-11:05”) */
.sx-ziua .sx-ziua-stage.is-play[data-beat="2"] .sx-ziua-p--ora .sx-ziua-t0 { animation: sx-ziua-keep-in var(--zi-upd1) linear; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="2"] .sx-ziua-p--ora .sx-ziua-t1 { animation: sx-ziua-keep-out var(--zi-upd1) linear; }
/* 3 · 14:40: trei mesaje, „Caută”, Arad și Nürnberg verzi; nota de la CJ 12 ABC */
.sx-ziua .sx-ziua-stage.is-play[data-beat="3"] .sx-ziua-m--3 { animation: sx-ziua-new .5s var(--zi-ease) .45s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="3"] .sx-ziua-m--4 { animation: sx-ziua-new .5s var(--zi-ease) .75s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="3"] .sx-ziua-m--5 { animation: sx-ziua-new .5s var(--zi-ease) 1.05s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="3"] .sx-ziua-btn--go .sx-ziua-tap { animation: sx-ziua-tap 1.1s var(--zi-ease) calc(var(--zi-tap3) - .5s) both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="3"] .sx-ziua-btn--go .sx-ziua-tap::before { animation: sx-ziua-ring 1.1s ease-out calc(var(--zi-tap3) - .5s) both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="3"] .sx-ziua-btn--go { animation: sx-ziua-press .26s ease var(--zi-tap3) both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="3"] :is(.sx-ziua-p--arad, .sx-ziua-p--nur),
.sx-ziua .sx-ziua-stage.is-play[data-beat="3"] :is(.sx-ziua-p--arad, .sx-ziua-p--nur) .sx-ziua-tw > .sx-ziua-g { transition-delay: var(--zi-upd3); }
.sx-ziua .sx-ziua-stage.is-play[data-beat="3"] .sx-ziua-p--arad .sx-ziua-t0 { animation: sx-ziua-keep-in var(--zi-upd3) linear; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="3"] .sx-ziua-p--arad .sx-ziua-t1 { animation: sx-ziua-keep-out var(--zi-upd3) linear; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="3"] .sx-ziua-note--late { transition-delay: var(--zi-note3), var(--zi-note3); }
/* 4 · 15:00: pagina Comenzi, „Centralizator Comenzi”, sertarul intră, rândurile, bula „În întârziere” */
.sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-obtn--cz .sx-ziua-tap { animation: sx-ziua-tap 1.1s var(--zi-ease) .2s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-obtn--cz .sx-ziua-tap::before { animation: sx-ziua-ring 1.1s ease-out .2s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-obtn--cz { animation: sx-ziua-press .26s ease .7s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-drw { transition-delay: .8s, .8s; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-drw-l li { animation: sx-ziua-row .42s var(--zi-ease) calc(1.05s + var(--n) * 70ms) both; }
/* cursorul trece peste B 101 DEM (4471, apoi 4475): bula fiecărui rând arată CIRC-41; apoi coboară două rânduri, la CJ 12 ABC */
.sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-hov--1 { animation: sx-ziua-hov1 1s var(--zi-ease) 1.45s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-hov--2 { animation: sx-ziua-hov2 .85s var(--zi-ease) 2.45s forwards; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-hov--3 { animation: sx-ziua-hov3 .45s var(--zi-ease) var(--zi-hv) forwards; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-btip--g1 { animation: sx-ziua-tip .7s linear 1.8s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-btip--g2 { animation: sx-ziua-tip .65s linear 2.7s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-drw-l li.sx-ziua-r--g1 { animation: sx-ziua-row .42s var(--zi-ease) calc(1.05s + var(--n) * 70ms) both, sx-ziua-lift .7s linear 1.8s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-drw-l li.sx-ziua-r--g2 { animation: sx-ziua-row .42s var(--zi-ease) calc(1.05s + var(--n) * 70ms) both, sx-ziua-lift .65s linear 2.7s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-tipn { transition-delay: calc(var(--zi-hv) + .55s), calc(var(--zi-hv) + .55s); }
.sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-btip--late { transition-delay: calc(var(--zi-hv) + .3s), calc(var(--zi-hv) + .3s); }
.sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-r--late { transition-delay: calc(var(--zi-hv) + .2s); }
/* 5 · 16:45: butonul @, fereastra, „Trimitere”, emailul ajunge la client */
.sx-ziua .sx-ziua-stage.is-play[data-beat="5"] .sx-ziua-ob--at .sx-ziua-tap { animation: sx-ziua-tap 1.1s var(--zi-ease) .3s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="5"] .sx-ziua-ob--at .sx-ziua-tap::before { animation: sx-ziua-ring 1.1s ease-out .3s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="5"] .sx-ziua-ob--at { animation: sx-ziua-press .26s ease .8s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="5"] .sx-ziua-scrim { animation: sx-ziua-scrim 2.5s linear 1.05s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="5"] .sx-ziua-dlg { animation: sx-ziua-dlg 2.5s linear 1.05s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="5"] .sx-ziua-wbtn .sx-ziua-tap { animation: sx-ziua-tap 1.1s var(--zi-ease) 2.35s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="5"] .sx-ziua-wbtn .sx-ziua-tap::before { animation: sx-ziua-ring 1.1s ease-out 2.35s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="5"] .sx-ziua-wbtn { animation: sx-ziua-press .26s ease 2.85s both; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="5"] .sx-ziua-mail { transition-delay: 3.3s, 3.3s, 3.3s; }
.sx-ziua .sx-ziua-stage.is-play[data-beat="5"] .sx-ziua-note--eta { transition-delay: 4.15s, 4.15s; }
/* ceasul „Planificare Fixă” se rotește, ca în program (fa-spin); doar cât se vede calendarul (de la 15:00 e pagina Comenzi) */
.sx-ziua .sx-ziua-stage.is-play:not(.is-b4) .sx-ziua-fix { animation: sx-ziua-spin 2s linear infinite; transform-origin: 50% 50%; transform-box: fill-box; }

/* ---------- 13a. Sub 900 px: Calendar Camioane în modul Simplificat (truck.calendar.php:741-785) ----------
   azi + 3 zile, fără galben (:590-594), celula pe un rând: iconiță, ore, țara subliniată, codul poștal; „+1” pentru restul;
   verdele doar pe PRIMUL punct al zilei de azi (:744); siluetele gri lângă camion (:743). */
@media (max-width: 899px) {
  .sx-ziua .sx-ziua-sel-d { display: none; }
  .sx-ziua .sx-ziua-sel-s { display: inline; }
  .sx-ziua .sx-ziua-cal :is(.sx-ziua-c-sat, .sx-ziua-c-sun, .sx-ziua-c-mon) { display: none; }
  .sx-ziua .sx-ziua-cal .sx-ziua-c-tk { width: 20%; }
  .sx-ziua .sx-ziua-cal :is(.sx-ziua-c-tue, .sx-ziua-c-wed, .sx-ziua-c-thu, .sx-ziua-c-fri) { width: 20%; }
  .sx-ziua .sx-ziua-cal tbody tr > td.sx-ziua-c-tue { background: transparent; }
  .sx-ziua .sx-ziua-cal tbody tr:nth-child(even) > td.sx-ziua-c-tue { background: var(--zi-sf2); }
  .sx-ziua .sx-ziua-cal thead tr > th.sx-ziua-c-tue { background: var(--zi-sf); }
  .sx-ziua .sx-ziua-tk-dr { display: inline; }
  .sx-ziua .sx-ziua-tk-dr .sx-ziua-g { width: 9px; height: 10px; }
  .sx-ziua .sx-ziua-p > p { display: none; }
  .sx-ziua .sx-ziua-p > .sx-ziua-ps { display: block; }
  .sx-ziua :is(.sx-ziua-p--d, .sx-ziua-hr) { display: none; }
  .sx-ziua .sx-ziua-p--arad { margin-top: 3px; }
  .sx-ziua .sx-ziua-stage.is-b3 .sx-ziua-p--arad { background: transparent; }
}

/* ---------- 13b. Telefon: fără șină, foaie de jos, emailul peste fereastră ---------- */
@media (max-width: 639px) {
  .sx-ziua .sx-ziua-win { grid-template-columns: minmax(0, 1fr); grid-template-rows: 36px minmax(0, 1fr); border-radius: 14px; }
  .sx-ziua .sx-ziua-rail { display: none; }
  .sx-ziua .sx-ziua-canvas { grid-column: 1; border-radius: 10px 10px 14px 14px; }
  .sx-ziua .sx-ziua-logo { width: 38px; height: 36px; }
  .sx-ziua .sx-ziua-i--logo { width: 19px; height: 19px; }
  .sx-ziua .sx-ziua-tabs { padding-left: 2px; }
  .sx-ziua .sx-ziua-tab { display: none; height: 29px; padding: 0 11px 0 9px; }
  .sx-ziua .sx-ziua-stage:not(.is-b4) .sx-ziua-tab--cal, .sx-ziua .sx-ziua-stage.is-b4 .sx-ziua-tab--cmd { display: flex; }
  .sx-ziua .sx-ziua-scs { margin-left: 4px; }
  .sx-ziua .sx-ziua-sc { width: 28px; }
  .sx-ziua .sx-ziua-sc-sep { margin: 0 6px 0 4px; }
  .sx-ziua .sx-ziua-pg { padding: 10px 8px 0; }
  .sx-ziua .sx-ziua-ph { gap: 6px; margin-bottom: 8px; }
  .sx-ziua .sx-ziua-pt, .sx-ziua .sx-ziua-ib--print { display: none; }
  .sx-ziua .sx-ziua-cal, .sx-ziua .sx-ziua-cal thead th { font-size: 10px; line-height: 12.5px; }
  .sx-ziua .sx-ziua-cal .sx-ziua-c-tk { width: 23%; }
  .sx-ziua .sx-ziua-cal :is(.sx-ziua-c-tue, .sx-ziua-c-wed, .sx-ziua-c-thu, .sx-ziua-c-fri) { width: 19.25%; }
  .sx-ziua .sx-ziua-cal th, .sx-ziua .sx-ziua-cal td { padding: 4px 3px 4px; }
  .sx-ziua .sx-ziua-note--late { left: calc(100% + 16px); top: 3px; padding: 5px 10px; font-size: 11.5px; }
  .sx-ziua .sx-ziua-note--late::before { width: 16px; }
  .sx-ziua .sx-ziua-note--late::after { left: -19px; }
  .sx-ziua.sx-ziua-js .sx-ziua-log { min-height: 150px; }
  /* „Mesaje”: pe telefon apare cât să se citească, apoi se închide (altfel acoperă coloana de azi) */
  .sx-ziua .sx-ziua-msgs { top: 38px; left: 8px; right: 8px; width: auto; }
  .sx-ziua .sx-ziua-msgs::before { right: 66px; }
  .sx-ziua .sx-ziua-stage:is([data-beat="1"], [data-beat="2"], [data-beat="3"]) .sx-ziua-msgs { opacity: 0; visibility: hidden; transition: none; }
  .sx-ziua .sx-ziua-stage.is-play:is([data-beat="1"], [data-beat="2"]) .sx-ziua-msgs { animation: sx-ziua-peek 2.15s linear .3s both; }
  .sx-ziua .sx-ziua-stage.is-play[data-beat="3"] .sx-ziua-msgs { animation: sx-ziua-peek 2.6s linear .3s both; }
  /* Comenzi: doar codul, clientul, camionul și butoanele */
  .sx-ziua .sx-ziua-mast { gap: 6px; }
  .sx-ziua .sx-ziua-mast-t { font-size: 14px; }
  .sx-ziua :is(.sx-ziua-chip, .sx-ziua-obtn--lu) { display: none; }
  .sx-ziua :is(.sx-ziua-olh, .sx-ziua-or) { grid-template-columns: 52px minmax(0, 1fr) 62px 52px; gap: 6px; padding: 0 8px; }
  .sx-ziua :is(.sx-ziua-olh, .sx-ziua-or) > :is(:nth-child(1), :nth-child(4)) { display: none; }
  /* sertarul devine foaie de jos */
  .sx-ziua .sx-ziua-drw { top: auto; left: 0; right: 0; width: auto; height: 84%; border-radius: 14px 14px 0 0; transform: translateY(104%); box-shadow: 0 -10px 26px -8px rgba(0, 0, 0, .3); overflow: hidden; }
  .sx-ziua .sx-ziua-drw::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 5px; width: 34px; height: 4px; margin-left: -17px; border-radius: 2px; background: rgba(0, 0, 0, .22); }
  .sx-ziua .sx-ziua-drw-t { height: 34px; line-height: 40px; }
  .sx-ziua .sx-ziua-drw-l { padding: 7px 8px; gap: 5px; }
  .sx-ziua .sx-ziua-drw-l li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "p i d" "l l l"; column-gap: 6px; row-gap: 1px; padding: 6px 10px 7px; }
  .sx-ziua .sx-ziua-rp { grid-area: p; }
  .sx-ziua .sx-ziua-ric { grid-area: i; }
  .sx-ziua .sx-ziua-rd { grid-area: d; justify-self: end; }
  .sx-ziua .sx-ziua-rl { grid-area: l; }
  .sx-ziua .sx-ziua-r--free { display: flex !important; }
  /* „În întârziere” stă deasupra rândului, ca ruta lui CJ 12 ABC să rămână de citit; rândul își face loc pentru bulă */
  .sx-ziua .sx-ziua-tipn { left: -6px; top: auto; bottom: calc(100% + 6px); }
  .sx-ziua .sx-ziua-drw-l li.sx-ziua-r--late { transition: box-shadow .15s ease, margin-top .35s var(--zi-ease); }
  .sx-ziua .sx-ziua-stage[data-beat="4"] .sx-ziua-drw-l li.sx-ziua-r--late { margin-top: 20px; }
  .sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-drw-l li.sx-ziua-r--late { transition-delay: calc(var(--zi-hv) + .2s), calc(var(--zi-hv) + .15s); }
  .sx-ziua .sx-ziua-btip { display: none; }
  /* fără bulele rândurilor pe telefon, deci fără oprirea pe B 101 DEM: cursorul vine direct la triunghi */
  .sx-ziua :is(.sx-ziua-hov--1, .sx-ziua-hov--2) { display: none; }
  .sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-hov--3 { animation: sx-ziua-hov .7s var(--zi-ease) var(--zi-hv) both; }
  .sx-ziua .sx-ziua-stage.is-play[data-beat="4"] .sx-ziua-drw-l li:is(.sx-ziua-r--g1, .sx-ziua-r--g2) { animation: sx-ziua-row .42s var(--zi-ease) calc(1.05s + var(--n) * 70ms) both; }
  .sx-ziua .sx-ziua-mail-s { font-size: 13px; }
  /* fereastra emailului: pe toată lățimea */
  .sx-ziua .sx-ziua-dlg { --zi-dx: 0px; left: 8px; right: 8px; width: auto; top: 14px; }
  .sx-ziua .sx-ziua-dlg-h { padding-inline: 28px; font-size: 12px; }
  .sx-ziua .sx-ziua-dlg-b { padding: 10px; }
  .sx-ziua .sx-ziua-f { grid-template-columns: 1fr; gap: 3px; }
  .sx-ziua .sx-ziua-fl { text-align: left; }
  .sx-ziua .sx-ziua-ta { margin-left: 0; }
  /* emailul ajuns la client: peste partea de jos a ferestrei */
  .sx-ziua .sx-ziua-mail {
    left: 10px; right: 10px; bottom: 8px; width: auto; transform: translateY(40px) scale(.96); transform-origin: 50% 100%; font-size: 12px;
    box-shadow: 0 0 0 1px rgba(23, 32, 43, .08), 0 2px 4px rgba(23, 32, 43, .08), 0 16px 30px -12px rgba(23, 32, 43, .4);
  }
  .sx-ziua .sx-ziua-mail-b { padding: 9px 14px 12px; }
  .sx-ziua .sx-ziua-note--eta { position: static; display: flex; width: max-content; max-width: 100%; margin-top: 6px; white-space: normal; transform: none; }
  .sx-ziua .sx-ziua-note--eta::before, .sx-ziua .sx-ziua-note--eta::after { display: none; }
}

/* ---------- 14. Fără tranziții la pornire; mișcare redusă = starea finală, pe loc ---------- */
.sx-ziua.sx-ziua-noanim *, .sx-ziua.sx-ziua-noanim *::before, .sx-ziua.sx-ziua-noanim *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sx-ziua *, .sx-ziua *::before, .sx-ziua *::after { transition-delay: 0s !important; animation-delay: 0s !important; }
  .sx-ziua .sx-ziua-fix { animation: none !important; }
}