/* stile.css - vetrina delle app. Solo caratteri di sistema: nessuna risorsa esterna. */
:root {
  --sfondo: #0f172a; --carta: #ffffff; --testo: #1f2937; --tenue: #6b7280; --bordo: #e5e7eb;
  --primario: #3f51b5; --pericolo: #b91c1c; --ok: #15803d;
  --alto-testata: 84px; --alto-piede: 40px; --alto-guida: 96px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--testo); background: #f3f4f6; }
a { color: var(--primario); }
h1, h2 { line-height: 1.2; }

/* ------------------------------------------------------------ testata e piede */
.testata { height: var(--alto-testata); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 24px; background: var(--sfondo); color: #fff; }
.testata h1 { margin: 0; font-size: 1.5rem; }
.testata p { margin: 4px 0 0; color: #cbd5e1; font-size: .95rem; }
.testata nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.piede { height: var(--alto-piede); display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .85rem; color: var(--tenue); background: #fff; border-top: 1px solid var(--bordo); }

/* ------------------------------------------------------------ bottoni */
.bottone { display: inline-block; border: 0; border-radius: 8px; padding: 9px 16px; background: var(--primario); color: #fff;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.bottone.secondario { background: #e8eaf6; color: #283593; }
.testata .bottone.secondario { background: rgba(255,255,255,.12); color: #fff; }
.bottone.grande { padding: 13px 24px; font-size: 1.05rem; background: var(--colore, var(--primario)); }
.bottone.spento { background: #9ca3af; cursor: default; }
.bottone.pericolo { background: #fee2e2; color: var(--pericolo); }
.bottone:focus-visible, .scheda:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.mini { border: 1px solid var(--bordo); background: #fff; border-radius: 4px; cursor: pointer; padding: 1px 6px; }
.in-linea { display: inline; }

/* ------------------------------------------------------------ galleria (tutta la pagina, scorre in orizzontale) */
.pagina-galleria { overflow: hidden; }
.cornice { position: relative; height: calc(100vh - var(--alto-testata) - var(--alto-guida) - var(--alto-piede)); }
.galleria { height: 100%; display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-columns: minmax(280px, 320px); gap: 18px; padding: 18px 64px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-behavior: smooth; cursor: grab; outline: none; }
.galleria.trascina { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.scheda { scroll-snap-align: start; display: flex; flex-direction: column; background: var(--carta); border-radius: 14px;
  overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 2px 8px rgba(0,0,0,.12);
  border-top: 5px solid var(--colore); transition: transform .15s, box-shadow .15s; min-height: 0; }
.scheda:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.scheda img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; flex: 0 1 auto; min-height: 0; display: block; background: #e5e7eb; }
.scheda-testo { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.scheda-nome { font-weight: 700; font-size: 1.05rem; }
.scheda-sotto { color: var(--tenue); font-size: .9rem; }
.scheda-prova { margin-top: 4px; font-size: .85rem; font-weight: 600; color: var(--colore); }
.etichette { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0; }
.etichetta { font-size: .72rem; padding: 2px 8px; border-radius: 10px; background: var(--colore, var(--primario)); color: #fff; }
.etichetta.chiara { background: #eef2ff; color: #3730a3; }
.freccia { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: rgba(15,23,42,.8); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.freccia.sinistra { left: 10px; } .freccia.destra { right: 10px; }
.vuoto { padding: 24px; }

/* ------------------------------------------------------------ pagine complete delle app (nastro orizzontale) */
.pagina-app { overflow: hidden; }
.barra-app { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px;
  background: var(--sfondo); }
.barra-app .bottone.secondario { background: rgba(255,255,255,.12); color: #fff; }
.posizione { color: #cbd5e1; font-size: .9rem; }
.avviso { margin: 0; padding: 8px 16px; background: #fef3c7; }
.nastro { position: relative; height: calc(100vh - 56px - var(--alto-piede)); display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; outline: none; }
.pagina { flex: 0 0 100%; height: 100%; overflow-y: auto; scroll-snap-align: start; scroll-snap-stop: always;
  background: linear-gradient(180deg, color-mix(in srgb, var(--colore) 14%, #fff) 0, #fff 320px); }
.pagina-dentro { max-width: 1100px; margin: 0 auto; padding: 28px 24px 40px; }
.pagina-testa { display: grid; grid-template-columns: minmax(240px, 420px) 1fr; gap: 28px; align-items: center; }
.pagina-testa img { width: 100%; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.18); aspect-ratio: 16 / 10; object-fit: cover; }
.pagina-testa h1 { margin: 0 0 6px; font-size: 2rem; }
.pagina-testa .sotto { margin: 0 0 10px; color: var(--tenue); font-size: 1.1rem; }
.pagina-testa .bottone { margin: 10px 8px 0 0; }
.colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; }
.colonne h2 { font-size: 1.15rem; border-bottom: 3px solid var(--colore); padding-bottom: 4px; display: inline-block; }
.guida { padding-left: 1.3em; } .guida li { margin: 0 0 10px; line-height: 1.45; }
.nota { background: #f9fafb; border-left: 4px solid var(--colore); padding: 10px 12px; font-size: .92rem; }

/* ------------------------------------------------------------ pagine di testo, moduli, admin */
.pagina-testo main, .testo { max-width: 760px; margin: 0 auto; padding: 24px 20px 48px; background: #fff; min-height: calc(100vh - var(--alto-piede)); line-height: 1.55; }
.modulo { display: flex; flex-direction: column; gap: 14px; }
.modulo.largo { max-width: 960px; }
.modulo label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .92rem; }
.modulo input:not([type=checkbox]):not([type=color]), .modulo textarea, .modulo select { font: inherit; font-weight: 400; padding: 8px 10px;
  border: 1px solid #cbd5e1; border-radius: 6px; }
.modulo .spunta { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; }
.modulo .aiuto { font-weight: 400; color: var(--tenue); font-size: .82rem; }
.modulo .due { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modulo button { align-self: flex-start; }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.errori { background: #fee2e2; color: var(--pericolo); padding: 10px 14px; border-radius: 6px; margin: 10px 0; }
.errori ul { margin: 0; padding-left: 1.2em; }
.conferma { background: #dcfce7; color: var(--ok); padding: 10px 14px; border-radius: 6px; }
.errore-testo { color: var(--pericolo); }
.piccolo { font-size: .85rem; color: var(--tenue); }
.admin { padding: 20px 24px 48px; min-height: calc(100vh - var(--alto-testata) - var(--alto-piede)); }
.tabella { width: 100%; border-collapse: collapse; background: #fff; }
.tabella th, .tabella td { border-bottom: 1px solid var(--bordo); padding: 8px; text-align: left; vertical-align: middle; }
.tabella tr.spenta { opacity: .55; }
.comandi { white-space: nowrap; }
.mini-img { width: 96px; border-radius: 6px; display: block; }
.anteprima { width: 320px; max-width: 100%; border-radius: 8px; }
.messaggio { background: #fff; border-radius: 8px; padding: 12px 16px; margin: 10px 0; border-left: 4px solid var(--primario); }
.messaggio.letto { border-left-color: #cbd5e1; opacity: .8; }

@media (max-width: 760px) {
  :root { --alto-testata: 96px; }
  .testata { padding: 0 14px; } .testata h1 { font-size: 1.15rem; }
  .galleria { padding: 12px 14px; grid-auto-columns: 78vw; gap: 12px; }
  .freccia { display: none; }
  .pagina-testa, .colonne, .modulo .due { grid-template-columns: 1fr; }
  .barra-app { height: auto; min-height: 56px; flex-wrap: wrap; padding: 8px; }
  .admin { padding: 12px; } .tabella { font-size: .85rem; }
}

/* ------------------------------------------------------------ guida rapida e filtri della galleria */
.guida-rapida { height: var(--alto-guida); display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 24px;
  background: #fff; border-bottom: 1px solid var(--bordo); }
.passi { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.passi .numero { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primario);
  color: #fff; font-weight: 700; font-size: .85rem; margin-right: 4px; }
.tenue { color: var(--tenue); }
.filtri { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.conteggio { margin-right: 10px; font-size: .9rem; color: var(--tenue); }
.filtro { border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3; border-radius: 16px; padding: 4px 12px; font: inherit;
  font-size: .85rem; cursor: pointer; }
.filtro.attivo { background: var(--primario); border-color: var(--primario); color: #fff; }
.scheda.nascosta { display: none; }
.scheda-prova { align-self: flex-start; margin-top: 6px; padding: 3px 10px; border-radius: 12px; background: #f3f4f6; color: var(--tenue); }
.scheda-prova.attiva { background: var(--colore); color: #fff; }
.scheda.provabile { box-shadow: 0 2px 10px rgba(0,0,0,.16), 0 0 0 2px var(--colore); }
@media (max-width: 760px) {
  :root { --alto-guida: 150px; }
  .guida-rapida { padding: 8px 14px; }
  .passi { font-size: .85rem; gap: 4px; flex-direction: column; }
}

/* ------------------------------------------------------------ schede v2 (01-11): stato ben visibile, prova con un clic */
.passi { align-items: center; gap: 6px 10px; }
.passi li { display: flex; align-items: center; gap: 6px; }
.passi .freccina { color: #9ca3af; font-size: 1.1rem; }
.passi .numero.verde { background: var(--ok); }
.filtro b { margin-left: 4px; font-weight: 700; }
.filtro.verde { border-color: #86efac; background: #dcfce7; color: #166534; }
.filtro.verde.attivo { background: var(--ok); border-color: var(--ok); color: #fff; }
.galleria { grid-template-rows: repeat(auto-fill, minmax(330px, 1fr)); }
.scheda { position: relative; }
.scheda:hover { transform: translateY(-3px); }
.scheda-immagine { position: relative; display: block; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.stato { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 12px; font-size: .78rem; font-weight: 700;
  background: rgba(17,24,39,.75); color: #fff; letter-spacing: .02em; }
.scheda.provabile .stato { background: var(--ok); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.scheda-nome { color: inherit; text-decoration: none; }
.scheda-nome:hover { text-decoration: underline; }
.scheda-testo { flex: 1 1 auto; }
.scheda-azioni { display: flex; gap: 8px; padding: 0 14px 14px; margin-top: auto; }
.scheda-azioni .bottone { flex: 1; text-align: center; padding: 9px 10px; font-size: .95rem; }
.bottone.prova { background: var(--ok); flex: 2; box-shadow: 0 2px 6px rgba(21,128,61,.35); }
.bottone.prova:hover { background: #166534; }
.bottone.avvisami { background: #fff; color: var(--testo); border: 1px solid #cbd5e1; flex: 2; }
.scheda.in-arrivo img { filter: saturate(.55); }
.scheda.in-arrivo { border-top-color: #cbd5e1; }
.scheda.provabile { border-top-color: var(--ok); box-shadow: 0 2px 10px rgba(0,0,0,.16), 0 0 0 2px var(--ok); }
@media (max-width: 760px) {
  .passi .freccina { display: none; }
  .passi { flex-direction: column; align-items: flex-start; }

}
/* impaginazione a colonna: la guida prende l'altezza che le serve, la galleria tutto il resto */
body.pagina-galleria { display: flex; flex-direction: column; height: 100vh; }
.pagina-galleria .testata, .pagina-galleria .piede { flex: 0 0 auto; }
.pagina-galleria .guida-rapida { height: auto; flex: 0 0 auto; padding: 10px 24px; }
.pagina-galleria .cornice { flex: 1 1 auto; height: auto; min-height: 0; }
@media (max-width: 760px) { .pagina-galleria .testata { height: auto; min-height: 64px; padding: 8px 14px; } }