/* RETROBOTTEGA — palette del Brand Manual LSB: petrolio #014059, giallo #f2b707,
   sabbia #ba9a67, menta #8cccbe, ink #0c2d3a, fondo #f6f9f9.
   Pensata per il telefono prima che per lo schermo grande: le colleghe la
   aprono dal banco. Interlinea 1.2 sui documenti, come su ogni carta LSB. */
:root{
  --petrolio:#014059; --petrolio-scuro:#012f42; --petrolio-chiaro:#0d5975;
  --giallo:#f2b707; --sabbia:#ba9a67; --menta:#8cccbe; --ink:#0c2d3a;
  --bg:#f6f9f9; --carta:#ffffff; --bordo:#d8e3e6; --bordo-forte:#a9c2ca;
  --grigio:#6d838c; --rosso:#b4342a; --rosso-chiaro:#fdecea;
  --ambra:#fff6e0; --verde:#2e7d5b; --verde-chiaro:#e8f5ee; --arancio:#e07b1f;
  --menta-chiara:#e6f4f1; --sabbia-chiara:#f4ede0;
  --r:8px; --ombra:0 1px 2px rgba(1,64,89,.08);
  --nav-h:60px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:15px; line-height:1.45; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; min-height:100dvh;
}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.2}
h1{font-family:'Dela Gothic One','Manrope',sans-serif; font-size:22px; font-weight:400; color:var(--petrolio); letter-spacing:.2px}
h2{font-size:14px; font-weight:800; color:var(--petrolio); text-transform:uppercase; letter-spacing:.7px}
h3{font-size:14px; font-weight:800; color:var(--petrolio)}
a{color:var(--petrolio-chiaro)}
p{margin:0 0 .8em}
small,.piccolo{font-size:12.5px; color:var(--grigio)}
.num{font-variant-numeric:tabular-nums}
.muto{color:var(--grigio)}
.destra{text-align:right}
.centro{text-align:center}
hr{border:0; border-top:1px solid var(--bordo); margin:16px 0}

/* ---------- cornice ---------- */
.barra{background:var(--petrolio); color:#fff; display:flex; align-items:center; gap:14px;
  padding:0 16px; height:54px; position:sticky; top:0; z-index:50; padding-top:env(safe-area-inset-top)}
.marchio{font-family:'Dela Gothic One','Manrope',sans-serif; font-size:17px; letter-spacing:.5px; line-height:1.05;
  color:#fff; text-decoration:none; white-space:nowrap}
.marchio span{color:var(--giallo)}
.marchio em{display:block; font-family:'Manrope',sans-serif; font-style:normal; font-weight:600;
  font-size:9px; letter-spacing:.9px; color:#7ba7b5; text-transform:uppercase; margin-top:1px}
.nav{display:flex; gap:2px; margin-left:6px; flex:1}
.nav a{color:#cfe2e8; text-decoration:none; padding:6px 12px; border-radius:var(--r);
  font-weight:700; font-size:12px; letter-spacing:.6px; text-transform:uppercase; display:flex; align-items:center; gap:6px}
.nav a i{font-style:normal; font-size:14px; opacity:.85}
.nav a:hover{background:rgba(255,255,255,.10); color:#fff}
.nav a.on{background:var(--giallo); color:var(--petrolio-scuro)}
.nav a.on i{opacity:1}
.utente{font-size:12px; color:#a9c8d2; display:flex; align-items:center; gap:8px; margin-left:auto}
.utente b{color:#fff}
.utente a{color:#cfe2e8; text-decoration:none}
.utente a.esci{border:1px solid rgba(255,255,255,.25); padding:3px 10px; border-radius:var(--r); font-size:11px}
.utente a.esci:hover{background:rgba(255,255,255,.12)}
.utente a.chi{max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tag-ruolo{background:var(--giallo); color:var(--petrolio-scuro); font-weight:800; font-size:10px;
  padding:2px 7px; border-radius:10px; letter-spacing:.5px; text-transform:uppercase}
.tag-ruolo.hr{background:var(--menta)} .tag-ruolo.tutor{background:var(--sabbia); color:#fff} .tag-ruolo.collega{background:#5d8a99; color:#fff}
.campanella{position:relative; font-size:16px; color:#cfe2e8; text-decoration:none; padding:2px 4px}
.campanella.piena{color:var(--giallo)}
.campanella b{position:absolute; top:-6px; right:-8px; background:var(--rosso); color:#fff; font-size:10px;
  border-radius:9px; padding:0 5px; line-height:16px; font-variant-numeric:tabular-nums}
main{padding:16px 16px 40px; max-width:1100px; margin:0 auto}
.piede{color:var(--grigio); font-size:11.5px; text-align:center; padding:10px 16px 20px; font-variant-numeric:tabular-nums}
.piede a{color:var(--grigio)}

/* Sul telefono la navigazione va in basso, a portata di pollice. */
@media(max-width:820px){
  .barra{gap:8px; padding:0 12px}
  .nav{position:fixed; left:0; right:0; bottom:0; margin:0; background:var(--carta); border-top:1px solid var(--bordo);
    z-index:60; padding:4px 4px calc(4px + env(safe-area-inset-bottom)); justify-content:space-around; box-shadow:0 -2px 8px rgba(1,64,89,.08)}
  .nav a{flex-direction:column; gap:1px; color:var(--grigio); padding:4px 2px; font-size:10px; letter-spacing:0; text-transform:none; flex:1; min-width:0}
  .nav a i{font-size:18px; opacity:1}
  .nav a span{overflow:hidden; text-overflow:ellipsis; max-width:100%}
  .nav a.on{background:none; color:var(--petrolio)}
  .nav a.on i{color:var(--petrolio); text-shadow:0 0 0 var(--giallo)}
  .nav a.on span{border-bottom:2px solid var(--giallo)}
  .utente .chi{display:none}
  .utente .esci{display:none}
  main{padding:14px 14px calc(var(--nav-h) + 24px)}
  .piede{padding-bottom:calc(var(--nav-h) + 16px)}
}

/* ---------- blocchi ---------- */
.riquadro{background:var(--carta); border:1px solid var(--bordo); border-radius:var(--r);
  padding:16px; margin-bottom:14px; box-shadow:var(--ombra)}
.riquadro.stretto{max-width:480px}
.riquadro.giallo{border-left:4px solid var(--giallo)}
.riquadro.menta{border-left:4px solid var(--menta)}
.riquadro.sabbia{border-left:4px solid var(--sabbia)}
.riquadro.rosso{border-left:4px solid var(--rosso)}
.testata-pagina{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.sottotitolo{color:var(--grigio); font-size:13px; margin:-2px 0 0}
.colonne{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
.colonne.tre{grid-template-columns:1fr 1fr 1fr}
.colonne.lato{grid-template-columns:300px 1fr}
@media(max-width:820px){.colonne,.colonne.tre,.colonne.lato{grid-template-columns:1fr}}
.griglia-campi{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px}
.flash{padding:10px 14px; border-radius:var(--r); margin-bottom:12px; font-weight:600; font-size:14px;
  background:var(--verde-chiaro); color:var(--verde); border:1px solid #c5e3d2}
.flash.errore{background:var(--rosso-chiaro); color:var(--rosso); border-color:#eec7c2}
.flash.nota{background:var(--ambra); color:#7a5300; border-color:#f3dfa6; user-select:all}
.avviso{padding:10px 12px; border-radius:var(--r); background:var(--ambra); border:1px solid #f3dfa6; font-size:13.5px}
.avviso.rosso{background:var(--rosso-chiaro); border-color:#eec7c2; color:var(--rosso)}
.avviso.menta{background:var(--menta-chiara); border-color:#bfe2da}
.timbro-bozza{display:inline-block; border:2px solid var(--arancio); color:var(--arancio); font-weight:800; font-size:11px;
  letter-spacing:1.5px; padding:2px 8px; border-radius:4px; transform:rotate(-2deg); text-transform:uppercase}

/* ---------- controlli ---------- */
label{display:block; font-size:11px; font-weight:800; color:var(--grigio); text-transform:uppercase; letter-spacing:.5px; margin:8px 0 3px}
input[type=text],input[type=date],input[type=number],input[type=password],input[type=tel],input[type=email],
input[type=url],input[type=file],select,textarea{
  width:100%; padding:9px 10px; border:1px solid var(--bordo-forte); border-radius:var(--r);
  font-family:inherit; font-size:15px; color:var(--ink); background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--menta); outline-offset:-1px; border-color:var(--petrolio)}
textarea{min-height:80px; resize:vertical; line-height:1.4}
textarea.lungo{min-height:320px; font-family:ui-monospace,Menlo,monospace; font-size:13px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--petrolio); color:#fff;
  border:1px solid var(--petrolio); padding:9px 16px; border-radius:var(--r); cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:800; letter-spacing:.3px; text-decoration:none; line-height:1.2}
.btn:hover{background:var(--petrolio-chiaro)}
.btn.secondario{background:#fff; color:var(--petrolio); border-color:var(--bordo-forte); font-weight:700}
.btn.secondario:hover{background:#eef5f7}
.btn.giallo{background:var(--giallo); border-color:var(--giallo); color:var(--petrolio-scuro)}
.btn.giallo:hover{filter:brightness(.94)}
.btn.pericolo{background:#fff; color:var(--rosso); border-color:#e3b5b0}
.btn.pericolo:hover{background:var(--rosso-chiaro)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.piccolo{padding:5px 10px; font-size:12px}
.btn.grande{width:100%; padding:13px; font-size:16px; margin-top:14px}
.btn.largo{width:100%}
.barra-azioni{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.spunta{display:flex; align-items:center; gap:8px; font-size:14px; text-transform:none; font-weight:600;
  color:var(--ink); letter-spacing:0; margin:6px 0; cursor:pointer}
.spunta input{width:18px; height:18px; accent-color:var(--petrolio); margin:0; cursor:pointer; flex:none}
form.inline{display:inline}
.filtri{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
.filtri a{font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:20px; border:1px solid var(--bordo-forte);
  color:var(--petrolio); text-decoration:none; background:#fff}
.filtri a.on{background:var(--petrolio); color:#fff; border-color:var(--petrolio)}

/* ---------- tabelle ---------- */
.tabella-scorri{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.dati{border-collapse:collapse; width:100%; font-size:13.5px}
table.dati th{background:var(--petrolio); color:#fff; font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.5px; padding:7px 9px; text-align:left; white-space:nowrap}
table.dati td{border-bottom:1px solid var(--bordo); padding:7px 9px; vertical-align:middle}
table.dati tr:hover td{background:#f4f9fa}
table.dati td.num,table.dati th.num{text-align:right; font-variant-numeric:tabular-nums}
table.dati td.azioni{white-space:nowrap; text-align:right}
table.dati tr.spenta td{color:var(--grigio)}

/* ---------- liste e schede ---------- */
.lista{display:flex; flex-direction:column; gap:8px}
.scheda{display:flex; gap:12px; align-items:center; background:var(--carta); border:1px solid var(--bordo); border-radius:var(--r);
  padding:12px 14px; color:inherit; text-decoration:none; box-shadow:var(--ombra)}
a.scheda:hover{border-color:var(--bordo-forte); background:#fbfdfd}
.scheda .testo{flex:1; min-width:0}
.scheda .titolo{font-weight:800; color:var(--petrolio); font-size:15px}
.scheda .meta{font-size:12.5px; color:var(--grigio); margin-top:2px}
.scheda.fatta{border-left:4px solid var(--verde)}
.scheda.da-fare{border-left:4px solid var(--giallo)}
.scheda.bloccata{opacity:.7}
.griglia-schede{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px}
.avatar{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  background:var(--petrolio); color:#fff; font-weight:800; font-size:13px; letter-spacing:.5px; flex:none}
.avatar.menta{background:var(--menta); color:var(--petrolio-scuro)}
.avatar.sabbia{background:var(--sabbia)}
.avatar.grande{width:56px; height:56px; font-size:18px}
.tag{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  padding:2px 7px; border-radius:10px; background:#e6eef0; color:var(--petrolio); vertical-align:middle; margin-left:4px}
.tag.giallo{background:var(--giallo); color:var(--petrolio-scuro)}
.tag.menta{background:var(--menta); color:var(--petrolio-scuro)}
.tag.sabbia{background:var(--sabbia); color:#fff}
.tag.verde{background:var(--verde-chiaro); color:var(--verde)}
.tag.rosso{background:var(--rosso-chiaro); color:var(--rosso)}
.tag.grigio{background:#eceff0; color:var(--grigio)}
.tag.area{background:var(--menta-chiara); color:var(--petrolio)}

/* ---------- avanzamento ---------- */
.progresso{height:8px; background:#e3ecee; border-radius:4px; overflow:hidden; margin-top:6px}
.progresso i{display:block; height:100%; background:var(--petrolio); border-radius:4px; transition:width .3s}
.progresso.pieno i{background:var(--verde)}
.progresso.grande{height:12px}
.pct{font-variant-numeric:tabular-nums; font-weight:800; color:var(--petrolio); font-size:12.5px}
.numeroni{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:14px}
.numerone{background:var(--carta); border:1px solid var(--bordo); border-radius:var(--r); padding:12px 14px; box-shadow:var(--ombra)}
.numerone b{display:block; font-size:26px; font-weight:800; color:var(--petrolio); font-variant-numeric:tabular-nums; letter-spacing:.02em; line-height:1.1}
.numerone span{font-size:11.5px; color:var(--grigio); text-transform:uppercase; letter-spacing:.5px; font-weight:700}
.numerone.giallo{border-top:3px solid var(--giallo)} .numerone.menta{border-top:3px solid var(--menta)} .numerone.rosso{border-top:3px solid var(--rosso)}

/* ---------- livelli di competenza ---------- */
.livello{display:inline-block; font-size:11px; font-weight:800; padding:3px 9px; border-radius:12px; white-space:nowrap; letter-spacing:.2px}
.livello.l1{background:#fdecea; color:var(--rosso)}
.livello.l2{background:var(--ambra); color:#7a5300}
.livello.l3{background:var(--verde-chiaro); color:var(--verde)}
.livello.l4{background:var(--petrolio); color:#fff}
.livello.l0{background:#eceff0; color:var(--grigio)}
.scala-livelli{display:flex; gap:4px}
.scala-livelli label{margin:0; flex:1; text-align:center; cursor:pointer}
.scala-livelli input{display:none}
.scala-livelli span{display:block; padding:7px 4px; border:1px solid var(--bordo-forte); border-radius:6px; font-size:11px; font-weight:800;
  color:var(--grigio); background:#fff; letter-spacing:0; text-transform:none; line-height:1.15}
.scala-livelli input:checked + span.l1{background:#fdecea; color:var(--rosso); border-color:var(--rosso)}
.scala-livelli input:checked + span.l2{background:var(--ambra); color:#7a5300; border-color:#d9a400}
.scala-livelli input:checked + span.l3{background:var(--verde-chiaro); color:var(--verde); border-color:var(--verde)}
.scala-livelli input:checked + span.l4{background:var(--petrolio); color:#fff; border-color:var(--petrolio)}
.riga-comp{display:grid; grid-template-columns:1fr 280px; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--bordo)}
.riga-comp .nome{font-weight:700}
.riga-comp .desc{font-size:12px; color:var(--grigio)}
.riga-comp .prima{font-size:11.5px; color:var(--grigio); margin-top:2px}
.riga-comp .nota{grid-column:1 / -1}
.riga-comp .nota input{padding:6px 8px; font-size:13px}
@media(max-width:700px){.riga-comp{grid-template-columns:1fr}}
.area-titolo{margin:18px 0 4px; font-size:12px; font-weight:800; color:var(--sabbia); text-transform:uppercase; letter-spacing:.8px}

/* ---------- video ---------- */
.video-cornice{background:#000; border-radius:var(--r); overflow:hidden; aspect-ratio:16/9; position:relative; margin-bottom:12px}
.video-cornice video,.video-cornice iframe{width:100%; height:100%; display:block; border:0}
.video-copertina{width:100px; height:64px; border-radius:6px; background:var(--petrolio-scuro) center/cover no-repeat; flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; position:relative}
.video-copertina.vista::after{content:"✓"; position:absolute; right:4px; bottom:3px; background:var(--verde); color:#fff; font-size:10px;
  width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center}
.stato-conv{font-size:12px; color:var(--grigio)}

/* ---------- documenti (interlinea 1.2, Manrope: e' carta LSB) ---------- */
.documento{background:var(--carta); border:1px solid var(--bordo); border-radius:var(--r); padding:22px 24px; box-shadow:var(--ombra);
  line-height:1.2; font-size:15px; max-width:820px}
.documento h2{font-size:15px; text-transform:none; letter-spacing:0; text-decoration:underline; text-underline-offset:3px; margin:1.4em 0 .5em}
.documento h3{font-size:14px; margin:1.2em 0 .4em}
.documento h4{font-size:13.5px; margin:1em 0 .3em; color:var(--grigio)}
.documento p{margin:0 0 .7em}
.documento ul,.documento ol{margin:0 0 .8em; padding-left:1.4em}
.documento li{margin-bottom:.25em}
.documento blockquote{margin:.6em 0 .9em; padding:8px 14px; border-left:4px solid var(--giallo); background:var(--bg); border-radius:0 6px 6px 0}
.documento blockquote p:last-child{margin:0}
.documento code{background:#eef3f4; padding:1px 5px; border-radius:4px; font-size:.92em}
.documento mark{background:#fff0b8; padding:0 3px}
.documento table.dati{font-size:13px; margin:.4em 0 1em}
.documento .casella{display:inline-block; width:14px; height:14px; border:2px solid var(--petrolio); border-radius:3px; vertical-align:-2px; margin-right:2px}
.documento .casella.fatta{background:var(--petrolio)}
.documento hr{margin:1.2em 0}
@media(max-width:700px){.documento{padding:16px 16px; font-size:14.5px}}

/* ---------- quiz ---------- */
.domanda{background:var(--carta); border:1px solid var(--bordo); border-radius:var(--r); padding:14px 16px; margin-bottom:10px}
.domanda .testo-domanda{font-weight:800; margin-bottom:8px; color:var(--petrolio)}
.domanda .n{display:inline-block; width:24px; height:24px; border-radius:50%; background:var(--giallo); color:var(--petrolio-scuro);
  font-size:12px; font-weight:800; text-align:center; line-height:24px; margin-right:8px; font-variant-numeric:tabular-nums}
.risposta{display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border:1px solid var(--bordo); border-radius:6px;
  margin:6px 0; cursor:pointer; font-weight:600; font-size:14px; text-transform:none; letter-spacing:0; color:var(--ink)}
.risposta input{width:18px; height:18px; margin:1px 0 0; accent-color:var(--petrolio); flex:none}
.risposta:has(input:checked){border-color:var(--petrolio); background:#eef5f7}
.risposta.giusta{border-color:var(--verde); background:var(--verde-chiaro)}
.risposta.sbagliata{border-color:var(--rosso); background:var(--rosso-chiaro)}
.spiegazione{font-size:13px; color:var(--grigio); margin-top:8px; padding:8px 10px; background:var(--bg); border-radius:6px}
.esito{padding:16px; border-radius:var(--r); text-align:center; margin-bottom:14px}
.esito.ok{background:var(--verde-chiaro); border:1px solid #c5e3d2}
.esito.no{background:var(--ambra); border:1px solid #f3dfa6}
.esito b{font-size:30px; display:block; font-variant-numeric:tabular-nums; font-weight:800}
.esito.ok b{color:var(--verde)} .esito.no b{color:#7a5300}

/* ---------- login ---------- */
.pagina-login{background:var(--petrolio); display:flex; align-items:center; justify-content:center; padding:20px}
.scatola-login{background:var(--carta); border-radius:14px; padding:28px 26px; width:100%; max-width:380px; box-shadow:0 10px 40px rgba(0,0,0,.25); text-align:center}
.logo-login{height:52px; margin-bottom:8px}
.marchio-grande{font-family:'Dela Gothic One','Manrope',sans-serif; font-size:clamp(20px,6.4vw,30px); font-weight:400; color:var(--petrolio); margin:4px 0 2px; letter-spacing:.5px}
.marchio-grande span{color:var(--giallo)}
.motto{color:var(--grigio); font-size:13.5px; margin-bottom:16px}
.scatola-login form{text-align:left}
.scatola-login .aiuto{font-size:12px; color:var(--grigio); margin-top:16px; line-height:1.4}
.scatola-login .versione{font-size:10.5px; color:var(--grigio); margin:10px 0 0; font-variant-numeric:tabular-nums}

/* ---------- backend ---------- */
.tabs{display:flex; gap:4px; border-bottom:2px solid var(--bordo); margin-bottom:14px; flex-wrap:wrap}
.tabs a{border:1px solid var(--bordo); border-bottom:0; background:#eef4f5; color:var(--grigio); padding:7px 14px;
  border-radius:var(--r) var(--r) 0 0; text-decoration:none; font-size:12.5px; font-weight:800; letter-spacing:.3px; margin-bottom:-2px}
.tabs a.on{background:#fff; color:var(--petrolio); border-bottom:2px solid #fff}
details{border:1px solid var(--bordo); border-radius:var(--r); padding:0 14px; margin-bottom:10px; background:var(--carta)}
details summary{cursor:pointer; padding:11px 0; font-weight:800; color:var(--petrolio); list-style:none; display:flex; align-items:center; gap:8px}
details summary::before{content:"▸"; font-size:12px; color:var(--grigio)}
details[open] summary::before{content:"▾"}
details .dentro{padding:0 0 14px}
.linea-tempo{list-style:none; margin:0; padding:0}
.linea-tempo li{padding:8px 0 8px 18px; border-left:2px solid var(--bordo); position:relative; font-size:13.5px}
.linea-tempo li::before{content:""; position:absolute; left:-6px; top:14px; width:10px; height:10px; border-radius:50%; background:var(--petrolio)}
.linea-tempo li .quando{font-size:11.5px; color:var(--grigio); font-variant-numeric:tabular-nums}

/* ---------- stampa ---------- */
@media print{
  .barra,.nav,.piede,.no-stampa,.flash{display:none !important}
  main{padding:0; max-width:none}
  body{background:#fff; font-size:11pt}
  .riquadro,.documento{border:0; box-shadow:none; padding:0}
  a{color:inherit; text-decoration:none}
}
.foglio{max-width:190mm; margin:0 auto; padding:14mm 12mm; background:#fff; color:var(--ink); line-height:1.2; font-size:11pt}
.foglio .testata{display:flex; align-items:flex-start; justify-content:space-between; border-bottom:2px solid var(--petrolio); padding-bottom:8px; margin-bottom:14px}
.foglio .testata img{height:44px}
.foglio .dati-societa{text-align:right; font-size:8pt; line-height:1.5; color:#4a6b78}
.foglio .dati-societa b{color:var(--petrolio); font-size:9.5pt}
.foglio h1{font-size:17pt; margin-bottom:4px}
.foglio .occhiello{font-size:9.5pt; color:#4a6b78; margin-bottom:12px}
.foglio table.dati{font-size:9.5pt}
.foglio table.dati th{padding:5px 7px} .foglio table.dati td{padding:4px 7px; border:1px solid #cfdede}
.foglio .firme{display:flex; gap:30px; margin-top:28px}
.foglio .firme div{flex:1; border-top:1px solid var(--ink); padding-top:6px; font-size:9pt; color:#4a6b78}
.foglio .pie{margin-top:20px; font-size:8pt; color:#4a6b78; border-top:1px solid var(--bordo); padding-top:6px}
.attestato{text-align:center; padding:30mm 20mm; border:6px double var(--petrolio); margin:10mm auto; max-width:190mm; background:#fff}
.attestato h1{font-size:28pt; margin:10px 0}
.attestato .nome{font-family:'Dela Gothic One','Manrope',sans-serif; font-size:24pt; color:var(--petrolio); margin:18px 0 6px}
.attestato .cosa{font-size:13pt; margin:8px 0}
.attestato .moduli{font-size:10pt; color:#4a6b78; margin:14px auto; max-width:120mm; text-align:left}
.attestato .firma{margin-top:36px; font-size:10pt; color:#4a6b78}
@media screen{.foglio,.attestato{box-shadow:0 2px 12px rgba(0,0,0,.12); margin:20px auto}}