/* ===== LSPD Realistic UI ===== */
:root{
  /* LAPD/LSPD-like palette */
  --navy-900:#0b1f3a;   /* header, hero */
  --navy-800:#112a4c;   /* blocchi scuri */
  --navy-700:#18365e;   /* hover/inset */
  --navy-600:#1e3f6e;
  --bg:#f5f7fb;         /* sfondo pagine chiaro */
  --text:#1f2a37;       /* testo principale */
  --muted:#5b6b7f;      /* testo attenuato */
  --gold:#c9a227;       /* accenti / brand */
  --gold-700:#b6901e;   /* hover */
  --border:#d7dee9;     /* bordi chiari */

  --radius:14px;
  --shadow: 0 8px 24px rgba(17,42,76,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Roboto",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;color:var(--text);background:var(--bg);line-height:1.5}

/* ---------- Layout & utilities ---------- */
.container{max-width:1100px;margin:0 auto;padding:18px}
.flex{display:flex}.between{justify-content:space-between}.align-center{align-items:center}.wrap{flex-wrap:wrap}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.center{text-align:center}.muted{color:var(--muted)}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin:18px 0}

/* ---------- Header / Navbar ---------- */
.header{
  background:var(--navy-900); color:#fff; border-bottom:4px solid var(--gold);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand img{height:36px;width:auto}
.brand-title{font-family:"Roboto Condensed",sans-serif;font-weight:700;letter-spacing:.4px;font-size:20px;line-height:1}
.nav a{color:#e9eef7;text-decoration:none;padding:10px 12px;border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.08)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,var(--navy-900),var(--navy-800));color:#fff;border-bottom:1px solid #0c1a31}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero h1{font-family:"Roboto Condensed",sans-serif;font-size:clamp(24px,4.5vw,44px);margin:0 0 8px}
.hero p{margin:0;color:#e2e8f4}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(201,162,39,.15);border:1px solid rgba(201,162,39,.6);color:#ae9d00;padding:6px 10px;border-radius:999px;font-weight:600}

/* ---------- Advisory / comunicato ---------- */
.notice{
  border-left:6px solid var(--gold);
  background:#fff;
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.notice h3{margin:0 0 6px;font-family:"Roboto Condensed",sans-serif}
.notice ul{margin:8px 0 0 18px;color:var(--muted)}
.notice li{margin:4px 0}

/* ---------- Form istituzionale ---------- */
form .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){form .grid-2{grid-template-columns:1fr}}
.full{grid-column:1/-1}

label{display:flex;flex-direction:column;gap:6px}
label .label{
  text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;color:var(--muted);font-weight:700;
}
input, select, textarea{
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 12px;
  font:inherit;outline:none;transition:border .15s, box-shadow .15s
}
input::placeholder, textarea::placeholder{color:#98a6ba}
input:focus, select:focus, textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,162,39,.18);
}
textarea{min-height:120px;resize:vertical}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:12px;border:1px solid transparent;cursor:pointer;
  font-weight:600;text-decoration:none;transition:filter .15s, transform .03s
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--gold);color:#1b1b1b}
.btn--primary:hover{background:var(--gold-700)}
.btn--secondary{background:#fff;border-color:var(--border);color:var(--text)}
.btn--secondary:hover{filter:brightness(0.98)}
.btn--danger{background:#b42318;color:#fff}
.btn--small{padding:6px 10px;border-radius:10px;font-size:.92rem}

/* ---------- Tables (Dashboard) ---------- */
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px;background:#fff}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{
  position:sticky;top:0;background:#f0f4fb;color:#30445f;padding:12px;border-bottom:1px solid var(--border);text-align:left;font-weight:700
}
tbody td{padding:12px;border-bottom:1px solid var(--border)}
tbody tr:hover td{background:#fafcff}

/* ---------- Flash messages ---------- */
.flashbox{display:grid;gap:10px;margin:14px 0}
.flash{padding:12px;border-radius:10px;border:1px solid}
.flash.success{background:#edf9f2;border-color:#b7e4c7;color:#0f5132}
.flash.danger{background:#fdeaea;border-color:#f3c1c1;color:#842029}
.flash.warning{background:#fff8e6;border-color:#f8e5b5;color:#664d03}
.flash.info{background:#e8f2ff;border-color:#bfd9ff;color:#084298}

/* ---------- Footer ---------- */
.footer{color:#4e5f75;border-top:4px solid var(--gold);background:#fff}
.footer small{display:block;padding:18px 0}

/* ---------- Small helpers ---------- */
.kicker{font-family:"Roboto Condensed",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:#c7d4e6}

/* ===== THEME: DARK NIGHT (override) ===== */
:root {
  color-scheme: light;
  transition: background-color .2s ease, color .2s ease;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Palette scura LSPD */
  --bg:#0b1423;           /* sfondo pagine scuro */
  --text:#e6edf6;         /* testo principale */
  --muted:#a9b7cc;        /* testo attenuato */

  --navy-900:#0b1f3a;     /* header, hero */
  --navy-800:#112a4c;     /* blocchi scuri */
  --navy-700:#18365e;
  --navy-600:#1e3f6e;

  --gold:#d6b24a;         /* accenti */
  --gold-700:#c49c2f;

  --border:#24324b;       /* bordi scuri */
  --shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Adattamenti componenti in dark */
:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .card { background:#0f1b2f; border-color: var(--border); }
:root[data-theme="dark"] .notice { background:#0f1b2f; border-color: var(--border); }
:root[data-theme="dark"] .table-wrap { background:#0f1b2f; border-color: var(--border); }
:root[data-theme="dark"] thead th { background:#11213a; border-color: var(--border); color:#d7e4ff; }
:root[data-theme="dark"] tbody td { border-color: var(--border); }
:root[data-theme="dark"] tbody tr:hover td { background:#0c182b; }

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background:#0b1730; color:var(--text); border-color:#2a3a58;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color:#8aa0bf; }

:root[data-theme="dark"] .btn--secondary { background:#0f1b2f; color:var(--text); border-color:var(--border); }
:root[data-theme="dark"] .footer { background:#0f1b2f; color:#9fb0c5; border-top-color: var(--gold); }

/* Toggle pill */
.theme-toggle {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; border:1px solid var(--border);
  background:#fff; color:var(--text); cursor:pointer; font-weight:600;
}
:root[data-theme="dark"] .theme-toggle { background:#0f1b2f; }
.theme-toggle .icon { font-size:1rem; line-height:1; }

/* ===== ALERT / AVVISI ===== */
.alert {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid;
  background: #fff;
  color: var(--text);
}
.alert--danger { background:#fdeaea; border-color:#f3c1c1; color:#842029; }
.alert--info    { background:#e8f2ff; border-color:#bfd9ff; color:#084298; }

/* Dark theme overrides per alert */
:root[data-theme="dark"] .alert { background:#0f1b2f; }
:root[data-theme="dark"] .alert--danger { background:#3a1212; border-color:#6b1f1f; color:#ffd1d1; }
:root[data-theme="dark"] .alert--info    { background:#0f2b4a; border-color:#1f4a6b; color:#cde4ff; }

/* ===== CHIP / PILL (Sì / No) ===== */
.pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; border:1px solid var(--border);
  background:#fff; color:var(--text); font-weight:600; font-size:.92rem;
}
.pill--ok  { background:#edf9f2; border-color:#b7e4c7; color:#0f5132; }
.pill--no  { background:#fdeaea; border-color:#f3c1c1; color:#842029; }
:root[data-theme="dark"] .pill { background:#0f1b2f; }

/* ===== LISTE chiave→valore ===== */
.kv { display:grid; grid-template-columns: 220px 1fr; gap:6px 12px; }
.kv dt { font-weight:700; color:#30445f; }
.kv dd { margin:0; }
:root[data-theme="dark"] .kv dt { color:#d7e4ff; }

/* ===== Modal (popup conferma) ===== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.modal-backdrop.is-open{ opacity:1; pointer-events:auto; }

.modal-card{
  width:min(520px, 92vw);
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow: var(--shadow);
  padding:16px;
  transform:translateY(6px) scale(.98);
  transition:transform .15s ease;
}
.modal-backdrop.is-open .modal-card{ transform:translateY(0) scale(1); }

.modal-head h3{ margin:0 0 6px; font-family:'Roboto Condensed',sans-serif; }
.modal-body{ color:var(--text); }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }

.modal-danger .modal-head h3{ color:#842029; }
.modal-danger .modal-card{ border-color:#f3c1c1; background:#fff; }
:root[data-theme="dark"] .modal-card{ background:#0f1b2f; border-color:#24324b; }
:root[data-theme="dark"] .modal-danger .modal-head h3{ color:#ffd1d1; }

/* ===== Tiles (riquadri) ===== */
.tiles {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
}
.tile {
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background:var(--card-bg, #fff);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:10px;
}
.tile--primary { border-color:#2e5aff33; background:var(--card-bg, #fff); }
.tile--muted   { opacity:.9; }
:root[data-theme="dark"] .tile { background:#0f1b2f; border-color:#24324b; }

.tile-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tile-head h3 { margin:0; font-family:'Roboto Condensed',sans-serif; }

.tile-actions { display:flex; flex-wrap:wrap; gap:8px; }

.stat-list { list-style:none; padding:0; margin:4px 0 0; }
.stat-list li { display:flex; justify-content:space-between; padding:6px 0; border-top:1px dashed var(--border); }
.stat-list li:first-child { border-top:none; }
.stat-k { color:var(--muted); }
.stat-v { font-weight:700; }

.text-ok { color:#13714c; }
.text-no { color:#8a1c1c; }

/* ====== QUADRANTI DASHBOARD ====== */
.quads{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
}
.quad{
  position:relative;
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  background:var(--card-bg, #fff);
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  overflow:hidden;
}
.quad:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  border-color: #2e5aff33;
}
.quad--primary{
  border-color:#2e5aff33;
  background:linear-gradient(180deg, rgba(46,90,255,.06), transparent 40%);
}
.quad--muted{ opacity:.95; }

:root[data-theme="dark"] .quad{
  background:#0f1b2f;
  border-color:#24324b;
}
:root[data-theme="dark"] .quad--primary{
  background:linear-gradient(180deg, rgba(46,90,255,.08), rgba(15,27,47,1) 50%);
}

.quad-body{ display:flex; flex-direction:column; gap:10px; }
.quad-kicker{ font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.quad-title{ margin:0; font-family:'Roboto Condensed',sans-serif; font-size:1.6rem; }
.quad-desc{ margin:0; color:var(--muted); }

.quad-stats{
  list-style:none; margin:6px 0 0; padding:0;
  display:grid; grid-template-columns: repeat(2,1fr); gap:8px 12px;
}
.quad-stats li{
  border-top:1px dashed var(--border);
  padding-top:6px;
  display:flex; align-items:center; justify-content:space-between;
}
.text-ok{ color:#13714c; }
.text-no{ color:#8a1c1c; }

.quad-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }

/* link “steso” sull’intero riquadro */
.quad-link{
  position:absolute; inset:0;
  border-radius:18px;
  outline:none;
}
.quad-link:focus{ box-shadow:0 0 0 3px rgba(46,90,255,.35) inset; }

/* Tags/Abilitazioni */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border:1px solid var(--border); border-radius:999px;
  font-size:.9rem; background:var(--card-bg,#fff);
}
:root[data-theme="dark"] .tag{ background:#0f1b2f; border-color:#24324b; }
.tag-x{
  appearance:none; border:none; background:transparent; cursor:pointer;
  font-weight:700; line-height:1; font-size:1rem; color:var(--muted);
}
.tag-x:hover{ color:#b00; }

/* Tabelle allegati: niente wrap */
.table td { vertical-align: middle; }
.table td .btn { margin-right:6px; }

/* ====== Modal ====== */
.modal[hidden]{ display:none; }
.modal{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:rgba(0,0,0,.45);
  z-index:1000;
  padding:16px;
}
.modal__dialog{
  width:min(780px, 100%);
  border-radius:16px;
}
.modal__backdrop{
  position:absolute; inset:0;
}

/* Dialog nativo */
.modal-dialog {
  width: min(780px, 96vw);
  border: none;
  border-radius: 16px;
  padding: 16px 16px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.modal-dialog::backdrop {
  background: rgba(0,0,0,.45);
}
.modal-head { margin: -4px 0 8px; }

/* Dialog un po' più largo */
.modal-dialog {
  width: min(960px, 98vw);
}

/* Area scorrevole solo in verticale (blocca l'orizzontale) */
.modal-scroll {
  max-height: 75vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px; /* evita che lo scroll verticale copra il contenuto */
}

/* Testo lungo che va a capo e non crea scroll orizzontale */
.wrap-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Textarea grande per descrizioni */
.textarea-lg {
  width: 100%;
  min-height: 160px;
  resize: vertical; /* solo verticale */
}

/* Immagini/iframe in anteprima responsivi, niente overflow orizzontale */
.preview-img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.preview-frame {
  width: 100%;
  height: 70vh;
  border: 0;
  display: block;
}

/* Titolo sezione evidente e pulito */
.section-title{
  margin: 22px 0 10px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.25rem;
  line-height: 1.2;
}
.section-title::after{
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--primary, #2f66ff);
  border-radius: 3px;
  margin-top: 6px;
  opacity: .9;
}

/* Spaziatura extra tra blocchi: abilità ↔ richiami */
.section-gap{ margin-top: 18px; }

/* Griglia quadranti dashboard */
.tile-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

/* Card stile "tile" coerente tra sezioni */
.tile .tile-title{
  margin: 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.25rem;
}

/* Metriche compatte e coerenti con Reclutamenti */
.metrics{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.metric{
  background: var(--panel, rgba(255,255,255,.05));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  padding: 10px;
}
.dark .metric{
  border-color: rgba(255,255,255,.08);
}
.metric-key{
  font-size: .82rem;
  color: var(--muted, #7a8091);
}
.metric-val{
  margin-top: 4px;
  font-weight: 700;
  font-size: 1.25rem;
}

/* Uniforma badge "is-open"/"is-closed" se già presenti altrove */
.hero-badge.is-open{
  background: #1e9e5127;
}
.hero-badge.is-closed{
  background: #c03a2b2f;
}

/* Pulsante flottante "LOG" in basso a destra (solo dashboard) */
.fab-log{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #2f66ff;
  color: #fff;
  font-weight: 800;
  letter-spacing: .5px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.fab-log:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.3); }
.dark .fab-log{ background: #4c7dff; }

/* Landing */
.landing-hero{
  padding: 28px 0;
  background: linear-gradient(180deg, rgba(50,74,154,.15), transparent);
}
.dark .landing-hero{
  background: linear-gradient(180deg, rgba(50,74,154,.25), transparent);
}
.landing-hero-card{
  margin: 0;
  background: #324a9a;
  color: #fff;
}
.landing-tiles{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 16px;
  margin: 16px 0;
}
.tile .tile-title{
  margin: 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.25rem;
}
.tile .tile-desc{ margin: 6px 0 12px; color: var(--muted,#7a8091); }
.tile .tile-kicker{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; opacity:.7 }
.tile{
  position: relative;
}
.tile-link{
  position:absolute; inset:0; border-radius: inherit;
}
.landing-gallery{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap:10px;
}
.landing-gallery figure{
  margin:0; padding:0; border-radius:10px; overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
}
.dark .landing-gallery figure{ border-color: rgba(255,255,255,.08); }
.landing-gallery img{
  width:100%; height:160px; object-fit:cover; display:block;
}

/* ---- Landing minimal ---- */
.landing-simple{
  padding: 48px 0 64px;
  background: linear-gradient(180deg, rgba(12,24,48,.06), rgba(12,24,48,0));
}
.dark .landing-simple{
  background: linear-gradient(180deg, rgba(12,24,48,.24), rgba(12,24,48,0));
}
.landing-hero{ max-width: 860px; margin: 0 auto; text-align: center; }
.landing-crest{ width: 92px; height: 92px; object-fit: contain; margin: 0 auto 8px; display: block; }
.landing-title{ margin: 6px 0 6px; font-family: 'Roboto Condensed', sans-serif; font-size: 2.1rem; }
.landing-lead{ margin: 0 auto 16px; max-width: 700px; color: var(--muted, #6f7686); }
.dark .landing-lead{ color: rgba(255,255,255,.85); }

.landing-actions{ display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 8px; }
.btn--xl{ padding: 14px 22px; font-size: 1.05rem; border-radius: 12px; }
.is-disabled{ pointer-events: none; opacity: .6; }

.landing-status{ display: flex; justify-content: center; gap: 10px; align-items: center; margin-top: 6px; }
.landing-note{ margin: 8px 0 0; color: #c94f40; }
.dark .landing-note{ color: #ffb3a8; }


/* ---- Landing v2 minimal & bella ---- */
.landing-hero2{
  position: relative;
  padding: 64px 0 72px;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(12,24,48,.06), rgba(12,24,48,0));
}
.dark .landing-hero2{
  background: radial-gradient(1200px 600px at 50% -10%, rgba(12,24,48,.24), rgba(12,24,48,0));
}
.landing-hero2::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--bg);
  background-size: cover; background-position: center;
  filter: brightness(.65) saturate(1.1);
  opacity:.35;
}
.dark .landing-hero2::before{ opacity:.22; filter: brightness(.85) saturate(1.1); }
.landing-hero2__inner{ position:relative; text-align:center; max-width:900px; margin:0 auto; }
.landing-crest{ width:96px; height:96px; object-fit:contain; display:block; margin: 0 auto 8px; }
.landing-title{ font-family:'Roboto Condensed',sans-serif; font-size:2.4rem; margin:6px 0 4px; }
.landing-sub{ color: var(--muted,#6f7686); margin:0 auto 12px; max-width:720px; }
.dark .landing-sub{ color: rgba(255,255,255,.85); }
.landing-actions{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:14px; }
.btn--xl{ padding:14px 22px; font-size:1.05rem; border-radius:12px; }

/* Galleria foto responsive */
.photo-grid{
  display:grid; gap:12px; margin:16px 0 8px;
  grid-template-columns: repeat(6, 1fr);
}
.photo-grid figure{ margin:0; border-radius:14px; overflow:hidden; box-shadow: 0 8px 24px rgba(0,0,0,.10); }
.photo-grid img{ width:100%; height:160px; object-fit:cover; display:block; }
.photo-grid .wide{ grid-column: span 6; }
@media (max-width: 900px){
  .photo-grid{ grid-template-columns: repeat(2, 1fr); }
  .photo-grid .wide{ grid-column: span 2; }
}

/* Box informativo */
.landing-info{ margin-top:10px; }
.landing-cols{ display:grid; grid-template-columns: 1.6fr 1fr; gap:16px; align-items:start; }
@media (max-width: 900px){
  .landing-cols{ grid-template-columns: 1fr; }
}
.landing-bullets{ margin:0; padding-left:18px; line-height:1.6; }
.lp-section-title{ margin:0 0 6px; font-family:'Roboto Condensed',sans-serif; font-size:1.2rem; }

/* ---- HERO SLIDER ---- */
.lp-heroX { position: relative; }
.lp-slider { position: relative; overflow: hidden; }
.lp-slide{
  position: relative; min-height: 420px;
  display: flex; align-items: center;
  background-image: var(--bg); background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.02); transition: opacity .6s ease, transform .6s ease;
}
.lp-slide::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,16,32,.55), rgba(8,16,32,.25));
}
.dark .lp-slide::before{ background: linear-gradient(180deg, rgba(8,16,32,.7), rgba(8,16,32,.35)); }
.lp-slide.is-active{ opacity: 1; transform: scale(1); }
.lp-slide__inner{ position:relative; color:#fff; padding: 38px 0; }
.lp-heroTitle{ font-family:'Roboto Condensed',sans-serif; font-size: 2.6rem; margin: 0 0 6px; color:#fff; }
.lp-heroLead{ margin:0 0 12px; color: rgba(255,255,255,.92); }
.lp-heroCTA{ display:flex; gap:12px; flex-wrap:wrap; }

/* Slider controls */
.lp-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:40px; height:40px; border-radius:999px; border:none; cursor:pointer;
  background: rgba(255,255,255,.85);
  box-shadow: 0 6px 22px rgba(0,0,0,.2);
}
.lp-prev{ left:14px; } .lp-next{ right:14px; }
.dark .lp-nav{ background: rgba(0,0,0,.5); color:#fff; }
.lp-dots{ position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:8px; }
.lp-dot{ width:9px; height:9px; border-radius:999px; border:none; background:rgba(255,255,255,.6); cursor:pointer; }
.lp-dot.is-active{ background:#fff; }

/* ---- About ---- */
.lp-kicker{ letter-spacing:.08em; text-transform:uppercase; opacity:.7; font-size:.85rem; }
.lp-h2{ margin:0 0 8px; font-family:'Roboto Condensed',sans-serif; font-size:1.5rem; }
.lp-about{ margin-top:16px; }
.lp-about__grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; align-items:center; }
.lp-about__media img{ width:100%; height:280px; object-fit:cover; border-radius:14px; display:block; }
@media (max-width: 960px){ .lp-about__grid{ grid-template-columns: 1fr; } }
.lp-bullets{ margin:8px 0 0; padding-left:18px; line-height:1.6; }

/* ---- Divisions ---- */
.lp-divisions{ margin:16px auto 8px; }
.lp-divisions__grid{
  display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
}
.lp-div{
  background: var(--card-bg, #fff); border-radius:16px; padding:12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.06);
}
.dark .lp-div{ border-color: rgba(255,255,255,.08); }
.lp-div img{ width:100%; height:120px; object-fit:cover; border-radius:12px; display:block; }
.lp-div h3{ margin:8px 0 4px; font-size:1.05rem; }

/* ---- Stats band ---- */
.band{ background: linear-gradient(90deg, rgba(15,32,64,.06), rgba(15,32,64,.0)); }
.dark .band{ background: linear-gradient(90deg, rgba(15,32,64,.24), rgba(15,32,64,.0)); }
.lp-stats__inner{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; padding:16px 0; }
.lp-stats__inner > div{
  text-align:center; padding:12px; border-radius:12px; background: rgba(255,255,255,.7);
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
}
.dark .lp-stats__inner > div{ background: rgba(0,0,0,.25); }
.lp-stats__inner strong{ display:block; font-size:1.3rem; }
.lp-stats__inner span{ opacity:.85; }
@media (max-width: 920px){ .lp-stats__inner{ grid-template-columns: repeat(2,1fr); } }

/* ---- CTA banner ---- */
.lp-ctaBanner{
  margin:18px 0; position:relative; overflow:hidden;
  background-image: var(--bg); background-size: cover; background-position:center;
}
.lp-ctaBanner::before{
  content:""; position:absolute; inset:0; background: rgba(8,16,32,.45);
}
.lp-ctaBanner__content{ position:relative; color:#fff; text-align:center; padding:26px 12px; }
.lp-ctaBanner .lp-h2{ color:#fff; }

/* ===== Landing istituzionale ordinata ===== */
.lp-hero{ padding: 28px 0 12px; background: linear-gradient(180deg, rgba(12,24,48,.07), rgba(12,24,48,0)); }
.dark .lp-hero{ background: linear-gradient(180deg, rgba(12,24,48,.25), rgba(12,24,48,0)); }

.lp-hero__head{ text-align:center; max-width: 900px; margin: 0 auto 12px; }
.lp-hero__crest{ width:550px; height:550px; object-fit:contain; display:block; margin:0 auto 6px; }
.lp-hero__title{ margin:4px 0 4px; font-family:'Roboto Condensed',sans-serif; font-size:2.4rem; }
.lp-hero__lead{ margin:0 auto 10px; max-width:780px; color: var(--muted,#6f7686); }
.dark .lp-hero__lead{ color: rgba(255,255,255,.85); }
.lp-hero__actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:10px; }
.btn--xl{ padding:14px 22px; font-size:1.05rem; border-radius:12px; }

/* Slider */
.lp-slider{ position:relative; margin-top:12px; }
.lp-slides{ list-style:none; margin:0; padding:0; position:relative; height: 360px; border-radius:16px; overflow:hidden; }
.lp-slide{
  position:absolute; inset:0; background-image:var(--bg); background-size:cover; background-position:center;
  opacity:0; transform: scale(1.02); transition: opacity .6s ease, transform .6s ease;
}
.lp-slide::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(8,16,32,.55), rgba(8,16,32,.25)); }
.dark .lp-slide::before{ background: linear-gradient(180deg, rgba(8,16,32,.72), rgba(8,16,32,.35)); }
.lp-slide.is-active{ opacity:1; transform: scale(1); }
.lp-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border:none; border-radius:999px; cursor:pointer;
  background: rgba(255,255,255,.9); box-shadow: 0 8px 26px rgba(0,0,0,.18);
}
.dark .lp-nav{ background: rgba(0,0,0,.45); color:#fff; }
.lp-prev{ left:14px; } .lp-next{ right:14px; }
.lp-dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:8px; }
.lp-dot{ width:9px; height:9px; border-radius:999px; border:none; background:rgba(255,255,255,.6); }
.lp-dot.is-active{ background:#fff; }

/* About */
.lp-kicker{ letter-spacing:.08em; text-transform:uppercase; opacity:.75; font-size:.86rem; }
.lp-h2{ margin:0 0 8px; font-family:'Roboto Condensed',sans-serif; font-size:1.4rem; }
.lp-about{ margin-top:16px; }
.lp-about__grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; align-items:center; }
.lp-about__media img{ width:100%; height:280px; object-fit:cover; border-radius:14px; display:block; }
@media (max-width: 960px){ .lp-about__grid{ grid-template-columns: 1fr; } }
.lp-bullets{ margin:8px 0 0; padding-left:18px; line-height:1.6; }

/* Divisions */
.lp-divisions{ margin:16px 0 8px; }
.lp-divisions__grid{ display:grid; gap:14px; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
.lp-div{ background: var(--card-bg,#fff); border-radius:16px; padding:12px; box-shadow:0 8px 24px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.06); }
.dark .lp-div{ border-color: rgba(255,255,255,.08); }
.lp-div img{ width:100%; height:130px; object-fit:cover; border-radius:12px; display:block; }
.lp-div h3{ margin:8px 0 4px; font-size:1.06rem; }

/* Steps */
.lp-steps{ margin-top:14px; }
.lp-steps__list{ margin:0 0 10px; padding-left:22px; line-height:1.6; }
.lp-steps__cta{ display:flex; gap:10px; flex-wrap:wrap; }

/* CTA finale */
.lp-cta{
  margin:18px 0; position:relative; overflow:hidden;
  background-image: var(--bg); background-size: cover; background-position:center;
}
.lp-cta::before{ content:""; position:absolute; inset:0; background: rgba(8,16,32,.45); }
.lp-cta__content{ position:relative; color:#fff; text-align:center; padding:26px 12px; }
.lp-cta .lp-h2{ color:#fff; }

/* Accessibilità */
.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; clip-path:inset(50%); border:0; padding:0; margin:-1px;
}

/* ----- Sezione più stretta e centrata sotto lo slider ----- */
.lp-section--narrow{ max-width: 1100px; margin-left:auto; margin-right:auto; }

/* Hero (come prima) */
.lp-hero{ padding: 28px 0 12px; background: linear-gradient(180deg, rgba(12,24,48,.07), rgba(12,24,48,0)); }
.dark .lp-hero{ background: linear-gradient(180deg, rgba(12,24,48,.25), rgba(12,24,48,0)); }
.lp-hero__head{ text-align:center; max-width: 900px; margin: 0 auto 12px; }
.lp-hero__crest{ width:150px; height:150px; object-fit:contain; display:block; margin:0 auto 6px; }
.lp-hero__title{ margin:4px 0 4px; font-family:'Roboto Condensed',sans-serif; font-size:2.4rem; }
.lp-hero__lead{ margin:0 auto 10px; max-width:780px; color: var(--muted,#6f7686); }
.dark .lp-hero__lead{ color: rgba(255,255,255,.85); }
.lp-hero__actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:10px; }
.btn--xl{ padding:14px 22px; font-size:1.05rem; border-radius:12px; }

/* Slider */
.lp-slider{ position:relative; margin-top:12px; }
.lp-slides{ list-style:none; margin:0; padding:0; position:relative; height: 380px; border-radius:16px; overflow:hidden; }
@media (max-width: 960px){ .lp-slides{ height: 280px; } }
.lp-slide{
  position:absolute; inset:0; background-image:var(--bg); background-size:cover; background-position:center;
  opacity:0; transform: scale(1.02); transition: opacity .6s ease, transform .6s ease;
}
.lp-slide::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(8,16,32,.55), rgba(8,16,32,.25)); }
.dark .lp-slide::before{ background: linear-gradient(180deg, rgba(8,16,32,.72), rgba(8,16,32,.35)); }
.lp-slide.is-active{ opacity:1; transform: scale(1); }
.lp-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border:none; border-radius:999px; cursor:pointer;
  background: rgba(255,255,255,.9); box-shadow: 0 8px 26px rgba(0,0,0,.18);
}
.dark .lp-nav{ background: rgba(0,0,0,.45); color:#fff; }
.lp-prev{ left:14px; } .lp-next{ right:14px; }
.lp-dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:8px; }
.lp-dot{ width:9px; height:9px; border-radius:999px; border:none; background:rgba(255,255,255,.6); }
.lp-dot.is-active{ background:#fff; }

/* ---- Chi siamo (centrata) ---- */
.lp-kicker{ letter-spacing:.08em; text-transform:uppercase; opacity:.75; font-size:.86rem; }
.lp-h2{ margin:0 0 8px; font-family:'Roboto Condensed',sans-serif; font-size:1.5rem; }
.center{ text-align:center; }
.lp-about{ margin-top:16px; }
.lp-about__head{ text-align:center; max-width: 800px; margin: 0 auto 10px; }
.lp-about__intro{ color: var(--muted,#6f7686); }
.dark .lp-about__intro{ color: rgba(255,255,255,.85); }
.lp-about__grid{
  display:grid; gap:16px; align-items:center;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 960px){
  .lp-about__grid{ grid-template-columns: 1fr; }
}
.lp-bullets{ margin:0; padding-left:18px; line-height:1.65; }
.lp-about__media img{
  width:74%; height: 320px; object-fit:cover; border-radius:14px; display:block;
}

/* Divisioni: assicurare contrasto in entrambe le modalità */
.lp-div{
  background:#ffffff;              /* chiaro in light */
  color:#1f2937;                   /* testo scuro leggibile */
}
.lp-div h3{ color:#1f2937; }
.lp-div p{ color:#475569; }

.dark .lp-div{
  background:#162033;              /* carta scura in dark */
  border-color:rgba(255,255,255,.08);
  color:#e5e7eb;                   /* testo chiaro leggibile */
}
.dark .lp-div h3{ color:#ffffff; }
.dark .lp-div p{ color:rgba(255,255,255,.85); }



/* ---- Divisioni (riquadri più grandi) ---- */
.lp-divisions{ margin:18px auto 8px; }
.lp-divisions__intro{ margin:0 0 10px; color: var(--muted,#6f7686); }
.dark .lp-divisions__intro{ color: rgba(255,255,255,.85); }
.lp-divisions__grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.lp-div{
  background: var(--card-bg,#fff); border-radius:18px; padding:14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.06);
  text-align:left;
}
.dark .lp-div{ border-color: rgba(255,255,255,.08); }
.lp-div img{
  width:100%; height: 200px; object-fit:cover; border-radius:14px; display:block;
}
.lp-div h3{ margin:10px 0 6px; font-size:1.12rem; }

/* ---- CTA finale ---- */
.lp-cta{
  margin:20px 0; position:relative; overflow:hidden;
  background-image: var(--bg); background-size: cover; background-position:center;
}
.lp-cta::before{ content:""; position:absolute; inset:0; background: rgba(8,16,32,.45); }
.lp-cta__content{ position:relative; color:#fff; text-align:center; padding:28px 14px; }
.lp-cta .lp-h2{ color:#fff; }
.lp-section--narrow { max-width: 1100px; margin-inline: auto; }

/* Accessibilità */
.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; clip-path:inset(50%); border:0; padding:0; margin:-1px;
}

dialog.dlg {
  border: 0;
  padding: 0;
  border-radius: 16px;
  overflow: visible;
}
dialog.dlg::backdrop {
  background: rgba(0,0,0,.55);
}


/* --- Modali --- */
.dialog--narrow {
  width: min(560px, 92vw);
}

.modal-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.modal-head {
  border-bottom: 1px solid #ddd;
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.modal-scroll {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 4px;
}

/* --- Box avviso per operazioni pericolose --- */
.danger-box {
  border: 1px solid #f1b3b3;
  background: #fff4f4;
  color: #7a1f1f;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
}

/* Evita che elementi interni blocchino i click */
.modal-dialog .modal-head,
.modal-dialog .modal-scroll {
  pointer-events: auto;
}



/* ================
   LIGHTBOX DIVISIONI (FIX SAFARI/SPACE)
   ================ */

/* Backdrop scuro */
.lightbox::backdrop {
  background: rgba(0, 0, 0, .75);
}

/* Il dialog non deve occupare spazio quando chiuso */
.lightbox {
  position: fixed;      /* fuori dal flusso: niente spazio extra */
  inset: 0;             /* copre tutta la viewport */
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  z-index: 9999;
  display: none;        /* IMPORTANT: da chiuso è nascosto */
}

/* Mostra SOLO quando è open */
.lightbox[open] {
  display: grid;
  place-items: center;
}

/* Nascondi la X quando non è open */
.lightbox:not([open]) .lightbox-close { display: none !important; }

/* Immagine ingrandita */
.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  background: #000;
}

/* Didascalia sotto immagine */
.lightbox .caption {
  margin-top: .5rem;
  color: var(--muted-foreground, #ddd);
  text-align: center;
  font-size: .95rem;
  text-wrap: balance;
}

/* Pulsante chiusura (visibile solo quando [open]) */
.lightbox[open] .lightbox-close { display: flex; }
.lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  font-size: 28px;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.lightbox-close:hover { background: rgba(0, 0, 0, .8); }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .lightbox .caption { color: #ccc; }
}

/* =========================
   OVERLAY "LENTE" SULLE MINIATURE
   ========================= */
.zoom-wrap {
  position: relative;
  display: block; /* mantiene il layout dell'immagine */
}
.zoom-wrap .zoom-lens {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.9);
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none; /* i click passano all'immagine */
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.zoom-wrap:hover .zoom-lens,
.zoom-wrap:focus-within .zoom-lens {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.zoom-wrap .zoom-lens::before {
  content: "";
  width: 26px;
  height: 26px;
  display: block;
  background: center / contain no-repeat
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>\
<path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16a6.471 6.471 0 0 0 4.23-1.57l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/>\
</svg>");
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* Miniature cliccabili */
.division-img { cursor: zoom-in; transition: transform .15s ease; }
.division-img:hover { transform: scale(1.02); }

/* (opzionale) Se nel JS aggiungi la classe .modal-open a <html> quando il dialog è aperto,
   questo blocca lo scroll della pagina sotto al lightbox */
html.modal-open, body.modal-open { overflow: hidden; height: 100%; }