/* Stile ripreso da caffescuola.com (tema Astra): Inter + Plus Jakarta Sans, giallo #FFCD57, testata #F2F5F7. */
:root {
  --testo: #1E293B;
  --grigio: #67768E;
  --link: #060097;
  --giallo: #FFCD57;
  --giallo-scuro: #f2bd3a;
  --testata: #F2F5F7;
  --bordo: #dfe5ec;
  --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-titoli: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--testo); background: #fff; }
a { color: var(--link); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-titoli); font-weight: 600; line-height: 1.25; color: var(--testo); }
h1 { font-size: 2rem; margin: .4em 0 .5em; }
.contenitore { width: min(1200px, 100% - 32px); margin-inline: auto; }
.piccolo { font-size: .875rem; color: var(--grigio); }
.in-linea { display: inline; margin: 0; }
.centro { text-align: center; }

/* Testata */
.testata { background: var(--testata); }
.testata-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 92px; flex-wrap: wrap; padding: 8px 0; }
.logo img { display: block; height: 56px; width: auto; }
.menu { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.menu a, .link-bottone { color: var(--grigio); text-decoration: none; font-size: .95rem; font-family: var(--font); }
.menu a:hover, .link-bottone:hover { color: var(--testo); }
.link-bottone { background: none; border: 0; padding: 0; cursor: pointer; }

/* Pulsanti */
.bottone {
  display: inline-block; background: var(--giallo); color: var(--testo); border: 0; border-radius: 30px;
  padding: 10px 20px; font: 600 .97rem var(--font); text-decoration: none; cursor: pointer; text-align: center;
}
.bottone:hover { background: var(--giallo-scuro); }
.bottone-piccolo { padding: 8px 16px; font-size: .9rem; }
.bottone-grande { padding: 14px 30px; font-size: 1.05rem; }
.bottone-chiaro { background: #fff; border: 1px solid var(--bordo); }
.bottone-chiaro:hover { background: var(--testata); }
.menu .bottone, .menu .bottone:hover { color: var(--testo); }

/* Avvisi */
.avviso { margin: 18px 0; padding: 12px 16px; border-radius: 10px; border: 1px solid; }
.avviso-ok { background: #ecfdf3; border-color: #a6e9c0; }
.avviso-errore { background: #fff1f0; border-color: #f5b5b0; }

/* Vetrina */
.eroe { text-align: center; padding: 48px 0 28px; }
.eroe h1 { font-size: 2.4rem; max-width: 18em; margin-inline: auto; }
.sottotitolo { font-size: 1.15rem; color: var(--grigio); max-width: 36em; margin: 0 auto 18px; }
.vantaggi { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.vantaggi li::before { content: "✓"; color: #1aa260; font-weight: 700; margin-inline-end: 6px; }
.titolo-sezione { font-size: 1.4rem; margin: 40px 0 16px; }
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 28px 24px; margin-bottom: 40px; }
.scheda { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.scheda img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--testata); border-radius: 6px; box-shadow: 0 2px 10px rgba(30,41,59,.14); }
.scheda-meta { color: var(--grigio); font-size: .85rem; }
.scheda-titolo { font: 600 1.05rem var(--font-titoli); color: var(--testo); text-decoration: none; }
.scheda .bottone { align-self: flex-start; margin-top: 4px; }

/* Pagina libro */
.libro { display: grid; grid-template-columns: minmax(180px, 320px) 1fr; gap: 36px; margin: 36px 0; align-items: start; }
.libro-copertina { width: 100%; border-radius: 8px; box-shadow: 0 4px 18px rgba(30,41,59,.2); }
@media (max-width: 700px) { .libro { grid-template-columns: 1fr; } .libro-copertina { max-width: 260px; } }

/* Moduli */
.modulo-scatola { max-width: 420px; margin: 40px auto; padding: 28px; border: 1px solid var(--bordo); border-radius: 14px; }
.modulo-scatola.largo { max-width: 640px; }
.modulo-scatola h1 { margin-top: 0; font-size: 1.6rem; }
label { display: block; margin: 14px 0; font-size: .95rem; }
input[type=text], input[type=email], input[type=password], input[type=number], textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid #c8d1dc; border-radius: 8px; font: inherit; background: #fff; color: var(--testo);
}
input:focus, textarea:focus { outline: 2px solid var(--giallo); border-color: var(--giallo-scuro); }
.spunta { display: flex; gap: 10px; align-items: flex-start; }
.spunta input { margin-top: 5px; }

/* Piè di pagina */
.piede { background: var(--testata); margin-top: 60px; padding: 28px 0; }
.piede-in { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.piede-link { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.piede a { color: var(--grigio); font-size: .9rem; }
.lingue { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }
.lingue a { text-decoration: none; }
.lingue a.attiva { color: var(--testo); font-weight: 600; }

/* Admin */
.admin-menu { display: flex; gap: 18px; margin: 22px 0 6px; border-bottom: 1px solid var(--bordo); }
.admin-menu a { padding: 8px 2px; text-decoration: none; color: var(--grigio); }
.admin-menu a.attiva { color: var(--testo); font-weight: 600; border-bottom: 3px solid var(--giallo); }
.modulo-admin { max-width: 640px; }
.tabella { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .92rem; }
.tabella th, .tabella td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.tabella input[type=text], .tabella textarea { margin-top: 0; padding: 6px 8px; }
.ricerca { display: flex; gap: 10px; align-items: center; max-width: 420px; margin: 14px 0; }
.ricerca input { margin: 0; }
code { background: var(--testata); padding: 2px 6px; border-radius: 5px; font-size: .88em; word-break: break-all; }

/* Lettore */
.lettore-corpo { background: #3a4452; }
.barra-lettore {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--testata); padding: 8px 16px; border-bottom: 1px solid var(--bordo); flex-wrap: wrap;
}
.barra-lettore .indietro { text-decoration: none; color: var(--testo); font-weight: 600; }
.titolo-lettore { font: 600 .95rem var(--font-titoli); flex: 1; text-align: center; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.controlli { display: flex; align-items: center; gap: 12px; }
.controlli input { display: inline-block; width: 4.5em; margin: 0 4px; padding: 4px 6px; }
.controlli label { margin: 0; }
.lettore { width: min(820px, 100%); margin: 0 auto; padding: 12px 0 40px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.lettore.largo { width: min(1200px, 100%); }
.lettore .pagina { margin: 0 auto 10px; background: #fff; aspect-ratio: var(--ratio, 0.65); position: relative; scroll-margin-top: 62px; }
.lettore .pagina img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.lettore .messaggio { color: #fff; text-align: center; padding: 40px 16px; }
@media print { .lettore, .barra-lettore { display: none !important; } body::after { content: "—"; } }

/* Anteprima della filigrana (admin) */
.anteprime { display: flex; flex-wrap: wrap; gap: 24px; margin: 18px 0; }
.anteprime figure { margin: 0; flex: 1 1 320px; max-width: 460px; }
.anteprime img { width: 100%; border: 1px solid var(--bordo); box-shadow: 0 2px 10px rgba(30,41,59,.14); }
.anteprime figcaption { text-align: center; color: var(--grigio); font-size: .9rem; margin-top: 6px; }
td.filigrana select { display: block; width: 100%; min-width: 14em; max-width: 17em; margin: 0 0 4px; padding: 5px 6px; font: inherit; border: 1px solid #c8d1dc; border-radius: 6px; }
.ricerca select { padding: 8px 10px; font: inherit; border: 1px solid #c8d1dc; border-radius: 8px; background: #fff; }

/* Caricamento libri (admin) */
#scegli { cursor: pointer; }
#opzioni { margin: 18px 0; }
#barra { height: 14px; background: var(--testata); border-radius: 8px; overflow: hidden; margin: 16px 0 6px; max-width: 640px; }
#barra-piena { height: 100%; width: 0; background: var(--giallo); transition: width .2s; }
#errori { color: #b3261e; font-size: .9rem; padding-inline-start: 18px; }
#gruppi select { margin: 0; padding: 6px 8px; font: inherit; border: 1px solid #c8d1dc; border-radius: 6px; max-width: 22em; }
#gruppi .attenzione { color: #b3261e; font-size: .85rem; }