/* Quiz 3ª PIAs — home
   Compiti in arrivo e griglia delle materie. */

/* ---------- compiti in arrivo ---------- */
.compito {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  background: var(--evidenziatore); color: #3A2E00;
  border-radius: var(--raggio); padding: 12px 14px; margin-bottom: 10px;
}
.compito-data { text-align: center; font-family: var(--font-titoli); line-height: 1; }
.compito-data b { display: block; font-size: 1.6rem; font-weight: 700; }
.compito-data span { font-size: .8rem; text-transform: lowercase; }
.compito-testo { font-size: .95rem; }
.compito-testo b { font-family: var(--font-titoli); font-weight: 600; font-size: 1.05rem; display: block; }
.compito .btn { background: #3A2E00; color: var(--evidenziatore); padding: 10px 14px; }
.compito-giorni { font-size: .85rem; opacity: .8; }

/* ---------- griglia materie ---------- */
.griglia-materie { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card-materia {
  --c: var(--petrolio); --c-rgb: 47,111,126;
  position: relative; border: 0; text-align: left;
  background: var(--foglio); border-radius: var(--raggio);
  padding: 14px 14px 12px; min-height: 124px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--ombra);
  border-top: 6px solid var(--c);
  transition: transform .12s;
}
.card-materia:active { transform: translateY(2px); }
.card-materia .icona {
  width: 40px; height: 40px; border-radius: 12px; color: var(--c);
  background: rgba(var(--c-rgb, 47,111,126), .14);
  display: grid; place-items: center;
}
.card-materia .icona svg { width: 24px; height: 24px; }
.card-materia .nome { font-family: var(--font-titoli); font-weight: 600; font-size: 1.1rem; line-height: 1.15; margin-top: 2px; }
.card-materia .dett { font-size: .85rem; color: var(--inchiostro-2); margin-top: auto; }
.card-materia .dett b { color: var(--papillon); font-weight: 700; }
.card-materia.vuota { opacity: .55; box-shadow: none; border-top-style: dashed; }
.card-materia .bollino {
  position: absolute; top: 10px; right: 10px;
  background: var(--evidenziatore); color: #3A2E00;
  font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 99px;
  font-family: var(--font-titoli);
}

/* collegamento alla redazione (solo sul telefono con PHP) */
.link-redazione { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--foglio); color: var(--materia); font-weight: 700; text-decoration: none; box-shadow: var(--ombra); }
.link-redazione .sprite { width: 18px; height: 18px; fill: currentColor; }