/* =====================================================================
   PWA STAFF — stile «app» e tema chiaro/scuro (solo telefono)
   ---------------------------------------------------------------------
   Riprende la PWA dei tecnici di CRI Impianti: testata navy con il titolo
   della pagina, barra in basso vetrata con la voce attiva a pastiglia,
   comandi grandi un dito, etichette maiuscole, pastiglie di stato a fondo
   tenue. I colori restano quelli di Censea Clarity.

   Vale SOLO sotto i 768px, dove c'è la barra in basso: il backend da
   computer resta Clarity chiaro, com'era.

   Il tema si sceglie con l'attributo data-tema su <html> ("chiaro" o
   "scuro"): lo mette lo script in testa a layouts/main.php prima che la
   pagina si disegni (niente lampo bianco), leggendo la scelta salvata in
   localStorage 'censea-tema' o, se non c'è, quella del telefono.

   Il tema scuro (token --cc-* e componenti Bootstrap/AdminLTE al buio) e'
   in tema-scuro.css, caricato subito dopo questo, solo sotto i 768px.
   ===================================================================== */

:root {
    /* Testata e barre di sistema: il navy della sidebar. */
    --app-testata: #121a2e;
    --app-testata-2: #0e1424;
    /* Fondo dei comandi pieni: resta scuro anche col tema scuro, perché
       sopra ci va sempre testo bianco. */
    --app-azione: #007bff;
    --app-azione-viva: #0069d9;
    /* Barra in basso, vetrata. */
    --app-nav-fondo: rgba(255, 255, 255, .94);
    /* Campi e riquadri sopra la carta. */
    --app-campo: #ffffff;
    /* Stati: fondo tenue, testo pieno (si leggono al sole). */
    --app-ok: #067647;        --app-ok-tenue: #e3f6ec;
    --app-avviso: #a15c07;    --app-avviso-tenue: #fdf1dc;
    --app-errore: #c0262d;    --app-errore-tenue: #fdeaec;
    --app-info: #0b6aa2;      --app-info-tenue: #e4f3fb;
    --app-neutro: #475467;    --app-neutro-tenue: #eef1f5;
    --app-ombra-alta: 0 6px 20px rgba(16, 24, 43, .14);
    --app-alt-comandi: 2.9rem;
    --app-sicuro-alto: env(safe-area-inset-top, 0px);
    --app-sicuro-basso: env(safe-area-inset-bottom, 0px);
}

/* Da computer c'è la navbar: la testata dell'app non esiste. */
.app-testata { display: none; }
.app-comandi { display: none; }

@media (max-width: 768px) {

    /* -------------------------------------------------------- Base */
    html, body { background: var(--cc-bg); }
    body.pwa-mobile-nav {
        color: var(--cc-ink);
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }
    body.pwa-mobile-nav .content-wrapper { background: var(--cc-bg) !important; }
    body.pwa-mobile-nav .content-wrapper > .content { padding: .75rem .7rem 0; }
    body.pwa-mobile-nav .content-wrapper > .content > .container-fluid { padding: 0; }

    /* Il titolo sta nella testata: quelli dentro la pagina (spesso h1 da 2.5rem, che
       col nome di un cliente occupano mezzo schermo) scendono a misura di telefono. */
    body.pwa-mobile-nav .content h1, body.pwa-mobile-nav .content .h1 { font-size: 1.35rem; line-height: 1.25; }
    body.pwa-mobile-nav .content h2, body.pwa-mobile-nav .content .h2 { font-size: 1.2rem; line-height: 1.25; }
    body.pwa-mobile-nav .content h3:not(.card-title), body.pwa-mobile-nav .content .h3 { font-size: 1.08rem; }

    /* Il banner «ambiente di sviluppo» è fisso in cima e coprirebbe la
       testata: sul telefono lo sostituisce la targhetta DEV nella testata. */
    body.pwa-mobile-nav .cc-dev-banner { display: none !important; }

    /* =================================================================
       TESTATA — navy sfumato, titolo della pagina, bersagli da pollice.
       ================================================================= */
    .app-testata {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1035;
        display: flex;
        align-items: center;
        gap: .35rem;
        padding: .5rem .55rem;
        padding-top: calc(.5rem + var(--app-sicuro-alto));
        background: linear-gradient(180deg, var(--app-testata) 0%, var(--app-testata-2) 100%);
        color: #fff;
        box-shadow: 0 2px 10px rgba(14, 20, 36, .22);
    }
    html[data-tema="scuro"] .app-testata { border-bottom: 1px solid var(--cc-border); box-shadow: none; }

    .app-testata-titolo {
        flex: 1;
        min-width: 0;
        font-size: 1.05rem;
        font-weight: 650;
        letter-spacing: -.01em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .app-testata-btn {
        flex: 0 0 auto;
        width: 2.5rem;
        height: 2.5rem;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: none;
        color: #fff;
        padding: 0;
        transition: background-color .15s;
    }
    .app-testata-btn:hover, .app-testata-btn:focus { color: #fff; outline: none; }
    .app-testata-btn:active { background: rgba(255, 255, 255, .18); }
    .app-testata-btn svg.i { width: 1.4rem; height: 1.4rem; stroke-width: 2; }
    .app-testata-marchio {
        flex: 0 0 auto;
        width: 2rem;
        height: 2rem;
        margin: 0 .25rem 0 .2rem;
        border-radius: .55rem;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
    }
    .app-testata-esci { display: flex; margin: 0; }
    /* Comandi veloci scelti in «Personalizza» della dashboard: linguetta sul bordo destro
       che apre un pannello a scomparsa (layouts/main.php, ComandiRapidi, pwa-app.js). */
    .app-comandi { display: block; }
    .app-comandi__linguetta {
        position: fixed;
        top: 50%;
        right: 0;
        z-index: 1036;
        width: 1.35rem;
        height: 3.8rem;
        margin-top: -1.9rem;
        padding: 0;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: .7rem 0 0 .7rem;
        background: var(--app-testata);
        color: #fff;
        opacity: .82;
        box-shadow: -2px 2px 8px rgba(0, 0, 0, .25);
        transition: opacity .15s, transform .2s;
    }
    .app-comandi__linguetta svg.i { width: .95rem; height: .95rem; stroke-width: 2.4; }
    .app-comandi.is-aperto .app-comandi__linguetta { transform: translateX(100%); }
    /* Mentre si scrive la linguetta si toglie di mezzo (body.app-scrive da pwa-app.js) */
    body.app-scrive .app-comandi { display: none; }
    .app-comandi__velo {
        position: fixed;
        inset: 0;
        z-index: 1039;
        background: rgba(0, 0, 0, .35);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s;
    }
    .app-comandi.is-aperto .app-comandi__velo { opacity: 1; pointer-events: auto; }
    .app-comandi__pannello {
        position: fixed;
        top: 50%;
        right: 0;
        z-index: 1040;
        width: 4.9rem;
        max-height: calc(100vh - 9rem);
        overflow-y: auto;
        scrollbar-width: none;
        display: flex;
        flex-direction: column;
        gap: .35rem;
        padding: .6rem .3rem;
        border-radius: 1rem 0 0 1rem;
        background: var(--app-testata);
        box-shadow: -4px 0 18px rgba(0, 0, 0, .3);
        transform: translate(105%, -50%);
        transition: transform .22s ease-out;
    }
    .app-comandi__pannello::-webkit-scrollbar { display: none; }
    .app-comandi.is-aperto .app-comandi__pannello { transform: translate(0, -50%); }
    /* Oltre 6 comandi: due colonne (layouts/_app-comandi.php) */
    .app-comandi__pannello--due {
        width: 10.6rem;
        display: grid;
        /* minmax(0, 1fr): un nome lungo non allarga la colonna fuori dal pannello */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem .2rem;
    }
    .app-comandi__pannello .app-comandi__voce { min-width: 0; }
    /* Nel pannello il nome va a capo (al massimo due righe) invece di tagliarsi */
    .app-comandi__pannello .app-comandi__tx {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow-wrap: anywhere;
    }
    /* Tema notte: la testata è scura come lo sfondo, linguetta e pannello si staccano
       col colore d'azione e un bordo chiaro */
    html[data-tema="scuro"] .app-comandi__linguetta {
        background: var(--app-azione);
        opacity: 1;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), -2px 2px 10px rgba(0, 0, 0, .6);
    }
    html[data-tema="scuro"] .app-comandi__pannello {
        background: #1f2a44;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), -6px 0 22px rgba(0, 0, 0, .7);
    }
    html[data-tema="scuro"] .app-comandi__ic { background: rgba(255, 255, 255, .16); }
    html[data-tema="scuro"] .app-comandi__velo { background: rgba(0, 0, 0, .55); }
    .app-comandi__voce {
        flex: 0 0 auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .2rem;
        padding: .15rem 0;
        color: #fff;
        text-decoration: none;
    }
    .app-comandi__voce:hover, .app-comandi__voce:focus { color: #fff; text-decoration: none; outline: none; }
    .app-comandi__ic {
        position: relative;
        width: 2.3rem;
        height: 2.3rem;
        display: grid;
        place-items: center;
        border-radius: .8rem;
        background: rgba(255, 255, 255, .12);
        transition: background-color .15s;
    }
    .app-comandi__voce:active .app-comandi__ic { background: rgba(255, 255, 255, .26); }
    .app-comandi__ic svg.i { width: 1.15rem; height: 1.15rem; stroke-width: 2; }
    /* «Crea»: un piccolo + sull'icona */
    .app-comandi__voce--crea .app-comandi__ic::after {
        content: '+';
        position: absolute;
        top: -.2rem;
        right: -.2rem;
        width: .95rem;
        height: .95rem;
        border-radius: 50%;
        background: var(--cc-brand, #3b6cf6);
        color: #fff;
        font-size: .75rem;
        font-weight: 700;
        line-height: .95rem;
        text-align: center;
    }
    .app-comandi__tx {
        max-width: 100%;
        font-size: .64rem;
        line-height: 1.15;
        color: rgba(255, 255, 255, .82);
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* In home il saluto sta nella testata: via nome e frase dalla dashboard. */
    .cc-dash .cc-phead__saluto { display: none; }
    /* «Personalizza» sta nella testata (solo in home, #app-btn-personalizza). */
    .cc-dash .cc-btn-personalizza { display: none; }
    .app-testata-dev {
        flex: 0 0 auto;
        font-size: .62rem;
        font-weight: 800;
        letter-spacing: .08em;
        padding: .18rem .45rem;
        border-radius: 1rem;
        background: #ff9800;
        color: #1b1300;
    }

    /* Sotto i 768px la testata sostituisce la navbar. pwa-mobile.css la nasconde
       solo quando pwa-app.js ha messo body.pwa-mobile-nav, cioè a pagina già
       disegnata: qui si nasconde subito, senza il lampo di due testate. */
    .main-header.navbar { display: none !important; }

    /* La testata porta già la safe-area di iOS: il contenuto non la
       riserva più (vedi pwa-mobile.css, body.platform-ios). */
    body.pwa-mobile-nav.platform-ios .content-wrapper { padding-top: 0 !important; }
    /* La fascia sotto la status bar prende il colore della testata. */
    #pwa-top-shield,
    body.platform-ios #pwa-top-shield { background: var(--app-testata); }

    /* =================================================================
       BARRA IN BASSO — vetrata, voce attiva a pastiglia.
       ================================================================= */
    .pwa-bottom-nav {
        background: var(--app-nav-fondo);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--cc-border);
        box-shadow: none;
        align-items: stretch;
        padding: .3rem .2rem calc(.3rem + var(--pwa-safe-bottom));
        height: auto;
        gap: .1rem;
    }
    .pwa-bottom-nav-item {
        flex: 1 1 0;
        min-width: 0;
        padding: .35rem .1rem .3rem;
        border-radius: var(--cc-radius-sm);
        color: var(--cc-muted);
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .01em;
        transition: color .15s, background-color .15s;
    }
    .pwa-bottom-nav-item svg { width: 1.45rem; height: 1.45rem; margin-bottom: .15rem; stroke-width: 1.9; }
    .pwa-bottom-nav-item.active { color: var(--cc-brand); background: var(--cc-brand-tint); }
    .pwa-bottom-nav-item.active svg { transform: translateY(-1px); }
    .pwa-bottom-nav-item::after { display: none; }
    .pwa-bottom-nav-item:active { background: var(--cc-surface-2); }
    .pwa-bottom-nav-item:active svg { transform: scale(.92); }
    .pwa-bottom-nav-badge {
        top: .15rem;
        right: calc(50% - 1.3rem);
        background: var(--cc-danger);
        box-shadow: 0 0 0 2px var(--cc-surface);
    }
    /* Pallino di novità (solo sì/no, niente numero): js/pwa-app.js, notification/novita */
    .pwa-novita {
        position: absolute;
        top: .3rem;
        right: calc(50% - 1rem);
        width: .6rem;
        height: .6rem;
        border-radius: 50%;
        background: var(--cc-danger);
        box-shadow: 0 0 0 2px var(--cc-surface);
        pointer-events: none;
    }
    body.pwa-mobile-nav .content-wrapper {
        padding-bottom: calc(4.4rem + var(--pwa-safe-bottom)) !important;
    }

    /* =================================================================
       SCHEDE — la card di Clarity con la testata «da app»: maiuscoletto
       piccolo e tenue, come le schede della PWA CRI.
       ================================================================= */
    body.pwa-mobile-nav .card { margin-bottom: .8rem; }
    body.pwa-mobile-nav .card-header { padding: .7rem .9rem; }
    /* h1/h2 esclusi: in quelle testate il titolo è contenuto (oggetto dell'email,
       esito di un F24), non l'etichetta di una sezione. */
    body.pwa-mobile-nav .card-header .card-title:not(h1):not(h2) {
        font-size: .76rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--cc-muted);
    }
    body.pwa-mobile-nav .card-header .card-title svg.i,
    body.pwa-mobile-nav .card-header .card-title i { font-size: .95rem; }
    body.pwa-mobile-nav .card-body { padding: .9rem; }
    body.pwa-mobile-nav .card-footer {
        background: var(--cc-surface-2);
        border-top: 1px solid var(--cc-border);
    }

    /* =================================================================
       COMANDI E MODULI — grandi un dito, 16px (sotto, iOS ingrandisce
       la pagina al focus).
       ================================================================= */
    body.pwa-mobile-nav .btn { font-weight: 600; }
    body.pwa-mobile-nav .btn:active { transform: translateY(1px); }
    body.pwa-mobile-nav .btn-primary {
        background-color: var(--app-azione) !important;
        border-color: var(--app-azione) !important;
        color: #fff !important;
    }
    body.pwa-mobile-nav .btn-primary:hover,
    body.pwa-mobile-nav .btn-primary:focus {
        background-color: var(--app-azione-viva) !important;
        border-color: var(--app-azione-viva) !important;
    }

    body.pwa-mobile-nav .form-control,
    body.pwa-mobile-nav .custom-select {
        min-height: var(--app-alt-comandi);
        font-size: 1rem;
        color: var(--cc-ink);
        background-color: var(--app-campo);
        border-color: var(--cc-border-strong);
    }
    body.pwa-mobile-nav .form-control-sm { min-height: 2.4rem; }
    body.pwa-mobile-nav textarea.form-control { min-height: 5.5rem; line-height: 1.45; }
    body.pwa-mobile-nav .form-control::placeholder { color: var(--cc-muted); opacity: .8; }
    body.pwa-mobile-nav .form-group > label,
    body.pwa-mobile-nav .control-label {
        font-size: .76rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--cc-muted);
        margin-bottom: .25rem;
    }

    /* =================================================================
       AVVISI E PASTIGLIE — fondo tenue, testo pieno.
       ================================================================= */
    body.pwa-mobile-nav .alert {
        border: 0;
        border-radius: var(--cc-radius-sm);
        box-shadow: var(--cc-shadow-sm);
    }
    body.pwa-mobile-nav .alert-success { background: var(--app-ok-tenue); color: var(--app-ok); }
    body.pwa-mobile-nav .alert-danger  { background: var(--app-errore-tenue); color: var(--app-errore); }
    body.pwa-mobile-nav .alert-warning { background: var(--app-avviso-tenue); color: var(--app-avviso); }
    body.pwa-mobile-nav .alert-info    { background: var(--app-info-tenue); color: var(--app-info); }
    body.pwa-mobile-nav .alert-secondary,
    body.pwa-mobile-nav .alert-light   { background: var(--app-neutro-tenue); color: var(--cc-ink); }
    body.pwa-mobile-nav .alert a:not(.btn) { color: inherit; text-decoration: underline; }
    body.pwa-mobile-nav .alert .close { color: inherit; text-shadow: none; }

    body.pwa-mobile-nav .badge {
        border-radius: 1rem;
        padding: .34em .7em;
        font-weight: 600;
    }
    body.pwa-mobile-nav .badge-primary   { background: var(--cc-brand-tint); color: var(--cc-brand); }
    body.pwa-mobile-nav .badge-success   { background: var(--app-ok-tenue); color: var(--app-ok); }
    body.pwa-mobile-nav .badge-danger    { background: var(--app-errore-tenue); color: var(--app-errore); }
    body.pwa-mobile-nav .badge-warning   { background: var(--app-avviso-tenue); color: var(--app-avviso); }
    body.pwa-mobile-nav .badge-info      { background: var(--app-info-tenue); color: var(--app-info); }
    body.pwa-mobile-nav .badge-secondary,
    body.pwa-mobile-nav .badge-light,
    body.pwa-mobile-nav .badge-dark      { background: var(--app-neutro-tenue); color: var(--app-neutro); }

    /* =================================================================
       NUMERI DI PAGINA — bottoni staccati, grandi un dito.
       ================================================================= */
    /* Stessi selettori della base (censea-clarity-base.css, 7b): valgono per il
       pager standard di Yii e per quello Bootstrap 4, e per ogni bottone allo stesso modo. */
    body.pwa-mobile-nav .pagination { flex-wrap: wrap; gap: .35rem; justify-content: center; }
    body.pwa-mobile-nav .pagination > li > a,
    body.pwa-mobile-nav .pagination > li > span,
    body.pwa-mobile-nav .pagination .page-item .page-link {
        min-width: 2.5rem;
        height: 2.5rem;
        padding: 0 .6rem;
        border: 1px solid var(--cc-border-strong);
        border-radius: var(--cc-radius-sm) !important;
        background: var(--app-campo);
        color: var(--cc-brand);
        font-size: .9rem;
    }
    body.pwa-mobile-nav .pagination > li.active > a,
    body.pwa-mobile-nav .pagination > li.active > span,
    body.pwa-mobile-nav .pagination .page-item.active .page-link {
        background: var(--app-azione);
        border-color: var(--app-azione);
        color: #fff;
    }
    body.pwa-mobile-nav .pagination > li.disabled > a,
    body.pwa-mobile-nav .pagination > li.disabled > span,
    body.pwa-mobile-nav .pagination .page-item.disabled .page-link {
        background: var(--cc-surface);
        border-color: var(--cc-border);
        color: var(--cc-muted);
    }

    /* =================================================================
       LETTURA DI UN'EMAIL — la freccia per tornare all'elenco era un'icona
       da 36px difficile da prendere col pollice: diventa un pulsante vero, e
       Rispondi / Tutti / Inoltra vanno a destra, lontani dalla freccia.
       Le misure di base della barra sono in censea-clarity.css.
       ================================================================= */
    body .page-header .cc-msg-actions .cc-msg-back {
        width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        margin-right: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--cc-radius-sm);
        border: 1px solid var(--cc-border-strong);
        background: var(--app-campo);
        color: var(--cc-ink);
    }
    body .page-header .cc-msg-actions .cc-msg-back svg.i { width: 1.35rem; height: 1.35rem; stroke-width: 2.1; }
    body .page-header .cc-msg-actions .cc-msg-back:active { background: var(--cc-surface-2); }
    body .page-header .cc-msg-actions .btn:not(.cc-msg-back) { min-height: 40px; padding: 6px 12px; }

    /* =================================================================
       TABELLE A SCHEDE — sotto i 576px mobile-navigation.js e
       mobile-staff-minimal.js trasformano le tabelle in schede (classi
       table-card-view / table-mobile-cards; mobile-optimization.css ha
       altre due varianti). Le loro regole hanno il bianco scritto a mano:
       qui diventano schede della tavolozza.
       ================================================================= */
    body.pwa-mobile-nav .table-card-view tr,
    body.pwa-mobile-nav .table-mobile-cards tr,
    body.pwa-mobile-nav .mobile-card-view tr,
    body.pwa-mobile-nav .mobile-card-layout tr {
        background: var(--cc-surface) !important;
        border: 1px solid var(--cc-border);
        border-radius: var(--cc-radius-sm);
        box-shadow: var(--cc-shadow-sm);
        color: var(--cc-ink);
    }
    body.pwa-mobile-nav .table-card-view td { border-bottom-color: var(--cc-border); }
    /* Le colonne con text-center da computer, in scheda, vanno a sinistra con le altre. */
    body.pwa-mobile-nav .table-card-view td,
    body.pwa-mobile-nav .table-mobile-cards td { text-align: left !important; }
    /* mobile-staff-minimal.css incornicia ogni .table-responsive: dentro una card è
       una seconda cornice, fuori prende almeno il bordo della tavolozza. */
    body.pwa-mobile-nav .table-responsive { border-color: var(--cc-border) !important; }
    body.pwa-mobile-nav .card .table-responsive { border: 0 !important; }
    body.pwa-mobile-nav .table-card-view td::before,
    body.pwa-mobile-nav .table-mobile-cards td::before,
    body.pwa-mobile-nav .mobile-card-view td::before,
    body.pwa-mobile-nav .mobile-card-layout td::before {
        color: var(--cc-muted);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    /* =================================================================
       RIQUADRI DELLA PWA — splash, installazione, aggiornamento,
       trascina-per-aggiornare, comando vocale: sulla tavolozza.
       ================================================================= */
    .pwa-splash { background: linear-gradient(135deg, var(--app-testata) 0%, var(--app-testata-2) 100%); }
    .pwa-install-banner { background: var(--cc-surface); box-shadow: var(--app-ombra-alta); border-top: 1px solid var(--cc-border); }
    .pwa-install-banner-title { color: var(--cc-ink); }
    .pwa-install-banner-desc { color: var(--cc-muted); }
    .pwa-install-btn { background: var(--app-azione); }
    .pwa-pull-indicator { background: var(--cc-surface); box-shadow: var(--app-ombra-alta); }
    .pwa-pull-indicator i { color: var(--cc-brand); }
    .pwa-update-toast { background: var(--cc-ink); color: var(--cc-bg); }
    .pwa-update-toast button { background: var(--app-azione); }

    .vq-overlay { background: rgba(5, 9, 18, .6); }
    .vq-sheet { background: var(--cc-surface); color: var(--cc-ink); }
    .vq-title, .vq-riga { color: var(--cc-ink); }
    .vq-sub, .vq-pref { color: var(--cc-muted); }
    .vq-pref { border-top-color: var(--cc-border); }
    .vq-mic { background: var(--app-neutro-tenue); }
    .vq-mic.is-rec { background: var(--app-errore-tenue); }
    .vq-mic.is-busy { background: var(--app-avviso-tenue); }
    .vq-text, .vq-pref select {
        background: var(--app-campo);
        color: var(--cc-ink);
        border-color: var(--cc-border-strong);
    }
    .vq-text.is-edit { background: var(--app-campo); }
    .vq-btn-primary { background: var(--app-azione); }
    .vq-btn-edit { background: var(--app-neutro-tenue); color: var(--cc-ink); }
    .vq-btn-no { background: var(--app-errore-tenue); color: var(--app-errore); }

}