/* =====================================================================
   SKEDA.CSS — Schede dei documenti di PaoloG
   Stile "schedario": cartoncino azzurro, spirale in alto, timbri d'epoca.

   Indice
     1. Caratteri
     2. Colori e misure (modificabili qui in un colpo solo)
     3. Pagina
     4. Cartoncino, spirale, bordo della copertina
     5. Intestazione (tipo, titolo)
     6. Timbro tondo d'archivio
     7. Livello di lettura (modulo con crocetta)
     8. Riquadri con linguetta (originale, traduzione, note)
     9. Campi (etichetta : valore)
    10. Note (paragrafi e citazioni)
    11. Piede con timbri datari
    12. Schermi stretti
    13. Stampa
    14. Raccolte: registro dei documenti
    15. Pagine dei cassetti (indici)
   ===================================================================== */


/* ---------- 1. Caratteri ------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Special+Elite&family=Barlow+Condensed:wght@500&display=swap");


/* ---------- 2. Colori e misure ------------------------------------- */
:root{
  /* fondo e cartoncino */
  --tavolo:        #7f9cbc;   /* sfondo della pagina */
  --carta:         #e0eef9;   /* cartoncino della scheda */
  --riga:          #abc7e3;   /* righe del cartoncino */

  /* inchiostri */
  --blu:           #245f9e;   /* linea d'intestazione, linguette, bordi forti */
  --blu-scuro:     #1f3d5c;   /* etichette in grassetto */
  --testo:         #1c2733;   /* testo principale */
  --valore:        #26323f;   /* valori dei campi */
  --link:          #1a4d8f;
  --nero-timbro:   #161616;   /* timbro tondo e modulo */
  --blu-datario:   #2b7fd0;   /* timbri con la data */

  /* riquadri */
  --bordo-riquadro:#7fa3c8;
  --fondo-riquadro:#edf5fc;   /* documento originale */
  --fondo-trad:    #fdfbf4;   /* traduzione (avorio tenue) */
  --fondo-note:    #f3f8fd;
  --linguetta-note:#c9dcef;

  /* spirale e copertina */
  --fascia:        #3a3a3a;   /* fascia scura sotto la spirale */
  --ombra:         30,50,80;  /* RGB delle ombre */

  /* misure */
  --passo:         28px;      /* interlinea = distanza fra le righe */
  --margine-lato:  56px;      /* margine interno sinistro/destro */

  /* caratteri */
  --f-macchina:    "Courier Prime", "Courier New", monospace;
  --f-titolo:      "Special Elite", "Courier New", monospace;
  --f-testo:       Georgia, "Times New Roman", serif;
  --f-datario:     "Barlow Condensed", "DIN Condensed", "Arial Narrow", sans-serif;
}


/* ---------- 3. Pagina ---------------------------------------------- */
*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }

body{
  background: var(--tavolo);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(0,0,0,.12), transparent 60%);
  color: var(--testo);
  font-family: var(--f-testo);
  font-size: 16px;
  line-height: var(--passo);
  padding: 76px 16px 72px;          /* in alto lo spazio per la spirale */
  min-height: 100vh;
}

a{ color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover{ color: var(--blu); }


/* ---------- 4. Cartoncino, spirale, bordo della copertina ---------- */
.scheda{
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--margine-lato) var(--passo);
  border-top: 22px solid var(--fascia);       /* fascia scura */
  border-radius: 0 0 6px 6px;
  background-color: var(--carta);
  background-image: repeating-linear-gradient(  /* righe che scorrono col testo */
    to bottom,
    transparent 0,
    transparent calc(var(--passo) - 1px),
    var(--riga) calc(var(--passo) - 1px),
    var(--riga) var(--passo)
  );
  background-position: 0 var(--passo);
  box-shadow:
    0 0 0 1px rgba(20,40,70,.18),
    0 18px 40px rgba(var(--ombra),.45),
    0 4px 10px rgba(var(--ombra),.30);
}

/* bordo grigio chiaro della copertina, sopra la fascia scura */
.scheda::after{
  content: "";
  position: absolute;
  top: -50px; left: 0; right: 0;
  height: 28px;
  background: linear-gradient(to bottom, #b3b3b3, #d4d4d4 60%, #c4c4c4);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -3px 10px rgba(var(--ombra),.3);
  z-index: 1;
}

/* spirale: il disegno è in images/spirale.svg e si ripete in orizzontale */
.scheda::before{
  content: "";
  position: absolute;
  top: -50px; left: 14px; right: 14px;
  height: 80px;
  background: url("images/spirale.svg") space no-repeat center 0;
  background-size: 88px 80px;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(1px 2px 1px rgba(0,0,0,.25));
}


/* ---------- 5. Intestazione ---------------------------------------- */
.intestazione{
  margin: 0 calc(-1 * var(--margine-lato));
  padding: 70px 150px 34px 180px;             /* a sinistra lo spazio del timbro */
  background: var(--carta);                   /* niente righe nell'intestazione */
  border-bottom: 2px solid var(--blu);
  box-shadow: 0 3px 0 -1px var(--carta), 0 4px 0 -1px var(--blu);   /* doppia riga */
  text-align: center;
}
.intestazione .tipo{
  margin: 0;
  font-family: var(--f-macchina);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--blu-scuro);
}
.intestazione .tipo .protocollo{           /* numero di protocollo: rimanda al cassetto */
  color: var(--blu);
  text-decoration: none;
  border-bottom: 1.5px dotted var(--blu);
  white-space: nowrap;
}
.intestazione .tipo .protocollo:hover{ border-bottom-style: solid; }
.intestazione h1{
  margin: 8px 0 0;
  font-family: var(--f-titolo);
  font-weight: normal;
  font-size: clamp(26px, 5vw, 36px);
  line-height: 1.25;
}
.intestazione h1.titolo-lungo{              /* titoli oltre ~55 caratteri */
  font-size: clamp(22px, 4vw, 28px);
}
.intestazione .sottotitolo{                   /* facoltativo: autori, titolo originale… */
  margin: 8px 0 0;
  font-family: var(--f-macchina);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--blu-scuro);
}


/* ---------- 6. Timbro tondo d'archivio ----------------------------- */
.timbri{
  position: absolute;
  top: 30px; left: 0; right: 0;
  pointer-events: none;
  z-index: 2;
}
.timbro-tondo{
  position: absolute;
  left: 22px; top: 0;
  width: 138px; height: 138px;
  transform: rotate(-14deg);
  color: var(--nero-timbro);
  opacity: .82;
  font-family: var(--f-titolo);
}
.timbro-tondo text{
  fill: currentColor;
  stroke: currentColor;
  stroke-width: .5px;
  font-weight: 700;
}


/* ---------- 7. Livello di lettura ---------------------------------- */
/* Nell'HTML si mette la classe "si" sulla casella giusta (va bene anche "sì") */
.livello-lettura{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: none;
  margin: 30px 0 0;
  padding: 12px 20px 8px;
  border: 1.5px solid #2b2b2b;
  outline: 1px solid #2b2b2b;                 /* doppia cornice */
  outline-offset: 3px;
  background: rgba(255,255,255,.35);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 16px;
  font-family: var(--f-titolo);
  font-size: 15px;
  line-height: 1.9;
  color: #2b2b2b;
}
.voce-livello{                                /* titolo interrotto nel bordo */
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  padding: 0 10px;
  background: var(--carta);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.casella{
  position: relative;
  white-space: nowrap;
  color: #555;
}
.casella::before{                             /* la casella vuota */
  content: "";
  display: inline-block;
  vertical-align: -2px;
  width: 13px; height: 13px;
  margin-right: 6px;
  border: 1.5px solid #333;
  background: rgba(255,255,255,.4);
}
.casella.si,
.casella.sì{ color: #111; font-weight: 700; }
.casella.si::after,
.casella.sì::after{                           /* la crocetta grande */
  content: "";
  position: absolute;
  left: -5px; top: 50%;
  width: 24px; height: 24px;
  transform: translateY(-50%) rotate(-4deg);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%203.5%20L21%2020.5%20M20.5%203%20L3.5%2021%22%20stroke%3D%22%23111%22%20stroke-width%3D%223.6%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22/%3E%3C/svg%3E") no-repeat center / contain;
}


/* ---------- 8. Riquadri con linguetta ------------------------------ */
.riquadro{
  position: relative;
  margin: calc(var(--passo) * 2) 0 0;
  padding: calc(var(--passo) * .75) 22px calc(var(--passo) * .5);
  border: 1.5px solid var(--bordo-riquadro);
  border-radius: 0 8px 8px 8px;
  background: var(--fondo-riquadro);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}
.riquadro-titolo{                             /* la linguetta */
  position: absolute;
  top: -27px; left: -1.5px;
  padding: 0 16px;
  line-height: 26px;
  border: 1.5px solid var(--bordo-riquadro);
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  background: var(--fondo-riquadro);
  font-family: var(--f-macchina);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blu);
  white-space: nowrap;                        /* la linguetta resta su una riga */
  max-width: calc(100% + 3px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* traduzione: fondo avorio, barra e linguetta blu */
.riquadro.traduzione{
  border-left: 5px solid var(--blu);
  background: var(--fondo-trad);
}
.riquadro.traduzione .riquadro-titolo{
  left: -5px;
  background: var(--blu);
  border-color: var(--blu);
  color: #fff;
}
.traduzione dd.titolo a{ font-weight: 700; }

/* note */
.riquadro.note{ background: var(--fondo-note); }
.riquadro.note .riquadro-titolo{ background: var(--linguetta-note); }


/* ---------- 9. Campi (etichetta : valore) -------------------------- */
.campi{
  display: grid;
  grid-template-columns: 290px 1fr;
  column-gap: 20px;
  margin: 0;
}
.campi dt,
.campi dd{
  margin: 0;
  padding: 0;
  min-height: var(--passo);
  font-family: var(--f-macchina);
}
.campi dt{
  font-weight: 700;
  font-size: 15.5px;
  color: var(--blu-scuro);
}
.campi dd{
  font-size: 16px;
  color: var(--valore);
  overflow-wrap: anywhere;                    /* spezza i link lunghissimi */
}
.hash{
  letter-spacing: .02em;
  word-break: break-all;
}


/* etichette allineate a destra, a ridosso dei valori (solo su schermi larghi) */
@media (min-width: 681px){
  .campi dt{ text-align: right; }
}

/* ---------- 10. Note ----------------------------------------------- */
.note p{
  margin: 0 0 var(--passo);
  text-align: justify;
  hyphens: auto;
}
.note p:last-child{ margin-bottom: 0; }
.note blockquote{
  margin: 0 0 var(--passo);
  padding: 0 0 0 20px;
  border-left: 2px solid #4a6078;
  font-style: italic;
}


/* ---------- 11. Piede con timbri datari ---------------------------- */
.piede{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: calc(var(--passo) * 1.5);
  padding-bottom: var(--passo);
  font-family: var(--f-macchina);
}
.voce-versioni{
  font-weight: 700;
  font-size: 15.5px;
  color: var(--blu-scuro);
}
.datario{
  width: 92px; height: 21px;
  color: var(--blu-datario);
  opacity: .92;
  font-family: var(--f-datario);
}
.datario text{ fill: currentColor; }

.statcounter{ text-align: center; margin-top: 24px; }


/* ---------- 12. Schermi stretti ------------------------------------ */
@media (max-width: 760px){
  .timbri{
    position: static;
    display: flex;
    justify-content: center;
    margin: 34px 0 0;
  }
  .timbro-tondo{ position: static; width: 116px; height: 116px; }
  .intestazione{ padding: 18px 20px 18px; }
  .livello-lettura{
    left: auto; transform: none;
    width: fit-content; max-width: 100%;
    margin: 30px auto 0;
    font-size: 13.5px;
    gap: 0 12px;
  }
}

@media (max-width: 680px){
  :root{ --margine-lato: 20px; }
  body{ padding: 76px 10px 56px; }
  .riquadro{ padding-left: 12px; padding-right: 12px; }
  .riquadro-titolo{ font-size: 12px; letter-spacing: .08em; }
  .campi{ grid-template-columns: 1fr; }
  .campi dd{ padding-left: 12px; }
  .note p{ text-align: left; }
}


/* ---------- 14. Raccolte: registro dei documenti ------------------- */
/* Tabella in stile registro d'archivio, per le pagine che contengono
   più documenti tradotti (carteggi, conferenze…) */
.registro{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-macchina);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--valore);
}
.registro caption{
  caption-side: bottom;
  text-align: left;
  padding-top: 10px;
  font-size: 13px;
  color: #4a6078;
}
.registro th{
  padding: 6px 10px;
  text-align: left;
  vertical-align: bottom;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blu-scuro);
  border-bottom: 2px solid var(--blu);
}
.registro td{
  padding: 7px 10px;
  vertical-align: top;
  border-bottom: 1px dashed #b9c8d8;
}
.registro tr:last-child td{ border-bottom: none; }
.registro .num,
.registro .data{ white-space: nowrap; }
.registro .titolo a{ font-weight: 700; }
.registro .hash{
  font-size: 12px !important;
  letter-spacing: .02em;
  color: #4a6078;
}
.registro .mancante{ color: #a3312c; font-style: italic; }

/* commento breve dentro il riquadro di un singolo documento */
.riquadro .nota-doc{
  margin: 14px 0 4px;
  padding-top: 12px;
  border-top: 1px dashed #b9c8d8;
  font-family: var(--f-testo);
  text-align: justify;
  hyphens: auto;
}

/* note con sottotitoli ed elenchi */
.note h3{
  margin: 0;
  font-family: var(--f-macchina);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blu-scuro);
  line-height: var(--passo);
}
.note ul{
  margin: 0 0 var(--passo);
  padding-left: 22px;
}
.note li{ margin-bottom: 6px; text-align: justify; }

@media (max-width: 680px){
  .registro thead{ display: none; }
  .registro tr{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 12px;
    padding: 10px 0;
    border-bottom: 1px dashed #b9c8d8;
  }
  .registro tr:last-child{ border-bottom: none; }
  .registro td{ padding: 0; border: none; }
  .registro .titolo,
  .registro .hash{ grid-column: 1 / -1; }
  .registro .titolo{ margin-top: 4px; }
}


/* ---------- 15. Pagine dei cassetti (indici) ----------------------- */
.pagina-cassetto{ padding-top: 76px; }
.cassetto .intestazione{ padding: 64px 40px 30px !important; }
.cassetto .intestazione .tipo{
  font-size: 21px !important;
  letter-spacing: .3em;
}
.cassetto .intestazione h1{               /* nome del cassetto: stesso carattere della riga sopra */
  font-family: var(--f-macchina);
  font-weight: 700;
  font-size: clamp(30px, 6vw, 46px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blu-scuro);
  margin-top: 10px;
}
.intro-cassetto{
  margin: calc(var(--passo) * 1.5) 0 0;
  font-family: var(--f-macchina);           /* stesso carattere da macchina da scrivere */
  font-size: 15.5px;
  text-align: center;
  color: var(--blu-scuro);
}
.registro.indice .num{
  width: 5.2em;
  font-weight: 700;
  font-size: 13px;
  color: var(--blu);
  white-space: nowrap;
}
.registro.indice .data{
  width: 7.5em;
  font-size: 13.5px;
  color: #4a6078;
}
.registro.indice .titolo a{ font-size: 15px; }
.registro.indice .dettagli{
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  color: #4a6078;
}
.registro.indice .tipo-doc{
  width: 9.5em;
  text-align: right;
}
.registro.indice .natura,
.registro.indice .liv{
  display: inline-block;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
}
.registro.indice .natura{ color: var(--blu-scuro); font-weight: 700; }
.registro.indice .liv{
  display: block;
  margin-top: 4px;
  color: #555;
}
.registro.indice .liv::before{            /* piccole tacche: una, due o tre */
  content: "";
  display: inline-block;
  width: 22px; height: 7px;
  margin-right: 6px;
  vertical-align: 0;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 6px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 8px 0 / 6px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 16px 0 / 6px 7px no-repeat;
  opacity: .2;
}
.registro.indice .liv-divulgativa::before{
  background:
    linear-gradient(#333, #333) 0 0 / 6px 7px no-repeat,
    linear-gradient(#ccc, #ccc) 8px 0 / 6px 7px no-repeat,
    linear-gradient(#ccc, #ccc) 16px 0 / 6px 7px no-repeat; opacity: 1; }
.registro.indice .liv-media::before{
  background:
    linear-gradient(#333, #333) 0 0 / 6px 7px no-repeat,
    linear-gradient(#333, #333) 8px 0 / 6px 7px no-repeat,
    linear-gradient(#ccc, #ccc) 16px 0 / 6px 7px no-repeat; opacity: 1; }
.registro.indice .liv-impegnativa::before{
  background:
    linear-gradient(#333, #333) 0 0 / 6px 7px no-repeat,
    linear-gradient(#333, #333) 8px 0 / 6px 7px no-repeat,
    linear-gradient(#333, #333) 16px 0 / 6px 7px no-repeat; opacity: 1; }
.piede .torna{ font-weight: 700; text-decoration: none; }
.piede .torna:hover{ text-decoration: underline; }

@media (max-width: 680px){
  .cassetto .intestazione{ padding: 40px 16px 22px !important; }
  .registro.indice tr{ grid-template-columns: auto 1fr auto; }
  .registro.indice .num,
  .registro.indice .data{ width: auto; }
  .registro.indice .tipo-doc{ width: auto; grid-column: 3; grid-row: 1; }
  .registro.indice .titolo{ grid-column: 1 / -1; }
  .registro.indice .liv{ display: inline-block; margin: 0 0 0 10px; }
}


/* ---------- 13. Stampa --------------------------------------------- */
@media print{
  body{ background: none; padding: 0; }
  .scheda{ box-shadow: none; border: 1px solid #bbb; }
  .scheda::before, .scheda::after, .statcounter{ display: none; }
}