/* ============================================================
   Richieste — stile del modulo
   Si appoggia a css/simple.css (colori, .btn, .input, .card,
   .badge…) e aggiunge solo ciò che lì non c'è.
   ============================================================ */

.hub-larga { max-width: 1480px; }
.hub-h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; line-height: 1.15; }
.hub-h2 { font-size: 17px; font-weight: 700; margin: 0 0 14px; }
.hub-muto { color: var(--ink-3); font-size: 14.5px; margin: 0; font-weight: 400; }
.label .hub-muto, small.hub-muto { font-size: 13px; }
.hub-link { color: var(--ink-2); font-weight: 600; font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; }
.hub-link:hover { color: var(--ink-1); }
.hub-indietro { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; margin-bottom: 14px; }
.hub-titolo { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.hub-pad { padding: 24px; margin-bottom: 16px; }
.hub-riga { display: flex; gap: 10px; align-items: center; }
.hub-riga > .input { flex: 1; min-width: 0; }
.hub-codice { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.hub a:focus-visible, .hub button:focus-visible, .hub summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* ---------- Avvisi ---------- */
.hub-avviso { padding: 13px 16px; border-radius: var(--r-md); font-size: 14.5px; font-weight: 600; margin: 0 0 18px; border: 1px solid transparent; }
.hub-avviso-ok { background: var(--ok-soft); color: var(--ok-ink); border-color: oklch(0.88 0.06 155); }
.hub-avviso-ko { background: var(--danger-soft); color: var(--danger-ink); border-color: oklch(0.88 0.06 30); }
.hub-avviso-neutro { background: var(--surface-sunk); color: var(--ink-2); border-color: var(--rule); }

/* ---------- Tondi con icona ---------- */
.hub-tondo { width: 46px; height: 46px; border-radius: 14px; background: var(--surface-sunk); color: var(--ink-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hub-tondo-ok { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); color: var(--ok-ink); }

/* ============================================================
   Pagina iniziale: i due grandi pulsanti
   Ciascuno occupa almeno un quarto dello schermo.
   ============================================================ */
.hub-porte { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hub-porta { min-height: max(50vh, 300px); border-radius: 28px; padding: 36px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  position: relative; overflow: hidden; box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease; }
.hub-porta:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.hub-porta:active { transform: translateY(0); }
.hub-porta-ritardi { background: var(--surface); border: 2px solid var(--rule); color: var(--ink-1); }
.hub-porta-richieste { background: var(--ink-1); color: #fff; border: 2px solid var(--ink-1); }
.hub-porta-icona { position: absolute; top: 32px; left: 36px; width: 96px; height: 96px; border-radius: 26px; display: flex; align-items: center; justify-content: center; }
.hub-porta-ritardi .hub-porta-icona { background: var(--surface-sunk); color: var(--ink-2); }
.hub-porta-richieste .hub-porta-icona { background: var(--accent); color: var(--ink-1); }
.hub-porta-titolo { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; }
.hub-porta-sotto { font-size: 16.5px; opacity: .72; max-width: 30ch; }
.hub-porta-conto { margin-top: 14px; align-self: flex-start; background: oklch(1 0 0 / 0.12); border-radius: var(--r-pill); padding: 7px 16px; font-size: 15px; }
.hub-porta-conto strong { font-size: 18px; color: var(--accent); margin-right: 3px; }

/* Con il pulsante Circolari (solo per chi le scrive): tre colonne sugli schermi larghi. */
@media (min-width: 721px) { .hub-porte-3 { grid-template-columns: 1fr 1fr 1fr; } }
.hub-porta-circolari { background: var(--surface); border: 2px solid var(--rule); color: var(--ink-1); }
.hub-porta-circolari .hub-porta-icona { background: #dff5e8; color: #1f6b45; }
.hub-porta-circolari .hub-porta-conto { background: var(--surface-sunk); }
.hub-porta-circolari .hub-porta-conto strong { color: #1f6b45; }

.hub-sotto-porte { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 20px; }
a.hub-voce { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: var(--ink-1); }
.hub-voce > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.hub-voce small { color: var(--ink-3); font-size: 13.5px; }
.hub-voce > svg { color: var(--ink-4); }
.hub-voce:hover { box-shadow: var(--shadow-pop); }

/* ============================================================
   Inserimento al banco
   ============================================================ */
.hub-wizard { max-width: 860px; margin: 0 auto; }
.hub-passi { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 28px; }
.hub-passi li { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface-sunk); color: var(--ink-3); font-weight: 600; font-size: 14.5px; }
.hub-passi li span { width: 26px; height: 26px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700; }
.hub-passi li.attivo { background: var(--ink-1); color: #fff; }
.hub-passi li.attivo span { background: var(--accent); color: var(--ink-1); }
.hub-passi li.fatto { color: var(--ok-ink); background: var(--ok-soft); }
.hub-wizard:not(.hub-wizard-js) .hub-passi { display: none; }
.hub-wizard-js .hub-passo { display: none; }
.hub-wizard-js .hub-passo.attivo { display: block; }
.hub-wizard:not(.hub-wizard-js) .hub-passo { margin-bottom: 48px; }
.hub-wizard:not(.hub-wizard-js) [data-vai] { display: none; }
.hub-passo .hub-h1 { margin-bottom: 20px; }

.hub-scelte { display: grid; gap: 12px; margin-bottom: 24px; }
.hub-scelte-4 { grid-template-columns: repeat(4, 1fr); }
.hub-scelte-3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; }
.hub-scelte-cat { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.hub-scelta { position: relative; cursor: pointer; }
.hub-scelta input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.hub-scelta > span { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; min-height: 96px; padding: 16px;
  background: var(--surface); border: 2px solid var(--rule); border-radius: var(--r-lg); font-size: 18px; font-weight: 700; transition: border-color .12s, background .12s, transform .12s; }
.hub-scelta small { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.hub-scelta:hover > span { border-color: var(--ink-4); }
.hub-scelta input:checked + span { border-color: var(--ink-1); background: var(--ink-1); color: #fff; }
.hub-scelta input:checked + span small { color: oklch(1 0 0 / 0.7); }
.hub-scelta input:focus-visible + span { box-shadow: var(--ring); }
.hub-scelta-cat > span { min-height: 84px; font-size: 16px; align-items: flex-start; text-align: left; line-height: 1.25; }
.hub-scelta-bassa > span { min-height: 72px; font-size: 16px; }
.hub-scelta-urgente input:checked + span { background: var(--danger); border-color: var(--danger); }

.hub-campo { margin-bottom: 18px; }
.hub-griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.hub-input-grande { height: 60px; font-size: 18px; }
.hub-area { min-height: 104px; height: auto; padding-top: 12px; padding-bottom: 12px; line-height: 1.45; resize: vertical; display: block; width: 100%; }
.hub-avanti { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.hub-avanti .btn { min-width: 150px; justify-content: center; }

.hub-segmenti { display: flex; background: var(--surface-sunk); border-radius: var(--r-md); padding: 4px; gap: 4px; }
.hub-segmenti label { flex: 1; position: relative; cursor: pointer; }
.hub-segmenti input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.hub-segmenti span { display: block; text-align: center; padding: 10px 6px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.hub-segmenti input:checked + span { background: var(--surface); color: var(--ink-1); box-shadow: var(--shadow-card); }
.hub-segmenti input:focus-visible + span { box-shadow: var(--ring); }

.hub-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink-2); cursor: pointer; margin: 0 0 12px; line-height: 1.4; }
.hub-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink-1); flex-shrink: 0; }
.hub-check-grande { font-size: 16.5px; margin: 0; }
.hub-check-grande input { width: 24px; height: 24px; }
.hub-subito { padding: 18px 20px; margin-bottom: 8px; border: 2px solid var(--ok); background: var(--ok-soft); }
.hub-subito .hub-campo { margin: 14px 0 0; }

.hub-cerca-box { position: relative; }
.hub-risultati { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; overflow: hidden; max-height: 340px; overflow-y: auto; box-shadow: var(--shadow-pop); }
.hub-risultato { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; text-align: left; border-top: 1px solid var(--rule-soft); font-size: 16px; }
.hub-risultato:first-child { border-top: none; }
.hub-risultato:hover, .hub-risultato:focus-visible { background: var(--surface-sunk); }
.hub-risultato span { color: var(--ink-3); font-weight: 600; font-size: 14px; }
.hub-risultato-vuoto { padding: 18px; color: var(--ink-3); text-align: center; }
.hub-chip { display: inline-flex; align-items: center; gap: 10px; background: var(--accent-soft); color: var(--accent-ink); border-radius: var(--r-pill); padding: 9px 10px 9px 18px; font-weight: 700; font-size: 16px; }
.hub-chip button { width: 28px; height: 28px; border-radius: 50%; background: oklch(1 0 0 / 0.7); font-size: 18px; line-height: 1; }
.hub-referenti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.hub-referente { border: 1.5px solid var(--rule); background: var(--surface); border-radius: var(--r-pill); padding: 8px 16px; font-weight: 600; font-size: 14.5px; }
.hub-referente small { color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.hub-referente:hover { border-color: var(--ink-4); }
.hub-referente.scelto { background: var(--ink-1); border-color: var(--ink-1); color: #fff; }
.hub-referente.scelto small { color: oklch(1 0 0 / 0.7); }

/* ---------- Schermata finale ---------- */
.hub-fatto { max-width: 560px; margin: 24px auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hub-codice-grande { font-size: clamp(44px, 8vw, 76px); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1;
  padding: 18px 34px; margin: 10px 0 14px; background: var(--surface); border: 2px dashed var(--rule); border-radius: 24px; }
.hub-fatto .hub-avviso { width: 100%; margin: 0; font-weight: 500; }
.hub-fatto-azioni { display: flex; gap: 12px; margin: 16px 0 10px; flex-wrap: wrap; justify-content: center; }
.hub-promemoria { display: none; }

/* ============================================================
   Tabelle ed elenchi
   ============================================================ */
.hub-cerca { padding: 20px 24px; margin-bottom: 16px; }
.hub-tabella { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.hub-tabella th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); font-weight: 600; padding: 10px 20px; }
.hub-tabella td { padding: 13px 20px; border-top: 1px solid var(--rule-soft); vertical-align: middle; }
.hub-tabella a { text-decoration: underline; text-underline-offset: 3px; }
.hub-elenco { display: flex; flex-direction: column; gap: 10px; }
a.hub-riga-richiesta { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; }
.hub-riga-richiesta:hover { box-shadow: var(--shadow-pop); }
.hub-riga-destra { display: flex; align-items: center; gap: 10px; color: var(--ink-4); flex-shrink: 0; }
.hub-conclusa { opacity: .62; }

/* ---------- Priorità, scadenze, etichette ---------- */
.hub-prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 3px 10px 3px 8px; border-radius: var(--r-pill); background: var(--surface-sunk); color: var(--ink-2); white-space: nowrap; }
.hub-prio::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--ink-4); }
.hub-prio-breve { background: var(--accent-soft); color: var(--accent-ink); }
.hub-prio-breve::before { background: var(--accent-deep); }
.hub-prio-urgente { background: var(--danger); color: #fff; }
.hub-prio-urgente::before { background: #fff; border-radius: 50%; }
.hub-scad { font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.hub-scad-ko { color: var(--danger-ink); background: var(--danger-soft); padding: 3px 9px; border-radius: var(--r-pill); }
.hub-tag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.hub-tag-vis { background: var(--ok-soft); color: var(--ok-ink); }
.hub-tag-int { background: var(--surface-sunk); color: var(--ink-3); }
.hub-tag-scaduta { background: var(--danger-soft); color: var(--danger-ink); }
.hub-conto { min-width: 26px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.hub-conto-ko { background: var(--danger); color: #fff; }

/* ============================================================
   Bacheca
   ============================================================ */
.hub-filtri { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.hub-filtri .input { width: auto; min-width: 190px; height: 44px; font-size: 14.5px; }
.hub-filtri .hub-check { margin: 0 6px; align-items: center; }
/* Le colonne vanno a capo: mai uno scorrimento laterale. */
.hub-colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 14px; align-items: start; }
.hub-colonna { scroll-margin-top: 16px; min-width: 0; }
.hub-colonna-card { display: flex; flex-direction: column; gap: 10px; }
.hub-colonna-senza { min-height: 0 !important; }
.hub-stati { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: 16px; }
.hub-stati a { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); border-top: 3px solid var(--rule); transition: box-shadow .15s ease, transform .15s ease; }
.hub-stati a:hover { box-shadow: var(--shadow-pop); transform: translateY(-1px); }
.hub-stati strong { font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hub-stati span { font-size: 12.5px; font-weight: 600; color: var(--ink-3); line-height: 1.25; }
.hub-stati a.vuoto strong { color: var(--ink-4); }
.hub-stati .hub-stato-nuova { border-top-color: var(--accent); }
.hub-stati .hub-stato-nuova:not(.vuoto) { background: var(--accent-soft); }
.hub-stati .hub-stato-in_lavorazione { border-top-color: var(--ink-1); }
.hub-stati .hub-stato-concluse { border-top-color: var(--ok-ink); }
/* Quando una colonna resta sola su una riga larga, le sue schede si affiancano. */
@container colonna (min-width: 620px) { .hub-colonna-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; } }
.hub-colonna { container: colonna / inline-size; }
@media (max-width: 720px) {
  .hub-filtri .input { flex: 1 1 100%; min-width: 0; width: 100%; }
  .hub-filtri .hub-check { margin: 0; }
  .hub-stati { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hub-stati a { padding: 10px 12px; }
  .hub-stati strong { font-size: 20px; }
  .hub-stati span { font-size: 11.5px; }
  .hub-colonna-senza { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hub-stati a { transition: none; } }
.hub-colonna { background: var(--surface-sunk); border-radius: var(--r-lg); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 140px; }
.hub-colonna header { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 2px; }
.hub-colonna h2 { font-size: 13.5px; font-weight: 700; margin: 0; color: var(--ink-2); }
.hub-colonna-vuota { color: var(--ink-4); font-size: 14px; text-align: center; padding: 18px 0; margin: 0; }
.hub-colonna[data-colonna="concluse"] .hub-card { opacity: .7; }
.hub-card { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-card); border-left: 4px solid var(--rule); display: flex; flex-direction: column; }
.hub-card-breve { border-left-color: var(--accent-deep); }
.hub-card-urgente { border-left-color: var(--danger); }
.hub-card-scaduta { box-shadow: 0 0 0 1.5px var(--danger), var(--shadow-card); }
.hub-card-corpo { padding: 12px 14px; display: block; }
.hub-card-corpo:hover .hub-card-oggetto { text-decoration: underline; text-underline-offset: 3px; }
.hub-card-testa { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; flex-wrap: wrap; }
.hub-card-oggetto { font-weight: 700; font-size: 15px; line-height: 1.3; margin-bottom: 4px; overflow-wrap: anywhere; }
.hub-card-meta { font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.hub-card-piede { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.hub-card-dest { font-size: 12.5px; color: var(--ink-2); font-weight: 600; margin-top: 8px; }
.hub-card-assegna { border-radius: 12px; margin: 0 10px 10px; justify-content: center; flex-wrap: wrap; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; line-height: 1.25; }
.hub-card-assegna span { font-weight: 500; opacity: .8; font-size: 12.5px; }

.hub-dialogo { border: none; border-radius: var(--r-lg); padding: 28px; width: min(440px, calc(100vw - 32px)); box-shadow: var(--shadow-pop); color: var(--ink-1); }
.hub-dialogo::backdrop { background: oklch(0.2 0.035 260 / 0.45); }
.hub-dialogo h2 { font-size: 20px; margin: 0 0 16px; }
.hub-dialogo .input { width: 100%; }
.hub-dialogo-azioni { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ============================================================
   Scheda
   ============================================================ */
.hub-scheda { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.hub-scheda-codice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 15px; }
.hub-dati { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 24px; margin: 0; }
.hub-dato dt { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); font-weight: 600; margin-bottom: 2px; }
.hub-dato dd { margin: 0; font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.hub-dato dd .hub-muto { font-weight: 400; }
.hub-dato a { text-decoration: underline; text-underline-offset: 3px; }
.hub-descrizione { margin-top: 20px; padding: 16px 18px; background: var(--surface-sunk); border-radius: var(--r-md); font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.hub-esito { margin-top: 14px; padding: 14px 18px; background: var(--ok-soft); color: var(--ok-ink); border-radius: var(--r-md); font-size: 15px; line-height: 1.5; }
.hub-nota-voce { margin: 14px 0 0; font-size: 14px; font-weight: 600; color: var(--danger-ink); }
.hub-azioni { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
.hub-blocco { background: var(--surface); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-card); }
.hub-blocco h3 { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.hub-blocco-interno { background: var(--surface-sunk); box-shadow: none; border: 1.5px dashed var(--rule); }
.hub-azione + .hub-azione { margin-top: 14px; }
.hub-azione .hub-area { margin-bottom: 10px; min-height: 84px; }
.hub-azione .hub-check { margin: 0 0 12px; }

/* ---------- Timeline ---------- */
.hub-timeline { list-style: none; padding: 0; margin: 0; }
.hub-ev { position: relative; padding: 0 0 18px 24px; border-left: 2px solid var(--rule); margin-left: 6px; }
.hub-ev:last-child { padding-bottom: 0; border-left-color: transparent; }
.hub-ev::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--ink-4); }
.hub-ev-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hub-ev-titolo { font-weight: 700; font-size: 14.5px; }
.hub-ev-quando { font-size: 13px; color: var(--ink-3); margin-left: auto; }
.hub-ev-testo { margin-top: 6px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
/* Le note interne si distinguono a colpo d'occhio dai messaggi che il richiedente vede. */
.hub-ev-interno .hub-ev-testo { background: var(--surface-sunk); border: 1.5px dashed var(--rule); border-radius: var(--r-sm); padding: 10px 14px; color: var(--ink-2); }
.hub-ev-scuola::before { border-color: var(--ink-1); background: var(--ink-1); }
.hub-ev-scuola .hub-ev-testo { background: var(--accent-soft); border-radius: var(--r-sm); padding: 10px 14px; }
.hub-ev-richiedente::before { border-color: var(--ok); background: var(--ok); }
.hub-ev-richiedente .hub-ev-testo { background: var(--ok-soft); border-radius: var(--r-sm); padding: 10px 14px; }

/* ============================================================
   Configurazione
   ============================================================ */
.hub-schede { display: flex; flex-wrap: wrap; gap: 4px; background: var(--surface-sunk); padding: 4px; border-radius: var(--r-md); margin-bottom: 20px; }
.hub-schede a { padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 14.5px; color: var(--ink-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.hub-schede a.attiva { background: var(--surface); color: var(--ink-1); box-shadow: var(--shadow-card); }
.hub-voce-conf > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; }
.hub-voce-conf > summary::-webkit-details-marker { display: none; }
.hub-voce-conf > summary > span:first-child { display: flex; flex-direction: column; line-height: 1.35; }
.hub-voce-conf > summary small { color: var(--ink-3); font-size: 13.5px; }
.hub-voce-conf[open] > summary { border-bottom: 1px solid var(--rule-soft); }
.hub-voce-conf .hub-form { padding: 20px; }
.hub-voce-nuova { border: 2px dashed var(--rule); box-shadow: none; background: transparent; }
.hub-voce-nuova[open] { background: var(--surface); }
.hub-form .input { width: 100%; }
.hub-checks { display: flex; flex-direction: column; justify-content: center; }
.hub-checks .hub-check { margin-bottom: 8px; }
.hub-nota-sezione { margin-bottom: 14px; }
.hub-utenti { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; margin: 16px 0 20px; }
.hub-giorni { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.hub-form .hub-h2 { margin-top: 26px; }
.hub-form .hub-h2:first-of-type { margin-top: 0; }
.hub-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 16px; }
.hub-kpi .card { padding: 20px; text-align: center; display: flex; flex-direction: column; }
.hub-kpi strong { font-size: 34px; font-weight: 800; line-height: 1.1; }
.hub-kpi span { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.hub-kpi-ko strong { color: var(--danger); }
.hub code { background: var(--surface-sunk); padding: 1px 6px; border-radius: 6px; font-size: 13.5px; }

/* ============================================================
   Pagine pubbliche (tracciamento e scheda dal link)
   Carattere di sistema: nessuna risorsa da altri siti.
   ============================================================ */
body.hub-pubblica { height: auto; min-height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; padding: 0 16px 40px; }
.hub-pub-testa { max-width: 640px; margin: 0 auto; padding: 28px 4px 20px; }
.hub-pub-scuola { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.hub-pub-sotto { color: var(--ink-3); font-size: 14px; }
.hub-pub-corpo { max-width: 640px; margin: 0 auto; }
.hub-pub-corpo:has(.hub-pub-largo) { max-width: 1100px; }
.hub-pub-testa:has(+ .hub-pub-corpo .hub-pub-largo) { max-width: 1100px; }
.hub-pub-card { padding: 26px; margin-bottom: 16px; }
.hub-pub-codice { font-size: 14px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.04em; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.hub-pub-stato { margin: 22px 0 6px; padding: 16px 20px; border-radius: var(--r-md); background: var(--surface-sunk); display: flex; flex-direction: column; }
.hub-pub-stato span { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 600; }
.hub-pub-stato strong { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.hub-pub-stato-chiusa { background: var(--ok-soft); }
.hub-pub-stato-chiusa strong { color: var(--ok-ink); }
.hub-pub-stato-in_attesa_richiedente { background: var(--accent-soft); }
.hub-pub-stato-in_attesa_richiedente strong { color: var(--accent-ink); }
.hub-pub-stato-annullata strong { color: var(--ink-3); }
.hub-pub-riga { margin: 16px 0 0; font-size: 15px; color: var(--ink-2); }
.hub-pub-risposta { border: 2px solid var(--accent); }
.hub-pub-risposta .hub-muto { margin-bottom: 16px; }
.hub-pub-risposta .hub-area { margin-bottom: 14px; min-height: 130px; }
.hub-pub-piede { max-width: 640px; margin: 24px auto 0; color: var(--ink-3); font-size: 13px; text-align: center; }
.hub-pub-piede details { text-align: left; background: var(--surface); border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 14px; }
.hub-pub-piede summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.hub-privacy { margin-top: 12px; line-height: 1.55; }

.hub-avanzamento { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; margin: 20px 0 0; }
.hub-avanzamento li { position: relative; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink-4); padding-top: 22px; line-height: 1.25; }
.hub-avanzamento li span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--rule); z-index: 1; }
.hub-avanzamento li::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2.5px; background: var(--rule); }
.hub-avanzamento li:first-child::before { display: none; }
.hub-avanzamento li.fatto, .hub-avanzamento li.attuale { color: var(--ink-1); }
.hub-avanzamento li.fatto span { background: var(--ink-1); border-color: var(--ink-1); }
.hub-avanzamento li.fatto::before, .hub-avanzamento li.attuale::before { background: var(--ink-1); }
.hub-avanzamento li.attuale span { border-color: var(--ink-1); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* ============================================================
   Schermi stretti
   ============================================================ */
@media (max-width: 900px) {
  .hub-scheda { grid-template-columns: 1fr; }
  .hub-azioni { position: static; }
}
@media (max-width: 720px) {
  .hub .container { padding-left: 16px; padding-right: 16px; }
  .hub-porte { grid-template-columns: 1fr; }
  .hub-porta { min-height: max(28vh, 220px); padding: 24px; }
  .hub-porta-icona { top: 20px; left: 24px; width: 68px; height: 68px; border-radius: 20px; }
  .hub-porta-icona svg { width: 38px; height: 38px; }
  .hub-scelte-4 { grid-template-columns: 1fr 1fr; }
  .hub-scelte-3 { grid-template-columns: 1fr; }
  .hub-griglia-2 { grid-template-columns: 1fr; }
  .hub-passi li { font-size: 0; padding: 8px; justify-content: center; }
  .hub-h1 { font-size: 24px; }
  .hub-kpi { grid-template-columns: 1fr; }
  .hub-tabella th:nth-child(5), .hub-tabella td:nth-child(5) { display: none; }
  .hub-riga { flex-wrap: wrap; }
  .hub .topnav { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-porta, .hub-scelta > span { transition: none; }
}

/* ============================================================
   Stampa: il promemoria per chi ha fatto la richiesta
   ============================================================ */
@media print {
  .topbar, .hub-fatto, .hub-avviso { display: none !important; }
  html, body, .scroll { height: auto !important; overflow: visible !important; background: #fff !important; }
  .hub-promemoria { display: block; text-align: center; font-size: 13pt; line-height: 1.6; color: #000; padding: 6mm; }
  .hub-promemoria-scuola { font-weight: 700; }
  .hub-promemoria-codice { font-size: 30pt; font-weight: 800; margin: 3mm 0; letter-spacing: 0.02em; }
  .hub-promemoria-nota { font-size: 10pt; margin-top: 3mm; }
}

/* Nei riquadri stretti delle azioni il pulsante va a capo sotto il campo. */
.hub-azioni .hub-riga { flex-wrap: wrap; }
.hub-azioni .hub-riga > .input { flex: 1 1 210px; }

/* ============================================================
   Appuntamenti
   ============================================================ */
.hub-app { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 20px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-ink); }
.hub-app > span:last-child { display: flex; flex-direction: column; line-height: 1.3; font-size: 15.5px; }
.hub-app small { font-size: 13.5px; opacity: .85; }
.hub-app-giorno { width: 54px; height: 54px; border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; line-height: 1.1; }
.hub-app-giorno strong { font-size: 21px; letter-spacing: -0.02em; }
.hub-app-passato { background: var(--surface-sunk); color: var(--ink-2); }
.hub-pub-card .hub-app { margin: 18px 0 0; }

.hub-slot-giorni { display: flex; flex-direction: column; gap: 18px; }
.hub-slot-giorno { border: none; padding: 0; margin: 0; min-width: 0; }
.hub-slot-giorno legend { font-weight: 700; font-size: 15px; padding: 0; margin-bottom: 8px; }
.hub-slot-giorno legend::first-letter { text-transform: uppercase; }
.hub-slot-ore { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.hub-slot { position: relative; cursor: pointer; }
.hub-slot input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.hub-slot span { display: block; text-align: center; padding: 12px 6px; border: 1.5px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); font-weight: 700; font-size: 15.5px; font-variant-numeric: tabular-nums; transition: border-color .12s, background .12s; }
.hub-slot:hover span { border-color: var(--ink-4); }
.hub-slot input:checked + span { background: var(--ink-1); border-color: var(--ink-1); color: #fff; }
.hub-slot input:focus-visible + span { box-shadow: var(--ring); }

.hub-due-colonne { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.hub-griglia-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.hub-regole { list-style: none; padding: 0; margin: 0 0 20px; }
.hub-regole li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--rule-soft); font-size: 15.5px; }
.hub-regole li:first-child { border-top: none; padding-top: 0; }
.hub-regole small { display: block; color: var(--ink-3); font-size: 13.5px; }
.hub-togli { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-sunk); color: var(--ink-3); font-size: 20px; line-height: 1; }
.hub-togli:hover { background: var(--danger-soft); color: var(--danger-ink); }
.hub-form-interna { background: var(--surface-sunk); border-radius: var(--r-md); padding: 18px; }
.hub-form-interna .btn { margin-top: 2px; }
.hub-giorni-pill { gap: 6px; margin: 8px 0 16px; }
.hub-giorni-pill label { position: relative; cursor: pointer; }
.hub-giorni-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.hub-giorni-pill span { display: block; padding: 9px 15px; border-radius: var(--r-pill); background: var(--surface); border: 1.5px solid var(--rule); font-weight: 600; font-size: 14.5px; }
.hub-giorni-pill input:checked + span { background: var(--ink-1); border-color: var(--ink-1); color: #fff; }
.hub-giorni-pill input:focus-visible + span { box-shadow: var(--ring); }
.hub-anteprima { position: sticky; top: 16px; }
.hub-anteprima-giorno { display: flex; flex-direction: column; padding: 10px 12px; margin: 0 -12px; border-radius: var(--r-sm); font-size: 14.5px; line-height: 1.3; text-transform: none; }
.hub-anteprima-giorno span { color: var(--ink-3); font-size: 13.5px; }
a.hub-anteprima-giorno:hover, .hub-anteprima-giorno.attivo { background: var(--surface-sunk); }

.hub-agenda-testa { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; text-align: center; }
.hub-agenda-testa h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; margin: 0; }
.hub-agenda-lista { list-style: none; padding: 0; margin: 0; }
.hub-agenda-lista li { display: flex; align-items: flex-start; gap: 18px; padding: 16px 0; border-top: 1px solid var(--rule-soft); }
.hub-agenda-ora { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 62px; line-height: 1.1; }
.hub-agenda-ora small { display: block; font-size: 13px; font-weight: 500; color: var(--ink-3); margin-top: 3px; }
.hub-agenda-chi { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 15.5px; min-width: 0; }
.hub-agenda-chi > span { color: var(--ink-2); }
.hub-agenda-chi small { color: var(--ink-3); font-size: 13.5px; }

@media (max-width: 900px) {
  .hub-due-colonne { grid-template-columns: 1fr; }
  .hub-anteprima { position: static; }
  .hub-griglia-3 { grid-template-columns: 1fr 1fr; }
}
@media print {
  .hub-non-stampa, .hub-schede, .hub-anteprima { display: none !important; }
  .hub-due-colonne { display: block; }
  .hub-agenda { box-shadow: none !important; border: none !important; padding: 0 !important; }
  .hub-agenda-lista li { break-inside: avoid; }
  .hub .container { padding: 0 !important; max-width: none; }
}

/* ============================================================
   Pagina pubblica «Scrivi alla scuola»
   ============================================================ */
/* Campo-trappola: fuori dallo schermo, non «display:none», che i programmi automatici riconoscono. */
.hub-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hub-pub-card.hub-form .hub-scelta > span { font-size: 15.5px; min-height: 64px; }
.hub-pub-card.hub-form .hub-scelta > span { height: 100%; }
.hub-pub-card.hub-form .hub-griglia-2 { align-items: end; }

/* ============================================================
   Uffici e persone (Configurazione → Destinatari)
   ============================================================ */
.hub-persone { padding: 18px 20px 4px; }
.hub-persone + .hub-persone { border-top: 1px solid var(--rule-soft); }
.hub-persone h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 700; margin: 0 0 12px; }
.hub-persone .hub-form { padding: 0 0 16px; }
.hub-persona { border: 1.5px solid var(--rule-soft); border-radius: var(--r-md); margin-bottom: 8px; background: var(--surface); }
.hub-persona > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.hub-persona > summary::-webkit-details-marker { display: none; }
.hub-persona > summary > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.hub-persona > summary small { color: var(--ink-3); font-size: 13.5px; overflow-wrap: anywhere; }
.hub-persona .hub-form-interna { margin: 0 12px 12px; padding: 16px; }
.hub-persona-nuova { border-style: dashed; background: transparent; }
.hub-persona-nuova > summary > span { flex: 1; }
.hub-schede a small { font-weight: 500; color: var(--ink-4); font-size: 12.5px; }

/* Logo della scuola nell'intestazione delle pagine pubbliche */
.hub-pub-testa { display: flex; align-items: center; gap: 14px; }
.hub-pub-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: var(--surface); padding: 4px; box-shadow: var(--shadow-card); flex-shrink: 0; }

/* Su schermo stretto l'icona dei due pulsanti iniziali non deve coprire il titolo. */
@media (max-width: 720px) {
  .hub-porta { padding-top: 104px; }
}
.hub-crediti { margin-top: 10px; font-size: 10.5px; letter-spacing: .01em; color: var(--ink-4); text-align: center; }

/* ============================================================
   Guida «Chi può fare cosa»
   ============================================================ */
.hub-guida { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.hub-guida > .card { margin: 0; }
.hub-guida .hub-h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: 18px; }
.hub-guida ul { margin: 0; padding-left: 20px; }
.hub-guida li { font-size: 15px; line-height: 1.5; margin-bottom: 8px; color: var(--ink-2); }
.hub-guida li:last-child { margin-bottom: 0; }
.hub-guida li strong { color: var(--ink-1); }
.hub-guida-tuo { box-shadow: 0 0 0 2px var(--ok), var(--shadow-card); }
.hub-guida-tabella { grid-column: 1 / -1; padding: 20px 0 12px; }
.hub-guida-tabella .hub-h2 { padding: 0 20px; }
.hub-tabella-scorri { overflow-x: auto; }
.hub-guida-tabella td, .hub-guida-tabella thead th { text-align: center; }
.hub-guida-tabella tbody th { text-align: left; font-weight: 500; font-size: 14.5px; text-transform: none; letter-spacing: 0; color: var(--ink-1); padding: 12px 20px; border-top: 1px solid var(--rule-soft); }
.hub-guida-sezione th { background: var(--surface-sunk); font-weight: 700 !important; font-size: 12.5px !important; text-transform: uppercase !important; letter-spacing: .05em !important; color: var(--ink-3) !important; }
.hub-si { display: inline-block; min-width: 34px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok-ink); font-weight: 700; font-size: 13px; }
.hub-no { color: var(--ink-4); }
.hub-in-parte { font-size: 13px; color: var(--accent-ink); font-weight: 600; }
@media (max-width: 900px) { .hub-guida { grid-template-columns: 1fr; } }

/* Campi per assegnare a una persona indicando l'email */
.hub-persona-campi { margin-top: 12px; padding: 14px; border-radius: var(--r-md); background: var(--surface-sunk); }
.hub-persona-campi .input { width: 100%; margin-bottom: 10px; }
.hub-persona-campi .hub-muto { font-size: 13px; }

/* ============================================================
   Presa in carico: chi segue la richiesta
   ============================================================ */
.hub-tag-attesa { background: var(--accent-soft); color: var(--accent-ink); }
.hub-chi { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.hub-chi svg { color: var(--ink-3); }
.hub-carico { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-sunk); color: var(--ink-2); }
.hub-carico:last-child { margin-bottom: 0; }
.hub-carico span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hub-carico strong { font-size: 14.5px; color: var(--ink-1); }
.hub-carico small { font-size: 12.5px; color: var(--ink-3); }
.hub-carico-mia { background: var(--ok-soft); color: var(--ok-ink); }
.hub-carico-mia strong, .hub-carico-mia small { color: var(--ok-ink); }

/* Elenco dell'ufficio: schede per chi la segue */
.hub-viste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hub-vista { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 8px 0 16px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2);
  font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow-card); transition: box-shadow .15s ease, background .15s ease; }
.hub-vista:hover { box-shadow: var(--shadow-pop); }
.hub-vista .hub-conto { background: var(--surface-sunk); }
.hub-vista.attiva { background: var(--ink-1); color: var(--surface); }
.hub-vista.attiva .hub-conto { background: rgba(255,255,255,.18); color: inherit; }
.hub-vista-attesa:not(.attiva) .hub-conto-pieno { background: var(--accent); color: var(--ink-1); }
.hub-riga-chi { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 3px 10px 3px 7px; border-radius: var(--r-pill); background: var(--surface-sunk); color: var(--ink-2); white-space: nowrap; }
.hub-riga-chi-mia { background: var(--ok-soft); color: var(--ok-ink); }
.hub-riga-chi-nessuno { background: var(--accent-soft); color: var(--accent-ink); }
.hub-riga-da-prendere { box-shadow: inset 4px 0 0 var(--accent), var(--shadow-card); }
.hub-card-chi { font-weight: 500; color: var(--ink-3); }
@media (max-width: 640px) {
  a.hub-riga-richiesta { flex-direction: column; align-items: stretch; }
  .hub-riga-destra { justify-content: space-between; flex-wrap: wrap; }
}

/* Configurazione: creare l'account insieme alla persona */
.hub-account-nuovo { margin: 4px 0 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-sunk); }
.hub-account-nuovo > summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--ink-2); }
.hub-account-nuovo[open] > summary { margin-bottom: 12px; }

/* ============================================================
   Pagina iniziale secondo il ruolo
   ============================================================ */
.hub-sezione { margin-bottom: 28px; }
.hub-sezione-testa { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.hub-sezione-testa .hub-h2 { display: flex; align-items: center; gap: 10px; }
.hub-sezione-testa .hub-conto { background: var(--surface-sunk); }
.hub-sezione-testa .hub-conto-attesa { background: var(--accent); color: var(--ink-1); }
.hub-vuoto { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 15px; margin: 0; }
.hub-vuoto svg { color: var(--ok-ink); flex-shrink: 0; }

/* La propria agenda in primo piano */
.hub-mia-agenda { margin-bottom: 24px; padding: 28px; border-top: 4px solid var(--accent); }
.hub-mia-agenda .hub-sezione-testa { margin-bottom: 6px; }
.hub-mia-agenda .hub-agenda-lista li:first-child { border-top: 0; }
.hub-mia-agenda .hub-agenda-ora { font-size: 24px; min-width: 76px; }
.hub-agenda-vuota { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; color: var(--ink-3); font-size: 15.5px; }
.hub-agenda-poi { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule-soft); display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.hub-agenda-poi h3 { grid-column: 1 / -1; margin: 0 0 2px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); font-weight: 600; }
.hub-agenda-poi a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-sunk); font-size: 14px; min-width: 0; }
.hub-agenda-poi a:hover { background: var(--accent-soft); }
.hub-agenda-poi a span { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Con l'agenda sopra, i due pulsanti grandi diventano più bassi */
.hub-porte-basse .hub-porta { min-height: 190px; padding: 28px; }
.hub-porte-basse .hub-porta-icona { width: 64px; height: 64px; border-radius: 18px; top: 24px; left: auto; right: 28px; }
.hub-porte-basse .hub-porta-icona svg { width: 34px; height: 34px; }
.hub-porte-basse .hub-porta-titolo { font-size: clamp(24px, 2.6vw, 32px); }

/* ============================================================
   Agenda dell'ufficio con più sportelli
   ============================================================ */
.hub-sportelli { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -4px 0 18px; padding: 12px 16px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-ink); font-size: 14.5px; }
.hub-sportelli > strong { font-size: 16px; white-space: nowrap; }
.hub-sportelli > span { flex: 1; min-width: 220px; }
.hub-sportelli .hub-link { color: inherit; }
.hub-slot span small { font-weight: 500; font-size: 11.5px; opacity: .7; margin-left: 2px; }
.hub-agenda-modo { border: 1.5px solid var(--rule); border-radius: var(--r-md); padding: 14px 16px 6px; margin: 4px 0 16px; }
.hub-agenda-modo legend { padding: 0 8px; font-size: 13px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.hub-agenda-modo .hub-check { align-items: flex-start; margin-bottom: 10px; }
.hub-agenda-modo .hub-check span { font-weight: 400; }
.hub-agenda-sportelli { margin: 0 0 14px 30px; }
.hub-agenda-sportelli .hub-muto { font-size: 13px; margin-top: 6px; }
.hub-agenda-modo:has(input[value="persone"]:checked) .hub-agenda-sportelli { display: none; }

/* Avviso cliccabile (richieste ferme) */
a.hub-avviso-link { display: block; font-weight: 500; transition: box-shadow .15s ease; }
a.hub-avviso-link:hover { box-shadow: var(--shadow-pop); }

/* ============================================================
   Panoramica delle richieste
   ============================================================ */
.hub-cr-testa { align-items: flex-end; }
.hub-cr-saluto { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; color: var(--ink-3); }
.hub-cr-azioni { display: flex; gap: 10px; flex-wrap: wrap; }
.hub-cr-numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.hub-cr-numero { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); border-top: 4px solid var(--rule); min-width: 0;
  transition: transform .15s ease, box-shadow .15s ease; }
.hub-cr-numero:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.hub-cr-numero strong { font-size: 38px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hub-cr-numero span { font-size: 15px; font-weight: 700; }
.hub-cr-numero small { font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }
.hub-cr-numero.vuoto strong { color: var(--ink-4); }
.hub-cr-attesa { border-top-color: var(--accent); background: var(--accent-soft); }
.hub-cr-attesa small { color: var(--accent-ink); }
.hub-cr-allarme { border-top-color: var(--danger); }
.hub-cr-allarme strong { color: var(--danger-ink); }
.hub-cr-ok { border-top-color: var(--ok-ink); }
.hub-cr-corpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.hub-cr-principale, .hub-cr-lato { min-width: 0; }
.hub-cr-lato { display: flex; flex-direction: column; gap: 16px; }
.hub-cr-lato .hub-mia-agenda { margin-bottom: 0; padding: 22px; }
.hub-cr-lato .hub-mia-agenda .hub-agenda-ora { font-size: 20px; min-width: 62px; }
.hub-cr-lato .hub-agenda-poi { grid-template-columns: 1fr; }
.hub-cr-scheda { margin: 0; padding: 22px; }
.hub-cr-elenco, .hub-cr-carico { list-style: none; margin: 0; padding: 0; }
.hub-cr-elenco li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule-soft); font-size: 14.5px; }
.hub-cr-elenco li:first-child { border-top: 0; padding-top: 0; }
.hub-cr-elenco small { font-weight: 500; color: var(--ink-3); }
.hub-cr-carico li { padding: 11px 0; border-top: 1px solid var(--rule-soft); }
.hub-cr-carico li:first-child { border-top: 0; padding-top: 0; }
.hub-cr-carico li > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.hub-cr-carico li > div:first-child span { overflow-wrap: anywhere; }
.hub-cr-barra { height: 6px; border-radius: 3px; background: var(--surface-sunk); margin: 7px 0 5px; overflow: hidden; }
.hub-cr-barra i { display: block; height: 100%; border-radius: 3px; background: var(--ink-1); }
.hub-cr-carico small { font-size: 12.5px; color: var(--ink-3); }
.hub-cr-carico em { font-style: normal; font-weight: 700; color: var(--danger-ink); }
@media (max-width: 1100px) { .hub-cr-corpo { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .hub-cr-numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-cr-numero { padding: 14px 16px; }
  .hub-cr-numero strong { font-size: 30px; }
  .hub-cr-azioni { width: 100%; }
  .hub-cr-azioni .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hub-cr-numero { transition: none; } }

/* ============================================================
   Scheda della richiesta: struttura più leggibile
   ============================================================ */
/* A che punto è */
.hub-avanzamento-scheda { margin: 0 0 22px; padding: 18px 8px 4px; background: var(--surface-sunk); border-radius: var(--r-md); }
.hub-avanzamento-scheda li { font-size: 13px; padding-bottom: 12px; }
.hub-passi-annullata { margin: 0 0 20px; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-sunk); color: var(--ink-3); font-weight: 700; text-align: center; }

/* I tre riquadri dei dati */
.hub-sd { padding: 20px 0; border-top: 1px solid var(--rule-soft); }
.hub-sd:first-of-type { border-top: 0; padding-top: 0; }
.hub-sd:last-child { padding-bottom: 0; }
.hub-sd-titolo { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 16px; font-weight: 700; }
.hub-sd-titolo svg { color: var(--ink-3); }
.hub-sd .hub-descrizione { margin-top: 14px; font-size: 16px; }
.hub-sd .hub-app { margin: 0 0 16px; }

/* Cosa fare adesso */
.hub-prossimo { padding: 20px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); border-left: 5px solid var(--rule); }
.hub-prossimo-et { margin: 0 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.hub-prossimo h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.hub-prossimo-testo { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.hub-prossimo-testo:last-child { margin-bottom: 0; }
.hub-prossimo-testo .hub-carico { display: flex; }
.hub-prossimo .hub-azione + .hub-azione, .hub-prossimo .hub-prossimo-due + .hub-azione { margin-top: 10px; }
.hub-prossimo-attesa { border-left-color: var(--accent); background: var(--accent-soft); }
.hub-prossimo-attesa .hub-prossimo-et { color: var(--accent-ink); }
.hub-prossimo-mia { border-left-color: var(--ok-ink); }
.hub-prossimo-ok { border-left-color: var(--ok-ink); background: var(--ok-soft); }
.hub-prossimo-ok h3, .hub-prossimo-ok .hub-prossimo-testo { color: var(--ok-ink); }
.hub-prossimo-spento { background: var(--surface-sunk); box-shadow: none; }
.hub-prossimo-due { display: flex; gap: 10px; flex-wrap: wrap; }
.hub-prossimo-due .btn { flex: 1 1 150px; justify-content: center; }
.hub-oppure { display: flex; align-items: center; gap: 12px; margin: 14px 0; font-size: 12.5px; color: var(--ink-3); }
.hub-oppure::before, .hub-oppure::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* Cosa puoi fare: voci da aprire una per volta */
.hub-az-gruppo { display: flex; flex-direction: column; gap: 8px; }
.hub-az-titolo { margin: 8px 0 2px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.hub-az-titolo small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.hub-az { display: block; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-card); color: var(--ink-1); }
.hub-az > summary, .hub-az-riga { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; border-radius: var(--r-md); }
.hub-az > summary::-webkit-details-marker { display: none; }
.hub-az > summary:hover, a.hub-az-link:hover { background: var(--surface-sunk); }
.hub-az-fissa .hub-az-riga { cursor: default; }
.hub-az-icona { width: 38px; height: 38px; border-radius: 11px; background: var(--surface-sunk); color: var(--ink-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hub-az-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.hub-az-testo strong { font-size: 15px; }
.hub-az-testo small { font-size: 12.5px; color: var(--ink-3); }
.hub-az-freccia { color: var(--ink-4); display: flex; transition: transform .15s ease; }
.hub-az[open] > summary { background: var(--surface-sunk); border-radius: var(--r-md) var(--r-md) 0 0; }
.hub-az[open] .hub-az-freccia { transform: rotate(90deg); }
.hub-az[open] .hub-az-icona { background: var(--ink-1); color: var(--surface); }
.hub-az-corpo { padding: 16px; }
.hub-az-interna { box-shadow: none; border: 1.5px dashed var(--rule); background: transparent; }
.hub-az-pericolo .hub-az-icona { color: var(--danger-ink); }
.hub-azioni { gap: 14px; }
@media (prefers-reduced-motion: reduce) { .hub-az-freccia { transition: none; } }
/* Su schermi stretti «Cosa fare adesso» viene prima dei dati: è la prima cosa che serve. */
@media (max-width: 900px) { .hub-scheda > .hub-azioni { order: -1; } }

/* ============================================================
   Appuntamenti del giorno (calendario unico per l'ingresso)
   ============================================================ */
.hub-gi { padding: 26px; }
/* Otto toni, uno per area: sfondo tenue, bordo e pallino pieni. Leggibili anche in stampa. */
.hub-gi-t0 { --gi: oklch(0.55 0.15 255); --gi-s: oklch(0.95 0.03 255); }
.hub-gi-t1 { --gi: oklch(0.58 0.15 150); --gi-s: oklch(0.95 0.04 150); }
.hub-gi-t2 { --gi: oklch(0.62 0.16 55);  --gi-s: oklch(0.96 0.04 70); }
.hub-gi-t3 { --gi: oklch(0.55 0.18 330); --gi-s: oklch(0.96 0.03 330); }
.hub-gi-t4 { --gi: oklch(0.56 0.13 200); --gi-s: oklch(0.95 0.03 200); }
.hub-gi-t5 { --gi: oklch(0.55 0.19 25);  --gi-s: oklch(0.96 0.03 25); }
.hub-gi-t6 { --gi: oklch(0.52 0.17 290); --gi-s: oklch(0.95 0.03 290); }
.hub-gi-t7 { --gi: oklch(0.50 0.03 260); --gi-s: oklch(0.95 0.008 260); }
.hub-gi-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 18px 0 6px; }
.hub-gi-legenda li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: var(--r-pill); background: var(--gi-s); font-size: 13.5px; font-weight: 600; }
.hub-gi-legenda i, .hub-gi-con i { width: 11px; height: 11px; border-radius: 50%; background: var(--gi); flex-shrink: 0; }
.hub-gi-legenda small { font-weight: 700; color: var(--ink-3); }
.hub-gi-ore { margin-top: 14px; }
.hub-gi-ora { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 14px; padding: 14px 0; border-top: 1px solid var(--rule-soft); }
.hub-gi-ora:first-child { border-top: 0; }
.hub-gi-ora h3 { margin: 6px 0 0; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-3); line-height: 1; }
.hub-gi-ora h3 small { font-size: 13px; font-weight: 600; }
.hub-gi-ora ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hub-gi-app { display: grid; grid-template-columns: 92px minmax(0, 1.2fr) minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 12px 16px; border-radius: var(--r-md); background: var(--gi-s); border-left: 5px solid var(--gi); }
.hub-gi-quando { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hub-gi-quando small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
.hub-gi-chi { font-size: 16.5px; overflow-wrap: anywhere; }
.hub-gi-con { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; min-width: 0; }
.hub-gi-con > span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.hub-gi-con small { font-weight: 400; color: var(--ink-3); font-size: 13px; }
.hub-gi-app.passato { opacity: .5; }
.hub-gi-app.prossimo { box-shadow: 0 0 0 2px var(--gi); }
/* Dettaglio e filtro per area, usati anche dal calendario di chi gestisce le richieste. */
.hub-gi-dati { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13.5px; color: var(--ink-2); margin: 0 0 10px; }
.hub-gi-descr { font-size: 14.5px; color: var(--ink-2); background: var(--surface-sunk); border-radius: var(--r-md); padding: 10px 12px; margin: 10px 0 0; overflow-wrap: anywhere; }
.hub-gi-filtro li { padding: 0; }
.hub-gi-filtro a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; color: inherit; text-decoration: none; border-radius: var(--r-pill); }
.hub-gi-filtro a:focus-visible { box-shadow: var(--ring); }
.hub-gi-filtro li.spento { opacity: .45; }
.hub-gi-filtro li.hub-gi-tutte { background: var(--surface-sunk); }
@media (max-width: 720px) {
  .hub-gi { padding: 18px; }
  .hub-gi-ora { grid-template-columns: 1fr; }
  .hub-gi-ora h3 { margin: 0 0 8px; font-size: 15px; }
  .hub-gi-app { grid-template-columns: 74px minmax(0, 1fr); }
  .hub-gi-con { grid-column: 2; }
}
@media print {
  .hub-gi { box-shadow: none; padding: 0; }
  .hub-gi-app { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hub-gi-app.passato { opacity: 1; }
}

/* ============================================================
   Agende di tutti: calendario a griglia oraria (hub_calendario.php)
   ============================================================ */
.hub-cal-card { padding: 18px 18px 8px; }
.hub-cal-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.hub-cal-titolo { margin: 0; font-size: 21px; font-weight: 800; flex: 1 1 auto; text-align: center; }
.hub-cal-titolo small { display: block; font-size: 13px; font-weight: 500; }
.hub-cal-data { width: auto; }
.hub-cal-viste { display: inline-flex; background: var(--surface-sunk); padding: 3px; border-radius: var(--r-md); }
.hub-cal-viste a { padding: 8px 14px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--ink-3); text-decoration: none; }
.hub-cal-viste a.attiva { background: var(--surface); color: var(--ink-1); box-shadow: var(--shadow-card); }
.hub-cal-scorri { overflow-x: auto; margin: 6px -18px 0; padding: 0 18px 10px; }
.hub-cal { --ora: 64px; display: grid; grid-template-columns: 52px repeat(var(--colonne), minmax(130px, 1fr)); min-width: min-content; }
.hub-cal-angolo { border-bottom: 1px solid var(--rule); }
.hub-cal-testa { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 6px; border-bottom: 1px solid var(--rule); font-weight: 700; font-size: 14px; text-align: center; min-width: 0; }
.hub-cal-testa span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.hub-cal-testa small { font-weight: 500; font-size: 12px; color: var(--ink-3); }
.hub-cal-testa i { width: 10px; height: 10px; border-radius: 50%; background: var(--gi); flex-shrink: 0; }
.hub-cal-testa a { color: inherit; text-decoration: none; padding: 4px 10px; border-radius: var(--r-pill); }
.hub-cal-testa a:hover { background: var(--surface-sunk); }
.hub-cal-testa.oggi a { background: var(--ink-1); color: var(--surface); }
.hub-cal-asse { height: calc(var(--ore) * var(--ora)); }
.hub-cal-asse span { position: absolute; right: 8px; top: calc(var(--m) * var(--ora) / 60); transform: translateY(-50%); font-size: 11.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hub-cal-asse span:first-child { transform: none; }
.hub-cal-col { position: relative; height: calc(var(--ore) * var(--ora)); border-left: 1px solid var(--rule-soft);
  background: repeating-linear-gradient(to bottom, var(--rule-soft) 0 1px, transparent 1px calc(var(--ora) / 2), color-mix(in oklch, var(--rule-soft) 50%, transparent) calc(var(--ora) / 2) calc(var(--ora) / 2 + 1px), transparent calc(var(--ora) / 2 + 1px) var(--ora)); }
.hub-cal-col.oggi { background-color: color-mix(in oklch, var(--accent-soft, #eef) 40%, transparent); }
.hub-cal-ev { position: absolute; top: calc(var(--m) * var(--ora) / 60 + 1px); height: max(18px, calc(var(--d) * var(--ora) / 60 - 2px));
  left: calc(var(--l) * (100% - 6px) / var(--n) + 2px); width: calc((100% - 6px) / var(--n) - 2px);
  background: var(--gi); color: #fff; border-radius: 6px; padding: 3px 7px; font-size: 12.5px; font-weight: 600; line-height: 1.25;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; box-shadow: 0 0 0 1px var(--surface); z-index: 1; }
button.hub-cal-ev { border: 0; font-family: inherit; text-align: left; cursor: pointer; display: block; }
.hub-cal-ev.corto { padding-top: 1px; padding-bottom: 1px; font-size: 11.5px; }
.hub-cal-ev:hover, .hub-cal-ev:focus-visible { z-index: 3; filter: brightness(1.08); outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gi); }
.hub-cal-ev.passato { opacity: .55; }
.hub-cal-adesso { position: absolute; left: 0; right: 0; top: calc(var(--m) * var(--ora) / 60); height: 2px; background: var(--danger, #d33); z-index: 2; }
.hub-cal-angolo, .hub-cal-asse { position: sticky; left: 0; z-index: 4; background: var(--surface); }
.hub-cal-asse + .hub-cal-col .hub-cal-adesso::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: inherit; }
.hub-cal-dialogo { border: 0; border-radius: var(--r-lg, 16px); padding: 24px; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: var(--shadow-pop); background: var(--surface); color: var(--ink-1); }
.hub-cal-dialogo::backdrop { background: rgb(15 18 25 / .45); }
.hub-cal-chiudi { position: absolute; top: 14px; right: 14px; font-size: 22px; line-height: 1; }
.hub-cal-det-testa { display: flex; gap: 12px; align-items: flex-start; margin: 0 40px 14px 0; }
.hub-cal-det-testa i { width: 14px; height: 14px; border-radius: 4px; background: var(--gi); margin-top: 6px; flex-shrink: 0; }
.hub-cal-det-testa h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.hub-cal-det-testa p { margin: 0; font-size: 14px; color: var(--ink-2); }
.hub-cal-det-oggetto { margin: 0 0 10px; font-size: 15.5px; }
.hub-cal-det-dati { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.hub-cal-det-dati dt { color: var(--ink-3); }
.hub-cal-det-dati dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .hub-cal-card { padding: 14px 14px 6px; }
  .hub-cal-scorri { margin: 6px -14px 0; padding: 0 14px 10px; }
  .hub-cal-titolo { order: -1; flex-basis: 100%; text-align: left; }
  .hub-cal { grid-template-columns: 44px repeat(var(--colonne), minmax(110px, 1fr)); }
}
@media print {
  .hub-cal-card { box-shadow: none; padding: 0; }
  .hub-cal-scorri { overflow: visible; }
  .hub-cal-ev { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hub-cal-ev.passato { opacity: 1; }
  .hub-cal-adesso { display: none; }
}

/* Pagina di chi ha fatto la richiesta: spostare l'appuntamento */
.hub-pub-sposta { margin: 12px 0 0; }
.hub-pub-sposta.hub-muto { font-size: 13.5px; }

/* Riquadro «È già stata gestita? Chiudila», aperto dall'email di invito a chiudere. */
.hub-chiusura-rapida { border-left: 5px solid var(--ok, oklch(0.6 0.15 150)); margin-bottom: 18px; }
.hub-chiusura-rapida .hub-h2 { margin-top: 2px; }
.hub-chiusura-rapida > .hub-muto { margin-bottom: 14px; }
.hub-chiusura-rapida .btn { margin-top: 10px; }

/* Richieste concluse: pagina a parte (hub_concluse.php) e riquadro richiudibile nell'area senza account. */
.hub-concluse-esito { font-style: italic; }
.hub-sezione-concluse > summary { cursor: pointer; list-style: none; }
.hub-sezione-concluse > summary::-webkit-details-marker { display: none; }
.hub-sezione-concluse > summary h2::before { content: '▸ '; color: var(--ink-3); }
.hub-sezione-concluse[open] > summary h2::before { content: '▾ '; }

/* Inserimento rapido delle deleghe (hub_deleghe.php). */
.hub-deleghe { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
.hub-dl-cerca { position: relative; }
.hub-dl-risultati { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; list-style: none; margin: 4px 0 0; padding: 4px; background: var(--surface); border: 1.5px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--shadow-pop); max-height: 320px; overflow-y: auto; }
.hub-dl-risultati li { padding: 9px 12px; border-radius: 8px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
.hub-dl-risultati li span { color: var(--ink-3); font-size: 14px; }
.hub-dl-risultati li small { margin-left: auto; color: var(--ink-3); font-size: 12.5px; }
.hub-dl-risultati li.attiva, .hub-dl-risultati li:hover { background: var(--surface-sunk); }
.hub-dl-risultati li.vuoto { cursor: default; color: var(--ink-3); }
.hub-dl-scelto { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--r-md); background: var(--ok-soft); color: var(--ok-ink); font-size: 14.5px; }
.hub-dl-gia { background: var(--surface-sunk); border-radius: var(--r-md); padding: 10px 14px; margin: 4px 0 0; font-size: 14px; }
.hub-dl-gia ul { margin: 0; padding-left: 18px; }
.hub-dl-gia li.spento { color: var(--ink-4); }
.hub-dl-altro { margin-top: 2px; }
.hub-dl-recenti ol { list-style: none; margin: 0; padding: 0; }
.hub-dl-recenti li { padding: 10px 0; border-top: 1px solid var(--rule-soft); font-size: 14px; }
.hub-dl-recenti li:first-child { border-top: 0; }
.hub-dl-azioni { display: flex; gap: 14px; margin-top: 4px; font-size: 13.5px; }
.hub-dl-azioni form { margin: 0; }
.hub-dl-elimina { background: none; border: 0; padding: 0; cursor: pointer; color: var(--danger-ink); font: inherit; text-decoration: underline; }
@media (max-width: 960px) { .hub-deleghe { grid-template-columns: 1fr; } }
/* Elenco di tutte le deleghe e allegati in correzione. */
.hub-dl-tabella-box { padding: 0; overflow-x: auto; }
.hub-dl-tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.hub-dl-tabella th { text-align: left; font-size: 12.5px; font-weight: 700; color: var(--ink-3); padding: 12px 14px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.hub-dl-tabella td { padding: 10px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.hub-dl-tabella tr:last-child td { border-bottom: 0; }
.hub-dl-tabella tr.spento td { color: var(--ink-4); }
.hub-dl-azioni-cella { white-space: nowrap; }
.hub-dl-azioni-cella form { display: inline; margin-left: 10px; }
.hub-dl-allegati { background: var(--surface-sunk); border-radius: var(--r-md); padding: 10px 14px; margin-top: 14px; font-size: 14px; }
.hub-dl-allegati ul { margin: 0; padding-left: 18px; }
.hub-dl-allegati .hub-dl-elimina { margin-left: 8px; font-size: 13px; }
.hub-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 720px) {
  .hub-dl-tabella thead { display: none; }
  .hub-dl-tabella, .hub-dl-tabella tbody, .hub-dl-tabella tr, .hub-dl-tabella td { display: block; width: 100%; }
  .hub-dl-tabella tr { padding: 10px 14px; border-bottom: 1px solid var(--rule); }
  .hub-dl-tabella td { border: 0; padding: 3px 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
  .hub-dl-tabella td::before { content: attr(data-label); font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
  .hub-dl-tabella td.hub-dl-azioni-cella { display: flex; gap: 16px; padding-top: 8px; }
  .hub-dl-tabella td.hub-dl-azioni-cella::before { content: none; }
  .hub-dl-azioni-cella form { margin-left: 0; }
}