/* =====================================================================
   LIBERATORIE FOTOGRAFICHE — foglio di stile unico
   Versione 4.0 — design system

   Un solo foglio per tutto: la parte pubblica che compilano le modelle e
   il pannello di chi amministra. Stesse tinte, stessi bordi, stessi
   pulsanti: chi passa dall'una all'altro non deve accorgersi di un salto.

   Come e' organizzato:
     1. Fondamenta   tinte, misure, caratteri, azzeramenti
     2. Impianto     colonna del menu, barra in alto, area centrale
     3. Moduli       campi, caselle, firma, editor
     4. Componenti   pulsanti, avvisi, schede, tabelle, elenchi
     5. Schermate    accoglienza, accesso, documento, consumi, rapporti
     6. Telefono     tutto cio' che cambia sotto i 900px

   Regola di scrittura: i nomi delle classi non si toccano mai. Il
   programma le cerca dal JavaScript per accendere e spegnere pezzi di
   pagina; rinominarne una spegnerebbe una funzione senza dare errore.
   ===================================================================== */

/* =====================================================================
   1. FONDAMENTA
   ===================================================================== */

:root {
    /* --- scala dei grigi -------------------------------------------
       Una sola famiglia fredda, dal foglio quasi bianco all'inchiostro.
       Tutto il resto del foglio pesca da qui: cambiando queste otto
       righe cambia l'intero programma. */
    --g-50:  #f8fafc;
    --g-100: #f1f5f9;
    --g-200: #e8edf3;
    --g-300: #dbe2ea;
    --g-400: #b6c0cd;
    --g-500: #8a94a6;
    --g-600: #5f6b7f;
    --g-700: #414d61;
    --g-800: #27313f;
    --g-900: #131a24;

    /* --- colore guida ---------------------------------------------
       Indaco: si distingue dal blu dei collegamenti del telefono e
       regge bene sia il bianco sopra sia il fondo chiarissimo sotto. */
    --p-50:  #eef1ff;
    --p-100: #e0e5ff;
    --p-200: #c7cfff;
    --p-500: #5b63d3;
    --p-600: #4a51c4;
    --p-700: #3d43a8;

    /* --- esiti ------------------------------------------------------ */
    --v-50:  #e9f7ef;   /* riuscito */
    --v-200: #bfe6cf;
    --v-600: #157f4d;
    --v-700: #0f6540;

    --r-50:  #fdeceb;   /* fallito */
    --r-200: #f6cbc8;
    --r-600: #c62f26;
    --r-700: #a32219;

    --a-50:  #fdf4e3;   /* in attesa, da controllare */
    --a-200: #f2ddb0;
    --a-600: #9a6608;
    --a-700: #7d5206;

    /* --- nomi in uso nel programma ---------------------------------
       Restano quelli di sempre: puntano ai valori nuovi. Cosi' le
       regole scritte in passato continuano a valere. */
    --ink:         var(--g-900);
    --ink-soft:    var(--g-600);
    --line:        var(--g-200);
    --line-strong: var(--g-300);
    --bg:          var(--g-50);
    --panel:       #ffffff;
    --accent:      var(--p-600);
    --accent-dark: var(--p-700);
    --ok:          var(--v-600);
    --ok-bg:       var(--v-50);
    --err:         var(--r-600);
    --err-bg:      var(--r-50);
    --warn:        var(--a-600);
    --warn-bg:     var(--a-50);

    /* --- spigoli ---------------------------------------------------- */
    --radius:    12px;
    --radius-sm:  9px;
    --radius-xs:  7px;
    --radius-tondo: 999px;

    /* --- rilievi ---------------------------------------------------
       Tre soli livelli. Piu' di tre e la pagina sembra galleggiare. */
    --ombra-1: 0 1px 2px rgba(19, 26, 36, .05);
    --ombra-2: 0 1px 3px rgba(19, 26, 36, .07), 0 1px 2px rgba(19, 26, 36, .04);
    --ombra-3: 0 10px 28px rgba(19, 26, 36, .11), 0 2px 6px rgba(19, 26, 36, .05);
    --ombra-4: 0 20px 48px rgba(19, 26, 36, .18);

    /* --- alone del fuoco -------------------------------------------
       Serve a chi naviga con la tastiera e a chi ha la vista debole:
       il campo attivo deve vedersi da lontano. */
    --fuoco: 0 0 0 3px var(--p-100);

    /* --- caratteri -------------------------------------------------- */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", "Noto Sans", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", monospace;

    /* --- colonna del menu ------------------------------------------- */
    --side-larga:   248px;
    --side-stretta:  60px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Chi preferisce le pagine ferme non deve subire movimenti. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* --- titoli ------------------------------------------------------- */

h1, h2, h3, h4 {
    color: var(--ink);
    font-weight: 650;
    letter-spacing: -.012em;
}

h1 { font-size: 22px; line-height: 1.25; margin: 0 0 8px; }
h2 { font-size: 17px; line-height: 1.3; margin: 26px 0 10px; }
h3 { font-size: 15px; line-height: 1.35; margin: 18px 0 6px; }

p { margin: 0 0 12px; }

a { color: var(--accent); }

.lead {
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0 0 18px;
    max-width: 68ch;
}

.muted { color: var(--ink-soft); }
.small { font-size: 13px; }

.mono {
    font-family: var(--mono);
    font-size: 12.5px;
    word-break: break-all;
}

.nowrap { white-space: nowrap; }
.spezza { overflow-wrap: anywhere; }

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 22px 0;
}

/* Il collegamento che salta i menu: invisibile finche' non lo si
   raggiunge con la tastiera. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 70;
    padding: 11px 16px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 var(--radius-sm) 0;
    text-decoration: none;
}

.skip-link:focus { left: 0; }

/* Fuoco visibile ovunque, tranne dove il componente ne disegna uno suo. */
:focus-visible {
    outline: 2px solid var(--p-600);
    outline-offset: 2px;
}
/* =====================================================================
   2. IMPIANTO — colonna del menu, barra in alto, area centrale
   ===================================================================== */

.wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 20px 16px 56px;
}

.wrap--wide { max-width: 1440px; }

/* --- barra in alto ------------------------------------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
}

.topbar__inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding: 11px 16px;
    min-height: 56px;
}

.topbar__title {
    font-weight: 650;
    font-size: 15px;
    letter-spacing: -.01em;
}

.topbar__nav {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    font-size: 13.5px;
}

.topbar__nav > * { display: flex; align-items: center; }

.topbar__nav a {
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 500;
    border-radius: var(--radius-xs);
    padding: 4px 2px;
    transition: color .14s ease;
}

.topbar__nav a:hover { color: var(--accent); }

.topbar__versione {
    font-size: 11.5px;
    color: var(--g-500);
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- chi e' entrato ------------------------------------------------ */

.utente { display: inline-flex; align-items: center; gap: 9px; }

.utente__cerchio {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-tondo);
    background: linear-gradient(135deg, var(--p-500), var(--p-700));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .01em;
    box-shadow: var(--ombra-1);
}

.utente__testo { display: flex; flex-direction: column; line-height: 1.25; }
.utente__nome { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.utente__ruolo { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }

/* --- colonna del menu ---------------------------------------------- */

body.ha-menu { --side: var(--side-larga); }
.menu-stretto body.ha-menu,
html.menu-stretto body.ha-menu { --side: var(--side-stretta); }

.side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--side, var(--side-larga));
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border-right: 1px solid var(--line);
    z-index: 40;
    overflow: hidden;
    transition: width .18s ease, transform .2s ease;
}

.side__top {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 12px;
    border-bottom: 1px solid var(--line);
    min-height: 56px;
}

.side__toggle {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    background: var(--g-50);
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}

.side__toggle:hover {
    border-color: var(--p-200);
    background: var(--p-50);
    color: var(--accent);
}

.side__marchio {
    font-weight: 650;
    font-size: 14px;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 10px 16px;
    scrollbar-width: thin;
}

.side__piede { border-top: 1px solid var(--line); padding: 10px; }

.side__voce {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    color: var(--g-700);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background .13s ease, color .13s ease;
}

.side__voce:hover { background: var(--g-100); color: var(--ink); }

.side__voce.is-active {
    background: var(--p-600);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--ombra-1);
}

.side__voce.is-active:hover { background: var(--p-700); color: #fff; }

.side__ico {
    flex: 0 0 20px;
    width: 20px;
    text-align: center;
    font-size: 15px;
    line-height: 1;
}

.side__testo { overflow: hidden; text-overflow: ellipsis; }

.side__gruppo { margin: 0; }
.side__gruppo > summary { list-style: none; }
.side__gruppo > summary::-webkit-details-marker { display: none; }
.side__voce--gruppo { user-select: none; }

.side__freccia {
    margin-left: auto;
    font-size: 10px;
    color: var(--g-400);
    transition: transform .16s ease;
}

.side__gruppo[open] > summary .side__freccia { transform: rotate(90deg); }

/* Le voci figlie stanno su una guida verticale: si legge a colpo
   d'occhio dove finisce un gruppo. */
.side__sotto {
    margin: 2px 0 6px 20px;
    padding: 0 0 0 12px;
    border-left: 1px solid var(--line);
}

.side__voce--figlia { padding: 7px 10px; font-size: 13px; }
.side__voce--minore { font-size: 13px; }

/* --- colonna ridotta a sole icone ---------------------------------- */

html.menu-stretto .side__marchio,
html.menu-stretto .side__testo,
html.menu-stretto .side__freccia { display: none; }

html.menu-stretto .side__voce { justify-content: center; padding: 10px 6px; gap: 0; }
html.menu-stretto .side__sotto { margin-left: 0; padding-left: 0; border-left: none; }
html.menu-stretto .side__top { justify-content: center; padding: 12px 6px; }
html.menu-stretto .side__toggle-ico { transform: rotate(180deg); display: inline-block; }
html.menu-stretto .side__voce--figlia { font-size: 0; }

html.menu-stretto .side__voce--figlia::before {
    content: '·';
    font-size: 18px;
    color: var(--g-400);
}

/* --- area centrale -------------------------------------------------- */

body.ha-menu .principale,
body.ha-menu .topbar {
    margin-left: var(--side, var(--side-larga));
    transition: margin-left .18s ease;
}

.menu-apri { display: none; }
.side-velo { display: none; }
/* =====================================================================
   3. MODULI — campi, caselle, firma, editor
   ===================================================================== */

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; position: relative; }

label {
    font-size: 13px;
    font-weight: 600;
    color: var(--g-700);
    letter-spacing: -.005em;
}

label .req { color: var(--err); margin-left: 1px; }

.field { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }

.field > label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--g-700);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;          /* sotto i 16px il telefono ingrandisce da solo */
    font-family: inherit;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--ombra-1);
    appearance: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}

input::placeholder, textarea::placeholder { color: var(--g-400); }

/* La freccia del menu a tendina, disegnata invece che ereditata: quella
   di sistema cambia da un telefono all'altro. */
select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235f6b7f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 17px;
}

textarea {
    min-height: 300px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.55;
    resize: vertical;
}

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: var(--g-400); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--p-500);
    box-shadow: var(--fuoco);
}

input:disabled, select:disabled, textarea:disabled {
    background: var(--g-100);
    color: var(--g-500);
    cursor: not-allowed;
    box-shadow: none;
}

input[readonly] { background: var(--g-50); }

.field--error input,
.field--error select,
.field--error textarea { border-color: var(--err); }

.field--error input:focus,
.field--error select:focus { box-shadow: 0 0 0 3px var(--r-50); }

.field__error {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--err);
    font-weight: 500;
}

.field .small.muted { display: block; margin-top: 5px; line-height: 1.4; }

.field--warn input { border-color: var(--a-200); background: var(--warn-bg); }

/* --- caselle da spuntare -------------------------------------------- */

.check {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.5;
    cursor: pointer;
}

.check input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--p-600);
    cursor: pointer;
}

.check input[type=checkbox] { width: 20px; height: 20px; }

.check label { font-size: 14px; font-weight: 400; color: var(--ink); cursor: pointer; }

.check-row { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.check-row .check { display: inline-flex; align-items: center; gap: 7px; }

/* --- gruppi affiancati ---------------------------------------------- */

.grid { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
.grid--citta { grid-template-columns: 1fr; }

@media (min-width: 560px) {
    .grid--2 { grid-template-columns: 1fr 1fr; }
    .grid--3 { grid-template-columns: 1fr 1fr 1fr; }
    .grid--citta { grid-template-columns: 2fr .8fr 1fr; }
}

.filters, .filtri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 12px 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--ombra-1);
}

.filters input, .filters select { width: auto; flex: 1 1 180px; }
.filtri input, .filtri select { width: auto; min-width: 160px; flex: 0 1 220px; }

/* --- blocco chiuso finche' non si sceglie l'evento ------------------ */

.locked { opacity: .45; pointer-events: none; filter: grayscale(.25); }

.locked__hint {
    display: none;
    background: var(--warn-bg);
    border: 1px solid var(--a-200);
    color: var(--a-700);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 13.5px;
    margin-bottom: 16px;
    text-align: center;
}

.locked .locked__hint { display: block; }

/* --- riquadro della firma ------------------------------------------- */

.sign {
    position: relative;
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius);
    background: #fff;
    padding: 8px;
    transition: border-color .16s ease, background .16s ease;
}

.sign--filled { border-style: solid; border-color: var(--v-600); background: #fff; }

.sign__canvas {
    display: block;
    width: 100%;
    height: 190px;
    border-radius: var(--radius-sm);
    background: #fff;
    touch-action: none;      /* la pagina non scorre mentre si firma */
    cursor: crosshair;
}

.sign__hint {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: var(--g-400);
    font-size: 14px;
    pointer-events: none;
    user-select: none;
}

.sign__hint--hidden { display: none; }

.sign__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.sign__status { font-size: 13px; color: var(--ink-soft); margin-left: auto; }
.sign__status--ok { color: var(--ok); font-weight: 600; }

.sign--disabled { background: var(--g-100); border-style: dashed; }
.sign--disabled .sign__canvas { background: var(--g-100); cursor: not-allowed; }

.sig-preview {
    max-width: 260px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    display: block;
}

/* --- controllo antirobot -------------------------------------------- */

.captcha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.captcha__img {
    display: block;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--g-50);
}

.captcha__testo {
    font-family: var(--mono);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--g-50);
    user-select: none;
}

.captcha__campo { flex: 1 1 120px; min-width: 110px; }

/* --- comporre l'indirizzo pubblico ---------------------------------- */

.indirizzo-comporre { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; }

.indirizzo-comporre__base {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--g-100);
    color: var(--ink-soft);
    font-size: 13px;
    white-space: nowrap;
}

.indirizzo-comporre input {
    flex: 1 1 180px;
    min-width: 140px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-family: var(--mono);
}

/* --- editor dei testi: barra e anteprima ---------------------------- */

.editor-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 7px;
    margin-bottom: -1px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--g-50);
}

.editor-btn {
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 12.5px;
    line-height: 1;
    padding: 7px 10px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.editor-btn:hover { background: #fff; border-color: var(--line); color: var(--ink); }
.editor-btn--strong { font-weight: 800; }
.editor-btn--em { font-style: italic; }

.editor-sep { width: 1px; height: 18px; margin: 0 5px; background: var(--line-strong); }

.editor-barra + textarea {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none;
}

.editor-anteprima {
    padding: 16px 18px;
    border: 1px solid var(--line-strong);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--panel);
    min-height: 120px;
    line-height: 1.6;
}

.editor-anteprima[hidden] { display: none; }
.editor-anteprima h2 { font-size: 17px; margin: 14px 0 8px; }
.editor-anteprima h3 { font-size: 15px; margin: 12px 0 6px; }
.editor-anteprima p { margin: 0 0 10px; }
.editor-anteprima ul,
.editor-anteprima ol { margin: 0 0 10px; padding-left: 22px; }

/* --- editor visuale -------------------------------------------------- */

.ed {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--panel);
    overflow: hidden;
    box-shadow: var(--ombra-1);
}

.ed__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 7px;
    background: var(--g-50);
    border-bottom: 1px solid var(--line);
}

.ed__btn {
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.ed__btn:hover { background: #fff; border-color: var(--line); color: var(--ink); }
.ed__btn.is-on { background: var(--p-600); border-color: var(--p-600); color: #fff; }

.ed__btn--grassetto { font-weight: 800; }
.ed__btn--corsivo { font-style: italic; }
.ed__btn--codice { font-family: var(--mono); font-size: 12px; }

.ed__sep { width: 1px; height: 18px; margin: 0 5px; background: var(--line-strong); }

.ed__area {
    min-height: 220px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 16px 18px;
    outline: none;
    line-height: 1.65;
    font-size: 15px;
}

.ed__area:focus { box-shadow: inset 0 0 0 2px var(--p-100); }

.ed__area h1 { font-size: 21px; margin: 16px 0 10px; }
.ed__area h2 { font-size: 18px; margin: 16px 0 8px; }
.ed__area h3 { font-size: 15px; margin: 14px 0 6px; }
.ed__area p { margin: 0 0 10px; }
.ed__area ul, .ed__area ol { margin: 0 0 10px; padding-left: 24px; }
.ed__area li { margin-bottom: 4px; }
.ed__area hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }

.ed .ed__sorgente {
    width: 100%;
    min-height: 220px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.6;
    padding: 16px 18px;
    resize: vertical;
}

.ed .ed__sorgente:focus { outline: none; box-shadow: inset 0 0 0 2px var(--p-100); }
/* =====================================================================
   4. COMPONENTI — pulsanti, avvisi, schede, tabelle, elenchi
   ===================================================================== */

/* --- pulsanti -------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 18px;
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: -.005em;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .14s ease, border-color .14s ease,
                color .14s ease, box-shadow .14s ease, transform .06s ease;
}

.btn:active { transform: translateY(1px); }

.btn:focus-visible { outline: none; box-shadow: var(--fuoco); }

.btn--primary {
    background: var(--p-600);
    color: #fff;
    box-shadow: var(--ombra-1);
}

.btn--primary:hover { background: var(--p-700); }
.btn--primary:focus-visible { box-shadow: 0 0 0 3px var(--p-200); }

.btn--ghost {
    background: #fff;
    color: var(--g-700);
    border-color: var(--line-strong);
    box-shadow: var(--ombra-1);
}

.btn--ghost:hover { background: var(--g-50); border-color: var(--g-400); color: var(--ink); }

.btn--small { min-height: 34px; padding: 7px 13px; font-size: 13px; }
.btn--big { min-height: 48px; padding: 13px 22px; font-size: 15.5px; }
.btn--block { width: 100%; }

.btn--pericolo {
    color: #fff;
    background: var(--r-600);
    border-color: var(--r-600);
    box-shadow: var(--ombra-1);
}

.btn--pericolo:hover { background: var(--r-700); border-color: var(--r-700); }

.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn:disabled:active { transform: none; }

.btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: auto; }
.btn.is-disabled:hover { opacity: .45; }

.actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.actions--verticali { display: flex; flex-direction: column; gap: 9px; }
.actions--piene { display: block; margin-top: 20px; }

@media (min-width: 620px) {
    .actions { flex-direction: row-reverse; justify-content: flex-start; }
}

.inline-form { display: inline; }

/* --- pulsanti a icona ------------------------------------------------ */

.ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 1px;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    color: var(--ink-soft);
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xs);
    box-shadow: var(--ombra-1);
    transition: border-color .13s ease, color .13s ease, background .13s ease;
}

.ico:hover { border-color: var(--p-500); color: var(--accent); background: var(--p-50); }
.ico:focus-visible { outline: none; box-shadow: var(--fuoco); }

.ico--modifica { font-size: 14px; }
.ico--apri { font-size: 20px; font-weight: 700; }
.ico--elimina { font-size: 18px; }
.ico--modulo { font-size: 14px; }

.ico--elimina:hover { color: var(--err); border-color: var(--r-200); background: var(--err-bg); }
.ico--spegni:hover,
.ico--accendi:hover { color: var(--warn); border-color: var(--a-200); background: var(--warn-bg); }
.ico--blocca:hover  { color: var(--err); border-color: var(--r-200); background: var(--err-bg); }
.ico--attiva:hover,
.ico--sblocca:hover { color: var(--ok); border-color: var(--v-200); background: var(--ok-bg); }
.ico--duplica:hover,
.ico--link:hover    { color: var(--accent); border-color: var(--p-200); background: var(--p-50); }

.ico--bloccata { opacity: .35; cursor: not-allowed; box-shadow: none; }
.ico--bloccata:hover { border-color: var(--line-strong); color: var(--ink-soft); background: #fff; }

.ico--protetto { cursor: default; opacity: .5; border-color: transparent; box-shadow: none; }
.ico--protetto:hover { border-color: transparent; background: #fff; color: var(--ink-soft); }

td.azioni { white-space: nowrap; }
.azioni > * { vertical-align: middle; }

.azioni--utente { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.azioni--utente .inline-form { display: inline; margin: 0; }

/* --- schede ---------------------------------------------------------- */

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: var(--ombra-2);
}

.card h2 { margin: 0 0 12px; font-size: 16px; }

.card--evento { border-color: var(--p-200); box-shadow: 0 0 0 1px var(--p-100), var(--ombra-2); }
.card--consenso { border-color: var(--p-200); background: var(--p-50); }
.card--attivo { border-color: var(--p-200); background: var(--p-50); }
.card--minore { border-left: 3px solid var(--a-600); }
.card--pericolo { border-color: var(--r-200); background: #fffbfb; }

.minore-avviso {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-xs);
    background: var(--warn-bg);
    border: 1px solid var(--a-200);
    color: var(--a-700);
    font-size: 13px;
    line-height: 1.5;
}

.testata {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.testata__titolo { margin: 0; }

.testata__versione {
    font-size: 11.5px;
    color: var(--g-500);
    white-space: nowrap;
    font-family: var(--mono);
}

/* --- avvisi ---------------------------------------------------------- */

.alert {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    font-size: 13.5px;
    line-height: 1.5;
    border: 1px solid;
    box-shadow: var(--ombra-1);
}

.alert--err  { background: var(--err-bg);  border-color: var(--r-200); color: var(--r-700); }
.alert--ok   { background: var(--ok-bg);   border-color: var(--v-200); color: var(--v-700); }
.alert--warn { background: var(--warn-bg); border-color: var(--a-200); color: var(--a-700); }

/* --- pastiglie di stato ---------------------------------------------- */

.badge, .chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-tondo);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.5;
    letter-spacing: .005em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge--completed,
.badge--sent { background: var(--ok-bg); color: var(--v-700); border-color: var(--v-200); }

.badge--failed { background: var(--err-bg); color: var(--r-700); border-color: var(--r-200); }

.badge--draft,
.badge--signed,
.badge--pending,
.badge--processing { background: var(--warn-bg); color: var(--a-700); border-color: var(--a-200); }

.chip--on { background: var(--ok-bg); color: var(--v-700); border-color: var(--v-200); }
.chip--off { background: var(--g-100); color: var(--g-600); border-color: var(--g-200); }
.chip--frozen { background: var(--p-50); color: var(--p-700); border-color: var(--p-200); }
.chip--soon { background: var(--warn-bg); color: var(--a-700); border-color: var(--a-200); }

.sigla {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 8px;
    border-radius: var(--radius-xs);
    background: var(--p-600);
    color: #fff;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 700;
    vertical-align: middle;
}

/* --- numeri in evidenza ---------------------------------------------- */

.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--ombra-2);
}

.stat__n {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.stat__l {
    font-size: 11.5px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    margin-top: 5px;
}

/* --- tabelle --------------------------------------------------------- */

.table-scroll {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--ombra-2);
}

table.list {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    white-space: nowrap;
}

table.list th,
table.list td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

table.list th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--g-50);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line-strong);
}

table.list tr:last-child td { border-bottom: none; }
table.list tbody tr { transition: background .12s ease; }
table.list tbody tr:hover td { background: var(--g-50); }

table.list a { color: var(--accent); text-decoration: none; font-weight: 600; }
table.list a:hover { text-decoration: underline; }

.list .sotto { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-soft); }

.col-data { width: 150px; }
.col-pratica { width: 150px; }
.col-stato { width: 95px; }
.col-tent { width: 60px; text-align: center; }
.col-azioni { width: 150px; }

.log { font-size: 13px; }
.log td { padding: 7px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }

.riga-avviso td { background: var(--warn-bg); color: var(--a-700); }
.riga-inerte { opacity: .45; }

.riga-gruppo td {
    padding: 9px 12px !important;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-soft);
    background: var(--g-100);
}

.tabella-campi td,
.tabella-campi th { padding: 7px 12px; font-size: 13px; }
.tabella-campi input[type=checkbox] { width: 20px; height: 20px; margin: 0; }
.tabella-campi input[type=text] { padding: 6px 9px; font-size: 13px; }

table.kv { width: 100%; border-collapse: collapse; }

table.kv th,
table.kv td { padding: 7px 0; text-align: left; vertical-align: top; font-size: 13.5px; }
table.kv th { width: 190px; color: var(--ink-soft); font-weight: 600; }

.recap { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.recap th, .recap td {
    text-align: left;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.recap th { width: 42%; color: var(--ink-soft); font-weight: 600; }
.recap tr:last-child th, .recap tr:last-child td { border-bottom: none; }

.recap--stretta th,
.recap--stretta td { padding: 6px 0; font-size: 13px; line-height: 1.45; }
.recap--stretta th { width: 40%; padding-right: 12px; font-size: 12.5px; }
.recap td.forte, .recap .forte { font-weight: 700; }
.recap td.forte { font-size: 15px; }

/* --- numerazione delle pagine ---------------------------------------- */

.pager { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 5px; }
.pager svg { display: none; }

.pager a, .pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 11px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xs);
    text-decoration: none;
    color: var(--g-700);
    font-size: 13.5px;
    font-weight: 500;
    background: #fff;
    box-shadow: var(--ombra-1);
    transition: border-color .13s ease, color .13s ease, background .13s ease;
}

.pager a:hover { border-color: var(--p-500); color: var(--accent); background: var(--p-50); }

.pager [aria-current="page"] span {
    background: var(--p-600);
    color: #fff;
    border-color: var(--p-600);
    font-weight: 650;
}

/* --- pannelli a scomparsa -------------------------------------------- */

.modifica { display: inline-block; position: relative; }
.modifica > summary { list-style: none; cursor: pointer; }
.modifica > summary::-webkit-details-marker { display: none; }

.modifica__pannello {
    position: absolute;
    z-index: 30;
    right: 0;
    width: min(560px, 88vw);
    margin-top: 8px;
    padding: 18px;
    text-align: left;
    white-space: normal;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--ombra-3);
}

.errore { display: inline-block; }

.errore > summary {
    display: inline-block;
    padding: 4px 11px;
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    font-weight: 650;
    color: var(--r-700);
    background: var(--err-bg);
    border: 1px solid var(--r-200);
    border-radius: var(--radius-tondo);
}

.errore > summary::-webkit-details-marker { display: none; }
.errore > summary:hover { border-color: var(--err); }
.errore[open] > summary { border-color: var(--err); }

.errore__testo {
    position: absolute;
    z-index: 20;
    right: 14px;
    max-width: 460px;
    margin-top: 8px;
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: normal;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--r-200);
    border-radius: var(--radius-sm);
    box-shadow: var(--ombra-3);
}

.aiuto {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    background: var(--g-50);
}

.aiuto > summary {
    cursor: pointer;
    font-size: 13.5px;
    color: var(--accent);
    font-weight: 600;
}

.aiuto table.kv th { width: 130px; vertical-align: top; padding-top: 9px; }
.aiuto table.kv td { padding-top: 9px; line-height: 1.6; font-size: 13.5px; }

/* --- finestre trascinabili -------------------------------------------- */

.modifica--flottante .finestra {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    resize: none;
}

.finestra.is-libera { position: fixed; z-index: 60; margin: 0; }

.finestra.is-attiva { box-shadow: var(--ombra-4); user-select: none; }

.finestra__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--g-50);
    border-bottom: 1px solid var(--line);
    cursor: move;
    touch-action: none;
}

.finestra__titolo {
    font-size: 13px;
    font-weight: 650;
    color: var(--g-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finestra__chiudi {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--ink-soft);
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    border-radius: var(--radius-xs);
}

.finestra__chiudi:hover { color: var(--err); }

.finestra__corpo { flex: 1 1 auto; overflow: auto; padding: 18px; }

.finestra__maniglia {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    touch-action: none;
    background:
        linear-gradient(135deg, transparent 50%, var(--g-400) 50%, var(--g-400) 60%,
                        transparent 60%, transparent 72%, var(--g-400) 72%, var(--g-400) 82%,
                        transparent 82%);
}

/* --- avanzamento dell'iter ------------------------------------------- */

.stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.stepper__item {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 180px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--g-500);
    font-size: 13px;
    font-weight: 500;
}

.stepper__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: var(--radius-tondo);
    background: var(--g-200);
    color: var(--g-600);
    font-weight: 700;
    font-size: 12px;
}

.stepper__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stepper__item.is-current {
    border-color: var(--p-500);
    background: var(--p-50);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--p-100);
}

.stepper__item.is-current .stepper__num { background: var(--p-600); color: #fff; }

.stepper__item.is-done { border-color: var(--v-200); background: var(--v-50); color: var(--v-700); }
.stepper__item.is-done .stepper__num { background: var(--v-600); color: #fff; }

/* --- schede di scelta -------------------------------------------------- */

.scelte {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.scelte--3 { grid-template-columns: repeat(3, 1fr); }
.scelte--4 { grid-template-columns: repeat(4, 1fr); }

.scelta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    cursor: pointer;
    box-shadow: var(--ombra-1);
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.scelta:hover { border-color: var(--g-400); }

.scelta.is-on {
    border-color: var(--p-500);
    background: var(--p-50);
    box-shadow: 0 0 0 1px var(--p-500);
}

.scelta input { margin: 0 0 2px; accent-color: var(--p-600); }
.scelta__nome { font-weight: 650; line-height: 1.3; }

.modelli { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }

.modello {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--ombra-1);
    transition: border-color .13s ease, background .13s ease;
}

.modello:hover { border-color: var(--g-400); }
.modello.is-on { border-color: var(--p-500); background: var(--p-50); box-shadow: 0 0 0 1px var(--p-500); }
.modello__nome { font-weight: 650; }

/* --- scelta dell'evento nel modulo pubblico --------------------------- */

.eventi { display: flex; flex-direction: column; gap: 9px; }

.evento {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    cursor: pointer;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--ombra-1);
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.evento:hover { border-color: var(--g-400); }

.evento input {
    flex: 0 0 auto;
    margin: 2px 0 0;
    width: 19px;
    height: 19px;
    accent-color: var(--p-600);
}

.evento__testo { display: block; min-width: 0; }

.evento__nome {
    display: block;
    font-size: 14.5px;
    font-weight: 650;
    line-height: 1.35;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.evento__meta { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-soft); }

.evento.is-scelto {
    border-color: var(--p-500);
    background: var(--p-50);
    box-shadow: 0 0 0 1px var(--p-500);
}

.eventi.field--error .evento { border-color: var(--err); }

/* --- blocchi del documento -------------------------------------------- */

.blocchi-sel {
    margin-top: 16px;
    padding: 15px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    background: var(--g-50);
}

.blocchi-sel__lista { display: flex; flex-wrap: wrap; gap: 8px; }

.blocco-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-tondo);
    background: var(--panel);
    color: var(--g-700);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    box-shadow: var(--ombra-1);
    transition: border-color .13s ease, color .13s ease, background .13s ease;
}

.blocco-chip:hover { border-color: var(--p-500); color: var(--accent); }

.blocco-chip.is-on { background: var(--p-600); border-color: var(--p-600); color: #fff; }

.blocco-chip__stato {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-tondo);
    background: var(--g-100);
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1;
}

.blocco-chip.is-on .blocco-chip__stato { background: rgba(255, 255, 255, .25); color: #fff; }

.blocco-chip__sigla { font-family: var(--mono); font-weight: 700; font-size: 12px; }

.blocco-chip__titolo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.blocco-chip__pos { font-size: 11.5px; opacity: .75; }

.blocco-anteprima {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--panel);
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.6;
}

.blocco-anteprima[hidden] { display: none; }

.blocchi-usati { margin-bottom: 12px; }

.blocco-usato {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    font-size: 13px;
    box-shadow: var(--ombra-1);
}

.blocco-usato__sigla { font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--accent); }
.blocco-usato__titolo { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blocco-usato__pos { font-size: 11.5px; color: var(--ink-soft); }

.blocco-usato__via {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xs);
    background: #fff;
    color: var(--ink-soft);
    font: inherit;
    font-size: 12.5px;
    padding: 5px 11px;
    cursor: pointer;
    transition: border-color .13s ease, color .13s ease, background .13s ease;
}

.blocco-usato__via:hover { border-color: var(--r-200); color: var(--err); background: var(--err-bg); }

.blocchi-aggiungi > summary { display: inline-flex; cursor: pointer; list-style: none; }
.blocchi-aggiungi > summary::-webkit-details-marker { display: none; }

.azioni-modello {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.azioni-modello .inline-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}

/* --- foglietti delle note ---------------------------------------------- */

.postit-lista { display: grid; gap: 14px; margin-bottom: 24px; grid-template-columns: 1fr; }

@media (min-width: 700px)  { .postit-lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .postit-lista { grid-template-columns: 1fr 1fr 1fr; } }

.postit {
    display: flex;
    flex-direction: column;
    min-height: 130px;
    padding: 15px 16px;
    border-radius: var(--radius);
    border: 1px solid rgba(19, 26, 36, .07);
    box-shadow: var(--ombra-2);
}

.postit h3 { margin: 0 0 6px; font-size: 15px; line-height: 1.35; }
.postit__corpo { flex: 1 1 auto; font-size: 13.5px; line-height: 1.55; color: var(--g-800); }

.postit__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(19, 26, 36, .09);
}

.postit--giallo  { background: #fdf6d8; }
.postit--verde   { background: #e4f6e6; }
.postit--azzurro { background: #e2f0fb; }
.postit--rosa    { background: #fce8f0; }
.postit--grigio  { background: var(--g-100); }

.postit--fatta { opacity: .6; }
.postit--fatta h3 { text-decoration: line-through; }

.postit .ico { width: 30px; height: 30px; font-size: 14px; background: rgba(255, 255, 255, .75); }

/* --- righe delle pratiche ---------------------------------------------- */

.pratiche { display: flex; flex-direction: column; gap: 8px; }

.pratica {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--ombra-1);
    transition: border-color .13s ease, box-shadow .13s ease;
}

.pratica:hover { border-color: var(--g-400); box-shadow: var(--ombra-2); }

.pratica__dati { flex: 1 1 auto; min-width: 0; }

.pratica__riga { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.pratica__riga--capo { margin-bottom: 4px; }
.pratica__riga--sotto { font-size: 12.5px; color: var(--ink-soft); }

.pratica__codice {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--mono);
    text-decoration: none;
    color: var(--accent);
}

.pratica__codice:hover { text-decoration: underline; }

.pratica__nome {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pratica__stato { flex: 0 0 auto; }

.pratica__data {
    flex: 0 0 auto;
    font-size: 12.5px;
    color: var(--ink-soft);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pratica__evento,
.pratica__email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pratica__evento { flex: 1 1 45%; }
.pratica__email { flex: 1 1 30%; }
.pratica__copia { flex: 0 0 auto; white-space: nowrap; font-size: 12.5px; }

.pratica__azioni {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: center;
}

.pratica__azioni .inline-form { display: inline; margin: 0; }

/* --- pratiche raggruppate per utente ------------------------------------ */

.gruppo {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: var(--ombra-1);
}

.gruppo.is-aperto { border-color: var(--p-200); box-shadow: 0 0 0 1px var(--p-100), var(--ombra-2); }

.gruppo__testa { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 15px 16px; }
.gruppo__chi { display: flex; align-items: center; gap: 11px; flex: 1 1 240px; }
.gruppo__numeri { display: flex; flex-wrap: wrap; gap: 6px 22px; flex: 2 1 340px; }

.numero { display: flex; flex-direction: column; line-height: 1.2; }

.numero__v {
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.numero__v.small { font-size: 13px; font-weight: 600; }
.numero__e { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.numero--allarme .numero__v { color: var(--err); }

.gruppo__azioni { display: flex; gap: 6px; flex: 0 0 auto; }
.gruppo__dettaglio { border-top: 1px solid var(--line); background: var(--g-50); }
.gruppo__dettaglio .list { background: var(--panel); }

/* --- righe dei social nel modulo ---------------------------------------- */

.social-row { display: flex; gap: 7px; align-items: center; margin-bottom: 9px; }

.social-row__platform {
    flex: 0 0 112px;
    max-width: 112px;
    padding-left: 10px;
    padding-right: 26px;
    font-size: 13px;
    background-position: right 7px center;
    background-size: 15px;
}

.social-row__nick { flex: 1 1 auto; min-width: 0; }
.social-row__lock { flex: 0 0 36px; }

.social-row__remove {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    line-height: 1;
    font-size: 20px;
    color: var(--ink-soft);
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xs);
    cursor: pointer;
    padding: 0;
    transition: border-color .13s ease, color .13s ease, background .13s ease;
}

.social-row__remove:hover { color: var(--err); border-color: var(--r-200); background: var(--err-bg); }

#social-aggiungi:disabled { opacity: .5; cursor: default; }

@media (min-width: 480px) {
    .social-row__platform { flex-basis: 136px; max-width: 136px; }
}

/* --- intestazione del soggetto ------------------------------------------ */

.soggetto-titolo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.soggetto-titolo__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: var(--radius-tondo);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--p-600);
    flex: 0 0 27px;
}

.soggetto[hidden] { display: none; }
.firma-card[hidden] { display: none; }

.chiudi-evento {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    justify-content: space-between;
}

.logo-preview {
    max-width: 260px;
    max-height: 110px;
    display: block;
    margin: 8px 0 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: repeating-conic-gradient(var(--g-100) 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}
/* =====================================================================
   5. SCHERMATE — accoglienza, accesso, documento, consumi, rapporti
   ===================================================================== */

/* --- schermata di accoglienza ---------------------------------------- */

.hero { text-align: center; padding: 22px 0 10px; }

.hero__logo {
    max-width: 100%;
    max-height: 120px;
    margin: 0 auto 22px;
    display: block;
}

.hero__logo--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 112px;
    height: 112px;
    border-radius: 22px;
    border: 2px dashed var(--line-strong);
    background: var(--panel);
    color: var(--ink-soft);
    box-shadow: var(--ombra-1);
}

.hero__logo--placeholder span { font-size: 32px; font-weight: 700; line-height: 1; color: var(--accent); }
.hero__logo--placeholder em { font-size: 9px; font-style: normal; line-height: 1.3; text-align: center; }

.hero__title {
    font-size: 25px;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 12px;
}

.hero__text {
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.65;
    max-width: 560px;
    margin: 0 auto 20px;
    text-align: left;
}

.hero__poster { margin: 0 0 22px; }

.hero__poster img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--g-100);
    box-shadow: var(--ombra-2);
}

.hero__poster figcaption {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-soft);
    text-align: center;
}

.hero__poster[hidden] { display: none; }

.hero__scelta { margin: 22px 0 16px; text-align: left; }

.hero__etichetta {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--g-700);
}

.hero__select {
    width: 100%;
    padding: 12px 36px 12px 13px;
    font-size: 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background-color: var(--panel);
    color: var(--ink);
    box-shadow: var(--ombra-1);
}

.hero__vuoto {
    margin: 20px 0;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 14px;
}

.hero__piede {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    text-align: center;
}

.hero__piede .small { margin-top: 12px; }

/* --- schermate di accesso -------------------------------------------- */

.accesso {
    max-width: 430px;
    margin: 5vh auto 40px;
    padding: 30px 28px 26px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--ombra-3);
}

.accesso--largo { max-width: 660px; }

.accesso__titolo {
    margin: 0 0 6px;
    font-size: 21px;
    text-align: center;
    letter-spacing: -.02em;
}

.accesso__sotto {
    margin: 0 0 24px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 14px;
}

.accesso__link {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 13.5px;
}

.accesso__link a { color: var(--accent); text-decoration: none; font-weight: 600; }
.accesso__link a:hover { text-decoration: underline; }

.accesso__nota { margin-top: 16px; text-align: center; line-height: 1.55; }

.piano-limiti { display: block; margin-top: 6px; line-height: 1.65; }

/* --- documento da leggere -------------------------------------------- */

.doc {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 20px;
    max-height: 460px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--ombra-1) inset;
}

.doc h1 { font-size: 17px; margin: 0 0 12px; }
.doc h2 { font-size: 14.5px; margin: 18px 0 5px; }
.doc p, .doc li { font-size: 14px; color: var(--g-800); line-height: 1.65; }
.doc ul { padding-left: 20px; margin: 6px 0; }

.doc--readonly { max-height: none; }

.nota-esito {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 16px;
}

.firma-salvata {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.firma-salvata__box { margin: 0; flex: 1 1 240px; }

.firma-salvata__img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    border-bottom: 2px solid var(--line-strong);
    padding-bottom: 6px;
    margin-bottom: 6px;
}

/* --- piano e consumi --------------------------------------------------- */

.piano-testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.piano-prezzo {
    font-size: 17px;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}

.consumo { margin-bottom: 16px; }

.consumo__riga {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
    margin-bottom: 6px;
}

.consumo__valore { color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

.consumo__barra {
    height: 8px;
    border-radius: var(--radius-tondo);
    background: var(--g-200);
    overflow: hidden;
}

.consumo__barra span {
    display: block;
    height: 100%;
    background: var(--p-600);
    border-radius: var(--radius-tondo);
    transition: width .3s ease;
}

.consumo.is-vicino .consumo__barra span { background: var(--a-600); }

.funzione { font-size: 13px; color: var(--ink-soft); }
.funzione.is-off { opacity: .45; text-decoration: line-through; }
.funzione.is-on { color: var(--ink); }

/* --- rapporti ---------------------------------------------------------- */

.stato-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.stato-riquadro {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 15px;
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--ombra-2);
}

.stato-riquadro--ok { border-left-color: var(--v-600); }
.stato-riquadro--attesa { border-left-color: var(--a-600); }
.stato-riquadro--attenzione { border-left-color: var(--r-600); }

.stato-riquadro__valore {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.stato-riquadro__voce { font-size: 13px; color: var(--ink-soft); }
.stato-riquadro__nota { font-size: 11.5px; color: var(--g-500); margin-top: 3px; }

.grafico { width: 100%; height: auto; display: block; }

.legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 20px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-soft);
}

.legenda__voce { display: inline-flex; align-items: center; gap: 7px; }
.legenda__segno { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* --- funzione non compresa nel piano ------------------------------------ */

.negata {
    max-width: 560px;
    margin: 5vh auto;
    text-align: center;
}

.negata h1 { font-size: 20px; }
/* =====================================================================
   6. TELEFONO — tutto cio' che cambia sugli schermi stretti

   Il modulo pubblico viene compilato quasi sempre col telefono in mano,
   spesso in piedi e con una mano sola: qui si allarga cio' che si tocca,
   si toglie cio' che scorre di lato e si accorcia cio' che si legge.
   ===================================================================== */

/* --- da tablet in su: piu' respiro -------------------------------------- */

@media (min-width: 640px) {
    .wrap { padding: 30px 24px 72px; }
    h1 { font-size: 26px; }
    .hero { padding: 40px 0 16px; }
    .hero__title { font-size: 30px; }
    .hero__logo { max-height: 150px; }
    .hero__poster img { max-height: 460px; object-fit: contain; }
    .card { padding: 22px; }
    input, select, textarea { font-size: 15px; }
    .doc { padding: 26px 24px; }
}

/* --- schermi medi: le griglie fitte si dimezzano ------------------------- */

@media (max-width: 900px) {
    .scelte--3,
    .scelte--4 { grid-template-columns: repeat(2, 1fr); }
}

/* --- sotto gli 860px: il menu diventa un cassetto ------------------------ */

@media (max-width: 860px) {
    body.ha-menu .principale,
    body.ha-menu .topbar { margin-left: 0; }

    .side {
        width: min(var(--side-larga), 82vw);
        transform: translateX(-100%);
        box-shadow: var(--ombra-4);
    }

    body.menu-aperto .side { transform: translateX(0); }

    /* Da telefono il cassetto si apre e si chiude: ridurlo a icone non serve. */
    .side__toggle { display: none; }

    html.menu-stretto .side__marchio,
    html.menu-stretto .side__testo,
    html.menu-stretto .side__freccia { display: inline; }

    html.menu-stretto .side__voce { justify-content: flex-start; padding: 11px 12px; gap: 10px; }
    html.menu-stretto .side__voce--figlia { font-size: 13px; }
    html.menu-stretto .side__voce--figlia::before { content: none; }
    html.menu-stretto .side__sotto { margin-left: 20px; padding-left: 12px; border-left: 1px solid var(--line); }

    /* Le voci si toccano col pollice: piu' alte di quanto servirebbe al mouse. */
    .side__voce { padding: 12px; font-size: 14.5px; }
    .side__voce--figlia { padding: 10px 12px; font-size: 13.5px; }

    .menu-apri {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 10px;
        left: 10px;
        width: 42px;
        height: 42px;
        z-index: 45;
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        background: var(--panel);
        color: var(--g-700);
        font-size: 18px;
        cursor: pointer;
        box-shadow: var(--ombra-2);
    }

    .topbar__inner { padding-left: 58px; }

    .side-velo {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(19, 26, 36, .45);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 35;
    }

    .side-velo[hidden] { display: none; }

    .utente__nome { display: none; }
}

/* --- sotto i 700px ------------------------------------------------------ */

@media (max-width: 700px) {
    .utente__ruolo { display: none; }
    .gruppo__numeri { gap: 6px 16px; }
    .numero__v { font-size: 17px; }

    /* Le pratiche diventano tre righe: numero, nome, evento. */
    .pratica { align-items: flex-start; gap: 10px; padding: 13px; }
    .pratica__riga { flex-direction: column; align-items: flex-start; gap: 3px; }
    .pratica__riga--capo { margin-bottom: 7px; position: relative; }
    .pratica__codice { font-size: 13.5px; }
    .pratica__nome { font-size: 15px; white-space: normal; }
    .pratica__evento { white-space: normal; }
    .pratica__stato, .pratica__data { display: inline-block; }
    .pratica__email, .pratica__copia { font-size: 12px; }
    .pratica__azioni { align-self: flex-start; padding-top: 2px; }

    /* I pulsanti a icona si allargano: 34px sono pochi per un pollice. */
    .ico { width: 38px; height: 38px; }
    .gruppo__azioni .ico, .pratica__azioni .ico { width: 40px; height: 40px; }
}

/* --- sotto i 560px: telefono vero ---------------------------------------- */

@media (max-width: 560px) {
    .wrap { padding: 16px 14px 44px; }

    h1 { font-size: 20px; }
    h2 { font-size: 16px; margin-top: 22px; }

    .card { padding: 15px 14px; margin-bottom: 13px; border-radius: var(--radius); }
    .lead { font-size: 14px; }

    /* Le colonne fitte si incolonnano tutte. */
    .scelte,
    .scelte--3,
    .scelte--4 { grid-template-columns: 1fr; }

    .stepper__item { flex: 1 1 100%; }
    table.kv th { width: 120px; }

    .testata { flex-direction: column; gap: 4px; align-items: flex-start; }

    .blocco-usato { flex-wrap: wrap; }
    .blocco-usato__titolo { flex: 1 1 100%; white-space: normal; }

    /* Una finestra trascinabile su un telefono non ha senso: resta ferma. */
    .finestra__barra { cursor: default; }
    .finestra__maniglia { display: none; }

    /* Il prefisso dell'indirizzo va sopra al campo, non di fianco. */
    .indirizzo-comporre__base {
        border-right: 1px solid var(--line-strong);
        border-bottom: none;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        width: 100%;
        padding: 9px 12px;
    }

    .indirizzo-comporre input { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

    /* I pulsanti in fondo ai moduli occupano tutta la riga: sono il gesto
       principale della schermata e devono essere impossibili da mancare. */
    .actions { flex-direction: column-reverse; }
    .actions .btn { width: 100%; }
    .actions--verticali .btn { width: 100%; }

    .accesso {
        margin: 0 auto 32px;
        padding: 24px 20px 22px;
        border-radius: var(--radius);
        border-left: none;
        border-right: none;
        box-shadow: var(--ombra-2);
    }

    .filters, .filtri { padding: 11px 12px; gap: 8px; }
    .filters input, .filters select,
    .filtri input, .filtri select { flex: 1 1 100%; min-width: 0; }

    .stats { gap: 9px; }
    .stat { padding: 13px; }
    .stat__n { font-size: 22px; }

    .sign__canvas { height: 210px; }

    .firma-salvata { gap: 12px; }

    /* Il documento da leggere occupa piu' schermo: scorrere dentro un
       riquadro alto 200px e' scomodo. */
    .doc { max-height: 62vh; padding: 18px 16px; }

    .modifica__pannello {
        position: fixed;
        left: 12px;
        right: 12px;
        width: auto;
        max-height: 74vh;
        overflow-y: auto;
    }

    .errore__testo { position: static; max-width: none; margin-top: 6px; }
}

/* --- schermi molto stretti ----------------------------------------------- */

@media (max-width: 380px) {
    .wrap { padding: 14px 12px 40px; }
    .card { padding: 14px 12px; }
    h1 { font-size: 19px; }
    .hero__title { font-size: 21px; }
    .gruppo__testa { padding: 13px; gap: 10px; }
    .social-row__platform { flex-basis: 96px; max-width: 96px; }
}

/* =====================================================================
   STAMPA — la ricevuta finisce spesso su carta o in PDF dal browser
   ===================================================================== */

@media print {
    body { background: #fff; }
    .side, .topbar, .menu-apri, .side-velo, .actions, .pager, .filters, .filtri { display: none !important; }
    body.ha-menu .principale { margin-left: 0; }
    .wrap { max-width: none; padding: 0; }
    .card, .doc, .table-scroll { border-color: #ccc; box-shadow: none; break-inside: avoid; }
    .doc { max-height: none; overflow: visible; }
    a { color: #000; text-decoration: none; }
}

/* =====================================================================
   CODA — regole di dettaglio emerse dal controllo delle pagine
   ===================================================================== */

/* Intestazione del foglietto: titolo a sinistra, pastiglie a destra. */
.postit__testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.postit__testa h3 { margin: 0; }

/* Aiuto per le viste che nascondono elementi senza attributo hidden. */
.hidden { display: none !important; }

/* =====================================================================
   7. STRUTTURE HyperUI — componenti di pagina

   Queste classi non sostituiscono quelle esistenti: si affiancano.
   Il JavaScript continua a trovare tutto quello che cercava prima.
   ===================================================================== */

/* --- intestazione di pagina ------------------------------------------ */

.hui-testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0 0 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.hui-testa__testo { flex: 1 1 320px; min-width: 0; }

.hui-occhiello {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--p-600);
}

.hui-testa__titolo {
    margin: 0 0 8px;
    font-size: 27px;
    line-height: 1.15;
    letter-spacing: -.025em;
    font-weight: 700;
}

.hui-testa__lead { margin: 0; max-width: 60ch; }

.hui-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: var(--radius-tondo);
    background: var(--g-100);
    border: 1px solid var(--line);
    color: var(--g-600);
    font-family: var(--mono);
    font-size: 11.5px;
    white-space: nowrap;
}

/* --- i passi della procedura ------------------------------------------ */

.hui-passi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.hui-passo {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 190px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--g-500);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--ombra-1);
}

.hui-passo__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-tondo);
    background: var(--g-200);
    color: var(--g-600);
    font-size: 12px;
    font-weight: 700;
}

.hui-passo.is-corrente {
    border-color: var(--p-500);
    background: var(--p-50);
    color: var(--ink);
    font-weight: 650;
    box-shadow: 0 0 0 1px var(--p-100), var(--ombra-1);
}

.hui-passo.is-corrente .hui-passo__n { background: var(--p-600); color: #fff; }

/* --- testata dentro la scheda ------------------------------------------
   La scheda smette di essere un rettangolo con un titolo dentro: prende
   una fascia in alto, staccata dal corpo, con titolo e riga di spiegazione.
   E' il tratto che si riconosce a colpo d'occhio. */

.card { padding: 0; overflow: hidden; }

.card__testa {
    padding: 15px 18px;
    background: var(--g-50);
    border-bottom: 1px solid var(--line);
}

.card__testa h2 { margin: 0; font-size: 15px; font-weight: 650; }

.card__nota {
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-soft);
}

/* Tutto quello che segue la testata e' il corpo, e prende il suo margine. */
.card__testa ~ *:not(.card__testa) { margin-left: 18px; margin-right: 18px; }
.card__testa + * { margin-top: 18px; }
.card > *:last-child { margin-bottom: 18px; }

/* Le schede senza testata restano come prima. */
.card:not(:has(.card__testa)) { padding: 18px; }

.card--evento .card__testa { background: var(--p-50); border-bottom-color: var(--p-200); }
.card--minore .card__testa { background: var(--a-50); border-bottom-color: var(--a-200); }

/* --- barra di conferma in fondo ----------------------------------------- */

.hui-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--ombra-2);
}

.hui-barra__nota { margin: 0; font-size: 13px; color: var(--ink-soft); flex: 1 1 240px; }
.hui-barra__azioni { margin: 0; flex: 0 0 auto; }

@media (max-width: 560px) {
    .hui-testa { padding-bottom: 16px; margin-bottom: 18px; }
    .hui-testa__titolo { font-size: 22px; }
    .hui-passo { flex: 1 1 100%; }
    .card__testa { padding: 13px 14px; }
    .card__testa ~ *:not(.card__testa) { margin-left: 14px; margin-right: 14px; }
    .hui-barra { flex-direction: column; align-items: stretch; padding: 14px; }
    .hui-barra__azioni .btn { width: 100%; }
}