/* ========================================================================== */
/* Consavio CSS – versione consolidata                                        */
/* ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* -------------------------------------------------------------------------- */
/* Variabili da PHP → CSS                                                     */
/* -------------------------------------------------------------------------- */
:root{
  --c-primary: #0086DF;
  --c-primary-h: #0086DF;
  --c-text: #1E293B;
  --c-text-menu: #444444;
  --c-gray-100: #F5F6F8;
  --c-gray-300: #CCCCCC;
  --c-blue-600: #0275d8;
  --c-blue-600-h: #0262b3;
  --c-green-500: #22c55e;
  --c-green-600: #16a34a;
  --c-danger: #dc3545;
  --c-success: #28a745;

  --radius-sm: .4rem;
  --radius-md: .6rem;
  --radius-lg: .8rem;

  --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
  --shadow-md: 0 4px 14px rgba(0,0,0,.08);
  --shadow-blue: 0 2px 6px rgba(2,117,216,.25);

  --fz-12: 1.2rem;
  --fz-13: 1.3rem;
  --fz-14: 1.4rem;
  --fz-15: 1.5rem;
  --fz-16: 1.6rem;
  --fz-18: 1.8rem;
  --fz-20: 2.0rem;
  --fz-24: 2.4rem;
  --fz-30: 3.0rem;
  --fz-35: 3.5rem;

  --toolbar-h: 68px;
  --side-w: 250px;
}

/* -------------------------------------------------------------------------- */
/* Reset & base                                                               */
/* -------------------------------------------------------------------------- */
*{ box-sizing: border-box; }

html, body{
  height:100%;
  margin:0; padding:0;
  font-size:62.5%;
  background:#fff;
  font-family:"Noto Sans", sans-serif;
  color:var(--c-text);
}

body{
  font-size:var(--fz-16);
  font-weight:400;
}

a{
  color:var(--c-primary);
  text-decoration:none;
  font-weight:bold;
}
a:hover{
  color:var(--c-primary-h);
  text-decoration:none;
}

h1,h2,h3,h4,h5{ margin:0; font-weight:600; }
h1{
  position:relative; width:100%;
  padding:1rem 0;
  color:var(--c-primary);
  font-size:var(--fz-30);
  border-bottom:.1rem solid var(--c-primary);
  margin-bottom:2rem;
}
h2{ padding:5rem 0 1rem; font-size:var(--fz-24); }
h3,h4,h5{ padding:2.4rem 0 .5rem; font-size:1.8rem; }

p{ margin:8px 8px 8px 0; }
.textRight{ text-align:right; }
.textCenter,.text-center{ text-align:center; }

/* -------------------------------------------------------------------------- */
/* Layout base & sticky footer                                                */
/* -------------------------------------------------------------------------- */
#container{
  display:flex; flex-direction:column;
  min-height:100vh; width:100%;
}

#contenitore{
  flex:1 1 auto;
  width:100%; margin:0 auto; padding:0;
}

.contenitore{ max-width:1200px; margin:0 auto; padding:0 24px; }

/* Footer */
#fine{
  width:100%; color:#334155;
  border-top:.1rem solid var(--c-gray-300);
  background-color:#F9F9F9;
  padding:2rem 10%;
  text-align:center; font-size:var(--fz-15);
  display:flex; justify-content:center; align-items:center;
  position:relative;
}
#fineContatti{ width:100%; padding:4rem 5%; text-align:center; }
#fineInfo{ width:100%; padding:2rem 5%; text-align:center; font-size:1.4rem; }
#fineDati{ width:100%; padding:2rem 10%; text-align:center; font-size:1.5rem; }

.fineBox{
  position:relative; margin:0 1.5%; font-size:1.4rem; width:100%;
  display:flex; justify-content:center; align-items:center; flex-direction:column;
}
.fineBoxLeft{ text-align:left!important; width:25.3%; }
.fineBoxRight{ text-align:right!important; width:25.3%; }
.fineBox h2{ text-transform:lowercase; }
.fineBox h1{ color:#fff; text-transform:uppercase; margin:0; padding:0; }
.fineBox a, .fineBox a:hover{ text-decoration:none; font-weight:normal; }

@media (max-width: 767px){
  #fineDati{ padding:2rem 2%; }
  .fineBox{ width:100%; margin:2rem 0; text-align:center; font-size:1.3rem; }
  .fineBoxLeft, .fineBoxRight{ text-align:center!important; margin:0; }
}

/* -------------------------------------------------------------------------- */
/* Menu utente                                                                */
/* -------------------------------------------------------------------------- */
.menuUtente{
  display:flex; justify-content:flex-end; align-items:center;
  width:100%; padding:1rem 4rem 1rem 0; font-size:var(--fz-14);
}
.menuUtente ul{ display:flex; gap:1rem; margin:0; padding:0; list-style:none; }
.menuUtente ul li{ margin:0; padding:0; }
.menuUtente ul li a{
  display:flex; align-items:center; justify-content:center;
  padding:.6rem 1.2rem; font-weight:bold; text-decoration:none;
  border-radius:5px; font-size:var(--fz-14);
  transition: background-color .3s, border-color .3s, text-decoration .3s;
}
.menuUtente ul li a.link-login{
  background:var(--c-blue-600); color:#fff; border:2px solid var(--c-blue-600);
}
.menuUtente ul li a.link-login:hover{ background:var(--c-blue-600-h); border-color:var(--c-blue-600-h); }
.menuUtente ul li a.link-login2{
  background:#fff; color:var(--c-blue-600); border:2px solid var(--c-blue-600);
}
.menuUtente ul li a.link-login2:hover{
  background:#e0e0e0; border-color:var(--c-blue-600); color:var(--c-blue-600);
}
@media (max-width:767px){
  .menuUtente{ justify-content:center; padding:1rem 0; }
  .menuUtente ul{ flex-wrap:wrap; justify-content:center; gap:.8rem; }
}

/* -------------------------------------------------------------------------- */
/* Logo                                                                       */
/* -------------------------------------------------------------------------- */
#logo{
  width:100%; height:10rem; color:#1E293B; text-align:center;
  font-size:2rem; margin-top:10rem!important; margin-bottom:25px!important; padding:1.2rem 0 11rem;
}
#logo img{ width:35%; display:inline-block; }
@media (max-width:767px){
  #logo img{ width:80%; }
  #logo{ margin-top:1rem; }
}

/* -------------------------------------------------------------------------- */
/* Utility                                                                    */
/* -------------------------------------------------------------------------- */
.vuoto{ clear:both; }
.visible-mob{ display:none; }
.hidden-mob{ display:block; }
@media (max-width:767px){
  .visible-mob{ display:block; }
  .hidden-mob{ display:none; }
}

/* -------------------------------------------------------------------------- */
/* Componenti riusabili                                                       */
/* -------------------------------------------------------------------------- */
/* Pulsanti */
.tasto, .tasto200, .tasto-google, .btn-google{
  display:inline-block; text-align:center; cursor:pointer; text-decoration:none;
  border-radius:var(--radius-md);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .05s;
}

/* Primario pieno */
.tasto {
  width:100%; padding:14px 0; font-size:var(--fz-16);
  background:var(--c-blue-600); color:#fff; border:2px solid var(--c-blue-600);
  box-shadow:var(--shadow-blue);
}
.tasto:hover { background:var(--c-blue-600-h); border-color:var(--c-blue-600-h); box-shadow:0 4px 10px rgba(2,117,216,.30); }
.tasto:disabled, .tastoTB:disabled{ opacity:.55; cursor:not-allowed; }


/* Pulsante compatto / alternativo */
.tasto200{
  width:auto; margin:2.5rem 0 2.5rem 1%; padding:.8rem 2rem; font-size:var(--fz-20);
  background:var(--c-blue-600); color:#fff; border:2px solid var(--c-blue-600);
}
.tasto200:hover{ background:var(--c-blue-600-h); border-color:var(--c-blue-600-h); box-shadow:0 4px 12px rgba(0,123,255,.2); }

/* Google */
.tasto-google, .btn-google{ 
  display: inline-flex;
  align-items: center;      /* centro verticale */
  justify-content: center;  
  width:100%; gap:8px; background:#fff; color:#444; border:1px solid #ccc; font-weight:500; padding:14px 0;
}


/* Link principali */
.link-primary, .link{ color:var(--c-blue-600); text-decoration:none; }
.link-primary:hover, .link:hover{ text-decoration:underline; }

/* Messaggi */
.message-box{
  background:#f8f9fa; border-left:4px solid var(--c-blue-600);
  padding:15px; margin-bottom:20px; border-radius:4px;
}
.message-box a{ color:var(--c-blue-600); font-weight:bold; text-decoration:none; }
.message-box a:hover{ text-decoration:underline; }
.error-box{ border-left-color:var(--c-danger); }
.success-box{ border-left-color:var(--c-success); }

/* Form generico */
form label{ display:block; font-weight:bold; margin-bottom:-.9rem; }
form input, form textarea, form select{
  display:block; width:100%; font-size:2rem; padding:.5rem 1%;
  border:.1rem solid #ccc; border-radius:var(--radius-sm); margin-bottom:.6rem; color:#444; line-height:1.2;
}
form input:focus, form textarea:focus, form select:focus{
  border-color:#007bff; box-shadow:0 4px 12px rgba(0,123,255,.2); outline:none;
}
form textarea[name="condizioni"], form textarea[name="condizioni_particolari"], form textarea{
  padding:1rem; min-height:16rem;
}
textarea[name="condizioni"]{ font-family:inherit; font-size:2rem; color:#444; line-height:1.2; }
form input[type="submit"]:hover, form input[type="reset"]:hover, form button[type="submit"]:hover, form button[type="reset"]:hover{
  background:#006bb3; border-color:#006bb3; color:#fff;
}

/* Radio inline */
form input[type="radio"]{ display:inline-block; width:auto; margin:0 .2rem 0 0; vertical-align:middle; cursor:pointer; }
form input[type="radio"] + label{ display:inline-block; vertical-align:middle; font-size:1.9rem; font-weight:normal; margin-right:.6rem; cursor:pointer; }
form label input[type="radio"]{ margin-right:.3rem; }

/* Errori */
.errore, span.errore{ color:#cf3838; }
span.errore{ font-size:1.3rem; }

/* Campi wizard/password */
.field-with-toggle, .password-wrapper{ position:relative; }
.with-toggle, .password-wrapper input[type="password"], .password-wrapper input[type="text"]{ padding-right:40px; }
.togglePassword, .toggle-password{
  position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; padding:0; line-height:0;
}
.eye-icon{ width:20px; height:20px; fill:#555; display:block; }

/* -------------------------------------------------------------------------- */
/* Wizard (Registrazione / Login / Recupero) — unificato                      */
/* -------------------------------------------------------------------------- */
.wizard-container{
  max-width:420px; margin:25px auto; background:#fff; padding:30px 28px;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
.wizard-progress{ display:none; }
.wizard-field{ margin-bottom:14px; }
.wizard-field input[type="text"],
.wizard-field input[type="password"],
.wizard-field input[type="email"],
.wizard-container input[type="text"],
.wizard-container input[type="password"],
.wizard-container input[type="email"]{
  width:100%; padding:14px 16px; font-size:16px;
  border:1px solid #cfd2d6; border-radius:6px; transition:border .2s ease;
}
.wizard-field input:focus, .wizard-container input:focus{ outline:none; border-color:var(--c-blue-600); }
.wizard-field.forgot-wrap{  margin-top: 14px; }
.center-email{ text-align:center; margin-bottom:18px; }
.small{ font-size:13px; }
.title-auth, .page-title{ text-align:center; margin-top:40px; font-family:Arial, Helvetica, sans-serif; }
.subtitle-center{ text-align:center; margin:0 0 12px; }
.terms-note{ font-size:14px; color:#555; text-align:center; }
.signup-note{ text-align:center; padding-top: 0px; padding-bottom: 28px;}
.below-text { text-align:center; padding-top: 14px;}

.divider{ text-align:center; margin:15px 0; font-family:Arial, Helvetica, sans-serif; color:#999; }

/* Codice verifica */
#codeFields{ display:flex; justify-content:center; gap:8px; margin:20px 0; }
#codeFields input{
  width:56px; height:56px; text-align:center; font-size:22px; border:1px solid #cfd2d6; border-radius:6px;
}
            
#emailSubmit, #continuePass, #confirmCode, #resetPass {font-weight: bold;}          
/* Google wrap */
.google-wrap{ margin-top:20px; text-align:center; }
.google-logo{ width:20px; height:20px; vertical-align:middle; }
.google-text{ font-size:15px; }

/* -------------------------------------------------------------------------- */
/* Barra di ricerca                                                           */
/* -------------------------------------------------------------------------- */
#navRicerca{
  position:relative; margin:0 auto; text-align:center; width:50%;
  padding:5rem 3rem 2.5rem 0;
}
#navRicercaTesta{ width:200px; margin:0 auto; text-align:center; padding:10px 0; }
#navRicerca form{ position:relative; display:block; margin-bottom:1rem; }
#navRicerca form input[type="text"]{
  width:100%; margin:0; font-size:1.7rem; border-radius:8px; line-height:2.4rem;
  border:1px solid #ddd; padding:1rem 2rem 1rem 3.5rem; background:#f9f9f9;
  transition:all .3s; box-shadow:0 4px 8px rgba(0,0,0,.1);
}
#navRicerca form input[type="text"]:focus{
  border-color:#007bff; box-shadow:0 4px 12px rgba(0,123,255,.2); outline:none;
}
#navRicerca .search-icon{
  position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; pointer-events:none; font-size:1.4rem; color:#bbb; line-height:1;
}
@media (max-width:576px){
  #navRicerca{
    flex:0 0 100%; display:flex; justify-content:center; align-items:center;
    width:100%; margin:0 auto!important; padding:1rem 0!important;
  }
  #navRicerca form{ width:min(420px, 92vw); flex:0 1 auto; margin-bottom:1rem; }
  #navRicerca form input[type="text"]{ font-size:1.6rem; padding:.9rem 1rem .9rem 2.6rem; margin:0; }
  #navRicerca .search-icon{ left:.8rem; font-size:1.3rem; }
  .contenitore{ padding:0 12px; }
}

/* -------------------------------------------------------------------------- */
/* Procedure / risultati                                                      */
/* -------------------------------------------------------------------------- */
.risultati{ margin:0 auto; width:60%; font-size:1.7rem; background:transparent; }
.procedure{
  width:100%; margin:1rem 0 1.5rem 0; background:#f9f9f9; padding:1rem;
  border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,.1);
}
.procedure span{ font-size:1.3rem; color:#333; }
@media (max-width:767px){
  .risultati{ width:clamp(280px, 90vw, 1200px); margin:0 auto; }
}

/* -------------------------------------------------------------------------- */
/* Toolbar wizard                                                             */
/* -------------------------------------------------------------------------- */
.toolbar{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  display:flex; gap:12px; align-items:center; justify-content:flex-end;
  padding:12px 16px; border-top:1px solid #d6dee6;
  background:rgba(249,249,249,.95); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 -6px 16px rgba(0,0,0,.10); min-height:var(--toolbar-h);
  padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right));
}
.toolbar__status{
  margin-right:auto; display:flex; align-items:center; gap:.6rem;
  font-size:1.8rem; font-weight:700; color:#000; letter-spacing:.2px;
}
.status-ico{
  font-size:1.8rem; line-height:1; color:var(--c-green-500);
  filter:drop-shadow(0 0 2px rgba(34,197,94,.2)); position:relative;
}
.status-ico::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(34,197,94,.35); animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.35); }
  70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
@media (prefers-reduced-motion:reduce){ .status-ico::after{ animation:none; } }

                
/* === Bottoni toolbar === */
.tastoTB{
  width: auto;                 /* larghezza automatica */
  display: inline-block; 
  margin:0;
  padding:.9rem 1.6rem;
  font-size:1.6rem;
  border-radius:.6rem;
  border:2px solid #0275d8;
  background:#0275d8; color:#fff; font-weight:700; cursor:pointer;
  transition:transform .05s ease, box-shadow .2s ease, background .2s, border-color .2s;
  box-shadow:0 2px 6px rgba(2,117,216,.25);
}
.tastoTB:hover{
  background:#0262b3; border-color:#0262b3; box-shadow:0 4px 10px rgba(2,117,216,.30);
}
.tastoTB:active{ transform: translateY(1px); }

/* Varianti */
.tastoTB--ghost{
  background:#fff; color:#0275d8; border-color:#0275d8; box-shadow:none;
}
.tastoTB--ghost:hover{ background:#eef6ff; }

.tastoTB--accent{
  background:#22c55e; border-color:#22c55e;   /* verde wizard */
}
.tastoTB--accent:hover{
  background:#16a34a; border-color:#16a34a;   /* tonalità hover più scura */
}


/* Mobile */
@media (max-width: 768px){
  .toolbar{
    flex-wrap: wrap;           /* consente il ritorno a capo */
    justify-content: center;
    gap: 8px 10px;
  }

  /* Riga del testo */
  .toolbar__status{
    flex: 0 0 100%;            /* occupa l'intera larghezza */
    text-align: center;
    justify-content: center;   /* centra icona + testo */
    margin: 0 0 10px 0;        /* spazio sotto il testo */
  }

  /* Riga dei bottoni */
  .toolbar button{
    flex: 0 0 auto;            /* mantieni dimensioni naturali */
  }
}
                
    


/* -------------------------------------------------------------------------- */
/* Esperimenti / home                                                         */
/* -------------------------------------------------------------------------- */
.contenitoreTesto{ display:flex; justify-content:center; align-items:center; }
.testo-centrato{
  position:relative; width:695px; text-align:center; padding:6.5rem 0 4.5rem;
  font-size:var(--fz-35); font-weight:500;
}
.typing{
  display:inline-block; white-space:nowrap; overflow:hidden;
  animation:typing 2s steps(40,end), removeBorder 0s forwards 2s;
  border-right:2px solid black;
}
.cursor{ display:inline-block; animation:blink 1s step-end infinite; }
@keyframes typing{ from{width:0} to{width:100%} }
@keyframes removeBorder{ from{border-right:2px solid black} to{border-right:none} }
@keyframes blink{ 50%{opacity:0} }

@media (max-width:767px){
  .testo-centrato{ width:360px; font-size:1.85rem; padding:4.5rem 0 2.5rem; }
}

.spaziovuoto{ height:20vh; width:100%; }
.spaziovuoto5{ height:14vh; width:100%; }

.box-home{ display:flex; justify-content:space-between; flex-wrap:wrap; width:80%; margin:0 auto; align-items:flex-start; }
.box-homeg{
  display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center;
  width:100%; margin:0 auto; padding:20px; background:#f9f9f9; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,.1);
}
.textoboxhome{
  width:55%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; text-align:left; word-wrap:break-word;
}
.videoboxhome{
  width:45%; max-width:500px; aspect-ratio:1; display:flex; justify-content:center; align-items:center;
}
.videoboxhome video{ width:100%; height:auto; max-height:400px; }
@media (max-width:975px){
  .box-homeg{ flex-direction:column; align-items:center; }
  .textoboxhome, .videoboxhome{ width:100%; }
  .videoboxhome{ margin-top:20px; }
}
.immagineboxhome{ width:18%; display:flex; justify-content:center; align-items:center; }
.textoboxhome h2{ font-size:3rem; padding:1rem; }
.textoboxhome p{ font-size:1.8rem; }
.immaginehome{ width:100%; text-align:center; }
.immaginehome img{ width:100%; margin:0 auto; }

@media (max-width:975px){
  .box-home{ flex-direction:column; width:100%; align-items:center; }
  .textoboxhome, .videoboxhome, .immaginehome{ width:100%; margin:10px 0; }
  .textoboxhome h2{ font-size:1.5em; }
  .textoboxhome p{ font-size:1em; }
  .immagineboxhome{ margin-bottom:15px; }
}

/* Elenchi a righe / cards */
.contenitore-tabella{
  display:flex; flex-direction:column; gap:20px; padding:20px; max-width:800px; margin:0 auto;
  background:#f9f9f9; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,.1);
}
.riga{
  display:flex; align-items:center; justify-content:space-between; background:#fff; padding:20px;
  border-radius:10px; box-shadow:0 2px 5px rgba(0,0,0,.1); transition: transform .2s, box-shadow .2s;
}
.riga:hover{ transform:translateY(-5px); box-shadow:0 4px 15px rgba(0,0,0,.15); }
.icona{ width:100px; height:100px; }
.testo{ flex:1; margin-left:20px; color:#333; font-family:Arial,sans-serif; }
.testo strong{ font-size:18px; color:#333; }
.testo p{ font-size:14px; color:#666; }
.stato{ display:flex; flex-direction:column; align-items:center; font-size:14px; font-weight:bold; text-align:center; width:150px; }
.stato-verde{ color:#4CAF50; } .stato-giallo{ color:#FFC107; } .stato-arancione{ color:#FF5722; }

@media (max-width:600px){
  .riga{ flex-direction:column; align-items:center; }
  .testo{ text-align:center; margin-left:0; }
}

/* Immagine responsive multipla */
.immagineresponsive{ width:33%; float:left; padding:10px; font-size:1.4rem; height:auto; }
@media (max-width:768px){
  .immagineresponsive{ width:100%!important; float:none!important; padding:10px; height:auto; }
}

/* -------------------------------------------------------------------------- */
/* Fix layout sidebar                                                         */
/* -------------------------------------------------------------------------- */
html, body{ overflow-x:hidden; }
body.side-mounted #container,
body:has(.side-nav) #container{ width:100%!important; margin:0!important; padding-left:var(--side-w)!important; }
@media (max-width:992px){
  body.side-mounted #container,
  body:has(.side-nav) #container{ padding-left:0!important; }
}
.side-spacer{ display:none!important; }

/* -------------------------------------------------------------------------- */
/* Piccole utilità finali                                                     */
/* -------------------------------------------------------------------------- */
.mt-12{ margin-top:12px; } .mt-18{ margin-top:18px; } .mt-20{ margin-top:20px; } .mt-40{ margin-top:40px; }
.mb-18{ margin-bottom:18px; }
.text-right{ text-align:right; }

/* -------------------------------------------------------------------------- */
/* Animazioni usate altrove                                                   */
/* -------------------------------------------------------------------------- */
@keyframes typing{ 0%{width:0} 100%{width:100%} }
@keyframes removeBorder{ 0%{border-right:2px solid black} 100%{border-right:none} }
@keyframes blink{ 50%{opacity:0} }

/* Fine file consolidato */
/* ========================================================================== */