/* AI in Azienda — stile Windows 11 / Fluent. Accento: verde petrolio; ogni livello ha il suo colore. */
:root {
  color-scheme: light dark;
  --acc: #0a6b66;
  --acc-2: #08564f;
  --acc-t: #ffffff;
  --acc-tenue: rgba(10, 107, 102, .09);
  --mica: #eef1f1;
  --mica-2: #e3e9e8;
  --sup: rgba(255, 255, 255, .8);
  --sup-piena: #ffffff;
  --sup-2: #f6f8f8;
  --tx: #161a1a;
  --tx-2: #4f5958;
  --tx-3: #687271;
  --br: rgba(14, 40, 38, .1);
  --br-forte: rgba(14, 40, 38, .18);
  --ok: #0e7a37;
  --ko: #b4261a;
  --l-base: #0a6b66;
  --l-intermedio: #2353bd;
  --l-avanzato: #7438bd;
  --l-strategia: #a5520a;
  --ombra-1: 0 1px 2px rgba(10, 30, 28, .06), 0 2px 6px rgba(10, 30, 28, .05);
  --ombra-2: 0 8px 24px rgba(10, 30, 28, .12), 0 2px 6px rgba(10, 30, 28, .07);
  --ombra-3: 0 24px 60px rgba(10, 30, 28, .22), 0 4px 14px rgba(10, 30, 28, .1);
  --r: 8px;
  --r-grande: 12px;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  --font-titolo: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  --font-prompt: "Cascadia Text", "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
  --nav-w: 252px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --acc: #5fd0c4; --acc-2: #8fe0d7; --acc-t: #052422; --acc-tenue: rgba(95, 208, 196, .12);
    --mica: #191c1c; --mica-2: #1f2323; --sup: rgba(41, 45, 45, .82); --sup-piena: #2a2e2e; --sup-2: #232727;
    --tx: #eff3f2; --tx-2: #bfc8c6; --tx-3: #9aa4a2; --br: rgba(255, 255, 255, .08); --br-forte: rgba(255, 255, 255, .16);
    --ok: #57d38c; --ko: #ff8f84;
    --l-base: #5fd0c4; --l-intermedio: #86a8ff; --l-avanzato: #c49bff; --l-strategia: #f2b062;
    --ombra-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .2);
    --ombra-2: 0 8px 24px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);
    --ombra-3: 0 24px 60px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .35);
  }
}
:root[data-tema="scuro"] {
  --acc: #5fd0c4; --acc-2: #8fe0d7; --acc-t: #052422; --acc-tenue: rgba(95, 208, 196, .12);
  --mica: #191c1c; --mica-2: #1f2323; --sup: rgba(41, 45, 45, .82); --sup-piena: #2a2e2e; --sup-2: #232727;
  --tx: #eff3f2; --tx-2: #bfc8c6; --tx-3: #9aa4a2; --br: rgba(255, 255, 255, .08); --br-forte: rgba(255, 255, 255, .16);
  --ok: #57d38c; --ko: #ff8f84;
  --l-base: #5fd0c4; --l-intermedio: #86a8ff; --l-avanzato: #c49bff; --l-strategia: #f2b062;
  --ombra-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .2);
  --ombra-2: 0 8px 24px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);
  --ombra-3: 0 24px 60px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--br-forte) transparent; }
body {
  margin: 0; font: 15px/1.55 var(--font); color: var(--tx); background: var(--mica);
  background-image: radial-gradient(1200px 700px at 100% -10%, color-mix(in srgb, var(--acc) 10%, transparent), transparent 60%),
                    radial-gradient(900px 600px at -10% 110%, color-mix(in srgb, var(--l-intermedio) 8%, transparent), transparent 60%);
  background-attachment: fixed; min-height: 100vh;
}
::selection { background: color-mix(in srgb, var(--acc) 28%, transparent); color: var(--tx); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
a { color: var(--acc); text-underline-offset: 3px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1, h2, h3 { font-family: var(--font-titolo); line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 650; letter-spacing: -.02em; }
h2 { font-size: 1.2rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 .7em; }
.tab { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ===== guscio: NavigationView ===== */
.guscio { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 100vh; }
.nav {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px;
  background: color-mix(in srgb, var(--mica-2) 70%, transparent); backdrop-filter: blur(30px) saturate(1.4);
  border-right: 1px solid var(--br);
}
.marchio { display: flex; align-items: center; gap: 10px; padding: 6px 10px 16px; text-decoration: none; color: var(--tx); }
.marchio img { width: 32px; height: 32px; border-radius: 8px; }
.marchio b { display: block; font: 650 15px/1.15 var(--font-titolo); }
.marchio small { color: var(--tx-3); font-size: 12px; }
.nav a.voce {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 6px;
  color: var(--tx); text-decoration: none; font-size: 14px; transition: background .15s;
}
.nav a.voce:hover { background: var(--acc-tenue); }
.nav a.voce[aria-current="page"] { background: var(--sup-piena); box-shadow: var(--ombra-1); font-weight: 600; }
.nav a.voce[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 16px; margin-top: -8px; border-radius: 2px; background: var(--acc);
  animation: indic .3s var(--ease);
}
@keyframes indic { from { transform: scaleY(.2); } }
.nav .sep { height: 1px; background: var(--br); margin: 8px 10px; }
.nav .giu { margin-top: auto; }
.nav .giu .credit { padding: 10px 12px 2px; font-size: 12px; color: var(--tx-3); }

main { min-width: 0; padding: 28px clamp(16px, 3vw, 44px) 80px; }
.vista { max-width: 1120px; margin: 0 auto; animation: entra .45s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
.testata { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.testata p { color: var(--tx-2); margin: 6px 0 0; max-width: 62ch; }

/* barra in basso sul telefono */
.barra { display: none; }
@media (max-width: 860px) {
  .guscio { grid-template-columns: 1fr; }
  .nav { display: none; }
  main { padding: 18px 16px 104px; }
  .barra {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--sup-piena) 82%, transparent);
    backdrop-filter: blur(24px) saturate(1.4); border-top: 1px solid var(--br);
  }
  .barra a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 8px; font-size: 11px; color: var(--tx-2); text-decoration: none; }
  .barra a[aria-current="page"] { color: var(--acc); font-weight: 600; }
  .barra a[aria-current="page"] svg { stroke-width: 2; }
}

/* ===== superfici ===== */
.pannello { background: var(--sup); backdrop-filter: blur(20px); border: 1px solid var(--br); border-radius: var(--r-grande); box-shadow: var(--ombra-1); padding: 20px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 6px 16px; border-radius: 6px;
  border: 1px solid var(--br-forte); background: var(--sup-piena); color: var(--tx); font: 500 14px var(--font); cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 0 var(--br); transition: background .15s, transform .1s;
}
.btn:hover { background: var(--sup-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.accento { background: var(--acc); border-color: transparent; color: var(--acc-t); }
.btn.accento:hover { background: var(--acc-2); }
.btn.sottile { background: transparent; border-color: transparent; box-shadow: none; }
.btn.sottile:hover { background: var(--acc-tenue); }
.btn.grande { min-height: 44px; padding: 10px 22px; font-size: 15px; }
.fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--lv, var(--acc)) 13%, transparent); color: var(--lv, var(--acc)); }
.lv-base { --lv: var(--l-base); } .lv-intermedio { --lv: var(--l-intermedio); } .lv-avanzato { --lv: var(--l-avanzato); } .lv-strategia { --lv: var(--l-strategia); }
.nota { font-size: 13px; color: var(--tx-3); }
.campo { display: grid; gap: 4px; font-size: 13px; color: var(--tx-2); }
.campo input, .campo textarea, .campo select, .cerca input {
  font: 14px/1.4 var(--font); color: var(--tx); background: var(--sup-piena); border: 1px solid var(--br-forte); border-bottom-color: var(--tx-3);
  border-radius: 6px; padding: 8px 10px; width: 100%;
}
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .cerca input:focus { outline: none; border-bottom: 2px solid var(--acc); padding-bottom: 7px; }
.errore { color: var(--ko); font-size: 13px; min-height: 1em; margin: 0; }

/* ===== HOME ===== */
.home-alto { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 1000px) { .home-alto { grid-template-columns: 1fr; } }
.riprendi { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 26px; min-height: 260px; }
.riprendi::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--lv) 22%, transparent), transparent 70%); pointer-events: none;
}
.riprendi h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); font-weight: 650; letter-spacing: -.015em; max-width: 22ch; }
.riprendi p { color: var(--tx-2); max-width: 52ch; }
.riprendi .fila { margin-top: auto; }
.barra-av { height: 6px; border-radius: 3px; background: var(--br); overflow: hidden; }
.barra-av i { display: block; height: 100%; background: var(--acc); border-radius: 3px; }

/* il percorso: 4 linee di fermate */
.percorso { display: grid; gap: 16px; padding: 22px; }
.percorso .riga { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center; }
.percorso .riga b { font-size: 13px; color: var(--lv); }
.fermate { position: relative; display: flex; justify-content: space-between; align-items: center; }
.fermate::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; background: var(--br-forte); border-radius: 1px; }
.fermate a {
  position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--sup-piena); border: 2px solid var(--br-forte);
  transition: transform .2s var(--ease), background .2s;
}
.fermate a:hover { transform: scale(1.25); }
.fermate a.fatta { background: var(--lv); border-color: var(--lv); }
.fermate a.qui { border-color: var(--lv); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lv) 22%, transparent); }
.percorso .conta { font-size: 12px; color: var(--tx-3); min-width: 34px; text-align: right; }

.home-sotto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; }
@media (max-width: 1000px) { .home-sotto { grid-template-columns: 1fr; } }
.sfida-mini { display: flex; gap: 16px; align-items: center; }
.giorno-tondo { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--acc); color: var(--acc-t); font: 700 24px/1 var(--font-titolo); }
.giorno-tondo small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.titolo-sez { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 30px 0 12px; }

/* ===== PROMPT (componente firma) ===== */
.prompt { border: 1px solid var(--br); border-radius: var(--r-grande); background: var(--sup-piena); box-shadow: var(--ombra-1); overflow: hidden; }
.prompt-testa { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--br); background: var(--sup-2); }
.prompt-testa h3 { flex: 1; font-size: 14px; }
.prompt-testa .chip { font-weight: 600; }
.prompt-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
@media (max-width: 760px) { .prompt-corpo { grid-template-columns: 1fr; } }
.prompt-campi { display: grid; gap: 10px; padding: 16px; align-content: start; border-right: 1px solid var(--br); }
@media (max-width: 760px) { .prompt-campi { border-right: 0; border-bottom: 1px solid var(--br); } }
.prompt-campi .campo textarea { min-height: 64px; }
.prompt-anteprima { padding: 16px; font: 13.5px/1.65 var(--font-prompt); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--tx); max-height: 420px; overflow: auto; }
.prompt-anteprima mark { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--tx); border-radius: 3px; padding: 0 2px; transition: background .3s; }
.prompt-anteprima mark.vuoto { background: transparent; color: var(--acc); border: 1px dashed color-mix(in srgb, var(--acc) 55%, transparent); }
.prompt-anteprima mark.pulsa { animation: pulsa .6s var(--ease); }
@keyframes pulsa { from { background: color-mix(in srgb, var(--acc) 45%, transparent); } }
.prompt-azioni { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--br); background: var(--sup-2); }
.prompt-azioni .avanti { margin-left: auto; font-size: 12px; color: var(--tx-3); align-self: center; }
.prompt.chiuso .prompt-corpo, .prompt.chiuso .prompt-azioni { display: none; }
.prompt.chiuso .prompt-testa { border-bottom: 0; background: var(--sup-piena); cursor: pointer; }
.prompt.chiuso .prompt-testa:hover { background: var(--sup-2); }
.prompt .anteprima-breve { display: none; padding: 0 16px 14px; color: var(--tx-2); font-size: 13px; }
.prompt.chiuso .anteprima-breve { display: block; cursor: pointer; }

/* ===== CORSO ===== */
.livello { margin-bottom: 30px; }
.livello-testa { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.livello-testa .num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--lv); color: #fff; font: 700 18px var(--font-titolo); }
:root[data-tema="scuro"] .livello-testa .num { color: #0b1514; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) .livello-testa .num { color: #0b1514; } }
.livello-testa p { margin: 2px 0 0; color: var(--tx-2); font-size: 14px; }
.lista-lezioni { border: 1px solid var(--br); border-radius: var(--r-grande); background: var(--sup); overflow: hidden; }
.lista-lezioni a { display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; color: var(--tx); text-decoration: none; border-top: 1px solid var(--br); transition: background .15s; }
.lista-lezioni a:first-child { border-top: 0; }
.lista-lezioni a:hover { background: var(--acc-tenue); }
.lista-lezioni .st { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--br-forte); font-size: 12px; font-weight: 600; color: var(--tx-3); }
.lista-lezioni a.fatta .st { background: var(--lv); border-color: var(--lv); color: #fff; }
.lista-lezioni a.fatta .st svg { width: 16px; height: 16px; stroke-width: 2.4; }
.lista-lezioni b { display: block; font-weight: 600; }
.lista-lezioni small { color: var(--tx-3); font-size: 13px; }
.lista-lezioni .min { font-size: 13px; color: var(--tx-3); }

/* ===== LEZIONE ===== */
.lezione { max-width: 820px; margin: 0 auto; }
.briciole { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--tx-3); margin-bottom: 14px; flex-wrap: wrap; }
.briciole a { color: var(--tx-2); text-decoration: none; }
.briciole a:hover { color: var(--acc); }
.lezione-testa { margin-bottom: 24px; }
.lezione-testa h1 { margin: 10px 0 10px; }
.obiettivo { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: color-mix(in srgb, var(--lv) 8%, var(--sup-piena)); border: 1px solid color-mix(in srgb, var(--lv) 22%, transparent); color: var(--tx); }
.obiettivo svg { color: var(--lv); margin-top: 2px; }
.corpo { font-size: 16px; line-height: 1.7; }
.corpo > * + * { margin-top: 14px; }
.corpo h2 { margin-top: 32px; font-size: 1.25rem; }
.corpo p { margin: 0; max-width: 70ch; }
.corpo ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; max-width: 72ch; }
.corpo ul li { position: relative; padding-left: 22px; }
.corpo ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 2px; background: var(--lv, var(--acc)); transform: rotate(45deg); }
.corpo .prompt { margin-top: 22px; }
.riquadro { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--br); background: var(--sup-piena); font-size: 15px; }
.riquadro svg { margin-top: 3px; }
.riquadro.tip svg { color: var(--acc); }
.riquadro.att { background: color-mix(in srgb, var(--l-strategia) 8%, var(--sup-piena)); border-color: color-mix(in srgb, var(--l-strategia) 28%, transparent); }
.riquadro.att svg { color: var(--l-strategia); }
.confronto { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--br); border-radius: var(--r-grande); overflow: hidden; background: var(--sup-piena); }
@media (max-width: 640px) { .confronto { grid-template-columns: 1fr; } }
.confronto > div { padding: 14px 16px; font: 13.5px/1.6 var(--font-prompt); }
.confronto > div + div { border-left: 1px solid var(--br); }
@media (max-width: 640px) { .confronto > div + div { border-left: 0; border-top: 1px solid var(--br); } }
.confronto .et { display: flex; align-items: center; gap: 6px; font: 600 12px var(--font); margin-bottom: 6px; }
.confronto .no .et { color: var(--ko); } .confronto .si .et { color: var(--ok); }
.confronto .si { background: color-mix(in srgb, var(--ok) 5%, transparent); }
.esercizio { padding: 18px; border-radius: var(--r-grande); border: 1.5px dashed color-mix(in srgb, var(--lv) 45%, transparent); background: color-mix(in srgb, var(--lv) 4%, transparent); }
.esercizio h3 { display: flex; align-items: center; gap: 8px; color: var(--lv); margin-bottom: 6px; }
.esercizio .campo { margin-top: 12px; }
.spunta { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; margin-top: 10px; }
.spunta input { width: 20px; height: 20px; accent-color: var(--acc); }

/* quiz */
.quiz { margin-top: 36px; }
.quiz-dom { padding: 18px; margin-top: 12px; }
.quiz-dom h3 { font-size: 15.5px; margin-bottom: 10px; }
.risposte { display: grid; gap: 8px; }
.risposte button {
  text-align: left; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--br-forte);
  background: var(--sup-piena); color: var(--tx); font: 14.5px/1.4 var(--font); cursor: pointer; transition: background .15s, border-color .15s;
}
.risposte button:hover:not(:disabled) { background: var(--acc-tenue); border-color: var(--acc); }
.risposte button:disabled { cursor: default; }
.risposte button .let { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--br-forte); font-size: 12px; font-weight: 700; }
.risposte button.giusta { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--sup-piena)); }
.risposte button.giusta .let { background: var(--ok); border-color: var(--ok); color: #fff; }
.risposte button.sbagliata { border-color: var(--ko); background: color-mix(in srgb, var(--ko) 9%, var(--sup-piena)); }
.risposte button.sbagliata .let { background: var(--ko); border-color: var(--ko); color: #fff; }
.perche { margin: 10px 0 0; font-size: 14px; color: var(--tx-2); animation: entra .35s var(--ease); }
.esito { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 18px; padding: 18px 20px; }
.esito.ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.navlez { display: flex; justify-content: space-between; gap: 10px; margin-top: 30px; flex-wrap: wrap; }

/* ===== LAB ===== */
.filtri { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.cerca { position: relative; flex: 1 1 260px; max-width: 380px; }
.cerca svg { position: absolute; left: 10px; top: 50%; margin-top: -10px; color: var(--tx-3); }
.cerca input { padding-left: 38px; }
.pillole { display: flex; gap: 6px; flex-wrap: wrap; }
.pillole button { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--br-forte); background: var(--sup-piena); color: var(--tx-2); font: 500 13px var(--font); cursor: pointer; }
.pillole button[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--acc-t); }
.lista-prompt { display: grid; gap: 10px; }

/* ===== SFIDA ===== */
.griglia-sfida { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .griglia-sfida { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gs { display: flex; flex-direction: column; gap: 4px; min-height: 104px; padding: 10px; border-radius: var(--r); border: 1px solid var(--br); background: var(--sup); color: var(--tx); text-decoration: none; font-size: 12.5px; line-height: 1.35; transition: transform .2s var(--ease), box-shadow .2s; }
.gs:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); }
.gs b { font: 700 18px var(--font-titolo); color: var(--tx-3); }
.gs.fatto { background: color-mix(in srgb, var(--acc) 12%, var(--sup-piena)); border-color: color-mix(in srgb, var(--acc) 35%, transparent); }
.gs.fatto b { color: var(--acc); }
.gs.oggi { border: 2px solid var(--acc); box-shadow: var(--ombra-2); }
.gs.chiuso { opacity: .55; }

/* ===== ESAME / ATTESTATO / REGISTRO ===== */
.due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 820px) { .due { grid-template-columns: 1fr; } }
.esame-card { display: flex; flex-direction: column; gap: 10px; }
.esame-card .fila { margin-top: auto; }
.esame-prog { position: sticky; top: 0; z-index: 5; padding: 10px 0; background: linear-gradient(var(--mica) 70%, transparent); }
.attestato {
  position: relative; max-width: 900px; margin: 0 auto; aspect-ratio: 1.414; padding: 6% 7%; background: #fff; color: #142221; border-radius: 4px; box-shadow: var(--ombra-3);
  display: flex; flex-direction: column; overflow: hidden;
}
.attestato::before { content: ""; position: absolute; inset: 14px; border: 1.5px solid #0a6b66; border-radius: 2px; pointer-events: none; }
.attestato::after { content: ""; position: absolute; inset: 20px; border: .5px solid rgba(10, 107, 102, .4); pointer-events: none; }
.att-alto { display: flex; justify-content: space-between; align-items: center; font: 600 13px var(--font); color: #0a6b66; letter-spacing: .02em; }
.att-alto img { width: 44px; height: 44px; border-radius: 10px; }
.att-centro { margin: auto 0; text-align: center; }
.att-centro .tipo { font: 600 clamp(10px, 1.5vw, 14px) var(--font); letter-spacing: .14em; text-transform: uppercase; color: #4c5f5d; }
.att-centro .nome { font: 650 clamp(24px, 5vw, 50px)/1.1 var(--font-titolo); letter-spacing: -.02em; margin: .35em 0 .25em; color: #0d1716; }
.att-centro .desc { font-size: clamp(11px, 1.7vw, 16px); color: #334341; max-width: 60ch; margin: 0 auto; }
.att-centro .corso { font: 650 clamp(15px, 2.6vw, 26px)/1.2 var(--font-titolo); color: #0a6b66; margin: .5em 0; }
.att-basso { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; font-size: clamp(9px, 1.25vw, 12.5px); color: #415250; }
.att-basso b { display: block; color: #142221; font-size: 1.15em; }
.att-basso .firma { text-align: right; }
.att-basso .firma b { font: italic 600 1.6em var(--font-titolo); color: #0a6b66; }
.att-codice { font-family: var(--font-prompt); letter-spacing: .06em; }
.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th, .tabella td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--br); }
.tabella th { font-size: 12px; color: var(--tx-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tabella td.tab, .tabella td .att-codice { white-space: nowrap; }
.vuoto-stato { text-align: center; padding: 34px 20px; color: var(--tx-2); }
.vuoto-stato svg { width: 40px; height: 40px; color: var(--tx-3); margin-bottom: 8px; }
.scorri-x { overflow-x: auto; }

/* ===== GLOSSARIO / FUNZIONI ===== */
.glossario { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 28px; }
.glossario div { padding: 12px 0; border-bottom: 1px solid var(--br); }
.glossario dt { font-weight: 650; }
.glossario dd { margin: 2px 0 0; color: var(--tx-2); font-size: 14px; }
.funzioni { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; }
.funzioni a { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--br); color: var(--tx); text-decoration: none; }
.funzioni a:hover b { color: var(--acc); }
.funzioni a > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--acc-tenue); color: var(--acc); }
.funzioni small { display: block; color: var(--tx-2); font-size: 13.5px; margin-top: 2px; }

/* ===== dialog e avvisi ===== */
dialog { border: 1px solid var(--br); border-radius: var(--r-grande); padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--sup-piena); color: var(--tx); box-shadow: var(--ombra-3); }
dialog::backdrop { background: rgba(0, 0, 0, .32); backdrop-filter: blur(2px); }
dialog[open] { animation: dlg .3s var(--ease); }
@keyframes dlg { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.dlg-corpo { padding: 24px; display: grid; gap: 12px; max-height: 72vh; overflow: auto; }
.dlg-corpo p { margin: 0; color: var(--tx-2); }
.dlg-piede { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 24px; background: var(--sup-2); border-top: 1px solid var(--br); }
.dlg-form { display: grid; gap: 10px; }
.avviso { position: fixed; z-index: 60; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 10px 18px; border-radius: 8px; background: var(--tx); color: var(--mica); box-shadow: var(--ombra-2); font-size: 14px; animation: dlg .3s var(--ease); max-width: calc(100vw - 32px); }
@media (max-width: 860px) { .avviso { bottom: 96px; } }

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

/* ===== stampa: solo l'attestato o il registro ===== */
@media print {
  @page { size: A4 landscape; margin: 0; }
  body { background: #fff; }
  .nav, .barra, .testata, .no-stampa, #centrale-cgfa { display: none !important; }
  main { padding: 0; }
  .vista { max-width: none; animation: none; }
  .attestato { box-shadow: none; max-width: none; width: 297mm; height: 210mm; aspect-ratio: auto; border-radius: 0; }
  body.stampa-registro { padding: 14mm; }
  body.stampa-registro .pannello { box-shadow: none; border: 0; background: #fff; backdrop-filter: none; }
}
@media (max-width: 640px) {
  .percorso .riga { grid-template-columns: 112px 1fr auto; }
  .pillole { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px; scrollbar-width: none; }
  .pillole button { flex: none; }
  .filtri .cerca { max-width: none; }
}