/* AUTOMATIC MEPA - foglio di stile */
:root{
  --blu:#0b2a4a; --blu-scuro:#071d34; --blu-chiaro:#12456f;
  --verde:#0f9d76; --verde-chiaro:#e6f6f1;
  --oro:#e0a32e; --oro-chiaro:#fdf4e2;
  --rosso:#d1394a; --rosso-chiaro:#fdeef0;
  --ambra:#c87f0a; --ambra-chiaro:#fdf3e0;
  --viola:#6b4fd8; --viola-chiaro:#efecfd;
  --grigio:#64748b; --grigio-chiaro:#f1f5f9;
  --testo:#16202e; --tenue:#5b6b80; --bordo:#e2e8f0;
  --fondo:#f6f8fb; --carta:#fff;
  --ombra:0 1px 2px rgba(11,42,74,.06), 0 6px 20px rgba(11,42,74,.06);
  --raggio:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:clip}
body{
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--testo); background:var(--fondo);
  display:flex; min-height:100vh; -webkit-text-size-adjust:100%;
}
a{color:var(--blu-chiaro); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .6rem; line-height:1.25}
h2{font-size:1.15rem}
h3{font-size:1rem}
p{margin:0 0 .7rem}
.salta{position:absolute;left:-999px}
.salta:focus{left:8px;top:8px;background:#fff;padding:.5rem 1rem;z-index:99;border-radius:8px}

/* ------------------------------------------------------------- SIDEBAR */
.lato{
  width:256px; flex:0 0 256px; background:var(--blu); color:#cfe0f0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.marchio{display:flex; gap:.7rem; align-items:center; padding:1.1rem 1rem; border-bottom:1px solid rgba(255,255,255,.08)}
.marchio svg{width:30px;height:30px;fill:none;stroke:var(--oro);stroke-width:1.6;flex:0 0 auto}
.marchio strong{display:block;color:#fff;font-size:.95rem;letter-spacing:.04em}
.marchio small{display:block;color:#8fb0cf;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.menu{flex:1; overflow-y:auto; padding:.5rem 0 1rem}
.menu .gruppo{margin:.9rem 0 .25rem; padding:0 1rem; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#6f92b5}
.menu a{display:flex; align-items:center; gap:.65rem; padding:.55rem 1rem; color:#cfe0f0; font-size:.9rem}
.menu a:hover{background:rgba(255,255,255,.06); text-decoration:none; color:#fff}
.menu a.attiva{background:var(--blu-chiaro); color:#fff; box-shadow:inset 3px 0 0 var(--oro)}
.menu a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.menu a.ai svg{stroke:var(--oro);fill:rgba(224,163,46,.15)}
.piede-lato{border-top:1px solid rgba(255,255,255,.08); padding:.8rem 1rem; display:flex; align-items:center; gap:.6rem}
.utente{display:flex; gap:.55rem; align-items:center; flex:1; min-width:0}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--oro);color:#3a2a06;display:grid;place-items:center;font-weight:700}
.utente strong{display:block;color:#fff;font-size:.85rem}
.utente small{color:#8fb0cf;font-size:.75rem}
.esci{color:#8fb0cf;font-size:.8rem}

/* ---------------------------------------------------------------- CORPO */
.corpo{flex:1; min-width:0; max-width:100%; display:flex; flex-direction:column}
.testa{
  display:flex; align-items:center; gap:.8rem; padding:.85rem 1.4rem;
  background:var(--carta); border-bottom:1px solid var(--bordo); position:sticky; top:0; z-index:20;
}
.testa h1{font-size:1.12rem; margin:0; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.azioni-testa{display:flex; gap:.5rem}
.apri-menu{display:none; background:none;border:0;padding:.3rem;cursor:pointer}
.apri-menu svg{width:24px;height:24px;fill:none;stroke:var(--testo);stroke-width:2;stroke-linecap:round}
main{padding:1.4rem; max-width:min(1280px,100%); width:100%}
.barra-demo{background:var(--oro-chiaro); color:#7a5a12; padding:.55rem 1.4rem; font-size:.85rem; border-bottom:1px solid #f0e0bd}

/* ------------------------------------------------------------ COMPONENTI */
.carta{background:var(--carta); border:1px solid var(--bordo); border-radius:var(--raggio); padding:1.1rem; box-shadow:var(--ombra); margin-bottom:1.1rem}
.carta > h2:first-child, .carta > h3:first-child{margin-top:0}
.griglia{display:grid; gap:1.1rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g23{grid-template-columns:2fr 1fr}
.fine{color:var(--tenue); font-size:.85rem}
.rilievo{font-size:1.02rem;font-weight:600}
.centro{text-align:center}
.destra{text-align:right}
.mt{margin-top:1rem}
.riga-flex{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.spazio{flex:1}

.kpi{background:var(--carta); border:1px solid var(--bordo); border-radius:var(--raggio); padding:.95rem 1.05rem; box-shadow:var(--ombra)}
.kpi .eti{font-size:.78rem; color:var(--tenue); text-transform:uppercase; letter-spacing:.06em}
.kpi .num{font-size:1.6rem; font-weight:700; line-height:1.2; margin:.15rem 0 .1rem}
.kpi .sotto{font-size:.82rem; color:var(--tenue)}
.kpi.verde .num{color:var(--verde)} .kpi.rosso .num{color:var(--rosso)}
.kpi.ambra .num{color:var(--ambra)} .kpi.blu .num{color:var(--blu-chiaro)}

.btn{
  display:inline-flex; align-items:center; gap:.4rem; border:0; cursor:pointer;
  background:var(--blu); color:#fff; padding:.5rem .9rem; border-radius:10px;
  font:inherit; font-size:.88rem; font-weight:600; text-decoration:none;
}
.btn:hover{background:var(--blu-chiaro); text-decoration:none; color:#fff}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9}
.btn.fantasma{background:transparent;color:var(--blu);border:1px solid var(--bordo)}
.btn.fantasma:hover{background:var(--grigio-chiaro);color:var(--blu)}
.btn.oro{background:var(--oro);color:#3a2a06}
.btn.oro:hover{background:#c98f20;color:#3a2a06}
.btn.verde{background:var(--verde)} .btn.verde:hover{background:#0c8664}
.btn.rosso{background:var(--rosso)} .btn.rosso:hover{background:#b62c3c}
.btn.piccolo{padding:.3rem .6rem;font-size:.8rem;border-radius:8px}

.tag{display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.76rem;font-weight:600;white-space:nowrap}
.tag.verde{background:var(--verde-chiaro);color:#0a6f53}
.tag.rosso{background:var(--rosso-chiaro);color:#a32536}
.tag.ambra{background:var(--ambra-chiaro);color:#8a5806}
.tag.blu{background:#e8f1fa;color:var(--blu-chiaro)}
.tag.viola{background:var(--viola-chiaro);color:#4a35a0}
.tag.grigio{background:var(--grigio-chiaro);color:var(--grigio)}

table{width:100%; border-collapse:collapse; font-size:.88rem}
th{text-align:left; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tenue); padding:.45rem .6rem; border-bottom:1px solid var(--bordo); white-space:nowrap}
td{padding:.55rem .6rem; border-bottom:1px solid var(--bordo); vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafcff}
.tabella-scorri{overflow-x:auto; margin:0 -.4rem}
.vuoto{padding:1.6rem; text-align:center; color:var(--tenue)}

label{display:block; font-size:.82rem; font-weight:600; color:var(--tenue); margin:0 0 .25rem}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%; padding:.5rem .65rem; border:1px solid var(--bordo); border-radius:9px;
  font:inherit; font-size:.9rem; background:#fff; color:var(--testo);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blu-chiaro); outline-offset:1px; border-color:var(--blu-chiaro)}
textarea{min-height:90px; resize:vertical}
.campo{margin-bottom:.8rem}
.campi{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
fieldset{border:1px solid var(--bordo); border-radius:12px; padding:1rem; margin:0 0 1rem}
legend{font-size:.8rem; font-weight:700; color:var(--tenue); padding:0 .4rem; text-transform:uppercase; letter-spacing:.05em}

.avviso{padding:.7rem .9rem; border-radius:10px; margin-bottom:1rem; font-size:.9rem}
.avviso.ok{background:var(--verde-chiaro); color:#0a6f53}
.avviso.warn{background:var(--ambra-chiaro); color:#8a5806}
.avviso.err{background:var(--rosso-chiaro); color:#a32536}

/* barre e semafori */
.barra{height:8px;background:var(--grigio-chiaro);border-radius:99px;overflow:hidden}
.barra span{display:block;height:100%;background:var(--verde);border-radius:99px}
.barra.rossa span{background:var(--rosso)} .barra.ambra span{background:var(--ambra)}
.semaforo{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;border-radius:12px;font-weight:600}
.semaforo .pallino{width:18px;height:18px;border-radius:50%;flex:0 0 auto}
.semaforo.verde{background:var(--verde-chiaro);color:#0a6f53} .semaforo.verde .pallino{background:var(--verde)}
.semaforo.giallo{background:var(--ambra-chiaro);color:#8a5806} .semaforo.giallo .pallino{background:var(--ambra)}
.semaforo.rosso{background:var(--rosso-chiaro);color:#a32536} .semaforo.rosso .pallino{background:var(--rosso)}
.semaforo.grigio{background:var(--grigio-chiaro);color:var(--grigio)} .semaforo.grigio .pallino{background:var(--grigio)}

/* liste di controllo / avvisi di Marcella */
.controlli{list-style:none;padding:0;margin:0}
.controlli li{display:flex;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--bordo)}
.controlli li:last-child{border-bottom:0}
.controlli .ico{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:.8rem;font-weight:700;color:#fff}
.controlli .ok .ico{background:var(--verde)}
.controlli .attenzione .ico{background:var(--ambra)}
.controlli .blocco .ico{background:var(--rosso)}
.controlli strong{display:block;font-size:.88rem}
.controlli span{font-size:.85rem;color:var(--tenue)}

.avvisi{list-style:none;padding:0;margin:0}
.avvisi li{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem 0;border-bottom:1px solid var(--bordo)}
.avvisi li:last-child{border-bottom:0}
.avvisi .punto{width:9px;height:9px;border-radius:50%;margin-top:.45rem;flex:0 0 auto}
.avvisi .rosso{background:var(--rosso)} .avvisi .giallo{background:var(--ambra)} .avvisi .grigio{background:var(--grigio)}
.avvisi strong{display:block;font-size:.87rem}
.avvisi small{color:var(--tenue);font-size:.83rem}

/* percorso di avvio */
.fasi{display:grid;gap:1.1rem}
.passo{display:flex;gap:.9rem;padding:.85rem;border:1px solid var(--bordo);border-radius:12px;background:var(--carta);align-items:flex-start}
.passo.fatto{background:var(--verde-chiaro);border-color:#bfe6da}
.passo .n{width:30px;height:30px;border-radius:50%;background:var(--blu);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:0 0 auto}
.passo.fatto .n{background:var(--verde)}
.passo h3{margin:0 0 .2rem;font-size:.95rem}
.passo p{margin:0 0 .3rem;font-size:.87rem;color:var(--tenue)}
.passo .dove{font-size:.8rem;color:var(--blu-chiaro)}

.checklist{list-style:none;padding:0;margin:0}
.checklist li{display:flex;gap:.6rem;align-items:flex-start;padding:.45rem 0;border-bottom:1px solid var(--bordo)}
.checklist li:last-child{border-bottom:0}
.checklist input{margin-top:.2rem;width:17px;height:17px;flex:0 0 auto}
.checklist .obb{color:var(--rosso);font-weight:700}

.timeline{list-style:none;padding:0;margin:0;border-left:2px solid var(--bordo);padding-left:1rem}
.timeline li{position:relative;padding:0 0 .9rem}
.timeline li::before{content:'';position:absolute;left:-1.32rem;top:.35rem;width:9px;height:9px;border-radius:50%;background:var(--blu-chiaro)}
.timeline small{color:var(--tenue)}

.pillole{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.pillole a{padding:.32rem .75rem;border:1px solid var(--bordo);border-radius:999px;font-size:.84rem;background:var(--carta);color:var(--tenue)}
.pillole a.on{background:var(--blu);color:#fff;border-color:var(--blu)}
.pillole a:hover{text-decoration:none}

pre.testo{white-space:pre-wrap;background:var(--grigio-chiaro);padding:1rem;border-radius:12px;font:13px/1.55 ui-monospace,Consolas,monospace;max-height:460px;overflow:auto}

/* ------------------------------------------------------- PANNELLO MARCELLA */
.ai-pannello{
  position:fixed; right:18px; bottom:18px; width:400px; max-width:calc(100vw - 24px);
  max-height:min(680px,calc(100vh - 36px)); background:var(--carta); border:1px solid var(--bordo);
  border-radius:18px; box-shadow:0 18px 48px rgba(11,42,74,.22); display:flex; flex-direction:column; z-index:60; overflow:hidden;
}
.ai-pannello[hidden]{display:none}
.ai-testa{display:flex;align-items:center;gap:.6rem;padding:.75rem .9rem;background:var(--blu);color:#fff}
.ai-titolo{display:flex;gap:.6rem;align-items:center;flex:1}
.ai-titolo svg{width:24px;height:24px;fill:rgba(224,163,46,.25);stroke:var(--oro);stroke-width:1.5}
.ai-titolo strong{display:block;font-size:.95rem}
.ai-titolo small{color:#9dbcd8;font-size:.76rem}
.ai-testa button{background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;padding:0 .2rem}
.ai-corpo{flex:1;overflow-y:auto;padding:.9rem;display:flex;flex-direction:column;gap:.7rem;background:var(--fondo)}
.ai-msg{padding:.7rem .85rem;border-radius:14px;font-size:.88rem;max-width:92%}
.ai-msg p{margin:0 0 .5rem}.ai-msg p:last-child{margin:0}
.ai-msg ul{margin:.2rem 0 .4rem;padding-left:1.1rem}
.ai-msg.marcella{background:var(--carta);border:1px solid var(--bordo);align-self:flex-start}
.ai-msg.io{background:var(--blu);color:#fff;align-self:flex-end}
.ai-msg .fine{font-size:.8rem}
.ai-msg .attenzione{color:var(--rosso)}
.ai-azioni{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.4rem}
.ai-azioni a{font-size:.8rem;background:var(--grigio-chiaro);padding:.28rem .6rem;border-radius:999px;color:var(--blu-chiaro)}
.ai-scorciatoie{display:flex;gap:.4rem;flex-wrap:wrap}
.ai-scorciatoie button{background:var(--carta);border:1px solid var(--bordo);border-radius:999px;padding:.3rem .65rem;font:inherit;font-size:.8rem;color:var(--tenue);cursor:pointer}
.ai-scorciatoie button:hover{background:var(--blu);color:#fff;border-color:var(--blu)}
.ai-piede{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--bordo);background:var(--carta)}
.ai-piede input{flex:1}
.ai-piede button{background:var(--blu);border:0;border-radius:10px;width:42px;display:grid;place-items:center;cursor:pointer}
.ai-piede button svg{width:19px;height:19px;fill:#fff}

/* --------------------------------------------------------------- LOGIN */
.pagina-login{display:grid;place-items:center;min-height:100vh;width:100%;background:linear-gradient(140deg,var(--blu-scuro),var(--blu-chiaro));padding:1.5rem}
.riquadro-login{background:#fff;border-radius:20px;padding:2rem;max-width:420px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.riquadro-login h1{font-size:1.3rem;margin-bottom:.2rem}
.riquadro-login .sotto{color:var(--tenue);font-size:.9rem;margin-bottom:1.3rem}
.riquadro-login .btn{width:100%;justify-content:center;padding:.65rem}
.demo-accessi{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--bordo);font-size:.84rem;color:var(--tenue)}
.demo-accessi code{background:var(--grigio-chiaro);padding:.1rem .35rem;border-radius:5px}

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width:1100px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))} .g23{grid-template-columns:1fr} }
@media (max-width:860px){
  body{display:block}
  .lato{position:fixed;left:-260px;top:0;z-index:70;transition:left .22s ease;height:100dvh}
  .lato.aperto{left:0;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
  .apri-menu{display:block}
  main{padding:1rem}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .azioni-testa .fantasma{display:none}
  .testa h1{font-size:1rem}
  .ai-pannello{right:8px;left:8px;bottom:8px;width:auto;max-height:calc(100dvh - 16px)}
}
@media (max-width:520px){
  .testa{padding:.7rem .9rem;gap:.5rem}
  .testa h1{font-size:.95rem}
  .azioni-testa .btn{font-size:.78rem;padding:.4rem .6rem}
  .azioni-testa .btn svg{width:14px;height:14px}
  .barra-demo{padding:.5rem .9rem;font-size:.8rem}
  main{padding:.8rem}
  .carta{padding:.9rem}
}
@media print{
  .lato,.testa,.ai-pannello,.barra-demo,.azioni-testa{display:none!important}
  body{display:block;background:#fff}
  main{padding:0;max-width:none}
  .carta{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
}