/* =====================================================
   RETROVAULT – lo stile del pannello
   Parte da Bootstrap 5 e cambia colori, barra laterale,
   schede e tabelle. Tema chiaro e scuro.
   ===================================================== */

/* ---------- 1. I colori (variabili CSS) ---------- */
:root {
  --rv-viola: #7c5cff;
  --rv-viola-scuro: #6847f5;
  --rv-rosa: #ff4d9d;
  --rv-verde: #17b67f;
  --rv-blu: #2f8fff;
  --rv-arancio: #ff8a3d;
  --rv-giallo: #f5b82e;

  --rv-laterale: #16132b;          /* barra laterale */
  --rv-laterale-testo: #aaa4cc;
  --rv-laterale-voce: #201c3a;
  --rv-larghezza-menu: 264px;

  --rv-sfondo: #f4f3fa;            /* sfondo della pagina */
  --rv-scheda: #ffffff;
  --rv-bordo: #e7e4f2;
  --rv-testa-scheda: #faf9fe;

  /* Bootstrap usa queste variabili: le cambio con i nostri colori */
  --bs-primary: var(--rv-viola);
  --bs-primary-rgb: 124, 92, 255;
  --bs-link-color: var(--rv-viola-scuro);
  --bs-link-color-rgb: 104, 71, 245;
  --bs-link-hover-color: var(--rv-rosa);
  --bs-border-radius: .6rem;
  --bs-border-radius-lg: .9rem;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-bs-theme="dark"] {
  --rv-sfondo: #0e0c1b;
  --rv-scheda: #17142a;
  --rv-bordo: #2a2645;
  --rv-testa-scheda: #1b1832;
  --rv-laterale: #0b0916;
  --rv-laterale-voce: #15122a;
  --bs-body-bg: var(--rv-sfondo);
  --bs-border-color: var(--rv-bordo);
  --bs-link-color: #a993ff;
  --bs-link-color-rgb: 169, 147, 255;
}

body.pannello { background: var(--rv-sfondo); }

/* Bottoni "primary" con il viola */
.btn-primary {
  --bs-btn-bg: var(--rv-viola);
  --bs-btn-border-color: var(--rv-viola);
  --bs-btn-hover-bg: var(--rv-viola-scuro);
  --bs-btn-hover-border-color: var(--rv-viola-scuro);
  --bs-btn-active-bg: var(--rv-viola-scuro);
  --bs-btn-disabled-bg: var(--rv-viola);
  --bs-btn-disabled-border-color: var(--rv-viola);
  box-shadow: 0 6px 16px -8px rgba(124, 92, 255, .8);
}
.btn-outline-primary {
  --bs-btn-color: var(--rv-viola-scuro);
  --bs-btn-border-color: var(--rv-viola);
  --bs-btn-hover-bg: var(--rv-viola);
  --bs-btn-hover-border-color: var(--rv-viola);
  --bs-btn-active-bg: var(--rv-viola-scuro);
}
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #b8a6ff; }
[data-bs-theme="dark"] .btn-light { --bs-btn-bg: #24203d; --bs-btn-border-color: #2f2a50; --bs-btn-color: #ddd8f5; --bs-btn-hover-bg: #2f2a50; --bs-btn-hover-color: #fff; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #b5a5ff;
  box-shadow: 0 0 0 .2rem rgba(124, 92, 255, .2);
}
.form-check-input:checked { background-color: var(--rv-viola); border-color: var(--rv-viola); }
.form-range::-webkit-slider-thumb { background: var(--rv-viola); }
.form-range::-moz-range-thumb { background: var(--rv-viola); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--rv-viola); }
.pagination { --bs-pagination-active-bg: var(--rv-viola); --bs-pagination-active-border-color: var(--rv-viola); --bs-pagination-color: var(--rv-viola-scuro); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--rv-viola); border-color: var(--rv-bordo); box-shadow: 0 12px 30px -12px rgba(22, 19, 43, .3); }
.min-w-0 { min-width: 0; }

/* Le immagini pixel art restano nitide anche ingrandite */
.pixel { image-rendering: pixelated; }

/* ---------- 2. La struttura: barra laterale + contenuto ---------- */
.contenitore { display: flex; min-height: 100vh; }
.principale { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.contenuto { flex: 1; padding: 1.75rem; }
@media (max-width: 575.98px) { .contenuto { padding: 1rem; } }

.barra-laterale {
  --bs-offcanvas-width: var(--rv-larghezza-menu);
  --bs-offcanvas-bg: var(--rv-laterale);
  background-color: var(--rv-laterale) !important;   /* Bootstrap la rende trasparente sul computer */
  color: var(--rv-laterale-testo);
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .barra-laterale {
    width: var(--rv-larghezza-menu);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: width .25s;
  }
}
.barra-laterale .logo {
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  min-height: 70px;
}
.logo-testo { color: #fff; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; white-space: nowrap; }
.menu { padding: .75rem .85rem; flex: 1; }
.menu-sezione {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6f6993;
  margin: 1.1rem .6rem .45rem;
}
.menu-voce {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .62rem .8rem;
  margin-bottom: .3rem;
  border-radius: .6rem;
  color: var(--rv-laterale-testo);
  background: var(--rv-laterale-voce);
  text-decoration: none;
  font-weight: 500;
  border-left: 3px solid transparent;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.menu-voce i { font-size: 1.1rem; }
.menu-voce:hover { color: #fff; background: #2a2550; }
.menu-voce.attiva {
  color: #fff;
  background: linear-gradient(90deg, rgba(124, 92, 255, .35), rgba(124, 92, 255, .08));
  border-left-color: var(--rv-viola);
  font-weight: 700;
}
.menu-voce.attiva i { color: #c6b8ff; }
.menu-piede { padding: .85rem; border-top: 1px solid rgba(255, 255, 255, .07); }

/* Menu stretto (solo icone) sul computer */
@media (min-width: 992px) {
  body.menu-stretto .barra-laterale { width: 84px; }
  body.menu-stretto .logo-testo,
  body.menu-stretto .menu-voce span,
  body.menu-stretto .menu-sezione { display: none; }
  body.menu-stretto .menu-voce { justify-content: center; padding: .7rem 0; }
  body.menu-stretto .barra-laterale .logo { justify-content: center; padding: 1.15rem .5rem; }
}

/* La barra in alto */
.barra-alta {
  position: sticky;
  top: 0;
  z-index: 1020;
  min-height: 70px;
  padding: .7rem 1.75rem;
  background: var(--rv-scheda);
  border-bottom: 1px solid var(--rv-bordo);
}
@media (max-width: 575.98px) { .barra-alta { padding: .6rem 1rem; } }
.btn-icona {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rv-bordo);
  border-radius: .6rem;
  font-size: 1.25rem;
  background: var(--rv-scheda);
}
.btn-icona:hover { background: var(--rv-sfondo); }
.btn-lingua, .btn-utente {
  border: 1px solid var(--rv-bordo);
  border-radius: .6rem;
  background: var(--rv-scheda);
  min-height: 42px;
}
.btn-utente { border: 0; padding: .2rem .4rem; }
.cerca-veloce { position: relative; width: min(340px, 40vw); margin-left: .5rem; }
.cerca-veloce i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); }
.cerca-veloce .form-control { padding-left: 2.4rem; background: var(--rv-sfondo); border-color: transparent; }

/* Avatar con la foto o con l'iniziale */
.avatar { width: 40px; height: 40px; border-radius: .6rem; object-fit: cover; flex-shrink: 0; }
.avatar-lettera { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.avatar-grande { width: 54px; height: 54px; font-size: 1.4rem; }
.avatar-piccolo { width: 28px; height: 28px; font-size: .8rem; border-radius: .45rem; }

.piede-pannello {
  padding: 1.1rem 1.75rem;
  border-top: 1px solid var(--rv-bordo);
  background: var(--rv-scheda);
  color: var(--bs-secondary-color);
  font-size: .875rem;
}

/* ---------- 3. Intestazione delle pagine ---------- */
.sopratitolo {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--bs-secondary-color);
  margin-bottom: .2rem;
}
.sopratitolo::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--rv-viola);
  box-shadow: 8px 0 0 var(--rv-rosa);   /* due "pixel" colorati */
  margin-right: 1rem;
  vertical-align: 1px;
}
.data-oggi {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--bs-secondary-color);
  font-size: .9rem;
  padding: .45rem .8rem;
  border: 1px solid var(--rv-bordo);
  border-radius: .6rem;
  background: var(--rv-scheda);
}

/* ---------- 4. Schede (card) ---------- */
.card {
  --bs-card-bg: var(--rv-scheda);
  --bs-card-border-color: var(--rv-bordo);
  --bs-card-cap-bg: var(--rv-testa-scheda);
  --bs-card-border-radius: .9rem;
  --bs-card-inner-border-radius: calc(.9rem - 1px);
  box-shadow: 0 1px 2px rgba(22, 19, 43, .04);
}
.card-header { padding: .95rem 1.25rem; }
.card-body { padding: 1.25rem; }
.card-footer { padding: .85rem 1.25rem; background: var(--rv-testa-scheda); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--rv-bordo); }

/* Contatori della dashboard */
.scheda-numero {
  --c: var(--rv-viola);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "nome icona" "numero icona";
  align-items: center;
  height: 100%;
  padding: 1.1rem 1.15rem;
  border-radius: .9rem;
  background: var(--rv-scheda);
  border: 1px solid var(--rv-bordo);
  color: var(--bs-body-color);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.scheda-numero::after {             /* striscia colorata in basso */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--c);
}
a.scheda-numero:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -14px var(--c); color: var(--bs-body-color); }
.scheda-numero .nome { grid-area: nome; font-weight: 600; font-size: .88rem; color: var(--bs-secondary-color); }
.scheda-numero .numero { grid-area: numero; font-size: 1.9rem; font-weight: 800; line-height: 1.15; }
.scheda-numero .icona {
  grid-area: icona;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: .7rem;
  font-size: 1.3rem;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
}
.colore-viola { --c: var(--rv-viola); }
.colore-rosa { --c: var(--rv-rosa); }
.colore-verde { --c: var(--rv-verde); }
.colore-blu { --c: var(--rv-blu); }
.colore-arancio { --c: var(--rv-arancio); }
.colore-giallo { --c: var(--rv-giallo); }

/* Il grafico a barre (disegnato da admin.js in SVG) */
.grafico { width: 100%; min-height: 260px; }
.grafico svg { width: 100%; height: 280px; display: block; overflow: visible; }
.grafico .linea { stroke: var(--rv-bordo); }
.grafico text { fill: var(--bs-secondary-color); font-size: 12px; }
.grafico .valore { fill: var(--bs-body-color); font-weight: 700; }
.grafico rect { transition: opacity .2s; }
.grafico rect:hover { opacity: .8; }
.legenda { display: flex; gap: 1rem; font-size: .85rem; color: var(--bs-secondary-color); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; }

.azione-rapida { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.25rem; }
.azione-rapida .icona {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: .6rem;
  border: 1px solid var(--rv-bordo);
  color: var(--rv-viola);
}
.azione-rapida b { display: block; color: var(--rv-viola-scuro); font-size: .92rem; }
[data-bs-theme="dark"] .azione-rapida b { color: #b8a6ff; }
.azione-rapida small { color: var(--bs-secondary-color); }
.azione-rapida > .bi-arrow-up-right { color: var(--bs-secondary-color); }

.linea-tempo li { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.25rem; border-bottom: 1px solid var(--rv-bordo); }
.linea-tempo li:last-child { border-bottom: 0; }
.pallino { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: .9rem; }
.barra-console { margin-bottom: 1rem; }
.barra-console .progress { height: 8px; }
.miniatura { width: 44px; height: 44px; object-fit: cover; border-radius: .5rem; background: var(--rv-sfondo); flex-shrink: 0; }
.copertina-piccola { width: 42px; height: 56px; object-fit: cover; border-radius: .35rem; background: var(--rv-sfondo); flex-shrink: 0; }

/* ---------- 5. Tabelle, filtri ed etichette ---------- */
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--rv-bordo); }
.table > thead th {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  background: var(--rv-testa-scheda);
  padding: .85rem 1rem;
  white-space: nowrap;
}
.table > tbody td { padding: .8rem 1rem; }
.colonna-check { width: 44px; }
.filtri { background: var(--rv-scheda); }

.btn-azione {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--rv-bordo);
  border-radius: .5rem;
  color: var(--bs-body-color);
  background: var(--rv-scheda);
}
.btn-azione:hover { border-color: var(--rv-viola); color: var(--rv-viola); }
.btn-azione-rossa:hover { border-color: #e5484d; color: #e5484d; }

.badge.stato { font-weight: 600; border: 1px solid; padding: .35em .6em; }
.stato .bi-circle-fill { font-size: .45rem; vertical-align: 2px; }
.stato-ok { color: #0f8a5f; background: #e6f8f0; border-color: #b7ebd5 !important; }
.stato-bozza { color: #a26200; background: #fff5e0; border-color: #ffdf9e !important; }
.stato-spento { color: #6b6785; background: #f0eff6; border-color: #dcd9ea !important; }
[data-bs-theme="dark"] .stato-ok { background: rgba(23, 182, 127, .15); border-color: rgba(23, 182, 127, .4) !important; color: #4fe0ab; }
[data-bs-theme="dark"] .stato-bozza { background: rgba(245, 184, 46, .14); border-color: rgba(245, 184, 46, .4) !important; color: #ffd36b; }
[data-bs-theme="dark"] .stato-spento { background: #24203d; border-color: #35305a !important; color: #a39fbe; }

.etichetta-tag { color: var(--bs-body-color); background: var(--rv-sfondo); border: 1px solid var(--rv-bordo); font-weight: 600; }
.etichetta-admin { color: var(--rv-viola-scuro); border-color: #cfc3ff; background: #f1edff; }
[data-bs-theme="dark"] .etichetta-admin { color: #c6b8ff; background: rgba(124, 92, 255, .15); border-color: rgba(124, 92, 255, .4); }
.pallino-console { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .45rem; }
.voto-pixel {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  color: var(--rv-viola-scuro);
}
[data-bs-theme="dark"] .voto-pixel { color: #c6b8ff; }
.voto-pixel small { color: var(--bs-secondary-color); font-weight: 400; }

/* Licenze delle ROM */
.licenza { border: 1px solid; font-weight: 600; }
.licenza-homebrew { color: #0f8a5f; background: #e6f8f0; border-color: #b7ebd5; }
.licenza-pubblico { color: #1769c2; background: #e7f2ff; border-color: #b9d7ff; }
.licenza-permesso { color: #6847f5; background: #f1edff; border-color: #d5caff; }
.licenza-archivio { color: #6b6785; background: #f0eff6; border-color: #dcd9ea; }
[data-bs-theme="dark"] .licenza { background: transparent; }

/* Sul telefono le righe delle tabelle diventano schede impilate */
@media (max-width: 767.98px) {
  .tabella-schede thead { display: none; }
  .tabella-schede, .tabella-schede tbody, .tabella-schede tr, .tabella-schede td { display: block; width: 100%; }
  .tabella-schede tr { padding: .75rem 1rem; border-bottom: 1px solid var(--rv-bordo); position: relative; }
  .tabella-schede td { border: 0; padding: .3rem 0; text-align: left !important; }
  /* Etichetta a sinistra, valore a destra: le righe restano corte */
  .tabella-schede td[data-etichetta]:not(:first-child),
  .tabella-schede td.colonna-check + td[data-etichetta] ~ td[data-etichetta] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .3rem;
    text-align: right !important;
    border-top: 1px dashed var(--rv-bordo);
  }
  .tabella-schede td[data-etichetta]::before {
    content: attr(data-etichetta);
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    text-align: left;
    margin-right: auto;
  }
  .tabella-schede td:first-child[data-etichetta]::before,
  .tabella-schede td.colonna-check + td[data-etichetta]::before { display: none; }
  .tabella-schede td.colonna-check + td[data-etichetta] { display: block; text-align: left !important; border-top: 0; padding-right: 2rem; }
  .tabella-schede td.colonna-check { position: absolute; right: 1rem; top: .9rem; width: auto; }
  .tabella-schede td:last-child:not([data-etichetta]) { padding-top: .5rem; }
}

/* ---------- 6. Console, galleria, media ---------- */
.scheda-console { overflow: hidden; transition: transform .15s, box-shadow .15s; }
.scheda-console:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px var(--colore); }
.scheda-console-img {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--colore) 55%, transparent), transparent 70%),
    #1a1730;
  border-bottom: 3px solid var(--colore);
}
.scheda-console-img img { width: 100%; height: 100%; object-fit: cover; }

.campo-immagine .anteprima {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 2px dashed var(--rv-bordo);
  border-radius: .8rem;
  overflow: hidden;
  background: var(--rv-sfondo);
  display: grid;
  place-items: center;
}
.campo-immagine.forma-verticale .anteprima { aspect-ratio: 3 / 4; }
.campo-immagine.forma-quadrata .anteprima { aspect-ratio: 1; }
.campo-immagine .anteprima img { width: 100%; height: 100%; object-fit: cover; }
.campo-immagine .anteprima.vuota img { display: none; }
.campo-immagine .testo-vuoto { display: none; color: var(--bs-secondary-color); text-align: center; font-size: .85rem; }
.campo-immagine .testo-vuoto i { display: block; font-size: 2rem; }
.campo-immagine .anteprima.vuota .testo-vuoto { display: block; }
.campo-immagine.sta-caricando .anteprima::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(124, 92, 255, .25), transparent);
  animation: scorri 1s infinite;
}
@keyframes scorri { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.griglia-galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .85rem; }
.voce-galleria { position: relative; border-radius: .6rem; overflow: hidden; border: 1px solid var(--rv-bordo); aspect-ratio: 4 / 3; background: #1a1730; }
.voce-galleria img { width: 100%; height: 100%; object-fit: cover; }
.voce-galleria .comandi { position: absolute; inset: auto 0 0 0; display: flex; gap: 2px; padding: 4px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.voce-galleria .comandi button { flex: 1; border: 0; border-radius: .35rem; background: rgba(255, 255, 255, .9); color: #16132b; padding: .2rem; }
.voce-galleria .comandi button[data-rimuovi] { color: #e5484d; }

.zona-caricamento {
  border: 2px dashed #c9bfff;
  border-radius: .9rem;
  background: color-mix(in srgb, var(--rv-viola) 5%, var(--rv-scheda));
  padding: 1.6rem;
  text-align: center;
  transition: background .15s, border-color .15s;
}
.zona-caricamento label { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.zona-caricamento i { font-size: 2.2rem; color: var(--rv-viola); }
.zona-caricamento span { color: var(--bs-secondary-color); font-size: .9rem; }
.zona-caricamento.sopra { background: color-mix(in srgb, var(--rv-viola) 14%, var(--rv-scheda)); border-color: var(--rv-viola); }

.griglia-media, .griglia-libreria { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.voce-media { margin: 0; background: var(--rv-scheda); border: 1px solid var(--rv-bordo); border-radius: .8rem; overflow: hidden; }
.voce-media-img { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; padding: 0; background: #1a1730; }
.voce-media-img img { width: 100%; height: 100%; object-fit: cover; }
.voce-media figcaption { padding: .6rem .75rem; font-size: .85rem; position: relative; }
.comandi-media { display: flex; gap: .3rem; margin-top: .4rem; }
.griglia-libreria button { border: 2px solid transparent; border-radius: .6rem; padding: 0; overflow: hidden; aspect-ratio: 4 / 3; background: #1a1730; }
.griglia-libreria button:hover, .griglia-libreria button:focus { border-color: var(--rv-viola); }
.griglia-libreria img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 7. Moduli ---------- */
.riquadro-interruttore { border: 1px solid var(--rv-bordo); border-radius: .6rem; padding: .7rem .9rem; background: var(--rv-sfondo); }
.interruttore { margin: 0; }
.interruttore .form-check-input { width: 2.6em; height: 1.35em; margin-top: .1em; }
.interruttore .form-check-label { margin-left: .4rem; font-weight: 600; }
.elenco-spunte { max-height: 240px; overflow-y: auto; }
.elenco-permessi { display: grid; gap: .5rem; }
.permesso { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .75rem; border: 1px solid var(--rv-bordo); border-radius: .6rem; cursor: pointer; }
.permesso:has(input:checked) { border-color: #b5a5ff; background: color-mix(in srgb, var(--rv-viola) 6%, transparent); }
.permesso .form-check-input { margin-top: .2rem; flex-shrink: 0; }
.permesso b { display: block; font-size: .92rem; }
.permesso small { color: var(--bs-secondary-color); }
.icona-ruolo { width: 40px; height: 40px; border-radius: .6rem; display: grid; place-items: center; background: var(--rv-sfondo); border: 1px solid var(--rv-bordo); font-size: 1.15rem; }
.icona-ruolo.admin { color: var(--rv-viola); background: #f1edff; border-color: #d5caff; }
[data-bs-theme="dark"] .icona-ruolo.admin { background: rgba(124, 92, 255, .15); border-color: rgba(124, 92, 255, .35); }
.nuvola-tag { display: flex; flex-wrap: wrap; gap: .6rem; }
.tag-voce { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .35rem .3rem .8rem; border: 1px solid var(--rv-bordo); border-radius: 2rem; font-weight: 600; }
.tag-voce .btn-azione { width: 26px; height: 26px; border-radius: 50%; font-size: .75rem; }
.menu-schede .nav-link { color: var(--bs-body-color); font-weight: 500; }
.menu-schede .nav-link.active { color: #fff; }
.barra-salva { position: sticky; bottom: 0; padding: .75rem 0; background: linear-gradient(transparent, var(--rv-sfondo) 35%); }
.anteprima-google { border: 1px solid var(--rv-bordo); border-radius: .6rem; padding: .9rem 1rem; background: var(--rv-scheda); }
.anteprima-google small { color: #188038; display: block; }
.anteprima-google b { color: #1a0dab; font-size: 1.15rem; font-weight: 400; display: block; }
.anteprima-google p { margin: 0; color: #4d5156; font-size: .88rem; }
[data-bs-theme="dark"] .anteprima-google b { color: #8ab4f8; }
[data-bs-theme="dark"] .anteprima-google p { color: #bdc1c6; }
.scheda-backup .icona { width: 52px; height: 52px; border-radius: .8rem; display: grid; place-items: center; font-size: 1.5rem; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }

/* L'editor degli articoli */
.editor { border: 1px solid var(--bs-border-color); border-radius: .6rem; overflow: hidden; background: var(--bs-body-bg); }
.editor:focus-within { border-color: #b5a5ff; box-shadow: 0 0 0 .2rem rgba(124, 92, 255, .2); }
.editor-barra { display: flex; flex-wrap: wrap; gap: .15rem; padding: .45rem; background: var(--rv-testa-scheda); border-bottom: 1px solid var(--rv-bordo); }
.editor-barra button { min-width: 34px; height: 32px; border: 0; border-radius: .4rem; background: transparent; color: var(--bs-body-color); font-weight: 600; font-size: .9rem; }
.editor-barra button:hover, .editor-barra button.attivo { background: color-mix(in srgb, var(--rv-viola) 15%, transparent); color: var(--rv-viola-scuro); }
.editor-barra .separatore { width: 1px; margin: .3rem .25rem; background: var(--rv-bordo); }
.editor-testo { min-height: 340px; max-height: 70vh; overflow-y: auto; padding: 1rem 1.15rem; outline: none; line-height: 1.7; }
.editor-testo:empty::before { content: attr(data-segnaposto); color: var(--bs-secondary-color); }
.editor-testo img { max-width: 100%; border-radius: .5rem; image-rendering: pixelated; }
.editor-testo blockquote { border-left: 4px solid var(--rv-viola); padding-left: 1rem; color: var(--bs-secondary-color); font-style: italic; }
.editor-testo h2, .editor-testo h3 { font-weight: 700; margin-top: 1rem; }

/* ---------- 8. Varie ---------- */
.vuoto-grande { text-align: center; padding: 4rem 1rem; color: var(--bs-secondary-color); }
.vuoto-grande i { font-size: 3rem; display: block; margin-bottom: .5rem; color: var(--rv-viola); }
.icona-pericolo { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; color: #e5484d; background: #fdecec; }
[data-bs-theme="dark"] .icona-pericolo { background: rgba(229, 72, 77, .15); }
.notifica-veloce { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; }

/* La striscia della demo */
.demo-striscia { background: linear-gradient(90deg, var(--rv-viola), var(--rv-rosa)); color: #fff; position: relative; z-index: 1050; }
.demo-striscia a { color: #fff; font-weight: 700; }
.demo-striscia code { color: #fff; background: rgba(0, 0, 0, .25); padding: .05rem .35rem; border-radius: .3rem; }

/* ---------- 9. Pagina di accesso ---------- */
.pagina-accesso { background: var(--rv-sfondo); }
.accesso { display: flex; min-height: 100vh; }
.accesso-poster {
  position: relative;
  flex: 1;
  align-items: center;
  padding: 4rem;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 110%, rgba(255, 77, 157, .55), transparent 55%),
    radial-gradient(circle at 90% 0%, rgba(47, 143, 255, .45), transparent 50%),
    var(--rv-laterale);
}
.accesso-poster .lead { color: #cfc9ef; max-width: 30rem; }
.griglia-pixel {               /* la griglia "da sala giochi" */
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to top, #000, transparent 85%);
}
.etichetta-poster { display: inline-flex; gap: .4rem; align-items: center; padding: .4rem .8rem; border-radius: 2rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-weight: 600; font-size: .9rem; }
.accesso-modulo { width: 100%; max-width: 560px; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; background: var(--rv-scheda); }
@media (max-width: 991.98px) { .accesso-modulo { max-width: none; } }