/* Trainingul paginii „Facturi și plăți” (training.js; Marius, 19 oct 2026). Ca pe pagina farmaciei: butonul din bară, meniul
   lecțiilor, ghidul pas cu pas (patru benzi întunecate în jurul elementului real, un inel, fișa pasului). Tokenii sunt ai
   paginii (neutru și un singur accent, zi și noapte); straturile stau peste tot ce are pagina (fișa 35, ferestrele 50, mesajele
   55, meniurile 60, × de zoom 70). Nimic din pagină nu se mișcă: butonul are locul lui de la primul desen. */

/* butonul din bară: „Training” de la 1200 px în sus; mai îngust, semnul (tocul de absolvent), cu același nume în title */
.trbtn { position: relative; flex: none; height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--fill); color: var(--fg);
  font: 500 calc(13px * var(--scara))/28px var(--f-sys); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.trbtn:hover { background: var(--fill-on); }
.trbtn[aria-expanded="true"] { background: var(--fill-on); box-shadow: inset 0 0 0 1.5px var(--fg); }
.trbtn .tr-ic { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@container pagina (max-width: 1199px) {
  .trbtn { width: 32px; height: 32px; padding: 0; background: transparent; }
  .trbtn:hover { background: var(--fill-2); }
  .trbtn .tr-t { display: none; }
  .trbtn .tr-ic { display: block; }
}
.tr-nou { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--focus); box-shadow: 0 0 0 2px var(--bg); }

/* meniul lecțiilor */
.tr-meniu { position: fixed; z-index: 88; width: min(400px, calc(100vw - 24px)); max-height: calc(100vh - 90px); overflow: auto; overscroll-behavior: contain;
  background: var(--menu); color: var(--fg); border-radius: 12px; box-shadow: 0 12px 32px var(--umbra-p2), 0 0 0 0.5px var(--sep-2); font-family: var(--f-sys); }
.tr-mh { position: relative; padding: 12px 52px 10px 14px; border-bottom: 1px solid var(--line); }
.tr-mh b { display: block; font-size: 1.05rem; }
.tr-mh span { display: block; font-size: .88rem; line-height: 1.4; color: var(--muted); margin-top: 2px; }
.tr-mh .x-inchide { top: 8px; right: 8px; }
.tr-it { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; width: 100%; text-align: left; border: 0;
  border-bottom: 1px solid var(--line); background: transparent; color: inherit; padding: 10px 14px; cursor: pointer; font: inherit; }
.tr-it:hover, .tr-it:focus-visible { background: var(--fill-2); outline: none; }
.tr-nr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fg); color: var(--card); font-size: .8rem; font-weight: 700; }
.tr-it b { display: block; line-height: 1.25; font-size: .97rem; }
.tr-it small { display: block; color: var(--muted); font-size: .84rem; line-height: 1.35; margin-top: 2px; }
.tr-ok { font-size: .8rem; font-weight: 600; color: var(--ok); white-space: nowrap; margin-top: 3px; }
.tr-mf { margin: 0; padding: 10px 14px; font-size: .84rem; line-height: 1.4; color: var(--muted); }

/* ghidul: patru benzi în jurul elementului (elementul rămâne viu), inelul, fișa pasului */
.tr-dim { position: fixed; z-index: 90; background: rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tr-dim { background: rgba(0, 0, 0, .68); } }
:root[data-theme="dark"] .tr-dim { background: rgba(0, 0, 0, .68); }
.tr-inel { position: fixed; z-index: 91; pointer-events: none; border-radius: 8px; box-shadow: 0 0 0 2px var(--card), 0 0 0 5px var(--focus); }
.tr-inel.fa { animation: trPuls 1.4s ease-in-out infinite; }
.tr-inel.bun { box-shadow: 0 0 0 2px var(--card), 0 0 0 6px var(--ok); animation: none; }
@keyframes trPuls { 0%, 100% { box-shadow: 0 0 0 2px var(--card), 0 0 0 5px var(--focus); }
                    50% { box-shadow: 0 0 0 2px var(--card), 0 0 0 5px var(--focus), 0 0 0 12px color-mix(in srgb, var(--focus) 25%, transparent); } }
.tr-fisa { position: fixed; z-index: 92; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 16px); overflow: auto; background: var(--card); color: var(--fg);
  border-top: 4px solid var(--fg); border-radius: 12px; box-shadow: 0 14px 44px rgba(0, 0, 0, .35); padding: 10px 14px 12px; outline: none; font-family: var(--f-sys); }
.tr-fisa.scutura { animation: trScut .32s; }
@keyframes trScut { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.tr-sus { display: flex; align-items: center; gap: 8px; }
.tr-pas { flex: 1; font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tr-x { border: 0; background: transparent; font-size: 1.45rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 2px 6px; border-radius: 6px; }
.tr-x:hover { background: var(--fill-2); color: var(--fg); }
@media (max-width: 760px), (pointer: coarse) { .tr-x { min-width: 44px; min-height: 44px; margin: -8px -10px -8px 0; font-size: 1.6rem; } }
.tr-fisa h3 { margin: 2px 0 6px; font-size: 1.12rem; line-height: 1.25; }
.tr-fisa p { margin: 0 0 8px; font-size: .97rem; line-height: 1.45; }
.tr-fa { font-weight: 700; color: var(--focus); }
.tr-a { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tr-a .sp { flex: 1; }
.tr-a .btn { min-height: 38px; padding: 6px 14px; }
.tr-p { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.tr-p i { width: 9px; height: 9px; border-radius: 2px; background: var(--line); }
.tr-p i.d { background: var(--muted); }
.tr-p i.c { background: var(--fg); }
body.training .toasturi { z-index: 95; }   /* mesajele paginii (un refuz, „ai terminat lecția”) se văd și peste ghid */

/* modul exemplu: banda de sub bară spune că facturile nu sunt reale (ca pe pagina farmaciei) */
body.exemplu #ecranPagina .bara::after { content: "Exemplu de training: facturile de mai jos nu sunt reale și nimic din ce faci aici nu se trimite.";
  display: block; padding: 5px 16px; background: var(--wait-bg); color: var(--wait); border-bottom: 1px solid var(--line);
  font: 600 calc(13px * var(--scara))/1.35 var(--f-sys); text-align: center; }

@media (prefers-reduced-motion: reduce) { .tr-inel.fa, .tr-fisa.scutura { animation: none; } }