/* sessione.afsalerno.it — stessi colori e caratteri del portale collaboratori e del vademecum. */
:root {
  --bg:#f3f5f9; --card:#ffffff; --ink:#16213a; --muted:#5b6680; --line:#d8deea; --soft:#e9edf5;
  --navy:#1d3a72; --red:#c8102e; --on:#ffffff;
  --ok:#17734a; --ok-soft:#e3f4ec; --warn:#8a5a00; --warn-soft:#fff4dc; --bad:#b3261e; --bad-soft:#fbe9e7;
  --blue:#1f5fbf; --blue-soft:#e6efff;
  --t1:#1d3a72; --t2:#7a3e9d; --t3:#0f7c86; --t4:#a35a00; --t5:#c8102e; --t6:#2f7d32; --t7:#5b6680;
  --display:"Barlow Condensed","Arial Narrow",sans-serif; --body:"Public Sans",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg:#0f1522; --card:#172033; --ink:#e6ebf5; --muted:#9aa6bf; --line:#2a3650; --soft:#1d2840;
  --navy:#8fb0f0; --red:#ff6b7d; --on:#0f1522;
  --ok:#5fd39b; --ok-soft:#14291f; --warn:#f5c56b; --warn-soft:#2e2614; --bad:#ff8a80; --bad-soft:#3a1c1a;
  --blue:#8fb0f0; --blue-soft:#1b2a48;
  --t1:#8fb0f0; --t2:#c79be3; --t3:#5cc8d2; --t4:#f0a95a; --t5:#ff6b7d; --t6:#7fcf83; --t7:#9aa6bf; color-scheme:dark } }
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { background:var(--bg); color:var(--ink); font:15px/1.5 var(--body); margin:0 }
a { color:var(--navy) }
.wrap { max-width:1180px; margin:0 auto; padding-block:18px 56px;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)) }
.top { border-bottom:3px solid var(--red); padding-bottom:12px; display:flex; flex-wrap:wrap; gap:10px 24px; align-items:flex-end; justify-content:space-between }
.kicker { font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:600 }
h1 { font:700 32px/1.05 var(--display); margin:4px 0 0; color:var(--navy); text-wrap:balance }
h2 { font:700 23px/1.1 var(--display); color:var(--navy); margin:0 0 10px }
.barra { display:flex; flex-wrap:wrap; gap:8px; align-items:center }
select, input[type=password] { font:600 15px var(--body); padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink) }
.btn { font:700 14px var(--body); padding:9px 14px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px }
.btn.primary { background:var(--navy); color:var(--on); border-color:var(--navy) }
.btn:disabled { opacity:.5; cursor:wait }
.btn:focus-visible, select:focus-visible { outline:2px solid var(--red); outline-offset:2px }
.muted { color:var(--muted) }
.sez { margin-top:26px }

/* il conto alla rovescia */
.jj { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; margin:16px 0 4px }
.jj b { font:700 44px/1 var(--display); color:var(--red); font-variant-numeric:tabular-nums }

/* adesso tocca a lei */
.adesso { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)) }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px }
.card h3 { margin:2px 0 4px; font-size:16px; line-height:1.3 }
.card p { margin:4px 0 0 }

/* i numeri */
.kpi { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)) }
.kpi .card { padding:12px 14px }
.kpi .v { font:700 30px/1 var(--display); font-variant-numeric:tabular-nums }
.kpi .l { font-size:13px; color:var(--muted); margin-top:4px }
.kpi .card.ok { border-left:4px solid var(--ok) }
.kpi .card.warn { border-left:4px solid var(--warn) }
.kpi .card.bad { border-left:4px solid var(--bad) }

/* stato */
.st { display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:999px; white-space:nowrap }
.st.fatta { background:var(--ok-soft); color:var(--ok) }
.st.in_corso { background:var(--blue-soft); color:var(--blue) }
.st.in_ritardo { background:var(--bad-soft); color:var(--bad) }
.st.da_fare { background:var(--soft); color:var(--muted) }
.st.passata { background:var(--soft); color:var(--muted) }

/* barra dei tempi */
.legenda { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; margin-bottom:8px }
.legenda span { display:flex; align-items:center; gap:6px }
.legenda i { width:12px; height:12px; border-radius:3px; display:inline-block }
.gantt-box { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow-x:auto }
.gantt { position:relative; display:grid; grid-template-columns:220px auto; min-width:max-content }
.g-lab, .g-row { height:28px; display:flex; align-items:center; border-bottom:1px solid var(--soft) }
.g-lab { position:sticky; left:0; z-index:3; background:var(--card); padding:0 10px; font-size:13px; font-weight:600; border-right:1px solid var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; gap:6px }
.g-lab i { width:8px; height:8px; border-radius:2px; flex:none }
.g-head { height:42px; position:relative; border-bottom:1px solid var(--line) }
.g-head.lab { position:sticky; left:0; z-index:4; background:var(--card); border-right:1px solid var(--line); display:flex; align-items:flex-end; padding:0 10px 6px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600 }
.tick { position:absolute; top:0; bottom:0; border-left:1px solid var(--soft); font-size:11px; color:var(--muted); padding:4px 0 0 4px; white-space:nowrap; font-variant-numeric:tabular-nums }
.tick.m { border-left-color:var(--line); color:var(--ink); font-weight:600 }
.tick .jx { position:absolute; top:22px; left:4px }
.g-row { position:relative }
.bar { position:absolute; height:16px; top:6px; border-radius:5px; cursor:pointer; min-width:6px }
.bar.ms { width:13px !important; height:13px; top:8px; border-radius:2px; transform:rotate(45deg); min-width:0 }
.bar.fatta { background:var(--ok) } .bar.in_corso { background:var(--blue) } .bar.in_ritardo { background:var(--bad) }
.bar.da_fare { background:var(--line) } .bar.passata { background:var(--muted); opacity:.55 }
.vline { position:absolute; top:0; bottom:0; width:0; z-index:2; pointer-events:none }
.vline.j { border-left:2px solid var(--red) }
.vline.oggi { border-left:2px dashed var(--ok) }
.vline span { position:absolute; left:4px; font:700 11px var(--body); padding:1px 5px; border-radius:4px; white-space:nowrap }
.vline.j span { top:2px; background:var(--red); color:var(--on) }
.vline.oggi span { top:22px; background:var(--ok); color:var(--on) }

/* tappe */
.binario { margin-top:22px }
.binario h3 { display:flex; align-items:center; gap:8px; font:700 19px/1.1 var(--display); color:var(--navy); margin:0 0 8px }
.binario h3 i { width:12px; height:12px; border-radius:3px }
.tappa { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:grid; grid-template-columns:150px minmax(0,1fr); gap:6px 16px; margin-bottom:8px }
.tappa.hl { outline:2px solid var(--red) }
.tappa .q b { display:block; font:700 17px/1.15 var(--display); color:var(--navy) }
.tappa .q small { color:var(--muted); font-variant-numeric:tabular-nums }
.tappa h4 { margin:0; font-size:15.5px }
.tappa p { margin:3px 0 0; max-width:80ch }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center }
.chip { font-size:12px; padding:2px 8px; border-radius:6px; background:var(--soft) }
.chip.tool { font-family:ui-monospace,Consolas,monospace; font-size:11.5px }
.chip.dato { background:var(--blue-soft); color:var(--blue); font-weight:600 }
.chip.todo { background:var(--warn-soft); color:var(--warn); font-weight:700 }

/* documenti */
.docs { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)) }
.docs h3 { margin:0 0 6px; font:700 18px/1.2 var(--display); color:var(--navy) }
.flist { list-style:none; margin:0; padding:0; display:grid; gap:6px }
.flist li { display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline; min-width:0 }
.flist a { font-weight:600; overflow-wrap:anywhere }
.flist .muted { font-size:12.5px; font-variant-numeric:tabular-nums }

/* risultato di un pulsante */
.esito { margin-top:10px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--bg) }
.esito pre { white-space:pre-wrap; font:12px/1.45 ui-monospace,Consolas,monospace; max-height:280px; overflow:auto; margin:6px 0 0 }
.esito.ok { border-color:var(--ok) } .esito.ko { border-color:var(--bad) }

/* accesso */
.login { max-width:380px; margin:12vh auto 0; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px }
.login form { display:grid; gap:12px; margin-top:16px }
.errore { background:var(--bad-soft); color:var(--bad); padding:8px 10px; border-radius:8px; font-weight:600 }

@media (max-width:640px) {
  .gantt { grid-template-columns:140px auto }
  .tappa { grid-template-columns:1fr }
  h1 { font-size:27px }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important } }