{#
  _stepper.html — Antet wizard import COMPACT (PUR vizual). PRD 5.13.
  Parametru: `pas` (integer 1-4). Clasele .stepper-* sunt definite in base.html.
  >=1024px: bara slim orizontala (.stepper-track). <1024px: forma colapsata
  "Pasul N din 4 - Titlu" + bara de progres (.stepper-collapsed).
  Utilizare: {% set pas = 1 %}{% include '_stepper.html' %}
#}
{%- set _pasi_import = [
  (1, "Incarca fisier",        "Trage un fisier xlsx/csv aici sau foloseste butonul de alegere."),
  (2, "Potriveste coloanele",  "Spune-ne ce coloana din fisier corespunde cu ce camp RAR."),
  (3, "Verifica",              "Verifica randurile inainte sa le trimiti la RAR."),
  (4, "Confirma trimiterea",   "Confirma numarul de prezentari — actiunea e ireversibila."),
] -%}
{%- set _activ = _pasi_import[pas - 1] -%}
<div class="stepper">
  {# Desktop (>=1024px): bara slim orizontala. #}
  <nav class="stepper-track" aria-label="Pasii importului">
    {% for nr, titlu, ajutor in _pasi_import %}
    {%- if nr < pas %}{% set cls = "is-done" %}{% set aria = "" %}
    {%- elif nr == pas %}{% set cls = "is-active" %}{% set aria = ' aria-current="step"' %}
    {%- else %}{% set cls = "" %}{% set aria = "" %}{% endif %}
    <div class="stepper-step {{ cls }}"{{ aria | safe }}>
      <span class="stepper-nr">{% if nr < pas %}&#10003;{% else %}{{ nr }}{% endif %}</span>
      <span class="stepper-tx">{{ titlu }}</span>
    </div>
    {% endfor %}
  </nav>
  {# Tableta/mobil (<1024px): colapsat "Pasul N din 4 - Titlu" + progres. #}
  <div class="stepper-collapsed">
    <div class="stepper-current">Pasul {{ pas }} din 4 <span class="muted">&middot; {{ _activ[1] }}</span></div>
    <div class="stepper-progress" role="progressbar" aria-valuenow="{{ pas }}" aria-valuemin="1" aria-valuemax="4"
         aria-label="Pasul {{ pas }} din 4"><span style="width:{{ (pas / 4 * 100) | round | int }}%;"></span></div>
  </div>
  {# Ajutorul pasului activ — o singura linie, sub bara (valabil pe ambele forme). #}
  <p class="stepper-help">{{ _activ[2] }}</p>
</div>