/*
 * AirAffitti Valutatore Pro - design system premium del wizard e della
 * dashboard di risultato.
 *
 * Solo presentazione: nessuna classe qui e' legata a validazione o
 * invio dati (quelle vivono su attributi `name`/`data-*` invariati nel
 * template). Le variabili CSS con prefisso --aavp- SENZA suffisso
 * interno (--aavp-accent, --aavp-accent-2, --aavp-chart-*,
 * --aavp-transition-duration) sono l'unico punto scritto dai controlli
 * Elementor: non rinominarle. Tutte le altre (--aavp-ink, --aavp-*,
 * ecc.) sono token interni del design system, liberi da vincoli.
 */

.aavp-widget {
    /* Token esposti a Elementor (non rinominare) */
    --aavp-accent: #e85a4f;
    --aavp-accent-2: #ff8a65;
    --aavp-chart-min: #c9cdd6;
    --aavp-chart-avg: var(--aavp-accent);
    --aavp-chart-max: #16213e;
    --aavp-transition-duration: 400ms;

    /* Token interni del design system */
    --aavp-ink: #10121c;
    --aavp-ink-soft: #565b6e;
    --aavp-muted: #6b7085;
    --aavp-surface: #ffffff;
    --aavp-surface-soft: #f6f7fb;
    --aavp-border: #e7e8f0;
    --aavp-track: #edeef4;
    --aavp-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --aavp-shadow-sm: 0 1px 2px rgba(16, 18, 34, 0.05);
    --aavp-shadow-md: 0 10px 30px -8px rgba(16, 18, 34, 0.16);
    --aavp-shadow-lg: 0 24px 70px -12px rgba(16, 18, 34, 0.22);
    --aavp-radius-sm: 10px;
    --aavp-radius-md: 14px;
    --aavp-radius-lg: 22px;
    --aavp-gradient-accent: linear-gradient(135deg, var(--aavp-accent), var(--aavp-accent-2));
    --aavp-gradient-bar: linear-gradient(90deg, var(--aavp-accent), var(--aavp-accent-2));

    box-sizing: border-box;
    position: relative;
    container-type: inline-size;
    container-name: aavp;
    max-width: 620px;
    margin: 0 auto;
    padding: 30px;
    border-radius: var(--aavp-radius-lg);
    /*
     * Il washer decorativo e' un secondo layer di background (non un
     * elemento ::before separato): i background sono sempre ritagliati
     * al border-radius dell'elemento senza bisogno di overflow:hidden,
     * che altrimenti taglierebbe anche il box-shadow qui sotto.
     */
    background-color: var(--aavp-surface);
    background-image:
        radial-gradient(60% 60% at 25% 0%, color-mix(in srgb, var(--aavp-accent) 10%, transparent), transparent 70%),
        radial-gradient(50% 50% at 95% 0%, color-mix(in srgb, var(--aavp-accent-2) 8%, transparent), transparent 70%);
    background-repeat: no-repeat;
    box-shadow: var(--aavp-shadow-sm), var(--aavp-shadow-md);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
    color: var(--aavp-ink);
    -webkit-font-smoothing: antialiased;
}

.aavp-widget *,
.aavp-widget *::before,
.aavp-widget *::after {
    box-sizing: border-box;
}

.aavp-widget svg {
    display: block;
}

.aavp-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ---------- Hero ---------- */

.aavp-hero {
    margin-bottom: 22px;
}

.aavp-hero__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: var(--aavp-gradient-accent);
    color: #ffffff;
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--aavp-accent) 55%, transparent);
}

.aavp-hero__badge .aavp-icon {
    width: 17px;
    height: 17px;
    stroke-width: 2;
}

.aavp-widget__title {
    margin: 0 0 6px;
    font-size: 1.44rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--aavp-ink);
}

.aavp-widget__subtitle {
    margin: 0;
    max-width: 46ch;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--aavp-ink-soft);
}

/* ---------- Progress / stepper ---------- */

.aavp-progress {
    margin-bottom: 22px;
}

.aavp-progress__steps {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.aavp-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    text-align: center;
}

.aavp-progress__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--aavp-track);
    color: var(--aavp-muted);
    font-size: 0.8rem;
    font-weight: 700;
    transition: background var(--aavp-transition-duration) var(--aavp-ease),
                color var(--aavp-transition-duration) var(--aavp-ease),
                transform var(--aavp-transition-duration) var(--aavp-ease),
                box-shadow var(--aavp-transition-duration) var(--aavp-ease);
}

.aavp-progress__label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--aavp-muted);
    transition: color var(--aavp-transition-duration) var(--aavp-ease);
    white-space: nowrap;
}

.aavp-progress__step--active .aavp-progress__dot {
    background: var(--aavp-gradient-accent);
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--aavp-accent) 55%, transparent);
}

.aavp-progress__step--active .aavp-progress__label {
    color: var(--aavp-ink);
}

.aavp-progress__step--done .aavp-progress__dot {
    background-color: var(--aavp-ink);
    color: #ffffff;
}

.aavp-progress__step--done .aavp-progress__label {
    color: var(--aavp-ink-soft);
}

.aavp-progress__track {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background-color: var(--aavp-track);
    overflow: hidden;
}

.aavp-progress__fill {
    height: 100%;
    width: 25%;
    border-radius: 999px;
    background: var(--aavp-gradient-bar);
    transition: width calc(var(--aavp-transition-duration) * 1.4) var(--aavp-ease);
}

/* ---------- Error banner ---------- */

.aavp-error-banner {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--aavp-radius-sm);
    background-color: #fdeeec;
    border: 1px solid #f6c9c3;
    color: #ac2b1f;
    font-size: 0.85rem;
    line-height: 1.4;
    animation: aavp-fade-in 240ms var(--aavp-ease) both;
}

/* ---------- Step transitions ---------- */

.aavp-step {
    animation-duration: var(--aavp-transition-duration);
    animation-timing-function: var(--aavp-ease);
    animation-fill-mode: both;
}

.aavp-widget[data-animation="fade"] .aavp-step--entering {
    animation-name: aavp-fade-in;
}

.aavp-widget[data-animation="slide"] .aavp-step--entering {
    animation-name: aavp-slide-in;
}

@keyframes aavp-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes aavp-slide-in {
    from { opacity: 0; transform: translateX(14px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Il focus programmatico sullo step (per screen reader/tastiera) non deve mostrare un riquadro intorno a tutta la sezione. */
.aavp-step:focus {
    outline: none;
}

.aavp-step__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--aavp-ink);
}

.aavp-step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background-color: var(--aavp-surface-soft);
    color: var(--aavp-accent);
    flex-shrink: 0;
}

/* ---------- Fields ---------- */

.aavp-field {
    margin-bottom: 14px;
}

.aavp-field-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.aavp-field-row--3 {
    grid-template-columns: repeat(3, 1fr);
}

.aavp-field-row .aavp-field {
    margin-bottom: 14px;
}

.aavp-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--aavp-ink-soft);
}

.aavp-field__required {
    color: var(--aavp-accent);
}

.aavp-field__control {
    position: relative;
    display: flex;
    align-items: center;
}

.aavp-field__icon {
    position: absolute;
    left: 13px;
    display: flex;
    color: var(--aavp-muted);
    pointer-events: none;
    transition: color 0.2s ease;
}

.aavp-field__control:focus-within .aavp-field__icon {
    color: var(--aavp-accent);
}

.aavp-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--aavp-border);
    border-radius: var(--aavp-radius-sm);
    background-color: var(--aavp-surface-soft);
    color: var(--aavp-ink);
    font-size: 0.93rem;
    font-family: inherit;
    line-height: 1.3;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

/*
 * BUG FIX: prima questa regola era su `.aavp-input--icon` (stessa
 * specificita' della regola base `.aavp-input` sopra: una sola
 * classe). Con specificita' identica vince l'ultima dichiarata nel
 * file, un equilibrio fragile che si rompe facilmente (es. minifier,
 * concatenazione di file, o l'ordine con cui un futuro child theme
 * inietta altro CSS). Il selettore discendente sotto ha specificita'
 * strutturalmente piu' alta (due classi) e vince sempre, a
 * prescindere dall'ordine: l'icona non torna mai a sovrapporsi al
 * testo del campo.
 */
.aavp-field__control .aavp-input {
    padding-left: 40px;
}

.aavp-input::placeholder {
    color: var(--aavp-muted);
}

.aavp-input:hover {
    border-color: color-mix(in srgb, var(--aavp-accent) 35%, var(--aavp-border));
}

.aavp-input:focus {
    outline: none;
    border-color: var(--aavp-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--aavp-accent) 14%, transparent);
    background-color: var(--aavp-surface);
}

.aavp-field--invalid .aavp-input {
    border-color: #d6483d;
    animation: aavp-shake 0.3s ease;
}

.aavp-field__error {
    display: none;
    margin-top: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #d6483d;
}

.aavp-field--invalid .aavp-field__error {
    display: block;
}

@keyframes aavp-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

/* ---------- Pill options (qualita', stagionalita') ---------- */

.aavp-pill-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aavp-pill {
    position: relative;
    cursor: pointer;
}

.aavp-pill input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.aavp-pill span {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--aavp-border);
    background-color: var(--aavp-surface-soft);
    font-size: 0.83rem;
    font-weight: 650;
    color: var(--aavp-ink-soft);
    transition: all 0.18s ease;
}

.aavp-pill:hover span {
    border-color: var(--aavp-accent);
    color: var(--aavp-ink);
    transform: translateY(-1px);
}

.aavp-pill input:checked + span {
    background: var(--aavp-gradient-accent);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--aavp-accent) 60%, transparent);
}

.aavp-pill input:focus-visible + span {
    outline: 2px solid var(--aavp-accent);
    outline-offset: 2px;
}

/* ---------- Amenities chips ---------- */

.aavp-amenities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.aavp-amenity {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border-radius: var(--aavp-radius-sm);
    border: 1.5px solid var(--aavp-border);
    background-color: var(--aavp-surface-soft);
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--aavp-ink-soft);
    cursor: pointer;
    transition: all 0.18s ease;
    overflow: hidden;
}

.aavp-amenity input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.aavp-amenity__icon {
    display: flex;
    color: var(--aavp-muted);
    transition: color 0.18s ease;
}

.aavp-amenity__label {
    flex: 1;
}

.aavp-amenity__check {
    display: flex;
    color: var(--aavp-accent);
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.18s var(--aavp-ease);
}

.aavp-amenity:hover {
    border-color: color-mix(in srgb, var(--aavp-accent) 40%, var(--aavp-border));
    transform: translateY(-1px);
    box-shadow: var(--aavp-shadow-sm);
}

.aavp-amenity:has(input:checked) {
    background-color: color-mix(in srgb, var(--aavp-accent) 8%, var(--aavp-surface));
    border-color: var(--aavp-accent);
    color: var(--aavp-ink);
}

.aavp-amenity:has(input:checked) .aavp-amenity__icon {
    color: var(--aavp-accent);
}

.aavp-amenity:has(input:checked) .aavp-amenity__check {
    opacity: 1;
    transform: scale(1);
}

.aavp-amenity:has(input:focus-visible) {
    outline: 2px solid var(--aavp-accent);
    outline-offset: 1px;
}

/*
 * Fallback per browser senza supporto a :has() (fino a Safari 15.3,
 * Firefox 120): stessa resa visiva, applicata dalla classe che
 * assets/js/widget.js aggiunge/rimuove sul cambio checkbox.
 */
.aavp-amenity.aavp-amenity--checked {
    background-color: color-mix(in srgb, var(--aavp-accent) 8%, var(--aavp-surface));
    border-color: var(--aavp-accent);
    color: var(--aavp-ink);
}

.aavp-amenity.aavp-amenity--checked .aavp-amenity__icon {
    color: var(--aavp-accent);
}

.aavp-amenity.aavp-amenity--checked .aavp-amenity__check {
    opacity: 1;
    transform: scale(1);
}

/*
 * ---------- Honeypot anti-spam (invisibile, non fa parte del tab order) ----------
 * Stessa tecnica di .aavp-sr-only (clip a 1px, non spostamento fuori
 * schermo con left negativo): da quando .aavp-widget non ha piu'
 * overflow:hidden (vedi sopra, serviva a non tagliare il box-shadow),
 * un posizionamento off-screen qui creerebbe scroll orizzontale
 * indesiderato sulla pagina.
 */
.aavp-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Utility accessibilita' ---------- */

.aavp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Consent checkbox ---------- */

.aavp-consent {
    padding-top: 2px;
}

.aavp-checkbox {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.aavp-checkbox input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.aavp-checkbox__box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 6px;
    border: 1.5px solid var(--aavp-border);
    background-color: var(--aavp-surface-soft);
    color: #ffffff;
    transition: all 0.18s var(--aavp-ease);
}

.aavp-checkbox__box .aavp-icon {
    width: 13px;
    height: 13px;
    stroke-width: 3;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.18s var(--aavp-ease);
}

.aavp-checkbox input:checked + .aavp-checkbox__box {
    background: var(--aavp-gradient-accent);
    border-color: transparent;
}

.aavp-checkbox input:checked + .aavp-checkbox__box .aavp-icon {
    opacity: 1;
    transform: scale(1);
}

.aavp-checkbox input:focus-visible + .aavp-checkbox__box {
    outline: 2px solid var(--aavp-accent);
    outline-offset: 2px;
}

.aavp-checkbox__text {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--aavp-ink-soft);
}

.aavp-checkbox__icon {
    color: var(--aavp-muted);
    margin-top: 2px;
}

/* ---------- Actions / buttons ---------- */

.aavp-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.aavp-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    padding: 15px 22px;
    border-radius: var(--aavp-radius-sm);
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform 0.16s var(--aavp-ease), box-shadow 0.16s var(--aavp-ease), opacity 0.16s ease, background-color 0.16s ease;
}

/*
 * BUG FIX: `display: inline-flex` sopra e' una dichiarazione d'autore,
 * che vince SEMPRE sulla regola dello user-agent stylesheet
 * `[hidden] { display: none }`, indipendentemente dalla specificita'.
 * Senza questa regola il pulsante "Indietro" (che in HTML ha
 * l'attributo `hidden` quando siamo sullo step 1) restava visibile.
 */
.aavp-btn[hidden] {
    display: none;
}

.aavp-btn__content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.aavp-btn__icon {
    display: flex;
    transition: transform 0.22s var(--aavp-ease);
}

.aavp-btn--primary {
    margin-left: auto;
    min-width: 168px;
    background: var(--aavp-gradient-accent);
    color: #ffffff;
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--aavp-accent) 65%, transparent), var(--aavp-shadow-sm);
}

.aavp-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -8px color-mix(in srgb, var(--aavp-accent) 70%, transparent), var(--aavp-shadow-sm);
}

.aavp-btn--primary:hover .aavp-btn__icon {
    transform: translateX(3px);
}

.aavp-btn--primary:active {
    transform: translateY(0);
}

.aavp-btn--secondary {
    background-color: var(--aavp-surface-soft);
    color: var(--aavp-ink);
    border: 1.5px solid var(--aavp-border);
}

.aavp-btn--secondary:hover {
    border-color: color-mix(in srgb, var(--aavp-accent) 40%, var(--aavp-border));
    transform: translateY(-1px);
}

.aavp-btn--secondary:hover .aavp-btn__icon {
    transform: translateX(-2px);
}

.aavp-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.aavp-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    animation: aavp-spin 0.7s linear infinite;
}

/* Stesso bug di .aavp-btn sopra: senza questa regola lo spinner restava visibile (e animato) anche a riposo, con l'attributo hidden ignorato. */
.aavp-spinner[hidden] {
    display: none;
}

@keyframes aavp-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Result dashboard ---------- */

.aavp-result {
    animation: aavp-fade-in var(--aavp-transition-duration) var(--aavp-ease) both;
}

.aavp-result__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.aavp-result__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--aavp-ink);
}

/* I badge sono un CONTRATTO, non uno stile chiuso.
 *
 * Colori esposti come custom property: un tema personalizza valorizzando
 * `--aavp-badge-bg` / `--aavp-badge-fg` (che ereditano e NON partecipano alla
 * specificita'), invece di riscrivere queste regole. E' cio' che evita la
 * rincorsa di specificita': non serve piu' vincere la cascata, basta passare
 * un valore.
 *
 * I default sono scelti per superare WCAG AA (>= 4.5:1) alla dimensione reale
 * del badge: 0.74rem con peso 700 NON e' "testo grande", quindi la soglia 3:1
 * non si applica. Il precedente bianco su gradiente corallo dava 3.50:1 al
 * capo scuro e 2.31:1 a quello chiaro: falliva da solo, senza alcun tema.
 * Chi sovrascrive queste property si assume la verifica del contrasto. */
.aavp-result__badge {
    --aavp-badge-bg: #ede5d5;
    --aavp-badge-fg: #6b5528;

    padding: 6px 14px;
    border-radius: 999px;
    background: var(--aavp-badge-bg);
    color: var(--aavp-badge-fg);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.aavp-result__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.aavp-result__card {
    padding: 16px;
    border-radius: var(--aavp-radius-md);
    background-color: var(--aavp-surface-soft);
    border: 1px solid var(--aavp-border);
    text-align: left;
    opacity: 0;
    transform: translateY(6px);
    animation: aavp-card-in 0.5s var(--aavp-ease) forwards;
}

.aavp-result__grid .aavp-result__card:nth-child(1) { animation-delay: 0.02s; }
.aavp-result__grid .aavp-result__card:nth-child(2) { animation-delay: 0.06s; }
.aavp-result__grid .aavp-result__card:nth-child(3) { animation-delay: 0.10s; }
.aavp-result__grid .aavp-result__card:nth-child(4) { animation-delay: 0.14s; }
.aavp-result__grid .aavp-result__card:nth-child(5) { animation-delay: 0.18s; }
.aavp-result__grid .aavp-result__card:nth-child(6) { animation-delay: 0.22s; }

@keyframes aavp-card-in {
    to { opacity: 1; transform: translateY(0); }
}

.aavp-result__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-bottom: 10px;
    border-radius: 8px;
    background-color: var(--aavp-surface);
    color: var(--aavp-accent);
    box-shadow: var(--aavp-shadow-sm);
}

.aavp-result__card-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--aavp-muted);
}

.aavp-result__card-value {
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--aavp-ink);
    line-height: 1.2;
}

.aavp-result__card--highlight {
    background: linear-gradient(155deg, color-mix(in srgb, var(--aavp-accent) 10%, var(--aavp-surface)), color-mix(in srgb, var(--aavp-accent-2) 10%, var(--aavp-surface)));
    border-color: color-mix(in srgb, var(--aavp-accent) 25%, var(--aavp-border));
}

.aavp-result__card--highlight .aavp-result__card-icon {
    background: var(--aavp-gradient-accent);
    color: #ffffff;
    box-shadow: none;
}

/* Grafico prezzo min/consigliato/max */

.aavp-result__chart {
    margin-bottom: 20px;
    padding: 16px;
    border-radius: var(--aavp-radius-md);
    background-color: var(--aavp-surface-soft);
    border: 1px solid var(--aavp-border);
}

.aavp-result__chart-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--aavp-ink);
}

.aavp-result__bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.aavp-result__bar-row:last-child {
    margin-bottom: 0;
}

.aavp-result__bar-label {
    flex: 0 0 84px;
    font-size: 0.76rem;
    font-weight: 650;
    color: var(--aavp-ink-soft);
}

.aavp-result__bar-track {
    flex: 1;
    height: 9px;
    border-radius: 999px;
    background-color: var(--aavp-track);
    overflow: hidden;
}

.aavp-result__bar-fill {
    height: 100%;
    border-radius: 999px;
    width: 0;
    transition: width 0.9s var(--aavp-ease);
}

.aavp-result__bar-fill--min { background-color: var(--aavp-chart-min); }
.aavp-result__bar-fill--avg { background-color: var(--aavp-chart-avg); }
.aavp-result__bar-fill--max { background-color: var(--aavp-chart-max); }

.aavp-result__bar-value {
    flex: 0 0 60px;
    text-align: right;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--aavp-ink);
}

/* Punteggio (gauge) + barra qualita' */

@property --aavp-score {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.aavp-result__score-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
    padding: 16px;
    border-radius: var(--aavp-radius-md);
    background-color: var(--aavp-surface-soft);
    border: 1px solid var(--aavp-border);
}

.aavp-result__score-ring {
    --aavp-score: 0;
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--aavp-accent) calc(var(--aavp-score) * 1%), var(--aavp-track) 0);
    transition: --aavp-score 1.1s var(--aavp-ease);
}

.aavp-result__score-inner {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background-color: var(--aavp-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--aavp-shadow-sm);
}

.aavp-result__score-value {
    font-size: 1.24rem;
    font-weight: 800;
    color: var(--aavp-ink);
    line-height: 1;
}

.aavp-result__score-max {
    font-size: 0.64rem;
    color: var(--aavp-muted);
}

.aavp-result__quality {
    flex: 1;
    min-width: 0;
}

.aavp-result__quality-label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--aavp-ink);
    margin-bottom: 8px;
}

.aavp-result__quality-track {
    height: 9px;
    border-radius: 999px;
    background-color: var(--aavp-track);
    overflow: hidden;
}

.aavp-result__quality-fill {
    height: 100%;
    border-radius: 999px;
    width: 0;
    background: var(--aavp-gradient-bar);
    transition: width 0.9s var(--aavp-ease);
}

/* Consigli automatici */

.aavp-result__recommendations {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.aavp-result__recommendation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 0;
    border-top: 1px solid var(--aavp-border);
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--aavp-ink-soft);
}

.aavp-result__recommendation:first-child {
    border-top: none;
}

.aavp-result__recommendation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 7px;
    background-color: var(--aavp-surface-soft);
    color: var(--aavp-accent);
}

.aavp-result__recommendation-icon .aavp-icon {
    width: 13px;
    height: 13px;
}

/* CTA finale */

.aavp-result__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    border-radius: var(--aavp-radius-sm);
    background: var(--aavp-gradient-accent);
    /* Niente !important: bloccava qualsiasi variante della CTA, compresa
       quella su fondo chiaro della scheda conclusiva, dove il bianco dava
       2.07:1. Il colore del testo appartiene alla variante, non alla base. */
    color: #ffffff;
    font-weight: 750;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--aavp-accent) 65%, transparent);
    transition: transform 0.16s var(--aavp-ease), box-shadow 0.16s var(--aavp-ease);
}

.aavp-result__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -8px color-mix(in srgb, var(--aavp-accent) 70%, transparent);
    color: #ffffff;
}

.aavp-result__cta .aavp-icon {
    transition: transform 0.22s var(--aavp-ease);
}

.aavp-result__cta:hover .aavp-icon {
    transform: translateX(3px);
}

/*
 * ---------- Responsive ----------
 *
 * Basato sulla larghezza REALE del widget (container query), non sul
 * viewport: un widget dentro una colonna Elementor stretta su desktop
 * deve comportarsi come "mobile" a prescindere dallo schermo. I due
 * blocchi @media identici sotto sono un fallback per i browser senza
 * supporto a container query (quota ormai residuale nel 2026: Safari
 * <16, Firefox <110), cosi' il layout resta comunque corretto ovunque.
 */

@container aavp (max-width: 480px) {
    .aavp-amenities {
        grid-template-columns: repeat(2, 1fr);
    }

    .aavp-result__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container aavp (max-width: 360px) {
    .aavp-widget {
        padding: 20px;
        border-radius: var(--aavp-radius-md);
    }

    .aavp-widget__title {
        font-size: 1.25rem;
    }

    .aavp-field-row,
    .aavp-field-row--3 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .aavp-progress__label {
        display: none;
    }

    .aavp-amenities,
    .aavp-result__grid {
        grid-template-columns: 1fr;
    }

    .aavp-result__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .aavp-result__score-row {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .aavp-result__score-ring {
        margin: 0 auto;
    }

    .aavp-result__bar-label {
        flex-basis: 68px;
    }

    .aavp-actions {
        flex-direction: column-reverse;
    }

    .aavp-btn--primary {
        margin-left: 0;
        width: 100%;
    }

    .aavp-btn--secondary {
        width: 100%;
    }
}

@supports not (container-type: inline-size) {
    @media (max-width: 560px) {
        .aavp-amenities {
            grid-template-columns: repeat(2, 1fr);
        }

        .aavp-result__grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 400px) {
        .aavp-widget {
            padding: 20px;
            border-radius: var(--aavp-radius-md);
        }

        .aavp-widget__title {
            font-size: 1.25rem;
        }

        .aavp-field-row,
        .aavp-field-row--3 {
            grid-template-columns: 1fr;
            gap: 0;
        }

        .aavp-progress__label {
            display: none;
        }

        .aavp-amenities,
        .aavp-result__grid {
            grid-template-columns: 1fr;
        }

        .aavp-result__header {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .aavp-result__score-row {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
        }

        .aavp-result__score-ring {
            margin: 0 auto;
        }

        .aavp-result__bar-label {
            flex-basis: 68px;
        }

        .aavp-actions {
            flex-direction: column-reverse;
        }

        .aavp-btn--primary {
            margin-left: 0;
            width: 100%;
        }

        .aavp-btn--secondary {
            width: 100%;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .aavp-widget *,
    .aavp-widget *::before,
    .aavp-widget *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* -------------------------------------------------------------------------
   M2b - risultato guidato dal payload: sezioni e stati vuoti.
   Lo stato vuoto e' una condizione NORMALE (microzona non ancora coperta),
   non un errore: tono secondario, nessun colore d'allarme.
   ------------------------------------------------------------------------- */

.aavp-result__section {
    margin-top: 28px;
}

.aavp-result__section:first-of-type {
    margin-top: 20px;
}

.aavp-result__section-title {
    margin: 0 0 12px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aavp-muted);
}

.aavp-result__empty {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    border: 1px dashed var(--aavp-border);
    border-radius: var(--aavp-radius-md);
    background: var(--aavp-surface-soft);
}

.aavp-result__empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--aavp-ink);
}

.aavp-result__empty-text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--aavp-ink-soft);
}

.aavp-result__metodo-text {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--aavp-ink-soft);
}

.aavp-result__disclaimer {
    margin: 10px 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--aavp-muted);
}

@media (max-width: 600px) {
    .aavp-result__section {
        margin-top: 22px;
    }

    .aavp-result__empty {
        padding: 16px;
    }
}

/* --- M2b: eroe (intervallo annuo) + scenari ------------------------------ */

.aavp-result__hero {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 24px;
    border-radius: var(--aavp-radius-lg);
    background: var(--aavp-surface-soft);
    border: 1px solid var(--aavp-border);
    text-align: center;
}

.aavp-result__hero-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aavp-muted);
}

.aavp-result__hero-range {
    font-size: clamp(1.6rem, 5.5vw, 2.4rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--aavp-ink);
    letter-spacing: -0.02em;
}

.aavp-result__hero-dash {
    color: var(--aavp-accent);
    font-weight: 600;
    padding: 0 2px;
}

.aavp-result__hero-note {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--aavp-ink-soft);
}

.aavp-result__scenari-intro {
    margin: 0 0 12px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--aavp-ink-soft);
}

.aavp-result__scenari {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aavp-result__scenario {
    display: grid;
    grid-template-columns: minmax(88px, auto) 1fr;
    grid-template-areas: "nome range" "nome center";
    align-items: center;
    gap: 2px 14px;
    padding: 14px 16px;
    border: 1px solid var(--aavp-border);
    border-radius: var(--aavp-radius-md);
    background: var(--aavp-surface);
}

.aavp-result__scenario--evidenza {
    border-color: var(--aavp-accent);
    box-shadow: var(--aavp-shadow-sm);
}

.aavp-result__scenario-nome {
    grid-area: nome;
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--aavp-ink);
}

.aavp-result__scenario-range {
    grid-area: range;
    text-align: right;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--aavp-ink);
}

.aavp-result__scenario-center {
    grid-area: center;
    text-align: right;
    font-size: 0.8rem;
    color: var(--aavp-muted);
}

@media (max-width: 600px) {
    .aavp-result__hero {
        padding: 20px 16px;
    }

    .aavp-result__scenario {
        grid-template-columns: 1fr;
        grid-template-areas: "nome" "range" "center";
        gap: 2px;
    }

    .aavp-result__scenario-range,
    .aavp-result__scenario-center {
        text-align: left;
    }
}

/* --- M2b: grafico stagionale a 12 mesi ----------------------------------- */

.aavp-result__chart-frame {
    padding: 18px 12px 12px;
    border: 1px solid var(--aavp-border);
    border-radius: var(--aavp-radius-md);
    background: var(--aavp-surface-soft);
}

.aavp-result__chart-frame--empty {
    padding: 12px;
    background: transparent;
    border-style: dashed;
}

.aavp-result__chart-frame--empty .aavp-result__empty {
    border: 0;
    background: transparent;
    padding: 12px;
}

.aavp-result__months {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: end;
    gap: 4px;
    height: 150px;
}

.aavp-result__month {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
    gap: 6px;
}

.aavp-result__month-bar {
    width: 100%;
    max-width: 26px;
    height: 0;
    min-height: 3px;
    border-radius: 5px 5px 2px 2px;
    background: var(--aavp-gradient-bar);
}

.aavp-result__month-label {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--aavp-muted);
    white-space: nowrap;
}

.aavp-result__chart-caption {
    margin: 10px 0 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--aavp-ink-soft);
}

@media (prefers-reduced-motion: no-preference) {
    .aavp-result__month-bar {
        transition: height var(--aavp-transition-duration) var(--aavp-ease);
    }
}

/* Nascosto agli occhi, NON agli screen reader: display:none lo toglierebbe
   anche alla tecnologia assistiva, che qui e' l'unico modo di leggere i dati. */
.aavp-result__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 600px) {
    .aavp-result__months {
        height: 120px;
        gap: 2px;
    }

    .aavp-result__month-bar {
        max-width: 18px;
    }

    .aavp-result__month-label {
        font-size: 0.58rem;
    }
}

@media (max-width: 380px) {
    /* A larghezze minime l'etichetta a 3 lettere non entra: una sola lettera
       resta leggibile e non spinge il layout in overflow orizzontale. */
    .aavp-result__month-label {
        overflow: hidden;
        max-width: 1ch;
    }
}

/* --- M2b: dettagli (tariffa, occupazione) + badge affidabilita' ---------- */

.aavp-result__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

/* Il badge affidabilita' parla del DATO, non dell'immobile: tono sobrio,
   niente accento che lo farebbe leggere come un premio.

   Le varianti valorizzano il contratto invece di riscrivere le dichiarazioni:
   specificita' singola come la regola base, nessuna escalation. Entrambe le
   coppie superano AA (15.4:1 e 16.8:1) e restano leggibili anche se un tema
   ridefinisce solo uno dei due valori. */
.aavp-result__badge--qualita {
    --aavp-badge-bg: #ede5d5;
    --aavp-badge-fg: #6b5528;
}

.aavp-result__badge--affidabilita {
    --aavp-badge-bg: var(--aavp-ink);
    --aavp-badge-fg: #ffffff;
}

.aavp-result__badge--neutro {
    --aavp-badge-bg: var(--aavp-track);
    --aavp-badge-fg: var(--aavp-ink);
}

.aavp-result__dettagli {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.aavp-result__dettaglio {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1px solid var(--aavp-border);
    border-radius: var(--aavp-radius-md);
    background: var(--aavp-surface);
}

.aavp-result__dettaglio-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--aavp-muted);
}

.aavp-result__dettaglio-range {
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--aavp-ink);
}

.aavp-result__dettaglio-center,
.aavp-result__dettaglio-nota {
    font-size: 0.78rem;
    color: var(--aavp-muted);
}

@media (max-width: 600px) {
    .aavp-result__dettagli {
        grid-template-columns: 1fr;
    }

    .aavp-result__badges {
        justify-content: flex-start;
    }
}

/* --- M2b: punti di forza / da migliorare --------------------------------- */

.aavp-result__punti {
    margin-top: 16px;
}

.aavp-result__punti-titolo {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--aavp-muted);
}

.aavp-result__punti-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aavp-result__punto {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--aavp-ink);
}

.aavp-result__punto-segno {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

/* Segni distinti e leggibili anche senza colore (forma + carattere),
   contrasto AA sul fondo chiaro. */
.aavp-result__punti--forza .aavp-result__punto-segno {
    background: #dff2e6;
    color: #146c43;
}

.aavp-result__punti--forza .aavp-result__punto-segno::before {
    content: "\2713";
}

.aavp-result__punti--debolezze .aavp-result__punto-segno {
    background: #fdeed6;
    color: #8a5300;
}

.aavp-result__punti--debolezze .aavp-result__punto-segno::before {
    content: "\2191";
}

/* --- M2b: provenienza + rifinitura responsive/a11y ----------------------- */

.aavp-result__provenienza {
    margin: 8px 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--aavp-muted);
}

.aavp-result__metodo-text + .aavp-result__metodo-text {
    margin-top: 8px;
}

/* Nello stato vuoto la CTA e' l'unica via di conversione: non deve mai
   scivolare in fondo come una nota a margine. */
.aavp-result__section--metodo + .aavp-result__cta {
    margin-top: 24px;
}

@media (prefers-reduced-motion: reduce) {
    .aavp-result__month-bar {
        transition: none;
    }
}

/* =========================================================================
   M2b — stato "dati di mercato in arrivo".
   Principio: l'assenza di dati e' una FASE del processo, non un guasto.
   Nessun rosso, nessun bordo tratteggiato d'allarme, nessuna icona di
   avviso: tono identico al resto del report, solo in attesa.
   ========================================================================= */

.aavp-arrivo {
    position: relative;
    overflow: hidden;
    padding: 26px 24px;
    border-radius: var(--aavp-radius-lg);
    background: linear-gradient(160deg, #fbf9f5 0%, #f4f1ea 100%);
    border: 1px solid var(--aavp-border);
    text-align: left;
}

/* Alone morbido: da' profondita' senza animare nulla di "in caricamento",
   che suggerirebbe un'attesa di secondi invece che di settimane. */
.aavp-arrivo__glow {
    position: absolute;
    top: -70px;
    right: -50px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 177, 138, 0.28) 0%, rgba(201, 177, 138, 0) 70%);
    pointer-events: none;
}

.aavp-arrivo__icona {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--aavp-surface);
    border: 1px solid var(--aavp-border);
    color: #8a6d3b;
    box-shadow: var(--aavp-shadow-sm);
}

.aavp-arrivo__titolo {
    position: relative;
    margin: 14px 0 6px;
    font-size: 1.16rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--aavp-ink);
}

.aavp-arrivo__testo {
    position: relative;
    margin: 0 0 18px;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--aavp-ink-soft);
    max-width: 62ch;
}

.aavp-arrivo__timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aavp-arrivo__passo {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 7px 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Il filo verticale collega i passi: rende la sequenza un percorso,
   non quattro righe scollegate. */
.aavp-arrivo__passo:not(:last-child) .aavp-arrivo__passo-icona::after {
    content: "";
    position: absolute;
    top: 24px;
    left: 50%;
    width: 1px;
    height: 18px;
    transform: translateX(-50%);
    background: var(--aavp-border);
}

.aavp-arrivo__passo-icona {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--aavp-surface);
    border: 1px solid var(--aavp-border);
}

.aavp-arrivo__passo--fatto .aavp-arrivo__passo-icona {
    background: #dff2e6;
    border-color: #bfe3cd;
    color: #146c43;
}

.aavp-arrivo__passo--fatto .aavp-arrivo__passo-testo {
    color: var(--aavp-ink);
    font-weight: 600;
}

.aavp-arrivo__passo--corso .aavp-arrivo__passo-icona,
.aavp-arrivo__passo--attesa .aavp-arrivo__passo-icona {
    color: #8a6d3b;
}

.aavp-arrivo__passo--corso .aavp-arrivo__passo-icona {
    background: #fdf4e3;
    border-color: #eddcbd;
}

.aavp-arrivo__passo--corso .aavp-arrivo__passo-testo,
.aavp-arrivo__passo--attesa .aavp-arrivo__passo-testo {
    color: var(--aavp-ink-soft);
}

/* --- Sezioni in attesa --------------------------------------------------- */

.aavp-result__section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.aavp-result__section-head .aavp-result__section-title {
    margin: 0;
}

.aavp-attesa-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 8px;
    border-radius: 999px;
    background: var(--aavp-surface-soft);
    border: 1px solid var(--aavp-border);
    color: var(--aavp-ink-soft);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
}

.aavp-attesa-badge__icona {
    display: inline-flex;
    color: var(--aavp-muted);
}

/* L'opacita' e' leggera di proposito: abbastanza da arretrare nella
   gerarchia, non tanto da sembrare disabilitato o rotto. */
.aavp-result__section--attesa .aavp-attesa {
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

/* --- Scheletri ----------------------------------------------------------
   Forme NEUTRE e uniformi: mai altezze variabili o proporzioni che imitino
   una curva reale. Uno scheletro "plausibile" sarebbe un dato inventato in
   forma grafica, che e' esattamente cio' che questo prodotto non fa.
   ------------------------------------------------------------------------ */

.aavp-skel {
    border-radius: 6px;
    background: linear-gradient(90deg, #e9eaf0 0%, #f2f3f7 50%, #e9eaf0 100%);
    background-size: 200% 100%;
}

@media (prefers-reduced-motion: no-preference) {
    .aavp-skel {
        animation: aavp-skel-shimmer 2.6s ease-in-out infinite;
    }
}

@keyframes aavp-skel-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.aavp-skel--riga     { height: 10px; width: 62%; }
.aavp-skel--etichetta{ height: 11px; width: 84px; }
.aavp-skel--valore   { height: 18px; width: 128px; border-radius: 7px; }
.aavp-skel--titolone { height: 34px; width: 72%; border-radius: 10px; }

.aavp-skel-hero {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border-radius: var(--aavp-radius-lg);
    background: var(--aavp-surface-soft);
    border: 1px solid var(--aavp-border);
}

.aavp-skel-scenari {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aavp-skel-scenario {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--aavp-border);
    border-radius: var(--aavp-radius-md);
    background: var(--aavp-surface);
}

.aavp-skel-chart {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: end;
    gap: 4px;
    height: 132px;
    padding: 18px 12px 12px;
    border: 1px solid var(--aavp-border);
    border-radius: var(--aavp-radius-md);
    background: var(--aavp-surface-soft);
}

.aavp-skel--colonna {
    height: 58%;
    width: 100%;
    max-width: 26px;
    margin: 0 auto;
    border-radius: 5px 5px 2px 2px;
}

.aavp-skel-dettagli {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.aavp-skel-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--aavp-border);
    border-radius: var(--aavp-radius-md);
    background: var(--aavp-surface);
}

/* --- Qualita' protagonista ---------------------------------------------- */

.aavp-result__section--protagonista {
    padding: 24px 22px;
    border-radius: var(--aavp-radius-lg);
    background: var(--aavp-surface);
    border: 1px solid var(--aavp-border);
    box-shadow: var(--aavp-shadow-md);
}

.aavp-result__section--protagonista .aavp-result__section-title {
    font-size: 0.86rem;
    color: var(--aavp-ink-soft);
}

.aavp-result__section--protagonista .aavp-result__score-row {
    gap: 22px;
}

.aavp-result__section--protagonista .aavp-result__score-ring {
    transform: scale(1.14);
    transform-origin: left center;
    margin-right: 12px;
}

.aavp-result__section--protagonista .aavp-result__punti {
    margin-top: 20px;
}

/* --- Invito finale ------------------------------------------------------- */

.aavp-invito {
    padding: 26px 24px;
    border-radius: var(--aavp-radius-lg);
    background: linear-gradient(160deg, #16181f 0%, #24272f 100%);
    text-align: center;
}

.aavp-invito__titolo {
    margin: 0 0 8px;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.35;
    color: #ffffff;
}

.aavp-invito__testo {
    margin: 0 0 18px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #d8dae1;
}

@media (max-width: 600px) {
    .aavp-arrivo,
    .aavp-invito {
        padding: 20px 16px;
    }

    .aavp-skel-dettagli {
        grid-template-columns: 1fr;
    }

    .aavp-skel-chart {
        height: 108px;
        gap: 2px;
    }

    .aavp-result__section--protagonista {
        padding: 20px 16px;
    }

    .aavp-result__section--protagonista .aavp-result__score-ring {
        transform: none;
        margin-right: 0;
    }
}

/* Le raccomandazioni ereditano la spaziatura delle liste di punti: prima
   avevano un ritmo verticale proprio e sembravano staccate dal blocco. */
.aavp-result__punti--migliorie .aavp-result__recommendations {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aavp-result__punti--migliorie .aavp-result__recommendation {
    margin: 0;
    padding: 0;
    border: 0;
    gap: 10px;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* =========================================================================
   M2b — rifinitura dello stato senza copertura.
   ========================================================================= */

/* Indicatore neutro dei passi ancora aperti: un punto, non una clessidra.
   La clessidra prometteva un'attesa breve e, ripetuta, sembrava bloccata. */
.aavp-arrivo__punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b6a483;
}

.aavp-arrivo__passo--attesa .aavp-arrivo__punto {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px #c4b697;
}

.aavp-arrivo__passo--corso .aavp-arrivo__passo-icona,
.aavp-arrivo__passo--attesa .aavp-arrivo__passo-icona {
    background: var(--aavp-surface);
    border-color: var(--aavp-border);
}

/* --- Punteggio protagonista --------------------------------------------- */

.aavp-result__section--protagonista .aavp-result__score-row {
    align-items: center;
    gap: 26px;
    padding: 4px 0 2px;
    background: transparent;
    border: 0;
}

.aavp-result__section--protagonista .aavp-result__score-ring {
    transform: none;
    margin-right: 0;
    width: 132px;
    height: 132px;
    flex: 0 0 132px;
}

.aavp-result__section--protagonista .aavp-result__score-value {
    font-size: 3.1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.aavp-result__section--protagonista .aavp-result__score-max {
    font-size: 0.78rem;
    color: var(--aavp-muted);
}

/* Il verdetto e' la lettura umana del numero: deve reggere il confronto
   con le 3.1rem del punteggio, non sussurrare sotto la barra. */
.aavp-result__quality-verdetto {
    display: block;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--aavp-ink);
    text-transform: capitalize;
}

.aavp-result__quality-sub {
    display: block;
    margin-top: 2px;
    margin-bottom: 12px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aavp-muted);
}

/* Barra in palette AirAffitti (beige/oro).
   WCAG 1.4.11 chiede >= 3:1 fra un componente non testuale e cio' che gli
   sta intorno: il gradiente e' misurato su ENTRAMBI gli estremi contro la
   traccia #EDE5D5 — #8a7040 da' 3.75:1 e #6b5528 da' 5.67:1. Il beige-oro
   di marca #9c8352 si fermava a 2.90:1 e non poteva restare. */
.aavp-result__section--protagonista .aavp-result__quality-track {
    height: 10px;
    border-radius: 999px;
    background: #ede5d5;
    box-shadow: inset 0 0 0 1px rgba(120, 100, 62, 0.22);
    overflow: hidden;
}

.aavp-result__section--protagonista .aavp-result__quality-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #8a7040 0%, #6b5528 100%);
}

@media (prefers-reduced-motion: no-preference) {
    .aavp-result__section--protagonista .aavp-result__quality-fill {
        transition: width 1100ms var(--aavp-ease);
    }

    /* Ingresso lieve: il blocco sale di 10px mentre compare. Nessun effetto
       sulla posizione finale, quindi non genera layout shift. */
    .aavp-result__section--protagonista {
        animation: aavp-entra 620ms var(--aavp-ease) both;
    }
}

@keyframes aavp-entra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Migliorie: titolo + beneficio -------------------------------------- */

.aavp-migliora-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aavp-migliora {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid var(--aavp-border);
    border-radius: var(--aavp-radius-md);
    background: var(--aavp-surface);
}

.aavp-migliora__icona {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #f6efe2;
    color: #7a6432;
}

.aavp-migliora__icona .aavp-icon {
    width: 15px;
    height: 15px;
}

.aavp-migliora__corpo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.aavp-migliora__titolo {
    font-size: 0.93rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--aavp-ink);
}

.aavp-migliora__beneficio {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--aavp-ink-soft);
}

/* --- Skeleton piu' leggeri ----------------------------------------------
   Piu' bassi, meno contrastati e con uno shimmer lento: devono leggersi
   come contenuto in attesa, non come un caricamento che arranca.
   ------------------------------------------------------------------------ */

.aavp-skel {
    background: linear-gradient(90deg, #eef0f4 0%, #f5f6f9 50%, #eef0f4 100%);
    background-size: 200% 100%;
}

@media (prefers-reduced-motion: no-preference) {
    .aavp-skel {
        animation-duration: 4.2s;
    }
}

.aavp-skel--riga      { height: 8px; }
.aavp-skel--etichetta { height: 9px; }
.aavp-skel--valore    { height: 14px; }
.aavp-skel--titolone  { height: 28px; }

.aavp-skel-scenario { padding: 13px 14px; }
.aavp-skel-card     { padding: 14px; gap: 8px; }

.aavp-skel-chart {
    height: 108px;
    padding: 16px 12px 10px;
}

.aavp-skel--colonna {
    height: 46%;
    max-width: 22px;
}

.aavp-result__section--attesa .aavp-attesa {
    opacity: 0.48;
}

@media (max-width: 600px) {
    .aavp-result__section--protagonista .aavp-result__score-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .aavp-result__section--protagonista .aavp-result__score-ring {
        width: 116px;
        height: 116px;
        flex-basis: 116px;
    }

    .aavp-result__section--protagonista .aavp-result__score-value {
        font-size: 2.7rem;
    }

    .aavp-result__quality {
        width: 100%;
    }
}

/* =========================================================================
   REPORT — direzione artistica.
   Obiettivo: far leggere il risultato come un documento di consulenza, non
   come una dashboard. Le leve sono quattro: una scala tipografica ristretta,
   molto respiro, ombre calde a bassissimo contrasto e UNA sola famiglia
   cromatica (beige/avorio/antracite). Nessun colore di stato acceso: in un
   report professionale l'informazione la porta la gerarchia, non il semaforo.
   Palette esclusiva: beige AirAffitti, bianco, antracite, nero.
   ========================================================================= */

.aavp-widget {
    --aar-avorio: #faf6ef;
    --aar-beige-chiaro: #ede5d5;
    --aar-beige: #c9b18a;
    --aar-oro: #6b5528;
    --aar-oro-soft: #8a7040;
    --aar-antracite: #14181d;
    --aar-nero: #0b0d10;

    /* Tre livelli di inchiostro: titolo, corpo, didascalia. Tutti verificati
       >= 4.5:1 su bianco e su avorio. */
    --aar-ink-1: #14181d;
    --aar-ink-2: #4a4e56;
    --aar-ink-3: #6e727a;

    --aar-linea: rgba(20, 24, 29, 0.10);
    --aar-linea-forte: rgba(20, 24, 29, 0.16);

    /* Ombre CALDE (base bruna, non grigia): su fondo avorio un'ombra neutra
       vira al bluastro e tradisce subito l'origine "interfaccia". */
    --aar-ombra-1: 0 1px 2px rgba(46, 36, 18, 0.05);
    --aar-ombra-2: 0 14px 34px -14px rgba(46, 36, 18, 0.18);
    --aar-ombra-3: 0 30px 64px -22px rgba(46, 36, 18, 0.24);

    --aar-r-s: 10px;
    --aar-r-m: 16px;
    --aar-r-l: 24px;
}

/* ---- Ritmo verticale ----------------------------------------------------
   Il respiro fra i blocchi passa da 28 a 44px: e' la differenza percettiva
   principale fra "righe di una tabella" e "sezioni di un documento". */
.aavp-result__section {
    margin-top: 44px;
}

.aavp-result__section:first-of-type {
    margin-top: 28px;
}

/* Etichetta di sezione come occhiello di un report stampato: piccola, in
   maiuscoletto spaziato, mai in grassetto pesante. Arretra rispetto al
   contenuto invece di competerci. */
.aavp-result__section-title {
    margin: 0 0 14px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--aar-ink-3);
}

.aavp-result__section-head {
    align-items: baseline;
    gap: 10px 14px;
    margin-bottom: 14px;
}

/* ---- Badge di stato -----------------------------------------------------
   Due registri distinti senza usare il colore come unico segnale: il badge
   qualita' e' pieno (beige), quello di copertura e' un contorno sottile.
   Pieno = verdetto acquisito, contorno = informazione di contesto. */
.aavp-result__badge {
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.35;
    box-shadow: none;
}

.aavp-result__badge--neutro {
    --aavp-badge-bg: transparent;
    --aavp-badge-fg: var(--aar-ink-2);
    box-shadow: inset 0 0 0 1px var(--aar-linea-forte);
}

.aavp-result__badges {
    gap: 8px;
}

/* ---- Pannello di apertura ----------------------------------------------- */

.aavp-result__section--arrivo {
    margin-top: 26px;
}

.aavp-arrivo {
    padding: 34px 32px;
    border-radius: var(--aar-r-l);
    background:
        radial-gradient(120% 100% at 88% -10%, rgba(201, 177, 138, 0.20) 0%, rgba(201, 177, 138, 0) 58%),
        linear-gradient(168deg, #fdfbf7 0%, #f6f1e7 100%);
    border: 1px solid var(--aar-linea);
    box-shadow: var(--aar-ombra-1);
}

/* L'alone diffuso sostituisce il cerchio netto: una sfumatura ampia legge
   come carta stampata, un cerchio visibile come elemento di UI. */
.aavp-arrivo__glow {
    display: none;
}

.aavp-arrivo__icona {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--aar-bianco, #ffffff);
    border: 1px solid var(--aar-linea);
    color: var(--aar-oro);
    box-shadow: var(--aar-ombra-1);
}

.aavp-arrivo__titolo {
    margin: 18px 0 8px;
    font-size: 1.34rem;
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.28;
    color: var(--aar-ink-1);
}

.aavp-arrivo__testo {
    margin: 0 0 26px;
    font-size: 0.97rem;
    line-height: 1.68;
    color: var(--aar-ink-2);
    max-width: 58ch;
}

/* ---- Timeline -----------------------------------------------------------
   Deve leggersi come avanzamento, non come elenco disabilitato. Percio':
   binario continuo che collega i passi, pastiglia piena sui completati e
   anello sottile sui successivi. La differenza e' di PESO, non di opacita':
   abbassare l'opacita' e' esattamente cio' che fa sembrare "disattivato". */
.aavp-arrivo__timeline {
    gap: 0;
    padding-left: 2px;
}

.aavp-arrivo__passo {
    position: relative;
    gap: 14px;
    padding: 11px 0;
    font-size: 0.93rem;
    line-height: 1.5;
}

.aavp-arrivo__passo-icona {
    width: 24px;
    height: 24px;
    background: #ffffff;
    border: 1px solid var(--aar-linea-forte);
    box-shadow: var(--aar-ombra-1);
    z-index: 1;
}

.aavp-arrivo__passo:not(:last-child) .aavp-arrivo__passo-icona::after {
    top: 25px;
    height: calc(100% - 4px);
    background: var(--aar-linea-forte);
}

/* Completato: pastiglia antracite piena, spunta bianca. Massimo peso. */
.aavp-arrivo__passo--fatto .aavp-arrivo__passo-icona {
    background: var(--aar-antracite);
    border-color: var(--aar-antracite);
    color: #ffffff;
}

.aavp-arrivo__passo--fatto .aavp-arrivo__passo-testo {
    color: var(--aar-ink-1);
    font-weight: 650;
}

/* In corso: anello beige pieno — attivo ma non concluso. */
.aavp-arrivo__passo--corso .aavp-arrivo__passo-icona {
    background: #ffffff;
    border-color: var(--aar-beige);
    box-shadow: var(--aar-ombra-1), 0 0 0 3px rgba(201, 177, 138, 0.18);
}

.aavp-arrivo__passo--corso .aavp-arrivo__punto {
    width: 8px;
    height: 8px;
    background: var(--aar-oro-soft);
}

.aavp-arrivo__passo--corso .aavp-arrivo__passo-testo {
    color: var(--aar-ink-1);
    font-weight: 600;
}

/* Successivo: anello sottile, punto cavo. Presente, non spento. */
.aavp-arrivo__passo--attesa .aavp-arrivo__punto {
    width: 8px;
    height: 8px;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--aar-beige);
}

.aavp-arrivo__passo--attesa .aavp-arrivo__passo-testo {
    color: var(--aar-ink-2);
}

/* ---- Card "Qualita' immobile" ------------------------------------------
   E' il cuore del documento quando manca il mercato: piu' generosa di tutto
   il resto (padding, raggio, ombra) perche' la gerarchia si costruisce con
   lo spazio prima che con la dimensione del carattere. */
.aavp-result__section--protagonista {
    padding: 34px 32px;
    border-radius: var(--aar-r-l);
    background: #ffffff;
    border: 1px solid var(--aar-linea);
    box-shadow: var(--aar-ombra-2);
}

.aavp-result__section--protagonista .aavp-result__score-row {
    gap: 30px;
    padding: 0 0 26px;
    border-bottom: 1px solid var(--aar-linea);
    margin-bottom: 26px;
}

.aavp-result__section--protagonista .aavp-result__score-value {
    font-size: 3.35rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--aar-ink-1);
}

.aavp-result__section--protagonista .aavp-result__score-max {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: var(--aar-ink-3);
}

.aavp-result__quality-verdetto {
    font-size: 1.42rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--aar-ink-1);
}

.aavp-result__quality-sub {
    margin-bottom: 14px;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    color: var(--aar-ink-3);
}

.aavp-result__section--protagonista .aavp-result__quality-track {
    height: 8px;
    background: var(--aar-beige-chiaro);
    box-shadow: inset 0 0 0 1px rgba(107, 85, 40, 0.14);
}

.aavp-result__section--protagonista .aavp-result__quality-fill {
    background: linear-gradient(90deg, var(--aar-oro-soft) 0%, var(--aar-oro) 100%);
}

/* ---- Liste forza / criticita' ------------------------------------------
   Fuori palette c'erano un verde e un ambra da semaforo. Distinguiamo per
   FORMA (pastiglia piena vs contorno) e per glifo, non per tinta: resta
   leggibile anche a chi non distingue i colori, e smette di sembrare un
   pannello di monitoraggio. */
.aavp-result__punti {
    margin-top: 22px;
}

.aavp-result__punti-titolo {
    margin: 0 0 10px;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    color: var(--aar-ink-3);
}

.aavp-result__punto {
    gap: 11px;
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--aar-ink-1);
}

.aavp-result__punto-segno {
    width: 19px;
    height: 19px;
    margin-top: 1px;
    font-size: 0.66rem;
}

.aavp-result__punti--forza .aavp-result__punto-segno {
    background: var(--aar-antracite);
    color: #ffffff;
}

.aavp-result__punti--debolezze .aavp-result__punto-segno {
    background: transparent;
    color: var(--aar-oro);
    box-shadow: inset 0 0 0 1.5px var(--aar-beige);
}

/* ---- Migliorie ----------------------------------------------------------
   Da elenco puntato a schede: ognuna e' un'azione con la sua resa. Il bordo
   sottile e il fondo avorio le rendono "schede di raccomandazione", che e'
   il linguaggio dei report di consulenza. */
.aavp-migliora-lista {
    gap: 10px;
}

.aavp-migliora {
    gap: 13px;
    padding: 15px 16px;
    border: 1px solid var(--aar-linea);
    border-radius: var(--aar-r-m);
    background: var(--aar-avorio);
    box-shadow: none;
    transition: box-shadow 220ms var(--aavp-ease), border-color 220ms var(--aavp-ease);
}

.aavp-migliora:hover {
    border-color: var(--aar-linea-forte);
    box-shadow: var(--aar-ombra-1);
}

.aavp-migliora__icona {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid var(--aar-linea);
    color: var(--aar-oro);
}

.aavp-migliora__titolo {
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1.45;
    color: var(--aar-ink-1);
}

.aavp-migliora__beneficio {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--aar-ink-2);
}

/* ---- Sezioni in attesa --------------------------------------------------
   L'opacita' scende ancora un po' MA il badge resta a piena leggibilita':
   e' il contenuto a essere in attesa, non l'etichetta che lo spiega. */
.aavp-attesa-badge {
    padding: 5px 12px 5px 9px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--aar-linea-forte);
    color: var(--aar-ink-2);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.aavp-attesa-badge__icona {
    color: var(--aar-ink-3);
}

.aavp-result__section--attesa .aavp-attesa {
    opacity: 0.42;
}

.aavp-skel {
    border-radius: 5px;
    background: linear-gradient(90deg, #ece7dd 0%, #f5f1e9 50%, #ece7dd 100%);
    background-size: 200% 100%;
}

.aavp-skel-scenario,
.aavp-skel-card,
.aavp-skel-chart,
.aavp-skel-hero {
    border-radius: var(--aar-r-m);
    border-color: var(--aar-linea);
    background: var(--aar-avorio);
}

/* ---- Metodologia --------------------------------------------------------
   Corpo del testo piu' arioso: 1.7 di interlinea e misura corta sono le due
   scelte che piu' fanno leggere un paragrafo come "documento". */
.aavp-result__metodo-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--aar-ink-2);
    max-width: 62ch;
}

.aavp-result__provenienza,
.aavp-result__disclaimer {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--aar-ink-3);
    max-width: 62ch;
}

.aavp-result__disclaimer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--aar-linea);
}

/* ---- CTA come scheda ----------------------------------------------------
   Non un bottone in coda ma una scheda conclusiva: in un report la richiesta
   di contatto e' una sezione, non un controllo. Fondo antracite per chiudere
   il documento con un blocco pieno, che da' peso e senso di finale. */
.aavp-result__section--invito {
    margin-top: 46px;
}

.aavp-invito {
    padding: 38px 34px;
    border-radius: var(--aar-r-l);
    background:
        radial-gradient(110% 120% at 50% -20%, rgba(201, 177, 138, 0.16) 0%, rgba(201, 177, 138, 0) 60%),
        linear-gradient(168deg, var(--aar-antracite) 0%, var(--aar-nero) 100%);
    box-shadow: var(--aar-ombra-3);
    text-align: center;
}

.aavp-invito__titolo {
    margin: 0 0 12px;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.32;
    color: #ffffff;
}

.aavp-invito__testo {
    margin: 0 auto 26px;
    max-width: 46ch;
    font-size: 0.94rem;
    line-height: 1.65;
    color: #cfd2d8;
}

.aavp-invito .aavp-result__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 999px;
    background: linear-gradient(168deg, #e2d3b6 0%, var(--aar-beige) 100%);
    color: var(--aar-nero);
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0.005em;
    text-decoration: none;
    box-shadow: 0 10px 26px -12px rgba(201, 177, 138, 0.75);
    transition: transform 220ms var(--aavp-ease), box-shadow 220ms var(--aavp-ease);
}

.aavp-invito .aavp-result__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px -14px rgba(201, 177, 138, 0.9);
}

.aavp-invito .aavp-result__cta .aavp-icon {
    width: 17px;
    height: 17px;
    stroke-width: 2;
}

/* ---- Tablet ------------------------------------------------------------- */
@media (max-width: 900px) {
    .aavp-result__section { margin-top: 38px; }
    .aavp-arrivo { padding: 30px 26px; }
    .aavp-result__section--protagonista { padding: 30px 26px; }
    .aavp-invito { padding: 34px 28px; }
}

/* ---- Smartphone --------------------------------------------------------- */
@media (max-width: 600px) {
    .aavp-result__section { margin-top: 32px; }

    .aavp-arrivo {
        padding: 26px 20px;
        border-radius: 20px;
    }

    .aavp-arrivo__titolo { font-size: 1.2rem; }
    .aavp-arrivo__testo { margin-bottom: 22px; }

    .aavp-result__section--protagonista {
        padding: 26px 20px;
        border-radius: 20px;
    }

    .aavp-result__section--protagonista .aavp-result__score-row {
        gap: 20px;
        padding-bottom: 22px;
        margin-bottom: 22px;
    }

    .aavp-result__section--protagonista .aavp-result__score-value {
        font-size: 2.9rem;
    }

    .aavp-result__quality-verdetto { font-size: 1.28rem; }

    .aavp-invito {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .aavp-invito__titolo { font-size: 1.16rem; }

    .aavp-invito .aavp-result__cta {
        width: 100%;
        padding: 15px 20px;
    }
}

/* ---- Ring del punteggio (scope protagonista) ----------------------------
   Il CSS del sito azzera il gradiente conico e lascia un cerchio uniforme:
   il punteggio perdeva la sua rappresentazione visiva proprio dove e' il
   soggetto della pagina. Qui l'arco torna, in oro su traccia beige — due
   valori della stessa famiglia, nessun colore di stato.
   La regola vive nello scope `--protagonista` (due classi): vince per
   struttura, non per una specificita' aggiunta apposta. */
.aavp-result__section--protagonista .aavp-result__score-ring {
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background-image: conic-gradient(
        var(--aar-oro) calc(var(--aavp-score, 0) * 1%),
        var(--aar-beige-chiaro) 0
    );
    box-shadow: inset 0 0 0 1px rgba(107, 85, 40, 0.10);
}

@media (prefers-reduced-motion: no-preference) {
    .aavp-result__section--protagonista .aavp-result__score-ring {
        transition: background-image 900ms var(--aavp-ease);
    }
}

/* Disco interno: lascia allo scoperto una corona di 11px. Sottile abbastanza
   da sembrare un dettaglio grafico, non un donut chart da dashboard. */
.aavp-result__section--protagonista .aavp-result__score-inner {
    width: calc(100% - 22px);
    height: calc(100% - 22px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: var(--aar-ombra-1);
}

/* La card qualita' era un riquadro bianco dentro un riquadro bianco: due
   bordi concentrici a 2px di distanza leggono come un errore di layout.
   Qui il verdetto vive direttamente sulla carta della sezione. */
.aavp-result__section--protagonista .aavp-result__quality {
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
    min-width: 0;
}

/* Il disco interno deve essere un CERCHIO, non il riquadro del testo: come
   figlio di una griglia centrata si riduceva al contenuto (43x93) e l'anello
   diventava una torta. Posizionamento assoluto con inset uniforme: la corona
   resta di 11px esatti su tutti i lati, a qualsiasi diametro. */
.aavp-result__section--protagonista .aavp-result__score-ring {
    position: relative;
}

.aavp-result__section--protagonista .aavp-result__score-inner {
    position: absolute;
    inset: 11px;
    width: auto;
    height: auto;
    gap: 2px;
}

/* "/100" e' un'unita' di misura, non un dato: sta sotto il numero, piu'
   piccola e arretrata, senza toccarne la linea di base. */
.aavp-result__section--protagonista .aavp-result__score-value {
    line-height: 0.95;
}

.aavp-result__section--protagonista .aavp-result__score-max {
    margin-top: 3px;
    font-weight: 600;
}

/* Default del plugin in palette AirAffitti: il beige-corallo precedente
   (#f4ded9/#8c2f22) era fuori dai quattro colori ammessi. #6b5528 su
   #ede5d5 = 5.67:1, sopra AA. */

/* Il testo della CTA nella scheda conclusiva e' antracite su beige: il
   sistema di bottoni del sito impone il bianco, che su questo fondo chiaro
   dava 2.07:1. Coprendo anche span e icona (che ereditano da regole loro)
   il contrasto sale a oltre 9:1. */
.aavp-invito .aavp-result__cta,
.aavp-invito .aavp-result__cta span,
.aavp-invito .aavp-result__cta .aavp-icon {
    color: var(--aar-nero);
    stroke: currentColor;
}

/* Su mobile la colonna del punteggio va centrata come il resto della card:
   l'anello restava allineato a destra (eredita l'allineamento della riga
   orizzontale) e spezzava l'asse verticale della composizione. */
@media (max-width: 600px) {
    .aavp-result__section--protagonista .aavp-result__score-row {
        align-items: center;
        text-align: center;
    }

    .aavp-result__section--protagonista .aavp-result__score-ring {
        margin-left: auto;
        margin-right: auto;
    }

    .aavp-result__quality-verdetto,
    .aavp-result__quality-sub {
        text-align: center;
    }
}

/* =========================================================================
   Superficie del report.
   Il pannello del widget porta due wash radiali costruiti su --aavp-accent
   (corallo): sotto il wizard fanno parte del design system del plugin e
   restano intatti, ma dietro il report tingono di rosa la carta e sono la
   cosa piu' lontana da un documento di consulenza.
   Il `:has()` limita l'intervento alla SOLA schermata di risultato: quando
   il risultato e' visibile la superficie diventa avorio neutro, il wizard
   non viene toccato e il token --aavp-accent non viene ridefinito.
   ========================================================================= */

.aavp-widget:has(> [data-result]:not([hidden])) {
    background-image:
        radial-gradient(78% 62% at 50% -8%, rgba(201, 177, 138, 0.16) 0%, rgba(201, 177, 138, 0) 62%),
        linear-gradient(180deg, #fdfbf7 0%, var(--aar-avorio, #faf6ef) 100%);
}

/* Ripiego per i browser senza :has(): la superficie resta quella del
   design system invece di rompersi. Nessuna regressione, solo il wash
   corallo che sopravvive dove :has() non e' disponibile. */
@supports not selector(:has(*)) {
    .aavp-widget {
        background-image:
            radial-gradient(60% 60% at 25% 0%, color-mix(in srgb, var(--aavp-accent) 10%, transparent), transparent 70%),
            radial-gradient(50% 50% at 95% 0%, color-mix(in srgb, var(--aavp-accent-2) 8%, transparent), transparent 70%);
    }
}

/* =========================================================================
   REFINEMENT — passaggio 1: sistema.
   Raggi, superfici, bordi e icone erano valori accumulati nel tempo, non una
   scala. Un occhio esperto non legge il singolo valore: legge l'incoerenza
   fra valori vicini (16 accanto a 14, 10 accanto a 12) e la registra come
   sciatteria. Qui si fissa una scala e la si applica ovunque.
   ========================================================================= */

.aavp-widget {
    /* Scala armonica: ogni gradino e' ~1.5x il precedente. Nessun valore
       intermedio ammesso — se un elemento "sta in mezzo", sceglie il gradino
       piu' vicino al proprio ruolo, non un numero nuovo. */
    --aar-r-xs: 8px;
    --aar-r-s: 12px;
    --aar-r-m: 18px;
    --aar-r-l: 26px;
    --aar-r-pill: 999px;

    /* Ombre a due strati: un contatto stretto che àncora l'elemento alla
       carta + una diffusione ampia e tenue. L'ombra a un solo strato
       (0 1px 2px) e' la firma visiva dei pannelli amministrativi. */
    --aar-ombra-1:
        0 1px 1px rgba(46, 36, 18, 0.04),
        0 2px 8px -3px rgba(46, 36, 18, 0.07);
    --aar-ombra-2:
        0 1px 2px rgba(46, 36, 18, 0.05),
        0 18px 42px -20px rgba(46, 36, 18, 0.20);
    --aar-ombra-3:
        0 2px 4px rgba(46, 36, 18, 0.06),
        0 38px 76px -30px rgba(46, 36, 18, 0.30);
}

/* ---- Raggi coerenti ---- */
.aavp-arrivo,
.aavp-result__section--protagonista,
.aavp-invito {
    border-radius: var(--aar-r-l);
}

.aavp-migliora,
.aavp-skel-scenario,
.aavp-skel-card,
.aavp-skel-chart,
.aavp-skel-hero {
    border-radius: var(--aar-r-m);
}

.aavp-arrivo__icona,
.aavp-migliora__icona {
    border-radius: var(--aar-r-s);
}

.aavp-skel {
    border-radius: var(--aar-r-xs);
}

/* ---- Un solo linguaggio di superficie ----
   Le card che stanno DENTRO un pannello non portano ombra: due livelli di
   ombra annidati appiattiscono la gerarchia invece di costruirla. Dentro si
   usa il bordo hairline, fuori l'ombra. */
.aavp-arrivo {
    box-shadow: var(--aar-ombra-1);
}

.aavp-migliora,
.aavp-skel-scenario,
.aavp-skel-card,
.aavp-skel-chart {
    box-shadow: none;
}

/* Le icone contenute (pastiglie quadrate) prendono un contatto minimo:
   basta a staccarle dal fondo senza aggiungere un secondo livello. */
.aavp-arrivo__icona,
.aavp-migliora__icona,
.aavp-arrivo__passo-icona,
.aavp-result__score-inner {
    box-shadow: 0 1px 2px rgba(46, 36, 18, 0.06);
}

/* ---- Peso ottico unico delle icone ----
   C'erano cinque combinazioni dimensione/spessore. Lo spessore si normalizza
   qui perche' CSS batte l'attributo di presentazione dell'SVG: un solo peso
   per tutto il report, dimensioni sulla scala. */
.aavp-result__section .aavp-icon,
.aavp-arrivo .aavp-icon,
.aavp-invito .aavp-icon {
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
}

/* La spunta e' l'unica che resta piu' marcata: e' piccola (13px) e a 1.6
   perderebbe leggibilita' dentro la pastiglia scura. 1.9 a 13px ha lo stesso
   peso OTTICO di 1.6 a 18px — la coerenza e' percettiva, non aritmetica. */
.aavp-arrivo__passo--fatto .aavp-icon,
.aavp-result__punto-segno .aavp-icon {
    stroke-width: 1.9;
}

.aavp-arrivo__icona .aavp-icon { width: 20px; height: 20px; }
.aavp-migliora__icona .aavp-icon { width: 16px; height: 16px; }
.aavp-attesa-badge__icona .aavp-icon { width: 14px; height: 14px; }

/* ---- CTA: riallineata al linguaggio del report ----
   Il sistema di bottoni del sito le applicava raggio 14px, bordo bianco al
   50% e un inset chiaro: un vetro pensato per fondi chiari, appoggiato su
   antracite. Qui diventa una pastiglia piena, coerente con i badge. */
.aavp-invito .aavp-result__cta {
    border-radius: var(--aar-r-pill);
    border: 0;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45) inset,
        0 12px 28px -14px rgba(0, 0, 0, 0.55);
}

/* ---- Badge su griglia intera ----
   Il padding in em produceva 4.7px / 11.76px: valori che non si allineano a
   nulla. In px il badge si appoggia alla stessa griglia di tutto il resto. */
.aavp-result__badge {
    padding: 6px 12px;
}

/* =========================================================================
   REFINEMENT — passaggio 2: residui del sistema, ritmo, allineamenti.
   ========================================================================= */

/* ---- Residuo 1: raggio della CTA ----
   Il sistema di bottoni del sito impone 14px con !important, gonfiando la
   specificita' con `:not(#aa)`. A un !important si risponde solo con un
   !important: qui e' circoscritto al pannello dell'invito e motivato — una
   pastiglia accanto a badge a pastiglia, non un rettangolo arrotondato in
   mezzo a forme tonde. */
.aavp-invito .aavp-result__cta {
    border-radius: var(--aar-r-pill) !important;
}

/* ---- Residuo 2: padding del badge ----
   Il CSS del sito lo esprime in em (0.42em/1.05em -> 4.7px/11.76px) e vince
   per ordine di caricamento. Lo scope sull'header riporta il badge sulla
   griglia intera senza toccare la regola del sito. */
.aavp-result__header .aavp-result__badge {
    padding: 6px 12px;
}

/* ---- Residuo 3: peso dell'icona nella CTA ----
   Era rimasta a 2 da una regola precedente, unico peso fuori scala del
   report. */
.aavp-invito .aavp-result__cta .aavp-icon {
    stroke-width: 1.6;
    width: 16px;
    height: 16px;
}

/* ---- Ritmo verticale su una scala sola ----
   Le distanze erano 44 / 26 / 22 / 14: numeri vicini che l'occhio legge come
   imprecisione. Scala a passo 8 (8/16/24/32/48): i salti diventano
   riconoscibili e il documento acquista cadenza. */
.aavp-result__section {
    margin-top: 48px;
}

.aavp-result__section--arrivo {
    margin-top: 24px;
}

.aavp-result__section-title,
.aavp-result__section-head {
    margin-bottom: 16px;
}

.aavp-arrivo__titolo {
    margin: 16px 0 8px;
}

.aavp-arrivo__testo {
    margin-bottom: 24px;
}

.aavp-result__punti {
    margin-top: 24px;
}

.aavp-result__punti-titolo {
    margin-bottom: 12px;
}

/* ---- Allineamento ottico dei bordi ----
   Le sezioni in attesa non hanno padding, quelle a pannello si': i titoli
   cadevano su due assi verticali diversi a poche decine di pixel l'uno
   dall'altro. Un titolo di sezione fuori pannello si allinea al bordo del
   testo, non al bordo della card. */
.aavp-result__section--attesa .aavp-result__section-head,
.aavp-result__section--metodo .aavp-result__section-title {
    padding-left: 2px;
}

/* ---- Separazione dei blocchi in attesa ----
   Titolo, badge e scheletro erano equidistanti: il badge sembrava
   appartenere allo scheletro invece che alla sezione. Legandolo al titolo e
   allontanando lo scheletro, la gerarchia si legge senza pensarci. */
.aavp-result__section--attesa .aavp-attesa {
    margin-top: 4px;
}

/* ---- Misura e interlinea ----
   Il corpo del testo scende a 60ch e sale a 1.72 di interlinea: sono i due
   parametri che fanno leggere un paragrafo come pagina stampata invece che
   come blocco di interfaccia. */
.aavp-arrivo__testo,
.aavp-result__metodo-text {
    max-width: 60ch;
    line-height: 1.72;
}

/* ---- Proporzione del verdetto ----
   Numero 3.35rem e verdetto 1.42rem stavano in rapporto 2.36: troppo vicini
   per essere gerarchia, troppo lontani per essere coppia. A 1.5rem il
   rapporto scende a 2.23 e il verdetto regge lo sguardo accanto al numero
   invece di sembrarne la didascalia. */
.aavp-result__quality-verdetto {
    font-size: 1.5rem;
    line-height: 1.18;
}

.aavp-result__quality-sub {
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .aavp-result__section { margin-top: 32px; }
    .aavp-result__section--arrivo { margin-top: 20px; }
    .aavp-result__quality-verdetto { font-size: 1.32rem; }
}

/* =========================================================================
   REFINEMENT — passaggio 3: movimento, stati, ultimi residui.
   ========================================================================= */

/* Il ritmo della prima sezione era sovrascritto da :first-of-type (28px)
   che vinceva per ordine sulla regola del pannello di apertura. */
.aavp-result__section--arrivo:first-of-type {
    margin-top: 24px;
}

/* ---- Un solo easing, tre durate ----
   Le transizioni usavano 0.16s, 220ms, 900ms, 1100ms con curve diverse: il
   movimento sembrava scritto da mani diverse. Una curva sola (decelerazione
   naturale) e tre durate con un ruolo preciso: reazione al puntatore,
   cambio di stato, ingresso di contenuto. */
.aavp-widget {
    --aar-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --aar-t-rapido: 180ms;
    --aar-t-medio: 340ms;
    --aar-t-lento: 720ms;
}

.aavp-migliora {
    transition:
        border-color var(--aar-t-rapido) var(--aar-ease),
        box-shadow var(--aar-t-rapido) var(--aar-ease),
        transform var(--aar-t-rapido) var(--aar-ease);
}

/* Hover: sollevamento di 1px. Oltre i 2px il movimento diventa "web app";
   1px legge come reazione tattile della carta. */
.aavp-migliora:hover {
    transform: translateY(-1px);
    border-color: rgba(20, 24, 29, 0.18);
    box-shadow: var(--aar-ombra-1);
}

.aavp-invito .aavp-result__cta {
    transition:
        transform var(--aar-t-rapido) var(--aar-ease),
        box-shadow var(--aar-t-rapido) var(--aar-ease),
        filter var(--aar-t-rapido) var(--aar-ease);
}

.aavp-invito .aavp-result__cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

.aavp-invito .aavp-result__cta:active {
    transform: translateY(0);
    transition-duration: 90ms;
}

/* ---- Focus visibile e coerente ----
   Non c'era uno stato focus proprio: l'utente da tastiera vedeva l'outline
   di sistema, diverso su ogni browser. Un anello beige a doppio strato resta
   visibile sia su carta chiara sia sul pannello antracite. */
.aavp-result__section a:focus-visible,
.aavp-result__section .aavp-result__cta:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px var(--aar-oro);
    border-radius: var(--aar-r-pill);
}

.aavp-invito .aavp-result__cta:focus-visible {
    box-shadow:
        0 0 0 2px var(--aar-nero),
        0 0 0 4px var(--aar-beige);
}

/* ---- Ingresso coreografato ----
   Prima entrava solo la card del punteggio. Ora le sezioni entrano in
   sequenza con 60ms di sfasamento: l'occhio segue l'ordine di lettura invece
   di ricevere tutto insieme. Solo opacita' e translate -> nessun reflow,
   nessun layout shift. */
@media (prefers-reduced-motion: no-preference) {
    .aavp-result__section {
        animation: aavp-entra var(--aar-t-lento) var(--aar-ease) both;
    }

    .aavp-result__section:nth-of-type(1) { animation-delay: 0ms; }
    .aavp-result__section:nth-of-type(2) { animation-delay: 60ms; }
    .aavp-result__section:nth-of-type(3) { animation-delay: 120ms; }
    .aavp-result__section:nth-of-type(4) { animation-delay: 180ms; }
    .aavp-result__section:nth-of-type(5) { animation-delay: 240ms; }
    .aavp-result__section:nth-of-type(6) { animation-delay: 300ms; }
    .aavp-result__section:nth-of-type(7) { animation-delay: 360ms; }

    /* Lo shimmer degli scheletri rallenta ancora: a 4.2s attirava lo sguardo
       piu' del contenuto reale. Un'attesa elegante non lampeggia. */
    .aavp-skel {
        animation-duration: 5.6s;
    }
}

@keyframes aavp-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .aavp-result__section,
    .aavp-migliora,
    .aavp-invito .aavp-result__cta {
        animation: none;
        transition: none;
    }
}

/* =========================================================================
   REFINEMENT — passaggio 4: ultimi residui.
   ========================================================================= */

/* La riga del punteggio portava ancora un raggio 14px ereditato da quando
   era una card: superficie ora trasparente, quindi il raggio non si vede —
   ma un valore fuori scala che sopravvive nel foglio e' debito che prima o
   poi ricompare. Azzerato. */
.aavp-result__section--protagonista .aavp-result__score-row {
    border-radius: 0;
}

/* Il pannello di apertura aveva bordo E ombra: due segnali per la stessa
   funzione. Resta l'ombra, il bordo si assottiglia fino a essere solo un
   contenimento del colore, non una linea disegnata. */
.aavp-arrivo {
    border-color: rgba(20, 24, 29, 0.06);
}

/* Le liste di forza e criticita' erano appoggiate al titolo con lo stesso
   spazio che le separa fra loro: il titolo galleggiava. */
.aavp-result__punti-lista,
.aavp-migliora-lista {
    margin-top: 0;
}

/* Ultimo controllo sulle proporzioni della pastiglia CTA: 15px di padding
   verticale su 16px di icona lasciavano il testo alto nel suo box. */
.aavp-invito .aavp-result__cta {
    padding: 16px 30px;
    line-height: 1;
}