/* Box «Oggi gratis» (/box) incorporato nei siti del gruppo: tema chiaro o scuro scelto da chi lo incorpora. */
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url("../fonts/fredoka-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap; src: url("../fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("../fonts/nunito-latin-700-normal.woff2") format("woff2"); }

.tema-chiaro { --bg: #FFFFFF; --tinta: #F2FBF9; --bordo: #CDEDE6; --testo: #0E4D4F; --testo-2: #4A6E6F;
  --etichetta: #FFF4D6; --etichetta-testo: #6B4E00; --link: #C85509; }
.tema-scuro { --bg: #103133; --tinta: #143B3D; --bordo: #1E4A4C; --testo: #E6F5F2; --testo-2: #9CC0BD;
  --etichetta: #3A3420; --etichetta-testo: #FFC94A; --link: #FFB27A; }

*, *::before, *::after { box-sizing: border-box; }
/* pagina trasparente: fuori dagli angoli arrotondati si vede il sito che incorpora il box */
html, body { margin: 0; background: transparent; color: var(--testo);
  font: 400 15px/1.35 "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }

/* riempie sempre l'iframe (altezza fissa scelta da chi incorpora): il link finale resta in fondo */
/* 1px di margine: con colonne larghe 254,48px l'iframe arrotonda a 255 e taglierebbe il bordo destro */
body { padding: 1px; }
.box { min-height: calc(100vh - 2px); display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--bordo); border-radius: 14px; overflow: hidden; }
.box-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: var(--tinta); border-bottom: 1px solid var(--bordo); }
.box-testa img { display: block; height: 26px; width: auto; }
.box-testa span { font: 600 16px/1 "Fredoka", "Nunito", system-ui, sans-serif; }

.box-elenco { list-style: none; margin: 0; padding: 0; }
.box-elenco li + li { border-top: 1px solid var(--bordo); }
.box-elenco a { display: grid; gap: 3px; padding: 10px 14px; }
.box-elenco a:hover, .box-elenco a:focus-visible { background: var(--tinta); outline: none; }
.box-etichetta { justify-self: start; padding: 2px 8px; border-radius: 999px; background: var(--etichetta);
  color: var(--etichetta-testo); font-size: 12px; font-weight: 700; }
.box-titolo { font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.box-meta { color: var(--testo-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box-vuoto { margin: 0; padding: 14px; color: var(--testo-2); }
.box-tutte { display: block; margin-top: auto; padding: 11px 14px; border-top: 1px solid var(--bordo); color: var(--link);
  font-weight: 700; text-align: center; }
.box-tutte:hover { text-decoration: underline; }