/* TEDxBergamo Team — allineato al Design System TEDxBergamo v0.2.0
   (tedxbergamo/design-system/), la cui fonte unica sono le TEDx Identity
   Guidelines di TED.

   ⚠️ La v0.2.0 ha tolto la palette derivata dal sito (#FF2F0A, #F86011, DM Sans):
   quei valori non erano prescritti da TED. Restano tre colori e un carattere.

   Le regole che vincolano questo foglio:
   1. La palette è #FF2B06 (TED Red), #000000, #FFFFFF. Non ce n'è altra.
   2. Helvetica è il carattere di TUTTE le comunicazioni TEDx, non solo del logo.
   3. Il rosso non porta testo corrente: su bianco sta a 3,75:1. Va bene per
      titoli ≥24px, accenti, filetti e riempimenti. Nient'altro.
   4. Bianco su rosso è anch'esso 3,75:1 → solo testo grande. Su fondo rosso il
      testo piccolo è NERO (5,60:1), non bianco.

   Grigi, spaziature, raggi e stati NON sono prescritti da TED: il design system
   li elenca fra le decisioni ancora da prendere. Quelli qui sotto sono scelte di
   questa app, tenute neutre e dichiarate come tali — se un giorno TEDxBergamo si
   dà una palette secondaria, si cambiano qui e basta.

   Deroga dichiarata: il corpo del testo sta a 15px perché questa è un'interfaccia
   densa di tabelle e form, non una pagina di lettura. */

:root {
  /* Prescritti da TED */
  --ted-red: #FF2B06;
  --ted-black: #000000;
  --ted-white: #FFFFFF;

  /* NON prescritti da TED — scelte di questa app, neutre di proposito */
  --ink: #1A1A1A;        /* testo corrente */
  --grey: #595959;       /* testo secondario — 7,0:1 su bianco */
  --line: #E2E2E2;
  --surface-1: #F9F9F9;
  --surface-2: #F3F3F3;
  --surface-3: #EDEDED;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px;

  --radius: 3px;
  --radius-pill: 999px;

  /* Helvetica per tutto, con Arial come ripiego previsto da TED */
  --font: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--ted-white);
  -webkit-font-smoothing: antialiased;
}

/* Il rosso non è un colore da testo: i link usano l'inchiostro con sottolineatura
   e diventano arancioni al passaggio, dove il contrasto conta meno. */
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ted-black); }

h1, h2, h3, h4 { font-weight: 500; margin: 0 0 var(--sp-3); }
h1 { font-size: 30px; line-height: 1.14; letter-spacing: -0.03em; }
h2 { font-size: 20px; line-height: 1.2; letter-spacing: -0.015em; }
h3 { font-size: 16px; line-height: 1.3; }

/* --- Impianto ---------------------------------------------------------- */
.guscio { display: flex; min-height: 100vh; }

.sidebar {
  width: 258px; flex: 0 0 258px;
  background: var(--ted-black); color: #fff;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marchio { padding: var(--sp-4) 20px var(--sp-3); border-bottom: 1px solid #1E1E1E; }

/* Il logo: Helvetica e #FF2B06, come impone TED. È l'unico posto dove
   quel rosso e quel carattere possono comparire. */
.logo {
  font-family: var(--font);
  font-size: 22px; font-weight: 400; letter-spacing: 0; line-height: 1;
}
.logo .tedx { color: var(--ted-red); }
.logo .loc { color: #fff; }
.marchio .sotto {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8A8F98; margin-top: var(--sp-2);
}

.menu { padding: var(--sp-3) 0; flex: 1; }
.menu a {
  display: block; padding: 9px 20px; color: #C9CCD1;
  font-size: 14px; font-weight: 500; border-left: 3px solid transparent;
  text-decoration: none;
}
.menu a:hover { background: #141414; color: #fff; }
.menu a.attivo {
  background: #141414; color: #fff; border-left-color: var(--ted-red);
}
.menu .gruppo {
  padding: var(--sp-4) 20px var(--sp-1); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6A6F78;
}

.piede-sidebar { border-top: 1px solid #1E1E1E; padding: var(--sp-3) 20px; font-size: 13px; }
.piede-sidebar .nome { color: #fff; font-weight: 500; }
.piede-sidebar .ruolo { color: #8A8F98; font-size: 12px; }
.piede-sidebar a { color: #C9CCD1; font-size: 12.5px; }
.piede-sidebar a:hover { color: #fff; }

.principale { flex: 1; min-width: 0; }
.testata {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-4) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.contenuto { padding: var(--sp-4) var(--sp-5) var(--sp-7); max-width: 1320px; }

/* --- Elementi ---------------------------------------------------------- */
.occhiello {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grey); margin-bottom: var(--sp-1);
}

.riquadro {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); background: var(--ted-white);
  margin-bottom: var(--sp-3);
}
.riquadro.nero { background: var(--ink); color: #fff; border-color: var(--ink); }
.riquadro.nero .occhiello, .riquadro.nero .etichetta { color: #A9AFB8; }
.riquadro.nero a { color: #fff; }

/* Riempimento rosso: ammesso, ma il testo sopra deve essere grande o in grassetto
   (3,71:1 passa solo come testo grande). */
/* Riempimento rosso: il testo PICCOLO sopra è nero (5,60:1), non bianco
   (3,75:1, sotto la soglia). Solo i numeri grandi restano bianchi. */
.riquadro.rosso-pieno {
  background: var(--ted-red); border-color: var(--ted-red); color: var(--ted-black);
}
.riquadro.rosso-pieno .occhiello,
.riquadro.rosso-pieno .etichetta,
.riquadro.rosso-pieno .mini { color: var(--ted-black); }
.riquadro.rosso-pieno a { color: var(--ted-black); }

.griglia { display: grid; gap: var(--sp-3); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g-2-1 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1100px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3, .g-2-1 { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .guscio { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex: none; }
  .g2, .g4 { grid-template-columns: 1fr; }
  .contenuto, .testata { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  h1 { font-size: 24px; }
}

/* I numeri sono l'unico testo abbastanza grande per portare il rosso. */
.numero { font-size: 32px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.numero.rosso { color: var(--ted-red); }   /* 32px ≥ 24px: ammesso */
.numero.piccolo { font-size: 24px; }        /* soglia minima per il rosso */
.etichetta {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--grey);
}
.sotto-numero { font-size: 13px; color: var(--grey); margin-top: var(--sp-1); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--grey); font-weight: 500; padding: var(--sp-2) 10px;
  border-bottom: 1px solid var(--line);
}
td { padding: 9px 10px; border-bottom: 1px solid var(--surface-3); vertical-align: top; }
tr:hover td { background: var(--surface-1); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Pillole: il colore sta nel FONDO, il testo resta leggibile.
   È il modo di usare rosso e verde senza farne colore di parole. */
.pillola {
  display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; background: var(--surface-2);
  color: var(--grey); border: 1px solid var(--line);
}
/* 12px su rosso: il testo deve essere nero */
.pillola.rossa {
  background: var(--ted-red); color: var(--ted-black); border-color: var(--ted-red);
  font-weight: 700;
}
.pillola.nera { background: var(--ink); color: #fff; border-color: var(--ink); }
/* verde solo come riempimento tenue: il testo resta inchiostro */
/* Nessun colore di stato è prescritto da TED: gli stati si distinguono per
   riempimento e bordo, non per tinta. */
.pillola.verde { background: var(--surface-3); color: var(--ink); border-color: #C9C9C9; }
.pillola.ambra {
  background: var(--ted-white); color: var(--ink);
  border-color: var(--ted-red); box-shadow: inset 2px 0 0 var(--ted-red);
}

.barra { height: 6px; background: var(--surface-3); border-radius: var(--radius-pill); overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--ted-red); }
.barra.nera span { background: #fff; }

/* Bottoni: l'azione è arancione. Testo bianco solo in grassetto, come impone
   il contrasto misurato (3,15:1 passa solo come testo grande o bold). */
button, .bottone {
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 8px 16px; border-radius: var(--radius);
  border: 1px solid var(--ted-black); background: var(--ted-black); color: #fff;
  text-decoration: none; display: inline-block;
}
/* Al passaggio il bordo diventa rosso: il rosso come accento, non come fondo di
   un'etichetta piccola (bianco su rosso a 14px non raggiunge la soglia AA). */
button:hover, .bottone:hover {
  background: #2E2E2E; border-color: var(--ted-red); color: #fff;
}
button.chiaro, .bottone.chiaro {
  background: var(--ted-white); color: var(--ink); border-color: var(--line);
  font-weight: 500;
}
button.chiaro:hover, .bottone.chiaro:hover {
  border-color: var(--ink); background: var(--ted-white); color: var(--ink);
}
button.mini, .bottone.mini { padding: 4px 10px; font-size: 12.5px; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=file], select, textarea {
  font-family: inherit; font-size: 14px; padding: 8px 10px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ted-white); color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--ted-red); outline-offset: -1px;
}
textarea { min-height: 78px; resize: vertical; }
label {
  display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grey); margin-bottom: var(--sp-1); font-weight: 500;
}
.campo { margin-bottom: var(--sp-3); }
.riga-campi {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.avviso {
  padding: 10px 15px; border-radius: var(--radius); margin-bottom: var(--sp-3);
  font-size: 14px; border-left: 3px solid var(--grey); background: var(--surface-2);
}
.avviso.ok { border-left-color: var(--ted-black); background: var(--surface-1); }
.avviso.errore { border-left-color: var(--ted-red); background: var(--surface-1); }

.vuoto { color: var(--grey); font-size: 14px; padding: var(--sp-3) 0; }
.muto { color: var(--grey); }
.mini { font-size: 12.5px; }

/* "In ritardo" non può essere scritto in rosso: sotto i 24px il contrasto non
   basta. Il segnale sta nel fondo e nel filetto, il testo resta inchiostro. */
.ritardo {
  color: var(--ink); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--ted-red); padding-left: 8px;
}

details.aggiungi { margin-bottom: var(--sp-3); }
details.aggiungi > summary {
  cursor: pointer; font-weight: 700; font-size: 14px; padding: 8px 15px;
  display: inline-block; border: 1px solid var(--ted-black); border-radius: var(--radius);
  background: var(--ted-black); color: #fff; list-style: none;
}
details.aggiungi > summary::-webkit-details-marker { display: none; }
details.aggiungi > summary:hover { background: #2E2E2E; border-color: var(--ted-red); }
details.aggiungi[open] > summary {
  background: var(--ted-white); color: var(--ink);
  border-color: var(--line); font-weight: 500;
}
details.aggiungi .pannello {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4); margin-top: 10px; background: var(--surface-1);
}

.colonne-pipeline { display: grid; gap: var(--sp-3); grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1180px) { .colonne-pipeline { grid-template-columns: repeat(2, 1fr); } }
.colonna {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-1); padding: var(--sp-3);
}
.colonna h3 {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--grey); font-weight: 500;
}
.scheda-mini {
  background: var(--ted-white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: var(--sp-2); font-size: 14px;
}

/* Interruttore TEDxBergamo / TEDxYouth: sono due mondi, non due filtri */
.interruttore { display: flex; gap: var(--sp-1); padding: var(--sp-3) 14px 0; }
.interruttore a {
  flex: 1; text-align: center; padding: 6px 4px; font-size: 12px; font-weight: 500;
  color: #8A8F98; border: 1px solid #2A2A2A; border-radius: var(--radius);
  background: #0A0A0A; text-decoration: none;
}
.interruttore a:hover { color: #fff; border-color: #4A4E57; }
.interruttore a.attivo {
  background: var(--ted-red); border-color: var(--ted-red);
  color: var(--ted-black); font-weight: 700;   /* nero su rosso: 5,60:1 */
}

/* Barra di navigazione interna a un modulo */
.tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.tabs a {
  padding: 7px 15px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 14px; font-weight: 500; color: var(--ink);
  background: var(--ted-white); text-decoration: none;
}
.tabs a:hover { border-color: var(--ink); color: var(--ink); }
.tabs a.attivo { background: var(--ink); color: #fff; border-color: var(--ink); }

.login-pagina {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: var(--ted-black); padding: var(--sp-4);
}
.login-scatola {
  background: var(--ted-white); border-radius: var(--radius);
  padding: var(--sp-5); width: 100%; max-width: 390px;
}

@media print {
  .sidebar, .testata form, .no-stampa { display: none !important; }
  .guscio { display: block; }
  .contenuto { padding: 0; max-width: none; }
  a { color: #000; text-decoration: none; }
}

/* Voce di menu spenta: c'è, si vede che esiste, non si apre */
.menu .voce-sospesa {
  display: block; padding: 9px 20px; color: #55595F; font-size: 14px; font-weight: 500;
  border-left: 3px solid transparent; cursor: not-allowed;
}
.menu .voce-sospesa em {
  display: block; font-style: normal; font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #44484E;
}

/* Riga sul titolare del trattamento: sta in fondo alla sidebar, sempre visibile */
.piede-sidebar .titolare {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid #1E1E1E;
  font-size: 10.5px; line-height: 1.45; color: #6A6F78;
}
.piede-sidebar .titolare strong { color: #8A8F98; font-weight: 500; }