:root{
  --bg:#f7f7f8; --card:#ffffff; --ink:#0f172a; --muted:#64748b;
  --brand:#ff7a00; --brand-ink:#ffffff; --line:#e2e8f0; --accent:#2563eb;
  --success:#16a34a; --danger:#dc2626; --warn:#f59e0b;
  --radius:16px; --shadow:0 10px 30px rgba(15,23,42,.08);
}

html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; font-size:16px; }
.container{max-width:1100px;margin:24px auto;padding:0 16px;}
h1{font-size:28px;line-height:1.15;margin:0 0 14px;}
h2{font-size:22px;line-height:1.2;margin:24px 0 10px;}
p,li,td,th,label,input,select,textarea,button{font-size:16px;}
.lead{color:var(--muted);}

.header{
  background:#0b132b; color:#fff;
  padding:18px 0; box-shadow:var(--shadow);
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-title{font-size:22px;font-weight:800;letter-spacing:.2px}
.brand-badge{font-size:12px;color:#cbd5e1;background:#1f2937;padding:4px 8px;border-radius:999px}

.topbar{display:flex;align-items:center;justify-content:space-between;}
.nav a{color:#e2e8f0;text-decoration:none;margin-left:14px}
.nav a:hover{color:#fff;text-decoration:underline}

.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px; border:1px solid var(--line);
}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.kpi{display:flex;flex-direction:column;gap:6px}
.kpi .label{color:var(--muted);font-size:13px}
.kpi .value{font-weight:800;font-size:22px}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;border:1px solid var(--line);
  background:#fff;color:var(--ink);padding:10px 14px;text-decoration:none;cursor:pointer;transition:.2s; }
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn-primary:hover{filter:brightness(.95)}
.btn-ghost{background:transparent}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}

.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.table thead th{background:#f1f5f9;font-weight:700}
.table tr:hover td{background:#f9fafb}

.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:block;margin:6px 0 6px;color:var(--muted)}
.form input[type="text"], .form input[type="date"], .form input[type="email"],
.form select, .form textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;
}
.form textarea{min-height:110px}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 16px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#eef2ff;color:#3730a3;font-size:13px}

.page-head{display:flex;align-items:center;gap:10px;margin:6px 0 16px}
.module-chip{border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}
.chip-libri{background:#eef2ff;color:#3730a3}
.chip-protocollo{background:#e0f2fe;color:#075985}
.chip-scadenziario{background:#ecfdf5;color:#065f46}

/* ---------- Layout fluido e tipografia responsive ---------- */
:root{
  --container: 1200px;      /* larghezza massima “comoda” */
  --container-xl: 1400px;   /* per pagine che devono respirare di più (es. tabelle) */
  --gutter: clamp(12px, 2vw, 24px);
}

/* contenitore principale */
.container{
  max-width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* varianti più larghe (aggiungile come classi extra quando serve) */
.container-xl{ max-width: min(100%, var(--container-xl)); }
.container-full{ max-width: 100%; }

/* titoli e testo scalano in base allo schermo */
h1{ font-size: clamp(24px, 2.2vw + 10px, 36px); line-height: 1.15; }
h2{ font-size: clamp(20px, 1.5vw + 8px, 28px); }
body, p, li, td, th, label, input, select, textarea, button{
  font-size: clamp(15px, 0.35vw + 14px, 18px);
}

/* opzionale */
.chip-enti{ background:#fff7ed; color:#9a3412; }


/* griglie che si adattano automaticamente */
.card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

/* toolbar che va a capo elegantemente */
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 16px; }

/* ---------- Media queries leggere ---------- */
@media (max-width: 768px){
  .header .topbar{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .nav a{ margin-left: 0; margin-right: 14px; display:inline-block; }
}

/* ---------- Immagini, video, iframe: mai deformati ---------- */
img, svg, video, canvas{ max-width: 100%; height: auto; display: block; }
iframe{ width: 100%; border: 0; }
.ratio-16x9{ aspect-ratio: 16/9; }    /* usa <div class="ratio-16x9"> per contenitori video */

/* ---------- Tabelle larghe su mobile ---------- */
.table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table{ min-width: 640px; } /* evita schiacciamenti eccessivi su schermi piccoli */

/* ---------- Sezioni full-bleed (opzionali) ---------- */
.full-bleed{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ====== ELIOS DOC – UI tidy & chips ====== */
:root{
  --brand:#0f172a;      /* blu notte header */
  --accent:#f59e0b;     /* arancio ELIOS */
  --primary:#2563eb;    /* blu azzurro per azioni primarie */
  --muted:#e5e7eb;      /* grigio chiaro bordi */
  --text:#0b1220;       /* corpo */
}

/* Spaziatura uniforme tra i campi form */
.form-stack > .form-row,
.form-stack .form-group,
.form-stack .field-wrapper{
  margin-bottom: 1.1rem; /* + spazio tra i righi */
}
.form-stack label{
  display:block;
  margin-bottom:.35rem;
  font-weight:600;
  color:var(--text);
}

/* Sezioni del form */
.form-section{
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--muted);
  border-radius: .75rem;
  box-shadow: 0 2px 6px rgba(15,23,42,.03);
}

/* Titoli secondari */
.section-title{
  font-size: .95rem;
  font-weight: 700;
  margin: .25rem 0 .5rem;
  color: var(--brand);
}

/* Gruppi bottoni “modelli rapidi” */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .6rem;
  margin:.5rem 0 1rem;
}
.chip{
  appearance:none;
  border:1px solid transparent;
  border-radius: 999px;
  padding:.45rem .9rem;
  font-size:.9rem;
  line-height:1;
  cursor:pointer;
  transition: transform .05s ease, box-shadow .15s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.chip:hover{ transform: translateY(-1px); }
.chip:active{ transform: translateY(0); }

/* Gerarchia visiva */
.chip--primary{
  background: var(--primary);
  color:#fff;
  box-shadow: 0 2px 8px rgba(37,99,235,.25);
}
.chip--secondary{
  background: #fff;
  color: var(--primary);
  border-color: rgba(37,99,235,.25);
}
.chip--accent{
  background: var(--accent);
  color:#241a00;
  box-shadow: 0 2px 8px rgba(245,158,11,.25);
}
.chip--muted{
  background:#fff;
  color:#111827;
  border-color:#e5e7eb;
}

/* Piccole caption sotto i gruppi */
.chips-caption{
  margin-top:-.4rem;
  font-size:.8rem;
  color:#6b7280;
}

.chip{appearance:none;border-radius:999px;padding:.45rem .9rem;border:1px solid transparent;cursor:pointer}
.chip--primary{background-color:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}
.chip--accent{background-color:var(--accent)!important;color:#241a00!important;border-color:var(--accent)!important}
.chip--secondary{background:#fff!important;color:var(--primary)!important;border-color:rgba(37,99,235,.4)!important}
.chip--muted{background:#fff!important;color:#111827!important;border-color:#d1d5db!important}

/* ====== ACCESSIBILITÀ & LEGGIBILITÀ FORM ====== */
/* Etichette: più contrasto e visibilità costante */
.form label,
.form-stack label,
.form .form-label,
label {
  color: var(--ink) !important;   /* era var(--muted) */
  font-weight: 700 !important;
}

/* Testo negli input/textarea/select */
.form input[type="text"],
.form input[type="date"],
.form input[type="email"],
.form input[type="number"],
.form input[type="search"],
.form select,
.form textarea,
input, select, textarea {
  color: var(--ink) !important;
  background-color: #fff;
  border-color: var(--line);
}

/* Placeholder: più scuri e a opacità piena */
.form input::placeholder,
.form textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: #475569 !important;      /* grigio medio scuro */
  opacity: 1 !important;          /* niente trasparenza */
  font-weight: 500;
}

/* Stato focus: bordo e ombra leggermente evidenti */
.form input:focus,
.form select:focus,
.form textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* Autocomplete WebKit (Safari/Chrome) */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink) !important;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  box-shadow: 0 0 0px 1000px #fff inset !important;
}

/* Disabilitati: leggibili ma “spenti” */
input[disabled], select[disabled], textarea[disabled] {
  color: #6b7280 !important;
  background-color: #f3f4f6 !important;
}

/* Assicura che le etichette siano ben visibili */
form.form label,
.form label,
.form-stack label,
.form .form-label,
label {
  color: #0f172a !important; /* testo molto scuro e contrastato */
  font-weight: 700 !important;
}

/* === Protocollo (scoped) — etichette form ben leggibili === */
.protocollo-page .form label,
.protocollo-page form.form label,
.protocollo-page .form p > label {
  color: #0f172a !important; /* scuro, alto contrasto */
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* (opzionale) se qualche wrapper applica opacity, annullala solo qui */
.protocollo-page .card,
.protocollo-page .form,
.protocollo-page .form * {
  opacity: 1 !important;
  filter: none !important;
}

.btn-brand{
  background:#0b132b;  /* brand base */
  color:#fff;
  border:1px solid #0b132b;
  border-radius:12px;
  padding:.5rem .9rem;
  font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.btn-brand:hover{ filter:brightness(1.05); }
.btn-brand .chev{ display:inline-block; width:1.1em; transition:transform .15s ease; }

/* --- Collapsible norme (ELIOS DOC) --- */
.efs-collapse-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin: 16px 0 24px 0;
}

.efs-collapse-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  user-select: none;
}
.efs-collapse-summary::-webkit-details-marker { display: none; }

.efs-pill {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #0b132b;
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
}
.efs-summary-hint {
  color: #6b7280;
  font-size: .9rem;
}

.efs-chevron {
  margin-left: auto;
  transition: transform .18s ease;
  font-size: 1rem;
  color: #6b7280;
}
details[open] .efs-chevron { transform: rotate(90deg); }

.efs-collapse-body { padding: 10px 14px 14px 14px; }

.efs-norm-wrapper {
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fafafa;
}

.efs-norm-title {
  margin: 0 0 6px 0;
  font-weight: 700;
  color: #111827;
}

.efs-norm-list { margin: 0; padding-left: 22px; }
.efs-norm-item { margin: 10px 0 12px 0; }

.efs-norm-item-title { margin: 0 0 4px 0; }
.efs-norm-meta, .efs-norm-note { margin: 0 0 4px 0; color: #374151; }

.efs-estratto {
  margin: 6px 0;
  padding: 8px 10px;
  border-left: 4px solid #e5e7eb;
  background: #fff;
  border-radius: 6px;
  color: #111827;
}

.efs-conseguenze { margin-top: 6px; }
.efs-conseguenze-title { font-weight: 600; margin-bottom: 4px; }
.efs-conseguenze ul { margin: 0; padding-left: 18px; }

.efs-disclaimer {
  margin: 8px 0 0 0;
  font-size: .9rem;
  color: #6b7280;
}

.nav .btn.nav-ente { margin-left: 8px; white-space: nowrap; }

.sticky-aside { position: sticky; top: 16px; }
.tile-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:8px; }
.tile { background:#0f1a3a; color:#fff; border:1px solid #1f2a4a; border-radius:10px; padding:10px; text-align:left; }
.tile:hover { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.25) inset; }
.dropzone { border:2px dashed #d1d5db; border-radius:10px; padding:18px; text-align:center; background:#fff; }
.dropzone.drag { background:#f0f6ff; border-color:#2563eb; }
.list-compact > .row + .row { border-top:1px solid #eef2f7; }
@media (max-width: 991px){ .tile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* CTA home (sotto le card) */
.home-cta {
  margin-top: 12px;
  text-align: center;
}
.home-cta .btn-cta {
  display: inline-block;
  background: #ffb703;
  color: #0b132b;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.05);
}
.home-cta .btn-cta:hover {
  filter: brightness(0.95);
  text-decoration: none;
}
.home-cta .hint {
  margin-top: 6px;
  font-size: .92rem;
  color: #4b5563;
}

/* Variante accento giallo, uguale a "Cambia ente" */
.btn-accent {
  display: inline-block;
  background: #ffb703;
  color: #0b132b;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.05);
}
.btn-accent:hover { filter: brightness(.95); text-decoration: none; }

/* Bottoni vetrina sotto il riquadro ente */
.ente-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:4px;
}

.btn-vetrina{
  background:#ffb703;           /* giallo “ELIOS DOC” */
  color:#0b132b;
  font-weight:600;
  padding:6px 12px;
  border-radius:999px;           /* pill */
  text-decoration:none;
  box-shadow:0 1px 0 rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
  transition:transform .05s ease, filter .15s ease;
}
.btn-vetrina:hover{
  filter:brightness(0.95);
  transform:translateY(-1px);
}
.btn-vetrina:active{
  transform:translateY(0);
}
.subnav{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 18px}
.subnav a{background:rgba(11,19,43,.06);border:1px solid #e5e7eb;border-radius:999px;
  padding:6px 12px;text-decoration:none;color:#0b132b;font-weight:600}
.subnav a:hover{filter:brightness(.96)}
.subnav a.active{background:#0b132b;border-color:#0b132b;color:#fff}

/* --- Subnav laterale Amministrazione ----------------------------------- */
.subnav-layout { display:flex; gap:24px; align-items:flex-start; }
.subnav-side { position: sticky; top: 92px; width: 280px; display:flex; flex-direction:column; gap:10px; }
.subnav-sep { border:0; height:1px; background: #e5e7eb; margin:6px 0 4px; }

.subnav-btn {
  display:flex; flex-direction:column; gap:4px;
  background:#fff; color:#0b132b; text-decoration:none;
  border:1px solid #e5e7eb; border-radius:14px;
  padding:12px 14px; box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .05s ease, box-shadow .15s ease, border-color .15s ease;
}
.subnav-btn:hover { transform:translateY(-1px); box-shadow:0 3px 12px rgba(0,0,0,.06); }
.subnav-btn .label { font-weight:600; }
.subnav-btn .kpi { font-size:.86rem; opacity:.8; }
.subnav-btn.is-active { border-color:#ffb703; box-shadow:0 0 0 3px rgba(255,183,3,.18); }

/* Mobile: la subnav diventa orizzontale */
@media (max-width: 1024px) {
  .subnav-layout { flex-direction:column; }
  .subnav-side { position: static; width:auto; }
  .subnav-btn { flex-direction:row; align-items:center; justify-content:space-between; }
}

/* Sidebar destra sticky (cruscotto) */
.aside-sticky { position: sticky; top: 92px; }
.tiny { font-size: .78rem; }

/* “bottoni” subnav (se li vuoi usare a sinistra o sopra) */
.subnav-btn {
  display:flex; flex-direction:column; gap:4px;
  background:#fff; color:#0b132b; text-decoration:none;
  border:1px solid #e5e7eb; border-radius:14px;
  padding:12px 14px; box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .05s ease, box-shadow .15s ease, border-color .15s ease;
}
.subnav-btn:hover { transform:translateY(-1px); box-shadow:0 3px 12px rgba(0,0,0,.06); }
.subnav-btn .label { font-weight:600; }
.subnav-btn .kpi { font-size:.86rem; opacity:.8; }
.subnav-btn.is-active { border-color:#ffb703; box-shadow:0 0 0 3px rgba(255,183,3,.18); }

/* Dropzone (documenti.html) */
.dropzone { border:2px dashed #e5e7eb; border-radius:12px; padding:18px; text-align:center; background:#fafafa; }
.dropzone.drag { border-color:#2563eb; background:#f0f6ff; }
.tile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.tile { border:1px solid #e5e7eb; background:#fff; border-radius:12px; padding:10px 12px; }
.tile:hover { cursor:pointer; box-shadow:0 3px 12px rgba(0,0,0,.06); }