/* Borsa - portale interno. Font di sistema, colori sobri, verde/rosso per le variazioni. */
:root {
  --bg: #f5f6f8; --card: #ffffff; --ink: #1d2430; --muted: #6b7280; --line: #e3e6ea;
  --up: #1a7f37; --down: #c62828; --accent: #1f4e8c; --warn-bg: #fff7e0; --warn-ink: #7a5a00;
  --cA: #1b5e20; --cB: #43a047; --cC: #f9c10b; --cD: #ef8a17; --cE: #d32f2f;
}
* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.45; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: .86em; }
.nowrap { white-space: nowrap; }
.r { text-align: right; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--muted); }
code { background: #eef0f3; padding: 1px 4px; border-radius: 3px; }

/* header */
.top { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.top .wrap { display: flex; align-items: center; gap: 16px; height: 56px; }
.brand { font-weight: 700; font-size: 1.15em; color: var(--ink); white-space: nowrap; }
.search { position: relative; flex: 1; display: flex; gap: 6px; max-width: 640px; }
.search input { flex: 1; padding: 8px 10px; border: 1px solid #c9ced6; border-radius: 6px; font-size: 1em; }
.search button { padding: 8px 14px; border: 0; background: var(--accent); color: #fff; border-radius: 6px; cursor: pointer; }
.suggest { position: absolute; left: 0; right: 0; top: 40px; }
.sugglist { list-style: none; margin: 0; padding: 4px 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.1); max-height: 60vh; overflow: auto; }
.sugglist li a { display: block; padding: 6px 10px; color: var(--ink); }
.sugglist li a:hover { background: #eef3fb; text-decoration: none; }
.sugglist li.muted { padding: 6px 10px; }
.links a { margin-left: 12px; }

/* layout */
main.wrap { padding: 18px 16px 40px; }
.pagetitle { font-size: 1.5em; margin: 6px 0 10px; }
.lead { margin: 0 0 14px; }
.box { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 0 0 16px; }
.box h2 { font-size: 1.12em; margin: 0 0 10px; }
.box h3 { font-size: 1em; margin: 14px 0 6px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } html { font-size: 14px; } }
.scroll { overflow-x: auto; }
.loading { color: var(--muted); font-style: italic; }
.src { color: var(--muted); margin: 8px 0 0; }
.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: #f2dd9a; }
.warn-inline { background: var(--warn-bg); color: var(--warn-ink); padding: 4px 8px; border-radius: 4px; display: inline-block; margin-top: 6px; }

/* tabelle */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.tbl th { font-weight: 600; color: #3b4452; background: #fafbfc; font-size: .9em; }
.tbl.compact th, .tbl.compact td { padding: 4px 6px; }
.tbl tr:hover td { background: #fbfcfe; }
.tbl.fin td, .tbl.fin th { white-space: nowrap; }
.tbl.fin td:first-child { white-space: normal; min-width: 160px; }
.filed { color: var(--muted); font-size: .78em; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.stat { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: #fafbfc; }
.stat .k { color: var(--muted); font-size: .82em; } .stat .v { font-size: 1.25em; font-weight: 600; }
.stat .v.small { font-size: 1em; }
.pill { display: inline-block; border: 1px solid var(--line); border-radius: 12px; padding: 1px 8px; margin: 2px 2px; background: #fafbfc; font-size: .9em; }
.badge { display: inline-block; border-radius: 4px; padding: 1px 6px; font-size: .8em; background: #eef0f3; color: #3b4452; }
.st-scheduled { background: #e3f2fd; color: #0d47a1; } .st-estimated { background: #fff3e0; color: #8a4b00; }
.st-confirmed { background: #e8f5e9; color: #1b5e20; } .st-occurred { background: #eceff1; color: #455a64; }
details summary { cursor: pointer; color: var(--accent); margin: 6px 0; }

/* semaforo classi fonte */
.dot { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; border-radius: 9px; color: #fff; font-size: .72em; font-weight: 700; text-align: center; margin-right: 4px; vertical-align: middle; }
.c-A { background: var(--cA); } .c-B { background: var(--cB); } .c-C { background: var(--cC); color: #3a2f00; } .c-D { background: var(--cD); } .c-E { background: var(--cE); }
.legend { color: var(--muted); margin: 0 0 8px; } .legend .dot { margin-left: 10px; }
.newslist { list-style: none; margin: 0; padding: 0; }
.newslist li { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.rumor { background: #fffaf3; margin-top: 12px; }

/* testata scheda */
.head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.head-l { display: flex; gap: 14px; align-items: flex-start; }
.head h1 { margin: 0; font-size: 1.5em; }
.head .sym { color: var(--muted); font-weight: 400; font-size: .7em; margin-left: 6px; }
.logo { width: 56px; height: 56px; object-fit: contain; }
.head-r { min-width: 280px; }
.quote .px { font-size: 2.1em; font-weight: 700; line-height: 1.1; }
.quote .cur { font-size: .45em; color: var(--muted); font-weight: 400; }
.quote .chg { font-size: 1.1em; font-weight: 600; }
.quote .meta span { margin-right: 10px; }
.quote.stale .px { color: #4b5563; }
.age.fresh { color: var(--up); } .age.warm { color: #b26a00; } .age.old { color: var(--down); }
.ms-regular { background: #e8f5e9; color: #1b5e20; } .ms-pre, .ms-post, .ms-extended { background: #fff3e0; color: #8a4b00; }
.ms-poll { background: #e3f2fd; color: #0d47a1; } .ms-closed { background: #eceff1; color: #455a64; }
.toc { margin: -6px 0 14px; } .toc a { display: inline-block; margin: 2px 10px 2px 0; padding: 2px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.desc { margin: 4px 0 8px; max-width: 90ch; }

/* grafico */
.rangebar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.rbtn { border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; background: #fff; color: var(--ink); font-size: .9em; }
.rbtn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.rbtn:hover { text-decoration: none; border-color: var(--accent); }
.chartwrap { width: 100%; overflow: hidden; }
svg.chart { width: 100%; height: auto; display: block; }
svg.chart .grid { stroke: #e6e8ec; stroke-width: 1; }
svg.chart .tick { font-size: 11px; fill: #6b7280; font-family: inherit; }
svg.chart .last { font-size: 12px; font-weight: 600; font-family: inherit; }

/* timeline eventi */
.timeline { list-style: none; margin: 0 0 10px; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.timeline.future { border-left-color: var(--accent); }
.timeline .ev { position: relative; padding: 3px 0 3px 10px; }
.timeline .ev::before { content: ""; position: absolute; left: -19px; top: 11px; width: 8px; height: 8px; border-radius: 4px; background: var(--muted); }
.timeline.future .ev::before { background: var(--accent); }
.timeline .date { display: inline-block; min-width: 92px; font-weight: 600; }
.timeline .kind { display: inline-block; min-width: 150px; color: var(--accent); }
.timeline .ev span { margin-right: 8px; }
.k-earnings { color: #6a1b9a !important; } .k-dividend_ex, .k-dividend_pay { color: var(--up) !important; }

/* stagionalita' */
.season tr.robust td { background: #eef8ef; } .season tr.weak td { background: #f7fbf0; }
.heat td { text-align: right; padding: 3px 6px; }
.hp1 { background: #e9f6ec; } .hp2 { background: #c9ebd0; } .hp3 { background: #9fdcaa; }
.hn1 { background: #fdecec; } .hn2 { background: #f9cfcf; } .hn3 { background: #f3a6a6; }

footer.foot { border-top: 1px solid var(--line); background: #fff; padding: 16px 0 26px; margin-top: 20px; font-size: .9em; }

/* testata: ex-nomi delle societa' unificate, codici identificativi */
.alias { margin: 6px 0 2px; }
.alias .pill { background: #eef3fb; border-color: #cfe0f5; }
.ids { margin: 4px 0 0; }
.ids span { margin-right: 14px; white-space: nowrap; }
.ids abbr { text-decoration: none; border-bottom: 1px dotted var(--muted); cursor: help; }

/* etichetta "traduzione automatica" e fonte dei bilanci */
.badge.auto { background: #f0f1f4; color: #5a6472; border: 1px solid var(--line); cursor: help; }
.fonte-tag { margin: 12px 0 0; }
.badge.src-sec { background: #e8eef8; color: #1f4e8c; }
.badge.src-esef { background: #eaf3ec; color: #1b5e20; }

/* calendario */
tr.oggi td { background: #fffbe8; }
.kind { display: inline-block; }
footer .freshness { margin: 0 0 8px; }

/* livelli di profondita' e consumi (usage.py) */
.demobar { background: #fff4d6; border-bottom: 1px solid #f0dca0; color: #6b4c00; padding: 7px 0; }
.demobar a { color: #7a4b00; font-weight: 600; }
.box.lock { background: #fbfbfd; border-style: dashed; border-color: #c9ced6; }
.box.lock .lockhead { margin: 0 0 6px; }
.box.lock .lockicon { margin-right: 6px; }
.box.lock p { margin: 2px 0; }
tr.insuf td { background: #fbf6f6; color: #7a6a6a; }
tr.insuf td strong { color: #7a6a6a; }

/* ============================================================ COPIA I GRANDI */
/* la pagina /grandi, quella di un gestore e il riquadro nella scheda del titolo */
.ritardo h2 { margin-top: 0; }
.ritardo p { margin: 4px 0; }
.tbl.grandi td { vertical-align: middle; }
.tbl.grandi td .small { line-height: 1.25; }
.badge.attenzione { background: #fdf0d5; color: #7a5a00; border: 1px solid #f0dca0; cursor: help; margin-left: 3px; }
.tbl.grandi abbr { text-decoration: none; border-bottom: 1px dotted var(--muted); cursor: help; }
tr.notarow td { background: #fffdf5; border-bottom: 1px solid var(--line); padding-top: 0; }
tr.senzadati td { background: #fbfbfc; color: #6b7280; }
.mov { white-space: nowrap; font-weight: 600; }
.mossa { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: #fafbfc; }
.mossa h3 { margin: 0 0 2px; }
.mossa p { margin: 0 0 6px; }
.m-nuovo, .m-aumentato { border-left: 3px solid var(--up); }
.m-ridotto, .m-uscito { border-left: 3px solid var(--down); }
.barra { width: 120px; padding: 0 6px !important; }
.barra span { display: block; height: 9px; background: var(--accent); border-radius: 5px; min-width: 2px; opacity: .75; }
.scartate { margin-top: 12px; background: #fbfbfd; border: 1px dashed #c9ced6; border-radius: 6px; padding: 6px 10px; }
.scartate summary { color: #7a5a00; }
.comesilegge .limiti { margin: 6px 0 10px; padding-left: 20px; }
.comesilegge .limiti li { margin-bottom: 6px; max-width: 95ch; }
.comesilegge .nonconsigli { background: #eef3fb; border: 1px solid #cfe0f5; border-radius: 6px; padding: 10px 12px; max-width: 95ch; }
.comesilegge dl.facts dd { max-width: 90ch; }
/* i numeri delle tabelle "grandi" non si spezzano mai a meta' ("+95,0 mld $" su una riga sola) */
.tbl.grandi td.num, .tbl.grandi td.num strong { white-space: nowrap; }
.tbl.grandi td.num .small { white-space: nowrap; }
.tbl.grandi th { line-height: 1.2; }

/* --- il link alla FONTE accanto a ogni numero (Bank Radar) ---------------------------------
   Deve essere visibile ma non gridare: chi legge la tabella cerca i numeri, chi vuole
   controllare cerca questo. Piccolo, in fondo alla cella della fonte, sempre nello stesso posto. */
.fontelink { font-size: 11.5px; color: var(--accent); text-decoration: none;
             border-bottom: 1px dotted currentColor; white-space: nowrap; }
.fontelink:hover { text-decoration: none; border-bottom-style: solid; }
.fontelink::after { content: " \2197"; font-size: 9px; opacity: .7; }   /* freccia "si apre fuori" */
.provfonti { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.fontebtn { display: inline-block; font-size: 12px; font-weight: 600; text-decoration: none;
            color: #fff; background: var(--accent); border-radius: 5px; padding: 4px 10px; }
.fontebtn:hover { filter: brightness(.92); text-decoration: none; }
.fontebtn::after { content: " \2197"; font-size: 10px; opacity: .85; }

/* ---------------------------------------------------- entrata e registrazione
   Un riquadro stretto e centrato: sono le uniche pagine del portale dove non
   c'e' niente da leggere, solo due campi da riempire. Larghezza in "ch" e non in
   pixel, cosi' la scatola resta della stessa misura anche nelle lingue che
   scrivono piu' lungo (il tedesco) o piu' corto (il cinese). */
.accesso { max-width: 46ch; margin: 3rem auto; }
.accesso .modulo { display: flex; flex-direction: column; gap: .35rem; margin: 1.2rem 0; }
.accesso label { font-weight: 600; margin-top: .6rem; }
.accesso input { padding: .6rem .7rem; font-size: 1rem; border: 1px solid #b9c2cc;
                 border-radius: 6px; background: #fff; }
.accesso input:focus { outline: 2px solid #2b6cb0; outline-offset: 1px; border-color: #2b6cb0; }
.accesso button.principale { margin-top: 1.1rem; padding: .65rem 1rem; font-size: 1rem;
                             font-weight: 600; color: #fff; background: #2b6cb0;
                             border: 0; border-radius: 6px; cursor: pointer; }
.accesso button.principale:hover { background: #24578f; }

/* Gli avvisi: il colore da solo non basta a distinguerli (chi non distingue il
   rosso dal verde vedrebbe tre riquadri identici), quindi ognuno ha anche il suo
   bordo spesso a sinistra e un peso del testo diverso. */
.ok-box, .err-box, .warn-box { padding: .7rem .9rem; border-radius: 6px; margin: 1rem 0;
                               border-left: 5px solid; }
.ok-box   { background: #eaf6ec; border-color: #2f855a; color: #22543d; }
.err-box  { background: #fdecea; border-color: #c53030; color: #742a2a; font-weight: 600; }
.warn-box { background: #fffaf0; border-color: #b7791f; color: #744210; }

/* ==================================================== la vetrina (pagina di benvenuto)
   E' l'unica pagina del portale aperta a chiunque, e la prima cosa che un cliente
   vede. Il resto del portale e' fatto per chi lavora (denso, tabelle fitte); qui
   serve il contrario: poche cose, grandi, con l'aria intorno. */
.vetrina-apertura { text-align: center; padding: 3rem 1rem 2.5rem; }
.vetrina-apertura h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.25;
                       max-width: 22ch; margin: 0 auto 1rem; }
.vetrina-apertura .occhiello { max-width: 62ch; margin: 0 auto 1.8rem; font-size: 1.05rem;
                               line-height: 1.6; color: #445; }
.azioni { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.bottone-grande, .bottone-piano { display: inline-block; padding: .8rem 1.6rem; font-size: 1.05rem;
                                  font-weight: 600; border-radius: 8px; text-decoration: none; }
.bottone-grande { background: #2b6cb0; color: #fff; }
.bottone-grande:hover { background: #24578f; }
.bottone-piano { background: transparent; color: #2b6cb0; border: 1px solid #b9c2cc; }
.bottone-piano:hover { border-color: #2b6cb0; }

/* I numeri. Le cifre in "tabular-nums" cosi' non ballano di larghezza, e la
   griglia si riadatta da sola: su un telefono diventano due colonne senza che
   nessuno debba scrivere una soglia a mano. */
.vetrina-numeri { padding: 2rem 0; border-top: 1px solid #e3e8ee; border-bottom: 1px solid #e3e8ee; }
.griglia-numeri { display: grid; gap: 1.4rem 1rem; margin: 1.2rem 0 .8rem;
                  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.numero { text-align: center; }
.numero .v { display: block; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700;
             font-variant-numeric: tabular-nums; color: #1a365d; }
.numero .k { display: block; font-size: .85rem; color: #667; margin-top: .2rem; }

.vetrina-perche { padding: 2.5rem 0; }
.tre { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.tre article h3 { margin: 0 0 .5rem; font-size: 1.15rem; color: #1a365d; }
.tre article p { line-height: 1.6; margin: 0 0 .6rem; }
/* La riga della prova: e' il numero vero che sostiene l'affermazione qui sopra.
   Va distinta dal testo che la precede, altrimenti sembra altra pubblicita'. */
.tre .prova { font-size: .9rem; color: #2f6f4f; background: #f2f8f4;
              border-left: 3px solid #2f855a; padding: .45rem .7rem; border-radius: 0 4px 4px 0; }

.vetrina-oggi, .vetrina-prezzo, .vetrina-non-e { padding: 2rem 0; border-top: 1px solid #e3e8ee; }
.elenco-largo { line-height: 1.7; padding-left: 1.2rem; max-width: 78ch; }
.elenco-largo li { margin-bottom: .6rem; }
/* Il riquadro dove diciamo che cosa NON abbiamo ancora. Volutamente visibile:
   un cliente che paga e poi scopre il buco da solo se ne va e lo racconta. */
.onesta { background: #fffaf0; border-left: 4px solid #b7791f; padding: .7rem .9rem;
          border-radius: 0 5px 5px 0; max-width: 78ch; color: #744210; }
.vetrina-non-e p { max-width: 78ch; line-height: 1.65; }
.vetrina-chiusura { text-align: center; padding: 2.5rem 0 3rem; }
.vetrina-chiusura .small { margin-top: .9rem; }

/* ============================================ SEMPLIFICAZIONE 02/09/2026
   Il portale era nato come strumento di lavoro: tutto visibile insieme, ogni
   numero in tabella. Giusto mentre si costruiva, sbagliato per un cliente.
   Qui sotto lo stile delle pagine rifatte. */

/* --- la home: la ricerca e' la cosa piu' grande della pagina, perche' e' la
   cosa che si viene a fare. Prima era una casella piccola in alto a destra. */
.cerca-grande { text-align: center; padding: 2.2rem 1rem 1.6rem; }
.cerca-grande h1 { font-size: clamp(1.3rem, 3vw, 1.9rem); margin: 0 0 1.1rem; font-weight: 600; }
.cerca-grande form { display: flex; gap: .5rem; max-width: 44rem; margin: 0 auto; }
.cerca-grande input { flex: 1; padding: .75rem .9rem; font-size: 1rem;
                      border: 1px solid #b9c2cc; border-radius: 8px; background: #fff; }
.cerca-grande input:focus { outline: 2px solid #2b6cb0; outline-offset: 1px; border-color: #2b6cb0; }
.cerca-grande button { padding: .75rem 1.4rem; font-size: 1rem; font-weight: 600; color: #fff;
                       background: #2b6cb0; border: 0; border-radius: 8px; cursor: pointer; }
.cerca-grande .scorciatoie { margin: .9rem 0 0; display: flex; gap: 1.2rem; justify-content: center;
                             flex-wrap: wrap; font-size: .92rem; }

.due-colonne { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.riquadro { background: #fff; border: 1px solid #e3e8ee; border-radius: 8px;
            padding: 1rem 1.1rem; margin-bottom: 1.2rem; }
.riquadro h2 { margin: 0 0 .6rem; font-size: 1.05rem; color: #1a365d; }
.riquadro .tbl td { padding: .35rem .4rem; }
.notizie { list-style: none; padding: 0; margin: 0; }
.notizie li { padding: .4rem 0; border-bottom: 1px solid #f0f3f6; line-height: 1.45; }
.notizie li:last-child { border-bottom: 0; }
.notizie li span { display: block; }

/* --- le sezioni che si aprono a richiesta sulla scheda del titolo.
   <details> del browser: nessun JavaScript nostro, funziona da tastiera e lo
   leggono i lettori per non vedenti. La freccia la disegna il browser. */
.titolo-approfondimenti { margin: 2rem 0 .2rem; font-size: 1.1rem; color: #1a365d; }
.sotto-titolo { margin: 0 0 .9rem; }
details.sez { background: #fff; border: 1px solid #e3e8ee; border-radius: 8px; margin-bottom: .5rem; }
details.sez > summary { padding: .8rem 1rem; cursor: pointer; font-weight: 600; color: #1a365d;
                        list-style-position: outside; }
details.sez > summary:hover { background: #f7f9fb; }
details.sez[open] > summary { border-bottom: 1px solid #e3e8ee; }
/* La spiegazione accanto al nome: dice a che cosa serve la sezione senza
   allungare l'etichetta. Su schermo stretto va a capo da sola. */
details.sez > summary .spiega { display: block; font-weight: 400; font-size: .85rem;
                                color: #667; margin-top: .15rem; }
details.sez > div, details.sez > .stats, details.sez > p { padding: .9rem 1rem; }

/* ==================================================== SCHEDA 03/09/2026
   Dopo il confronto con Yahoo, Google Finanza, Simply Wall St e Borsa Italiana
   (CONFRONTO-UX.md). Prima il dato, poi - a un clic - da dove viene. */

/* Le cinque linguette al posto degli undici bottoncini. Restano attaccate in
   alto quando si scorre, cosi da qualunque punto della pagina si torna su. */
.linguette { display: flex; gap: .25rem; margin: .8rem 0 1rem; padding: .3rem;
             background: #fff; border: 1px solid #e3e8ee; border-radius: 10px;
             position: sticky; top: .4rem; z-index: 5; overflow-x: auto; }
.linguette a { flex: 1; text-align: center; padding: .55rem .6rem; border-radius: 7px;
               text-decoration: none; color: #1a365d; font-weight: 600; white-space: nowrap; }
.linguette a:hover { background: #eef3f9; }

/* La testata: una riga di contesto sola, il prezzo a destra ben grande. */
.head .sub { color: #556; }
.head .quote .px { font-size: clamp(1.6rem, 3vw, 2.3rem); }

/* I quattro fatti in chiaro sotto la descrizione: griglia, non tabella. */
.facts-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
           gap: .4rem 1.2rem; margin: .8rem 0 .4rem; }
.facts-4 dt { font-size: .78rem; color: #667; text-transform: uppercase; letter-spacing: .02em; }
.facts-4 dd { margin: 0; font-weight: 600; }

/* Il "leggi tutto" e gli altri riquadri dentro una sezione: discreti, in linea. */
details.dentro { margin: .4rem 0 .6rem; }
details.dentro > summary { cursor: pointer; color: #2b6cb0; font-size: .92rem; }
details.dentro[open] > summary { margin-bottom: .4rem; }

/* Il piccolo riquadro "titolo di gruppo" fra un blocco di sezioni e l altro. */
.titolo-approfondimenti { scroll-margin-top: 4rem; }
section.box, details.sez { scroll-margin-top: 4rem; }

/* --- la riga di freschezza al posto del riquadro giallo (banche, scheda banca).
   Una riga sola, color ambra tenue: il dato vecchio resta detto, ma non copre
   la pagina. La spiegazione completa si apre con un clic. */
details.frescoline { background: #fffaf0; border-left: 4px solid #b7791f; border-radius: 0 6px 6px 0;
                     padding: .45rem .8rem; margin: 0 0 .9rem; }
details.frescoline > summary { color: #744210; font-size: .92rem; cursor: pointer; }
details.frescoline p { margin: .5rem 0 0; }
/* la pillola "dato al ..." sotto il nome della banca, al posto della colonna */
.frescopill { vertical-align: middle; }

/* --- il bottone "Segui" sulla scheda (03/09/2026) */
.azioni-scheda { display: flex; gap: .9rem; align-items: center; margin-top: .5rem; flex-wrap: wrap; }
.segui-form { display: inline; margin: 0; }
button.segui { padding: .4rem .9rem; border-radius: 999px; border: 1px solid #b9c2cc; background: #fff;
               color: #1a365d; font-weight: 600; cursor: pointer; font-size: .92rem; }
button.segui:hover { border-color: #2b6cb0; }
button.segui.on { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
.riquadro.invito p { max-width: 60ch; }

/* --- il menu a panino sul telefono. Solo CSS: niente da mantenere.
   Sopra i 760px il bottone non esiste e il menu e' sempre visibile; sotto, il
   menu, la ricerca e la lingua compaiono solo se la casella e' spuntata. */
.menu-interruttore { display: none; }
.menu-panino { display: none; }
@media (max-width: 760px) {
  .menu-panino { display: inline-block; font-size: 1.5rem; padding: .1rem .5rem; cursor: pointer;
                 border: 1px solid #b9c2cc; border-radius: 6px; margin-left: auto; }
  .top .search, .top .links, .top .langbox { display: none; }
  .menu-interruttore:checked ~ .search,
  .menu-interruttore:checked ~ .links,
  .menu-interruttore:checked ~ .langbox { display: block; width: 100%; }
  .top .wrap { flex-wrap: wrap; }
}

/* --- la scheda di esempio vista da chi non e' entrato (03/09/2026) */
.demo-avviso { background: #eef3f9; border: 1px solid #b9cde6; border-radius: 8px; padding: .8rem 1rem;
               margin: 0 0 1rem; display: flex; gap: .8rem 1.2rem; align-items: center; flex-wrap: wrap;
               line-height: 1.5; }
.demo-avviso .bottone-grande.piccolo { padding: .5rem 1rem; font-size: .95rem; margin-left: auto; }
.vetrina-apertura .esempio { margin: 1rem 0 0; font-size: .98rem; }

/* --- "Copia i grandi" a schede (03/09/2026): ogni titolo e' una scheda con una frase,
   non una riga di tabella. Griglia che si riadatta: 2 per riga dentro le due colonne
   su computer, 1 per riga sul telefono. Verde = comprato, rosso = venduto. */
.grandi-schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
                 gap: .7rem; margin: .4rem 0 .2rem; }
.grandi-scheda { display: flex; flex-direction: column; gap: .35rem; min-width: 0;
                 background: #fafbfc; border: 1px solid var(--line); border-top: 3px solid #b9c2cc;
                 border-radius: 8px; padding: .7rem .85rem .65rem; }
.grandi-scheda.su { border-top-color: var(--up); }
.grandi-scheda.giu { border-top-color: var(--down); }
.grandi-scheda-testa { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.grandi-scheda-logo { width: 36px; height: 36px; object-fit: contain; flex: none; }
.grandi-scheda-iniziale { width: 36px; height: 36px; border-radius: 50%; flex: none; background: #e8ecf2;
                          color: #2f3a4a; font-weight: 700; font-size: 1.05rem;
                          display: inline-flex; align-items: center; justify-content: center; }
.grandi-scheda-nome { min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.grandi-scheda-nome strong { font-size: 1rem; }
.grandi-scheda-simbolo { color: var(--muted); font-size: .82rem; margin-left: .35rem; white-space: nowrap; }
.grandi-scheda-frase { margin: 0; line-height: 1.4; }
.grandi-scheda-frase strong { white-space: nowrap; }
.grandi-scheda-riga { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.35; }
.grandi-scheda-avviso { margin: 0; font-size: .82rem; line-height: 1.35; color: #744210; background: #fffaf0;
                        border-left: 3px solid #b7791f; border-radius: 0 4px 4px 0; padding: .25rem .5rem; }
.grandi-scheda-altre { margin-top: .5rem; }
.grandi-scheda-altre[open] > summary { margin-bottom: .5rem; }

/* --- il logo piccolo accanto al nome (parts/logo.html, 03/09/2026) ---------------------
   20 px, allineato al testo, sempre presente: se la societa' non ha il logo c'e' un
   cerchietto grigio con l'iniziale, cosi' le righe restano allineate. L'immagine sta
   SOPRA l'iniziale (quadrato bianco a bordi tondi che copre tutto il cerchio): se non
   si carica il browser la toglie e l'iniziale ricompare. */
.logo-mini { position: relative; display: inline-flex; align-items: center; justify-content: center;
             width: 20px; height: 20px; flex: 0 0 20px; margin-right: 5px; vertical-align: middle;
             border-radius: 50%; background: #e8ecf1; color: #3b4452;
             font-size: 11px; font-weight: 700; line-height: 1; font-style: normal; }
.logo-mini .logo-ini { display: block; }
.logo-mini-img { position: absolute; left: 0; top: 0; width: 20px; height: 20px; object-fit: contain;
                 background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 1px; }
.logo-mini.logo-vuoto { color: #5a6472; }
/* dentro i suggerimenti della ricerca la riga e' un blocco: il logo sta sulla stessa riga del simbolo */
.sugglist li a .logo-mini { margin-right: 6px; }

/* --- il primo accesso: "Comincia da qui", il selettore delle societa' da seguire (03/09/2026).
   Una griglia di schede piccole; il bottone e' lo stesso della scheda (button.segui). */
.avvio-griglia { list-style: none; margin: .8rem 0 .4rem; padding: 0; display: grid; gap: .7rem;
                 grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.avvio-card { border: 1px solid #e3e8ee; border-radius: 8px; padding: .7rem .8rem; background: #fbfcfe;
              display: flex; flex-direction: column; gap: .35rem; }
.avvio-testa { display: flex; align-items: center; gap: .6rem; min-height: 2.6rem; }
.avvio-logo { width: 36px; height: 36px; object-fit: contain; flex: 0 0 36px; }
.avvio-chi { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.avvio-nome { font-weight: 600; overflow-wrap: anywhere; }
.avvio-numeri { display: flex; gap: .6rem; align-items: baseline; font-size: 1.05rem; }
.avvio-card .segui-form { display: block; margin-top: .2rem; }
.avvio-card button.segui { width: 100%; }
.avvio-altre { margin: .6rem 0 0; }

/* --- la vetrina mostra il prodotto (03/09/2026): la schermata vera della scheda
   di esempio, sotto i due bottoni. Cornice sottile, ombra leggera, raggio 10px;
   sul telefono si restringe con la pagina (width 100%, height auto). */
.vetrina-schermata { margin: 2.2rem auto 0; max-width: 62rem; text-align: center; }
.vetrina-schermata-cornice { display: block; border: 1px solid #d5dce4; border-radius: 10px;
                             overflow: hidden; background: #fff;
                             box-shadow: 0 6px 24px rgba(26, 54, 93, .10); }
.vetrina-schermata-cornice:hover { border-color: #2b6cb0; box-shadow: 0 8px 28px rgba(26, 54, 93, .16); }
.vetrina-schermata img { display: block; width: 100%; max-width: 100%; height: auto; }
.vetrina-schermata figcaption { margin: .8rem auto 0; max-width: 70ch; font-size: .95rem;
                                line-height: 1.55; color: #445; }
.vetrina-schermata-nota { display: block; margin-top: .25rem; font-size: .85rem; color: #778; }

/* ---- prova gratuita (decisione di Max del 03/09/2026): la striscia verde con i giorni che restano e la frase nella vetrina ---- */
.provabar { background: #e8f5e9; border-bottom: 1px solid #a5d6a7; color: #1b5e20; }
.provabar strong { color: #1b5e20; }
/* 26/09/2026: ultimi giorni di prova (arancio, piu' evidente) e prova finita (rosso tenue) */
.provabar.provabar-urgente { background: #fff0db; border-bottom: 2px solid #f0a040; color: #7a3e00; padding: 9px 0; }
.provabar.provabar-urgente strong { color: #7a3e00; }
.provabar-finita { background: #fdecea; border-bottom: 2px solid #e57373; color: #7f1d1d; padding: 9px 0; }
.provabar-finita strong, .provabar-finita a { color: #7f1d1d; }
.prova-gratis { margin: .6rem 0 0; font-size: 1.05rem; color: #1b5e20; font-weight: 600; }

/* SCHEDA PUBBLICA (26/09/2026): chi non e' entrato vede la scheda senza prezzo.
   Al posto del prezzo un riquadro con i due bottoni; il "Segui" e' un collegamento
   a /entra e deve sembrare lo stesso bottone di chi e' entrato. */
a.segui { display: inline-block; padding: .4rem .9rem; border-radius: 999px; border: 1px solid #b9c2cc;
  background: #fff; color: #1a365d; font-weight: 600; font-size: .92rem; text-decoration: none; }
a.segui:hover { border-color: #2b6cb0; }
.pubblica-chiuso { max-width: 340px; background: #fbfbfd; border: 1px dashed #c9ced6; border-radius: 8px;
  padding: .7rem .9rem; }
.pubblica-chiuso p, .pubblica-resto p { margin: .2rem 0; }
.pubblica-chiuso .lockicon { margin-right: 4px; }
.pubblica-bottoni { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .5rem !important; }
.pubblica-bottoni .bottone-grande.piccolo { padding: .5rem 1rem; font-size: .95rem; }