/* =============================================================================
   L'ACCHIANATA DI SANTA ROSALIA
   assets/css/attestato.css - Diplomi e verifica pubblica
   Caricato con $css_extra = ['attestato.css'];
   ============================================================================= */

/* --- Scheda di un diploma ------------------------------------------------- */

.diploma{
  background:var(--sfondo-alt);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  padding:26px;
  margin-bottom:26px;
  box-shadow:var(--ombra);
}
.diploma--ottenuto{border-color:var(--oro)}
.diploma--atteso{opacity:.92}

.diploma__testata{
  display:flex;align-items:center;gap:16px;
  margin-bottom:20px;
}
.diploma__testata h2{margin:0;font-size:1.4rem}
.diploma__testata .piccolo{margin:0}

.diploma__icona{
  width:52px;height:52px;flex:0 0 52px;border-radius:50%;
  display:grid;place-items:center;font-size:1.4rem;
  background:var(--rosa-chiaro);color:var(--bordeaux);
}
.diploma--ottenuto .diploma__icona{background:var(--oro);color:var(--notte)}

/* --- Anteprima ------------------------------------------------------------ */

.diploma__anteprima{
  border:1px solid var(--bordo);
  border-radius:var(--raggio-piccolo);
  overflow:hidden;
  background:var(--avorio);
  margin-bottom:20px;
}
.diploma__anteprima img{width:100%;display:block}

/* --- Dati ----------------------------------------------------------------- */

.diploma__dati{
  display:grid;gap:12px;margin:0 0 22px;
}
@media (min-width:560px){
  .diploma__dati{grid-template-columns:1fr 1fr}
}
.diploma__dati div{
  display:flex;flex-direction:column;gap:2px;
  padding-bottom:10px;border-bottom:1px dashed var(--bordo);
}
.diploma__dati dt{
  font-size:.74rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;
  color:var(--testo-morbido);
}
.diploma__dati dd{margin:0;font-size:1.02rem;font-weight:500}
.diploma__dati code{
  background:var(--avorio-scuro);
  padding:2px 8px;border-radius:4px;
  font-size:.95rem;letter-spacing:.06em;
}

/* --- Azioni --------------------------------------------------------------- */

.diploma__azioni{display:flex;flex-wrap:wrap;gap:11px}
.diploma__azioni .bottone{flex:1 1 auto;min-width:200px}

.diploma__nota{margin:16px 0 0}

.diploma__manca{
  padding:14px 16px;margin-bottom:18px;
  background:var(--avorio);
  border-left:4px solid var(--rosa);
  border-radius:0 var(--raggio-piccolo) var(--raggio-piccolo) 0;
  color:var(--testo-morbido);
}

/* La barra di avanzamento arriva da tappa.css; qui serve in tema chiaro */
.pagina-attestati .barra{background:var(--avorio-scuro);margin:0 0 18px}

/* --- Verifica pubblica ---------------------------------------------------- */

.modulo-verifica{margin-bottom:28px}

.esito{
  border-radius:var(--raggio);
  padding:26px;text-align:center;
  border:1px solid var(--bordo);
  background:var(--sfondo-alt);
}
.esito > i{font-size:2.8rem;display:block;margin-bottom:12px}
.esito h2{margin-bottom:.8em}

.esito--valido{border-color:#2F7D4F;background:#F3F9F5}
.esito--valido > i{color:#2F7D4F}
.esito--valido .diploma__dati{text-align:left;margin-bottom:0}

.esito--ignoto{border-color:var(--avviso);background:#FFFAEE}
.esito--ignoto > i{color:var(--avviso)}
.esito--ignoto p{color:var(--testo-morbido);margin:0}

.esito code{
  background:var(--avorio-scuro);
  padding:1px 6px;border-radius:4px;
}