/* =============================================
   styles-sales.css
   Modulo Sales · Opportunità (vendita unica)
   Estende il design system editorial · navy + oro
   Tutte le classi `op-*` riusano le var --its-*
   ============================================= */


/* ── 1. Stat strip (lista) ──────────────────── */

.op-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.op-stat {
    position: relative;
    background: var(--its-surface);
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius);
    padding: 18px 22px 16px;
    overflow: hidden;
    min-height: 96px;
}

.op-stat::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--its-gold);
    opacity: 0;
    transition: opacity .18s ease;
}

.op-stat:hover::before { opacity: 1; }

.op-stat__label {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 10.5px;
    color: var(--its-text-muted);
    font-weight: 600;
    margin-bottom: 6px;
}

.op-stat__value {
    font-family: var(--its-serif);
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
    color: var(--its-text);
    letter-spacing: -.015em;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.op-stat__value sup {
    font-size: .42em;
    font-family: var(--its-sans);
    color: var(--its-text-dim);
    margin-left: 2px;
    vertical-align: super;
}

.op-stat__value--gold     { color: var(--its-gold-deep); }
.op-stat__value--success  { color: var(--its-success); }

.op-stat__delta {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--its-text-dim);
    letter-spacing: .02em;
}


/* ── 2. Filters bar (lista) ─────────────────── */

.op-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.op-filters > .op-filters__search { flex: 1; min-width: 260px; max-width: 360px; }
.op-filters > .op-filters__owner  { min-width: 200px; max-width: 240px; }

.op-seg {
    display: inline-flex;
    background: var(--its-surface);
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius-sm);
    overflow: hidden;
}

.op-seg__btn {
    appearance: none;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--its-border);
    padding: 8px 14px;
    font-family: var(--its-sans);
    font-size: 12px;
    color: var(--its-text-dim);
    cursor: pointer;
    letter-spacing: .02em;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}

.op-seg__btn:last-child { border-right: 0; }
.op-seg__btn:hover { background: var(--its-surface2); color: var(--its-text); }

.op-seg__btn.is-active {
    background: var(--its-text);
    color: var(--its-surface);
}

.op-seg__btn.is-active .op-seg__count {
    color: var(--its-gold);
}

.op-seg__count {
    display: inline-block;
    margin-left: 6px;
    color: var(--its-text-muted);
    font-family: var(--its-mono);
    font-size: 10.5px;
}


/* ── 3. List grid cell helpers ──────────────── */

.op-cell-code {
    font-family: var(--its-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--its-text);
}

.op-cell-code--locked { color: var(--its-gold-deep); }

.op-row-2 {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.op-row-2 strong {
    font-weight: 500;
    color: var(--its-text);
    font-size: 13px;
}

.op-row-2 small {
    color: var(--its-text-dim);
    font-size: 11px;
    margin-top: 2px;
}

.op-owner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--its-text);
    font-size: 12.5px;
}

.op-owner__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--its-text);
    color: var(--its-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--its-serif);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .04em;
}

.op-anticipo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.op-anticipo__pct {
    font-family: var(--its-serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--its-gold-deep);
    line-height: 1;
}

.op-anticipo__eur {
    font-family: var(--its-mono);
    font-size: 10.5px;
    color: var(--its-text-dim);
    margin-top: 2px;
}

.op-firmato {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--its-gold-soft);
    color: var(--its-gold-deep);
}


/* ── 4. Hero card (detail · view mode) ──────── */

.op-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
    padding: 28px 40px;
    background: var(--its-surface);
    margin: 20px 40px;
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius);
    overflow: hidden;
}

.op-hero__avatar {
    width: 116px;
    height: 116px;
    border-radius: var(--its-radius);
    background: var(--its-mark-gradient);
    color: var(--its-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--its-serif);
    font-size: 34px;
    font-weight: 500;
    letter-spacing: .04em;
    flex-shrink: 0;
    z-index: 1;
}

.op-hero__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1;
}

.op-hero__tags {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 10px;
    color: var(--its-gold-deep);
    font-weight: 600;
    margin-bottom: 2px;
}

.op-hero__tags .op-hero__sep { color: var(--its-border-strong); font-weight: 400; }

.op-hero__tags .op-hero__code {
    font-family: var(--its-mono);
    color: var(--its-text);
    letter-spacing: .06em;
}

.op-hero__name {
    font-family: var(--its-serif);
    font-size: 30px;
    font-weight: 500;
    color: var(--its-text);
    line-height: 1.1;
    letter-spacing: -.01em;
    margin: 0;
}

.op-hero__name em {
    font-style: italic;
    color: var(--its-gold-deep);
    font-weight: 400;
}

.op-hero__sub {
    font-size: 13px;
    color: var(--its-text-dim);
    margin-top: 2px;
}

.op-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--its-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.op-hero__meta b {
    color: var(--its-text);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}

.op-hero__prices {
    display: flex;
    align-items: stretch;
    gap: 18px;
    z-index: 1;
}

.op-hero__price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    min-width: 140px;
}

.op-hero__price-block .lbl {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 10px;
    color: var(--its-text-muted);
    font-weight: 500;
}

.op-hero__price-block .val {
    font-family: var(--its-serif);
    font-size: 38px;
    font-weight: 500;
    color: var(--its-gold-deep);
    line-height: 1.05;
    letter-spacing: -.015em;
    margin-top: 2px;
}

.op-hero__price-block .val--sm { font-size: 22px; color: var(--its-text); }

.op-hero__price-block .sub2 {
    font-size: 10.5px;
    font-family: var(--its-mono);
    color: var(--its-text-muted);
    margin-top: 4px;
    letter-spacing: .02em;
}

.op-hero__divider {
    width: 1px;
    background: var(--its-border);
    align-self: stretch;
}


/* ── 5. Tab bar (stepper) ───────────────────── */

.op-tabs-wrap {
    display: flex;
    gap: 0;
    background: var(--its-surface);
    padding: 0 32px;
    border-bottom: 1px solid var(--its-border);
    margin: 0;
    overflow-x: auto;
}

.op-tab {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px 16px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: var(--its-text-muted);
    font-family: var(--its-sans);
    transition: color .15s ease, border-color .15s ease;
    user-select: none;
    flex-shrink: 0;
}

.op-tab:hover { color: var(--its-text-dim); }

.op-tab__num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--its-surface2);
    color: var(--its-text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--its-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid var(--its-border);
    flex-shrink: 0;
    transition: all .15s ease;
}

.op-tab__label {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.op-tab__label small {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 9.5px;
    font-weight: 500;
    color: var(--its-text-muted);
    margin-bottom: 2px;
}

.op-tab__label-text {
    font-size: 13.5px;
    font-weight: 500;
    color: inherit;
}

.op-tab__badge {
    margin-left: 4px;
    padding: 1px 8px;
    background: var(--its-gold-soft);
    color: var(--its-gold-deep);
    border-radius: 999px;
    font-size: 10.5px;
    font-family: var(--its-mono);
    font-weight: 500;
}

.op-tab.is-active {
    color: var(--its-text);
    border-bottom-color: var(--its-gold);
}

.op-tab.is-active .op-tab__label-text { color: var(--its-text); }

.op-tab.is-active .op-tab__num {
    background: var(--its-text);
    color: var(--its-gold);
    border-color: var(--its-text);
}

.op-tab.is-done .op-tab__num {
    background: var(--its-gold);
    color: var(--its-text);
    border-color: var(--its-gold);
}

.op-tab.is-disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}


/* ── 6. Tab body container ──────────────────── */

.op-tab-body {
    padding: 28px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* ── 7. Step 1 · split + pick cards ─────────── */

.op-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.op-right-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.op-pick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.op-pick-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: var(--its-surface);
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.op-pick-card:hover {
    border-color: var(--its-border-strong);
}

.op-pick-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--its-text);
    color: var(--its-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--its-serif);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .03em;
    flex-shrink: 0;
}

.op-pick-card__body { flex: 1; min-width: 0; }

.op-pick-card__lbl {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--its-text-muted);
    margin-bottom: 4px;
}

.op-pick-card__name {
    font-family: var(--its-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--its-text);
    line-height: 1.2;
    margin: 0 0 6px 0;
    letter-spacing: -.005em;
}

.op-pick-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 11.5px;
    color: var(--its-text-dim);
    line-height: 1.5;
}

.op-pick-card__meta b {
    color: var(--its-text);
    font-weight: 500;
    margin-left: 4px;
}


/* ── 8. Empty state pick card ───────────────── */

.op-pick-card--empty {
    background: var(--its-surface2);
    border: 1px dashed var(--its-border-strong);
    color: var(--its-text-muted);
    text-align: center;
    justify-content: center;
    padding: 24px 18px;
    flex-direction: column;
}

.op-pick-card--empty .op-pick-card__lbl {
    text-align: center;
}

.op-pick-card--empty .op-pick-card__hint {
    font-size: 12px;
    color: var(--its-text-muted);
    line-height: 1.5;
    max-width: 220px;
}


/* ── 9. Dipendenti list (sidebar) ───────────── */

.op-emp-list {
    display: flex;
    flex-direction: column;
}

.op-emp-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--its-border);
}

.op-emp-row:last-child { border-bottom: 0; }

.op-emp-row__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--its-text);
    color: var(--its-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--its-serif);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
}

.op-emp-row__name {
    font-size: 13px;
    color: var(--its-text);
    font-weight: 500;
    line-height: 1.25;
}

.op-emp-row__rep {
    display: block;
    font-size: 10.5px;
    color: var(--its-gold-deep);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500;
    margin-top: 2px;
}

.op-emp-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--its-text-muted);
    font-size: 12px;
    line-height: 1.6;
}

.op-emp-foot-link {
    margin-top: 14px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--its-gold-deep);
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
}

.op-emp-foot-link:hover { color: var(--its-text); }


/* ── 10. Card section title (tab body cards) ─ */

.op-card-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.op-card-h h3 {
    font-family: var(--its-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--its-text);
    margin: 0;
    letter-spacing: -.005em;
}

.op-card-h__sub {
    font-size: 11px;
    color: var(--its-text-muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 500;
}


/* ── 11. Form grid (Step 1 edit) ─────────────── */

.op-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.op-form-grid .op-form-grid__full { grid-column: 1 / -1; }


/* ── 12. Step navigation footer ──────────────── */

.op-step-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 40px;
    background: var(--its-surface2);
    border-top: 1px solid var(--its-border);
    margin-top: 20px;
}

.op-step-foot__left {
    color: var(--its-text-dim);
    font-size: 12px;
    letter-spacing: .02em;
}

.op-step-foot__right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* ── 14. Error/info banner (sopra tab body) ──── */

.op-error-banner {
    margin: 16px 40px 0;
    padding: 12px 16px;
    background: rgba(181, 72, 72, .08);
    border-left: 3px solid var(--its-danger);
    color: var(--its-danger);
    font-size: 12.5px;
    line-height: 1.5;
    border-radius: var(--its-radius-sm);
}


/* ── 16. Step 2 · Toolbar righe ──────────────── */

.op-righe-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: var(--its-surface2);
    border-bottom: 1px solid var(--its-border);
}

.op-add-btn {
    appearance: none;
    background: var(--its-surface);
    border: 1px solid var(--its-border);
    color: var(--its-text);
    padding: 8px 14px;
    border-radius: var(--its-radius-sm);
    font-family: var(--its-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.op-add-btn:hover {
    background: var(--its-text);
    color: var(--its-gold);
    border-color: var(--its-text);
}

.op-righe-toolbar__summary {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--its-text-muted);
    letter-spacing: .04em;
}

.op-righe-toolbar__summary b {
    color: var(--its-text);
    font-family: var(--its-mono);
    font-weight: 500;
    margin-left: 4px;
}


/* ── 17. Step 2 · Tabella righe ─────────────── */

.op-righe-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    background: var(--its-surface);
}

.op-righe-table thead th {
    padding: 12px 14px;
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--its-text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--its-border);
    background: var(--its-bg);
}

.op-righe-table tbody td {
    padding: 14px;
    border-bottom: 1px solid var(--its-border);
    color: var(--its-text);
    vertical-align: top;
}

.op-righe-table tbody tr:last-child td { border-bottom: 0; }

.op-righe-table tbody tr:hover { background: var(--its-surface2); }

.op-righe-table .num { text-align: right; }
.op-righe-table .center { text-align: center; }

.op-righe-table .mono { font-family: var(--its-mono); }

.op-num-ord {
    font-family: var(--its-serif);
    font-size: 18px;
    color: var(--its-gold-deep);
    text-align: center;
    line-height: 1;
}

.op-tipo-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.op-tipo-cell__lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--its-text-dim);
    font-weight: 500;
}

.op-tipo-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.op-tipo-icon--prodotto { background: rgba(201, 143, 107, .15); color: var(--its-warning); }
.op-tipo-icon--corso    { background: rgba(26, 34, 56,  .12); color: var(--its-text); }
.op-tipo-icon--percorso { background: var(--its-gold-soft); color: var(--its-gold-deep); }

.op-item-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
}

.op-item-cell__code {
    font-family: var(--its-mono);
    font-size: 10.5px;
    color: var(--its-text-muted);
    letter-spacing: .04em;
}

.op-item-cell__name {
    font-family: var(--its-serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--its-text);
    line-height: 1.25;
    letter-spacing: -.005em;
}

.op-item-cell__desc {
    font-size: 11.5px;
    color: var(--its-text-dim);
    line-height: 1.4;
    margin-top: 2px;
}

.op-discount {
    color: var(--its-gold-deep);
    font-weight: 500;
    font-family: var(--its-mono);
    font-size: 11.5px;
}

.op-strong {
    font-family: var(--its-mono);
    font-weight: 500;
    color: var(--its-text);
    font-size: 12.5px;
}

.op-pill--wizard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: var(--its-radius-sm);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    font-family: var(--its-mono);
    text-transform: uppercase;
}

.op-pill--cdb { background: var(--its-text); color: var(--its-bg); }
.op-pill--win { background: var(--its-gold); color: var(--its-text); }


/* ── 18. Step 2 · Empty state ───────────────── */

.op-righe-empty {
    padding: 60px 20px;
    text-align: center;
    background: var(--its-surface);
}

.op-righe-empty__title {
    font-family: var(--its-serif);
    font-size: 22px;
    color: var(--its-text-dim);
    margin-bottom: 6px;
}

.op-righe-empty__sub {
    font-size: 12px;
    color: var(--its-text-muted);
}


/* ── 19. Step 2 · Riepilogo totali ───────────── */

.op-totali {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--its-surface);
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius-sm);
    overflow: hidden;
}

.op-totali__left {
    padding: 22px 28px;
    border-right: 1px solid var(--its-border);
}

.op-totali__right {
    padding: 22px 28px;
    background: var(--its-surface2);
}

.op-totali__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: var(--its-text-dim);
}

.op-totali__row b {
    font-family: var(--its-mono);
    color: var(--its-text);
    font-weight: 500;
    font-size: 14px;
}

.op-totali__row.is-grand {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--its-border);
    font-size: 14px;
    color: var(--its-text);
}

.op-totali__row.is-grand b {
    font-family: var(--its-serif);
    font-size: 32px;
    color: var(--its-gold-deep);
    font-weight: 500;
}

.op-totali__lbl {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 10px;
    color: var(--its-text-muted);
    font-weight: 500;
    margin-bottom: 10px;
}

.op-az-row--wizard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
}

.op-az-row__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--its-text-dim);
}

.op-az-row--wizard b {
    font-family: var(--its-mono);
    color: var(--its-text);
    font-weight: 500;
    font-size: 13px;
}

.op-az-hint {
    font-size: 11px;
    color: var(--its-text-muted);
    margin-top: 8px;
    line-height: 1.4;
}


/* ── 20. Modal · Add riga (shared shell) ──────── */

/* Override padding standard di MudDialog per le 3 modal Sales */
.op-dialog .mud-dialog-title    { padding: 28px 36px 18px; border-bottom: 1px solid var(--its-border); }
.op-dialog .mud-dialog-content  { padding: 22px 36px 8px; }
.op-dialog .mud-dialog-actions  { padding: 18px 36px 26px; border-top: 1px solid var(--its-border); margin: 0; }

.op-modal__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.op-modal__eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 10.5px;
    color: var(--its-gold-deep);
    font-weight: 600;
}

.op-modal__title {
    font-family: var(--its-serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--its-text);
    letter-spacing: -.005em;
    margin: 0;
    line-height: 1.15;
}

.op-modal__title em {
    font-style: italic;
    color: var(--its-gold-deep);
    font-weight: 400;
}

.op-modal__sub {
    font-size: 12.5px;
    color: var(--its-text-dim);
    line-height: 1.55;
    margin-top: 4px;
    max-width: 640px;
}

.op-modal__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: 62vh;
    overflow-y: auto;
    padding: 6px 4px 14px;
    margin: 0 -4px;
}

.op-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.op-modal__foot-preview {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.op-modal__foot-preview .l {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 9.5px;
    color: var(--its-text-muted);
    font-weight: 600;
}

.op-modal__foot-preview .v {
    font-family: var(--its-serif);
    font-size: 26px;
    color: var(--its-gold-deep);
    font-weight: 500;
    letter-spacing: -.005em;
    line-height: 1;
}

.op-modal__foot-preview .v small {
    font-family: var(--its-sans);
    font-size: 11px;
    color: var(--its-text-muted);
    margin-left: 6px;
    font-weight: 400;
    letter-spacing: 0;
}

.op-modal__foot-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* ── 21. Modal · Search list (step list) ──────── */

.op-step-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius-sm);
    overflow: hidden;
    background: var(--its-surface);
}

.op-step-item {
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--its-border);
    cursor: pointer;
    transition: background .15s ease;
}

.op-step-item:last-child { border-bottom: 0; }
.op-step-item:hover { background: var(--its-surface2); }

.op-step-item__ord {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--its-text);
    color: var(--its-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--its-serif);
    font-size: 13px;
    font-weight: 500;
}

.op-step-item__ord--gold {
    background: var(--its-gold);
    color: var(--its-text);
}

.op-step-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.op-step-item__code {
    font-family: var(--its-mono);
    font-size: 10.5px;
    color: var(--its-text-muted);
    letter-spacing: .04em;
}

.op-step-item__name {
    font-family: var(--its-serif);
    font-size: 15px;
    color: var(--its-text);
    font-weight: 500;
}

.op-step-item__meta {
    font-size: 11.5px;
    color: var(--its-text-dim);
}

.op-step-item__price {
    font-family: var(--its-mono);
    font-size: 13px;
    color: var(--its-text);
    font-weight: 500;
}

.op-step-item.is-modified {
    background: var(--its-gold-soft);
}

.op-step-item.is-new {
    border-left: 3px solid var(--its-gold-deep);
}


/* ── 22. Modal · Pick result card ─────────────── */

.op-pick-result {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    background: var(--its-gold-soft);
    border-radius: var(--its-radius-sm);
    border: 1px solid var(--its-gold);
}

.op-pick-result__ico {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--its-text);
    color: var(--its-gold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.op-pick-result__lbl {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 9.5px;
    color: var(--its-gold-deep);
    font-weight: 600;
}

.op-pick-result__name {
    font-family: var(--its-serif);
    font-size: 18px;
    color: var(--its-text);
    font-weight: 500;
    margin: 2px 0;
    line-height: 1.2;
}

.op-pick-result__desc {
    font-size: 12px;
    color: var(--its-text-dim);
    line-height: 1.4;
}

.op-pick-result__price {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.op-pick-result__price .p {
    font-family: var(--its-serif);
    font-size: 22px;
    color: var(--its-gold-deep);
    font-weight: 500;
    line-height: 1;
}

.op-pick-result__price .vat {
    font-family: var(--its-mono);
    font-size: 10.5px;
    color: var(--its-text-muted);
}

.op-change-link {
    display: inline-block;
    font-size: 11.5px;
    color: var(--its-text-dim);
    cursor: pointer;
    text-decoration: none;
    transition: color .15s ease;
}

.op-change-link:hover { color: var(--its-text); }


/* ── 23. Modal · Mode cards (Percorso) ────────── */

.op-mode-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.op-mode-card {
    background: var(--its-surface);
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius-sm);
    padding: 16px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.op-mode-card:hover { border-color: var(--its-border-strong); }

.op-mode-card.is-active {
    background: var(--its-gold-soft);
    border-color: var(--its-gold);
}

.op-mode-card__tag {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 9.5px;
    color: var(--its-gold-deep);
    font-weight: 600;
    margin-bottom: 4px;
}

.op-mode-card__ttl {
    font-family: var(--its-serif);
    font-size: 18px;
    color: var(--its-text);
    font-weight: 500;
    margin-bottom: 4px;
}

.op-mode-card__sub {
    font-size: 11.5px;
    color: var(--its-text-dim);
    line-height: 1.4;
}


/* ── 24. Modal · Section header ───────────────── */

.op-modal-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--its-border);
}

.op-modal-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.op-modal-section__head h4 {
    font-family: var(--its-serif);
    font-size: 18px;
    color: var(--its-text);
    font-weight: 500;
    margin: 0;
}

.op-modal-section__meta {
    font-size: 11px;
    color: var(--its-text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.op-num-part-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.op-num-part-row .mud-input-control {
    flex: 0 0 180px;
    max-width: 180px;
}

.op-num-part-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--its-text-muted);
}


/* ── 25. Modal · Partecipanti picker ──────────── */

.op-part-tabs {
    display: inline-flex;
    background: var(--its-surface2);
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius-sm);
    overflow: hidden;
    align-self: flex-start;
}

.op-part-tabs button {
    appearance: none;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--its-border);
    padding: 8px 14px;
    font-family: var(--its-sans);
    font-size: 12px;
    color: var(--its-text-dim);
    cursor: pointer;
    letter-spacing: .02em;
    transition: background .15s ease, color .15s ease;
}

.op-part-tabs button:last-child { border-right: 0; }
.op-part-tabs button:hover { color: var(--its-text); }
.op-part-tabs button.is-active { background: var(--its-text); color: var(--its-surface); }

.op-part-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.op-part-chip {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--its-surface);
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius-sm);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.op-part-chip:hover { border-color: var(--its-border-strong); }

.op-part-chip.is-selected {
    background: var(--its-gold-soft);
    border-color: var(--its-gold);
}

.op-content-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.op-content-badges .its-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.op-part-chip.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    background: var(--its-surface2);
}

.op-part-chip.is-disabled:hover { border-color: var(--its-border); }

.op-part-chip__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--its-text);
    color: var(--its-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--its-serif);
    font-size: 11px;
    font-weight: 500;
}

.op-part-chip__b {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.op-part-chip__n {
    font-size: 13px;
    color: var(--its-text);
    font-weight: 500;
}

.op-part-chip__r {
    font-size: 10.5px;
    color: var(--its-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.op-part-chip__check {
    width: 18px;
    height: 18px;
    border: 1px solid var(--its-border-strong);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--its-surface);
    background: var(--its-surface);
    flex-shrink: 0;
}

.op-part-chip.is-selected .op-part-chip__check {
    background: var(--its-gold-deep);
    border-color: var(--its-gold-deep);
    color: var(--its-bg);
}

.op-part-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.op-part-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--its-surface);
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius-sm);
    font-size: 12.5px;
}

.op-part-row__src {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 9.5px;
    font-weight: 600;
}

.op-part-row__src--anag  { color: var(--its-text); }
.op-part-row__src--adhoc { color: var(--its-gold-deep); }


/* ── 26. Modal · Sequenza riordinabile (Percorso) ─ */

.op-seq-actions {
    display: inline-flex;
    gap: 4px;
}

.op-seq-actions button {
    appearance: none;
    background: transparent;
    border: 1px solid var(--its-border);
    width: 26px;
    height: 26px;
    border-radius: var(--its-radius-sm);
    color: var(--its-text-dim);
    cursor: pointer;
    font-size: 12px;
    transition: background .15s ease, color .15s ease;
}

.op-seq-actions button:hover:not(:disabled) {
    background: var(--its-surface2);
    color: var(--its-text);
}

.op-seq-actions button:disabled { opacity: .35; cursor: not-allowed; }

.op-step-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--its-text-muted);
    font-size: 12px;
    background: var(--its-surface2);
    border-radius: var(--its-radius-sm);
}


/* ── 99. Responsive ──────────────────────────── */

@media (max-width: 1100px) {
    .op-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .op-hero { grid-template-columns: 1fr; }
    .op-hero__prices { justify-content: flex-start; }
    .op-split { grid-template-columns: 1fr; }
    .op-pick-grid { grid-template-columns: 1fr; }
    .op-mode-cards { grid-template-columns: 1fr; }
    .op-totali { grid-template-columns: 1fr; }
    .op-totali__left { border-right: 0; border-bottom: 1px solid var(--its-border); }
}

@media (max-width: 768px) {
    .op-tab-body, .op-step-foot, .op-tabs-wrap, .op-hero { padding-left: 20px; padding-right: 20px; }
    .op-hero { margin-left: 16px; margin-right: 16px; }
    .op-hero__avatar { width: 88px; height: 88px; font-size: 28px; }
    .op-stat-grid { grid-template-columns: 1fr; }
    .op-tab__label small { display: none; }
    .op-form-grid { grid-template-columns: 1fr; }
    .op-modal { min-width: 0; }
    .op-part-grid { grid-template-columns: 1fr; }
}


/* ── 25. CompanyToggle (CDB / WIN) ─────────────── */

.op-company-toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.op-company-toggle__lbl {
    font-size: 11px;
    color: var(--its-text-muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 500;
}

.op-company-toggle__group {
    display: flex;
    gap: 10px;
}

.op-company-toggle__btn {
    appearance: none;
    background: var(--its-surface);
    border: 1px solid var(--its-border);
    color: var(--its-text);
    min-width: 200px;
    padding: 10px 16px;
    border-radius: var(--its-radius-sm);
    font-family: var(--its-sans);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.op-company-toggle__btn:hover {
    border-color: var(--its-border-strong);
}

.op-company-toggle__label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
}

.op-company-toggle__btn--cdb.is-active {
    background: var(--its-text);
    border-color: var(--its-text);
}

.op-company-toggle__btn--cdb.is-active .op-company-toggle__label {
    color: var(--its-bg);
}

.op-company-toggle__btn--cdb.is-active .op-pill--cdb {
    background: var(--its-gold);
    color: var(--its-text);
}

.op-company-toggle__btn--win.is-active {
    background: var(--its-gold);
    border-color: var(--its-gold);
}

.op-company-toggle__btn--win.is-active .op-company-toggle__label {
    color: var(--its-text);
}

.op-company-toggle__btn--win.is-active .op-pill--win {
    background: var(--its-text);
    color: var(--its-gold);
}


/* ── 26. Form ad-hoc partecipanti corso ────────── */

.op-adhoc-row {
    align-items: end;
}

.op-adhoc-btn {
    height: 40px;
    align-self: end;
    margin-bottom: 2px !important;
}


/* ── 27. Step 2 · Cell expand (chevron + lista) ── */

.op-cell-expand {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 4px 0 0 0;
    margin-top: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--its-text-dim);
    font-family: var(--its-sans);
    font-size: 11.5px;
    letter-spacing: .02em;
    transition: color .15s ease;
}

.op-cell-expand:hover {
    color: var(--its-text);
}

/* Riepilogo statico partecipanti (solo conteggio, nessun nominativo) */
.op-cell-meta {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--its-text-muted);
    font-family: var(--its-sans);
    font-size: 11.5px;
    letter-spacing: .02em;
}

.op-cell-meta__sub {
    color: var(--its-text-muted);
}

/* Slot anonimo "da definire" nell'elenco partecipanti */
.op-cell-participants__anon .op-cell-participants__avatar {
    background: var(--its-surface2);
    color: var(--its-text-muted);
}

.op-cell-participants__anon .op-cell-participants__name {
    color: var(--its-text-muted);
    font-style: italic;
}

.op-cell-participants {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 6px 0 0 0;
    border-top: 1px dashed var(--its-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.op-cell-participants li {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    align-items: center;
    gap: 8px;
    min-height: 24px;
}

.op-cell-participants__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--its-text);
    color: var(--its-gold);
    font-family: var(--its-serif);
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .04em;
}

.op-cell-participants__name {
    font-size: 12px;
    color: var(--its-text);
}

.op-cell-participants__role {
    font-size: 10px;
    color: var(--its-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.op-cell-participants__src {
    font-size: 9.5px;
    color: var(--its-gold-deep);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    padding: 1px 6px;
    border: 1px solid var(--its-gold-deep);
    border-radius: var(--its-radius-sm);
}

.op-cell-sequence {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 6px 0 0 0;
    border-top: 1px dashed var(--its-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.op-cell-sequence li {
    display: grid;
    grid-template-columns: 22px auto 1fr;
    align-items: baseline;
    gap: 10px;
    min-height: 22px;
}

.op-cell-sequence__ord {
    font-family: var(--its-serif);
    font-size: 16px;
    color: var(--its-gold);
    text-align: center;
    line-height: 1;
}

.op-cell-sequence__code {
    font-family: var(--its-mono);
    font-size: 10.5px;
    color: var(--its-text-muted);
    letter-spacing: .04em;
}

.op-cell-sequence__name {
    font-family: var(--its-serif);
    font-size: 13px;
    color: var(--its-text);
}


/* =============================================
   Step 3 — Pagamenti & documenti
   ============================================= */

.op-pay-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.op-pay-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--its-serif);
    font-size: 17px;
    color: var(--its-text);
    letter-spacing: -.005em;
    margin: 0;
}

.op-pay-section__title small {
    font-family: var(--its-sans);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--its-text-muted);
    font-weight: 500;
}

.op-pay-divider {
    border: 0;
    border-top: 1px solid var(--its-border);
    margin: 18px 0 4px;
}

.op-pay-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--its-bg);
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius-sm);
    margin-top: 4px;
}

.op-pay-summary-row__lbl {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--its-text-muted);
}

.op-pay-summary-row__val {
    font-family: var(--its-serif);
    font-size: 22px;
    color: var(--its-text);
    letter-spacing: -.01em;
}

.op-pay-summary-row__sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--its-text-dim);
    text-align: right;
}

.op-doc-upload {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 10px;
    align-items: end;
}

.op-doc-upload__file {
    grid-column: 1 / -1;
}

.op-doc-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.op-doc-row {
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--its-surface);
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius-sm);
}

.op-doc-row__type {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-align: center;
    padding: 3px 6px;
    border-radius: 3px;
    font-weight: 600;
}

.op-doc-row__type--anticipo { background: var(--its-gold); color: var(--its-text); }
.op-doc-row__type--residuo  { background: var(--its-text); color: var(--its-bg); }
.op-doc-row__type--altro    { background: var(--its-surface2); color: var(--its-text-muted); }

.op-doc-row__name {
    font-family: var(--its-mono);
    font-size: 11.5px;
    color: var(--its-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.op-doc-row__name a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--its-border);
}

.op-doc-row__name a:hover {
    color: var(--its-gold-deep);
    border-bottom-color: var(--its-gold);
}

.op-doc-row__size {
    font-size: 10.5px;
    color: var(--its-text-dim);
    font-variant-numeric: tabular-nums;
}

.op-doc-empty {
    padding: 18px 12px;
    text-align: center;
    font-size: 11.5px;
    color: var(--its-text-dim);
    border: 1px dashed var(--its-border);
    border-radius: var(--its-radius-sm);
}


/* =============================================
   Step 4 — Riepilogo & firma
   ============================================= */

.op-summary {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.op-summary-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.op-summary-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--its-border);
    padding-bottom: 8px;
}

.op-summary-section__title {
    font-family: var(--its-serif);
    font-size: 18px;
    color: var(--its-text);
    margin: 0;
    letter-spacing: -.005em;
}

.op-summary-section__title em {
    font-style: italic;
    color: var(--its-gold-deep);
}

.op-summary-section__sub {
    font-size: 11px;
    color: var(--its-text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.op-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.op-summary-pay-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 14px;
    padding: 8px 0;
}

.op-summary-pay-row + .op-summary-pay-row {
    border-top: 1px solid var(--its-border);
}

.op-summary-pay-row__lbl {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--its-text-muted);
    align-self: center;
}

.op-summary-pay-row__val {
    color: var(--its-text);
}

.op-summary-pay-row__val .strong {
    font-family: var(--its-serif);
    font-size: 17px;
    margin-right: 6px;
}

.op-summary-pay-row__val .muted {
    font-size: 11.5px;
    color: var(--its-text-dim);
    margin-left: 8px;
}

.op-summary-pay-row__note {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--its-text-muted);
    font-style: italic;
    margin-top: 2px;
}

.op-otp-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    background: var(--its-bg);
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius-sm);
}

.op-otp-card--signed {
    background: var(--its-text);
    color: var(--its-bg);
    border-color: var(--its-gold);
}

.op-otp-card--signed .op-otp-card__title,
.op-otp-card--signed .op-otp-card__meta { color: var(--its-bg); }

.op-otp-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--its-surface2);
    color: var(--its-gold-deep);
}

.op-otp-card--signed .op-otp-card__icon {
    background: var(--its-gold);
    color: var(--its-text);
}

.op-otp-card__title {
    font-family: var(--its-serif);
    font-size: 17px;
    color: var(--its-text);
    margin: 0 0 2px;
    letter-spacing: -.005em;
}

.op-otp-card__meta {
    font-size: 11.5px;
    color: var(--its-text-muted);
}

.op-otp-card__meta .mono {
    font-family: var(--its-mono);
    font-size: 11px;
}

.op-otp-timer {
    font-family: var(--its-mono);
    font-size: 14px;
    color: var(--its-gold-deep);
    letter-spacing: .04em;
}

.op-otp-attempts {
    font-size: 11.5px;
    color: var(--its-text-muted);
}

.op-cta-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: var(--its-bg);
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius-sm);
    margin-top: 6px;
}

.op-cta-foot__hint {
    font-size: 11.5px;
    color: var(--its-text-muted);
    max-width: 480px;
}

.op-cta-foot__hint strong {
    color: var(--its-text);
    font-weight: 600;
}

.op-cta-foot__actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* =============================================
   Step 3 — Pagamenti redesign (slider · radio pills · drop zone · rate table)
   ============================================= */

.op-pay-card {
    background: var(--its-surface);
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius-sm);
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.op-pay-card .card-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.op-pay-card .card-h h3 {
    font-family: var(--its-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--its-text);
    margin: 0;
    letter-spacing: -.005em;
}

.op-pay-card .card-h .sub {
    font-size: 11.5px;
    color: var(--its-text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.op-pay-card .fl {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--its-text-muted);
    font-weight: 500;
    margin-bottom: 8px;
}

.op-pay-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--its-text-muted);
    cursor: pointer;
}

.op-pay-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--its-gold-deep);
    cursor: pointer;
}

/* ── Slider per percentuale anticipo (input nativo + accent-color) ────
   Approccio nativo: il browser gestisce posizione thumb + fill via la
   proprietà CSS `accent-color`. Niente matematica, niente gradient hack,
   funziona a qualsiasi larghezza display.
   - accent-color: var(--its-gold) → fill gold a sinistra del thumb
   - background track: surface2
   - thumb override: navy + bordo gold (sostituisce il thumb gold default)
   ===================================================================== */

.op-slider-row {
    display: grid;
    grid-template-columns: 1fr 90px;
    gap: 18px;
    align-items: center;
}

.op-native-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    /* accent-color colora il fill nativo (sinistra del thumb) in tutti i browser
       moderni (Chrome 93+, Firefox 92+, Safari 15.4+) */
    accent-color: var(--its-gold);
    background: var(--its-surface2);
    outline: none;
    cursor: pointer;
    margin: 0;
}

/* Track unfilled — Webkit/Blink */
.op-native-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: transparent; /* lasciamo passare accent-color */
}

/* Track unfilled — Firefox */
.op-native-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--its-surface2);
}

/* Firefox: progress (fill) gold */
.op-native-slider::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--its-gold);
}

/* Thumb override: navy con bordo gold (Webkit/Blink) */
.op-native-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border: 2px solid var(--its-gold);
    border-radius: 50%;
    background: var(--its-text);
    box-shadow: 0 1px 3px rgba(26, 34, 56, .25);
    cursor: pointer;
    transition: box-shadow .15s ease;
}

/* Thumb override — Firefox */
.op-native-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid var(--its-gold);
    border-radius: 50%;
    background: var(--its-text);
    box-shadow: 0 1px 3px rgba(26, 34, 56, .25);
    cursor: pointer;
    transition: box-shadow .15s ease;
}

/* Hover/focus: alone gold soft */
.op-native-slider:hover::-webkit-slider-thumb,
.op-native-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 1px 3px rgba(26, 34, 56, .25),
                0 0 0 4px rgba(200, 168, 120, .25);
}

.op-native-slider:hover::-moz-range-thumb,
.op-native-slider:focus-visible::-moz-range-thumb {
    box-shadow: 0 1px 3px rgba(26, 34, 56, .25),
                0 0 0 4px rgba(200, 168, 120, .25);
}

.op-slider-num {
    font-family: var(--its-serif);
    font-size: 32px;
    line-height: 1;
    color: var(--its-text);
    text-align: right;
    letter-spacing: -.02em;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
}

/* Campo numerico editabile che imita la cifra grande dello slider */
.op-slider-input {
    font-family: var(--its-serif);
    font-size: 32px;
    line-height: 1;
    color: var(--its-text);
    letter-spacing: -.02em;
    width: 62px;
    text-align: right;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--its-border);
    padding: 0 0 2px;
    outline: none;
    -moz-appearance: textfield;
    transition: border-color .15s ease;
}

.op-slider-input::-webkit-outer-spin-button,
.op-slider-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.op-slider-input:focus {
    border-bottom-color: var(--its-gold);
}

.op-slider-input:disabled {
    border-bottom-color: transparent;
    color: var(--its-text-muted);
}

.op-slider-num small {
    font-family: var(--its-sans);
    font-size: 13px;
    color: var(--its-text-muted);
    margin-left: 2px;
    font-weight: 400;
}

/* ── Radio pills (Bonifico/Assegno/SDD/...) ── */

.op-radio-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.op-radio-pills button {
    appearance: none;
    background: var(--its-surface);
    border: 1px solid var(--its-border);
    border-radius: 999px;
    padding: 6px 14px;
    font-family: var(--its-sans);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--its-text-muted);
    cursor: pointer;
    transition: all .15s ease;
    letter-spacing: .02em;
}

.op-radio-pills button:hover {
    border-color: var(--its-gold);
    color: var(--its-text);
}

.op-radio-pills button.is-active {
    background: var(--its-text);
    border-color: var(--its-text);
    color: var(--its-bg);
}

/* ── Pay summary inline box ──────────────────── */

.op-pay-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    background: var(--its-bg);
    border-left: 3px solid var(--its-gold);
    padding: 14px 18px;
    border-radius: 4px;
}

.op-pay-summary .l {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--its-text-muted);
    margin-bottom: 4px;
}

.op-pay-summary .v {
    font-family: var(--its-serif);
    font-size: 26px;
    color: var(--its-text);
    line-height: 1;
    letter-spacing: -.01em;
}

.op-pay-summary .v small {
    font-family: var(--its-sans);
    font-size: 12px;
    color: var(--its-text-dim);
    margin-left: 8px;
    font-weight: 400;
}

/* ── Drop zone for documents ─────────────────── */

.op-doc-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--its-bg);
    border: 1.5px dashed var(--its-border);
    border-radius: 6px;
    padding: 24px 18px;
    transition: all .15s ease;
    cursor: pointer;
    gap: 4px;
}

.op-doc-drop:hover {
    border-color: var(--its-gold);
    background: var(--its-surface2);
}

/* Visual feedback durante drag-over (file trascinato sopra l'area) */
.op-doc-drop.is-dragover {
    border-color: var(--its-gold-deep);
    border-style: solid;
    border-width: 2px;
    background: var(--its-gold-soft);
    transform: scale(1.01);
    box-shadow: 0 0 0 4px rgba(200, 168, 120, .15);
}

.op-doc-drop.is-dragover .ico-doc {
    background: var(--its-gold);
    color: var(--its-text);
    transform: scale(1.1);
}

.op-doc-drop.is-dragover strong {
    color: var(--its-gold-deep);
}

/* L'InputFile è child diretto di .op-doc-drop con classe op-doc-drop__input
   Copre l'intera area → cattura click + drag-and-drop nativi.
   opacity:0 lo nasconde visivamente lasciando il contenuto decorativo visibile. */
.op-doc-drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.op-doc-drop .ico-doc {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--its-surface2);
    color: var(--its-gold-deep);
    margin-bottom: 6px;
    transition: all .18s ease;
}

.op-doc-drop:hover .ico-doc {
    background: var(--its-gold);
    color: var(--its-text);
}

.op-doc-drop strong {
    font-family: var(--its-serif);
    font-size: 14px;
    color: var(--its-text);
    font-weight: 500;
    letter-spacing: -.005em;
}

.op-doc-drop span {
    font-size: 11.5px;
    color: var(--its-text-muted);
}

.op-doc-drop em {
    color: var(--its-gold-deep);
    font-style: normal;
    text-decoration: underline;
    text-decoration-color: var(--its-gold);
    text-underline-offset: 3px;
}

.op-doc-drop small {
    font-size: 10.5px;
    color: var(--its-text-dim);
    margin-top: 4px;
}

/* L'InputFile non viene nascosto con display:none — usa op-doc-drop__input
   (opacity:0 + position:absolute) per mantenere drag-and-drop funzionante. */

/* Document row (compact) */
.op-doc-row .ico-pdf {
    width: 36px;
    height: 36px;
    background: var(--its-surface2);
    color: var(--its-gold-deep);
    border-radius: 4px;
    display: grid;
    place-items: center;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
}

.op-doc-row .name {
    font-family: var(--its-mono);
    font-size: 11.5px;
    color: var(--its-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.op-doc-row .meta {
    font-size: 10.5px;
    color: var(--its-text-dim);
    margin-top: 2px;
}

.op-doc-row .size {
    font-size: 10.5px;
    color: var(--its-text-dim);
    font-variant-numeric: tabular-nums;
}

.op-doc-row .x {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--its-text-dim);
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
    transition: all .15s ease;
}

.op-doc-row .x:hover {
    background: rgba(229, 57, 53, .1);
    color: #e53935;
}

/* ── Rate plan table ────────────────────────── */

.op-rate-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: var(--its-bg);
    border: 1px solid var(--its-border);
    border-radius: 4px;
    overflow: hidden;
}

.op-rate-table thead th {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 10.5px;
    color: var(--its-text-muted);
    font-weight: 500;
    padding: 9px 12px;
    background: var(--its-surface2);
    border-bottom: 1px solid var(--its-border);
}

.op-rate-table thead th.num,
.op-rate-table tbody td.num {
    text-align: right;
    font-family: var(--its-mono);
    font-variant-numeric: tabular-nums;
}

.op-rate-table tbody td {
    padding: 9px 12px;
    border-top: 1px solid var(--its-border);
    color: var(--its-text);
}

.op-rate-table tbody tr:first-child td {
    border-top: 0;
}

/* ── Altri allegati (collassabile) ─────────── */

.op-altri-allegati {
    margin-top: 22px;
    background: var(--its-surface);
    border: 1px solid var(--its-border);
    border-radius: var(--its-radius-sm);
}

.op-altri-allegati__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    cursor: pointer;
    user-select: none;
}

.op-altri-allegati__head h4 {
    font-family: var(--its-serif);
    font-size: 16px;
    color: var(--its-text);
    margin: 0;
    font-weight: 500;
}

.op-altri-allegati__head h4 .count {
    font-family: var(--its-sans);
    font-size: 11.5px;
    color: var(--its-text-muted);
    margin-left: 8px;
    font-weight: 400;
}

.op-altri-allegati__body {
    padding: 6px 22px 22px;
    border-top: 1px solid var(--its-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* =============================================
   Step 4 — Riepilogo & Firma redesign
   ============================================= */

/* ── Status banner (full-width, contestuale) ── */

.op-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    background: var(--its-bg);
    border: 1px solid var(--its-border);
    border-left: 4px solid var(--its-gold);
    border-radius: var(--its-radius-sm);
    padding: 18px 22px;
}

.op-banner.success {
    background: var(--its-text);
    color: var(--its-bg);
    border-color: var(--its-gold);
    border-left-color: var(--its-gold);
}

.op-banner.success .ttl,
.op-banner.success .sub { color: var(--its-bg); }

.op-banner.danger {
    background: #fef0ef;
    border-left-color: #e53935;
}

.op-banner.danger .ttl { color: #b71c1c; }

.op-banner-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--its-surface2);
    color: var(--its-gold-deep);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.op-banner.success .op-banner-icon {
    background: var(--its-gold);
    color: var(--its-text);
}

.op-banner.danger .op-banner-icon {
    background: #ffd6d3;
    color: #b71c1c;
}

.op-banner-body .ttl {
    font-family: var(--its-serif);
    font-size: 18px;
    color: var(--its-text);
    margin: 0 0 3px;
    letter-spacing: -.005em;
}

.op-banner-body .sub {
    font-size: 12px;
    color: var(--its-text-muted);
    line-height: 1.5;
}

.op-banner-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Riepilogo righe d'ordine ────────────────── */

.op-summary-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.op-summary-row {
    display: grid;
    grid-template-columns: 28px 1fr auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--its-border);
}

.op-summary-row:last-child { border-bottom: 0; }

.op-summary-row .num {
    font-family: var(--its-serif);
    font-size: 18px;
    color: var(--its-gold-deep);
    text-align: center;
    line-height: 1;
}

.op-summary-row .qty {
    font-size: 11.5px;
    color: var(--its-text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 50px;
    text-align: right;
}

.op-summary-row .price {
    font-family: var(--its-mono);
    font-size: 11.5px;
    color: var(--its-text-dim);
    font-variant-numeric: tabular-nums;
    min-width: 80px;
    text-align: right;
}

.op-summary-row .gross {
    font-family: var(--its-serif);
    font-size: 16px;
    color: var(--its-text);
    font-variant-numeric: tabular-nums;
    min-width: 100px;
    text-align: right;
    font-weight: 500;
}

/* ── Op pill (riusato in summary) ──────────── */

.op-pill--summary {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.op-pill--summary.cdb { background: var(--its-text); color: var(--its-gold); }
.op-pill--summary.win { background: var(--its-gold); color: var(--its-text); }

/* ── Totali grid (left/right variant) ───────── */

.op-totali-left,
.op-totali-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.op-totali-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    font-size: 12px;
    color: var(--its-text-muted);
}

.op-totali-row b {
    color: var(--its-text);
    font-family: var(--its-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.op-totali-row.is-grand {
    border-top: 1px solid var(--its-border);
    margin-top: 4px;
    padding-top: 12px;
    font-size: 13px;
    color: var(--its-text);
    font-weight: 500;
}

.op-totali-row.is-grand b {
    font-family: var(--its-serif);
    font-size: 22px;
    color: var(--its-text);
    line-height: 1;
}

.op-az-row--summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 12.5px;
    color: var(--its-text);
}

.op-az-row--summary b {
    font-family: var(--its-mono);
    color: var(--its-text);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.op-totali-right .lbl {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--its-text-muted);
    margin-bottom: 4px;
}

/* ── Signed audit card ────────────────────── */

.op-signed-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: flex-start;
    background: var(--its-text);
    color: var(--its-bg);
    border-radius: 6px;
    padding: 22px 24px;
}

.op-signed-card .seal {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--its-gold);
    color: var(--its-text);
    display: grid;
    place-items: center;
}

.op-signed-card .ttl {
    font-family: var(--its-serif);
    font-size: 19px;
    color: var(--its-bg);
    margin-bottom: 14px;
    letter-spacing: -.005em;
}

.op-signed-card .audit {
    display: grid;
    grid-template-columns: 90px 1fr;
    row-gap: 6px;
    column-gap: 14px;
    margin: 0;
    font-size: 11.5px;
}

.op-signed-card .audit dt {
    color: rgba(250, 247, 242, .55);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10px;
    font-weight: 500;
}

.op-signed-card .audit dd {
    margin: 0;
    color: var(--its-bg);
    font-family: var(--its-mono);
    font-size: 11px;
    word-break: break-all;
}

.op-signed-card--cartacea {
    background: var(--its-bg);
    color: var(--its-text);
    border: 1px solid var(--its-gold);
}

.op-signed-card--cartacea .ttl { color: var(--its-text); }
.op-signed-card--cartacea .audit dt { color: var(--its-text-muted); }
.op-signed-card--cartacea .audit dd { color: var(--its-text); }

/* ── OTP boxes inline (Step 4 right column) ── */

.op-otp {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.op-otp .label {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--its-text-muted);
    font-weight: 500;
}

.op-otp-boxes {
    display: grid;
    grid-template-columns: repeat(6, 44px);
    gap: 8px;
    justify-content: center;
}

.op-otp-box {
    width: 44px;
    height: 52px;
    border: 1.5px solid var(--its-border);
    border-radius: 6px;
    background: var(--its-surface);
    text-align: center;
    font-family: var(--its-mono);
    font-size: 22px;
    color: var(--its-text);
    transition: all .15s ease;
    padding: 0;
}

.op-otp-box:focus {
    border-color: var(--its-gold);
    outline: none;
    box-shadow: 0 0 0 3px rgba(200, 168, 120, .15);
}

.op-otp-box.is-filled {
    background: var(--its-bg);
    border-color: var(--its-gold);
    color: var(--its-gold-deep);
}

.op-otp-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11.5px;
    color: var(--its-text-muted);
    flex-wrap: wrap;
    gap: 8px;
}

.op-otp-meta b {
    color: var(--its-text);
    font-family: var(--its-mono);
    font-variant-numeric: tabular-nums;
}

.op-otp-meta .danger {
    color: var(--its-gold-deep);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--its-gold);
    text-underline-offset: 3px;
}

.op-otp-empty {
    padding: 32px 0;
    text-align: center;
    color: var(--its-text-dim);
}

.op-otp-empty__title {
    font-family: var(--its-serif);
    font-size: 22px;
    color: var(--its-text-muted);
    margin-bottom: 8px;
}

.op-otp-empty__sub {
    font-size: 12px;
    line-height: 1.5;
    color: var(--its-text-muted);
}

/* ── Timeline storia firma ──────────────────── */

.op-timeline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.op-timeline-item {
    display: grid;
    grid-template-columns: 90px 14px 1fr;
    align-items: flex-start;
    gap: 14px;
    padding: 8px 0;
    position: relative;
}

.op-timeline-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18px;
    bottom: -8px;
    left: 96px;
    width: 1px;
    background: var(--its-border);
}

.op-timeline-item .when {
    font-size: 10.5px;
    color: var(--its-text-dim);
    line-height: 1.4;
    text-align: right;
}

.op-timeline-item .when b {
    display: block;
    color: var(--its-text);
    font-family: var(--its-mono);
    font-size: 11px;
    margin-bottom: 2px;
}

.op-timeline-item .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--its-text-muted);
    margin-top: 4px;
    z-index: 1;
}

.op-timeline-item .what {
    font-size: 12px;
    color: var(--its-text);
    line-height: 1.5;
}

.op-timeline-item .what strong {
    display: block;
    font-weight: 500;
    color: var(--its-text);
    margin-bottom: 2px;
}

.op-timeline-item .what small {
    font-size: 10.5px;
    color: var(--its-text-muted);
    text-transform: lowercase;
    letter-spacing: .04em;
}

/* ── Firma actions secondary (firma cartacea button) ── */

.op-firma-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.op-firma-divider {
    text-align: center;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--its-text-dim);
    position: relative;
    margin: 8px 0;
}

.op-firma-divider::before,
.op-firma-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 38%;
    height: 1px;
    background: var(--its-border);
}

.op-firma-divider::before { left: 0; }
.op-firma-divider::after  { right: 0; }