/* Atena – stile comune. Colori e misure come variabili: la palette è quella di Hermes. */

/* ---------- variabili ---------- */
:root {
  --colore-scuro: #393939;
  --colore-accento: #f89d35;
  --colore-accento-scuro: #b9650a;
  --colore-sfondo: #f6f6f4;
  --colore-superficie: #ffffff;
  --colore-testo: #222222;
  --colore-testo-tenue: #666666;
  --colore-bordo: #dddddd;
  --colore-ok: #e8f4ea;
  --colore-ok-testo: #1e5e2a;
  --colore-avviso: #fff4e2;
  --colore-avviso-testo: #7a4a05;
  --colore-errore: #fbe9e7;
  --colore-errore-testo: #9b2416;
  --raggio: 6px;
  --spazio: 16px;
  --larghezza-max: 1100px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: var(--colore-testo);
  background: var(--colore-sfondo);
  line-height: 1.5;
}
a { color: var(--colore-accento-scuro); }
h1 { font-size: 1.5rem; margin: 0 0 var(--spazio); }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
code { font-size: 0.9em; background: #efefec; padding: 1px 4px; border-radius: 3px; }
.tenue { color: var(--colore-testo-tenue); }

/* ---------- barra ---------- */
.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px var(--spazio);
  padding: 10px var(--spazio);
  background: var(--colore-scuro);
  color: #ffffff;
  border-bottom: 3px solid var(--colore-accento);
}
.barra a { color: #ffffff; text-decoration: none; }
.barra__marchio { display: flex; align-items: center; gap: 12px; }
.barra__logo { display: block; height: 44px; width: auto; }
.barra__logo--fdm { height: 36px; }
.barra__separatore { width: 1px; height: 32px; background: rgba(255, 255, 255, 0.35); }
.barra__menu { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.barra__menu a { padding: 6px 10px; border-radius: var(--raggio); }
.barra__menu a:hover, .barra__menu a[aria-current="page"] { background: rgba(255, 255, 255, 0.12); }
.barra__menu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--colore-accento); }
.barra__utente { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.barra__utente form { margin: 0; }
.barra__utente a[aria-current="page"] { text-decoration: underline; }

/* ---------- contenuto ---------- */
.contenuto {
  flex: 1;
  width: 100%;
  max-width: var(--larghezza-max);
  margin: 0 auto;
  padding: calc(var(--spazio) * 1.5) var(--spazio);
}
.testata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spazio); margin-bottom: var(--spazio); }
.testata h1 { margin: 0; }
.indietro { margin: 0 0 8px; }

.scheda {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: var(--spazio) calc(var(--spazio) * 1.25);
  margin-bottom: var(--spazio);
}
.scheda--stretta { max-width: 440px; margin: calc(var(--spazio) * 2) auto; }
.scheda--media { max-width: 640px; }
.scheda--evidenza { border-color: var(--colore-accento); border-width: 2px; }
.scheda--pericolo { border-color: #e6b3ac; }
.colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spazio); align-items: start; }
.colonne > * { min-width: 0; }

.riquadri { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spazio); }
.riquadro {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--spazio); border-radius: var(--raggio);
  background: var(--colore-superficie); border: 1px solid var(--colore-bordo);
  color: var(--colore-testo); text-decoration: none;
}
.riquadro:hover { border-color: var(--colore-accento); }
.riquadro span { color: var(--colore-testo-tenue); font-size: 0.92rem; }

/* ---------- moduli ---------- */
.modulo { display: flex; flex-direction: column; gap: 12px; }
.modulo label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.modulo label.spunta { flex-direction: row; align-items: baseline; gap: 8px; font-weight: 400; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="search"], input[type="tel"], input:not([type]), textarea, select {
  font: inherit;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #bbbbbb;
  border-radius: var(--raggio);
  background: #ffffff;
  color: var(--colore-testo);
}
input:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--colore-accento); outline-offset: 1px; }
.affiancati { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ruoli { border: 1px solid var(--colore-bordo); border-radius: var(--raggio); padding: 8px 12px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ruoli legend { font-weight: 500; padding: 0 4px; }
.modulo .ruolo { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; font-weight: 400; }
.ruolo input { grid-row: span 2; margin-top: 5px; }
.ruolo span { color: var(--colore-testo-tenue); font-size: 0.9rem; }
.copia { display: flex; gap: 8px; margin: 0; }
.copia input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; }

/* ---------- pulsanti ---------- */
.pulsante {
  font: inherit;
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #aaaaaa;
  border-radius: var(--raggio);
  background: #ffffff;
  color: var(--colore-testo);
  text-decoration: none;
  cursor: pointer;
}
.pulsante:hover { background: #f0f0ee; }
.pulsante:disabled { opacity: 0.5; cursor: not-allowed; }
.pulsante--primario { background: var(--colore-accento); border-color: var(--colore-accento); color: #222222; font-weight: 600; }
.pulsante--primario:hover { background: #f08a14; }
.pulsante--pericolo { border-color: var(--colore-errore-testo); color: var(--colore-errore-testo); }
.pulsante--pericolo:hover { background: var(--colore-errore); }
.pulsante--piccolo { padding: 3px 10px; font-size: 0.9rem; }
.pulsante--barra { padding: 4px 12px; background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.5); }
.pulsante--barra:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- messaggi e avvisi ---------- */
.messaggio { padding: 10px 14px; border-radius: var(--raggio); margin: 0 0 var(--spazio); border: 1px solid transparent; }
.messaggio p { margin: 0 0 6px; }
.messaggio--ok { background: var(--colore-ok); color: var(--colore-ok-testo); border-color: #bfdcc4; }
.messaggio--avviso { background: var(--colore-avviso); color: var(--colore-avviso-testo); border-color: #f3d3a3; }
.messaggio--errore { background: var(--colore-errore); color: var(--colore-errore-testo); border-color: #f0c2bb; }
.avviso { padding: 10px 14px; margin: 0 0 var(--spazio); border-left: 4px solid var(--colore-accento); background: var(--colore-superficie); border-radius: 0 var(--raggio) var(--raggio) 0; }
.avviso--importante { background: var(--colore-avviso); font-weight: 600; }
.elenco-avvisi { list-style: none; margin: 0; padding: 0; }
.elenco-avvisi li { border-top: 1px solid var(--colore-bordo); padding: 10px 0; }
.elenco-avvisi li:first-child { border-top: 0; padding-top: 0; }
.elenco-avvisi p { margin: 0 0 6px; overflow-wrap: anywhere; }

/* ---------- tabelle ---------- */
.tabella-contenitore { overflow-x: auto; margin-bottom: var(--spazio); border: 1px solid var(--colore-bordo); border-radius: var(--raggio); background: var(--colore-superficie); }
.tabella { width: 100%; border-collapse: collapse; }
.tabella th, .tabella td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #eeeeee; vertical-align: top; }
.tabella th { font-size: 0.85rem; color: var(--colore-testo-tenue); font-weight: 600; background: #fafaf8; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella--compatta { font-size: 0.9rem; }
.tabella--compatta td { padding: 6px 12px; }
.dati { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; }
.dati dt { color: var(--colore-testo-tenue); }
.dati dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- etichette di stato ---------- */
.etichetta { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.82rem; background: #eeeeee; color: #444444; white-space: nowrap; }
.etichetta--attivo, .etichetta--in-corso { background: var(--colore-ok); color: var(--colore-ok-testo); }
.etichetta--invito-in-attesa, .etichetta--programmato { background: #e7eefb; color: #1f4a8a; }
.etichetta--invito-scaduto, .etichetta--importante { background: var(--colore-avviso); color: var(--colore-avviso-testo); }
.etichetta--disattivato { background: var(--colore-errore); color: var(--colore-errore-testo); }

/* ---------- pagina iniziale: presentazione di Atena (come il cruscotto di Hermes) ---------- */
.intro { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 28px; align-items: start; padding: 24px 28px; margin-bottom: calc(var(--spazio) * 1.5); }
.intro__logo { width: 100%; height: auto; max-width: 240px; }
.intro h1 { margin: 0; font-size: 1.9rem; line-height: 1.15; }
.intro__sotto { margin: 4px 0 16px; color: var(--colore-testo-tenue); max-width: 70ch; }
.intro__caratteristiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 24px; margin: 0 0 18px; padding: 0; list-style: none; }
.intro__caratteristiche li { padding-left: 12px; border-left: 3px solid var(--colore-accento); font-size: 0.92rem; color: var(--colore-testo-tenue); }
.intro__caratteristiche strong { display: block; color: var(--colore-testo); font-size: 1rem; }
.intro__novita { padding: 14px 16px; border-radius: 10px; background: var(--colore-sfondo); }
.intro__novita h2 { margin: 0 0 6px; }
.intro__novita ul { margin: 0; padding: 0; list-style: none; font-size: 0.92rem; }
.intro__novita li { display: flex; gap: 10px; padding: 3px 0; }
.intro__novita time { flex: none; min-width: 82px; color: var(--colore-testo-tenue); font-variant-numeric: tabular-nums; }
.intro__novita details { margin-top: 6px; font-size: 0.92rem; }
.intro__novita summary { cursor: pointer; color: var(--colore-accento-scuro); font-weight: 600; }
.testata__titolo { margin: 0; font-size: 1.35rem; }
.riquadri + .testata { margin-top: calc(var(--spazio) * 1.5); }
.riquadri { margin-bottom: var(--spazio); }
.riquadro__numero { font-size: 1.05rem !important; color: var(--colore-testo) !important; font-weight: 600; }

/* ---------- etichette dei contatti (colori della tavolozza ETICHETTE_COLORI) ---------- */
.tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.82rem; border: 1px solid transparent; white-space: nowrap; line-height: 1.5; }
.tag--grigio { background: #ececea; color: #3d3d3d; border-color: #d6d6d2; }
.tag--blu { background: #e3ebfa; color: #1d438a; border-color: #c3d3f2; }
.tag--azzurro { background: #def3f8; color: #0f5a6e; border-color: #bde3ed; }
.tag--verde { background: #e3f3e6; color: #1e5e2a; border-color: #c2e2c8; }
.tag--giallo { background: #fbf3cf; color: #6b5300; border-color: #efe09a; }
.tag--arancio { background: #feeedb; color: #8a4a00; border-color: #f8d3a6; }
.tag--rosso { background: #fbe5e2; color: #93231a; border-color: #f1c3bd; }
.tag--viola { background: #efe6f8; color: #5b2d8a; border-color: #dccbef; }
.pillole { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tabella td .tag { margin: 1px 2px 1px 0; }

/* Etichette da scegliere (filtri e modulo): la casella resta, la pillola mostra se è scelta. */
.filtro-etichette { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filtro-etichette legend { font-weight: 500; padding: 0; margin-bottom: 6px; }
.scelta-tag { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 400; }
.modulo .scelta-tag { flex-direction: row; }
.scelta-tag input { margin: 0; accent-color: var(--colore-accento-scuro); }
.scelta-tag input:checked + .tag { box-shadow: 0 0 0 2px var(--colore-accento-scuro); font-weight: 600; }

/* ---------- rubrica ---------- */
.ricerca { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--spazio); padding: 12px 14px; background: var(--colore-superficie); border: 1px solid var(--colore-bordo); border-radius: var(--raggio); }
.ricerca__riga { display: flex; gap: 8px; }
.ricerca__riga input { flex: 1; min-width: 0; }
.ricerca__riga select { width: auto; }
.ricerca .spunta { display: flex; gap: 8px; align-items: baseline; }
.conteggio { margin: 0 0 8px; color: var(--colore-testo-tenue); }
.tabella--contatti td a strong { color: var(--colore-testo); }
.nowrap { white-space: nowrap; }
.sottotitolo { margin: -10px 0 0; color: var(--colore-testo-tenue); }
.testo-libero { margin: 0; overflow-wrap: anywhere; }
.storico { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }
.storico li { padding: 4px 0; border-top: 1px solid #eeeeee; }
.storico li:first-child { border-top: 0; }
.paginazione { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--spazio); }
.paginazione a, .paginazione span { padding: 4px 10px; border-radius: var(--raggio); border: 1px solid var(--colore-bordo); background: var(--colore-superficie); text-decoration: none; }
.paginazione span[aria-current="page"] { background: var(--colore-accento); border-color: var(--colore-accento); font-weight: 600; }
.paginazione .paginazione__salto { border-color: transparent; background: transparent; }

/* Modulo del contatto */
.modulo--contatto .scheda { display: flex; flex-direction: column; gap: 12px; }
.recapiti { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.recapiti legend { font-weight: 500; padding: 0; margin-bottom: 4px; }
.recapito { display: grid; grid-template-columns: 8.5em 1fr; gap: 6px; width: 100%; }
.azioni { display: flex; align-items: center; gap: var(--spazio); }

/* Note */
.elenco-note { list-style: none; margin: 0 0 var(--spazio); padding: 0; }
.scheda.elenco-note { padding-top: 4px; padding-bottom: 4px; }
.elenco-note li { padding: 10px 0; border-top: 1px solid #eeeeee; }
.elenco-note li:first-child { border-top: 0; }
.elenco-note p { margin: 0; overflow-wrap: anywhere; }
.elenco-note__estratto { color: var(--colore-testo-tenue); font-size: 0.95rem; }
.elenco-note .elenco-note__dettagli { margin-top: 4px; font-size: 0.92rem; }
.elenco-note__dettagli .tag { margin-left: 2px; }
.testata--sezione { margin-bottom: 8px; }
.testata--sezione h2 { margin: 0; }
.colonne--nota { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.nota__contatti { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #eeeeee; }
.testo-nota { overflow-wrap: anywhere; }
.testo-nota p, .testo-nota ul, .testo-nota ol { margin: 0 0 10px; }
.testo-nota > :last-child { margin-bottom: 0; }
.testo-nota ul, .testo-nota ol { padding-left: 1.4em; }
.testo-nota--riquadro { padding: 10px 14px; border: 1px dashed var(--colore-bordo); border-radius: var(--raggio); background: #fcfcfa; }
.ricerca__contatto { margin: 0; }
.collegati { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.collegati legend { font-weight: 500; padding: 0; margin-bottom: 4px; }
.modulo .collegati label.spunta { font-weight: 400; }
.affiancati--titolo { grid-template-columns: 1fr 12em; }
.aiuto { font-size: 0.92rem; color: var(--colore-testo-tenue); }
.aiuto summary { cursor: pointer; }
.aiuto ul { margin: 6px 0 0; padding-left: 1.2em; }
.invisibile { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Esportazione e importazione */
.testata__azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.esporta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--spazio); }
.scheda .esporta { margin: 8px 0 0; padding-top: 10px; border-top: 1px solid #eeeeee; }
.passi { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 var(--spazio); padding: 0; counter-reset: passo; }
.passi li { counter-increment: passo; padding: 4px 12px; border-radius: 999px; background: #ececea; color: var(--colore-testo-tenue); font-size: 0.9rem; }
.passi li::before { content: counter(passo) ". "; }
.passi li[aria-current="step"] { background: var(--colore-accento); color: #222222; font-weight: 600; }
.istruzioni { margin: 0 0 10px; padding-left: 1.3em; }
.istruzioni li { margin-bottom: 4px; }
.elenco-importa { margin: 0 0 8px; padding-left: 1.2em; }
.tabella--colonne select { min-width: 14em; }
.scelte { white-space: nowrap; }
.scelte .spunta { display: flex; gap: 6px; align-items: baseline; }
input[type="file"] { font: inherit; padding: 6px 0; }

/* Storico */
.colonne--storico { grid-template-columns: minmax(240px, 1fr) minmax(0, 2.4fr); }
.versioni { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }
.versioni li { padding: 6px 8px; border-radius: var(--raggio); }
.versioni li[aria-current="true"] { background: var(--colore-avviso); }
.versioni li + li { margin-top: 2px; }
.tabella--confronto th[scope="row"] { width: 9em; color: var(--colore-testo-tenue); font-weight: 600; background: transparent; }
.tabella--confronto td { width: 45%; overflow-wrap: anywhere; }
.tabella--confronto tr.cambiato td { background: #fff7e6; }
.tabella--confronto tr.cambiato th[scope="row"] { color: var(--colore-avviso-testo); }

/* Pagina Etichette */
.elenco-etichette { list-style: none; margin: 0; padding: 0; }
.elenco-etichette li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #eeeeee; }
.elenco-etichette li:first-child { border-top: 0; }
.elenco-etichette form { margin: 0; }
.riga-etichetta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; min-width: 260px; }
.riga-etichetta .tag { min-width: 6em; text-align: center; }
.riga-etichetta input { flex: 1; min-width: 8em; width: auto; padding: 4px 8px; }
.riga-etichetta select { width: auto; padding: 4px 8px; }

/* ---------- piede ---------- */
.piede {
  padding: var(--spazio);
  text-align: center;
  font-size: 0.85rem;
  color: var(--colore-testo-tenue);
}

/* ---------- telefono ---------- */
@media (max-width: 600px) {
  .barra__menu { order: 3; flex-basis: 100%; }
  .barra__marchio { gap: 8px; }
  .barra__logo { height: 34px; }
  .barra__logo--fdm { height: 26px; }
  .barra__separatore { height: 24px; }
  .scheda { padding: 12px; }
  .scheda--stretta { margin-top: var(--spazio); }
  .affiancati { grid-template-columns: 1fr; }
  .dati { grid-template-columns: 1fr; gap: 0; }
  .dati dd { margin-bottom: 8px; }
  .ricerca__riga { flex-wrap: wrap; }
  .ricerca__riga input { flex-basis: 100%; }
  .recapito { grid-template-columns: 7em 1fr; }
  .colonne--nota, .affiancati--titolo, .colonne--storico { grid-template-columns: 1fr; }
  .intro { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
  .intro__logo { max-width: 140px; justify-self: center; }
  .intro h1 { text-align: center; }
  .intro__novita li { flex-direction: column; gap: 0; }
  /* Elenco dei contatti a schede: una per contatto, senza intestazioni né celle vuote. */
  .tabella--contatti thead { display: none; }
  .tabella--contatti tr { display: block; padding: 8px 0; border-bottom: 1px solid #eeeeee; }
  .tabella--contatti tr:last-child { border-bottom: 0; }
  .tabella--contatti td { display: block; border: 0; padding: 1px 12px; overflow-wrap: anywhere; }
  .tabella--contatti td:empty { display: none; }
}