/* -------------------------------------------------------------------------------------------------
   PARIDE_SITO - foglio di stile del sito di PARIDE
   Copyright (c) 2026 Arato Ingegneria. Tutti i diritti riservati.
   La struttura e' quella del sito di NEX; i colori sono quelli di PARIDE: la grafite
   dell'intestazione (#1B1D21), l'accento blu (#4F8FD6) e il verde del logo «P>_» (#4ADE80).
   Niente stili nelle pagine (la Content-Security-Policy li vieta): tutto passa da questo file.
   ------------------------------------------------------------------------------------------------- */

:root {
  --sfondo: #f5f6f8;
  --carta: #ffffff;
  --testo: #1b1d21;
  --tenue: #5a6170;
  --linea: #dde1e6;
  --accento: #2f6fb8;
  --accento-chiaro: #e3eefa;
  --accento-testo: #1f5594;
  --marchio: #0f1a14;
  --verde: #2f9e5c;
  --verde-chiaro: #e3f6ea;
  --avviso: #9b2c2c;
  --avviso-sfondo: #fdecec;
  --conferma: #1f6b3a;
  --conferma-sfondo: #e6f6ea;
  --codice: #eef1f5;
  --ombra: 0 1px 2px rgba(27, 29, 33, .06), 0 4px 16px rgba(27, 29, 33, .05);
  --raggio: 10px;
  --larghezza: 1180px;
  color-scheme: light;
}

/* il tema scuro segue il sistema, salvo data-theme="light" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sfondo: #1b1d21;
    --carta: #232529;
    --testo: #e6e8eb;
    --tenue: #a3a9b4;
    --linea: #33363c;
    --accento: #4f8fd6;
    --accento-chiaro: #1e2c3d;
    --accento-testo: #8fbaec;
    --verde: #4ade80;
    --verde-chiaro: #17301f;
    --avviso: #ffb3b3;
    --avviso-sfondo: #3a1d1d;
    --conferma: #9ee6b4;
    --conferma-sfondo: #17301f;
    --codice: #2b2d30;
    --ombra: none;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --sfondo: #1b1d21;
  --carta: #232529;
  --testo: #e6e8eb;
  --tenue: #a3a9b4;
  --linea: #33363c;
  --accento: #4f8fd6;
  --accento-chiaro: #1e2c3d;
  --accento-testo: #8fbaec;
  --verde: #4ade80;
  --verde-chiaro: #17301f;
  --avviso: #ffb3b3;
  --avviso-sfondo: #3a1d1d;
  --conferma: #9ee6b4;
  --conferma-sfondo: #17301f;
  --codice: #2b2d30;
  --ombra: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Open Sans", "Noto Sans", Ubuntu, sans-serif;
}

a { color: var(--accento-testo); text-underline-offset: 2px; }
a:hover { color: var(--accento); }

code, pre, kbd {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-size: .9em;
}

code { background: var(--codice); padding: .1em .35em; border-radius: 5px; }

pre {
  background: var(--codice);
  padding: 14px 16px;
  border-radius: var(--raggio);
  overflow-x: auto;
  line-height: 1.45;
  border: 1px solid var(--linea);
}

pre code { background: none; padding: 0; }

img { max-width: 100%; height: auto; }

/* ---------------- testata */

.testata {
  background: var(--carta);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 10;
}

.testata-dentro {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: var(--testo);
  text-decoration: none;
}

.menu { display: flex; gap: 4px; flex-wrap: wrap; }

.menu a {
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--tenue);
  font-weight: 500;
}

.menu a:hover { background: var(--accento-chiaro); color: var(--accento-testo); }
.menu a[aria-current="page"] { background: var(--accento-chiaro); color: var(--accento-testo); }

/* i gruppi del menu: il nome, e la tendina che si apre al passaggio o con la tastiera */
.gruppo { position: relative; }
.gruppo .capo { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--testo); }
.gruppo.attivo .capo { background: var(--accento-chiaro); color: var(--accento-testo); }
.freccia { font-size: .7em; opacity: .7; }
.tendina {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  padding: 6px;
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  z-index: 20;
}
.gruppo:hover .tendina, .gruppo:focus-within .tendina { display: block; }
.tendina a { display: block; padding: 8px 10px; white-space: nowrap; }
.tendina .titolo-colonna { font-weight: 700; color: var(--accento-testo); border-bottom: 1px solid var(--linea); margin-bottom: 2px; }
.tendina .separata { border-top: 1px solid var(--linea); margin-top: 2px; }

.cerca { margin-left: auto; }

.cerca input {
  width: 240px;
  max-width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--sfondo);
  color: var(--testo);
  font: inherit;
}

.utente { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.utente form { margin: 0; }

/* il selettore della lingua, in fondo alla testata */
.lingua {
  font-size: .9rem;
  padding: 3px 9px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  color: var(--tenue);
  text-decoration: none;
}
.lingua:hover { color: var(--accento-testo); border-color: var(--accento); }

/* ---------------- pagina */

.pagina {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 28px 16px 48px;
}

.pagina.con-indice {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.indice {
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  font-size: .9rem;
  border-right: 1px solid var(--linea);
  padding-right: 12px;
}

.indice-titolo {
  font-weight: 600;
  color: var(--tenue);
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .08em;
  margin-top: 0;
}

.indice ul { list-style: none; margin: 0; padding: 0; }
.indice li { margin: 2px 0; }
.indice li.l3 { padding-left: 14px; }
.indice a { color: var(--tenue); text-decoration: none; display: block; padding: 2px 0; }
.indice a:hover { color: var(--accento-testo); }

.contenuto { min-width: 0; }

.briciole { color: var(--tenue); font-size: .9rem; margin-top: 0; }

h1 { font-size: 2rem; line-height: 1.25; margin: 0 0 16px; }
h2 { font-size: 1.45rem; margin-top: 2em; padding-top: .3em; border-top: 1px solid var(--linea); }
h3 { font-size: 1.15rem; margin-top: 1.6em; }
h2, h3 { scroll-margin-top: 80px; }

.testo h1:first-child { margin-top: 0; }
.testo table, table.elenco { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: .95rem; }
.testo th, .testo td, table.elenco th, table.elenco td {
  border-bottom: 1px solid var(--linea);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.testo th, table.elenco th { background: var(--codice); font-weight: 600; }
.testo blockquote {
  margin: 16px 0;
  padding: 4px 16px;
  border-left: 4px solid var(--accento);
  background: var(--accento-chiaro);
  border-radius: 0 var(--raggio) var(--raggio) 0;
}
.testo img { border-radius: var(--raggio); border: 1px solid var(--linea); box-shadow: var(--ombra); }

.tabella-larga { overflow-x: auto; }

/* ---------------- schede (elenco delle guide) */

.schede {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.schede a {
  display: block;
  height: 100%;
  padding: 16px 18px;
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  text-decoration: none;
  color: var(--testo);
  box-shadow: var(--ombra);
}

.schede a:hover { border-color: var(--accento); }
.schede strong { display: block; margin-bottom: 6px; color: var(--accento-testo); }
.schede span { color: var(--tenue); font-size: .92rem; }

/* ---------------- la presentazione: il riquadro in cima e le funzioni a schede */

.vetrina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 28px 30px;
  margin: 0 0 28px;
  background: var(--marchio);
  color: #e6f4ea;
  border-radius: 14px;
}
.vetrina h1 { color: #ffffff; margin: 0 0 10px; font-size: 2.1rem; }
.vetrina p { margin: 0 0 10px; color: #cfe3d6; font-size: 1.08rem; }
.vetrina .logo { width: 120px; height: 120px; border: 0; box-shadow: none; }
.vetrina a { color: #b6f5cb; }
.vetrina .azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.vetrina .azioni a { display: inline-block; padding: .5em 1.05em; border-radius: 8px; font-weight: 600; text-decoration: none;
                     border: 1px solid #4ade80; color: #b6f5cb; }
.vetrina .azioni a.primo { background: #4ade80; color: #0f1a14; }

.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin: 18px 0 8px;
}
.griglia .scheda {
  padding: 14px 18px;
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}
.griglia .scheda h3 { margin: 4px 0 6px; font-size: 1.05rem; color: var(--accento-testo); }
.griglia .scheda p { margin: 0; color: var(--tenue); font-size: .95rem; }

/* lo stato delle voci nella pagina delle funzioni */
.stato { font-size: .78rem; padding: 2px 8px; border-radius: 99px; white-space: nowrap; vertical-align: middle; }
.stato.fatto { background: var(--verde-chiaro); color: var(--conferma); }
.stato.corso { background: var(--accento-chiaro); color: var(--accento-testo); }
.stato.dopo { background: var(--codice); color: var(--tenue); }

/* ---------------- schermate */

.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; margin: 16px 0 8px; }
.galleria figure { margin: 0; }
.galleria img { display: block; width: 100%; }
.galleria figcaption { color: var(--tenue); font-size: .9rem; margin-top: 6px; }
figure.grande { margin: 16px 0; }
figure.grande figcaption { color: var(--tenue); font-size: .9rem; margin-top: 6px; }

/* ---------------- moduli */

.login {
  max-width: 380px;
  margin: 40px auto;
  padding: 32px 30px;
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: var(--ombra);
  text-align: center;
}

.login h1 { margin: 10px 0 0; letter-spacing: .08em; }
.login .sotto { color: var(--tenue); margin: 4px 0 22px; }
.login form, .modulo { text-align: left; display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
.login .nota { margin-top: 22px; }

label { font-weight: 500; font-size: .95rem; margin-top: 8px; }

input, select, textarea {
  font: inherit;
  color: var(--testo);
  background: var(--sfondo);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 8px 10px;
}

input:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 1px;
}

button {
  font: inherit;
  font-weight: 600;
  margin-top: 12px;
  padding: 9px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accento);
  color: #ffffff;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) button { color: #0d1826; }
}

button:hover { filter: brightness(1.08); }
button.piatto { background: none; color: var(--tenue); margin: 0; padding: 4px 8px; font-weight: 500; }
button.piatto:hover { color: var(--accento-testo); }
button.pericolo { background: var(--avviso); color: #ffffff; }

fieldset { border: 1px solid var(--linea); border-radius: 8px; margin-top: 10px; }
legend { font-weight: 500; padding: 0 6px; }
label.casella { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-top: 4px; }
label.casella.piccola { font-size: .85rem; }

.avviso, .conferma { padding: 10px 14px; border-radius: 8px; }
.avviso { background: var(--avviso-sfondo); color: var(--avviso); }
.conferma { background: var(--conferma-sfondo); color: var(--conferma); }
.nota-lingua { padding: 10px 14px; border-radius: 8px; background: var(--codice); color: var(--tenue); }

.nota, .conteggio, .dove { color: var(--tenue); font-size: .9rem; }
.sotto { color: var(--tenue); }

dl.dati { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
dl.dati dt { color: var(--tenue); }
dl.dati dd { margin: 0; }

/* ---------------- ricerca */

.cerca-grande { display: flex; gap: 8px; max-width: 640px; }
.cerca-grande input { flex: 1; }
.cerca-grande button { margin-top: 0; }

ol.risultati { padding-left: 1.2em; }
ol.risultati li { margin: 0 0 18px; }
ol.risultati a { text-decoration: none; }
ol.risultati a strong { display: block; }
ol.risultati p { margin: 4px 0 0; }
mark { background: var(--accento-chiaro); color: var(--accento-testo); padding: 0 2px; border-radius: 3px; }

/* ---------------- amministrazione e scarichi */

.schede-menu a { margin-right: 14px; font-weight: 500; }
.schede-menu a[aria-current="page"] { text-decoration: none; color: var(--testo); }
table.utenti input[type="date"], table.utenti input[type="password"] { width: 150px; }
td.centro { text-align: center; }
td.azioni { white-space: nowrap; }
td.azioni button { margin: 0 6px 0 0; padding: 6px 10px; }
.filtri { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.filtri label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.filtri button { margin: 0; }
.evento { font-family: ui-monospace, monospace; font-size: .85rem; }
.evento.login_ko, .evento.login_bloccato { color: var(--avviso); }
.evento.scarico { color: var(--accento-testo); }
tr.famiglia td { background: var(--codice); }

.rilascio { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 4px 18px 10px; margin: 16px 0; }
code.impronta { font-size: .72rem; word-break: break-all; }
td.numero, th.numero { white-space: nowrap; text-align: right; }
.avviso.beta { margin: 14px 0; padding: 12px 16px; border-radius: var(--raggio); background: var(--accento-chiaro); color: var(--accento-testo); }
.avviso.beta strong { text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
a.tenue { color: var(--tenue); font-size: .85rem; margin-left: 6px; }

/* ---------------- grafici a barre in SVG (statistiche; colori del tema, chiaro e scuro) */

.grafico { margin: 20px 0; overflow-x: auto; }
.grafico svg { display: block; width: 100%; min-width: 520px; max-width: 680px; height: auto; }
.grafico .barra { fill: var(--accento); }
.grafico .barra.chiara { fill: var(--accento-chiaro); }
.grafico .barra:hover { fill: var(--accento-testo); }
.grafico .etichetta { fill: var(--testo); font-size: 13px; }
.grafico figcaption { color: var(--tenue); font-size: .9rem; margin-top: 4px; }
.grafici-visite { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px 24px; }
.grafici-visite .grafico svg { min-width: 0; }
.numero .tenue, p.tenue { color: var(--tenue); font-size: .85rem; }

/* ---------------- piede */

.piede { border-top: 1px solid var(--linea); color: var(--tenue); font-size: .85rem; text-align: center; padding: 18px 16px 30px; }
.piede p.autore { color: var(--testo); font-size: .95rem; }
.piede a { color: var(--accento-testo); }

/* ---------------- schermi stretti */

@media (max-width: 860px) {
  .pagina.con-indice { display: block; }
  .indice { display: none; }
  .cerca { margin-left: 0; width: 100%; }
  .cerca input { width: 100%; }
  h1 { font-size: 1.6rem; }
  .vetrina { grid-template-columns: 1fr; padding: 22px 20px; }
  .vetrina .logo { width: 72px; height: 72px; }
  .galleria { grid-template-columns: 1fr; }
}

/* la bandiera di un paese nelle statistiche (emoji dei due simboli regionali) */
.bandiera { font-size: 1.15em; margin-right: 4px; }