/* ========================================= */
/* BASE & GLOBALS (Stili Core dell'Applicazione) */
/* ========================================= */
:root {
 /* PALETTE PREMIUM – DIGITAL BRAND */

 /* Brand */
 --primary-brand: #e6007e;        /* Magenta corporate – focus & CTA */
 --primary-deep: #b00061;         /* Hover / stati attivi */
 --primary-light: #ff4da6;        /* Highlight, badge, accent */
 --brand-gradient: linear-gradient(135deg, #e6007e 0%, #b00061 100%);

 /* Testi */
 --text-primary: #3c3c3b;         /* Testo principale */
 --text-secondary: #5a5a58;       /* Testo secondario */
 --text-muted: #8a8a87;           /* Hint, label, microcopy */
 --text-inverse: #ffffff;         /* Testo su primario */

 /* Secondario / Struttura */
 --secondary-brand: #3c3c3b;      /* Header, footer, elementi solidi */
 --secondary-light: #6a6a68;
 --secondary-dark: #2a2a29;

 /* Neutri UI */
 --bg-body: #f2f3f5;
 --surface: #ffffff;
 --surface-alt: #f8f9fa;

 --light-slate: #e9ecef;
 --mid-slate: #adb5bd;
 --dark-slate: #212529;

 /* Layout */
 --header-height: 60px;
 --footer-height: 80px;

 /* Radius & Shadow */
 --radius-main: 12px;
 --radius-card: 16px;
 --radius-pill: 50px;

 --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.04);
 --shadow-float: 0 10px 30px rgba(230, 0, 126, 0.25);

 /* Stati */
 --success-color: #00c853;
 --warning-color: #ff9100;
 --error-color: #ff3d00;

 /* File Type Colors */
 --color-pdf: #e63946;
 --color-ppt: #f59e0b;
 --color-zip: #6366f1;
 --color-img: #10b981;

 /* Rating */
 --color-star: #FFC107;
 --color-star-inactive: #e0e0e0;

 /* Sponsor Levels */
 --color-platinum: #E5E4E2;
 --color-gold: #FFD700;
 --color-silver: #C0C0C0;


}



body {
   font-family: 'Dax', sans-serif;
   background-color: var(--bg-body);
   color: var(--dark-slate);
   margin: 0;
   padding-bottom: var(--footer-height);
   padding-top: 0; /* Header è inglobato nella Home, padding solo per il contenuto */
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}

/* --- DESKTOP MAX WIDTH & CENTERING --- */
/* Applicato a Hero e Main Content per centrare e limitare la larghezza */
@media (min-width: 992px) {
   .home-max-width {
       max-width: 1200px; /* MODIFICATO: Larghezza più generosa per dashboard */
       margin: 0 auto; /* Centra il contenuto */
   }
}

/* --- GLOBAL COMPONENTS --- */


.logo-user-profile{ width:250px;}

/* Header e Componenti Fixed (Colore e Stile Home) */
.app-header {
   height: var(--header-height);
   background: var(--primary-brand);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   box-shadow: 0 1px 0 rgba(255,255,255,0.2);
   position: fixed;
   top: 0; left: 0; right: 0;
   z-index: 1030;
   display: flex; align-items: center; justify-content: space-between;
   padding: 0 20px;
}

.header-brand {
   font-weight: 700; font-size: 1.2rem; color: var(--surface);
   letter-spacing: -0.5px;
}

.btn-icon {
   width: 40px; height: 40px; border-radius: 8px;
   background: transparent; border: none; color: rgba(255, 255, 255, 0.9);
   display: flex; align-items: center; justify-content: center;
   font-size: 1.4rem; transition: all 0.2s; position: relative;
}

.btn-icon:active {
   background: rgba(255, 255, 255, 0.2);
   color: var(--surface);
}

.badge-dot {
   position: absolute;
   top: 5px; right: 8px;
   width: 14px; height: 14px;
   background-color: #fff;
   border: 2px solid var(--primary-brand);
   border-radius:50px;
   animation: pulse 1.2s infinite;
}
@keyframes pulse {
   0% {
      transform: scale(1);
      opacity: 1;
   }
   50% {
      transform: scale(1.2);
      opacity: 0.8;
   }
   100% {
      transform: scale(1);
      opacity: 1;
   }
}

/* Footer QR Button (Global) */
.fixed-footer {
   position: fixed; bottom: 0; left: 0; right: 0;
   height: var(--footer-height);
   background: rgba(255,255,255,0.9);
   backdrop-filter: blur(5px);
   display: flex; align-items: center; justify-content: center;
   z-index: 1020; pointer-events: none;
}

.btn-qr-round {
   pointer-events: auto;
   width: 60px; height: 60px; border-radius: 50%;
   background: var(--primary-brand);
   border: 4px solid var(--surface);
   color: #fff;
   display: flex; align-items: center; justify-content: center;
   font-size: 1.8rem; box-shadow: 0 6px 20px rgba(0, 174, 239, 0.4);
   transition: transform 0.2s; margin-bottom: 10px;
   padding-top:10px;
}

.btn-qr-round:active { transform: scale(0.95); }

.modal-content {
   border-radius: var(--radius-main); border: none;
   box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.btn-cta-main {
   background: var(--primary-brand);
   color: white;
   border: none;
   border-radius: var(--radius-main);
   padding: 14px;
   font-weight: 600;
   width: 100%;
   display: flex; align-items: center; justify-content: center;
   gap: 10px;
   box-shadow: 0 4px 12px rgba(0, 174, 239, 0.25);
}

.app-card {
   background: var(--surface);
   border-radius: var(--radius-main);
   padding: 20px;
   box-shadow: var(--shadow-soft);
   border: 1px solid rgba(0,0,0,0.03);
   margin-bottom: 16px;
}

/* --- MENU OFFCANVAS STYLES (Global Component) --- */
.offcanvas {
   border-top-right-radius: var(--radius-main);
   border-bottom-right-radius: var(--radius-main);
   background: var(--surface);
   color: var(--dark-slate);
   width: 85%; max-width: 320px;
   box-shadow: 4px 0 20px rgba(0,0,0,0.05);
}

.profile-area-menu {
   background: transparent;
   padding: 24px;
   border-bottom: 1px solid  #f1f1f1;
   position: relative;
}

.user-profile-widget { display: flex; align-items: center; gap: 15px; width: 150px;}
.user-avatar { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--primary-brand); padding: 2px; }
.user-info h6 { font-weight: 700; margin: 0; color: var(--dark-slate); font-size: 1.05rem; }
.user-info span { font-size: 0.8rem; color: var(--primary-deep); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.btn-close-custom { position: absolute; top: 10px; right: 10px; opacity: 0.7; transition: opacity 0.2s; padding: 8px; }

.menu-scroll-area { overflow-y: auto; flex-grow: 1; padding: 10px 0; }
.menu-label { padding: 20px 24px 8px 24px; font-size: 0.75rem; font-weight: 700; color: var(--primary-brand); text-transform: uppercase; letter-spacing: 1px; }

.menu-item {
   padding: 12px 24px; color: var(--mid-slate); text-decoration: none;
   font-size: 1rem; font-weight: 400; display: flex; align-items: center;
   cursor: pointer; transition: all 0.2s; border-left: 3px solid transparent;
}
.menu-item-content { display: flex; align-items: center; flex-grow: 1; }

.menu-item:hover, .menu-item.active { background: var(--primary-light); color: #fff; border-left-color: var(--primary-brand); }
.menu-item i { width: 24px; font-size: 1.2rem; margin-right: 12px; text-align: center; color: #8fa6b6; transition: color 0.2s; }
.menu-item:hover i, .menu-item.active i { color: #fff; }
.menu-item .chevron { margin-left: auto; font-size: 0.8rem; transition: transform 0.2s; }

.submenu { background: #fcfcfc; display: none; padding: 5px 0; border-top: 1px solid var(--light-slate); border-bottom: 1px solid var(--light-slate); }
.submenu.show { display: block; }
.submenu-item { padding: 10px 24px 10px 64px; color: var(--mid-slate); text-decoration: none; display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.submenu-item:hover { color: var(--primary-brand); background: rgba(0,0,0,0.01); }
.submenu-item i { font-size: 1rem; color: #adb5bd; }
.submenu-item.active {font-weight: bold !important; color: var(--primary-brand) !important;}

.menu-footer { padding: 24px; border-top: 1px solid var(--light-slate); }
.btn-logout { width: 100%; padding: 12px; border: 1px solid #ffe3e3; color: #e03131; background: #fff5f5; border-radius: var(--radius-main); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;}
.btn-notif-menu {
   padding: 12px;  color: #fff;
   background: var(--primary-brand); border-radius: var(--radius-main);
   font-weight: 600; display: flex; align-items: center; justify-content: center;
   gap: 8px; text-decoration: none; transition: all 0.2s;
   position: relative; /* Posizionamento relativo per il badge */
}
.btn-notif-menu:hover { background: var(--primary-brand); color: white; }

.badge-menu-dot {
   position: absolute; top: 10px; right: 10px;
   width: 8px; height: 8px; background-color: #e63946;
   border: 2px solid white; border-radius: 50%;
}
/* Concierge WhatsApp */
.concierge-card {
   background: linear-gradient(135deg, #128C7E, #25D366) !important;
   color: #fff; border: none;
   padding: 30px 24px;
   text-align: center;
   margin-top: 30px;
   border-radius: var(--radius-main);
}
.concierge-card .card-title { color: #fff; justify-content: center; }
.concierge-card .card-title i { color: #fff; }
.btn-whatsapp {
   background: #fff; color: #128C7E; border: none; width: 100%;
   padding: 14px; border-radius: var(--radius-main); font-weight: 800;
   display: flex; align-items: center; justify-content: center; gap: 8px;
   box-shadow: 0 4px 15px rgba(0,0,0,0.15);
   text-decoration: none; margin-top: 15px;
}
@media (min-width: 992px) {
   .corpo-pagina {
       max-width: 1200px;
       margin: 0 auto;
   }
}

/* Login Button */
.btn-submit {
  background: var(--ai-gradient);
  color: white;
  border-radius: var(--radius-main);
  padding: 14px;
  font-weight: 700;
  width: 100%;
  border: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

.btn-submit:hover {

  opacity:0.7;
  color:white;
}

.btn-submit:active {
  transform: scale(0.98);
}