/* Widgetul de conectare prin cod QR (templates/front/includes/qr_login.html).
   Mutat din stilul inline al includului; comentariile pastreaza motivele masuratorilor. */

/* Fara Bootstrap in layout-ul v4: ascunderea corpului in modul lazy. */
.pro-qr-body.d-none { display: none; }
.pro-qr { display: grid; gap: 12px; justify-items: center; }

/* Cardul alb. Codul ramane negru pe alb in ambele teme: un QR inversat sau colorat
   scade rata de citire, fara niciun castig.

   Marginea alba NU e ornament: standardul cere o zona linistita in jurul codului,
   altfel scannerul confunda marginea cu date. SVG-ul poarta doar 1 modul, iar restul
   zonei il da paddingul de aici, o singura data. Masurat, cu degradare de camera:
     4 module in SVG + 5px padding -> card 253px, 32/36 citiri
     1 modul  in SVG + 8px padding -> card 218px, 32/36 citiri   <- varianta aleasa
     0 module in SVG + 0px padding -> card 200px,  0/36 citiri   <- fara zona, mort */
.pro-qr-card { display: grid; place-items: center;
  background: #fff; border-radius: .8rem; padding: .5rem; margin-inline: auto;
  width: max-content; max-width: 100%; box-shadow: 0 .5rem 1.5rem rgba(2, 8, 23, .18);
  border: 1px solid var(--line); }
.pro-qr-frame { position: relative; display: grid; place-items: center; line-height: 0;
  transition: opacity .3s ease; }
/* Reinnoirea automata schimba codul sub ochii omului: vechiul se stinge, noul apare in loc. */
.pro-qr-frame.is-refreshing { opacity: .35; }
@media (prefers-reduced-motion: reduce) {
  .pro-qr-frame { transition: none; }
  .pro-qr-skeleton { animation: none; }
}
.pro-qr-code svg { display: block; width: 200px; max-width: 100%; height: auto; }

/* Marca centrala. Procentele se raporteaza la `pro-qr-frame`, care include si zona
   linistita (45 module), nu doar codul (37). 18% din cadru = 21.9% din latura
   codului = 4.8% din suprafata lui; vezi plafonul si cifrele din base/qr.py. */
.pro-qr-mark { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 18%; aspect-ratio: 1; background: #fff; border-radius: .28rem;
  display: grid; place-items: center; padding: 1.5%; }
.pro-qr-mark[hidden] { display: none; }
.pro-qr-mark img { width: 100%; height: 100%; object-fit: contain; }

/* Cardul are `width: max-content`, deci fara continut s-ar strange intr-un punct
   alb. Locul codului ramane rezervat: schelet, cod sau iconita stinsa la esec. */
.pro-qr-code { display: grid; place-items: center; }
.pro-qr-code { min-width: 200px; min-height: 200px; }
.pro-qr-placeholder { display: grid; place-items: center; width: 200px; aspect-ratio: 1;
  color: #cbd5e1; font-size: 2.6rem; line-height: 1; }

/* Rezerva locul codului cat timp se genereaza, ca panoul sa nu sara. */
.pro-qr-skeleton { display: block; width: 200px; max-width: 100%; aspect-ratio: 1;
  border-radius: .5rem; background: linear-gradient(100deg, #e9edf5 30%, #f6f8fc 50%, #e9edf5 70%);
  background-size: 220% 100%; animation: pro-qr-shimmer 1.2s ease-in-out infinite; }
@keyframes pro-qr-shimmer { from { background-position: 180% 0; } to { background-position: -20% 0; } }

/* Sub cod: ce faci, cat mai ai, ce alternativa exista. */
.pro-qr-foot { display: grid; justify-items: center; gap: .5rem; margin-top: .9rem; }
.pro-qr-status { margin: 0; font-size: 14px; line-height: 1.4; text-align: center; color: var(--text); }
.pro-qr-app { font-weight: 700; color: var(--blue-t); }

/* Cronometrul e o pastila. Cifrele sunt tabulare, ca latimea sa nu tresara. */
.pro-qr-hint { display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  margin: 0; min-width: 15rem; padding: .3rem .6rem; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; text-decoration: none;
  color: color-mix(in srgb, currentColor 68%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
  transition: color .25s ease, background-color .25s ease; }
.pro-qr-hint[hidden] { display: none; }
.pro-qr-hint i { font-size: 13px; }
/* Ultimele 30 de secunde: atentie. Ultimele 10: urgenta. */
.pro-qr-hint.is-warning { color: var(--warn); background: var(--warn-s); }
.pro-qr-hint.is-danger { color: var(--bad); background: var(--bad-s); }

/* Culorile se deduc din `currentColor`: widgetul apare pe fundaluri diferite
   (dialogul de login, sectiuni deschise sau inchise la culoare). */
.pro-qr-retry { display: flex; align-items: center; justify-content: center; gap: .45rem;
  width: max-content; min-width: 15rem; min-height: 44px; margin: .35rem 0 0; padding: .55rem 1.1rem;
  font: 600 14px var(--font); color: inherit; cursor: pointer;
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 10px; transition: background-color .18s, border-color .18s, opacity .18s; }
.pro-qr-retry:hover:not(:disabled) {
  background: color-mix(in srgb, currentColor 15%, transparent);
  border-color: color-mix(in srgb, currentColor 32%, transparent); }
.pro-qr-retry:disabled { opacity: .5; cursor: not-allowed; }
.pro-qr-retry i { transition: transform .4s ease; }
.pro-qr-retry.is-working i { transform: rotate(360deg); }