/* TRADE-REPORTER — "Nero e oro", con le lame. Rifatto il 17/10/2026.
   (La grafica del 23/09 sta in storico\stile-2026-09-23.css.)

   Regole che tengono in piedi tutto:
   - i colori stanno SOLO nei token qui sotto: grafici (layout.js disegna con
     var(--...)), celle del calendario e cifre parlano la stessa lingua;
   - nero vero e caldo, pannelli PIATTI a filo: niente ombre, niente gradienti;
   - verde e rosso vogliono dire guadagno e perdita, e nient'altro. L'ORO e' per
     cio' che e' attivo (layout e periodo scelti), la freschezza, la cornice del
     risultato e la curva dell'equity: poche volte per schermata, mai decorazione;
   - il risultato del periodo e' il numero piu' grande della pagina; dietro, a
     destra, le Lame del Caos del sito di Alessandro (lame.js), che non coprono
     mai le cifre;
   - niente misure fisse sui contenitori: solo unita' relative e griglie fluide;
   - sotto i 720px la tabella a 23 colonne diventa un elenco di schedine;
   - rispetto delle zone di sicurezza dell'iPhone (notch e barra inferiore).

   ATTENZIONE ai nomi: `.barra` e' la riga di un grafico a barre (layout.js).
   La testata del sito si chiama `.testata`. */

:root {
  --fondo:        #0c0b0a;
  --fondo-alto:   #100f0d;
  --pannello:     #131210;
  --pannello-2:   #1a1815;
  --pannello-3:   #23201c;
  --bordo:        rgba(243, 239, 230, .085);
  --bordo-forte:  rgba(243, 239, 230, .16);
  --testo:        #f3efe6;
  --tenue:        #a59c8f;
  --spento:       #6f675c;
  --verde:        #35b37e;
  --verde-fondo:  rgba(53, 179, 126, .12);
  --rosso:        #e2574c;
  --rosso-fondo:  rgba(226, 87, 76, .12);
  --oro:          #c9a24a;
  --oro-chiaro:   #e3c67e;
  --oro-fondo:    rgba(201, 162, 74, .12);
  --oro-filo:     rgba(201, 162, 74, .42);
  --su-oro:       #140f04;
  --equity:       #c9a24a;
  --equity-trad:  #8c9ab6;
  --griglia:      rgba(243, 239, 230, .06);
  --asse-zero:    rgba(243, 239, 230, .28);
  --cella-vuota:  #191714;
  --raggio:       12px;
  --raggio-s:     8px;
  --alto:         env(safe-area-inset-top, 0px);
  --basso:        env(safe-area-inset-bottom, 0px);
  --margine:      clamp(1rem, 3.2vw, 2.25rem);
  --uscita:       cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  font-size: clamp(14px, 0.4vw + 12.5px, 16.5px);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--pannello-3) var(--fondo);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--testo);
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.45;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--oro); color: var(--su-oro); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: var(--pannello-3); border-radius: 10px;
                            border: 2px solid var(--fondo); }
::-webkit-scrollbar-thumb:hover { background: #2f2b25; }

/* cifre larghe uguali dove i numeri stanno in colonna (tabelle, barre).
   NON sui numeri grandi: il meno "tabulare" e' largo quanto una cifra. */
.val, .num, .tot, .q, .valore, td, .quante, .mt5 .v, .voce .va {
  font-variant-numeric: tabular-nums;
}

button, select, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
input, textarea { caret-color: var(--oro); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- testata */
.testata {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .9rem;
  padding: calc(.65rem + var(--alto)) var(--margine) .65rem;
  background: rgba(12, 11, 10, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordo);
}
.marchio { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.logo {
  width: 2.5rem; height: 2.5rem; flex: none;
  display: grid; place-items: center;
}
.logo img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .6));
  transform-origin: 70% 22%;
  transition: transform .5s var(--uscita);
}
.marchio:hover .logo img { transform: rotate(-14deg); }
.marchio .nome-sito { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marchio b { font-size: 1rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) {
  .testata { gap: .6rem; }
  .logo { width: 2.1rem; height: 2.1rem; }
  .marchio { gap: .5rem; }
  .marchio b { font-size: .86rem; letter-spacing: .03em; }
  .freschezza { font-size: .7rem; padding: .28rem .55rem; gap: .35rem; }
}
.marchio b span { color: var(--oro); }
.marchio small { font-size: .72rem; color: var(--tenue); white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }

.freschezza {
  margin-left: auto; font-size: .76rem; color: var(--tenue);
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .32rem .7rem; border-radius: 999px;
  border: 1px solid var(--bordo-forte);
  white-space: nowrap; flex: none;
}
.freschezza:empty { display: none; }
.freschezza .pallino {
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--tenue);
}
.freschezza.fresca { color: var(--testo); }
.freschezza.fresca .pallino { background: var(--verde); animation: respiro 2.4s ease-in-out infinite; }
.freschezza.vecchia { color: var(--oro-chiaro); border-color: var(--oro-filo); }
.freschezza.vecchia .pallino { background: var(--oro); }
@keyframes respiro { 50% { opacity: .35; } }

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: transparent; color: var(--testo);
  border: 1px solid var(--bordo-forte); border-radius: 10px;
  padding: 0 .9rem; min-height: 2.6rem; min-width: 2.6rem;
  font-weight: 700; font-size: .84rem; cursor: pointer;
  transition: background .18s, border-color .18s, transform .1s;
}
.bottone:hover { background: var(--pannello-2); border-color: var(--oro-filo); }
.bottone:active { transform: scale(.97); }
.bottone:disabled { opacity: .55; cursor: default; }
.bottone svg { width: 1.05rem; height: 1.05rem; color: var(--oro); flex: none; }
.bottone:disabled svg { animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (max-width: 520px) { .bottone .testo-bottone { display: none; } .bottone { padding: 0; } }

/* ------------------------------------------------------------------ avviso */
.avviso {
  margin: .9rem var(--margine) 0;
  padding: .75rem .95rem; font-size: .86rem; border-radius: var(--raggio-s);
  border: 1px solid var(--oro-filo); background: var(--oro-fondo); color: #f1e2bd;
}
.avviso.errore { border-color: rgba(226,87,76,.4); background: var(--rosso-fondo); color: #ffd3cd; }

/* ------------------------------------------------------------ striscia conto */
.conto {
  display: grid; gap: .8rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1rem var(--margine) 0;
  padding: .2rem 0 1rem;
  border-bottom: 1px solid var(--bordo);
}
@media (min-width: 560px) { .conto { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.voce { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.voce .et { font-size: .74rem; color: var(--tenue); font-weight: 500; }
.voce .va { font-size: 1.12rem; font-weight: 700; white-space: nowrap; letter-spacing: -.01em;
            overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------- viste */
.comandi {
  margin: 1rem var(--margine) 0;
  display: flex; flex-direction: column; gap: .8rem;
}
.viste { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
@media (min-width: 1000px) {
  .comandi { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: .8rem 2rem; }
  .comandi .viste:not(.layouts) { flex: 1 1 30rem; }
}
.viste > .etichetta, .campo > span, .scelta .data > span, .salvati > .etichetta {
  font-size: .74rem; color: var(--tenue); font-weight: 500;
}
.campo { display: flex; flex-direction: column; gap: .3rem; max-width: 26rem; }
select {
  appearance: none; -webkit-appearance: none;
  background: var(--pannello) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a59c8f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center;
  color: var(--testo);
  border: 1px solid var(--bordo-forte); border-radius: 10px;
  padding: .6rem 2.2rem .6rem .85rem; width: 100%; min-height: 2.75rem; cursor: pointer;
}
select:focus { outline: 2px solid var(--oro); outline-offset: 1px; }

/* i modi: un binario unico con dentro le scelte, come un selettore segmentato.
   Sul telefono non va a capo: scorre di lato. */
.modi {
  display: flex; gap: .2rem; padding: .2rem;
  border: 1px solid var(--bordo-forte); border-radius: 12px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  width: max-content; max-width: 100%; scroll-behavior: smooth;
}
.modi::-webkit-scrollbar { display: none; }
.modo {
  flex: none;
  background: transparent; color: var(--tenue);
  border: 1px solid transparent; border-radius: 9px;
  padding: .45rem .9rem; min-height: 2.35rem; cursor: pointer;
  font-size: .85rem; font-weight: 600; white-space: nowrap;
  transition: background .18s, color .18s;
}
.modo:hover { color: var(--testo); background: var(--pannello-2); }
.modo.attivo { background: var(--oro); color: var(--su-oro); font-weight: 800; }
.modo.piccolo {
  padding: .35rem .8rem; min-height: 2.75rem; font-size: .82rem;
  border-color: var(--bordo-forte); color: var(--testo); border-radius: 10px;
}
.modo.piccolo:hover { border-color: var(--oro-filo); }

@media (max-width: 520px) {
  #layouts { display: flex; width: 100%; overflow: visible; }
  #layouts .modo { flex: 1 1 auto; padding: .45rem .25rem; font-size: .76rem; text-align: center; }
  #modi { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  #modi .modo { text-align: center; }
}

/* la riga sotto: cambia con il modo scelto */
.scelta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .55rem .65rem; }
.scelta select.lungo { width: auto; min-width: min(20rem, 100%); flex: 0 1 22rem; }
.scelta .data { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 9rem; max-width: 12rem; }
.scelta input[type="date"] {
  background: var(--pannello); color: var(--testo);
  border: 1px solid var(--bordo-forte); border-radius: 10px;
  padding: .55rem .7rem; min-height: 2.75rem; color-scheme: dark; width: 100%;
}
.scelta input[type="date"]:focus { outline: 2px solid var(--oro); outline-offset: 1px; }
.chiosa { font-size: .82rem; color: var(--tenue); flex-basis: 100%; }
.chiosa.guasta { color: var(--rosso); }

/* --------------------------------------------------------- periodi salvati */
.salvati { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; }
.salvato {
  display: inline-flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--bordo-forte); border-radius: 999px;
}
.salvato .nome {
  background: none; border: 0; color: var(--testo); cursor: pointer;
  padding: .4rem .3rem .4rem .85rem; font-size: .82rem; white-space: nowrap;
}
.salvato.attivo { border-color: var(--oro); background: var(--oro-fondo); }
.salvato.attivo .nome { color: var(--oro-chiaro); font-weight: 700; }
.salvato .stella { padding: .4rem .7rem .4rem .35rem; }

.stella {
  background: none; border: 0; cursor: pointer;
  color: var(--tenue); font-size: 1.15rem; line-height: 1;
  padding: .35rem .6rem; border-radius: 999px;
}
.stella:hover, .stella.accesa { color: var(--oro); }
.stella:disabled { opacity: .35; cursor: default; }
.stella-salva {
  border: 1px solid var(--bordo-forte);
  min-height: 2.75rem; min-width: 2.75rem; padding: .25rem .7rem; border-radius: 10px;
}

/* --------------------------------------------------------------- contenuto */
main { padding: 1.25rem var(--margine) 2.5rem; }
.attesa { color: var(--tenue); }

.cartoncini {
  display: grid; gap: 0; margin-bottom: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo);
}
@media (max-width: 520px) {
  .cartoncini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Rischio: quattro numeri senza risultato, due per riga */
  .cartoncini:not(:has(.principale)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartoncini:not(:has(.principale)) .cartoncino:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cartoncini:not(:has(.principale)) .cartoncino:nth-child(n+3) { border-top: 1px solid var(--bordo); }
}
.cartoncino {
  position: relative; min-width: 0;
  padding: 1rem 1.1rem 1rem 0;
}
.cartoncino:not(.principale) + .cartoncino:not(.principale) {
  padding-left: 1.1rem; border-left: 1px solid var(--bordo);
}
.cartoncino .et { font-size: .78rem; color: var(--tenue); font-weight: 500; }
.cartoncino .va { font-size: clamp(1.35rem, 4.4vw, 2rem); font-weight: 800;
                  letter-spacing: -.03em; white-space: nowrap; margin: .2rem 0 .1rem;
                  overflow: hidden; text-overflow: ellipsis; }
.cartoncino .sotto { font-size: .78rem; color: var(--tenue); }

/* ======================================================= IL RISULTATO
   Il numero che si guarda per primo: riga intera, cifra enorme, e dietro a
   destra le Lame del Caos (img\lame4-*.webp, dal sito di Alessandro). Le lame
   sono su nero: con "screen" il nero sparisce e resta solo l'oro. */
.cartoncino.principale {
  grid-column: 1 / -1;
  padding: clamp(1.2rem, 3vw, 2rem) 0 clamp(1.1rem, 2.6vw, 1.6rem);
  border-bottom: 1px solid var(--bordo);
  overflow: hidden; isolation: isolate;
  min-height: clamp(13rem, 26vw, 19rem);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.cartoncino.principale > :not(.lame) { position: relative; z-index: 2; max-width: min(100%, 44rem); }
.cartoncino.principale .et { font-size: .86rem; }
.cartoncino.principale .va {
  font-size: clamp(3rem, 10vw, 6.2rem); line-height: .95; letter-spacing: -.045em;
  margin: .35rem 0 .45rem; overflow: visible;
}
.cartoncino.principale .sotto { font-size: .84rem; }
.cartoncino .mt5 {
  margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--bordo-forte);
  display: flex; flex-wrap: wrap; gap: .4rem 2.2rem; font-size: .8rem; width: max-content;
  max-width: 100%;
}
.cartoncino .mt5 .titoletto { flex-basis: 100%; font-size: .72rem; color: var(--spento); }
.cartoncino .mt5 .k { color: var(--tenue); display: none; }
.cartoncino .mt5 .riga-mt5 { display: flex; flex-direction: column; gap: .1rem; }
.cartoncino .mt5 .riga-mt5 .k { display: block; }
.cartoncino .mt5 .v { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }

/* le lame: livello dietro il numero, solo nella meta' destra, sfumato verso
   sinistra cosi' le cifre restano su nero pieno */
.lame {
  position: absolute; inset: 0 0 0 auto; width: min(68%, 56rem); z-index: 0;
  pointer-events: none; perspective: 900px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}
.lame img, .lame .lama { position: absolute; inset: 0; width: 100%; height: 100%; }
/* "screen" va sul livello che si muove (.lama), non sull'immagine dentro:
   il transform fa di .lama un gruppo a se', e l'immagine si fonderebbe solo con
   il vuoto, coprendo l'altra lama col suo nero. Il fondo del gruppo e' il nero
   della pagina, cosi' la maschera sfuma senza lasciare un rettangolo. */
.lame { background: var(--fondo); }
.lame img { object-fit: cover; object-position: 100% 50%; }
.lame .fondo { opacity: .26; mix-blend-mode: screen; }
.lame .lama { will-change: transform; mix-blend-mode: screen; }
.lame canvas { mix-blend-mode: screen; }
.lame canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 720px) {
  .lame { width: 100%; opacity: .55;
          -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 70%);
                  mask-image: linear-gradient(90deg, transparent 10%, #000 70%); }
}

.griglia { display: grid; gap: 1rem; margin-bottom: 1.25rem;
           grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }

.pannello {
  background: var(--pannello); border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
}
.pannello > h2 {
  margin: 0; padding: .9rem 1.1rem .5rem; font-size: .92rem; font-weight: 700;
  letter-spacing: -.005em; color: var(--testo);
}
.pannello > .corpo { padding: .55rem 1.1rem 1.1rem; }
.pannello > .corpo.senza { padding: .2rem .35rem .5rem; }

.tela { width: 100%; display: block; position: relative; }

/* il cartellino coi valori, quando passi sopra il grafico */
.mirino-valori {
  position: absolute; top: .4rem; pointer-events: none;
  background: rgba(19, 18, 16, .97); border: 1px solid var(--bordo-forte);
  border-radius: 8px; padding: .45rem .6rem;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.8);
  font-size: .78rem; white-space: nowrap; z-index: 5;
}
.mirino-valori .quando { color: var(--tenue); font-size: .7rem; margin-bottom: .2rem; }
/* `flex-direction: row` va detto: .voce esiste gia' nella striscia del conto */
.mirino-valori .voce { display: flex; flex-direction: row; align-items: center; gap: .4rem; }
.mirino-valori .voce i { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
.mirino-valori .voce .nome { color: var(--tenue); }
.mirino-valori .voce .valore { margin-left: auto; padding-left: .6rem; font-weight: 700; }
.tela-alta { height: clamp(13rem, 34vw, 22rem); }
.tela-media { height: clamp(10rem, 24vw, 15rem); }
.tela-bassa { height: clamp(4rem, 12vw, 6.5rem); }

.legenda { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; padding: 0 1.1rem .4rem;
           font-size: .78rem; color: var(--tenue); }
.legenda i { display: inline-block; width: .9rem; height: .2rem; vertical-align: middle;
             margin-right: .4rem; border-radius: 2px; }

/* --------------------------------------------------------------- statistiche */
.stat { width: 100%; border-collapse: collapse; font-size: .88rem; }
.stat td { padding: .42rem 0; border-bottom: 1px solid var(--griglia); }
.stat tr:last-child td { border-bottom: 0; }
.stat td:first-child { color: var(--tenue); }
.stat td:last-child { text-align: right; white-space: nowrap; font-weight: 700; }
.stat tr.sep td { border-top: 1px solid var(--bordo-forte); padding-top: .6rem; }
.stat .nota { color: var(--spento); font-size: .74rem; }

/* ------------------------------------------------------------- strumenti */
.strumenti {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .3rem 1.1rem .8rem; border-bottom: 1px solid var(--bordo);
}
.strumenti input[type=search], .strumenti select {
  background-color: var(--fondo-alto); color: var(--testo); border: 1px solid var(--bordo-forte);
  border-radius: 10px; padding: .5rem .7rem; font-size: .86rem; min-height: 2.6rem;
  flex: 1 1 9rem; min-width: 0; width: auto;
}
.strumenti select { padding-right: 2.2rem; }
.strumenti input[type=search]::placeholder { color: var(--spento); }
.strumenti input[type=search]:focus { outline: 2px solid var(--oro); outline-offset: 1px; }
.strumenti .interruttore {
  display: flex; align-items: center; gap: .45rem; font-size: .84rem;
  color: var(--tenue); min-height: 2.6rem; cursor: pointer;
}
.strumenti .interruttore input { width: 1.1rem; height: 1.1rem; accent-color: var(--oro); }
.conteggio { width: 100%; color: var(--tenue); font-size: .78rem; }

/* ------------------------------------------------------- tabella (desktop) */
.scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.dati { border-collapse: collapse; width: 100%; font-size: .82rem; white-space: nowrap; }
table.dati th, table.dati td { padding: .5rem .65rem; border-bottom: 1px solid var(--griglia); }
table.dati th {
  position: sticky; top: 0; background: var(--pannello); z-index: 2;
  text-align: left; font-weight: 600; color: var(--tenue); cursor: pointer;
  font-size: .74rem; border-bottom-color: var(--bordo-forte);
}
table.dati th:hover { color: var(--testo); }
table.dati td.num { text-align: right; }
table.dati tbody tr:hover { background: var(--oro-fondo); }
table.dati tr.cassa { color: var(--tenue); font-style: italic; }

/* ------------------------------------------------------- schedine (telefono) */
.schedine { display: flex; flex-direction: column; }
.op {
  display: grid; grid-template-columns: auto 1fr auto; gap: .2rem .6rem;
  align-items: baseline; padding: .75rem 1.1rem;
  border-bottom: 1px solid var(--griglia); cursor: pointer;
  transition: background .12s;
}
.op:active { background: var(--pannello-2); }
.op .verso, .trade-grosso .verso, .gio-alto .verso {
  font-weight: 800; font-size: .68rem; letter-spacing: .06em;
  padding: .12rem .42rem; border-radius: 5px;
}
.op .verso.buy, .trade-grosso .verso.buy, .gio-alto .verso.buy { color: var(--verde); background: var(--verde-fondo); }
.op .verso.sell, .trade-grosso .verso.sell, .gio-alto .verso.sell { color: var(--rosso); background: var(--rosso-fondo); }
.op .titolo { font-size: .92rem; font-weight: 600; min-width: 0; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
.op .soldi { font-weight: 800; white-space: nowrap; }
.op .sotto { grid-column: 1 / -1; font-size: .74rem; color: var(--tenue);
             display: flex; gap: .6rem; flex-wrap: wrap; }
.op .dettaglio {
  grid-column: 1 / -1; margin-top: .5rem; padding: .6rem .7rem;
  background: var(--fondo-alto); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  display: grid; gap: .15rem .9rem;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  font-size: .78rem;
}
.op .dettaglio div { display: flex; justify-content: space-between; gap: .5rem; }
.op .dettaglio .k { color: var(--tenue); }
.op.movimento .titolo { font-style: italic; color: var(--tenue); }

.altre {
  width: 100%; padding: .95rem; background: transparent; color: var(--oro-chiaro);
  border: 0; border-top: 1px solid var(--bordo); cursor: pointer; font-size: .86rem;
  font-weight: 700;
}
.altre:hover { background: var(--oro-fondo); }

.su { color: var(--verde); }
.giu { color: var(--rosso); }
.neutro { color: var(--testo); }
.vuoto { color: var(--spento); }

.esito { font-size: .72rem; padding: .1rem .45rem; border-radius: 999px;
         border: 1px solid var(--bordo-forte); }
.esito.t { color: var(--verde); border-color: rgba(53,179,126,.35); background: var(--verde-fondo); }
.esito.s { color: var(--rosso); border-color: rgba(226,87,76,.35); background: var(--rosso-fondo); }
.esito.b { color: var(--tenue); }

/* =========================================================================
   I LAYOUT — Sintesi, Calendario, Asset, Rischio, Giornale, Completo.
   ========================================================================= */

/* ------------------------------------------------------- numeri secchi */
.numeretti {
  display: grid; gap: .8rem 1.2rem; margin-bottom: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--bordo);
}
@media (max-width: 520px) { .numeretti { grid-template-columns: 1fr 1fr; } }
.numeretto { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.numeretto .et { font-size: .74rem; color: var(--tenue); font-weight: 500; }
.numeretto .va { font-size: 1.15rem; font-weight: 700; white-space: nowrap; letter-spacing: -.01em; }

/* nella Sintesi i numeri principali sono piu' grandi */
.cartoncini.grandi .cartoncino:not(.principale) .va { font-size: clamp(1.5rem, 5vw, 2.3rem); }

/* sul telefono: il risultato su una riga intera, gli altri tre in fila sotto */
@media (max-width: 520px) {
  .cartoncino:not(.principale) { padding-right: .5rem; }
  .cartoncino:not(.principale) + .cartoncino:not(.principale) { padding-left: .6rem; }
  .cartoncini .cartoncino:not(.principale) .va,
  .cartoncini.grandi .cartoncino:not(.principale) .va { font-size: 1.15rem; }
  .cartoncini .cartoncino:not(.principale) .et { font-size: .68rem; }
  .cartoncini .cartoncino:not(.principale) .sotto { font-size: .66rem; }
}

/* ------------------------------------------------------ barre orizzontali */
.barre { display: flex; flex-direction: column; gap: .65rem; }
.barra {
  display: grid; align-items: center; gap: .25rem .75rem;
  grid-template-columns: minmax(5rem, 8rem) 1fr minmax(4.5rem, auto);
}
.barra .et { display: flex; flex-direction: column; min-width: 0; }
.barra .et .nome { font-size: .86rem; font-weight: 600; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.barra .et .sotto { font-size: .7rem; color: var(--tenue); white-space: nowrap;
                    overflow: hidden; text-overflow: ellipsis; }
.barra .pista {
  position: relative; height: .55rem; border-radius: 999px;
  background: var(--pannello-3); overflow: hidden;
}
.barra .pezzo { position: absolute; top: 0; bottom: 0; border-radius: 999px; min-width: 2px; }
.barra .pezzo.su { background: var(--verde); }
.barra .pezzo.giu { background: var(--rosso); }
.barra .zero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px;
               background: var(--asse-zero); }
.barra .val { text-align: right; font-size: .86rem; font-weight: 700; white-space: nowrap; }
.barra.spenta { opacity: .45; }

@media (max-width: 460px) {
  .barra { grid-template-columns: 1fr auto; }
  .barra .et { grid-column: 1; }
  .barra .val { grid-column: 2; }
  .barra .pista { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ istogramma */
.istogramma {
  display: flex; align-items: flex-end; gap: 3px;
  padding: .5rem .3rem .2rem; overflow-x: auto;
}
.istogramma .colonna {
  flex: 1 1 0; min-width: 1.4rem;
  display: flex; flex-direction: column; align-items: center;
}
.istogramma .quante { font-size: .62rem; color: var(--tenue); height: .9rem; }
.istogramma .gambo { width: 100%; height: clamp(6rem, 16vw, 10rem);
                     display: flex; align-items: flex-end; }
.istogramma .asta { width: 100%; border-radius: 3px 3px 0 0; }
.istogramma .asta.su { background: var(--verde); }
.istogramma .asta.giu { background: var(--rosso); }
.istogramma .sotto { font-size: .6rem; color: var(--tenue); margin-top: .25rem; white-space: nowrap; }

/* ------------------------------------------------------------- calendario */
.mesi {
  display: grid; gap: .8rem; padding: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.mese {
  border: 1px solid var(--bordo);
  border-radius: 10px; padding: .65rem .65rem .55rem; min-width: 0;
}
.mese .testa {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; margin-bottom: .45rem;
}
.mese .testa .nome { font-size: .84rem; font-weight: 700; text-transform: capitalize; }
.mese .testa .tot { font-size: .84rem; font-weight: 700; white-space: nowrap; }

.griglia-giorni { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.griglia-giorni .inizio {
  text-align: center; font-size: .6rem; color: var(--tenue);
  text-transform: uppercase; letter-spacing: .04em; padding-bottom: .15rem;
}
.griglia-giorni .buco { aspect-ratio: 1; }

/* `--forza` la scrive il codice: quanto e' grossa quella giornata rispetto
   alla piu' grossa del periodo. Cambia solo quanto e' acceso il colore. */
.giorno {
  aspect-ratio: 1; border-radius: 5px; position: relative;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; line-height: 1; overflow: hidden;
  background: var(--cella-vuota); cursor: default;
}
.giorno.su { background: color-mix(in srgb, var(--verde) calc(var(--forza) * 78%), var(--cella-vuota)); }
.giorno.giu { background: color-mix(in srgb, var(--rosso) calc(var(--forza) * 78%), var(--cella-vuota)); }
.giorno.su, .giorno.giu { cursor: pointer; }
.giorno.fermo { opacity: .5; }
.giorno .n { font-size: .6rem; color: rgba(243,239,230,.75); }
.giorno .q { font-size: .6rem; font-weight: 700; }
.giorno.fermo .q { display: none; }

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .giorno.su { background: #17402c; }
  .giorno.giu { background: #4d211d; }
}

.dettaglio-giorno {
  display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline;
  margin-top: .45rem; padding-top: .4rem; font-size: .76rem;
  border-top: 1px solid var(--bordo); color: var(--tenue);
}
.dettaglio-giorno b { color: var(--testo); }

.legenda-calendario {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  padding: 0 1.1rem .6rem; font-size: .74rem; color: var(--tenue);
}
.legenda-calendario .q { width: .85rem; height: .85rem; border-radius: 3px; }
.legenda-calendario .q.su.forte { background: var(--verde); }
.legenda-calendario .q.su.debole { background: #17402c; }
.legenda-calendario .q.fermo { background: var(--cella-vuota); }
.legenda-calendario .q.giu.debole { background: #4d211d; }
.legenda-calendario .q.giu.forte { background: var(--rosso); }
.legenda-calendario .testo { margin-left: .4rem; }

/* --------------------------------------------------- striscia degli ultimi */
/* griglia e non flex: l'ultima riga non deve gonfiarsi a riempire lo spazio */
.striscia { display: grid; grid-template-columns: repeat(auto-fill, minmax(1.75rem, 1fr));
            gap: 4px; padding: .6rem; }
.striscia .tacca {
  aspect-ratio: 1; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; color: rgba(243,239,230,.85); background: var(--cella-vuota);
}
.striscia .tacca.su { background: color-mix(in srgb, var(--verde) calc(var(--forza) * 78%), var(--cella-vuota)); }
.striscia .tacca.giu { background: color-mix(in srgb, var(--rosso) calc(var(--forza) * 78%), var(--cella-vuota)); }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .striscia .tacca.su { background: #17402c; }
  .striscia .tacca.giu { background: #4d211d; }
}

/* ------------------------------------------------- il trade piu' grosso */
.trade-grosso { padding: .85rem 1.1rem; }
.trade-grosso .alto { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.trade-grosso .titolo { font-size: 1rem; font-weight: 600; }
.trade-grosso .soldi {
  margin-left: auto; font-size: clamp(1.15rem, 4.4vw, 1.6rem);
  font-weight: 800; white-space: nowrap; letter-spacing: -.02em;
}
.trade-grosso .sotto {
  display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .35rem;
  font-size: .76rem; color: var(--tenue);
}

/* la tabella per strumento: piu' compatta, e va a capo invece di scorrere */
table.dati.compatta { white-space: normal; }
table.dati.compatta th { cursor: default; }
table.dati th.num { text-align: right; }
.stat td.num { text-align: right; }
.stat td.tenue { color: var(--tenue); font-size: .74rem; }
.stat tr td:last-child { text-align: right; }

/* ------------------------------------------------------------------- piede */
.pie {
  display: flex; gap: .3rem 1rem; justify-content: space-between; flex-wrap: wrap;
  margin: 0 var(--margine);
  padding: .95rem 0 calc(1rem + var(--basso));
  border-top: 1px solid var(--bordo);
  font-size: .76rem; color: var(--tenue);
}
.pie .ok { color: var(--verde); }
.pie .ko { color: var(--rosso); }

/* chi mostra cosa, a seconda della larghezza */
.solo-largo { display: none; }
@media (min-width: 720px) {
  .solo-largo { display: block; }
  .solo-stretto { display: none; }
}


/* =========================================================================
   IL GIORNALE DEI TRADE (07/10/2026) — giornale.js
   ========================================================================= */
.giornale { display: flex; flex-direction: column; gap: 1rem; }
.giornale .numeretti { margin-bottom: 0; }
.gio-avviso {
  padding: .75rem 1rem; border-radius: var(--raggio-s);
  background: var(--oro-fondo); border: 1px solid var(--oro-filo);
  color: var(--testo); font-size: .86rem;
}
.gio-avviso.giu { background: var(--rosso-fondo); border-color: rgba(226,87,76,.35); }
.gio-nota { margin: 0 0 .7rem; font-size: .8rem; color: var(--tenue); }
.gio-riep {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.gio-tab { width: 100%; border-collapse: collapse; font-size: .82rem;
           font-variant-numeric: tabular-nums; }
.gio-tab th { text-align: left; font-size: .72rem; color: var(--tenue); font-weight: 600;
              padding: 0 .3rem .35rem; border-bottom: 1px solid var(--bordo-forte); }
.gio-tab th:not(:first-child), .gio-tab td.num { text-align: right; }
.gio-tab td { padding: .4rem .3rem; border-bottom: 1px solid var(--griglia); white-space: nowrap; }
.gio-tab tr.vuota td { color: var(--spento); }
.gio-filtri { display: flex; gap: .4rem; padding: .5rem .65rem .65rem; flex-wrap: wrap; }
.gio-filtri .modo.attivo { background: var(--oro); color: var(--su-oro); border-color: var(--oro); }
.gio-vuoto { padding: .5rem 1.1rem 1rem; margin: 0; }
.gio-trade {
  display: flex; flex-direction: column; gap: .45rem;
  padding: .9rem 1.1rem; border-top: 1px solid var(--griglia);
}
.gio-trade:not(.fatta) .gio-alto .titolo::after {
  content: ""; display: inline-block; width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--oro); margin-left: .5rem; vertical-align: middle;
}
.gio-alto { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: baseline; }
.gio-alto .titolo { font-size: .92rem; font-weight: 600; }
.gio-alto .soldi { font-weight: 800; white-space: nowrap; }
.gio-sotto { display: flex; flex-wrap: wrap; gap: .3rem .6rem; font-size: .74rem; color: var(--tenue);
             align-items: center; }
.gio-motivo {
  width: 100%; resize: vertical; min-height: 2.6rem;
  background: var(--fondo-alto); color: var(--testo);
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s);
  padding: .55rem .7rem; font: inherit; font-size: 16px; line-height: 1.35;
}
.gio-motivo:focus { outline: 2px solid var(--oro); outline-offset: 1px; border-color: transparent; }
.gio-motivo::placeholder { color: var(--spento); }
.gio-riga { display: grid; grid-template-columns: 4.6rem 1fr; gap: .5rem; align-items: center; }
.gio-et { font-size: .74rem; color: var(--tenue); }
.gio-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.gio-chip {
  background: transparent; color: var(--testo);
  border: 1px solid var(--bordo-forte); border-radius: 999px;
  padding: .3rem .8rem; min-height: 2.2rem; min-width: 2.6rem;
  font: inherit; font-size: .82rem; cursor: pointer;
}
.gio-chip:hover { border-color: var(--oro-filo); }
.gio-chip.attivo { background: var(--oro); color: var(--su-oro); border-color: var(--oro); font-weight: 800; }
.gio-chip:disabled, .gio-motivo:disabled { opacity: .45; cursor: default; }
.gio-stato { font-size: .74rem; color: var(--tenue); min-height: 1em; }
.gio-stato.fatto { color: var(--testo); }
/* verde e rosso restano ai soldi: quello che chiede attenzione e' oro */
.gio-occhio { color: var(--oro); }
.gio-regole { display: flex; flex-wrap: wrap; gap: .3rem; }
.gio-regola {
  font-size: .72rem; padding: .1rem .5rem; border-radius: 999px;
  color: var(--oro-chiaro); background: var(--oro-fondo); border: 1px solid var(--oro-filo);
}
@media (max-width: 520px) {
  .gio-riga { grid-template-columns: 1fr; gap: .25rem; }
}