/* ============================================================
   SAFES — design system (docs/03-design-system.md)
   Caricato DOPO bootstrap.min.css. Nessun build tool.
   Sezioni: 1 token · 2 font · 3 base · 4 bottoni · 5 form
            6 componenti sf- · 7 header/footer sito · 8 area riservata
            9 accessibilità · 10 utilità
   ============================================================ */

/* ---------- 1. Token ---------- */
:root{
  /* primari — blu SAFES rgba(35,99,145,1) */
  --sf-petrolio:       #236391;
  --sf-petrolio-scuro: #17415F;
  --sf-petrolio-chiaro:#E4EDF5;
  /* accento */
  --sf-ambra:        #B4530C;
  --sf-ambra-chiaro: #FBEDE2;
  /* neutri (temperatura allineata al blu) */
  --sf-inchiostro: #142027;
  --sf-grigio:     #5A6772;
  --sf-bordo:      #D9DFE6;
  --sf-fondo:      #F3F5F7;
  --sf-bianco:     #FFFFFF;
  /* semantici */
  --sf-ok:     #1B7A4B;
  --sf-ok-chiaro:     #E3F2EA;
  --sf-attesa: #A96A00;
  --sf-attesa-chiaro: #FBF0DC;
  --sf-errore: #B3261E;
  --sf-errore-chiaro: #F9E5E4;
  --sf-info:   #0E5C8A;
  --sf-info-chiaro:   #E3EEF5;
  /* focus */
  --sf-focus: #FFB000;
  /* spaziatura, scala 4px */
  --sf-s1:4px; --sf-s2:8px; --sf-s3:12px; --sf-s4:16px; --sf-s5:24px;
  --sf-s6:32px; --sf-s7:48px; --sf-s8:64px; --sf-s9:96px;

  /* mappatura Bootstrap */
  --bs-primary: var(--sf-petrolio);
  --bs-primary-rgb: 35,99,145;
  --bs-body-color: var(--sf-inchiostro);
  --bs-body-bg: var(--sf-fondo);
  --bs-border-color: var(--sf-bordo);
  --bs-border-radius: .75rem;
  --bs-link-color: var(--sf-petrolio);
  --bs-link-color-rgb: 35,99,145;
  --bs-link-hover-color: var(--sf-petrolio-scuro);
  --bs-link-hover-color-rgb: 23,65,95;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-font-size: 0.9375rem;
  --bs-body-line-height: 1.6;
}

/* Contrasto elevato (barra accessibilità) */
html[data-contrasto="alto"]{
  --sf-petrolio: #12344D; --sf-petrolio-scuro:#0A1D2E;
  --sf-inchiostro:#000000; --sf-grigio:#333B44;
  --sf-bordo:#7C8794; --sf-fondo:#ffffff;
  --sf-ambra:#8a3d05;
}
/* Dimensione testo (barra accessibilità) */
html[data-testo="115"]{ font-size: 115%; }
html[data-testo="130"]{ font-size: 130%; }
/* Font ad alta leggibilità */
html[data-font="hyperlegible"] body,
html[data-font="hyperlegible"] .btn,
html[data-font="hyperlegible"] input, html[data-font="hyperlegible"] select,
html[data-font="hyperlegible"] textarea{
  font-family: 'Atkinson Hyperlegible', 'Inter', system-ui, sans-serif !important;
}
/* Riduzione animazioni: preferenza utente o di sistema */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; scroll-behavior:auto !important; }
}
html[data-animazioni="ridotte"] *, html[data-animazioni="ridotte"] *::before, html[data-animazioni="ridotte"] *::after{
  animation: none !important; transition: none !important; scroll-behavior:auto !important;
}

/* ---------- 2. Font self-hosted ---------- */
@font-face{ font-family:'Inter'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fonts/inter-400.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-weight:500; font-style:normal; font-display:swap;
  src:url('../fonts/inter-500.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-weight:600; font-style:normal; font-display:swap;
  src:url('../fonts/inter-600.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-weight:700; font-style:normal; font-display:swap;
  src:url('../fonts/inter-700.woff2') format('woff2'); }
@font-face{ font-family:'Atkinson Hyperlegible'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fonts/atkinson-400.woff2') format('woff2'); }
@font-face{ font-family:'Atkinson Hyperlegible'; font-weight:700; font-style:normal; font-display:swap;
  src:url('../fonts/atkinson-700.woff2') format('woff2'); }

/* ---------- 3. Base ---------- */
body{ font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size); color: var(--sf-inchiostro); background: var(--sf-fondo); }
h1,h2,h3,h4,h5{ font-weight:700; letter-spacing:-0.02em; color:var(--sf-inchiostro); }
h1{ font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.15rem); }
h2{ font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
h3{ font-size: 1.1rem; font-weight:600; }
/* Le classi .h1–.h6 di Bootstrap seguono la stessa scala ridotta */
.h1{ font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.15rem) !important; }
.h2{ font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem) !important; }
.h3{ font-size: 1.3rem !important; }
.h4{ font-size: 1.15rem !important; }
.h5{ font-size: 1rem !important; }
.h6{ font-size: .875rem !important; }
.lead{ font-size: 1.05rem; }
.fs-2{ font-size: 1.6rem !important; }
.fs-4{ font-size: 1.2rem !important; }
.fs-5{ font-size: 1.05rem !important; }
a{ text-underline-offset: 2px; }
main{ display:block; }

/* Focus visibile ovunque — MAI outline:none senza sostituto */
:focus-visible{ outline: 3px solid var(--sf-focus) !important; outline-offset: 2px; border-radius:4px; }
.btn:focus-visible, a.btn:focus-visible{ outline: 3px solid var(--sf-focus) !important; outline-offset: 2px; box-shadow:none; }

/* Skip link */
.sf-skip{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--sf-inchiostro); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
}
.sf-skip:focus{ left:0; color:#fff; }

.sf-eyebrow{
  font-size:.75rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; color:var(--sf-petrolio);
}
.sf-prosa{ font-size:1rem; line-height:1.7; max-width:68ch; }
.sf-prosa img{ max-width:100%; height:auto; border-radius:12px; }
.sf-prosa h2{ margin-top:2rem; } .sf-prosa h3{ margin-top:1.5rem; }
.sf-prosa blockquote{ border-left:4px solid var(--sf-petrolio); padding:.5rem 0 .5rem 1.25rem; color:var(--sf-grigio); }
.sf-micro{ font-size:.8125rem; color:var(--sf-grigio); }
.text-secondary, .sf-testo-secondario{ color:var(--sf-grigio) !important; }

/* ---------- 4. Bottoni ---------- */
/* 44px = minimo assoluto per i tap target (docs/03 §3) */
.btn{ border-radius:10px; font-weight:600; min-height:44px; padding:.5rem 1.25rem;
  font-size:.9375rem; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; }
.btn-lg{ font-size:1.02rem; padding:.6rem 1.4rem; }
.btn-sm{ min-height:34px; padding:.3rem .85rem; font-size:.85rem; }
.btn-primary{
  --bs-btn-bg: var(--sf-petrolio); --bs-btn-border-color: var(--sf-petrolio);
  --bs-btn-hover-bg: var(--sf-petrolio-scuro); --bs-btn-hover-border-color: var(--sf-petrolio-scuro);
  --bs-btn-active-bg: var(--sf-petrolio-scuro); --bs-btn-active-border-color: var(--sf-petrolio-scuro);
  --bs-btn-disabled-bg:#7FA0BC; --bs-btn-disabled-border-color:#7FA0BC;
}
.btn-outline-primary{
  --bs-btn-color: var(--sf-petrolio); --bs-btn-border-color: var(--sf-petrolio);
  --bs-btn-hover-bg: var(--sf-petrolio); --bs-btn-hover-border-color: var(--sf-petrolio);
  --bs-btn-active-bg: var(--sf-petrolio-scuro); --bs-btn-active-border-color: var(--sf-petrolio-scuro);
}
.btn-accento{
  --bs-btn-bg: var(--sf-ambra); --bs-btn-border-color: var(--sf-ambra); --bs-btn-color:#fff;
  --bs-btn-hover-bg:#8f4108; --bs-btn-hover-border-color:#8f4108; --bs-btn-hover-color:#fff;
  --bs-btn-active-bg:#8f4108; --bs-btn-active-border-color:#8f4108; --bs-btn-active-color:#fff;
  --bs-btn-disabled-bg:#d5a582; --bs-btn-disabled-border-color:#d5a582; --bs-btn-disabled-color:#fff;
}
.btn-link{ min-height:auto; }

/* ---------- 5. Form ---------- */
.form-control, .form-select{ min-height:44px; font-size:.9375rem; border-color:var(--sf-bordo); border-radius:10px; }
textarea.form-control{ min-height:100px; }
.form-label{ font-weight:600; margin-bottom:.35rem; font-size:.9rem; }
.form-text{ color:var(--sf-grigio); }
.form-control:focus, .form-select:focus{
  border-color: var(--sf-petrolio); box-shadow: 0 0 0 .2rem rgba(35,99,145,.15);
}
.form-check-input{ width:1.35em; height:1.35em; border-color:var(--sf-grigio); margin-top:.1em; }
.form-check-input:checked{ background-color:var(--sf-petrolio); border-color:var(--sf-petrolio); }
.form-check-label{ padding-left:.25rem; }
.sf-obbligatorio::after{ content:" (obbligatorio)"; font-weight:400; color:var(--sf-grigio); font-size:.875em; }
.sf-errori-riepilogo{ border:2px solid var(--sf-errore); border-radius:12px; background:var(--sf-errore-chiaro); padding:16px 20px; }
.sf-errori-riepilogo a{ color:var(--sf-errore); font-weight:600; }
.invalid-feedback{ display:block; color:var(--sf-errore); font-weight:500; }
.is-invalid{ border-color:var(--sf-errore) !important; }

/* ---------- 6. Componenti sf- ---------- */
.sf-icona{ width:1.25em; height:1.25em; flex-shrink:0; vertical-align:-0.22em; }
.sf-icona--g{ width:1.75em; height:1.75em; }

.sf-card{
  background:var(--sf-bianco); border:1px solid var(--sf-bordo); border-radius:12px;
  padding:var(--sf-s5); box-shadow:0 1px 2px rgba(20,32,39,.06);
}
a.sf-card{ display:block; color:inherit; text-decoration:none; transition:border-color .15s ease; }
a.sf-card:hover{ border-color: var(--sf-petrolio); }

/* Card corso */
.sf-card-corso{ display:flex; flex-direction:column; height:100%; padding:0; overflow:hidden; }
.sf-card-corso__img{ aspect-ratio:16/9; width:100%; object-fit:cover; background:var(--sf-petrolio-chiaro); }
.sf-card-corso__body{ padding:var(--sf-s5); display:flex; flex-direction:column; gap:var(--sf-s3); flex-grow:1; }
.sf-card-corso__meta{ display:flex; flex-wrap:wrap; gap:var(--sf-s2) var(--sf-s4); color:var(--sf-grigio); font-size:.9375rem; }
.sf-card-corso__prezzo{ font-weight:700; font-size:1.05rem; margin-top:auto; }

/* Badge accessibilità / riconoscimenti — sempre icona + testo */
.sf-badges{ display:flex; flex-wrap:wrap; gap:var(--sf-s2); }
.sf-badge{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.8125rem; font-weight:600; padding:.35em .75em; border-radius:999px;
  background:var(--sf-petrolio-chiaro); color:var(--sf-petrolio-scuro); border:1px solid transparent;
}
.sf-badge--lis{ background:var(--sf-petrolio-chiaro); color:var(--sf-petrolio-scuro); }
.sf-badge--sottotitoli{ background:var(--sf-info-chiaro); color:var(--sf-info); }
.sf-badge--mim{ background:var(--sf-ok-chiaro); color:var(--sf-ok); }
.sf-badge--carta-docente{ background:var(--sf-ambra-chiaro); color:var(--sf-ambra); }

/* Pill di stato — icona + testo, mai solo colore */
.sf-stato{
  display:inline-flex; align-items:center; gap:.4em; font-size:.875rem; font-weight:600;
  padding:.3em .8em; border-radius:999px; white-space:nowrap;
}
.sf-stato--ok{ background:var(--sf-ok-chiaro); color:var(--sf-ok); }
.sf-stato--attesa{ background:var(--sf-attesa-chiaro); color:var(--sf-attesa); }
.sf-stato--errore{ background:var(--sf-errore-chiaro); color:var(--sf-errore); }
.sf-stato--neutro{ background:#E9EDF1; color:var(--sf-grigio); }
.sf-stato--info{ background:var(--sf-info-chiaro); color:var(--sf-info); }

/* Timeline lezioni */
.sf-timeline{ list-style:none; margin:0; padding:0; }
.sf-timeline li{
  display:flex; gap:var(--sf-s4); padding:var(--sf-s4) 0; border-bottom:1px solid var(--sf-bordo);
  align-items:flex-start;
}
.sf-timeline li:last-child{ border-bottom:0; }
.sf-timeline__data{
  flex-shrink:0; width:64px; text-align:center; background:var(--sf-petrolio-chiaro);
  border-radius:10px; padding:6px 4px; line-height:1.2;
}
.sf-timeline__data .g{ font-size:1.15rem; font-weight:700; display:block; }
.sf-timeline__data .m{ font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }

/* Barra avanzamento con percentuale testuale */
.sf-progress{ display:flex; align-items:center; gap:var(--sf-s3); }
.sf-progress__barra{ flex-grow:1; height:10px; border-radius:999px; background:#E2E7ED; overflow:hidden; }
.sf-progress__barra > span{ display:block; height:100%; background:var(--sf-petrolio); border-radius:999px; }
.sf-progress__testo{ font-weight:600; font-size:.9375rem; white-space:nowrap; }

/* Stato vuoto */
.sf-empty{ text-align:center; padding:var(--sf-s7) var(--sf-s5); color:var(--sf-grigio); }
.sf-empty .sf-icona{ width:44px; height:44px; margin-bottom:var(--sf-s3); color:var(--sf-petrolio); }
.sf-empty p{ max-width:38ch; margin-inline:auto; }

/* Tabella responsiva: sotto 768px diventa schede con etichette */
.sf-tabella{ width:100%; background:var(--sf-bianco); border:1px solid var(--sf-bordo); border-radius:12px; overflow:hidden; }
.sf-tabella table{ margin:0; }
.sf-tabella th{ background:var(--sf-petrolio-chiaro); color:var(--sf-petrolio-scuro); font-size:.875rem;
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.sf-tabella td{ vertical-align:middle; }
@media (max-width: 767.98px){
  .sf-tabella thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .sf-tabella tr{ display:block; border-bottom:8px solid var(--sf-fondo); }
  .sf-tabella td{ display:flex; justify-content:space-between; gap:var(--sf-s4); text-align:right; border:0;
    border-bottom:1px solid var(--sf-bordo); }
  .sf-tabella td::before{ content:attr(data-etichetta); font-weight:600; text-align:left; color:var(--sf-grigio); }
  .sf-tabella td:last-child{ border-bottom:0; }
}

/* Variante compatta della tabella (elenchi densi: presenze, storici) */
.sf-tabella--compatta th{ padding:.45rem .75rem; font-size:.72rem; }
.sf-tabella--compatta td{ padding:.4rem .75rem; font-size:.85rem; }
.sf-tabella--compatta tbody tr:nth-child(even){ background:rgba(35,99,145,.04); }
.sf-tabella--compatta .sf-stato{ font-size:.72rem; padding:.15em .6em; gap:.3em; }

/* Riepilogo presenze: contatori a chip */
.sf-riassunto{ display:flex; flex-wrap:wrap; gap:var(--sf-s2); }

/* Visualizzatore PDF nel modal */
.sf-pdf-corpo{ background:var(--sf-fondo); }
.sf-pdf-pagina{ display:block; margin-inline:auto; background:#fff; border-radius:4px;
  box-shadow:0 2px 12px rgba(20,32,39,.18); max-width:100%; }

/* Barra accessibilità */
.sf-toolbar-a11y{ background:var(--sf-petrolio-scuro); color:#fff; font-size:.875rem; }
.sf-toolbar-a11y .btn{
  min-height:34px; padding:.15rem .65rem; font-size:.8125rem; border-radius:8px;
  color:#fff; border:1px solid rgba(255,255,255,.4); background:transparent;
}
.sf-toolbar-a11y .btn[aria-pressed="true"]{ background:#fff; color:var(--sf-petrolio-scuro); border-color:#fff; }
.sf-toolbar-a11y a{ color:#fff; }

/* Avvisi */
.sf-avviso{ border-radius:12px; padding:14px 18px; display:flex; gap:12px; align-items:flex-start; }
.sf-avviso--ok{ background:var(--sf-ok-chiaro); color:var(--sf-ok); }
.sf-avviso--errore{ background:var(--sf-errore-chiaro); color:var(--sf-errore); }
.sf-avviso--info{ background:var(--sf-info-chiaro); color:var(--sf-info); }
.sf-avviso--attesa{ background:var(--sf-attesa-chiaro); color:var(--sf-attesa); }

/* ---------- 7. Sito pubblico ---------- */
.sf-utility{ background:var(--sf-petrolio-scuro); color:#fff; font-size:.875rem; }
.sf-utility a{ color:#fff; text-decoration:none; }
.sf-utility a:hover{ text-decoration:underline; }

.sf-header{ background:var(--sf-bianco); border-bottom:1px solid var(--sf-bordo); position:sticky; top:0; z-index:1030; }
.sf-header .navbar-brand{ font-weight:700; font-size:1.35rem; color:var(--sf-petrolio); display:flex; align-items:center; gap:.5rem; }
.sf-header .nav-link{ font-weight:600; color:var(--sf-inchiostro); padding:.75rem 1rem; border-radius:8px; }
.sf-header .nav-link:hover{ background:var(--sf-petrolio-chiaro); color:var(--sf-petrolio-scuro); }
.sf-header .nav-link.active{ color:var(--sf-petrolio); }
@media (max-width: 991.98px){
  .sf-header .navbar-collapse{ padding:var(--sf-s4) 0 var(--sf-s5); }
  .sf-header .nav-link{ font-size:1.25rem; min-height:48px; }
}

.sf-hero{ background:linear-gradient(160deg, var(--sf-petrolio) 0%, var(--sf-petrolio-scuro) 100%); color:#fff; }
.sf-hero h1{ color:#fff; }
.sf-hero .lead{ color:#DCE9F4; font-size:1.05rem; max-width:56ch; }
.sf-hero a:not(.btn){ color:#fff; }
.sf-hero .btn-outline-light{ --bs-btn-border-color:#fff; --bs-btn-color:#fff; }

.sf-sezione{ padding-block: var(--sf-s8); }
@media (min-width: 992px){ .sf-sezione{ padding-block: var(--sf-s9); } }
.sf-sezione--bianca{ background:var(--sf-bianco); }
.sf-sezione--petrolio{ background:var(--sf-petrolio-chiaro); }

.sf-footer{ background:var(--sf-petrolio-scuro); color:#CDDEEC; }
.sf-footer a{ color:#fff; text-decoration:none; }
.sf-footer a:hover{ text-decoration:underline; }
.sf-footer h2, .sf-footer h3{ color:#fff; font-size:1rem; text-transform:uppercase; letter-spacing:.06em; }
.sf-footer hr{ border-color:rgba(255,255,255,.2); opacity:1; }

/* Banner cookie */
.sf-cookie{
  position:fixed; inset-inline:0; bottom:0; z-index:1080; background:var(--sf-bianco);
  border-top:3px solid var(--sf-petrolio); box-shadow:0 -4px 24px rgba(20,32,39,.18);
  padding:var(--sf-s5) 0;
}

/* Aree di intervento */
.sf-area-box{ text-align:left; height:100%; }
.sf-area-box .sf-icona{ width:40px; height:40px; color:var(--sf-petrolio); margin-bottom:var(--sf-s3); }

/* ---------- 8. Area riservata ---------- */
.sf-area-main{ padding-bottom: 90px; } /* spazio per bottom nav mobile */
@media (min-width: 992px){ .sf-area-main{ padding-bottom: var(--sf-s7); } }

.sf-bottomnav{
  position:fixed; inset-inline:0; bottom:0; z-index:1040; background:var(--sf-bianco);
  border-top:1px solid var(--sf-bordo); display:flex;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.sf-bottomnav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 4px 10px; font-size:.75rem; font-weight:600; color:var(--sf-grigio); text-decoration:none;
  min-height:56px;
}
.sf-bottomnav a.active{ color:var(--sf-petrolio); }
.sf-bottomnav .sf-icona{ width:24px; height:24px; }
@media (min-width: 992px){ .sf-bottomnav{ display:none; } }

.sf-area-side{ display:none; }
@media (min-width: 992px){
  .sf-area-side{ display:block; width:240px; flex-shrink:0; }
  .sf-area-side .nav-link{
    display:flex; align-items:center; gap:.75rem; color:var(--sf-inchiostro); font-weight:600;
    border-radius:10px; padding:.7rem 1rem; margin-bottom:2px;
  }
  .sf-area-side .nav-link:hover{ background:var(--sf-petrolio-chiaro); }
  .sf-area-side .nav-link.active{ background:var(--sf-petrolio); color:#fff; }
}

/* Card prossima lezione */
.sf-prossima{ background:var(--sf-petrolio); color:#fff; border:0; }
.sf-prossima h2, .sf-prossima h3{ color:#fff; }
.sf-prossima .sf-micro{ color:#CDDEEC; }

/* Appello (docente) — checkbox grandi per tablet */
.sf-appello .form-check-input{ width:1.8em; height:1.8em; }
.sf-appello .list-group-item{ padding:var(--sf-s4); }

/* ---------- 9. Utilità ---------- */
.sf-hide-visually{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sf-max-lettura{ max-width:68ch; }
img{ max-width:100%; height:auto; }
.sf-num{ font-variant-numeric: tabular-nums; }
.sf-divider{ border-top:1px solid var(--sf-bordo); }