/* ==========================================================================
   Registro di Scuderia — foglio di stile
   Colore guida: arancione internazionale (#FF4F00), sia in tema chiaro
   sia in tema scuro. Bootstrap fornisce la griglia e i componenti di base;
   qui c'è tutto ciò che dà all'applicazione il suo aspetto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variabili di colore
   -------------------------------------------------------------------------- */
:root {
    /* famiglia dell'arancione internazionale */
    --arancio:          #ff4f00;
    --arancio-vivo:     #ff7a29;
    --arancio-fondo:    #c43a00;
    --arancio-profondo: #8f2a00;
    --ambra:            #ffb020;

    --utile:    #0b7a4c;   /* verificato 5,38:1 su bianco — WCAG 1.4.3 AA */
    --perdita:  #d5254b;
    --avviso:   #8a5200;   /* verificato 6,39:1 su bianco e 5,15:1 sul fondo delle pastiglie */

    --raggio:      14px;
    --raggio-pic:  9px;
    --serif:  "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --sans:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --altezza-testa:  64px;
    --altezza-piede:  42px;
}

/* tema chiaro (predefinito) */
:root, [data-tema="chiaro"] {
    --sfondo:       #fff6f0;
    --sfondo-2:     #ffece0;
    --superficie:   #ffffff;
    --superficie-2: #fff7f2;
    --testo:        #241812;
    --tenue:        #7b6659;
    --linea:        rgba(36, 24, 18, .13);
    --linea-forte:  rgba(36, 24, 18, .22);
    --ombra:        0 1px 2px rgba(80, 40, 20, .06), 0 8px 24px rgba(120, 60, 25, .08);
    --ombra-alta:   0 2px 6px rgba(80, 40, 20, .10), 0 18px 44px rgba(120, 60, 25, .16);
    --vetro:        rgba(255, 255, 255, .82);
    --griglia:      rgba(36, 24, 18, .09);
}

/* tema scuro */
[data-tema="scuro"] {
    --sfondo:       #120e0b;
    --sfondo-2:     #1b1410;
    --superficie:   #1d1713;
    --superficie-2: #251d18;
    --testo:        #f7efe8;
    --tenue:        #b6a395;
    --linea:        rgba(255, 236, 224, .12);
    --linea-forte:  rgba(255, 236, 224, .24);
    --ombra:        0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .45);
    --ombra-alta:   0 2px 8px rgba(0, 0, 0, .5), 0 22px 54px rgba(0, 0, 0, .6);
    --vetro:        rgba(29, 23, 19, .78);
    --griglia:      rgba(255, 236, 224, .10);
    --utile:        #2ed08c;
    --perdita:      #ff5e7d;
    --ambra:        #ffc44d;
    --avviso:       #ffc44d;   /* 11,19:1 su fondo scuro */
}

/* --------------------------------------------------------------------------
   2. Impostazioni generali e sfondo animato
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    background: var(--sfondo);
    color: var(--testo);
    min-height: 100vh;
    padding-top: var(--altezza-testa);
    padding-bottom: calc(var(--altezza-piede) + 8px);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Lo sfondo animato: tre aloni caldi che si muovono lentamente, più una
   trama diagonale che ricorda le casacche dei fantini. Non usa immagini. */
.sfondo-animato {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background:
        radial-gradient(1200px 600px at 12% -10%, rgba(255, 122, 41, .20), transparent 60%),
        radial-gradient(900px 500px at 105% 8%, rgba(255, 79, 0, .16), transparent 62%),
        linear-gradient(160deg, var(--sfondo) 0%, var(--sfondo-2) 100%);
}
.sfondo-animato::before,
.sfondo-animato::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    will-change: transform;
}
.sfondo-animato::before {
    width: 46vw; height: 46vw; min-width: 320px; min-height: 320px;
    left: -10vw; top: 8vh;
    background: radial-gradient(circle at 35% 35%, rgba(255, 79, 0, .55), rgba(255, 176, 32, .18) 55%, transparent 70%);
    animation: deriva-a 26s ease-in-out infinite alternate;
}
.sfondo-animato::after {
    width: 40vw; height: 40vw; min-width: 280px; min-height: 280px;
    right: -8vw; bottom: -6vh;
    background: radial-gradient(circle at 60% 40%, rgba(196, 58, 0, .5), rgba(255, 122, 41, .16) 55%, transparent 72%);
    animation: deriva-b 32s ease-in-out infinite alternate;
}
/* trama a righe diagonali, leggerissima */
.sfondo-trama {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 79, 0, .05) 0 2px,
        transparent 2px 14px
    );
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 70%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 70%);
}
@keyframes deriva-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(6vw, 7vh, 0) scale(1.12); }
}
@keyframes deriva-b {
    from { transform: translate3d(0, 0, 0) scale(1.05); }
    to   { transform: translate3d(-7vw, -5vh, 0) scale(.95); }
}

/* --------------------------------------------------------------------------
   3. Tipografia
   -------------------------------------------------------------------------- */
h1, h2, h3, .titolo-serif {
    font-family: var(--serif);
    letter-spacing: -.01em;
    color: var(--testo);
}
h1 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 600; }
h2 { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); font-weight: 600; }
h3 { font-size: 1.06rem; font-weight: 600; }

.occhiello {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tenue);
    font-weight: 700;
}
.sottotitolo { font-size: 13.5px; color: var(--tenue); margin: 0 0 10px; }
.num, .cifra, .tabella-dati td.num, .tabella-dati th.num { font-variant-numeric: tabular-nums; text-align: right; }
.val-utile   { color: var(--utile);   font-weight: 600; }
.val-perdita { color: var(--perdita); font-weight: 600; }

/* --------------------------------------------------------------------------
   4. Intestazione fissa
   -------------------------------------------------------------------------- */
.testa-fissa {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--altezza-testa);
    z-index: 1035;
    display: flex; align-items: center; gap: 14px;
    padding: 0 clamp(12px, 2vw, 22px);
    background: var(--vetro);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--ombra);
}
.testa-fissa::after {           /* filo arancione sotto l'intestazione */
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, var(--arancio-fondo), var(--arancio) 35%, var(--ambra) 65%, var(--arancio) 100%);
}
.marchio { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; min-width: 0; }
.marchio:hover { color: inherit; }
.marchio .simbolo {
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 11px;
    display: grid; place-items: center;
    background: linear-gradient(145deg, var(--arancio-vivo), var(--arancio) 45%, var(--arancio-fondo));
    box-shadow: 0 4px 12px rgba(255, 79, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .45);
    color: #fff; font-size: 20px; line-height: 1;
}
.marchio .nome { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; line-height: 1.1; white-space: nowrap; }
.marchio .paglia { font-size: 11px; color: var(--tenue); white-space: nowrap; }

.chip-utente {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px; border-radius: 999px;
    background: linear-gradient(145deg, rgba(255, 79, 0, .16), rgba(255, 176, 32, .10));
    border: 1px solid rgba(255, 79, 0, .34);
    font-size: 12.5px; white-space: nowrap;
}
.chip-utente .ruolo { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }

/* --------------------------------------------------------------------------
   5. Menù principale
   -------------------------------------------------------------------------- */
.menu-principale { display: flex; gap: 4px; align-items: center; }
.menu-principale .voce {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-radius: 10px;
    color: var(--testo); text-decoration: none;
    font-size: 14px; font-weight: 500; white-space: nowrap;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.menu-principale .voce:hover { background: rgba(255, 79, 0, .12); transform: translateY(-1px); }
.menu-principale .voce.attiva {
    color: #fff;
    background: linear-gradient(145deg, #d34000, var(--arancio-fondo) 58%, var(--arancio-profondo));
    box-shadow: 0 4px 12px rgba(255, 79, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .32);
}
.menu-principale .voce .pallino {
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--perdita); color: #fff;
    font-size: 10.5px; font-weight: 700; display: grid; place-items: center;
}

/* menù laterale su telefono */
.offcanvas { background: var(--superficie); color: var(--testo); }
.offcanvas .voce { display: flex; padding: 12px 14px; border-radius: 10px; margin-bottom: 4px; text-decoration: none; color: var(--testo); }
.offcanvas .voce.attiva { background: linear-gradient(145deg, var(--arancio), var(--arancio-fondo)); color: #fff; }

/* --------------------------------------------------------------------------
   6. Piede fisso
   -------------------------------------------------------------------------- */
.piede-fisso {
    position: fixed; left: 0; right: 0; bottom: 0;
    height: var(--altezza-piede);
    z-index: 1030;
    display: flex; align-items: center; gap: 14px;
    padding: 0 clamp(12px, 2vw, 22px);
    background: var(--vetro);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--linea);
    font-size: 12px; color: var(--tenue);
}
.piede-fisso .stato-salvato { display: inline-flex; align-items: center; gap: 6px; }
.spia {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--utile);
    box-shadow: 0 0 0 3px rgba(15, 157, 99, .18);
}

/* --------------------------------------------------------------------------
   7. Pannelli, schede e rilievo
   -------------------------------------------------------------------------- */
.pannello {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 18px 20px;
    margin-bottom: 18px;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}
.pannello.rilievo:hover { transform: translateY(-3px); box-shadow: var(--ombra-alta); }
.pannello > h3:first-child { margin-top: 0; }
.pannello-testata { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pannello-testata h3 { margin: 0; }

/* la lavagna: l'elemento distintivo, con leggera prospettiva */
.lavagna {
    position: relative;
    border-radius: var(--raggio);
    padding: 22px 26px 24px;
    color: #fff8f2;
    background:
        radial-gradient(120% 130% at 12% 0%, rgba(255, 176, 32, .28), transparent 55%),
        linear-gradient(150deg, var(--arancio-fondo) 0%, var(--arancio-profondo) 58%, #4a1500 100%);
    border: 1px solid rgba(255, 176, 32, .3);
    box-shadow:
        0 20px 45px rgba(143, 42, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .22),
        inset 0 -20px 40px rgba(0, 0, 0, .25);
    overflow: hidden;
    transform: perspective(900px) rotateX(1.4deg);
    transform-style: preserve-3d;
}
.lavagna::after {                 /* riflesso lucido in alto */
    content: ""; position: absolute; inset: 0 0 auto 0; height: 45%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent);
    pointer-events: none;
}
.lavagna .occhiello { color: rgba(255, 240, 230, .78); }
.lavagna .cifra {
    font-family: var(--serif);
    font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem);
    font-weight: 700; line-height: 1.05; margin: 4px 0 2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    font-variant-numeric: tabular-nums;
}
.lavagna .cifra.utile   { color: #a8f5cf; }
.lavagna .cifra.perdita { color: #ffc2ce; }
.lavagna .filo-oro {
    height: 2px; width: 78px; margin: 12px 0;
    background: linear-gradient(90deg, var(--ambra), transparent);
    border-radius: 2px;
}
.lavagna .dettaglio { font-size: 13px; color: rgba(255, 240, 230, .84); }
.bandierina {
    display: inline-block; padding: 3px 11px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
}
.bandierina.utile   { background: rgba(46, 208, 140, .22); color: #b8f7d8; border: 1px solid rgba(46, 208, 140, .5); }
.bandierina.perdita { background: rgba(255, 94, 125, .2);  color: #ffd0da; border: 1px solid rgba(255, 94, 125, .5); }
.bandierina.pari    { background: rgba(255, 255, 255, .16); color: #fff2e8; border: 1px solid rgba(255, 255, 255, .3); }

/* riquadri con gli indicatori */
.griglia-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.griglia-kpi > .lavagna { grid-column: 1 / -1; }
@media (min-width: 992px) { .griglia-kpi > .lavagna { grid-column: span 2; } }
.kpi {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--raggio-pic);
    padding: 14px 16px;
    box-shadow: var(--ombra);
    position: relative; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.kpi::before {                    /* filo arancione a sinistra */
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--arancio), var(--ambra));
    opacity: .85;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--ombra-alta); }
.kpi .nome  { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); font-weight: 700; }
.kpi .valore { font-size: 1.42rem; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; font-family: var(--serif); }
.kpi .nota  { font-size: 11.5px; color: var(--tenue); margin-top: 2px; }

/* --------------------------------------------------------------------------
   8. Pulsanti
   -------------------------------------------------------------------------- */
.btn { border-radius: 10px; font-weight: 500; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.btn:active { transform: translateY(1px); }

.btn-arancio {
    color: #fff;
    /* il bianco deve restare leggibile: la tinta media del gradiente è #c43a00 (5,31:1) */
    background: linear-gradient(145deg, #d34000, var(--arancio-fondo) 55%, var(--arancio-profondo));
    border: 1px solid rgba(143, 42, 0, .6);
    box-shadow: 0 4px 12px rgba(255, 79, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-arancio:hover, .btn-arancio:focus {
    color: #fff;
    background: linear-gradient(145deg, #d64000, var(--arancio-fondo) 48%, var(--arancio-profondo));
    box-shadow: 0 6px 18px rgba(255, 79, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.btn-contorno {
    color: var(--testo);
    background: var(--superficie);
    border: 1px solid var(--linea-forte);
}
.btn-contorno:hover { color: var(--arancio); border-color: var(--arancio); background: rgba(255, 79, 0, .07); }
.btn-pericolo { color: var(--perdita); background: transparent; border: 1px solid rgba(213, 37, 75, .45); }
.btn-pericolo:hover { color: #fff; background: var(--perdita); border-color: var(--perdita); }
.btn-sm { padding: .28rem .6rem; font-size: 12.5px; }

/* --------------------------------------------------------------------------
   9. Tabelle
   -------------------------------------------------------------------------- */
.tabella-avvolgi { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--raggio-pic); }
table.tabella-dati { width: 100%; border-collapse: collapse; font-size: 13.6px; margin: 0; }
table.tabella-dati thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--superficie-2);
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--tenue); font-weight: 700;
    padding: 9px 11px; border-bottom: 2px solid var(--linea-forte); white-space: nowrap;
}
table.tabella-dati thead th a { color: inherit; text-decoration: none; }
table.tabella-dati thead th a:hover { color: var(--arancio); }
table.tabella-dati td { padding: 9px 11px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
table.tabella-dati tbody tr { transition: background .12s ease; }
table.tabella-dati tbody tr:hover { background: rgba(255, 79, 0, .06); }
table.tabella-dati tfoot td { padding: 10px 11px; border-top: 2px solid var(--linea-forte); font-weight: 700; background: var(--superficie-2); }
table.tabella-dati a { color: var(--arancio-fondo); font-weight: 600; text-decoration: none; }
[data-tema="scuro"] table.tabella-dati a { color: var(--arancio-vivo); }
table.tabella-dati a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   10. Etichette e distintivi
   -------------------------------------------------------------------------- */
.badge-paese, .badge-stato, .tag-rif {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.badge-paese.it { background: rgba(15, 157, 99, .16); color: var(--utile); border: 1px solid rgba(15, 157, 99, .4); }
.badge-paese.fr { background: rgba(38, 104, 224, .16); color: #2b6ee0; border: 1px solid rgba(38, 104, 224, .4); }
[data-tema="scuro"] .badge-paese.fr { color: #7fb0ff; }
.badge-paese.xx { background: rgba(123, 102, 89, .16); color: var(--tenue); border: 1px solid var(--linea-forte); }
.badge-stato.attivo   { background: rgba(255, 79, 0, .14); color: var(--arancio-fondo); border: 1px solid rgba(255, 79, 0, .4); }
[data-tema="scuro"] .badge-stato.attivo { color: var(--arancio-vivo); }
.badge-stato.venduto  { background: rgba(15, 157, 99, .16); color: var(--utile); border: 1px solid rgba(15, 157, 99, .4); }
.badge-stato.ritirato,
.badge-stato.deceduto { background: rgba(123, 102, 89, .16); color: var(--tenue); border: 1px solid var(--linea-forte); }
.tag-rif { background: var(--superficie-2); color: var(--tenue); border: 1px solid var(--linea); font-weight: 500; }

.medaglia {
    display: inline-grid; place-items: center;
    width: 27px; height: 27px; border-radius: 50%;
    font-size: 11.5px; font-weight: 700; color: #3a2400;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 5px rgba(0, 0, 0, .2);
}
.medaglia.oro     { background: linear-gradient(145deg, #ffd766, #e8a417); }
.medaglia.argento { background: linear-gradient(145deg, #eceff3, #b9c0ca); }
.medaglia.bronzo  { background: linear-gradient(145deg, #e2a877, #b7712f); color: #fff; }

/* --------------------------------------------------------------------------
   11. Moduli
   -------------------------------------------------------------------------- */
.form-label, .modulo label { font-size: 12px; font-weight: 700; color: var(--tenue); margin-bottom: 4px; text-transform: none; }
.form-control, .form-select, .modulo input, .modulo select, .modulo textarea {
    background: var(--superficie);
    border: 1px solid var(--linea-forte);
    color: var(--testo);
    border-radius: var(--raggio-pic);
    padding: .48rem .7rem;
    font-size: 14.5px;
}
.form-control:focus, .form-select:focus {
    background: var(--superficie);
    color: var(--testo);
    border-color: var(--arancio);
    box-shadow: 0 0 0 .2rem rgba(255, 79, 0, .22);
}
.form-control::placeholder { color: var(--tenue); opacity: .75; }
.form-text, .aiuto { font-size: 11.8px; color: var(--tenue); line-height: 1.45; }
fieldset.riquadro {
    border: 1px solid var(--linea); border-radius: var(--raggio-pic);
    padding: 12px 16px 16px; margin-bottom: 16px; background: var(--superficie-2);
}
fieldset.riquadro legend {
    float: none; width: auto; padding: 0 8px; margin: 0 0 6px -8px;
    font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--tenue); font-weight: 800;
}
.anteprima-calcolo {
    background: linear-gradient(135deg, rgba(255, 79, 0, .10), rgba(255, 176, 32, .07));
    border: 1px dashed rgba(255, 79, 0, .4);
    border-radius: var(--raggio-pic);
    padding: 10px 14px; font-size: 13.2px;
    display: flex; gap: 20px; flex-wrap: wrap; font-variant-numeric: tabular-nums;
}
.riga-socio { display: flex; gap: 8px; align-items: center; margin-bottom: 7px; }
.riga-socio input[type="text"] { flex: 1 1 auto; }
.riga-socio input[type="number"], .riga-socio input.quota { width: 96px; flex: 0 0 96px; }

/* --------------------------------------------------------------------------
   12. Avvisi
   -------------------------------------------------------------------------- */
.avviso-riga {
    border-radius: var(--raggio-pic); padding: 11px 15px; margin-bottom: 12px;
    font-size: 13.6px; border: 1px solid; display: flex; gap: 10px; align-items: flex-start;
    box-shadow: var(--ombra);
}
.avviso-riga.ok         { background: rgba(15, 157, 99, .12);  border-color: rgba(15, 157, 99, .42);  color: var(--utile); }
.avviso-riga.errore     { background: rgba(213, 37, 75, .12);  border-color: rgba(213, 37, 75, .42);  color: var(--perdita); }
.avviso-riga.attenzione { background: rgba(217, 130, 0, .13);  border-color: rgba(217, 130, 0, .45);  color: var(--avviso); }
[data-tema="scuro"] .avviso-riga.attenzione { color: var(--ambra); }

.vuoto {
    text-align: center; padding: 34px 20px; color: var(--tenue);
    border: 1px dashed var(--linea-forte); border-radius: var(--raggio); background: var(--superficie-2);
}
.vuoto h3 { color: var(--testo); }

/* --------------------------------------------------------------------------
   13. Grafici SVG
   -------------------------------------------------------------------------- */
.grafico { width: 100%; height: auto; display: block; }
.g-griglia      { stroke: var(--griglia); stroke-width: 1; }
.g-zero         { stroke: var(--linea-forte); stroke-width: 1.4; stroke-dasharray: 4 4; }
.g-asse         { fill: var(--tenue); font-size: 11px; font-family: var(--sans); }
.g-etichetta    { fill: var(--testo); font-size: 12.5px; font-family: var(--sans); }
.g-linea        { fill: none; stroke: var(--arancio); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.g-linea.perdita{ stroke: var(--perdita); }
.g-linea.utile  { stroke: var(--utile); }
.g-area         { fill: url(#gradArea); opacity: .55; }
.g-area-alto    { stop-color: var(--arancio); stop-opacity: .38; }
.g-area-basso   { stop-color: var(--arancio); stop-opacity: 0; }
.g-punto        { fill: var(--arancio); stroke: var(--superficie); stroke-width: 2.5; }
.g-punto.utile  { fill: var(--utile); }
.g-punto.perdita{ fill: var(--perdita); }
.g-valore       { font-size: 14px; font-weight: 700; font-family: var(--sans); fill: var(--testo); }
.g-valore.utile { fill: var(--utile); }
.g-valore.perdita { fill: var(--perdita); }
.g-barra        { fill: var(--arancio); }
.g-barra.utile  { fill: var(--utile); }
.g-barra.perdita{ fill: var(--perdita); }
.g-barra.spesa  { fill: var(--arancio); opacity: .82; }
.g-valore-barra { fill: var(--tenue); font-size: 12px; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.g-valore-barra.utile   { fill: var(--utile); }
.g-valore-barra.perdita { fill: var(--perdita); }
.vuoto-grafico { color: var(--tenue); font-size: 13.5px; padding: 18px 4px; }

/* --------------------------------------------------------------------------
   14. Galleria di foto e video
   -------------------------------------------------------------------------- */
.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.galleria .scatto {
    position: relative; border-radius: var(--raggio-pic); overflow: hidden;
    border: 1px solid var(--linea); background: var(--superficie-2);
    aspect-ratio: 4 / 3; box-shadow: var(--ombra);
    transition: transform .18s ease, box-shadow .18s ease;
}
.galleria .scatto:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--ombra-alta); }
.galleria .scatto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galleria .scatto .togli {
    position: absolute; top: 6px; right: 6px;
    width: 26px; height: 26px; border-radius: 50%; border: none;
    background: rgba(20, 12, 8, .7); color: #fff; font-size: 13px; line-height: 1; cursor: pointer;
}
.galleria .scatto .togli:hover { background: var(--perdita); }
.lista-media { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 7px; }
.lista-media li {
    display: flex; align-items: center; gap: 10px; font-size: 13.6px;
    padding: 8px 12px; border: 1px solid var(--linea); border-radius: var(--raggio-pic); background: var(--superficie-2);
}
.lista-media a { color: var(--arancio-fondo); font-weight: 600; word-break: break-word; text-decoration: none; }
[data-tema="scuro"] .lista-media a { color: var(--arancio-vivo); }
.lettore-video { width: 100%; max-height: 460px; border-radius: var(--raggio-pic); background: #000; }

/* --------------------------------------------------------------------------
   15. Accesso
   -------------------------------------------------------------------------- */
.velo-accesso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.riquadro-accesso {
    width: 100%; max-width: 430px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: 20px;
    box-shadow: var(--ombra-alta);
    padding: 30px 28px 24px;
    position: relative; overflow: hidden;
}
.riquadro-accesso::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--arancio-fondo), var(--arancio) 40%, var(--ambra));
}
.riquadro-accesso .simbolo-grande {
    width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
    background: linear-gradient(145deg, var(--arancio-vivo), var(--arancio) 45%, var(--arancio-fondo));
    color: #fff; font-size: 28px; margin-bottom: 14px;
    box-shadow: 0 8px 20px rgba(255, 79, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* --------------------------------------------------------------------------
   16. Barra dei filtri
   -------------------------------------------------------------------------- */
.barra-filtri {
    display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
    padding: 12px 15px; margin-bottom: 16px;
    box-shadow: var(--ombra);
}
.barra-filtri label { margin-bottom: 2px; }
.barra-filtri .campo { display: flex; flex-direction: column; min-width: 132px; }
.barra-filtri .spazio { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   17. Adattamento a telefoni e tablet
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    :root { --altezza-testa: 58px; }
    .marchio .paglia { display: none; }
    .pannello { padding: 15px 14px; }
    .lavagna { padding: 18px 18px 20px; transform: none; }
    .barra-filtri .campo { min-width: 46%; flex: 1 1 46%; }
}
@media (max-width: 575.98px) {
    body { padding-bottom: calc(var(--altezza-piede) + 4px); }
    .griglia-kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
    .griglia-kpi > .lavagna { grid-column: 1 / -1; }
    .kpi { padding: 11px 12px; }
    .kpi .valore { font-size: 1.16rem; }
    table.tabella-dati { font-size: 12.8px; }
    table.tabella-dati td, table.tabella-dati thead th { padding: 7px 8px; }
    .piede-fisso .solo-largo { display: none; }
    .galleria { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}

/* iPhone con la tacca: si rispettano le zone sicure */
@supports (padding: max(0px)) {
    .testa-fissa { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
    .piede-fisso {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        height: calc(var(--altezza-piede) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
    }
    body { padding-bottom: calc(var(--altezza-piede) + env(safe-area-inset-bottom) + 8px); }
}

/* --------------------------------------------------------------------------
   18. Accessibilità e stampa
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--arancio-profondo);   /* 8,40:1 su fondo chiaro */
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(255, 176, 32, .55); /* alone ambra: visibile anche su fondo scuro */
}
[data-tema="scuro"] :focus-visible {
    outline-color: var(--ambra);                  /* su fondo scuro l'ambra è il colore più contrastato */
    box-shadow: 0 0 0 6px rgba(143, 42, 0, .6);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .sfondo-animato::before, .sfondo-animato::after { animation: none; }
}

@media print {
    .testa-fissa, .piede-fisso, .sfondo-animato, .sfondo-trama, .no-stampa, .barra-filtri { display: none !important; }
    body { padding: 0; background: #fff; color: #000; }
    .pannello, .kpi { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
    .lavagna { background: #fff !important; color: #000 !important; border: 2px solid #333; transform: none; }
    .lavagna .cifra, .lavagna .dettaglio, .lavagna .occhiello { color: #000 !important; }
    a { text-decoration: none; color: #000; }
    table.tabella-dati thead th { background: #eee; color: #000; }
}

/* ==========================================================================
   19. Accessibilità: salto dei blocchi, testo per lettori di schermo,
       dimensione minima dei bersagli (WCAG 2.2 AA · EN 301 549)
   ========================================================================== */

/* 2.4.1 Salto dei blocchi */
.salta-contenuto {
    position: absolute; left: 8px; top: -60px; z-index: 2000;
    background: var(--arancio-fondo); color: #fff;
    padding: 12px 18px; border-radius: 0 0 10px 10px;
    font-weight: 600; text-decoration: none;
    transition: top .15s ease;
}
.salta-contenuto:focus { top: 0; color: #fff; }

/* testo destinato ai soli lettori di schermo */
.visivamente-nascosto {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

/* 2.4.11 Focus non oscurato dall'intestazione fissa */
:target, main:focus { scroll-margin-top: calc(var(--altezza-testa) + 16px); }
main:focus { outline: none; }

/* 2.5.8 Dimensione del bersaglio: almeno 24×24 px per ogni comando */
.btn, .btn-sm, .form-check-input, .menu-principale .voce,
.galleria .scatto .togli, .collegamento-piede, .scheda {
    min-height: 24px;
    min-width: 24px;
}
.btn-sm { padding: .34rem .62rem; }
.form-check-input { width: 1.15em; height: 1.15em; }
table.tabella-dati td .btn-sm { min-height: 26px; }

/* zona degli avvisi: annuncio senza spostamenti di impaginazione */
.zona-avvisi:empty { display: none; }

/* testo lungo: misura di riga leggibile */
.testo-lungo { font-size: 14.4px; line-height: 1.65; max-width: 72ch; }
ul.testo-lungo li { margin-bottom: .4em; }

/* contrasto: i collegamenti nel piede devono restare leggibili */
.collegamento-piede { color: var(--arancio-fondo); text-decoration: none; font-weight: 600; }
[data-tema="scuro"] .collegamento-piede { color: var(--arancio-vivo); }
.collegamento-piede:hover { text-decoration: underline; }

/* ==========================================================================
   20. Aiuto contestuale: pulsante flottante e pannello
   ========================================================================== */
.bottone-aiuto {
    position: fixed;
    right: clamp(12px, 2vw, 22px);
    bottom: calc(var(--altezza-piede) + 14px);
    z-index: 1040;
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(143, 42, 0, .5);
    background: linear-gradient(145deg, #d34000, var(--arancio-fondo) 55%, var(--arancio-profondo));
    color: #fff; font-size: 25px; font-weight: 700; line-height: 1;
    box-shadow: 0 6px 18px rgba(255, 79, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .38);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.bottone-aiuto:hover  { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 26px rgba(255, 79, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .45); }
.bottone-aiuto:active { transform: translateY(0) scale(.98); }
@supports (padding: max(0px)) {
    .bottone-aiuto { bottom: calc(var(--altezza-piede) + env(safe-area-inset-bottom) + 14px); }
}

.pannello-aiuto { width: min(420px, 92vw); background: var(--superficie); color: var(--testo); }
.pannello-aiuto .offcanvas-header { border-bottom: 1px solid var(--linea); }
.pannello-aiuto .offcanvas-header::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--arancio-fondo), var(--arancio) 40%, var(--ambra));
}
.elenco-aiuto { padding-left: 1.1rem; margin: 0; font-size: 13.8px; line-height: 1.6; }
.elenco-aiuto li { margin-bottom: .45em; }
.elenco-aiuto a { color: var(--arancio-fondo); font-weight: 600; }
[data-tema="scuro"] .elenco-aiuto a { color: var(--arancio-vivo); }
kbd {
    background: var(--superficie-2); border: 1px solid var(--linea-forte);
    border-bottom-width: 2px; border-radius: 5px;
    padding: 1px 6px; font-family: var(--mono); font-size: 11.5px; color: var(--testo);
}

/* ==========================================================================
   21. Schede di navigazione della guida e della conformità
   ========================================================================== */
.schede-guida {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 18px; padding-bottom: 8px;
    border-bottom: 2px solid var(--linea);
}
.schede-guida .scheda {
    padding: 9px 15px; border-radius: 10px 10px 0 0;
    color: var(--testo); text-decoration: none;
    font-size: 14px; font-weight: 600;
    border: 1px solid transparent; border-bottom: none;
    transition: background .15s ease, color .15s ease;
}
.schede-guida .scheda:hover { background: rgba(255, 79, 0, .10); }
.schede-guida .scheda.attiva {
    color: #fff;
    background: linear-gradient(145deg, #d34000, var(--arancio-fondo) 58%, var(--arancio-profondo));
    box-shadow: 0 3px 10px rgba(255, 79, 0, .3);
}

/* ==========================================================================
   22. Glossario e bibliografia
   ========================================================================== */
.glossario { margin: 0; }
.glossario dt {
    font-family: var(--serif); font-size: 15.5px; font-weight: 600;
    color: var(--arancio-fondo); margin-top: 16px;
    scroll-margin-top: calc(var(--altezza-testa) + 16px);
}
[data-tema="scuro"] .glossario dt { color: var(--arancio-vivo); }
.glossario dd {
    margin: 3px 0 0; padding-left: 14px;
    border-left: 2px solid var(--linea-forte);
    font-size: 14px; line-height: 1.6; max-width: 76ch;
}
.bibliografia { list-style: none; padding: 0; margin: 0 0 18px; }
.bibliografia li {
    padding: 10px 14px; margin-bottom: 8px;
    border: 1px solid var(--linea); border-radius: var(--raggio-pic);
    background: var(--superficie-2); font-size: 14px;
}
.bibliografia a { color: var(--arancio-fondo); word-break: break-word; }
[data-tema="scuro"] .bibliografia a { color: var(--arancio-vivo); }
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* fisarmonica delle domande frequenti, nei colori del tema */
.accordion { --bs-accordion-bg: var(--superficie); --bs-accordion-color: var(--testo);
             --bs-accordion-border-color: var(--linea); --bs-accordion-btn-color: var(--testo);
             --bs-accordion-active-bg: rgba(255, 79, 0, .10); --bs-accordion-active-color: var(--arancio-fondo);
             --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(255, 79, 0, .25); }
[data-tema="scuro"] .accordion { --bs-accordion-active-color: var(--arancio-vivo); }
.accordion-button { font-weight: 600; font-size: 14.5px; }
.accordion-body { font-size: 14px; line-height: 1.65; max-width: 76ch; }

/* in stampa l'aiuto flottante non serve */
@media print { .bottone-aiuto, .pannello-aiuto, .schede-guida, .salta-contenuto { display: none !important; } }

/* navigazione fra le pagine degli elenchi lunghi */
.navigazione-pagine {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea);
}
.navigazione-pagine .aiuto { margin: 0; }

/* ==========================================================================
   23. Pannello di analisi: linguetta sul bordo sinistro, a metà schermo
   --------------------------------------------------------------------------
   Resta appena visibile e si allarga avvicinando il puntatore. Poiché
   l'apertura al solo passaggio del mouse escluderebbe chi usa la tastiera,
   il pannello si apre anche col fuoco e col clic, si chiude con Esc e non
   copre il contenuto (WCAG 2.2, criterio 1.4.13).
   ========================================================================== */
.linguetta-analisi {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1039;
    display: flex;
    align-items: stretch;
    max-height: min(78vh, 720px);
}

.linguetta-maniglia {
    /* A scomparsa: si vede solo un filo sottile, semitrasparente.
       L'area effettivamente cliccabile resta però di 26×64 pixel, sopra il
       minimo di 24×24 richiesto dal criterio 2.5.8 delle WCAG 2.2: il segno
       visibile è piccolo, il bersaglio no. */
    flex: 0 0 auto;
    width: 26px;
    min-height: 64px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    opacity: .38;
    transition: opacity .18s ease, width .18s ease;
}
/* il filo visibile */
.linguetta-maniglia::before {
    content: "";
    display: block;
    width: 5px;
    height: 64px;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(180deg, var(--arancio), var(--arancio-fondo));
    box-shadow: 1px 0 6px rgba(143, 42, 0, .35);
    transition: width .18s ease, height .18s ease;
}
.linguetta-analisi:hover .linguetta-maniglia,
.linguetta-analisi:focus-within .linguetta-maniglia,
.linguetta-analisi.aperta .linguetta-maniglia { opacity: 1; }
.linguetta-analisi:hover .linguetta-maniglia::before,
.linguetta-analisi:focus-within .linguetta-maniglia::before,
.linguetta-analisi.aperta .linguetta-maniglia::before { width: 9px; height: 88px; }
/* i contrassegni interni compaiono solo quando la linguetta si apre */
.linguetta-icona, .linguetta-testo { display: none; }
.linguetta-analisi.aperta .linguetta-icona { display: block; }

.linguetta-corpo {
    width: 0;
    opacity: 0;
    overflow: hidden;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-left: none;
    border-radius: 0 14px 14px 0;
    box-shadow: var(--ombra-alta);
    transition: width .22s ease, opacity .18s ease, padding .22s ease;
    padding: 0;
    pointer-events: none;
}
/* apertura: puntatore sopra la linguetta, oppure fuoco da tastiera, oppure clic */
.linguetta-analisi:hover .linguetta-corpo,
.linguetta-analisi:focus-within .linguetta-corpo,
.linguetta-analisi.aperta .linguetta-corpo {
    width: min(370px, 88vw);
    opacity: 1;
    padding: 16px 18px;
    overflow-y: auto;
    pointer-events: auto;
}
.linguetta-testata { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.linguetta-corpo h3 { font-family: var(--sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); font-weight: 800; }

.mini-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-kpi > div {
    background: var(--superficie-2); border: 1px solid var(--linea);
    border-radius: var(--raggio-pic); padding: 8px 10px;
}
.mini-kpi .etichetta { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 700; }
.mini-kpi b { font-size: 15px; font-variant-numeric: tabular-nums; }

.elenco-previsioni { list-style: none; padding: 0; margin: 0; }
.elenco-previsioni li { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.elenco-previsioni a { flex: 0 0 92px; color: var(--arancio-fondo); font-weight: 600; text-decoration: none; }
[data-tema="scuro"] .elenco-previsioni a { color: var(--arancio-vivo); }
.elenco-previsioni .barretta { flex: 1 1 auto; height: 8px; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; }
.elenco-previsioni .barretta > span { display: block; height: 100%; background: linear-gradient(90deg, var(--arancio), var(--ambra)); }
.elenco-previsioni b { flex: 0 0 38px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* su telefono la linguetta sarebbe d'impaccio: resta solo il collegamento in menù */
@media (max-width: 767.98px) {
    .linguetta-analisi { display: none; }
}
@media print { .linguetta-analisi { display: none !important; } }

/* ==========================================================================
   24. Punteggio di sintesi del cavallo e blocchi previsionali
   ========================================================================== */
.riquadro-punteggio {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "cifra testo" "barra barra";
    gap: 6px 18px; align-items: center;
    padding: 16px 20px; border-radius: var(--raggio);
    border: 1px solid var(--linea); background: var(--superficie-2);
    margin-bottom: 12px;
}
.riquadro-punteggio.alto  { border-color: rgba(11, 122, 76, .45); background: rgba(11, 122, 76, .08); }
.riquadro-punteggio.medio { border-color: rgba(255, 79, 0, .45);  background: rgba(255, 79, 0, .08); }
.riquadro-punteggio.basso { border-color: rgba(213, 37, 75, .45); background: rgba(213, 37, 75, .08); }
.pt-cifra { grid-area: cifra; display: flex; align-items: baseline; gap: 4px; }
.pt-valore { font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.riquadro-punteggio.alto  .pt-valore { color: var(--utile); }
.riquadro-punteggio.medio .pt-valore { color: var(--arancio-fondo); }
[data-tema="scuro"] .riquadro-punteggio.medio .pt-valore { color: var(--arancio-vivo); }
.riquadro-punteggio.basso .pt-valore { color: var(--perdita); }
.pt-su { font-size: 1rem; color: var(--tenue); font-weight: 600; }
.pt-testo { grid-area: testo; font-size: 15px; }
.pt-barra { grid-area: barra; height: 9px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--linea); overflow: hidden; margin-top: 4px; }
.pt-barra > span { display: block; height: 100%; background: linear-gradient(90deg, var(--arancio-fondo), var(--arancio), var(--ambra)); }

.dettaglio-punteggio > summary {
    cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--arancio-fondo);
    padding: 6px 0; min-height: 24px;
}
[data-tema="scuro"] .dettaglio-punteggio > summary { color: var(--arancio-vivo); }
.dettaglio-punteggio > summary:hover { text-decoration: underline; }

/* barra orizzontale del peso di un modello */
.barretta-peso { display: block; height: 8px; border-radius: 999px; background: var(--superficie-2);
                 border: 1px solid var(--linea); overflow: hidden; min-width: 60px; }
.barretta-peso > span { display: block; height: 100%; background: linear-gradient(90deg, var(--arancio-fondo), var(--ambra)); }

/* ==========================================================================
   25. Diagnostica: rilievi, gravità, riparazioni
   ========================================================================== */
.rilievo-grave  { border-left: 4px solid var(--perdita); }
.rilievo-avviso { border-left: 4px solid var(--avviso); }
.rilievo-nota   { border-left: 4px solid var(--linea-forte); }
.pastiglia-gravita {
    display: inline-block; padding: 3px 11px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.pastiglia-gravita.grave  { background: rgba(213, 37, 75, .16); color: var(--perdita); border: 1px solid rgba(213, 37, 75, .45); }
.pastiglia-gravita.avviso { background: rgba(217, 130, 0, .16); color: var(--avviso); border: 1px solid rgba(217, 130, 0, .45); }
[data-tema="scuro"] .pastiglia-gravita.avviso { color: var(--ambra); }
.pastiglia-gravita.nota   { background: var(--superficie-2); color: var(--tenue); border: 1px solid var(--linea-forte); }
.riquadro-riparazione {
    margin-top: 12px; padding: 12px 15px;
    background: linear-gradient(135deg, rgba(255, 79, 0, .09), rgba(255, 176, 32, .06));
    border: 1px dashed rgba(255, 79, 0, .42); border-radius: var(--raggio-pic);
    font-size: 13.8px;
}
/* indicatore di robustezza della password */
.robustezza { display: flex; gap: 4px; margin-top: 6px; }
.robustezza span { flex: 1; height: 5px; border-radius: 3px; background: var(--superficie-2); border: 1px solid var(--linea); }
.robustezza span.on-1 { background: var(--perdita); }
.robustezza span.on-2 { background: var(--avviso); }
.robustezza span.on-3 { background: var(--ambra); }
.robustezza span.on-4 { background: var(--utile); }