/* Nuova home Willer (bozza approvata 2026-10-25: docs/mockup/home-willer-chiara.html).
   Una sola scrittura per i due temi: i colori semantici (--hm-*) sono quelli scuri di base e vengono ridefiniti per il chiaro
   (body.skin-light, e body.erasmus che ha già lo stesso aspetto). I riquadri colorati (azzurro, giallo, rosa) hanno testo ink
   #131313 in entrambi i temi: mai bianco su azzurro o giallo (contrasto). */
body {
    --hm-card: #333333;
    --hm-line: rgba(255, 255, 255, .18);
    --hm-text: #ffffff;
    --hm-muted: #d0d0d0;
    --hm-tint: rgba(255, 255, 255, .08);
    --hm-link: #00b7fc;
    --hm-ink: #131313;
    --hm-azure: #00b7fc;
    --hm-yellow: #ffcd03;
    --hm-pink: #ff4d73;
    --hm-pink-soft: #ff4d73;
    --hm-focus: #ffcd03;
}
body.skin-light, body.erasmus {
    --hm-card: #ffffff;
    --hm-line: #cfe3ef;
    --hm-text: #131313;
    --hm-muted: #3d4650;
    --hm-tint: #d9f2ff;
    --hm-link: #0073a6;
    --hm-pink-soft: #ffe3ea;
    --hm-focus: #0073a6;
}

.hm { font-family: Inter, system-ui, sans-serif; color: var(--hm-text); padding-bottom: 8px; }
.hm a { text-decoration: none; }
.hm a:focus-visible, .hm button:focus-visible { outline: 3px solid var(--hm-focus); outline-offset: 2px; }
.hm svg, .hm i[class*="fa-"] { flex-shrink: 0; }

/* Pulsanti a pillola: area minima 44px */
.hm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
    border-radius: 999px; font: 700 15px Inter, sans-serif; border: 2px solid transparent; color: var(--hm-ink); cursor: pointer; text-align: center; }
.hm-btn.sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
.hm-btn.cta { background: var(--hm-yellow); color: var(--hm-ink); }
.hm-btn.outline { background: transparent; border-color: var(--hm-text); color: var(--hm-text); }
.hm-btn.on-tile { background: #ffffff; border-color: var(--hm-ink); color: var(--hm-ink); }
.hm-btn.dark { background: var(--hm-ink); border-color: var(--hm-ink); color: #ffffff; }
@media (prefers-reduced-motion: no-preference) {
    .hm-btn, .hm-quick, .hm-big { transition: transform .12s; }
    .hm-btn:hover, .hm-quick:hover, .hm-big:hover { transform: translateY(-2px); }
}

/* Eroe */
.hm-hero { background: var(--hm-card); border: 1px solid var(--hm-line); border-radius: 24px; padding: 22px 20px 0; margin-top: 8px; overflow: hidden; }
.hm-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--hm-tint); border-radius: 999px; padding: 4px 12px;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hm-text); }
.hm-hero h1 { font-size: 30px; line-height: 1.12; font-weight: 800; margin: 12px 0 8px; letter-spacing: -.01em; color: var(--hm-text); }
.hm-lead { font-size: 16px; line-height: 1.5; color: var(--hm-muted); margin: 0 0 16px; }
.hm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.hm-welcome { font-size: 14px; line-height: 1.55; color: var(--hm-muted); margin: 0 0 14px; }

/* Illustrazione della mappa (decorativa) */
.hm-map { margin: 14px -20px 0; height: 170px; background: #d9f2ff; position: relative; }
.hm-map svg.bg { width: 100%; height: 100%; display: block; }
.hm-chip { position: absolute; display: inline-flex; align-items: center; gap: 6px; background: #ffffff; border: 1px solid #cfe3ef; color: #131313;
    border-radius: 999px; padding: 6px 12px 6px 8px; font-size: 12px; font-weight: 700; }
.hm-chip .dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--hm-yellow); font-size: 10px; }

/* Titoli di sezione */
.hm h2.hm-sec { font-size: 20px; font-weight: 800; margin: 26px 0 12px; letter-spacing: -.005em; color: var(--hm-text); }

/* Come funziona */
.hm-steps { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.hm-step { display: flex; gap: 14px; align-items: center; background: var(--hm-card); border: 1px solid var(--hm-line); border-radius: 16px; padding: 12px 14px; }
.hm-step .ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0; color: var(--hm-ink); font-size: 20px; }
.hm-step b { display: block; font-size: 16px; color: var(--hm-text); }
.hm-step .t { font-size: 14px; color: var(--hm-muted); }
.hm-pts { margin-left: auto; background: var(--hm-yellow); color: var(--hm-ink); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 800; white-space: nowrap; }

/* Riquadri dei progetti */
.hm-bento { display: grid; gap: 10px; }
.hm-tile { border-radius: 24px; padding: 18px; border: 1px solid var(--hm-line); background: var(--hm-card); color: var(--hm-ink); position: relative; overflow: hidden; }
.hm-tile.az { background: var(--hm-azure); border-color: var(--hm-azure); }
.hm-tile.ye { background: var(--hm-yellow); border-color: var(--hm-yellow); }
.hm-tile.pk { background: var(--hm-pink-soft); border-color: #ffb3c4; }
.hm-tile h3 { font-size: 19px; font-weight: 800; margin: 6px 0 4px; color: var(--hm-ink); }
.hm-tile p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--hm-ink); }
.hm-label { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .75); color: var(--hm-ink); border-radius: 999px;
    padding: 3px 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hm-tile .hm-actions { margin: 0; gap: 8px; }
.hm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .hm-row2 { grid-template-columns: 1fr; } }
.hm-tile-peba { display: none; }

/* Hai un'attività? */
.hm-owner { display: flex; gap: 14px; align-items: center; background: var(--hm-card); border: 2px dashed var(--hm-azure); border-radius: 24px; padding: 14px; margin-top: 14px; color: var(--hm-text); min-height: 44px; }
.hm-owner .ico { width: 48px; height: 48px; border-radius: 14px; background: var(--hm-tint); display: grid; place-items: center; color: var(--hm-text); font-size: 20px; }
.hm .hm-owner, .hm .hm-owner b { color: var(--hm-text); }
.hm-owner b { display: block; }
.hm-owner small { color: var(--hm-muted); font-size: 13px; }

/* Collegamenti secondari */
.hm-more { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--hm-line); color: var(--hm-muted); font-size: 14px; }
.hm-more i.arrow { color: var(--hm-link); }

/* ---- Home da connesso (mockup B) ---- */
.hm-me { background: var(--hm-card); border: 1px solid var(--hm-line); border-radius: 24px; padding: 16px; margin-top: 8px; }
.hm-me-head { display: flex; align-items: center; gap: 12px; }
.hm-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--hm-azure); color: var(--hm-ink); display: grid; place-items: center; font-weight: 800; font-size: 20px; flex-shrink: 0; }
.hm-me h1 { font-size: 24px; margin: 0; font-weight: 800; color: var(--hm-text); overflow-wrap: anywhere; }
.hm-level { font-size: 14px; color: var(--hm-muted); }
.hm-prog { height: 12px; border-radius: 999px; background: var(--hm-tint); overflow: hidden; margin: 12px 0 4px; border: 1px solid var(--hm-line); }
.hm-prog i { display: block; height: 100%; background: var(--hm-yellow); }
body.skin-light .hm-prog i, body.erasmus .hm-prog i { background: #0073a6; }
.hm-prog-txt { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--hm-muted); }
.hm-prog-txt strong { color: var(--hm-text); }

.hm-big-actions { display: grid; gap: 10px; margin-top: 12px; }
.hm-big { display: flex; align-items: center; gap: 14px; border-radius: 24px; padding: 16px; color: var(--hm-ink); border: 2px solid transparent; min-height: 44px; }
.hm-big.y { background: var(--hm-yellow); }
.hm-big.w { background: var(--hm-card); border-color: var(--hm-line); color: var(--hm-text); }
.hm-big .ico { width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .65); display: grid; place-items: center; font-size: 20px; color: var(--hm-ink); flex-shrink: 0; }
.hm-big.w .ico { background: var(--hm-tint); color: var(--hm-text); }
.hm-big b { font-size: 18px; display: block; }
.hm-big small { font-size: 13px; opacity: .9; }
.hm-big .go { margin-left: auto; }

.hm-pending { display: flex; align-items: center; gap: 12px; background: var(--hm-card); border: 1px solid var(--hm-line); border-radius: 16px; padding: 12px; margin-bottom: 8px; }
.hm-pending .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--hm-tint); display: grid; place-items: center; color: var(--hm-text); flex-shrink: 0; }
.hm-pending .body { flex: 1; min-width: 0; }
.hm-pending b { display: block; font-size: 15px; color: var(--hm-text); }
.hm-pending small { color: var(--hm-muted); font-size: 13px; }
.hm-pill { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; color: var(--hm-ink); }
.hm-pill.urgent { background: var(--hm-pink); }
.hm-pill.calm { background: var(--hm-azure); }
.hm-all { display: inline-flex; margin-top: 2px; }

.hm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hm-quick { display: flex; flex-direction: column; gap: 6px; background: var(--hm-card); border: 1px solid var(--hm-line); border-radius: 16px; padding: 14px; color: var(--hm-text); font-weight: 700; font-size: 15px; min-height: 88px; }
.hm-quick i { font-size: 20px; color: var(--hm-link); }
.hm-quick small { font-weight: 500; color: var(--hm-muted); font-size: 12px; }
.hm-logout { text-align: center; padding: 16px 0 4px; }
.hm-logout button { background: none; border: 0; color: var(--hm-muted); font-size: 14px; min-height: 44px; padding: 0 12px; cursor: pointer; text-decoration: underline; }

/* Selettore Willer | Auditor */
.hm-mode { background: var(--hm-card); border: 1px solid var(--hm-line); border-radius: 24px; padding: 12px 14px; margin-top: 12px; }
.hm-seg { display: flex; border: 2px solid var(--hm-text); border-radius: 999px; overflow: hidden; }
.hm-seg > * { flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 14px Inter, sans-serif; border: 0; background: transparent; color: var(--hm-text); padding: 0 12px; }
.hm-seg .on { background: var(--hm-text); color: var(--hm-card); }
.hm-seg form { display: flex; flex: 1; margin: 0; }
.hm-seg form button { flex: 1; cursor: pointer; }
.hm-mode p { margin: 10px 2px 0; font-size: 13px; color: var(--hm-muted); line-height: 1.4; }
.hm-peba { display: none; align-items: center; gap: 12px; border-radius: 24px; padding: 14px; margin-top: 12px; background: var(--hm-pink-soft); border: 1px solid #ffb3c4; color: var(--hm-ink); }
.hm-peba .ico { width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .7); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.hm-peba b { display: block; font-size: 15px; } .hm-peba small { font-size: 13px; }

/* I titoli dentro i collegamenti seguono il colore del riquadro, non quello dei link (vale in entrambi i temi) */
.hm a.hm-big.y, .hm a.hm-big.y * { color: var(--hm-ink); }
.hm a.hm-big.w, .hm a.hm-big.w b, .hm a.hm-big.w small { color: var(--hm-text); }
.hm a.hm-quick, .hm a.hm-quick:visited { color: var(--hm-text); }
.hm a.hm-quick small { color: var(--hm-muted); }
.hm a.hm-quick i { color: var(--hm-link); }
.hm a.hm-peba, .hm a.hm-peba * { color: var(--hm-ink); }
.hm a.hm-btn.dark, .hm a.hm-btn.dark * { color: #ffffff; }
.hm a.hm-btn.on-tile, .hm a.hm-btn.on-tile * { color: var(--hm-ink); }
.hm a.hm-btn.cta { color: var(--hm-ink); }
.hm a.hm-btn.outline { color: var(--hm-text); }
.hm a.hm-owner small { color: var(--hm-muted); }
.hm-seg form button { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; color: var(--hm-text); font: 700 14px Inter, sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; }
.hm a.hm-avatar { color: var(--hm-ink); overflow: hidden; text-decoration: none; }
.hm-avatar-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 700; color: var(--hm-link); text-decoration: underline; }