/* 黑板报 La bacheca (bacheca.php, admin-bacheca.php).
   La testata è una lavagna (ardesia verde, cornice di legno, gesso);
   sotto, le novità giorno per giorno su carte chiare. */

.bb-pagina { max-width: 860px; margin: 0 auto; padding: 1.5rem 16px 2.5rem; }

/* --- La lavagna --- */
.bb-lavagna {
    position: relative;
    margin-bottom: 1.2rem;
    padding: 1.4rem 1.6rem 1.2rem;
    color: #f4f1e8;
    text-align: center;
    background:
        radial-gradient(ellipse at 20% 15%, rgba(255, 255, 255, .07), transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(255, 255, 255, .05), transparent 50%),
        linear-gradient(160deg, #2c4a3d, #1e3a30 60%, #1a332a);
    border: 10px solid #8a5a3b;
    border-radius: 6px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25), inset 0 0 28px rgba(0, 0, 0, .35), var(--ombra-morbida);
}
.bb-lavagna::after {
    /* il portagessetti */
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -10px;
    height: 6px;
    background: #6e4529;
    border-radius: 0 0 4px 4px;
}
.bb-lavagna h1 { margin: 0; font-size: 1.9rem; font-weight: 700; letter-spacing: .02em; }
.bb-lavagna h1 .testo-cinese { font-family: var(--font-cinese-display); font-size: 2.3rem; color: #fffdf5; text-shadow: 0 0 1px rgba(255, 255, 255, .6); }
.bb-titolo { margin-left: .3rem; color: #e6efe9; }
.bb-pinyin { margin: .1rem 0 .5rem; font-size: .92rem; color: #b9d8c8; font-style: italic; }
.bb-sotto { max-width: 60ch; margin: 0 auto; font-size: .97rem; color: #dfe8e2; }
.bb-admin { margin: .7rem 0 0; }
.bb-admin a { color: #f3d36b; font-weight: 600; text-decoration: none; }
.bb-admin a:hover, .bb-admin a:focus-visible { text-decoration: underline; }

/* --- Livelli --- */
.bb-livelli { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 1.4rem 0 1rem; }
.bb-livelli a { padding: .25rem .8rem; color: var(--c-giada-scuro); text-decoration: none; background: #fff; border: 1px solid var(--c-bordo); border-radius: 999px; }
.bb-livelli a.attivo { color: #fff; background: var(--c-giada); border-color: var(--c-giada); }

/* --- Messaggi --- */
.bb-messaggio {
    margin: 0 0 .8rem;
    padding: .9rem 1.1rem;
    background: #fff;
    border: 1px solid var(--c-bordo);
    border-left: 4px solid var(--c-giada);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(16, 36, 29, .05);
}
.bb-sistema { border-left-color: #5a7a9a; }
.bb-messaggio header { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .82rem; color: var(--c-pietra); }
.bb-firma { font-weight: 600; }
.bb-messaggio h3 { margin: .3rem 0 .4rem; font-size: 1.12rem; font-weight: 700; }
.bb-testo { font-size: .97rem; line-height: 1.55; }
.bb-testo > :last-child { margin-bottom: 0; }
.bb-vai { margin: .5rem 0 0; font-weight: 600; }
.bb-vai a { color: var(--c-giada-scuro); }

.bb-evidenza { margin-bottom: 1.4rem; }
.bb-in-evidenza {
    position: relative;
    background: #fffbea;
    border-color: #ecd27a;
    border-left-color: #d4a017;
    padding-left: 2.6rem;
}
.bb-puntina {
    position: absolute;
    left: .95rem;
    top: .9rem;
    font-size: 1.05rem;
    color: var(--c-sigillo);
    transform: rotate(25deg);
}

.bb-livello { padding: .02rem .4rem; font-size: .74rem; font-weight: 600; color: var(--c-giada-scuro); background: #e3f4ec; border-radius: 6px; }
.bb-riservato { font-size: .74rem; color: #6b5a2a; }
.bb-data { margin-left: auto; }
.bb-nuovo {
    padding: .02rem .45rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #3a2c00;
    background: #f3d36b;
    border-radius: 999px;
}

/* --- Per te: i messaggi personali --- */
.bb-personale { border-left-color: var(--c-sigillo); background: #fffdfb; }
.bb-personale-traguardo {
    border-color: #ecd27a;
    border-left-color: #d4a017;
    background: linear-gradient(120deg, #fff8dc, #fffdf4 55%);
}
.bb-personale-traguardo .bb-firma i { color: #b8860b; }
.bb-per-te {
    padding: .02rem .5rem;
    font-size: .74rem;
    font-weight: 700;
    color: #fff;
    background: var(--c-sigillo);
    border-radius: 999px;
}
.bb-per-te i { font-size: .68rem; }
.bb-togli { margin: 0 0 0 auto; }
.bb-togli button {
    display: inline-grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    color: var(--c-pietra);
    background: transparent;
    border: 0;
    border-radius: 50%;
}
.bb-togli button:hover, .bb-togli button:focus-visible { color: var(--c-inchiostro); background: rgba(16, 36, 29, .07); }

/* --- Cronologia --- */
.bb-giorno { margin-bottom: 1.3rem; }
.bb-giorno h2 {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 .6rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--c-pietra);
}
.bb-giorno h2 time { display: inline-block; }
.bb-giorno h2 time::first-letter { text-transform: uppercase; }
.bb-giorno h2::after { content: ''; flex: 1; height: 1px; background: var(--c-bordo); }

.bb-voce {
    display: flex;
    gap: .8rem;
    margin: 0 0 .6rem;
    padding: .75rem 1rem;
    background: #fff;
    border: 1px solid var(--c-bordo);
    border-radius: 10px;
}
.bb-icona {
    display: inline-grid;
    place-items: center;
    flex: 0 0 2.2rem;
    align-self: flex-start;
    width: 2.2rem;
    height: 2.2rem;
    color: #fff;
    background: var(--c-giada);
    border-radius: 50%;
}
.bb-cruciverba .bb-icona { background: #b8860b; }
.bb-approfondimento .bb-icona { background: #5a7a9a; }
.bb-lettura .bb-icona { background: #8a5a3b; }
.bb-esempi .bb-icona { background: var(--c-giada-scuro); }
.bb-corpo { min-width: 0; flex: 1; }
.bb-etichetta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; font-size: .8rem; color: var(--c-pietra); }
.bb-etichetta .testo-cinese { color: var(--c-giada-scuro); }
.bb-voce h3 { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 600; }
.bb-voce h3 a { color: var(--c-inchiostro); text-decoration: none; }
.bb-voce h3 a:hover, .bb-voce h3 a:focus-visible { color: var(--c-giada-scuro); text-decoration: underline; }
.bb-voce h3 .testo-cinese { margin-left: .3rem; }
.bb-traduzione { margin-left: .4rem; font-weight: 400; color: var(--c-pietra); }
.bb-sommario { margin: .2rem 0 0; font-size: .92rem; color: var(--c-pietra); }

.bb-parole { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .45rem 0 0; }
.bb-parola {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    padding: .15rem .55rem;
    color: var(--c-inchiostro);
    text-decoration: none;
    background: var(--c-nebbia);
    border: 1px solid transparent;
    border-radius: 8px;
}
.bb-parola .testo-cinese { font-size: 1.15rem; }
.bb-parola small { font-size: .78rem; color: var(--c-pietra); }
.bb-parola:hover, .bb-parola:focus-visible { border-color: var(--c-giada); background: #fff; }
.bb-altre { font-size: .85rem; color: var(--c-pietra); }

.bb-vuota { margin: 2rem 0; text-align: center; color: var(--c-pietra); }
.bb-precedenti { margin: 1.2rem 0; text-align: center; }
.bb-precedenti a { font-weight: 600; color: var(--c-giada-scuro); }

/* --- Invito e posta --- */
.bb-invito {
    margin: 1.6rem 0 1rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(135deg, #e9f7f0, #f6fbf8);
    border: 1px solid #bfe3d1;
    border-radius: 12px;
}
.bb-invito h2 { margin: 0 0 .35rem; font-size: 1.1rem; }
.bb-invito p { margin: 0 0 .5rem; }
.bb-invito p:last-child { margin: 0; display: flex; align-items: center; gap: 1rem; }
.bb-bottone { display: inline-block; padding: .35rem 1rem; color: #fff; font-weight: 600; text-decoration: none; background: var(--c-giada); border-radius: 8px; }
.bb-bottone:hover, .bb-bottone:focus-visible { color: #fff; background: var(--c-giada-scuro); }
.bb-scrivi { margin-top: 1.4rem; padding-top: .9rem; font-size: .9rem; color: var(--c-pietra); border-top: 1px dashed var(--c-bordo); }
.bb-scrivi p { margin: 0; }

/* --- Amministratore --- */
.bba-modulo { display: grid; gap: .8rem; padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--c-bordo); border-radius: 12px; }
.bba-righe { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; }
.bba-modulo label { font-weight: 600; font-size: .9rem; }
.bba-aiuto { font-size: .82rem; color: var(--c-pietra); }
.bba-elenco { display: grid; gap: .7rem; margin-top: 1.4rem; }
.bba-voce { padding: .8rem 1rem; background: #fff; border: 1px solid var(--c-bordo); border-radius: 10px; }
.bba-voce header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .82rem; color: var(--c-pietra); }
.bba-voce h3 { margin: .25rem 0; font-size: 1.05rem; }
.bba-stato { padding: .02rem .45rem; font-weight: 600; border-radius: 6px; }
.bba-stato-visibile { color: #00603f; background: #dff5ea; }
.bba-stato-programmato { color: #2d4f73; background: #e2edf8; }
.bba-stato-scaduto { color: #6b6b6b; background: #eee; }
.bba-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.bba-azioni form { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.bba-anteprima { margin-top: 1rem; }
.bba-citazione { margin: 0; padding: .6rem .9rem; font-size: .92rem; color: var(--c-pietra); background: var(--c-nebbia); border-left: 3px solid var(--c-bordo); border-radius: 6px; }
.bba-anteprima h2 { font-size: 1rem; color: var(--c-pietra); }

@media (max-width: 520px) {
    .bb-lavagna { padding: 1.1rem 1rem 1rem; border-width: 8px; }
    .bb-lavagna h1 { font-size: 1.5rem; }
    .bb-lavagna h1 .testo-cinese { font-size: 1.9rem; }
    .bb-voce { padding: .65rem .75rem; gap: .6rem; }
    .bb-icona { flex-basis: 1.9rem; width: 1.9rem; height: 1.9rem; font-size: .85rem; }
}