/* Avviso "nuova versione disponibile" + overlay di aggiornamento —
   condivisi da ogni pagina staff e portale cliente (inclusi in
   core/templates/core/base.html e
   revisioni_tecniche/templates/revisioni_tecniche/portale/_base_portale.html).

   L'overlay a passi riprende deliberatamente lo stesso linguaggio visivo
   dello splash "BalzOS sta componendo il tuo mobile" del Visualizzatore
   3D (revisioni_tecniche.css, .rt-splash-*): stessa scatola bianca,
   stessi passi animati, stessa barra di avanzamento — voluto dall'utente
   com'è, per la stessa ragione di allora ("l'attesa è il piacere"). */

.bz-upd-avviso {
    /* In alto a destra, sotto la menubar (28px) — mai in basso: sia la
       macos-dock (desktop, centrata in basso) sia la bottom-nav (mobile)
       occupano quella fascia e l'avviso ci finiva sopra visivamente. */
    position: fixed;
    right: 20px;
    top: 40px;
    z-index: 2000;
    display: none;
    align-items: center;
    gap: .85rem;
    background: var(--card-bg, rgba(40, 40, 42, 0.92));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .35);
    padding: .9rem 1rem;
    max-width: min(360px, 90vw);
    animation: bz-upd-entra .3s ease;
}
@keyframes bz-upd-entra {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bz-upd-avviso-icona {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(10, 132, 255, .15);
    color: var(--accent, #0a84ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.bz-upd-avviso-testo { flex: 1; min-width: 0; }
.bz-upd-avviso-titolo {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-primary, #f2f2f7);
    margin-bottom: .15rem;
}
.bz-upd-avviso-sottotitolo {
    font-size: .74rem;
    color: var(--text-secondary, rgba(255, 255, 255, .55));
}
.bz-upd-avviso-azioni {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex-shrink: 0;
}
.bz-upd-avviso-btn {
    background: var(--accent, #0a84ff);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .4rem .75rem;
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.bz-upd-avviso-btn:hover { background: var(--accent-hover, #409cff); }
.bz-upd-avviso-chiudi {
    background: transparent;
    border: none;
    color: var(--text-tertiary, rgba(255, 255, 255, .35));
    font-size: .72rem;
    cursor: pointer;
    padding: .2rem;
}
.bz-upd-avviso-chiudi:hover { color: var(--text-secondary, rgba(255, 255, 255, .55)); }

/* ── Overlay "BalzOS si sta aggiornando" ─────────────────────────────── */
.bz-upd-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(12, 18, 32, .78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.bz-upd-scatola {
    background: #ffffff;
    border: 1px solid #d8d8d8;
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
    padding: 2rem 2.2rem;
    width: min(420px, 88vw);
    text-align: left;
}
.bz-upd-saluto {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1c1c1e;
    margin-bottom: .3rem;
}
.bz-upd-titolo {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1c1c1e;
    line-height: 1.3;
    margin-bottom: .5rem;
}
.bz-upd-titolo-accento { color: #1b6fc9; }
.bz-upd-sottotitolo {
    font-size: .82rem;
    color: #6b6b6b;
    margin-bottom: 1.3rem;
}
.bz-upd-passi {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-bottom: 1.3rem;
}
.bz-upd-passo {
    display: flex;
    align-items: center;
    gap: .75rem;
    opacity: .4;
    transition: opacity .25s ease;
}
.bz-upd-passo-attivo, .bz-upd-passo-fatto { opacity: 1; }
.bz-upd-passo-icona {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #f2f2f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    color: #6b6b6b;
    flex-shrink: 0;
}
.bz-upd-passo-fatto .bz-upd-passo-icona,
.bz-upd-passo-attivo .bz-upd-passo-icona { background: rgba(27, 111, 201, .12); color: #1b6fc9; }
.bz-upd-passo-testo { flex: 1; min-width: 0; }
.bz-upd-passo-titolo { font-size: .8rem; font-weight: 600; color: #1c1c1e; }
.bz-upd-passo-sub { font-size: .7rem; color: #8a8a8e; }
.bz-upd-passo-stato { font-size: 1.05rem; color: #c7c7cc; flex-shrink: 0; }
.bz-upd-passo-fatto .bz-upd-passo-stato { color: #2fa84f; }
.bz-upd-passo-attivo .bz-upd-passo-stato i {
    display: inline-block;
    color: #1b6fc9;
    animation: bz-upd-girotondo 1s linear infinite;
}
@keyframes bz-upd-girotondo {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.bz-upd-tempo {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: #fafafa;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: .65rem .85rem;
}
.bz-upd-tempo-riga {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    color: #8a8a8e;
}
.bz-upd-tempo-barra-wrap {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #e2e2e2;
    overflow: hidden;
}
.bz-upd-tempo-barra {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #1b6fc9, #409cff);
    border-radius: 3px;
    transition: width .1s linear;
}

@media (max-width: 600px) {
    .bz-upd-avviso { left: 12px; right: 12px; top: 12px; max-width: none; }
}