/* Libreria Petruccelli Parisi — foglio di stile unico.
   Aspetto ripreso dall'anteprima approvata: plancia di un'astronave, ologrammi
   ciano e viola su fondo notte. Niente immagini e niente risorse esterne:
   tutto e' disegnato con il CSS, cosi' le pagine restano leggere.
   Il movimento si spegne con la classe .quiete sul body oppure quando il
   sistema dell'utente chiede meno animazioni.

   DA LEGGERE PRIMA DI CAMBIARE UN COLORE
   Tutti i colori stanno nelle variabili dichiarate qui sotto in :root.
   I temi stagionali e delle festivita' (file temi.css) non riscrivono le
   regole: cambiano soltanto il valore di queste variabili su
   «body.tema-<nome>». Se aggiungi una regola con un colore scritto a mano,
   quel colore non seguira' il tema: usa sempre una variabile. */

:root {
  /* --- tavolozza di base (tema «astronave») --- */
  --fondo: #030912;
  --fondo-2: #080f20;
  --accento: #67e8f9;
  --accento-tenue: #a5f3fc;
  --accento-alt: #a78bfa;
  --bordo: #314c70;
  --bordo-chiaro: #4b8098;
  --testo: #e2edf9;
  --testo-tenue: #b0c0d8;
  --testo-forte: #ffffff;
  --testo-chiaro: #cfe6f7;

  /* --- testo scritto sopra l'intestazione e il fondo pagina ---
         Serve perche' un tema chiaro (riquadri di carta avorio, testo scuro)
         tiene comunque l'intestazione scura: il testo del menu non puo'
         seguire il colore del testo dei riquadri. Nei temi scuri questi tre
         valori sono gli stessi di --testo, --testo-tenue e --accento. */
  --testo-intestazione: #e2edf9;
  --testo-intestazione-tenue: #b0c0d8;
  --accento-intestazione: #67e8f9;

  /* --- tipografia: solo famiglie gia' installate, niente da scaricare --- */
  --carattere: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --carattere-titolo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- raccordo degli angoli: cambia con il tema --- */
  --raggio-scatola: 3px 24px 3px 24px;
  --raggio-bottone: 9px;

  /* --- testo del pulsante principale: il suo fondo e' scuro in tutti i temi,
         compresi quelli chiari, quindi non segue --testo-forte --- */
  --testo-bottone: #ffffff;

  /* --- colori di stato: uguali in tutti i temi, perche' un errore deve
         restare riconoscibile a colpo d'occhio --- */
  --ok: #8df6c0;
  --attenzione: #fcd34d;
  --errore: #fca5a5;
  --sfondo-ok: #10312a;
  --bordo-ok: #2f7d58;
  --sfondo-attenzione: #332a12;
  --bordo-attenzione: #8a6d2a;
  --sfondo-errore: #351a22;
  --bordo-errore: #8d3b4b;

  /* --- superfici --- */
  --sfondo-pagina: radial-gradient(ellipse at 50% 0, #163651, transparent 60%), #030912;
  --sfondo-header: linear-gradient(#263b4d, #091420);
  --sfondo-footer: #08121e;
  --sfondo-pannello: linear-gradient(135deg, #103447e8, #101a30f2);
  --sfondo-strumenti: linear-gradient(#23394c, #0c1b2b);
  --sfondo-campo: #0c192e;
  --sfondo-bottone: linear-gradient(120deg, #135d79, #3a326b);
  --sfondo-bottone-2: #122239;
  --testo-bottone-2: #d5f7ff;
  --sfondo-pericolo: linear-gradient(120deg, #7a2740, #3a1a2b);
  --sfondo-contatore: #0c1d31;
  --sfondo-messaggio: #142c40;
  --sfondo-badge: #15384a;
  --testo-badge: #9eefff;
  --sfondo-badge-alt: #2b2350;
  --testo-badge-alt: #d8ccff;
  --sfondo-badge-caldo: #4a2a15;
  --testo-badge-caldo: #ffd9a8;
  --riga-hover: #0e2235;
  --riga-attiva: #15314a;

  /* --- bordi --- */
  --bordo-header: #376073;
  --bordo-footer: #345064;
  --bordo-campo: #395575;
  --bordo-tabella: #27405c;
  --bordo-barra: #39758b;
  --testo-barra: #9cf4ff;
  --bordo-tondo: #396a88;
  --bordo-messaggio: #326784;
  --bordo-strumenti: #45667e;
  --bordo-alto-pannello: #66d9ec;

  /* --- aloni e messa a fuoco --- */
  --alone-tenue: #22d3ee0d;
  --alone: #22d3ee33;
  --alone-medio: #22d3ee55;
  --alone-forte: #22d3ee88;
  --alone-accento: #67e8f944;
  --alone-alt: #a78bfa55;
  --alone-alt-tenue: #a78bfa22;
  --fuoco: #51faff;

  /* --- plancia e ologramma --- */
  --sfondo-plancia:
    radial-gradient(circle at 78% 26%, #ffffff 0 1px, transparent 2px),
    radial-gradient(circle at 30% 18%, #c9f5ff 0 1px, transparent 2px),
    radial-gradient(circle at 56% 70%, #fff 0 1px, transparent 2px),
    radial-gradient(ellipse at 80% 40%, #43317488, transparent 45%),
    linear-gradient(125deg, #020712, #10263b);
  --bordo-plancia: #345064;
  --sfondo-plancia-testo: #06111bc9;
  --sfondo-ologramma: #08253b55;
  --bordo-ologramma: #67e8f966;
  --raggio: linear-gradient(0deg, #22d3ee33, transparent);
  --orbita: #a78bfa88;
  --sfondo-libro:
    repeating-linear-gradient(0deg, #22d3ee07 0 3px, #67e8f922 3px 4px),
    linear-gradient(135deg, #38bdf833, #a78bfa44);
  --testo-libro: #cffafe;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sfondo-pagina);
  color: var(--testo);
  font: 16px/1.55 var(--carattere);
  min-height: 100vh;
}

a { color: var(--accento); }
a:hover { color: var(--testo-forte); }

.salta {
  position: absolute; left: -9999px; top: 0; background: var(--sfondo-campo); color: var(--testo-forte);
  padding: 12px 18px; z-index: 50;
}
.salta:focus { left: 8px; top: 8px; }

/* ----------------------------------------------------------- intestazione */

header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
  padding: 18px 5%;
  background: var(--sfondo-header);
  border-bottom: 5px ridge var(--bordo-header);
  box-shadow: 0 8px 30px #0008;
  color: var(--testo-intestazione);
}
.marchio { display: flex; flex-direction: column; gap: 4px; }
.marchio strong { font-size: 20px; letter-spacing: .5px; font-family: var(--carattere-titolo); }
.tag { color: var(--accento-intestazione); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; }

nav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

main {
  max-width: 1360px; margin: 0 auto; padding: 24px 20px 60px;
}

.barra-stato {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: 2px; color: var(--testo-barra);
  border-bottom: 1px solid var(--bordo-barra); padding: 10px 4px; margin-bottom: 20px;
  text-transform: uppercase;
}
.barra-stato span:first-child:before { content: '\25CF  '; color: var(--ok); }

/* ------------------------------------------------------------- controlli */

button, .bottone, input, select, textarea {
  font: inherit;
  padding: 11px 14px;
  border-radius: var(--raggio-bottone);
  border: 1px solid var(--bordo-campo);
}
button, .bottone {
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  background: var(--sfondo-bottone);
  border-color: var(--bordo-chiaro);
  color: var(--testo-bottone);
}
button:hover, .bottone:hover {
  border-color: var(--accento); box-shadow: 0 0 16px var(--alone); color: var(--testo-bottone);
}
button:focus-visible, .bottone:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid var(--fuoco); outline-offset: 3px;
}
button.secondario { background: var(--sfondo-bottone-2); color: var(--testo-bottone-2); }
button.pericolo { background: var(--sfondo-pericolo); }
button[disabled] { opacity: .5; cursor: not-allowed; }

input, select, textarea { background: var(--sfondo-campo); color: var(--testo); max-width: 100%; width: 100%; }
textarea { min-height: 90px; }
label { display: block; margin: 0 0 14px; }
label > span { display: block; margin-bottom: 6px; color: var(--testo-tenue); font-size: 14px; }
label.riga { display: flex; align-items: center; gap: 10px; }
label.riga input { width: auto; }
/* Nelle caselle di spunta l'etichetta sta sulla stessa riga, senza stacco. */
label.riga > span { margin: 0; }

/* Larghezze dei moduli: classi al posto degli stili scritti nelle pagine,
   così la Content-Security-Policy può restare severa (niente stili inline). */
.stretto { max-width: 520px; }
.medio { max-width: 720px; }
.centrato { margin: 40px auto; max-width: 760px; }
.staccato { margin: 22px 0; }
.passo-attuale { border-color: var(--accento); color: var(--testo-forte); }
tr.riga-attiva td { background: var(--riga-attiva); }
fieldset { border: 1px solid var(--bordo); border-radius: 12px; padding: 16px; margin: 0 0 18px; }
legend { padding: 0 8px; color: var(--accento-tenue); font-size: 14px; }

.in-linea { display: inline-block; margin: 0 6px 6px 0; }
.azioni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }

/* --------------------------------------------------------------- riquadri */

h1 {
  font-size: clamp(28px, 4.5vw, 48px); line-height: 1.1; letter-spacing: -1px; margin: 10px 0 14px;
  font-family: var(--carattere-titolo);
}
h2 { font-size: 22px; margin: 0 0 12px; font-family: var(--carattere-titolo); }
h3 { font-size: 17px; margin: 18px 0 8px; color: var(--accento-tenue); }

.scatola, .scheda {
  background: var(--sfondo-pannello);
  border: 1px solid var(--bordo);
  border-top: 2px solid var(--bordo-alto-pannello);
  border-radius: var(--raggio-scatola);
  padding: 20px;
  box-shadow: inset 0 0 26px var(--alone-tenue), 0 10px 30px #0005;
  position: relative;
  min-width: 0;
}
.scatola + .scatola { margin-top: 18px; }
.scheda:hover { border-color: var(--accento); }
.scheda:after {
  content: ''; position: absolute; right: 12px; top: 12px;
  width: 30px; height: 3px; background: var(--accento); box-shadow: 0 6px var(--alone-accento);
}

.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.griglia-larga { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; }

.strumenti {
  background: var(--sfondo-strumenti);
  padding: 18px;
  border: 2px solid var(--bordo-strumenti);
  border-radius: 8px 8px 26px 26px;
  box-shadow: 0 10px 20px #0005;
  margin: 20px 0;
}
.strumenti .campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

.muted, .tenue { color: var(--testo-tenue); font-size: 14px; }
.badge {
  background: var(--sfondo-badge); color: var(--testo-badge); padding: 4px 8px; border-radius: 6px;
  font-size: 12px; display: inline-block; margin: 2px 4px 2px 0;
}
.badge.viola { background: var(--sfondo-badge-alt); color: var(--testo-badge-alt); }
.badge.caldo { background: var(--sfondo-badge-caldo); color: var(--testo-badge-caldo); }

.messaggio {
  padding: 14px 16px; border-radius: 10px; border: 1px solid var(--bordo-messaggio);
  background: var(--sfondo-messaggio); margin: 0 0 16px;
}
.messaggio.ok { border-color: var(--bordo-ok); background: var(--sfondo-ok); }
.messaggio.errore { border-color: var(--bordo-errore); background: var(--sfondo-errore); }
.messaggio.attenzione { border-color: var(--bordo-attenzione); background: var(--sfondo-attenzione); }

.esito-ok { color: var(--ok); }
.esito-attenzione { color: var(--attenzione); }
.esito-errore { color: var(--errore); }

table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--bordo-tabella); vertical-align: top; }
th { color: var(--accento-tenue); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
tr:hover td { background: var(--riga-hover); }
.tabella-scorrevole { overflow-x: auto; }

.paginazione { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 22px 0; }

footer {
  border-top: 3px ridge var(--bordo-footer); background: var(--sfondo-footer);
  padding: 22px 20px; text-align: center; color: var(--testo-intestazione-tenue);
}

/* ------------------------------------------------------------ ologrammi */

.plancia {
  overflow: hidden; padding: 32px;
  border: 10px ridge var(--bordo-plancia); border-radius: 70px 70px 24px 24px;
  background: var(--sfondo-plancia);
  background-size: 89px 113px, 157px 181px, 213px 149px, auto, auto;
  box-shadow: inset 0 0 50px #000, 0 0 28px var(--alone);
  margin-bottom: 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: center;
  position: relative;
}
.plancia-testo {
  background: var(--sfondo-plancia-testo); padding: 22px; border-left: 3px solid var(--accento);
  position: relative; z-index: 1;
}
.plancia-testo p { color: var(--testo-chiaro); }

.ologramma {
  height: 290px; position: relative; display: grid; place-items: center;
  background: var(--sfondo-ologramma); border: 1px solid var(--bordo-ologramma); border-radius: 30px;
  perspective: 800px; isolation: isolate;
}
.ologramma:before {
  content: ''; position: absolute; bottom: 24px; width: 210px; height: 60px;
  border: 2px solid var(--accento); border-radius: 50%;
  box-shadow: 0 0 24px var(--alone-forte), inset 0 0 30px var(--alone-medio);
  transform: rotateX(50deg);
}
.raggio {
  position: absolute; bottom: 48px; width: 215px; height: 220px;
  clip-path: polygon(35% 100%, 65% 100%, 100% 0, 0 0);
  background: var(--raggio); z-index: -1;
}
.orbita {
  position: absolute; width: 240px; height: 175px; border: 1px solid var(--orbita);
  border-radius: 50%; transform: rotate(-25deg); box-shadow: 0 0 15px var(--alone-alt-tenue);
}
.libro-olo {
  width: 120px; height: 160px;
  border: 2px solid var(--accento-tenue); border-left: 10px double var(--accento);
  border-radius: 5px 13px 13px 5px;
  transform: rotateY(-25deg) rotateZ(-9deg);
  background: var(--sfondo-libro);
  box-shadow: 0 0 35px var(--alone-medio), inset 0 0 28px var(--alone-accento),
              14px 8px 0 -6px var(--alone-alt);
  display: grid; place-items: center; text-align: center;
  color: var(--testo-libro); text-shadow: 0 0 14px var(--accento);
  font-size: 15px; letter-spacing: 3px;
  animation: levita 6s ease-in-out infinite;
}
.libro-olo span { font-size: 36px; display: block; margin-bottom: 10px; }
.didascalia {
  position: absolute; bottom: 6px; font-size: 11px; letter-spacing: 2px; color: var(--accento-tenue);
}
@keyframes levita { 50% { transform: translateY(-14px) rotateY(-12deg) rotateZ(-5deg); } }

.scheda-libro:before {
  content: ''; display: block; width: 34px; height: 40px; margin-bottom: 14px;
  border: 1px solid var(--accento); border-left: 5px double var(--accento);
  background: repeating-linear-gradient(0deg, transparent 0 3px, var(--alone-accento) 3px 4px);
  box-shadow: 0 0 13px var(--alone); transform: skewY(-8deg);
}

.contatore {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border: 1px solid var(--bordo); border-radius: 12px;
  background: var(--sfondo-contatore); min-width: 140px;
}
.contatore .numero { font-size: 30px; color: var(--accento); line-height: 1; }
.fila-contatori { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }

.flusso { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.flusso span {
  padding: 10px 16px; border: 1px solid var(--bordo-tondo); border-radius: 30px; color: var(--accento-tenue);
  font-size: 14px;
}

.elenco-pulito { list-style: none; padding: 0; margin: 0; }
.elenco-pulito li { padding: 8px 0; border-bottom: 1px solid var(--bordo-tabella); }

/* ------------------------------------------------ scelta del tema (Aspetto) */

/* Tessere di scelta del tema. Ogni tessera porta la classe del tema che
   rappresenta, quindi i tre pallini mostrano i colori veri di quel tema
   anche mentre la pagina ne sta usando un altro. */
.temi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0 0 16px; }
.tessera {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  border: 1px solid var(--bordo); border-radius: 12px; padding: 14px;
  background: var(--sfondo-campo); cursor: pointer;
}
.tessera:hover { border-color: var(--accento); }
.tessera > span { display: block; margin: 0; color: var(--testo); font-size: 15px; }
.tessera input { width: auto; margin-top: 4px; flex: none; }
.tessera-nome { display: block; }
.tessera-nota { display: block; color: var(--testo-tenue); font-size: 13px; margin-top: 3px; }
.tessera-ora { display: block; color: var(--ok); font-size: 12px; margin-top: 4px; }

.campione { display: flex; gap: 5px; margin-top: 8px; }
.campione i {
  width: 18px; height: 18px; border-radius: 50%; display: inline-block;
  border: 1px solid var(--bordo-chiaro);
}
.campione .c1 { background: var(--accento); }
.campione .c2 { background: var(--accento-alt); }
.campione .c3 { background: var(--fondo-2); }
.campione .c4 { background: var(--sfondo-bottone); }

/* ------------------------------------------------------- movimento ridotto */

body.quiete .libro-olo { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .libro-olo { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------- telefoni */

@media (max-width: 860px) {
  .plancia { grid-template-columns: 1fr; padding: 18px; border-width: 6px; border-radius: 40px 40px 18px 18px; }
  .ologramma { height: 250px; }
  .griglia-larga { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  header { padding: 14px; }
  nav .bottone, nav button { padding: 9px 11px; font-size: 14px; }
  main { padding: 16px 12px 40px; }
  .barra-stato { font-size: 10px; }
  .scatola, .scheda { padding: 16px; }
  table { font-size: 14px; }
  .temi { grid-template-columns: 1fr; }
}

@media print {
  body { background: #fff; color: #000; }
  header, footer, nav, .strumenti { display: none; }
  .scatola, .scheda { border: 1px solid #999; box-shadow: none; background: #fff; color: #000; }
}