/* ==========================================================================
   Notartel - Portale dei Servizi
   Foglio di stile COMUNE a tutte le pagine (login, password, errori WebSEAL)
   Struttura: banner avviso, barra logo, pannello blu (aside), pannello form,
   campi, pulsante principale, footer, responsive.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #fff; color: #696969; min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Banner avviso password ---------- */
.header-banner { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 12px 20px; background: #fff; border-bottom: 1px solid #014482; font-size: 13px; color: #696969; }
.header-banner svg { flex-shrink: 0; }

/* ---------- Barra logo ---------- */
.top-header { display: flex; align-items: center; height: 60px; padding: 0 20px; background: #fff; }
.top-header .logo img { display: block; height: 40px; width: auto; }

/* ---------- Layout principale ---------- */
.main { flex: 1; display: flex; position: relative; overflow: hidden; }

/* Pannello sinistro: la sfumatura blu -> verde acqua e' disegnata dall'SVG .bg-shape */
.aside { position: relative; width: 55%; min-height: 480px; display: flex; flex-direction: column; justify-content: center; padding: 48px 56px; overflow: hidden; background: transparent; }
.aside .bg-shape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.aside .bg-shape svg { width: 100%; height: 100%; display: block; }
.aside-content { position: relative; z-index: 1; }
.aside .welcome-text { display: flex; flex-direction: column; gap: 12px; }
.aside .welcome-text .subtitle { font-family: 'Titillium Web', sans-serif; font-weight: 400; font-size: 14px; color: #C0E2E1; }
.aside .welcome-text h1 { font-family: 'Titillium Web', sans-serif; font-weight: 600; font-size: 40px; line-height: 1.2; color: #fff; }
.aside .welcome-text .desc { font-family: 'Titillium Web', sans-serif; font-weight: 400; font-size: 16px; color: #CFDCED; margin-top: 6px; }

/* Pannello destro */
.form-panel { width: 45%; display: flex; align-items: flex-start; justify-content: center; padding: 46px 40px 48px; position: relative; z-index: 2; background: #fff; }
.login-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 22px; }
.login-form > h2, .login-form > h1 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 32px; line-height: 1.2; color: #014482; }
.login-form .form-subtitle { font-size: 15px; color: #686868; margin-top: -6px; }

/* ---------- Campi ---------- */
.field-group { display: flex; flex-direction: column; gap: 8px; }
.field-group label { font-family: 'Titillium Web', sans-serif; font-weight: 600; font-size: 14px; color: #014482; }
.field-group .input-wrapper { display: flex; align-items: center; min-height: 42px; border: 1px solid #ADB6BD; border-radius: 4px; padding: 8px 12px; background: #fff; gap: 6px; }
.field-group .input-wrapper:focus-within { border-color: #008490; }
.field-group input { flex: 1; min-width: 0; border: none; outline: none; font-family: 'Titillium Web', sans-serif; font-size: 16px; color: #333; background: transparent; }

/* ---------- Pulsante principale ---------- */
.btn-login { display: block; width: 100%; padding: 14px; background: #008490; color: #fff; border: none; border-radius: 10px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; text-align: center; text-decoration: none; cursor: pointer; transition: background 0.2s; }
.btn-login:hover { background: #006E78; }

/* ---------- Footer ---------- */
.footer { background: #E9EDF0; border-top: 1px solid #DBE0E6; padding: 30px 40px 20px; }
.footer .cookie-notice { max-width: 1056px; margin: 0 auto 20px; font-size: 13px; color: #696969; line-height: 1.5; }
.footer-bottom { max-width: 1056px; margin: 0 auto; display: flex; align-items: center; gap: 30px; }
.footer-company { display: flex; flex-direction: column; gap: 3px; }
.footer-company .name { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; color: #014482; }
.footer-company .address { font-size: 13px; color: #696969; }
.footer-social { display: flex; align-items: center; gap: 10px; }
.footer-social .social-label { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; color: #014482; margin-right: 2px; }
.social-icon { width: 34px; height: 34px; background: #014482; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background 0.2s; }
.social-icon:hover { background: #008490; }
.social-icon svg { fill: #fff; width: 16px; height: 16px; }
.footer-logo { margin-left: auto; }
.footer-logo img { display: block; height: 33px; width: auto; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .header-banner { justify-content: flex-start; font-size: 12px; padding: 10px 20px; }
  .main { flex-direction: column; }
  .aside { display: none; }
  .form-panel { width: 100%; padding: 24px 20px 40px; }
  .login-form { max-width: none; gap: 20px; }
  form.login-form { max-width: 300px; }
  .login-form > h2, .login-form > h1 { font-size: 28px; }
  .footer { padding: 24px 16px 20px; }
  .footer .cookie-notice { text-align: center; font-size: 12px; }
  .footer-bottom { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "company company" "logo social"; align-items: center; gap: 24px 12px; }
  .footer-company { grid-area: company; }
  .footer-social { grid-area: social; }
  .footer-logo { grid-area: logo; margin-left: 0; }
}