/* Pagina "Articoli": elenco + grafici di dove viene usato un articolo. Usa i colori di stile.css. */
body.pagina-articoli { overflow: hidden; }
:root {
  --serie: #3987e5;        /* una sola serie: colore validato sul fondo scuro */
  --serie-acceso: #6ea8ef;
  --griglia: #222c42;
  --asse: #2c3852;
}

#schede-pagina { display: flex; gap: 4px; margin-left: auto; }
#schede-pagina a {
  padding: 6px 12px; border-radius: 8px; text-decoration: none; color: var(--testo-2);
  border: 1px solid transparent;
}
#schede-pagina a:hover { color: var(--testo); border-color: var(--bordo); }
#schede-pagina a[aria-current="page"] { color: var(--testo); background: var(--superficie-2); border-color: var(--bordo); }

#corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 460px) 1fr; }
#elenco { border-right: 1px solid var(--bordo); overflow-y: auto; background: var(--superficie); }
#dettaglio { overflow-y: auto; padding: 20px 28px 60px; }

.controlli {
  position: sticky; top: 0; background: var(--superficie); padding: 14px 16px 8px; z-index: 1;
  border-bottom: 1px solid var(--bordo); display: flex; flex-direction: column; gap: 8px;
}
.controlli input[type="search"], .controlli select {
  width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--bordo); background: var(--sfondo);
}
.controlli .riga { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.controlli .riga select { flex: 1; min-width: 0; }
.controlli .spunta { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--testo-2); }
.controlli a { font-size: 13px; }
.nota { font-size: 12px; color: var(--testo-2); margin: 0; }

#a-tabella { width: 100%; border-collapse: collapse; font-size: 13px; }
#a-tabella th {
  text-align: left; font-weight: 600; color: var(--testo-2); font-size: 12px; padding: 8px 10px;
  border-bottom: 1px solid var(--bordo); position: sticky; top: 0;
}
#a-tabella td { padding: 7px 10px; border-bottom: 1px solid var(--griglia); vertical-align: top; }
#a-tabella td:first-child { white-space: nowrap; font-weight: 600; }
#a-tabella td.rubrica { color: var(--testo-2); }
#a-tabella .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#a-tabella tbody tr { cursor: pointer; }
#a-tabella tbody tr:hover { background: var(--superficie-2); }
#a-tabella tbody tr.scelto { background: #1d2a44; box-shadow: inset 3px 0 0 var(--serie); }
#a-tabella tr.vuoto td { color: var(--testo-2); cursor: default; }
#a-altri { margin: 12px 16px 24px; width: calc(100% - 32px); }

/* dettaglio */
#dettaglio h2 { font-size: 22px; margin: 4px 0 2px; }
#dettaglio .sotto { color: var(--testo-2); margin: 0 0 14px; }
#dettaglio .tessere { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
#dettaglio .tessera {
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: 10px; padding: 10px 14px; min-width: 130px;
}
#dettaglio .tessera b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
#dettaglio .tessera span { font-size: 12px; color: var(--testo-2); }
#dettaglio .azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
#dettaglio .azioni a {
  padding: 6px 12px; border-radius: 8px; text-decoration: none; border: 1px solid var(--bordo);
  background: var(--superficie-2); color: var(--testo);
}
#dettaglio .azioni a.principale { background: #3a3215; border-color: var(--accento); font-weight: 600; }
.griglia-grafici { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.riquadro {
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: 12px; padding: 14px 16px 10px;
  min-width: 0;
}
.riquadro.largo { grid-column: 1 / -1; }
.riquadro h3 { margin: 0; font-size: 15px; }
.riquadro .spiega { margin: 2px 0 8px; font-size: 12px; color: var(--testo-2); }
.riquadro svg { display: block; width: 100%; overflow: visible; }
.riquadro details { margin-top: 6px; font-size: 12px; color: var(--testo-2); }
.riquadro details summary { cursor: pointer; }
.riquadro details table { width: 100%; border-collapse: collapse; margin-top: 6px; color: var(--testo); }
.riquadro details td { padding: 3px 6px; border-bottom: 1px solid var(--griglia); }
.riquadro details td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.riquadro details .tab { max-height: 260px; overflow: auto; }
.vuoto-grafico { color: var(--testo-2); font-size: 13px; padding: 12px 0; }

svg .barra { fill: var(--serie); }
svg .riga-barra:hover .barra, svg .colonna:hover .barra, svg .barra.acceso { fill: var(--serie-acceso); }
svg .colpo { fill: transparent; }
svg .cliccabile { cursor: pointer; }
svg .etichetta { fill: var(--testo); font-size: 12px; }
svg .valore { fill: var(--testo-2); font-size: 12px; font-variant-numeric: tabular-nums; }
svg .asse-testo { fill: var(--testo-2); font-size: 11px; font-variant-numeric: tabular-nums; }
svg .griglia { stroke: var(--griglia); stroke-width: 1; }
svg .base { stroke: var(--asse); stroke-width: 1; }
svg .guida { stroke: var(--testo-2); stroke-width: 1; opacity: .5; }

#suggerimento-grafico {
  position: fixed; pointer-events: none; z-index: 20; background: #0b0f1a; border: 1px solid var(--bordo);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.5); max-width: 320px;
}
#suggerimento-grafico b { display: block; font-size: 13px; }
#suggerimento-grafico span { color: var(--testo-2); }

@media (max-width: 900px) {
  body.pagina-articoli { overflow: auto; }
  #corpo { display: block; }
  #elenco { border-right: 0; max-height: none; overflow: visible; }
  #dettaglio { padding: 16px; }
  .griglia-grafici { grid-template-columns: 1fr; }
  #schede-pagina { margin-left: 0; }
}

/* sentenze che citano l'articolo */
.scelta-ordine { display: flex; gap: 6px; margin: 8px 0 4px; }
.scelta-ordine button { padding: 4px 12px; font-size: 13px; }
.tabella-sentenze { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.tabella-sentenze th {
  text-align: left; font-weight: 600; color: var(--testo-2); font-size: 12px; padding: 6px 8px;
  border-bottom: 1px solid var(--bordo);
}
.tabella-sentenze td { padding: 6px 8px; border-bottom: 1px solid var(--griglia); vertical-align: top; }
.tabella-sentenze td.data { white-space: nowrap; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.tabella-sentenze .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabella-sentenze a { font-weight: 600; }
.tabella-sentenze a.fonte { font-weight: 400; font-size: 11px; color: var(--testo-2); }
.riquadro button.altre { margin: 10px 0 4px; }
@media (max-width: 600px) {
  .tabella-sentenze th:nth-child(4), .tabella-sentenze td:nth-child(4) { display: none; }
}

/* scheda della sentenza (pannello a destra) */
.tabella-sentenze tbody tr { cursor: pointer; }
.tabella-sentenze tbody tr:hover { background: var(--superficie-2); }
.tabella-sentenze tbody tr.aperta { background: #1d2a44; box-shadow: inset 3px 0 0 var(--serie); }
#scheda-sentenza {
  position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100%; z-index: 15;
  background: var(--superficie); border-left: 1px solid var(--bordo); box-shadow: -10px 0 30px rgba(0,0,0,.45);
  overflow-y: auto; padding: 14px 18px 40px;
}
#scheda-sentenza .testa-scheda { display: flex; justify-content: space-between; position: sticky; top: -14px;
  background: var(--superficie); padding: 6px 0; z-index: 1; }
#scheda-sentenza .testa-scheda button { font-size: 18px; line-height: 1; padding: 2px 10px; }
#s-chiudi { margin-left: auto; }
#s-contenuto h2 { font-size: 19px; margin: 6px 0 2px; }
#s-contenuto .sotto { color: var(--testo-2); margin: 0 0 10px; font-size: 13px; }
#s-contenuto .azioni { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; }
#s-contenuto .azioni a {
  padding: 6px 12px; border-radius: 8px; text-decoration: none; border: 1px solid var(--bordo);
  background: var(--superficie-2); color: var(--testo);
}
#s-contenuto .azioni a.principale { background: #3a3215; border-color: var(--accento); font-weight: 600; }
#s-contenuto h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--testo-2); margin: 18px 0 6px; }
#s-contenuto ul { list-style: none; margin: 0; padding: 0; }
#s-contenuto li { display: flex; gap: 8px; align-items: baseline; padding: 5px 6px; border-radius: 6px; }
#s-contenuto li.cliccabile { cursor: pointer; }
#s-contenuto li.cliccabile:hover { background: var(--superficie-2); }
#s-contenuto li .nome { flex: 1; min-width: 0; }
#s-contenuto li .nome b { font-weight: 600; }
#s-contenuto li .nome span { color: var(--testo-2); }
#s-contenuto li .num { color: var(--testo-2); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#s-contenuto li a.apri { font-size: 12px; white-space: nowrap; }
#s-contenuto .chiavi { color: var(--testo-2); font-size: 12px; line-height: 1.7; }
#s-contenuto .nota { margin-top: 16px; }

/* pagina Sentenze */
.pagina-sentenze .controlli { gap: 10px; }
.controlli .campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--testo-2); min-width: 0; flex: 1; }
.controlli .campo input, .controlli .campo select {
  width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--bordo); background: var(--sfondo);
  color: var(--testo); font-size: 14px;
}
.controlli .campo input[type="date"] { color-scheme: dark; }
.controlli .riga.due { align-items: flex-end; flex-wrap: nowrap; }
.controlli .campo.bottoni { flex-direction: row; gap: 6px; }
.controlli .campo.bottoni button { flex: 1; }
.controlli button.principale { background: #3a3215; border-color: var(--accento); font-weight: 600; }
.scorciatoie { display: flex; gap: 6px; flex-wrap: wrap; }
.scorciatoie button { padding: 3px 9px; font-size: 12px; }
body[data-fonte="statica"] .solo-pc { display: none !important; }
body:not([data-fonte="statica"]) .solo-online { display: none !important; }
.pagina-sentenze .pagina-sentenze-vuota { color: var(--testo-2); }

/* scelta tutti / almeno uno */
.scelta-modo { display: flex; gap: 14px; font-size: 13px; color: var(--testo-2); margin-top: -4px; }
.scelta-modo label { display: flex; gap: 5px; align-items: center; cursor: pointer; }
.scelta-modo b { color: var(--testo); font-weight: 600; }

/* rete attorno alla sentenza */
.rete-sentenza { position: relative; }
.rete-sentenza svg { display: block; width: 100%; height: auto; }
.rete-sentenza .ingrandisci { position: absolute; top: 4px; right: 0; font-size: 12px; padding: 3px 9px; }
svg .r-arco { stroke-width: 1.4; opacity: .55; }
svg .r-arco.r-comune { stroke: #b57bff; stroke-width: 1; opacity: .28; }
svg .r-nodo { cursor: pointer; }
svg .r-nodo circle { stroke: var(--superficie); stroke-width: 2; }
svg .r-nodo:hover circle { stroke: #ffffff; }
svg .r-nodo text, svg .r-centro text { fill: var(--testo); font-size: 11px; }
svg .r-nodo:hover text { fill: #ffffff; font-weight: 600; }
svg .r-gruppo { fill: var(--testo-2); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
svg .r-centro circle { fill: var(--accento); stroke: #ffffff; stroke-width: 2.5; }
svg .r-centro .r-titolo { font-size: 13px; font-weight: 700; }
svg .r-causa { fill: #ff8a8e; font-size: 11px; }
.c-norma { fill: #3ecf8e; stroke: #3ecf8e; } .c-citata { fill: #5b9cff; stroke: #5b9cff; }
.c-citante { fill: #ff9f43; stroke: #ff9f43; } .c-simile { fill: #b57bff; stroke: #b57bff; }
.legenda-rete { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--testo-2); margin: 4px 0 2px; }
.legenda-rete span { display: inline-flex; align-items: center; gap: 5px; }
.legenda-rete i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legenda-rete .l-norma { background: #3ecf8e; } .legenda-rete .l-citata { background: #5b9cff; }
.legenda-rete .l-citante { background: #ff9f43; } .legenda-rete .l-simile { background: #b57bff; }
#rete-grande {
  position: fixed; inset: 0; z-index: 30; background: rgba(11,15,26,.97); display: flex; flex-direction: column;
  padding: 12px 16px;
}
#rete-grande .testa-rete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#rete-grande h2 { margin: 0; font-size: 18px; }
#rete-grande #rg-chiudi { font-size: 20px; line-height: 1; padding: 2px 12px; }
#rg-tela { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; }
#rg-tela .rete-sentenza { width: min(100%, 1300px); }
#rg-tela svg text { font-size: 12px; }
#s-contenuto .in-comune { color: var(--testo-2); font-size: 12px; display: block; }

/* vista lista / grafo dei risultati */
.vista { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; }
.vista .scelta-ordine { margin: 0; }
.vista input, .filtro-rete {
  flex: 1; min-width: 200px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--bordo);
  background: var(--sfondo); color: var(--testo);
}
.filtro-rete { width: 100%; margin: 4px 0 6px; font-size: 13px; }
#rg-filtro { flex: 0 1 360px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--bordo); background: var(--sfondo); color: var(--testo); }
#r-grafo-tela svg { display: block; width: 100%; height: auto; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 12px; }
svg .g-arco { stroke: #3ecf8e; stroke-width: 1; opacity: .3; }
svg .g-nodo { cursor: pointer; }
svg .g-nodo circle { stroke: var(--superficie); stroke-width: 1.5; }
svg .g-nodo:hover circle { stroke: #ffffff; stroke-width: 2; }
svg .g-nodo text { fill: var(--testo-2); font-size: 10px; pointer-events: none; }
svg .g-nodo.g-norma text { fill: var(--testo); font-size: 11px; font-weight: 600; }
svg .g-nodo:hover text { fill: #ffffff; }
svg .g-spento { opacity: .12; }

/* esiti */
.esito { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid currentColor; }
.esito-accolto { color: #4ade80; } .esito-parzialmente-accolto { color: #bef264; } .esito-respinto { color: #f87171; }
.esito-inammissibile { color: #fbbf24; } .esito-stralciato { color: #94a3b8; } .esito-non-riconosciuto { color: #64748b; border-style: dashed; }
#s-contenuto .frase-esito { font-size: 12px; color: var(--testo-2); font-style: italic; margin: 4px 0 0; }
svg .g-avvocato rect { stroke: var(--superficie); stroke-width: 1.5; }
svg .g-avvocato text { fill: #fdba74; font-size: 10px; }
.c-avvocato { fill: #fb923c; stroke: #fb923c; }
.legenda-rete .l-avvocato { background: #fb923c; border-radius: 2px; }
.spunta select { margin-left: 4px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--bordo); background: var(--sfondo); color: var(--testo); }

/* avvocati: barra degli esiti per il cliente */
.barra-esiti { display: flex; height: 10px; border-radius: 3px; overflow: hidden; min-width: 120px; gap: 2px; background: transparent; }
.barra-esiti span { display: block; height: 100%; }
.barra-esiti .b-vinte { background: #4ade80; } .barra-esiti .b-parziali { background: #bef264; }
.barra-esiti .b-perse { background: #f87171; } .barra-esiti .b-altre { background: #475569; }
.cifre-esiti { font-size: 11px; color: var(--testo-2); margin-top: 3px; white-space: nowrap; }
#v-tabella tbody tr.scelto { background: #1d2a44; box-shadow: inset 3px 0 0 var(--serie); }
.legenda-esiti { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--testo-2); margin: 6px 0; }
.legenda-esiti i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* grafo che si trasforma: chi resta si sposta, chi esce svanisce, chi entra compare */
#r-grafo-tela .g-nodo { transition: transform .75s cubic-bezier(.2,.7,.2,1), opacity .6s ease; }
#r-grafo-tela .g-archi { opacity: 0; transition: opacity .5s ease .45s; }
#r-grafo-tela svg.g-pronto .g-archi { opacity: 1; }
#r-grafo-tela .g-uscita { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #r-grafo-tela .g-nodo, #r-grafo-tela .g-archi { transition: none; } }

.tabella-sentenze .estratto { display: block; font-weight: 400; font-size: 12px; color: var(--testo-2); font-style: italic;
  margin-top: 3px; max-width: 60ch; }

/* pagina Novità */
#corpo.corpo-unico { display: block; overflow-y: auto; }
#corpo.corpo-unico #dettaglio { max-width: 1200px; margin: 0 auto; overflow: visible; }
.schede-novita { margin: 4px 0 16px; }
.schede-novita button { font-size: 15px; padding: 7px 16px; }
.controlli-riga { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; color: var(--testo-2); }
.controlli-riga select, .controlli-riga input { margin-left: 4px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--bordo);
  background: var(--sfondo); color: var(--testo); }
.scorciatoie button.attivo { background: #3a3215; border-color: var(--accento); }
.gruppo-legge { background: var(--superficie); border: 1px solid var(--bordo); border-radius: 12px; padding: 12px 16px; margin: 10px 0; }
.gruppo-legge h3 { margin: 0; font-size: 15px; }
.gruppo-legge .sotto { margin: 2px 0 8px; font-size: 12px; }
.gruppo-legge ul { list-style: none; margin: 0; padding: 0; }
.gruppo-legge li { border-top: 1px solid var(--griglia); }
.gruppo-legge li > button { display: flex; width: 100%; text-align: left; gap: 10px; align-items: baseline; background: none;
  border: 0; border-radius: 0; padding: 7px 4px; }
.gruppo-legge li > button:hover { background: var(--superficie-2); }
.gruppo-legge li .art { font-weight: 600; min-width: 90px; }
.gruppo-legge li .rub { color: var(--testo-2); flex: 1; }
.tipo-modifica { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.tipo-nuovo { color: #4ade80; } .tipo-modificato { color: #fbbf24; } .tipo-abrogato { color: #f87171; } .tipo-tolto { color: #94a3b8; }
.confronto { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 4px 12px; }
.confronto > div { background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 8px; padding: 8px 10px; font-size: 13px;
  white-space: pre-wrap; max-height: 360px; overflow: auto; }
.confronto h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--testo-2); }
.diff-tolto { color: #fca5a5; text-decoration: line-through; background: rgba(248,113,113,.12); }
.diff-aggiunto { color: #86efac; background: rgba(74,222,128,.14); }
.confronto .collegamenti { grid-column: 1 / -1; display: flex; gap: 12px; font-size: 12px; background: none; border: 0; padding: 0; }
@media (max-width: 700px) { .confronto { grid-template-columns: 1fr; } }