/* vrv-cofanetto.css - barretta di navigazione del cofanetto (disegnata dal
   visore, non cucita nel testo del post). Vedi lib/cofanetto.php. */

.vrv-cofanav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem 1rem;
  margin: 2rem auto .5rem;
  padding: .7rem 1rem;
  border-top: 1px solid rgba(0, 0, 0, .12);
  font-size: 1.05rem;
  line-height: 1.4;
  text-align: center;
}

.vrv-cofanav a {
  color: #236fa1;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: .1rem 0;
}

.vrv-cofanav a:hover,
.vrv-cofanav a:focus {
  border-bottom-color: currentColor;
}

.vrv-cofanav-box {
  font-weight: 600;
  white-space: nowrap;
}

.vrv-cofanav-pos {
  color: #7a7a7a;
  font-size: .85em;
  white-space: nowrap;
}

/* Gli estremi della serie: il posto resta, cosi' il centro non balla */
.vrv-cofanav-vuoto {
  flex: 0 1 6rem;
}

.vrv-cofanav-prev,
.vrv-cofanav-next {
  white-space: nowrap;
}

/* Sul telefono la barretta si impila e le voci restano toccabili */
@media (max-width: 620px) {
  .vrv-cofanav {
    gap: .5rem;
    font-size: 1rem;
  }
  .vrv-cofanav-vuoto {
    display: none;
  }
  .vrv-cofanav a {
    padding: .3rem 0;
  }
}

/* --- Il cofanetto nelle liste: fisarmonica di primo livello --- */

.vrv-cof {
  margin: .35rem 0;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .55);
  overflow: hidden;
}

.vrv-cof-sum {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .6rem .75rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;          /* via il triangolino di serie */
}

.vrv-cof-sum::-webkit-details-marker { display: none; }

.vrv-cof-sum:hover { background: rgba(0, 0, 0, .04); }

.vrv-cof-arrow {
  display: inline-block;
  transition: transform .15s ease;
  color: #6b8e23;
}

.vrv-cof[open] > .vrv-cof-sum > .vrv-cof-arrow { transform: rotate(90deg); }

.vrv-cof-nome { color: #236fa1; }

.vrv-cof-conta {
  font-weight: 400;
  font-size: .85em;
  color: #7a7a7a;
  white-space: nowrap;
}

.vrv-cof-sotto {
  font-weight: 400;
  font-size: .85em;
  color: #7a7a7a;
  flex: 1 1 12rem;
}

/* i bottoni della riga-cofanetto, allineati come quelli dei post */
.vrv-cof-azioni {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
}

.vrv-cof-nome { text-decoration: none; }
.vrv-cof-nome:hover { text-decoration: underline; }

/* i post dentro la scatola: rientrati, cosi' si vede il livello */
.vrv-cof-corpo {
  padding: .1rem .5rem .5rem 1.6rem;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

@media (max-width: 620px) {
  .vrv-cof-corpo { padding-left: .6rem; }
  .vrv-cof-sotto { display: none; }
}

/* ── Pannello "Cofanetto" nella barra di modifica_post.php ─────────────── */
/* Convive con i menu a tendina gia' esistenti (Lingue, Versioni, Esci):
   stesse misure e stesso spirito, niente sfondi sfocati. */
.vrv-cofpan {
  min-width: 320px;
  max-width: 420px;
  padding: 10px 12px;
  font-size: var(--vrv-menu-testo, .92rem);
  line-height: 1.35;
}
.vrv-cofpan__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(128, 128, 128, .35);
}
.vrv-cofpan__nome { font-weight: 600; }
.vrv-cofpan__pos  { opacity: .75; font-size: .85em; white-space: nowrap; }

.vrv-cofpan__fila { list-style: none; margin: 8px 0; padding: 0; }
.vrv-cofpan__voce {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 5px;
}
.vrv-cofpan__voce.is-mia { background: rgba(22, 145, 121, .16); font-weight: 600; }
.vrv-cofpan__n {
  min-width: 1.4em;
  text-align: right;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}
.vrv-cofpan__titolo {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vrv-cofpan__vai { text-decoration: none; opacity: .7; }
.vrv-cofpan__vai:hover { opacity: 1; }

.vrv-cofpan__righi { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; align-items: center; }
.vrv-cofpan__az--via { margin-left: auto; }
.vrv-cofpan__az[disabled] { opacity: .4; cursor: default; }

.vrv-cofpan__dett { margin-top: 6px; }
.vrv-cofpan__dett > summary { cursor: pointer; opacity: .8; padding: 4px 0; }
.vrv-cofpan__dett label { display: block; margin: 6px 0; }
.vrv-cofpan__f {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 4px 6px;
  border: 1px solid rgba(128, 128, 128, .5);
  border-radius: 5px;
  font: inherit;
  background: transparent;
  color: inherit;
}
.vrv-cofpan__righi .vrv-cofpan__f { width: auto; flex: 1; margin-top: 0; }
.vrv-cofpan__vuoto { margin: 4px 0 10px; opacity: .8; }

@media (max-width: 700px) {
  .vrv-cofpan { min-width: 0; max-width: 92vw; }
}

/* Barra di modifica: il bottone non deve spezzarsi (la freccina andava a capo)
   e il gruppo deve poter andare a capo INTERO, se no "Lingue" spariva. */
body.page-modifica-post .vrv-actionbar .vrv-btn { white-space: nowrap; }

/* Il gruppo di sinistra: vrv-modifica-post.css lo inchioda a `flex: 0 1 340px`
   (larghezza fissa). Con tre controlli bastava, col quarto (Cofanetto) no: il
   gruppo andava a capo dentro i suoi 340px e "Lingue" finiva sotto "Versioni".
   Qui lo lascio CRESCERE e andare a capo per intero. Questo foglio e' caricato
   apposta DOPO gli altri due, cosi' non servono !important. */
body.page-modifica-post .vrv-actionbar__group--edit {
  flex: 1 1 auto;
  flex-wrap: wrap;
  row-gap: 6px;
}

/* Colori del Cofanetto, secondo la convenzione della barra: ogni bottone ha la
   sua terna e il menu riprende LO STESSO fondo (se no si legge la pagina sotto).
   Famiglia scelta: marrone cartone, come la scatola, libera fra quelle gia' in
   uso (azzurro Media, rosa Anteprima, verde Lingue, viola Versioni, arancio
   Salva/Chiudi). */
body.page-modifica-post .vrv-btn--cofanetto {
  background: #efebe9;
  border-color: #bcaaa4;
  color: #4e342e;
}

body.page-modifica-post .vrv-btn--cofanetto:hover {
  background: #d7ccc8;
}

body.page-modifica-post .vrv-dd__menu--cofanetto {
  background: #efebe9;
  color: #3e2723;
}

/* Dentro il pannello: caselle e riga corrente devono staccare dal fondo */
body.page-modifica-post .vrv-dd__menu--cofanetto .vrv-cofpan__f {
  background: #fff;
  border-color: #bcaaa4;
}

body.page-modifica-post .vrv-dd__menu--cofanetto .vrv-cofpan__voce.is-mia {
  background: #d7ccc8;
}

/* --- L'INDICE sulla copertina: la barretta prec/succ non ha senso su un post
   che non e' una puntata, quindi al suo posto il visore elenca la scatola. --- */

.vrv-cofindice {
  margin: 2rem auto .5rem;
  padding: 1rem 1.2rem;
  border-top: 1px solid rgba(0, 0, 0, .12);
  line-height: 1.5;
}

.vrv-cofindice__tit {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: .15rem;
}

.vrv-cofindice__sotto {
  opacity: .7;
  font-size: .95rem;
  margin-bottom: .6rem;
}

.vrv-cofindice__lista {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
}

.vrv-cofindice__voce {
  margin: .1rem 0;
}

.vrv-cofindice__voce a {
  display: block;
  padding: .35rem .2rem;
  color: #236fa1;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.vrv-cofindice__voce a:hover,
.vrv-cofindice__voce a:focus {
  background: rgba(35, 111, 161, .07);
}

.vrv-cofindice__n {
  font-weight: 600;
  white-space: nowrap;
}

/* Sul telefono etichetta e titolo vanno a capo invece di spezzarsi male */
@media (max-width: 620px) {
  .vrv-cofindice { padding: .8rem .4rem; }
  .vrv-cofindice__sep { display: none; }
  .vrv-cofindice__n { display: block; font-size: .9em; opacity: .8; }
}

/* L'avviso "sei anche la copertina" nel pannello di modifica */
.vrv-cofpan__avviso {
  margin: 4px 0 10px;
  padding: 6px 8px;
  border-left: 3px solid #bcaaa4;
  background: rgba(188, 170, 164, .18);
  font-size: .9em;
}

/* --- Il SEGNAPOSTO nell'editor: dice che sotto il testo, quando il post si
   legge, ci va l'indice (o la barretta) del cofanetto. Sta fuori dall'editor:
   non e' contenuto, non si salva, non si modifica. --- */

.vrv-cofposto {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  margin: .6rem 0 0;
  padding: .7rem .9rem;
  border: 1px dashed rgba(0, 0, 0, .22);
  border-radius: 8px;
  background: rgba(0, 0, 0, .045);
  color: #555;
  font-size: .92rem;
  line-height: 1.45;
}

.vrv-cofposto__icona {
  font-size: 1.1em;
  opacity: .75;
  flex: 0 0 auto;
}

/* Il testo si prende lo spazio che resta: l'icona gli sta accanto, non sopra */
.vrv-cofposto__testo {
  flex: 1 1 20rem;
  min-width: 0;
}

.vrv-cofposto b { color: #444; }

.vrv-cofposto__come {
  margin-left: auto;
  white-space: nowrap;
  opacity: .8;
}

@media (max-width: 620px) {
  .vrv-cofposto__come { margin-left: 0; }
}