/* Schermate dell'applicazione. Estende stile.css con la scocca dell'app e i componenti della dashboard. */

/* ---------- accesso e registrazione ---------- */
.accesso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

.vetrina {
  background: linear-gradient(155deg, #024E70 0%, var(--navy) 55%, var(--navy-fondo) 100%);
  color: #CFE1EA; padding: 48px 56px; display: flex; flex-direction: column; gap: 34px;
}
.vetrina a.marchio img { height: 40px; width: auto; display: block; }
.vetrina .frase { font-size: clamp(26px, 2.8vw, 36px); font-weight: 750; color: #fff; letter-spacing: -.03em; line-height: 1.18; max-width: 18em; }
.vetrina .sotto { color: #A9C6D6; max-width: 30rem; }
.vetrina .prova { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.vetrina .riquadro { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.vetrina .riquadro .et { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8FB3C7; }
.vetrina .riquadro .testo { color: #E7F1F6; font-size: 15px; line-height: 1.55; }
.vetrina .firma { font-size: 13px; color: #7FA1B8; }

.modulo { background: var(--bianco); padding: 48px 56px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.modulo .interno { width: 100%; max-width: 26rem; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.modulo h1 { font-size: 30px; font-weight: 750; letter-spacing: -.03em; }
.modulo .aiuto { color: var(--tenue); font-size: 15px; }

.campo-modulo { display: flex; flex-direction: column; gap: 7px; }
.campo-modulo label { font-size: 13px; font-weight: 650; color: var(--navy); }
.campo-modulo input, .campo-modulo select {
  height: 46px; border: 1px solid var(--linea-forte); border-radius: 11px; padding: 0 14px;
  font: inherit; font-size: 15px; color: var(--graphite); background: var(--bianco);
}
.campo-modulo input:focus, .campo-modulo select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.campo-modulo .indizio { font-size: 12.5px; color: var(--tenue); }
.campo-modulo.doppio { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }

.btn.largo { width: 100%; }
.divisore { display: flex; align-items: center; gap: 14px; color: var(--tenue); font-size: 13px; }
.divisore::before, .divisore::after { content: ""; height: 1px; background: var(--linea); flex: 1; }

.sso { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border: 1px solid var(--linea-forte);
       border-radius: 11px; font-weight: 600; color: var(--navy); background: var(--nebbia); }
.sso:hover { border-color: var(--teal); color: var(--navy); }
.sso svg { width: 18px; height: 18px; color: var(--teal); }

.riga-fine { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--tenue); flex-wrap: wrap; }
.avviso-prova { background: var(--crema); color: var(--oro-cupo); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; font-weight: 600; }

.passi-registrazione { display: flex; gap: 8px; }
.passi-registrazione span { flex: 1; height: 4px; border-radius: 999px; background: var(--linea); }
.passi-registrazione span.fatto { background: var(--teal); }

/* ---------- scocca dell'app ---------- */
.scocca { display: grid; grid-template-columns: 246px minmax(0,1fr); min-height: 100vh; background: var(--avorio); }
.laterale { background: var(--bianco); border-right: 1px solid var(--linea); padding: 20px 16px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; }
.laterale .marchio img { height: 30px; width: auto; display: block; }
.laterale nav { display: flex; flex-direction: column; gap: 2px; }
.laterale .gruppo { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tenue); padding: 10px 10px 6px; }
.laterale a.voce { color: var(--testo); text-decoration: none; }
.laterale a.voce:hover { background: var(--nebbia); }
.laterale .fondo { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.profilo { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--linea); }
.profilo .cerchio { width: 34px; height: 34px; border-radius: 50%; background: var(--sky); color: var(--navy); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.profilo .nome { font-size: 14px; font-weight: 650; color: var(--navy); }
.profilo .corso { font-size: 12px; color: var(--tenue); }

.area { padding: 26px 34px 48px; display: flex; flex-direction: column; gap: 22px; }
.barra-alta { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.saluto h1 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 750; letter-spacing: -.03em; }
.saluto p { color: var(--tenue); margin-top: 4px; }
.appello { background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.appello .et { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.appello .data { font-size: 17px; font-weight: 700; color: var(--navy); }
.appello .resto { font-size: 12.5px; color: var(--tenue); }

.pannelli { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pila { display: flex; flex-direction: column; gap: 20px; }

.carta { background: var(--bianco); border: 1px solid var(--linea); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.carta .testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.carta .et { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.carta h2 { font-size: 21px; font-weight: 700; }
.carta h3 { font-size: 16px; font-weight: 650; }
.carta p { color: var(--tenue); font-size: 14.5px; }
.carta .vedi { font-size: 13.5px; font-weight: 600; color: var(--teal); }

.sessione { background: linear-gradient(140deg, var(--sky) 0%, var(--ice) 58%, var(--bianco) 100%); border-color: var(--linea-forte); }
.sessione .titolo { font-size: 24px; font-weight: 750; color: var(--navy); letter-spacing: -.025em; }
.sessione .dettaglio { display: flex; align-items: center; gap: 12px; }
.sessione .icona-tonda { width: 42px; height: 42px; border-radius: 12px; background: var(--bianco); display: grid; place-items: center; color: var(--teal); }
.sessione .icona-tonda svg { width: 20px; height: 20px; }

.azioni-rapide { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.azione { background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.azione:hover { transform: translateY(-2px); box-shadow: var(--ombra); border-color: var(--linea-forte); }
.azione .icona { margin-bottom: 2px; }
.azione .tit { font-size: 15px; font-weight: 650; color: var(--navy); }
.azione .sotto { font-size: 12.5px; color: var(--tenue); }

.obiettivi { display: flex; flex-direction: column; gap: 10px; }
.obiettivo { display: flex; align-items: center; gap: 12px; border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; }
.obiettivo .segno { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--linea-forte); flex: none; display: grid; place-items: center; }
.obiettivo.fatto .segno { background: var(--teal); border-color: var(--teal); color: #fff; }
.obiettivo .testo { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.obiettivo .meta { font-size: 12.5px; color: var(--tenue); }
.obiettivo .freccia { margin-left: auto; color: var(--linea-forte); }

.fascia-claim { background: var(--navy); border-radius: 16px; padding: 18px 22px; display: flex; align-items: center; gap: 14px; }
.fascia-claim img { height: 30px; width: auto; }
.fascia-claim p { color: #E7F1F6; font-weight: 600; font-size: 15.5px; }
.fascia-claim .marca { margin-left: auto; font-size: 13px; color: #8FB3C7; }

@media (max-width: 1080px) {
  .pannelli { grid-template-columns: minmax(0,1fr); }
  .azioni-rapide { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .accesso { grid-template-columns: minmax(0,1fr); }
  .vetrina { padding: 32px 28px; gap: 24px; }
  .modulo { padding: 32px 28px; }
  .scocca { grid-template-columns: minmax(0,1fr); }
  .laterale { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px; border-right: 0; border-bottom: 1px solid var(--linea); }
  .laterale nav, .laterale .fondo { display: none; }
  .area { padding: 22px 20px 40px; }
}

/* esiti dei moduli */
[data-esito] { border-radius: 10px; padding: 11px 14px; font-size: 13.5px; font-weight: 600; }
[data-esito][data-tipo="errore"] { background: #FBEDEA; color: #A8422F; }
[data-esito][data-tipo="nota"] { background: var(--ice); color: var(--blue-cupo); }
.conferma { display: flex; flex-direction: column; gap: 14px; }
.conferma .bollo { width: 52px; height: 52px; border-radius: 16px; background: #E4F4EB; color: #15754A; display: grid; place-items: center; }
.conferma h1 { font-size: 27px; }
.conferma .indirizzo { font-weight: 700; color: var(--navy); }
button[disabled] { opacity: .6; cursor: default; }