/* ============================================================
   Equity Manager — registro delle quote societarie. Prefix .eqm-*, palette ambra.
   Impianto UI di riferimento: Boardroom (.brd-*) e Lead & Prospecting → Meetings.
   Nessun colore hardcoded fuori da qui (§1.2). Empty state card (§1.6.1),
   overlay per operazioni lunghe (§1.3), badge per valore in colonna (§1.4.1).
   ============================================================ */
:root {
  --eqm-primary: #1e3a8a;
  --eqm-primary-dark: #172554;
  --eqm-primary-light: #eff6ff;
  --eqm-accent: #16a34a;
  --eqm-warn: #ca8a04;
  --eqm-danger: #dc2626;
  --eqm-info: #1d4ed8;
  /* Grigio dei testi secondari: il token globale --muted scendeva a 2,6:1 di contrasto,
     sotto il minimo leggibile. Questo sta sopra 4,5:1 su fondo bianco. */
  --eqm-muted: #5b6675;
  /* Categorie di quote: tinte stabili per la torta e i badge di classe */
  --eqm-c1: #1e3a8a; --eqm-c2: #0f766e; --eqm-c3: #1d4ed8; --eqm-c4: #7c3aed;
  --eqm-c5: #be123c; --eqm-c6: #0891b2; --eqm-c7: #65a30d; --eqm-c8: #db2777;
}

/* ── Testata di sezione: titolo a sinistra, azioni sempre in alto a destra ── */
/* La testata va a capo invece di comprimersi: con nowrap il titolo si schiacciava a 120px
   e finiva sotto il selettore società, mentre accanto restavano centinaia di pixel vuoti. */
.eqm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.eqm-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.eqm-head h1 { margin: 0 0 .25rem; }
.eqm-head .subtitle { margin: 0; }
.eqm-head-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ── Bottoni: mai sfondo trasparente (§1.2) ── */
.eqm-btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--border); background: #f8fafc; color: #334155; border-radius: 8px; padding: .5rem .9rem; font-size: .82rem; font-weight: 600; cursor: pointer; transition: filter .12s; }
.eqm-btn:hover:not(:disabled) { filter: brightness(.96); }
/* Disabilitato durante una richiesta (attesa) vs disabilitato perché non ha senso
   (non disponibile): il cursore deve dire due cose diverse. */
.eqm-btn:disabled { opacity: .6; cursor: wait; }
.eqm-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .72; background: #f1f5f9; }
.eqm-btn:focus-visible { outline: 2px solid var(--eqm-primary); outline-offset: 2px; }
.eqm-btn-primary { background: var(--eqm-primary); border-color: var(--eqm-primary); color: #fff; }
.eqm-btn-primary:hover:not(:disabled) { background: var(--eqm-primary-dark); }
.eqm-btn-danger { background: #fef2f2; border-color: #fecaca; color: var(--eqm-danger); }
.eqm-btn-danger:hover:not(:disabled) { background: #fee2e2; }
.eqm-btn-sm { padding: .32rem .6rem; font-size: .75rem; }
.eqm-btn svg { flex-shrink: 0; }

/* ── KPI (§1.7) ── */
.eqm-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: .75rem; margin-bottom: 1.1rem; }
/* Fascia con importi a molte cifre: 165px bastano per un conteggio o una percentuale, non
   per «13.993.433,18 €», che a quattro colonne usciva dalla propria card (§1.4.2). Qui le
   colonne sono più larghe e diventano tre, invece di quattro che non contengono il numero. */
.eqm-kpi-grid.eqm-kpi-grid-money { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.eqm-kpi { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1.1rem; }
.eqm-kpi-val { font-size: 1.65rem; font-weight: 700; color: var(--text); letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.eqm-kpi-val.good { color: var(--eqm-accent); }
.eqm-kpi-val.warn { color: var(--eqm-warn); }
.eqm-kpi-val.bad { color: var(--eqm-danger); }
.eqm-kpi-val.brand { color: var(--eqm-primary); }
.eqm-kpi-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--eqm-muted); margin-top: .3rem; }
.eqm-kpi-hint { font-size: .72rem; color: var(--eqm-muted); margin-top: .2rem; }

/* ── Toolbar, filtri, chip ── */
.eqm-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.eqm-segment { display: inline-flex; background: #eef1f6; border-radius: 8px; padding: 3px; }
.eqm-seg { border: none; background: #eef1f6; color: #475569; font-size: .78rem; font-weight: 600; padding: .35rem .8rem; border-radius: 6px; cursor: pointer; }
.eqm-seg.active { background: #fff; color: var(--eqm-primary); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.eqm-select, .eqm-input { border: 1px solid var(--border); background: #fff; color: #334155; border-radius: 8px; padding: .45rem .7rem; font-size: .8rem; font-family: inherit; }
.eqm-select:focus-visible, .eqm-input:focus-visible { outline: 2px solid var(--eqm-primary); outline-offset: 1px; }
.eqm-search { flex: 1; min-width: 180px; max-width: 340px; position: relative; }
.eqm-search input { width: 100%; border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: .45rem .8rem .45rem 2.1rem; font-size: .8rem; box-sizing: border-box; }
.eqm-search svg { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
/* Etichetta + controllo restano una cosa sola: andando a capo separatamente, la label
   restava a destra e il suo menu compariva a sinistra della riga sotto. */
.eqm-field-inline { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.eqm-field-inline > label { font-size: .78rem; color: var(--eqm-muted); }
.eqm-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .7rem; }
.eqm-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--eqm-primary-light); border: 1px solid #bfdbfe; color: #1e3a8a; border-radius: 999px; padding: .2rem .6rem; font-size: .74rem; font-weight: 600; }
.eqm-chip button { border: none; background: #bfdbfe; color: #1e3a8a; width: 16px; height: 16px; border-radius: 50%; font-size: .7rem; line-height: 1; cursor: pointer; padding: 0; }

/* ── Card ── */
.eqm-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.eqm-card-head { display: flex; justify-content: space-between; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .7rem; }
.eqm-card-title { font-size: .95rem; font-weight: 700; color: var(--text); margin: 0; display: flex; align-items: center; gap: .5rem; }
.eqm-card-title svg { color: var(--eqm-primary); }
.eqm-card-desc { font-size: .78rem; color: var(--eqm-muted); margin: -.4rem 0 .8rem; }
/* Dettaglio richiudibile: stessa famiglia della card, così un approfondimento non sembra
   un pezzo di un'altra interfaccia. Il riepilogo resta un elemento cliccabile riconoscibile
   (fondo pieno, mai trasparente) e conserva l'anello di focus da tastiera. */
.eqm-details { background: #fff; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 1rem; }
.eqm-details > summary { list-style: none; cursor: pointer; padding: .8rem 1.25rem; font-size: .85rem; font-weight: 600;
  color: var(--text); background: #f8fafc; border-radius: 12px; display: flex; align-items: center; gap: .5rem; }
.eqm-details[open] > summary { border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--border); }
.eqm-details > summary::-webkit-details-marker { display: none; }
.eqm-details > summary::before { content: '▸'; color: var(--eqm-primary); font-size: .9rem; transition: transform .15s ease; }
.eqm-details[open] > summary::before { transform: rotate(90deg); }
.eqm-details > summary:focus-visible { outline: 2px solid var(--eqm-primary); outline-offset: -2px; }
.eqm-details > *:not(summary) { padding: 0 1.25rem; }
.eqm-details > *:last-child { padding-bottom: 1rem; }
@media (prefers-reduced-motion: reduce) { .eqm-details > summary::before { transition: none; } }
.eqm-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; align-items: stretch; }
.eqm-grid-2 > .eqm-card { display: flex; flex-direction: column; }
/* Il contenitore del grafico occupa lo spazio che avanza nella card, invece di lasciarne
   vuoti due terzi quando la card accanto è più alta. */
.eqm-chart-box { flex: 1 1 auto; min-height: 220px; position: relative; }
.eqm-chart-box > canvas { position: absolute; inset: 0; }

/* ── Tabelle (§1.4, §1.4.2 niente spill) ── */
.eqm-table-wrap { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; margin-bottom: 1rem; }
.eqm-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.eqm-table thead th { text-align: left; padding: .7rem .9rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--eqm-muted); border-bottom: 1px solid var(--border); white-space: nowrap; background: #fafbfc; }
.eqm-table thead th.sortable { cursor: pointer; user-select: none; }
/* Da quando l'intestazione si raggiunge col tabulatore, chi ci arriva deve vederlo. */
.eqm-table thead th.sortable:focus-visible { outline: 2px solid var(--eqm-primary); outline-offset: -2px; }
.eqm-table thead th.sortable:hover { color: var(--eqm-primary); }
.eqm-table thead th.num, .eqm-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.eqm-table tbody td { padding: .6rem .9rem; border-bottom: 1px solid #f0f2f5; vertical-align: middle; color: var(--text); max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eqm-table tbody td.wrap { white-space: normal; }
.eqm-table tbody tr:hover { background: var(--eqm-primary-light); }
.eqm-table tbody tr:last-child td { border-bottom: none; }
.eqm-table tfoot td { padding: .6rem .9rem; font-weight: 700; border-top: 2px solid var(--border); background: #fafbfc; font-variant-numeric: tabular-nums; }
.eqm-table tfoot td.num { text-align: right; }
/* Colonna delle azioni ancorata a destra: con molte colonne la tabella scorre e i pulsanti
   finivano fuori dallo schermo, quindi la riga si poteva leggere ma non si poteva agire.
   Resta visibile durante lo scorrimento orizzontale, con un'ombra che segna il distacco. */
.eqm-table th.eqm-col-actions, .eqm-table td.eqm-col-actions,
.eqm-table tr > *:last-child:has(> .eqm-btn) {
  position: sticky; right: 0; z-index: 1; background: #fff; text-align: right;
  box-shadow: -8px 0 10px -8px rgba(15, 23, 42, .22); white-space: nowrap;
}
.eqm-table thead th.eqm-col-actions { background: #fafbfc; }
.eqm-table tbody tr:hover td.eqm-col-actions { background: var(--eqm-primary-light); }
.eqm-cellsub { font-size: .72rem; color: var(--eqm-muted); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* UN'ANNOTAZIONE È UNA FRASE, E VA A CAPO. `.eqm-cellsub` nasce per un sottotitolo breve
   dentro una cella — il nome di un file, un codice — dove troncare con i puntini è giusto.
   Una spiegazione troncata a una riga non spiega niente, e il troncamento nemmeno si vede
   quando il sotto-testo è un `<span>`: `overflow` non si applica agli elementi inline, così
   il testo usciva dalla card scorrendo in orizzontale (rilevato in produzione sulla timeline
   di un socio, con sei cessioni dello stesso giorno). */
.eqm-cellnote { font-size: .72rem; color: var(--eqm-muted); margin-top: .2rem; line-height: 1.35;
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.eqm-tl-card .eqm-cellsub, .eqm-tl-meta .eqm-cellsub {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* UNA RIGA CHE SI APRE. Un veicolo di investimento è un solo socio nel capitale ma dietro ha
   altre persone: l'elenco serve accanto alla quota che gli tocca, non in un'altra pagina. */
.eqm-acc-btn { background: none; border: 0; padding: 0 .15rem; margin-right: .1rem; cursor: pointer;
  color: var(--eqm-muted); vertical-align: middle; line-height: 1; border-radius: 4px; }
.eqm-acc-btn:hover { color: var(--eqm-primary); background: var(--eqm-bg-soft, #f1f5f9); }
.eqm-acc-btn:focus-visible { outline: 2px solid var(--eqm-primary); outline-offset: 1px; }
.eqm-acc-btn svg { width: 14px; height: 14px; transition: transform .15s ease; }
.eqm-acc-btn.aperto svg { transform: rotate(90deg); }
.eqm-acc-row > td { background: #f8fafc; padding: .6rem .8rem; }
.eqm-acc-row .eqm-table { background: #fff; }
.eqm-count { font-size: .78rem; color: var(--eqm-muted); margin: .4rem 0 1.2rem; }
.eqm-row-clickable { cursor: pointer; }
/* L'anello di focus vale per OGNI riga cliccabile dell'applicativo, non solo per quelle di una
   sezione: da quando sono raggiungibili con il tabulatore, chi naviga da tastiera deve vedere
   dove si trova. Senza, la riga si puo' aprire ma non si sa quale si sta per aprire — che e' il
   modo peggiore di essere accessibili (§1.5, «focus ring visibile su tutti gli elementi
   interattivi»). Su `tr` l'outline si disegna verso l'interno, altrimenti lo mangia la cella. */
tr.eqm-row-clickable:focus-visible { outline: 2px solid var(--eqm-primary); outline-offset: -2px;
  background: var(--eqm-primary-light, #f0f6ff); }
.eqm-tl-card.eqm-row-clickable:focus-visible { outline: 2px solid var(--eqm-primary); outline-offset: 2px; }

/* Barra di proporzione dentro la cella percentuale: si legge la struttura senza leggere i numeri */
.eqm-bar { position: relative; height: 6px; border-radius: 3px; background: #f1f5f9; overflow: hidden; margin-top: .25rem; min-width: 60px; }
.eqm-bar > span { position: absolute; inset: 0 auto 0 0; background: var(--eqm-primary); border-radius: 3px; }

/* ── Badge (§1.4.1: un colore per valore, mai un grigio unico) ── */
.eqm-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; background: #f1f5f9; color: #475569; }
.eqm-badge-founder { background: #dcfce7; color: #166534; }
.eqm-badge-investor { background: #dbeafe; color: #1d4ed8; }
.eqm-badge-employee { background: #ede9fe; color: #5b21b6; }
.eqm-badge-advisor { background: #fce7f3; color: #9d174d; }
.eqm-badge-entity { background: #ecfeff; color: #0e7490; }
.eqm-badge-other { background: #f1f5f9; color: #475569; }
/* Operazioni */
.eqm-badge-incorporation { background: #dcfce7; color: #166534; }
.eqm-badge-capital_increase { background: #dbeafe; color: #1e40af; }
.eqm-badge-bonus_increase { background: #e0f2fe; color: #075985; }
.eqm-badge-capital_decrease { background: #fee2e2; color: #991b1b; }
.eqm-badge-transfer { background: #fef3c7; color: #92400e; }
.eqm-badge-convertible_issue, .eqm-badge-convertible_funding { background: #ecfeff; color: #0e7490; }
.eqm-badge-convertible_conversion, .eqm-badge-sfp_conversion { background: #ede9fe; color: #5b21b6; }
.eqm-badge-convertible_repay { background: #ffe4e6; color: #be123c; }
.eqm-badge-sfp_resolution, .eqm-badge-sfp_grant { background: #fae8ff; color: #86198f; }
.eqm-badge-sfp_cancel, .eqm-badge-option_cancel { background: #f1f5f9; color: #475569; }
.eqm-badge-option_pool, .eqm-badge-option_grant, .eqm-badge-option_exercise { background: #d1fae5; color: #065f46; }
.eqm-badge-valuation { background: #f5f3ff; color: #6d28d9; }
.eqm-badge-class_conversion, .eqm-badge-split, .eqm-badge-buyback { background: #f1f5f9; color: #334155; }
/* Stati */
.eqm-badge-executed { background: #dcfce7; color: #166534; }
.eqm-badge-draft { background: #f1f5f9; color: #475569; }
.eqm-badge-cancelled { background: #fee2e2; color: #991b1b; }
.eqm-badge-resolved { background: #e0e7ff; color: #3730a3; }
.eqm-badge-granted { background: #dbeafe; color: #1d4ed8; }
.eqm-badge-funded { background: #ccfbf1; color: #115e59; }
.eqm-badge-converted { background: #ede9fe; color: #5b21b6; }
.eqm-badge-repaid { background: #ffe4e6; color: #be123c; }
.eqm-badge-expired { background: #fef3c7; color: #92400e; }
/* Severità delle verifiche */
.eqm-badge-critical { background: #fee2e2; color: #991b1b; }
.eqm-badge-warning { background: #fef3c7; color: #92400e; }
.eqm-badge-info { background: #e0f2fe; color: #075985; }
/* Categorie di quote: pastiglia con il colore della classe */
.eqm-class-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; vertical-align: middle; background: var(--eqm-primary); }

/* Delta di diluizione: il segno conta più del valore */
.eqm-delta { font-variant-numeric: tabular-nums; font-weight: 600; }
.eqm-delta.up { color: var(--eqm-accent); }
.eqm-delta.down { color: var(--eqm-danger); }
.eqm-delta.flat { color: var(--muted); }

/* ── Empty state (§1.6.1) ── */
.eqm-empty-state { background: #ffffff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 2.5rem 1.5rem; text-align: center; color: var(--text, #0f172a); }
.eqm-es-icon { width: 48px; height: 48px; margin: 0 auto .75rem; color: var(--muted, #64748b); }
.eqm-es-title { font-size: 1rem; font-weight: 600; margin: 0 0 .375rem; }
.eqm-es-desc { font-size: .875rem; color: var(--muted, #64748b); margin: 0 0 1rem; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.55; }
.eqm-es-cta { display: inline-flex; gap: .5rem; }

/* ── Skeleton (§1.6) ── */
.eqm-skel { background: linear-gradient(90deg, #f1f5f9 25%, #e8edf3 37%, #f1f5f9 63%); background-size: 400% 100%; animation: eqm-skel 1.2s ease infinite; border-radius: 8px; }
@keyframes eqm-skel { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }
.eqm-skel-kpi { height: 92px; }
.eqm-skel-row { height: 44px; margin-bottom: .5rem; }
@media (prefers-reduced-motion: reduce) { .eqm-skel { animation: none; } }

/* ── Modale (§1.1: mai confirm/prompt nativi) ── */
.eqm-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 4100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.eqm-modal { background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(15,23,42,.28); width: 100%; max-width: 620px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.eqm-modal.eqm-modal-wide { max-width: 980px; width: 95vw; }
.eqm-modal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.eqm-modal-head h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); }
.eqm-modal-x { border: none; background: #f1f5f9; color: #475569; width: 30px; height: 30px; border-radius: 8px; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.eqm-modal-x:hover { background: #e2e8f0; }
.eqm-modal-body { padding: 1.1rem 1.25rem 1.15rem; overflow-y: auto; }
.eqm-modal-body > *:last-child { margin-bottom: 0; }
/* Il testo esplicativo di una modale: senza questo due paragrafi consecutivi si toccano
   e sembrano un blocco solo (visto nella conferma di importazione). */
.eqm-modal-body > p { margin: 0 0 .7rem; line-height: 1.5; }
.eqm-modal-actions { display: flex; justify-content: flex-end; gap: .5rem; padding: .9rem 1.25rem; border-top: 1px solid var(--border); background: #fafbfc; }

/* ── Form ──
   Griglia vera, non flex: con `flex: 1 1 200px` ogni riga si ridistribuiva per conto suo
   e le colonne non erano incolonnate fra righe diverse. Le celle partono dall'alto
   (align-items:start) e ognuna riserva la stessa altezza per l'etichetta, così gli input
   di una riga stanno sulla STESSA linea anche quando un campo ha un testo di aiuto sotto:
   prima l'aiuto sfondava la riga e il campo accanto restava appeso in alto con un buco. */
.eqm-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: .85rem 1rem; align-items: start; margin-bottom: .9rem; }
.eqm-form-row:last-of-type { margin-bottom: .2rem; }
.eqm-field { min-width: 0; display: flex; flex-direction: column; gap: .28rem; }
.eqm-field > label { font-size: .75rem; font-weight: 600; color: #475569; min-height: 1.15em; line-height: 1.15; }
/* Il testo di aiuto scende in fondo alla cella: non spinge mai l'input */
.eqm-field > .eqm-field-hint { margin-top: .1rem; }
/* Una casella di spunta non ha etichetta sopra: senza questo si incollava al bordo
   superiore della riga e risultava sfasata rispetto agli input accanto. */
.eqm-field > .eqm-check:first-child { margin-top: calc(1.15em + .28rem); }
/* Campo che deve occupare l'intera larghezza della modale (note lunghe, elenchi) */
.eqm-field-full { grid-column: 1 / -1; }
.eqm-field input, .eqm-field select, .eqm-field textarea { border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem; font-size: .85rem; font-family: inherit; background: #fff; color: var(--text); box-sizing: border-box; width: 100%; }
.eqm-field input:focus-visible, .eqm-field select:focus-visible, .eqm-field textarea:focus-visible { outline: 2px solid var(--eqm-primary); outline-offset: 1px; }
.eqm-field input[aria-invalid="true"] { border-color: var(--eqm-danger); background: #fef2f2; }
.eqm-field-hint { font-size: .72rem; color: var(--eqm-muted); }
.eqm-field-err { font-size: .74rem; color: var(--eqm-danger); font-weight: 600; }
.eqm-check { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: #334155; }
.eqm-check input { width: auto; }
.eqm-fieldset { border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem; margin-bottom: .9rem; }
.eqm-fieldset > legend { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0 .4rem; }

/* Anteprima del calcolo dentro il wizard: è la parte che si guarda prima di firmare */
.eqm-preview { background: var(--eqm-primary-light); border: 1px solid #bfdbfe; border-radius: 10px; padding: .8rem 1rem; margin: .8rem 0; }
.eqm-preview-title { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #1e3a8a; margin-bottom: .5rem; }
.eqm-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.eqm-preview-item { background: #fff; border: 1px solid #bfdbfe; border-radius: 8px; padding: .5rem .7rem; }
.eqm-preview-val { font-size: 1.05rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.eqm-preview-label { font-size: .68rem; color: #1e3a8a; text-transform: uppercase; letter-spacing: .04em; margin-top: .15rem; }
.eqm-warn-box { background: #fffbeb; border: 1px solid #fde68a; border-left: 3px solid var(--eqm-warn); border-radius: 8px; padding: .6rem .8rem; font-size: .8rem; color: #92400e; margin: .6rem 0; }
/* Un'INFORMAZIONE non è un avviso. «Questo atto è stato letto per intero in tre letture» va
   detto, ma in giallo sembrerebbe un problema — e un riquadro giallo che non chiede niente a
   nessuno è il modo migliore per insegnare a ignorare i riquadri gialli. */
.eqm-info-box { background: #eff6ff; border: 1px solid #bfdbfe; border-left: 3px solid var(--eqm-primary); border-radius: 8px; padding: .6rem .8rem; font-size: .8rem; color: #1e40af; margin: .6rem 0; }
.eqm-formula { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; background: #f8fafc; border: 1px solid var(--border); border-radius: 6px; padding: .5rem .7rem; color: #475569; overflow-x: auto; white-space: pre; }

/* ── Timeline dello storico ── */
.eqm-timeline { position: relative; padding-left: 1.6rem; }
.eqm-timeline::before { content: ''; position: absolute; left: .42rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--border); }
.eqm-tl-item { position: relative; margin-bottom: 1rem; }
.eqm-tl-dot { position: absolute; left: -1.36rem; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--eqm-primary); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--border); }
.eqm-tl-date { font-size: .72rem; font-weight: 700; color: var(--eqm-primary); text-transform: uppercase; letter-spacing: .04em; }
.eqm-tl-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem; margin-top: .3rem; }
.eqm-tl-title { font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: .25rem; }
.eqm-tl-meta { font-size: .75rem; color: var(--muted); }

/* ── Cronologia degli strumenti (SFP & Convertendi) ──
   Stesso componente della timeline dello storico. Una tabella a otto colonne non reggeva
   questo contenuto: i pulsanti finivano tagliati fuori dal bordo destro e ogni cella
   comprimeva un dato diverso. Qui ogni strumento e' una scheda che porta i propri fatti,
   e le azioni stanno su una riga che va a capo — non possono uscire dal bordo. */
.eqm-tl-dot-chiuso { background: var(--eqm-muted); }
/* Operazioni con efficacia futura: si vedono sempre (nasconderle voleva dire nascondere
   proprio quelle che si va a cercare) ma si distinguono, perche' i loro numeri sono quelli
   che RISULTERANNO, non quelli di oggi. */
.eqm-tl-dot-futuro { background: #fff; border-color: var(--eqm-warn); box-shadow: 0 0 0 2px var(--eqm-warn); }
.eqm-tl-futura .eqm-tl-date { color: var(--eqm-warn); }
.eqm-tl-futura .eqm-tl-card { border-color: #fde68a; background: #fffbeb; }
.eqm-futura-nota { font-size: .72rem; color: #92400e; background: #fef3c7; border-radius: 6px; padding: .35rem .55rem; margin-bottom: .5rem; }
.eqm-strum-card { padding: .9rem 1.1rem; }
.eqm-strum-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; flex-wrap: wrap; }
.eqm-strum-ident { min-width: 0; flex: 1 1 240px; }
.eqm-strum-ident .eqm-tl-title { margin-bottom: .1rem; overflow-wrap: anywhere; }
.eqm-strum-sub { font-size: .78rem; color: var(--eqm-muted); overflow-wrap: anywhere; }
.eqm-strum-badges { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.eqm-badge-kind { background: #eef2ff; color: #3730a3; }

/* I fatti dello strumento: quelli che ha davvero, non una colonna di trattini per tutti. */
.eqm-strum-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem .9rem; margin-top: .7rem; }
.eqm-fact { min-width: 0; }
.eqm-fact-label { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--eqm-muted); }
.eqm-fact-val { font-size: .95rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.eqm-fact-sub { font-size: .7rem; color: var(--eqm-muted); line-height: 1.3; }
.eqm-fact-muted { font-weight: 600; font-size: .85rem; color: var(--eqm-muted); }

/* Quanto di un piano e' gia' stato distribuito, a colpo d'occhio. */
.eqm-plafond { margin-top: .7rem; }
.eqm-plafond-bar { height: 6px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.eqm-plafond-bar > span { display: block; height: 100%; background: var(--eqm-primary); border-radius: 999px; }
.eqm-plafond-legend { font-size: .72rem; color: var(--eqm-muted); margin-top: .3rem; }

/* Le assegnazioni vivono DENTRO la scheda del piano: fuori non si capirebbe da dove vengono. */
.eqm-assegnazioni { margin-top: .8rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.eqm-assegnazioni-tit { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--eqm-muted); margin-bottom: .35rem; }
.eqm-assegnazione { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem; margin-bottom: .35rem; cursor: pointer; }
.eqm-assegnazione:hover { background: #f1f5f9; }
.eqm-assegnazione-chi { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; min-width: 0; flex: 1 1 200px; font-size: .84rem; }
.eqm-assegnazione-quanto { font-size: .88rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.eqm-assegnazione-sub { display: block; font-size: .7rem; font-weight: 500; color: var(--eqm-muted); }
.eqm-assegnazione-azioni { display: flex; gap: .35rem; flex-wrap: wrap; }

/* Le azioni vanno a capo invece di uscire dal bordo. */
.eqm-strum-azioni { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--border); }

/* Azioni in coda a una riga di tabella: allineate a destra come il resto della colonna
   numerica, e mai a capo — due pulsanti impilati sembrano appartenere a righe diverse. */
.eqm-row-actions { display: inline-flex; gap: .35rem; justify-content: flex-end; white-space: nowrap; }

/* Persone con cui è condiviso uno scenario: chip rimovibili, così si vede chi c'è senza
   scorrere un elenco a spunta lungo quanto l'organico. */
.eqm-vis-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }

@media (max-width: 640px) {
  .eqm-strum-facts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .eqm-assegnazione-quanto { text-align: left; }
}

/* ── Grafico a torta della composizione (SVG inline, nessuna libreria) ── */
/* Torta sopra, nomi sotto su piu' colonne. Affiancate, con venticinque soci la legenda
   diventava un elenco alto mezzo schermo e la torta si riduceva a una monetina nell'angolo:
   nessuna delle due si leggeva. Le colonne si adattano alla larghezza disponibile, quindi il
   componente regge tre soci come trenta. */
.eqm-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.eqm-donut { flex: none; }
.eqm-legend { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .35rem .9rem; }
/* Da una dozzina di voci in su le colonne si stringono: meglio quattro colonne compatte che
   due lunghissime da scorrere. */
.eqm-legend-fitta { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); font-size: .78rem; }
.eqm-legend-item { display: flex; align-items: center; gap: .5rem; font-size: .82rem; min-width: 0;
  padding: .12rem .35rem; border-radius: 6px; }
.eqm-legend-item:hover { background: #f8fafc; }
.eqm-legend-fitta .eqm-legend-item { font-size: .78rem; }
.eqm-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.eqm-legend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.eqm-legend-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }

/* ── Overlay per operazioni lunghe (§1.3, stessa struttura di .cf-sync-overlay) ── */
.eqm-sync-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.eqm-sync-spinner { width: 46px; height: 46px; border: 4px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: eqm-spin .8s linear infinite; }
@keyframes eqm-spin { to { transform: rotate(360deg) } }
.eqm-sync-label { color: #fff; font-size: 1rem; font-weight: 600; }
.eqm-sync-sublabel { color: rgba(255,255,255,.75); font-size: .82rem; }
@media (prefers-reduced-motion: reduce) { .eqm-sync-spinner { animation-duration: 3s; } }

/* ── Toast ── */
.eqm-toast-wrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 5200; display: flex; flex-direction: column; gap: .5rem; }
.eqm-toast { background: #0f172a; color: #fff; border-radius: 10px; padding: .7rem 1rem; font-size: .84rem; box-shadow: 0 10px 30px rgba(15,23,42,.3); max-width: 380px; }
.eqm-toast.ok { background: #065f46; }
.eqm-toast.err { background: #991b1b; }

/* ── Waterfall: la scaletta della distribuzione ── */
.eqm-wf-step { border-left: 3px solid var(--eqm-primary); background: #fff; border-radius: 0 10px 10px 0; padding: .7rem 1rem; margin-bottom: .6rem; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.eqm-wf-step-title { font-size: .84rem; font-weight: 700; color: var(--text); display: flex; justify-content: space-between; gap: 1rem; }
.eqm-wf-step-amt { font-variant-numeric: tabular-nums; color: var(--eqm-primary); }
.eqm-wf-step-detail { font-size: .76rem; color: var(--muted); margin-top: .35rem; line-height: 1.5; }

/* ── Data di riferimento nel passato: deve essere impossibile non accorgersene ── */
.eqm-backdate-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--eqm-primary-light); border: 1px solid #bfdbfe; border-left: 4px solid var(--eqm-primary); border-radius: 8px; padding: .6rem .9rem; margin-bottom: 1rem; font-size: .84rem; color: #1e3a8a; }
.eqm-backdate-bar svg { flex: none; color: var(--eqm-primary); }
.eqm-backdate-bar span { flex: 1; min-width: 200px; }
.eqm-asof-back { border-color: var(--eqm-primary); background: var(--eqm-primary-light); color: #1e3a8a; font-weight: 600; }
.eqm-asof-back input { background: transparent; }

/* ── Waterfall a livelli: ogni livello è un blocco, l'ordine è la priorità ── */
.eqm-wf-level { border: 1px solid var(--border); border-left: 4px solid var(--eqm-primary); border-radius: 0 10px 10px 0; background: #fff; padding: .8rem 1rem; margin-bottom: .8rem; }
.eqm-wf-level-empty { border-left-color: #cbd5e1; opacity: .82; }
.eqm-wf-level-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.eqm-wf-level-no { display: inline-block; background: var(--eqm-primary); color: #fff; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; margin-right: .5rem; }
.eqm-wf-level-empty .eqm-wf-level-no { background: #94a3b8; }
.eqm-wf-level-title { font-size: .9rem; font-weight: 700; color: var(--text); margin-right: .5rem; }
.eqm-wf-level-amt { font-size: 1rem; font-weight: 700; color: var(--eqm-primary); font-variant-numeric: tabular-nums; }
.eqm-wf-level-empty .eqm-wf-level-amt { color: var(--muted); }
.eqm-wf-level-due { font-size: .74rem; font-weight: 600; color: var(--muted); }

/* ── Selettore società in testata ── */
.eqm-company-sel { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: .3rem .5rem; }
.eqm-company-sel select { border: none; background: #fff; font-size: .82rem; font-weight: 600; color: var(--text); padding: .15rem .2rem; }
.eqm-asof { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: .3rem .55rem; }
.eqm-asof input { border: none; font-size: .8rem; color: var(--text); font-family: inherit; }

/* ── Assegnazioni annidate sotto il loro piano ── */
/* Le righe figlie della vecchia tabella degli strumenti: SFP & Convertendi e' una
   cronologia dal 12/08/2026 e le assegnazioni vivono dentro la scheda del loro piano
   (.eqm-assegnazione). Restano solo perche' il markup a righe annidate potrebbe tornare
   utile altrove; se fra sei mesi sono ancora qui inutilizzate, si tolgono. */
.eqm-row-figlia > td:first-child { padding-left: 1.6rem; }
.eqm-figlia-tratto { color: var(--eqm-muted); margin-right: .15rem; }
.eqm-row-figlia { background: #fcfdfe; }
.eqm-readonly { padding: .45rem .7rem; border: 1px dashed var(--border); border-radius: 8px; background: #f8fafc; font-size: .82rem; color: var(--text); }

/* ── Movimenti di un'operazione, dentro la modale di correzione ── */
.eqm-line-block { padding-top: .8rem; margin-top: .8rem; border-top: 1px solid var(--border, #e2e8f0); }
.eqm-line-block:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.eqm-line-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.eqm-line-no { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--eqm-muted); }

/* ── Operazioni reali escluse da uno scenario: presenti ma non in gioco ── */
.eqm-tl-escluse .eqm-tl-card { background: #f8fafc; border-style: dashed; }
.eqm-table-spenta { opacity: .62; }
.eqm-table-spenta tbody tr:hover { background: transparent; }

/* ── Valori principali di un'operazione (pre-money, raccolta, controvalore…) ── */
.eqm-headline { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .6rem; }
.eqm-headline-item { flex: 1 1 128px; min-width: 118px; background: var(--eqm-primary-light); border: 1px solid #bfdbfe; border-radius: 8px; padding: .45rem .6rem; }
.eqm-headline-label { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--eqm-muted); }
.eqm-headline-val { font-size: 1.02rem; font-weight: 700; color: var(--eqm-primary); font-variant-numeric: tabular-nums; line-height: 1.25; }
.eqm-headline-hint { font-size: .68rem; color: var(--eqm-muted); line-height: 1.3; }

/* ── Responsive: sotto i 768px le tabelle diventano card impilate ── */
@media (max-width: 768px) {
  .eqm-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  /* Su schermo stretto un importo a otto cifre sta peggio, non meglio: meglio due card
     leggibili che quattro che tagliano il numero. */
  .eqm-kpi-grid.eqm-kpi-grid-money { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .eqm-kpi-grid.eqm-kpi-grid-money .eqm-kpi-val { font-size: 1.2rem; }
  .eqm-kpi-val { font-size: 1.35rem; }
  .eqm-table tbody td { max-width: 220px; }
  .eqm-legend { grid-template-columns: 1fr; }
  .eqm-donut { width: 200px; height: 200px; }
  .eqm-modal { max-height: 92vh; }
}

/* ── Stati dedotti e tipi di evento: un colore per valore (§1.4.1) ── */
.eqm-badge-partial     { background: #fef3c7; color: #92400e; }
.eqm-badge-repaying    { background: #e0f2fe; color: #075985; }
.eqm-badge-repaid      { background: #f1f5f9; color: #475569; }
.eqm-badge-signed      { background: #ede9fe; color: #5b21b6; }
.eqm-badge-accepted    { background: #dcfce7; color: #166534; }
.eqm-badge-forfeited   { background: #fee2e2; color: #991b1b; }
.eqm-badge-repurchased { background: #ffe4e6; color: #be123c; }
.eqm-badge-resolve     { background: #dbeafe; color: #1e40af; }
.eqm-badge-amend       { background: #e0e7ff; color: #3730a3; }
.eqm-badge-grant       { background: #dcfce7; color: #166534; }
.eqm-badge-accept      { background: #d1fae5; color: #065f46; }
.eqm-badge-fund        { background: #cffafe; color: #155e75; }
.eqm-badge-convert     { background: #ede9fe; color: #5b21b6; }
.eqm-badge-forfeit     { background: #fee2e2; color: #991b1b; }
.eqm-badge-repurchase  { background: #ffe4e6; color: #be123c; }
.eqm-badge-waive       { background: #f1f5f9; color: #475569; }
.eqm-badge-expire      { background: #f8fafc; color: #64748b; }
.eqm-badge-repay       { background: #e0f2fe; color: #075985; }
.eqm-badge-extend      { background: #fef9c3; color: #854d0e; }

/* Esito di una condivisione: il link generato deve essere leggibile e copiabile in un
   gesto, non selezionabile a fatica dentro un paragrafo. */
.eqm-callout { background: var(--eqm-primary-light); border: 1px solid #bfdbfe; border-radius: 10px; padding: .8rem .9rem; margin-top: .8rem; color: var(--text); font-size: .84rem; }
.eqm-share-url { display: flex; gap: .4rem; align-items: center; margin: .5rem 0 .35rem; }
.eqm-share-url input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: #ffffff; color: var(--text); }

/* ══════════════════════════════════════════════════════════════════════════
   DOCUMENTI — il testo dell'analisi e l'estratto del file.

   L'analisi è un documento da leggere, non una tabella da scorrere: misura di riga
   contenuta (~72 caratteri), interlinea larga, titoli che si distinguono dal corpo.
   Senza questi vincoli il testo occupava tutta la larghezza dello schermo e leggerlo
   richiedeva di rincorrere le righe da un bordo all'altro.
   ══════════════════════════════════════════════════════════════════════════ */
.eqm-doc-analisi { font-size: .88rem; line-height: 1.62; color: var(--text); max-width: 74ch; }

/* LA LETTURA A DUE COLONNE: il testo dell'analisi e il piano in chiaro, affiancati.
   La misura di riga del testo resta quella (74ch): quello che cambia è che lo spazio a destra
   non è più vuoto — lo occupa la cosa che va confrontata col testo. Sotto i 1180px si torna a
   una colonna, nell'ordine di lettura (prima il testo, poi il piano). */
/* Senza niente da affiancare la riga si allunga un po': 74ch con mezza card vuota accanto
   sembrano un errore, 92ch riempiono senza rendere la lettura faticosa. */
.eqm-doc-analisi-larga { max-width: 92ch; }
.eqm-doc-lettura { display: block; }
.eqm-doc-lettura > .eqm-doc-colonna { min-width: 0; }
.eqm-doc-lettura > .eqm-piano-affianco { margin-top: .9rem; }
@media (min-width: 1180px) {
  .eqm-doc-lettura { display: grid; grid-template-columns: minmax(0, 74ch) minmax(300px, 1fr); gap: 1.4rem; align-items: start; }
  /* Affiancato, il piano non ha bisogno del margine che lo staccava dal testo sopra; e resta
     visibile mentre si scorre un'analisi lunga, che è il momento in cui serve confrontarlo. */
  .eqm-doc-lettura > .eqm-piano-affianco { margin-top: 0; position: sticky; top: .5rem; max-height: calc(100vh - 6rem); overflow: auto; }
}
.eqm-doc-analisi .eqm-md-h { margin: 1.1rem 0 .4rem; font-size: .95rem; font-weight: 700; color: var(--eqm-primary-dark); letter-spacing: -.01em; }
.eqm-doc-analisi .eqm-md-h:first-child { margin-top: 0; }
.eqm-doc-analisi .eqm-md-p { margin: 0 0 .6rem; }
.eqm-doc-analisi .eqm-md-ul, .eqm-doc-analisi .eqm-md-ol { margin: 0 0 .7rem; padding-left: 1.15rem; }
.eqm-doc-analisi .eqm-md-ul li, .eqm-doc-analisi .eqm-md-ol li { margin-bottom: .25rem; }
.eqm-doc-analisi .eqm-md-hr { border: 0; border-top: 1px solid var(--border); margin: .9rem 0; }
.eqm-doc-analisi code { background: #f1f5f9; border-radius: 4px; padding: .05rem .3rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82em; }
/* Le tabelle dell'analisi possono essere più larghe della colonna di testo: scorrono per
   conto proprio invece di allargare la pagina. */
.eqm-doc-analisi .eqm-table-wrap { max-width: 100%; overflow-x: auto; }
.eqm-doc-analisi .eqm-table { font-size: .82rem; }

/* ══════════════════════════════════════════════════════════════════════════
   IL PIANO IN CHIARO

   Le istruzioni che il sistema eseguirà, tradotte dal server riga per riga. Stanno accanto
   al testo dell'analisi ma NON devono somigliargli: il testo lo scrive chi legge il
   documento, queste righe le ricava il sistema dal piano. Il bordo a sinistra e il fondo
   diverso dicono che si tratta di un'altra voce — quella che risponde delle scritture.
   ══════════════════════════════════════════════════════════════════════════ */
.eqm-piano-box { margin: .9rem 0 0; padding: .75rem .9rem; background: #f8fafc; border: 1px solid var(--border); border-left: 3px solid var(--eqm-primary); border-radius: 8px; }
.eqm-piano-head { display: flex; align-items: center; gap: .4rem; font-size: .86rem; color: var(--eqm-primary-dark); margin-bottom: .5rem; }
.eqm-piano-head svg { width: 15px; height: 15px; flex: none; }
.eqm-piano { margin: 0; padding-left: 1.3rem; font-size: .86rem; line-height: 1.55; color: var(--text); }
.eqm-piano > li { margin-bottom: .5rem; }
.eqm-piano > li:last-child { margin-bottom: 0; }
.eqm-piano-t { font-weight: 600; }
.eqm-piano-det { margin: .2rem 0 0; padding-left: 1rem; list-style: none; }
.eqm-piano-det li { position: relative; font-weight: 400; color: #475569; font-size: .84rem; padding-left: .1rem; }
.eqm-piano-det li::before { content: '·'; position: absolute; left: -.6rem; color: var(--eqm-primary); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════════
   LE TABELLE DELLA SEZIONE DOCUMENTI: SI VEDE TUTTO, E SE PROPRIO SERVE SI SCORRE

   Le celle della tabella standard arrivano a 380px l'una tenendo il testo su una riga sola. Con
   otto colonne — due delle quali con testo lungo (il titolo più il nome del file, il riassunto
   dell'analisi) — la tabella diventava più larga del contenitore, che la faceva scorrere di
   lato: l'ultima colonna si leggeva solo trascinando, quindi non si leggeva.

   NON si rimedia con larghezze fisse: `table-layout: fixed` faceva combaciare la tabella con il suo
   contenitore, quindi la barra di scorrimento spariva mentre il contenuto veniva tagliato DENTRO
   la cella — i pulsanti di riga mozzati a metà, e nessun modo di raggiungerli. Peggio di prima.

   Il rimedio è togliere la CAUSA della larghezza eccessiva, non imporre una misura: i testi
   lunghi (titolo del documento, riassunto dell'analisi, messaggi d'errore) vanno a capo entro un
   tetto invece di pretendere una riga sola da 380px. Le altre colonne si prendono quello che
   serve, i pulsanti compresi. Se anche così non basta — schermi stretti — il contenitore torna a
   scorrere: meglio scorrere che tagliare.
   ══════════════════════════════════════════════════════════════════════════ */
.eqm-table tbody td.eqm-col-lungo, .eqm-table tbody td.eqm-col-doc, .eqm-table tbody td.eqm-col-esito {
  white-space: normal; max-width: 340px;
}
.eqm-table tbody td.eqm-col-doc { max-width: 300px; }
/* Le sottodescrizioni dentro una colonna che va a capo devono andare a capo anche loro,
   altrimenti restano una riga sola con i puntini dentro una cella larga il doppio. */
.eqm-col-lungo .eqm-cellsub, .eqm-col-doc .eqm-cellsub, .eqm-col-esito .eqm-cellsub { white-space: normal; }
/* Il percorso della cartella va a capo dove serve e NON dentro un badge: i badge sono `nowrap`,
   e un percorso di tre livelli in un nowrap allarga la cella oltre il suo tetto — con la cella,
   la tabella (104px fuori posto, con un filtro attivo). Qui il percorso è testo, si spezza, e
   l'icona lo distingue dal nome del file sulla riga sotto. */
.eqm-cell-percorso { display: flex; align-items: flex-start; gap: .25rem; color: var(--eqm-primary); font-weight: 600; overflow-wrap: anywhere; }
.eqm-cell-percorso svg { width: 12px; height: 12px; flex: none; margin-top: .12rem; }
/* La colonna delle azioni non si tocca MAI con overflow o larghezze: contiene pulsanti, e un
   pulsante tagliato non è un dettaglio perso, è un'azione irraggiungibile. */
.eqm-table tbody td.eqm-col-actions { max-width: none; overflow: visible; }
/* Titolo e riassunto: due righe piene, poi i puntini. Una riga sola tagliava a metà titoli
   che si distinguono soltanto per la fine («…Accordo di Investimento SFP» vs «…Patto
   Parasociale»), che è il momento in cui l'elenco smette di servire. */
.eqm-cell-2righe { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.eqm-tab-documenti .eqm-cellsub { white-space: normal; }
/* LA COLONNA «COLLEGATO A» NON C'E' PIU', e non è una rinuncia mascherata da soglia: con
   l'albero delle cartelle la tabella non vive nella larghezza della pagina ma in quella che
   resta, e sette colonne là dentro sforavano sempre — 95px senza filtri, 225px con un filtro
   attivo. Nascondere la colonna «sotto una certa larghezza» spostava soltanto il punto in cui il
   difetto ricompare. L'operazione collegata è passata sotto il titolo, insieme alla cartella e al
   nome del file: si legge come prima, e la tabella sta nel suo posto a ogni larghezza. */
/* E dentro l'archivio i testi lunghi si accontentano di meno: il tetto vale sulla larghezza
   disponibile, non su quella della pagina intera. */
.eqm-arch-main .eqm-table tbody td.eqm-col-doc { max-width: 230px; }
.eqm-arch-main .eqm-table tbody td.eqm-col-esito { max-width: 250px; }

/* ══════════════════════════════════════════════════════════════════════════
   L'ARCHIVIO A CARTELLE: PERCORSO E LIVELLO CORRENTE

   Stesso vestito di Docs Sharing — briciole cliccabili in alto, cartelle come schede prima
   dei documenti — perché è la forma che l'utente ha già imparato là: un archivio di atti non
   è il posto dove sperimentare una navigazione nuova.

   Le briciole sono PULSANTI e non link: cambiano lo stato della pagina, non l'indirizzo di
   una risorsa esterna (e restano raggiungibili col tabulatore, §1.5).
   ══════════════════════════════════════════════════════════════════════════ */
.eqm-crumbs { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.eqm-crumb { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid transparent; background: #f1f5f9;
  color: #334155; border-radius: 7px; padding: .3rem .6rem; font-size: .8rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.eqm-crumb:hover { background: #e2e8f0; }
.eqm-crumb:focus-visible { outline: 2px solid var(--eqm-primary); outline-offset: 1px; }
.eqm-crumb svg { color: var(--eqm-primary); flex: none; }
/* La cartella in cui si è: non è un pulsante da premere di nuovo, ed è l'unica che non si
   confonde con le altre. */
.eqm-crumb-qui { background: var(--eqm-primary-light); border-color: #bfdbfe; color: #1e3a8a; }
.eqm-crumb-sep { color: var(--eqm-muted); font-size: .8rem; }

/* ── L'archivio in due colonne: albero a sinistra, contenuto a destra ──
   Stessa impaginazione della libreria di Docs Sharing (.df-library-layout): 240px di albero e
   il resto al contenuto. Con l'albero sempre visibile si salta da un ramo all'altro con un
   clic, invece di risalire di cartella in cartella. */
.eqm-arch { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.eqm-arch-main { min-width: 0; }
.eqm-tree { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: .6rem 0; position: sticky; top: .5rem; max-height: calc(100vh - 120px); overflow-y: auto; }
.eqm-tree-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .2rem .7rem .5rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--eqm-muted); }
.eqm-tree-add { border: 1px solid var(--border); background: #f8fafc; color: var(--eqm-primary); width: 20px; height: 20px;
  border-radius: 5px; font-size: .9rem; line-height: 1; cursor: pointer; padding: 0; font-family: inherit; }
.eqm-tree-add:hover { background: var(--eqm-primary-light); }
.eqm-tree-item { display: flex; align-items: center; gap: .45rem; padding: .32rem .55rem; cursor: pointer; font-size: .82rem; color: #334155; border-left: 3px solid transparent; }
.eqm-tree-item:hover { background: #f8fafc; }
.eqm-tree-item:focus-visible { outline: 2px solid var(--eqm-primary); outline-offset: -2px; }
.eqm-tree-item.attiva { background: var(--eqm-primary-light); border-left-color: var(--eqm-primary); color: #1e3a8a; font-weight: 700; }
.eqm-tree-ico { flex: none; display: inline-flex; color: var(--eqm-muted); }
.eqm-tree-item.attiva .eqm-tree-ico { color: var(--eqm-primary); }
.eqm-tree-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eqm-tree-conto { flex: none; font-size: .7rem; color: var(--eqm-muted); font-variant-numeric: tabular-nums; }
.eqm-tree-vuoto { padding: .4rem .7rem; font-size: .74rem; color: var(--eqm-muted); }
/* Sotto i 1000px l'albero si chiude: 240px su uno schermo stretto sono un quarto della pagina
   tolti alla tabella. A quel punto le schede delle sottocartelle diventano l'unico modo per
   scendere, quindi compaiono. */
@media (max-width: 1000px) {
  .eqm-arch { grid-template-columns: minmax(0, 1fr); }
  .eqm-tree { display: none; }
}
@media (min-width: 1001px) { .eqm-folders-stretto { display: none; } }

/* ── La barra della selezione e la colonna delle caselle ──
   La barra compare solo quando c'è una selezione: una barra sempre presente con «0 selezionati»
   è spazio tolto all'elenco per non dire niente. Resta appiccicata in alto mentre si scorre,
   perché la selezione si fa scorrendo e il pulsante deve restare a portata. */
.eqm-selbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; position: sticky; top: 0; z-index: 3;
  background: var(--eqm-primary-light); border: 1px solid #bfdbfe; border-radius: 10px;
  padding: .5rem .8rem; margin: 0 0 .7rem; font-size: .82rem; color: #1e3a8a; }
.eqm-selbar[hidden] { display: none; }
.eqm-col-sel { width: 34px; padding-right: 0 !important; }
.eqm-col-sel input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--eqm-primary); }
/* La riga di una cartella si distingue da quella di un documento senza leggerla: fondo appena
   diverso e il nome accanto all'icona della cartella. */
.eqm-row-cartella { background: #fcfdff; }
.eqm-riga-cart { display: inline-flex; align-items: center; gap: .4rem; }
.eqm-riga-cart svg { color: var(--eqm-primary); flex: none; }

/* ── Area di trascinamento del caricamento, come nella Data Room ──
   Trascinare una cartella è il gesto per cui si carica un archivio intero: deve esserci un posto
   dove trascinarla, visibile prima di aprire il selettore dei file. */
.eqm-dropzone { border: 2px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; padding: 1.1rem; text-align: center; margin: 0 0 .5rem; transition: border-color .12s, background .12s; }
.eqm-dropzone.sopra { border-color: var(--eqm-primary); background: var(--eqm-primary-light); }
.eqm-dz-ico { display: inline-flex; color: var(--eqm-primary); }
.eqm-dz-ico svg { width: 30px; height: 30px; }
.eqm-dz-titolo { margin: .3rem 0 0; font-size: .86rem; font-weight: 700; color: var(--text); }
.eqm-dz-sub { margin: .1rem 0 .45rem; font-size: .74rem; color: var(--eqm-muted); }
.eqm-dz-azioni { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }

/* Cosa verrà caricato e dove finirà, raggruppato per cartella da ricreare: è l'ultimo momento
   in cui si può accorgersi di aver preso la cartella sbagliata. */
.eqm-up-scelta { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .7rem; margin: 0 0 .7rem; background: #fff; max-height: 220px; overflow-y: auto; }
.eqm-up-scelta-testa { display: flex; align-items: center; gap: .5rem; font-size: .8rem; margin-bottom: .4rem; }
.eqm-up-scelta-testa button { margin-left: auto; }
.eqm-up-gruppo { border-top: 1px solid #f0f2f5; padding: .4rem 0 .1rem; }
.eqm-up-gruppo-nome { display: flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 700; color: var(--eqm-primary); margin-bottom: .25rem; }
.eqm-up-gruppo-nome svg { width: 13px; height: 13px; }
.eqm-up-gruppo-file { display: flex; flex-wrap: wrap; gap: .25rem; }
.eqm-up-chip { font-size: .7rem; background: #f1f5f9; color: #475569; border-radius: 5px; padding: .1rem .35rem; max-width: 100%; overflow-wrap: anywhere; }
.eqm-up-chip.troppo { background: #fef2f2; color: #991b1b; }

/* Avanzamento: un caricamento di trenta atti senza barra sembra bloccato, e chi crede che sia
   bloccato ricarica la pagina a metà. */
.eqm-up-avanz { margin: 0 0 .7rem; }
.eqm-up-avanz-testa { display: flex; justify-content: space-between; font-size: .76rem; color: var(--eqm-muted); margin-bottom: .25rem; }
.eqm-up-track { height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden; }
.eqm-up-bar { height: 100%; background: var(--eqm-primary); border-radius: 3px; transition: width .2s; }
.eqm-up-file { font-size: .7rem; color: var(--eqm-muted); margin-top: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.eqm-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .6rem; margin: 0 0 1rem; }
/* NOME E CONTEGGIO IN COLONNA, davvero: prima erano in RIGA insieme all'icona, e siccome il
   conteggio è `nowrap` e non si comprime — «1 documento · 6 cartelle» — si prendeva quasi tutta
   la scheda schiacciando il nome a una quarantina di pixel. Con quello spazio il nome si
   spezzava DENTRO le parole, una o due lettere per riga: «Doc da caric are equit y man ager».
   La griglia mette l'icona a sinistra su due righe, e nella seconda colonna nome sopra e
   conteggio sotto: nessuno dei due può più togliere spazio all'altro. */
.eqm-folder { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .55rem; align-items: center;
  text-align: left; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: .7rem .85rem; cursor: pointer; font-family: inherit; min-width: 0; }
.eqm-folder:hover { border-color: #bfdbfe; background: var(--eqm-primary-light); }
.eqm-folder:focus-visible { outline: 2px solid var(--eqm-primary); outline-offset: 1px; }
.eqm-folder-ico { grid-row: 1 / span 2; display: inline-flex; color: var(--eqm-primary); }
.eqm-folder-ico svg { width: 20px; height: 20px; }
/* `break-word` e non `anywhere`: si va a capo FRA le parole, e si spezza dentro una parola solo
   se quella parola da sola non ci sta. Il nome di una cartella resta leggibile. */
.eqm-folder-nome { grid-column: 2; font-size: .86rem; font-weight: 700; color: var(--text); min-width: 0; overflow-wrap: break-word; }
.eqm-folder-conto { grid-column: 2; font-size: .72rem; color: var(--eqm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Estratto del testo del file e token di servizio: monospazio, a capo conservati, non
   selezionabili a fatica. */
.eqm-doc-testo { background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: .7rem .8rem; margin: .5rem 0 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .76rem; line-height: 1.5; color: #334155; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }

/* La card KPI cliccabile (filtra l'elenco) deve dichiararsi tale al passaggio del mouse:
   un numero che cambia la pagina senza alcun segno è una trappola. */
.eqm-kpi.eqm-row-clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.eqm-kpi.eqm-row-clickable:hover { border-color: var(--eqm-primary); box-shadow: 0 2px 8px rgba(30, 58, 138, .1); }

/* ══════════════════════════════════════════════════════════════════════════
   DIRITTI, IMPEGNI E SCADENZE — la tabella si scorre, il dettaglio si legge

   Un atto societario e' fatto di prose lunghe: la formula di un prezzo, i termini di una
   procedura, la conseguenza di un inadempimento. Finivano in colonna, e la misura del difetto
   era questa: righe alte 629px, colonne da 140px con dentro 490 caratteri. Una tabella in cui
   ogni riga e' un paragrafo non si scorre con l'occhio — e scorrere e' l'unica cosa per cui
   esiste una tabella.

   La divisione e' di modello, non di stile: in tabella cio' su cui si SCORRE (un titolo, un
   tipo, un numero, una data, il rinvio all'atto), nel dettaglio cio' che si LEGGE. Qui sotto
   c'e' solo quello che serve a farla rispettare anche quando qualcuno aggiungera' una colonna.
   ══════════════════════════════════════════════════════════════════════════ */

/* Larghezze DICHIARATE, non contrattate: senza `fixed` il browser allarga la colonna che ha piu'
   testo, ed e' esattamente la colonna che il testo non dovrebbe averlo. Con `fixed` vince il
   <col>, e una prosa dimenticata in cella si taglia invece di deformare la tabella. */
.eqm-table.eqm-tab-diritti { table-layout: fixed; width: 100%; }
.eqm-table.eqm-tab-diritti tbody td { max-width: none; vertical-align: top; }
/* La colonna delle azioni resta intoccabile anche qui: un pulsante tagliato non e' un dettaglio
   perso, e' un'azione irraggiungibile. */
.eqm-table.eqm-tab-diritti tbody td.eqm-col-actions { vertical-align: middle; }

/* Il taglio a righe piene. Una riga sola tronca a meta' titoli che si distinguono per la fine
   («Trascinamento — Primo Periodo» / «— Secondo Periodo»), che e' il momento in cui l'elenco
   smette di servire; due righe li separano. Il testo intero resta nel `title` e nel dettaglio,
   quindi il taglio non nasconde niente: sposta soltanto dove si legge. */
.eqm-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; white-space: normal;
  overflow-wrap: anywhere; }
.eqm-clamp-1 { -webkit-line-clamp: 1; }
.eqm-clamp-2 { -webkit-line-clamp: 2; }
.eqm-clamp-3 { -webkit-line-clamp: 3; }

/* Una riga che si apre deve sembrare apribile: il puntatore lo dice, lo sfondo lo conferma, e
   l'anello di focus lo rende raggiungibile da tastiera — la riga e' `tabindex=0`, quindi chi
   naviga senza mouse ci arriva e la apre con Invio. */
.eqm-table.eqm-tab-diritti tbody tr.eqm-row-clickable { cursor: pointer; }
.eqm-table.eqm-tab-diritti tbody tr.eqm-row-clickable:hover { background: var(--eqm-primary-light, #f0f6ff); }
.eqm-table.eqm-tab-diritti tbody tr.eqm-row-clickable:focus-visible { outline: 2px solid var(--eqm-primary, #1d4ed8);
  outline-offset: -2px; background: var(--eqm-primary-light, #f0f6ff); }

/* ── Il dettaglio: qui la prosa ha la larghezza per essere letta ── */
.eqm-det-fonte { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem;
  padding-bottom: .75rem; border-bottom: 1px solid var(--border, #e2e8f0); }
.eqm-det-fonte-nota { font-size: .72rem; color: var(--eqm-muted, #64748b); flex: 1; min-width: 200px; }
/* Le misure in cima: sono cio' che si CONTROLLA, e si controlla a colpo d'occhio. */
.eqm-det-misure { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem .9rem;
  background: #f8fafc; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; padding: .7rem .9rem; margin-bottom: 1rem; }
.eqm-det-misure > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.eqm-det-misura-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--eqm-muted, #64748b); }
.eqm-det-misura-v { font-size: .85rem; font-weight: 700; color: var(--text, #0f172a); overflow-wrap: anywhere; }
.eqm-det-blocco { margin-bottom: 1rem; }
.eqm-det-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700;
  color: var(--eqm-muted, #64748b); margin-bottom: .25rem; }
/* Misura di riga leggibile: una prosa di cinquecento caratteri a tutta larghezza si legge peggio
   di una tagliata in colonna — il limite serve tanto quanto serviva il taglio. */
.eqm-det-testo { font-size: .875rem; line-height: 1.55; color: var(--text, #0f172a); max-width: 72ch;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.eqm-det-testo.forte { font-weight: 600; }
.eqm-det-nota { font-size: .72rem; color: var(--eqm-muted, #64748b); margin-top: .3rem; font-style: normal; }
.eqm-det-vuoto { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
  padding: 1.25rem; text-align: center; font-size: .85rem; color: var(--eqm-muted, #64748b); }

/* LO SCORRIMENTO ORIZZONTALE E' SEMPRE DISPONIBILE, non solo sotto una soglia.
   Le larghezze in percentuale distribuiscono lo spazio che c'e', ma se lo spazio non basta
   qualcosa viene tagliato — e l'ultima colonna e' quella delle AZIONI: un pulsante tagliato non
   e' un dettaglio perso, e' un'azione irraggiungibile. Con una larghezza minima dichiarata la
   tabella smette di comprimersi e il contenitore scorre: si vede tutto, sempre, a ogni
   larghezza di finestra. Meglio scorrere che tagliare, e meglio sempre che «da una certa
   misura in giu'». */
/* Il contenitore ha gia' `overflow-x: auto` (riga 108): qui serve solo che la tabella smetta
   di comprimersi, e lo scorrimento arriva da se'. */
.eqm-table.eqm-tab-diritti { min-width: 860px; }
/* Il pulsante non si comprime mai sotto la sua misura, qualunque cosa faccia la tabella. */
.eqm-table.eqm-tab-diritti tbody td.eqm-col-actions,
.eqm-table.eqm-tab-diritti thead th.eqm-col-actions { white-space: nowrap; width: 1%; }
.eqm-table.eqm-tab-diritti .eqm-row-actions { flex-wrap: nowrap; }
@media (max-width: 900px) {
  .eqm-table.eqm-tab-diritti { table-layout: auto; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   LE COLONNE ELASTICHE SI STRINGONO, NON SFONDANO — a 1366x768, cioe' sul
   portatile che la gente usa davvero, quattro tabelle uscivano dal loro
   contenitore: fino a 257px sulla scheda dell'uscita. La colpa non era del
   numero di colonne ma di una o due colonne di TESTO senza tetto, che si
   allargavano a spese di tutte le altre: «Soggetti» a 365px, «Categoria» a 286.
   Qui prendono un tetto e l'ellissi. Il testo intero non si perde: sta nel
   `title` della cella, che il gate della prova pretende.
   Le colonne numeriche non si toccano: un importo troncato e' un importo falso.
   ───────────────────────────────────────────────────────────────────────────── */
/* PERCHE' SERVE `table-layout: fixed` E NON BASTA `max-width`.
   Con il layout automatico — quello di default — il browser IGNORA `max-width` sulle celle: la
   larghezza la decide il contenuto, e una colonna di testo lungo si prende quello che le serve a
   spese delle altre. E' la ragione per cui il primo tentativo non sposto' un pixel. Il tetto vale
   solo dichiarando il layout fisso sulla tabella, e allora le colonne si spartiscono lo spazio
   disponibile e il testo in eccesso si tronca con l'ellissi. */
/* Il layout fisso vale SOLO dove c'e' spazio da spartire. Su schermo stretto spartire dodici
   colonne in 375px le riduce a trenta pixel l'una e taglia i pulsanti dentro le celle — un
   comando irraggiungibile, che e' peggio del problema che si voleva risolvere. Sotto questa
   soglia si torna al comportamento giusto per un telefono: la tabella tiene le sue larghezze e
   il contenitore si scorre di lato. */
@media (min-width: 1100px) {
  .eqm-table.eqm-tab-larga { table-layout: fixed; width: 100%; min-width: 0; }
  /* SI VA A CAPO, NON SI TRONCA. Col layout fisso le colonne hanno gia' una larghezza propria:
     troncare in piu' non serve a far stare la tabella dentro, serve solo a nascondere. E nascondeva
     cose che contano — la riga di spiegazione sotto il nome di un'operazione, quella che dice
     perche' un socio si muove senza partecipare. Andando a capo la tabella resta nei suoi limiti e
     non si perde niente. Gli importi restano su una riga: un numero spezzato non si legge. */
  .eqm-table.eqm-tab-larga td, .eqm-table.eqm-tab-larga th { white-space: normal; overflow-wrap: anywhere; }
  .eqm-table.eqm-tab-larga td.num, .eqm-table.eqm-tab-larga th.num { white-space: nowrap; }
}
/* LA COLONNA DELLE AZIONI NON SI COMPRIME MAI. Col layout fisso le colonne si spartiscono lo
   spazio in proporzione, e su schermo stretto quella dei pulsanti veniva schiacciata fino a
   tagliarli: un comando tagliato non e' un dettaglio perduto, e' un comando irraggiungibile, e
   nessuno scorrimento lo riporta dentro. Larghezza sul contenuto e mai a capo. */
/* CON IL LAYOUT FISSO LA LARGHEZZA VA IN PIXEL, NON IN PERCENTO. `width: 1%` funziona col layout
   automatico, dove il browser allarga la colonna fino al contenuto; col layout fisso l'1% e' un
   ordine letterale — la colonna diventa larga dieci pixel e il pulsante «Apri» ne perde
   quarantanove. Serve la misura vera del comando. */
/* LE ANNOTAZIONI VANNO A CAPO A OGNI LARGHEZZA. Sono frasi, non etichette: con `nowrap` una frase
   lunga si perde dopo i puntini — «Cessione del 2% da Danese Lorenzo · Vertis Venture 6 Digital…»
   e non si sa quale delle due Vertis sia. Stava dentro la media query dei 1100px, quindi a 900
   tornava a vincere la regola generale `nowrap` e il difetto ricompariva proprio sulla larghezza
   piu' stretta, dove il testo ha meno spazio e la troncatura taglia di piu'. Andare a capo non ha
   niente a che vedere col modo in cui la tabella calcola le colonne. */
.eqm-table.eqm-tab-larga td .eqm-cellsub,
.eqm-table.eqm-tab-larga td .eqm-cellnote { white-space: normal; overflow: visible; text-overflow: clip; }

.eqm-table.eqm-tab-larga td.eqm-col-actions,
.eqm-table.eqm-tab-larga th.eqm-col-actions { width: 104px; white-space: nowrap; overflow: visible; }
.eqm-cella-elastica {
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eqm-cella-elastica .eqm-cellsub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tre colonne per tre bandierine — prelazione, trascinamento, co-vendita — pesavano 330px in
   tre. Restano tre colonne, perche' sono tre diritti distinti, ma larghe quanto il loro
   contenuto. */
.eqm-table.eqm-tab-diritti th.eqm-col-flag,
.eqm-table.eqm-tab-diritti td.eqm-col-flag { width: 1%; white-space: nowrap; text-align: center; }


/* UN PULSANTE DENTRO UNA CELLA NON SI TAGLIA MAI.
   Un testo troncato si recupera dal tooltip; un comando tagliato no — o c'e' o non si puo'
   premere, e nessuno scorrimento lo riporta dentro. Dove il pulsante convive con un nome lungo
   nella stessa cella (il socio di uno scenario, col suo badge «veicolo · N aderenti»), la cella
   va a capo invece di tagliare: una riga piu' alta e' un prezzo accettabile, un comando
   irraggiungibile no. */
.eqm-table td:has(button), .eqm-table td:has(a.eqm-btn) { white-space: normal; text-overflow: clip; }


/* ─────────────────────────────────────────────────────────────────────────────
   DIRITTI, IMPEGNI, SCADENZE: MEGLIO SCORRERE CHE TAGLIARE

   Decisione dell'utente, 24 agosto. Il ridisegno aveva scelto la strada opposta —
   `table-layout: fixed; width: 100%`, cioe' la tabella non supera mai il contenitore e il
   testo in eccesso finisce nei puntini. Il difetto di quella scelta e' che i puntini non si
   possono aprire: il contenitore ha `overflow-x: auto` ma non c'e' niente da scorrere, perche'
   la tabella e' larga esattamente quanto lui. Il testo tagliato resta irraggiungibile, e con
   esso i pulsanti quando la riga ne ha.

   Qui la tabella riprende la sua larghezza naturale, con un minimo che garantisce alle colonne
   lo spazio per il testo intero, e il contenitore scorre davvero. Un po' di scorrimento
   orizzontale in cambio di non perdere niente.
   ───────────────────────────────────────────────────────────────────────────── */
#tab-equity-diritti .eqm-table,
#tab-equity-impegni .eqm-table,
#tab-equity-scadenze .eqm-table { table-layout: auto; width: auto; min-width: 100%; }

/* Il testo non si tronca piu': va a capo. Cosi' la larghezza serve a LEGGERE, non a nascondere. */
#tab-equity-diritti .eqm-table td, #tab-equity-diritti .eqm-table th,
#tab-equity-impegni .eqm-table td, #tab-equity-impegni .eqm-table th,
#tab-equity-scadenze .eqm-table td, #tab-equity-scadenze .eqm-table th {
  overflow: visible; text-overflow: clip;
}
/* Una colonna di prosa ha un tetto perche' non diventi una riga infinita, ma va a capo dentro
   quel tetto invece di finire nei puntini. */
#tab-equity-diritti .eqm-col-lungo, #tab-equity-impegni .eqm-col-lungo, #tab-equity-scadenze .eqm-col-lungo,
#tab-equity-diritti .eqm-col-esito, #tab-equity-impegni .eqm-col-esito, #tab-equity-scadenze .eqm-col-esito {
  white-space: normal; max-width: 420px; min-width: 220px;
}

/* CHE SI PUO' SCORRERE DEVE VEDERSI, e si deve poter fare senza mouse.
   L'ombra a destra compare solo quando c'e' davvero qualcosa oltre il bordo (`animation-timeline`
   non serve: basta il gradiente ancorato allo sfondo che scorre con il contenuto). Il contenitore
   prende il fuoco col tabulatore, quindi le frecce lo scorrono: un'area che scorre e non e'
   raggiungibile da tastiera e' contenuto inaccessibile. */
.eqm-scorre {
  background-image:
    linear-gradient(to right, #ffffff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .14), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .14), rgba(0, 0, 0, 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.eqm-scorre:focus-visible { outline: 2px solid var(--eqm-primary, #1d4ed8); outline-offset: 2px; }