/* ============================================================
   Richieste — veste grafica "moderna"
   Uno strato sopra simple.css e hub.css: cambia colori, ombre,
   rilievi e piccoli movimenti, non la disposizione delle pagine.
   Vale solo dentro body.hub (le pagine dei ritardi non cambiano).
   Per tornare alla grafica di prima basta non caricare questo file.
   ============================================================ */

body.hub {
  --paper:        oklch(0.975 0.006 265);
  --surface:      #ffffff;
  --surface-sunk: oklch(0.955 0.01 265);

  --ink-1: oklch(0.22 0.04 268);
  --ink-2: oklch(0.40 0.035 268);
  --ink-3: oklch(0.55 0.025 268);
  --ink-4: oklch(0.74 0.02 268);

  --rule:      oklch(0.91 0.012 268);
  --rule-soft: oklch(0.945 0.009 268);

  /* Il colore del marchio: indaco. L'arancio resta per "da fare". */
  --brand:       oklch(0.53 0.2 272);
  --brand-2:     oklch(0.58 0.2 300);
  --brand-soft:  oklch(0.955 0.03 275);
  --brand-ink:   oklch(0.38 0.17 272);
  --brand-grad:  linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);

  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 9px;

  --shadow-card: 0 1px 2px oklch(0.25 0.05 268 / 0.04), 0 2px 6px -2px oklch(0.25 0.05 268 / 0.06), 0 12px 28px -14px oklch(0.25 0.05 268 / 0.14);
  --shadow-pop:  0 2px 4px oklch(0.25 0.05 268 / 0.05), 0 18px 40px -16px oklch(0.35 0.12 272 / 0.32);
  --ring: 0 0 0 4px oklch(0.6 0.19 272 / 0.2);

  background:
    radial-gradient(1100px 520px at 85% -160px, oklch(0.9 0.07 285 / 0.55), transparent 70%),
    radial-gradient(800px 420px at 10% -200px, oklch(0.93 0.06 60 / 0.5), transparent 70%),
    var(--paper);
  background-attachment: fixed;
}
body.hub ::selection { background: oklch(0.85 0.09 280); }

/* ---------- Titoli ---------- */
.hub .hub-h1 { font-size: 32px; letter-spacing: -0.03em; }
.hub .hub-cr-saluto { color: var(--brand-ink); font-weight: 600; letter-spacing: .01em; }
.hub .hub-h2 { letter-spacing: -0.01em; }

/* ---------- Card: bordo sottile, ombra morbida, sollevamento ---------- */
.hub .card { border: 1px solid var(--rule); box-shadow: var(--shadow-card); }
.hub a.card:hover, .hub a.hub-riga-richiesta:hover { border-color: oklch(0.8 0.08 275); box-shadow: var(--shadow-pop); transform: translateY(-2px); }

/* ---------- Pulsanti ---------- */
.hub .btn { font-weight: 650; transition: transform 100ms ease, box-shadow 160ms ease, background 160ms ease, filter 160ms ease; }
.hub .btn-primary { background: var(--ink-1); color: #fff; box-shadow: 0 1px 0 oklch(1 0 0 / .12) inset, 0 6px 16px -8px oklch(0.2 0.05 268 / .6); }
.hub .btn-primary:hover { background: oklch(0.16 0.04 268); }
.hub .btn-accent { background: var(--brand-grad); color: #fff; box-shadow: 0 1px 0 oklch(1 0 0 / .25) inset, 0 8px 20px -8px oklch(0.5 0.2 280 / .7); }
.hub .btn-accent:hover { background: var(--brand-grad); filter: brightness(1.06) saturate(1.05); box-shadow: 0 1px 0 oklch(1 0 0 / .25) inset, 0 12px 26px -8px oklch(0.5 0.2 280 / .8); }
.hub .btn-outline { border: 1px solid var(--rule); box-shadow: var(--shadow-card); }
.hub .btn-outline:hover { background: #fff; border-color: oklch(0.82 0.06 275); color: var(--brand-ink); }
.hub .btn-ghost { background: var(--surface-sunk); }
.hub .btn-ghost:hover { background: var(--brand-soft); color: var(--brand-ink); }

/* ---------- Campi ---------- */
.hub .input { border: 1px solid var(--rule); box-shadow: 0 1px 2px oklch(0.25 0.05 268 / 0.04); }
.hub .input:hover { border-color: oklch(0.85 0.03 270); }
.hub .input:focus { border-color: var(--brand); box-shadow: var(--ring); }
.hub input[type="checkbox"], .hub input[type="radio"] { accent-color: var(--brand); }

/* ---------- Etichette ---------- */
.hub .badge { height: 26px; font-size: 12.5px; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .04); }
.hub .hub-prio { box-shadow: inset 0 0 0 1px oklch(0 0 0 / .04); }
.hub .hub-prio-urgente { background: linear-gradient(135deg, oklch(0.6 0.2 25), oklch(0.55 0.21 10)); box-shadow: 0 4px 10px -4px oklch(0.55 0.2 20 / .6); }
.hub .hub-conto { font-variant-numeric: tabular-nums; }
.hub .hub-sezione-testa .hub-conto-attesa { background: var(--accent); color: #fff; }

/* ---------- Avvisi ---------- */
.hub .hub-avviso { display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow-card); }
.hub .hub-avviso::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: .8; }

/* ---------- Tondi con icona ---------- */
.hub .hub-tondo { background: var(--brand-soft); color: var(--brand-ink); }

/* ============================================================
   Panoramica: i riquadri con i numeri
   ============================================================ */
.hub .hub-cr-numero, .hub .hub-stati a {
  position: relative; overflow: hidden; border: 1px solid var(--rule); border-top-width: 1px;
  background: linear-gradient(180deg, #fff 0%, oklch(0.99 0.004 268) 100%);
}
.hub .hub-cr-numero::before, .hub .hub-stati a::before {
  content: ""; position: absolute; right: 18px; top: 20px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--tono, var(--ink-4)); box-shadow: 0 0 0 5px var(--tono-alone, oklch(0.94 0.01 268));
}
.hub .hub-stati a::before { right: 14px; top: 15px; width: 8px; height: 8px; box-shadow: 0 0 0 4px var(--tono-alone, oklch(0.94 0.01 268)); }
.hub .hub-cr-numero strong { font-size: 40px; color: var(--ink-1); }
.hub .hub-cr-numero.vuoto strong, .hub .hub-stati a.vuoto strong { color: var(--ink-4); }
.hub .hub-cr-numero.vuoto, .hub .hub-stati a.vuoto { --tono: var(--ink-4); --tono-alone: oklch(0.95 0.008 268); }

.hub .hub-cr-attesa, .hub .hub-stati .hub-stato-nuova { --tono: var(--accent); --tono-alone: oklch(0.93 0.07 65); border-color: oklch(0.88 0.06 60); }
.hub .hub-cr-attesa, .hub .hub-stati .hub-stato-nuova:not(.vuoto) { background: linear-gradient(160deg, oklch(0.985 0.025 70) 0%, #fff 70%); }
.hub .hub-cr-attesa strong, .hub .hub-stati .hub-stato-nuova:not(.vuoto) strong { color: var(--accent-ink); }
.hub .hub-cr-attesa small { color: var(--accent-ink); }
.hub .hub-cr-allarme { --tono: var(--danger); --tono-alone: oklch(0.94 0.04 25); }
.hub .hub-cr-ok, .hub .hub-stati .hub-stato-concluse { --tono: var(--ok); --tono-alone: oklch(0.94 0.04 155); }
.hub .hub-stati .hub-stato-in_lavorazione { --tono: var(--brand); --tono-alone: oklch(0.94 0.035 280); }
.hub .hub-cr-numeri > :nth-child(2):not(.hub-cr-allarme):not(.hub-cr-ok):not(.hub-cr-attesa),
.hub .hub-cr-numeri > :nth-child(3):not(.hub-cr-allarme):not(.hub-cr-ok):not(.hub-cr-attesa) { --tono: var(--brand); --tono-alone: oklch(0.94 0.035 280); }
.hub .hub-cr-numero:hover, .hub .hub-stati a:hover { border-color: oklch(0.82 0.06 275); }

/* Le schede laterali (agenda, chi ha che cosa) */
.hub .hub-cr-barra i { background: var(--brand-grad); }
.hub .hub-cr-scheda .hub-h2, .hub .hub-mia-agenda .hub-h2 { font-size: 18px; }

/* ---------- Elenchi di richieste ---------- */
.hub a.hub-riga-richiesta { transition: transform 140ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.hub .hub-riga-destra svg { transition: transform 160ms ease; }
.hub a.hub-riga-richiesta:hover .hub-riga-destra svg { transform: translateX(3px); color: var(--brand); }

/* ============================================================
   Bacheca
   ============================================================ */
.hub .hub-colonna {
  background: oklch(1 0 0 / .55); border: 1px solid var(--rule); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hub .hub-colonna header { padding: 6px 6px 4px; }
.hub .hub-colonna h2 { display: flex; align-items: center; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.hub .hub-colonna h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.hub .hub-colonna[data-colonna="nuova"] h2::before { background: var(--accent); box-shadow: 0 0 0 4px oklch(0.85 0.1 60 / .35); }
.hub .hub-colonna[data-colonna="assegnata"] h2::before { background: oklch(0.7 0.13 230); }
.hub .hub-colonna[data-colonna="in_lavorazione"] h2::before { background: var(--brand); }
.hub .hub-colonna[data-colonna="in_attesa_richiedente"] h2::before { background: oklch(0.75 0.14 85); }
.hub .hub-colonna[data-colonna="concluse"] h2::before { background: var(--ok); }
.hub .hub-colonna .hub-conto { background: var(--surface-sunk); }
.hub .hub-filtri .input { height: 44px; }

/* ============================================================
   Pagina iniziale (operatori): le due porte
   ============================================================ */
.hub .hub-porta { border-radius: 26px; isolation: isolate; }
.hub .hub-porta::after {
  content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -200px; top: -220px; border-radius: 50%; opacity: .8;
}
.hub .hub-porta-ritardi { border: 1px solid var(--rule); background: #fff; }
.hub .hub-porta-ritardi::after { background: radial-gradient(circle, oklch(0.93 0.07 65) 0%, transparent 65%); }
.hub .hub-porta-ritardi .hub-porta-icona { background: oklch(0.96 0.04 65); color: oklch(0.5 0.13 50); }
.hub .hub-porta-richieste { border: 0; background: linear-gradient(150deg, oklch(0.3 0.09 272) 0%, oklch(0.22 0.06 268) 55%, oklch(0.2 0.05 260) 100%); }
.hub .hub-porta-richieste::after { background: radial-gradient(circle, oklch(0.55 0.2 290 / .75) 0%, transparent 65%); }
.hub .hub-porta-richieste .hub-porta-icona { background: var(--brand-grad); color: #fff; box-shadow: 0 12px 30px -10px oklch(0.55 0.2 285 / .9); }
.hub .hub-porta-conto { background: oklch(1 0 0 / .1); border: 1px solid oklch(1 0 0 / .14); backdrop-filter: blur(4px); }
.hub .hub-porta-conto strong { color: oklch(0.85 0.1 290); }
.hub .hub-voce > svg { transition: transform 160ms ease; }
.hub a.hub-voce:hover > svg { transform: translateX(3px); color: var(--brand); }

/* ---------- Inserimento al banco ---------- */
.hub .hub-passi li { border: 1px solid transparent; }
.hub .hub-passi li.attivo { background: var(--ink-1); box-shadow: 0 8px 20px -10px oklch(0.2 0.05 268 / .7); }
.hub .hub-passi li.attivo span { background: var(--brand-grad); color: #fff; }
.hub .hub-scelta input:checked + * { border-color: var(--brand) !important; box-shadow: var(--ring); }

/* ---------- Pulsanti di scelta della vista ---------- */
.hub .hub-vista { border: 1px solid var(--rule); }
.hub .hub-vista.attiva { background: var(--ink-1); border-color: var(--ink-1); }

/* ============================================================
   Pagine pubbliche (chi ha fatto la richiesta)
   ============================================================ */
.hub-pubblica .hub-pub-testa { display: flex; align-items: center; gap: 14px; }
.hub-pubblica .hub-pub-sotto { color: var(--brand-ink); font-weight: 600; }
.hub-pubblica .hub-pub-stato { background: var(--brand-soft); border: 1px solid oklch(0.9 0.04 275); }
.hub-pubblica .hub-pub-stato strong { color: var(--brand-ink); }
.hub-pubblica .hub-pub-stato-chiusa { background: var(--ok-soft); border-color: oklch(0.88 0.06 155); }
.hub-pubblica .hub-pub-stato-chiusa strong { color: var(--ok-ink); }
.hub-pubblica .hub-pub-stato-in_attesa_richiedente { background: var(--accent-soft); border-color: oklch(0.88 0.06 60); }
.hub-pubblica .hub-pub-stato-in_attesa_richiedente strong { color: var(--accent-ink); }
.hub-pubblica .hub-pub-risposta { border: 1px solid oklch(0.8 0.08 275); box-shadow: var(--ring), var(--shadow-card); }

/* ============================================================
   Pagina della richiesta
   ============================================================ */
/* A che punto è: linea e pallini nel colore del marchio */
.hub .hub-avanzamento-scheda { background: linear-gradient(180deg, var(--brand-soft), oklch(0.975 0.012 275)); border: 1px solid oklch(0.92 0.025 275); }
.hub .hub-avanzamento li.fatto span { background: var(--brand-grad); border-color: transparent; }
.hub .hub-avanzamento li.fatto::before, .hub .hub-avanzamento li.attuale::before { background: var(--brand-grad); }
.hub .hub-avanzamento li.attuale span { border: 0; width: 16px; height: 16px; background: var(--brand-grad); box-shadow: 0 0 0 5px oklch(0.6 0.19 272 / .18); }
.hub .hub-avanzamento li.fatto, .hub .hub-avanzamento li.attuale { color: var(--brand-ink); }
.hub .hub-sd-titolo svg { color: var(--brand); }

/* Cosa fare adesso: una scheda in evidenza, senza la riga a sinistra */
.hub .hub-prossimo { border: 1px solid var(--rule); border-left: 1px solid var(--rule); position: relative; overflow: hidden; }
.hub .hub-prossimo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tono, var(--ink-4)); }
.hub .hub-prossimo-attesa { --tono: linear-gradient(90deg, var(--accent), oklch(0.7 0.16 35)); background: linear-gradient(170deg, oklch(0.975 0.035 70) 0%, #fff 75%); border-color: oklch(0.88 0.06 60); }
.hub .hub-prossimo-mia { --tono: linear-gradient(90deg, var(--ok), oklch(0.65 0.12 180)); }
.hub .hub-prossimo-ok { --tono: var(--ok); background: linear-gradient(170deg, var(--ok-soft) 0%, #fff 80%); border-color: oklch(0.88 0.06 155); }
.hub .hub-prossimo-spento { --tono: var(--rule); }
.hub .hub-prossimo .btn-outline { box-shadow: var(--shadow-card); }

/* Cosa puoi fare */
.hub .hub-az { border: 1px solid var(--rule); transition: border-color .15s ease, box-shadow .15s ease; }
.hub .hub-az:hover { border-color: oklch(0.84 0.05 275); }
.hub .hub-az-icona { background: var(--brand-soft); color: var(--brand-ink); }
.hub .hub-az > summary:hover, .hub a.hub-az-link:hover { background: oklch(0.985 0.008 275); }
.hub .hub-az[open] { border-color: oklch(0.8 0.08 275); box-shadow: var(--ring), var(--shadow-card); }
.hub .hub-az[open] > summary { background: oklch(0.975 0.014 275); }
.hub .hub-az[open] .hub-az-icona { background: var(--brand-grad); color: #fff; }
.hub .hub-az-interna { border: 1px dashed oklch(0.85 0.02 268); }
.hub .hub-az-pericolo .hub-az-icona { background: var(--danger-soft); color: var(--danger-ink); }

/* ---------- Entrata morbida dei blocchi ---------- */
@keyframes hubSale { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hub .hub-cr-numero, .hub .hub-stati a, .hub .hub-cr-principale > *, .hub .hub-cr-lato > *, .hub .hub-colonna, .hub .hub-porta {
  animation: hubSale .38s cubic-bezier(.2,.7,.2,1) both;
}
.hub .hub-cr-numeri > :nth-child(2), .hub .hub-stati > :nth-child(2), .hub .hub-colonne > :nth-child(2), .hub .hub-porte > :nth-child(2) { animation-delay: .04s; }
.hub .hub-cr-numeri > :nth-child(3), .hub .hub-stati > :nth-child(3), .hub .hub-colonne > :nth-child(3) { animation-delay: .08s; }
.hub .hub-cr-numeri > :nth-child(4), .hub .hub-stati > :nth-child(4), .hub .hub-colonne > :nth-child(4) { animation-delay: .12s; }
.hub .hub-cr-numeri > :nth-child(5), .hub .hub-stati > :nth-child(5), .hub .hub-colonne > :nth-child(5) { animation-delay: .16s; }
.hub .hub-cr-lato > * { animation-delay: .1s; }

.hub.hub-fermo *, .hub.hub-fermo *::before, .hub.hub-fermo *::after { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hub *, .hub *::before, .hub *::after { animation: none !important; transition: none !important; }
}
@media print {
  body.hub { background: #fff; }
  .hub .card, .hub .hub-colonna { box-shadow: none; backdrop-filter: none; }
}