/* COPIA di ab-core/ab_design.html del 16/10/2026. Non modificare: si rigenera con strumenti/sincronizza-design.sh */
  :root {
    /* ====================================================================
    PALETTE E MISURE — 20/08/2026, seconda passata.
    La prima aveva solo cambiato i colori: grigio al posto del beige, e
    basta. Giusta l'osservazione che non migliorava niente — un sistema
    non si aggiusta ritingendolo.
    Questa passata prende il modo di fare di Apple e lo applica DAVVERO:
    fondo grigio e schede bianche che ci galleggiano sopra; un solo blu
    per le azioni; i campi come vaschette riempite invece che caselle
    bordate; angoli larghi; separatori sottili al posto delle cornici;
    ombre appena percettibili al posto dei bordi neri.
    Le misure tornano a respirare (base 4, non 3): la densita' serve a
    vedere piu' righe, non a incollarle.
    ==================================================================== */

    /* Azione — un blu solo, ovunque. Niente nero: il nero e' il testo. */
    --brand: #0071E3;
    --brand-deep: #0058B9;
    --brand-tint: #E8F1FD;

    /* Superfici — il fondo e' grigio, le schede sono bianche e stanno sopra */
    --canvas: #F2F2F7;
    --surface: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-sunken: #EFEFF4;

    /* Inchiostro — quattro gradini, tutti AA sul bianco tranne il quarto,
    che serve solo a segnaposto e cose spente */
    --ink: #1C1C1E;
    --ink-2: #48484A;
    --ink-3: #6E6E73;
    --ink-4: #AEAEB2;

    /* Separatori, non cornici */
    --line: #E5E5EA;
    --line-strong: #D1D1D6;

    /* I DUE NEGOZI — un colore ciascuno, uguale in TUTTO il software.
    Blu e cuoio: non si confondono fra loro ne' con i tre stati. Serve a
    una cosa sola: non registrare un incasso nel negozio sbagliato. */
    --sv: #0071E3; --sv-tint: #E8F1FD;
    --mg: #B25000; --mg-tint: #FDF0E6;
    --gl: #00737A; --gl-tint: #E3F2F2;
    /* Il GRUPPO e' la somma dei due: neutro. */
    --gr: #9C7A00; --gr-tint: #FBF3DC;

    /* 30/09/2026 - IL COLORE DI CIO' CHE E' STIMATO.
    Angelo, sulla sezione Previsionale: "diamo un colore a Totale,
    Previsionale, Reale". E' un asse che la palette non aveva: finora il
    colore diceva DI CHI e' il numero (le tre entita') o COM'E' ANDATA (i tre
    stati), mai DI CHE NATURA e'. Qui serve, perche' nella stessa griglia
    convivono numeri misurati e numeri stimati e confonderli e' esattamente
    l'errore da evitare.
    Il viola e' scelto per non collidere con niente: non e' il blu di San
    Vitaliano, non e' il cuoio di Marigliano, non e' l'oro del Gruppo, non e'
    nessuno dei tre stati. Vive SOLO nella sezione Previsionale. */
    --stima: #5B4B8A;

    /* Semantica — tre stati, tre tinte, mai usate per altro */
    --ok: #1B7F3B; --ok-bg: #E7F6EC; --ok-line: #BDE5CB;
    --warn: #8A5A00; --warn-bg: #FDF3E2; --warn-line: #EBD6AC;
    --ko: #C7261C; --ko-bg: #FDECEB; --ko-line: #F3C7C4;

    /* Tipografia — 6 gradini. Piu' grandi di stamattina: 13,5px di base su un
    monitor da banco si legge male, e i numeri sono la cosa che si legge. */
    --fs-micro: 11px;
    --fs-sm: 12.5px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 21px;
    --fs-xl: 28px;

    /* Spazio — base 4 */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    /* 29/09/2026 - UNA LARGHEZZA SOLA PER OGNI RIQUADRO DEL SISTEMA.
    Angelo: "sia quelle negli indicatori che in testata devono essere larghe
    uguali, anche quelle nelle bande colorate, cosi' il sistema e' omogeneo
    alla visione".
    Prima le tre zone si dividevano lo spazio del loro contenitore (1fr), e
    tre contenitori diversi davano tre larghezze diverse: la stessa .ind-box
    misurava circa 143 px negli indicatori, circa 200 nella banda e quanto
    le toccava in testata. Adesso la larghezza e' un numero, uguale ovunque.
    COME E' STATO SCELTO 128, misurando il contenuto vero a corpo pieno:
    testata      VND  2.410,00                      77 px
    indicatori   INC  391.130,96 +124.8%           123 px
    banda        Ieri 26/09  3.190,00              104 px
    128 copre il piu' largo con margine e resta piu' stretto di prima. Se un
    giorno un importo lo sfonda si rimisura e si cambia QUESTO numero, non
    una regola in fondo al foglio. */
    --box-w: 136px;
    /* 29/09/2026 sera - LA LARGHEZZA UNICA CADE, E LA FA CADERE LA MISURA.
    Angelo: "le box in testata sono troppo larghe ed invadono tutto" e
    "negli indicatori lo spazio della box e' piccolo e deborda tutto a
    destra". Tutte e due vere, in due direzioni opposte, e per una ragione
    sola: le tre zone NON portano lo stesso contenuto.
    Rimisurato col contenuto vero a corpo pieno, riquadro a max-content:
    indicatori  POS  1.203.388,10 +124.8%      134 px   (c'e' la percentuale)
    indicatori  INC    391.130,96 +124.8%      123 px
    banda       Ieri 26/09  3.190,00           104 px   (etichetta lunga)
    testata     TOT     12.410,00               81 px   (sigla + importo)
    Il mio errore del pomeriggio: avevo misurato il TESTO (123 px) e messo
    128, dimenticando bordi, riempimento e i due spazi interni - 26 px che
    ci sono sempre. Da qui l'importo che sfondava a destra.
    La regola nuova, e questa regge: stessa larghezza dove il contenuto e'
    della stessa specie. Un riquadro con la percentuale non puo' essere
    largo quanto uno senza. */
    /* 29/09/2026 sera (quarto giro) - RIMISURATA COL CORPO NUOVO: 136.
    Il corpo dei riquadri e' passato da 9 a 10 px e il contenuto e' cresciuto
    con lui. Misurato a max-content sul contenuto VERO di oggi, non su uno
    inventato:
    riquadro piu' largo   "Vnd  EUR 391.130,96  +12,5%"   133 px
    136 gli lascia 3 px. Il conto della riga, che deve stare dentro i 1.114
    px interni della scheda:
    6 x 136 + 5 x 4 = 836   +   due spazi da 4   +   2 x 135 di etichetta
    e i 135 che restano a ogni lato coprono il riferimento piu' largo, che
    ne chiede 128. Gli spazi fra riquadri sono scesi da 8 a 4 proprio qui:
    col corpo nuovo, a 8, la riga sfondava di 9 px. Se un giorno il primo
    numero arriva a sette cifre si rimisura QUESTO numero, non si aggiunge
    una regola in fondo al foglio. */
    --pagina-w: 1140px;    /* .page e' max-width 1180 meno i due rientri da 20 */
    /* 29/09/2026 sera (terzo giro) - LE ETICHETTE NON HANNO PIU' UNA MISURA.
    Angelo: "le box nella box indicatori devono essere perfettamente
    centrate". Prima le due colonne erano 72 px a sinistra e 196 a destra:
    i sei riquadri cadevano 62 px piu' a sinistra del centro. Adesso i due
    lati sono 1fr e 1fr - larghi uguali per costruzione, qualunque cosa ci
    si scriva dentro - e i riquadri stanno al centro esatto senza che
    nessuno debba rimisurare niente quando un'etichetta cambia.
    Quello che avanza a ogni lato si calcola e vale:
    (1.114 - 6 x 136 - 7 x 4) / 2 = 135 px
    dove 1.114 e' l'interno della scheda (1.140 meno bordo e rientro) e 4
    e' lo spazio fra riquadri da 1201 px in su. Il riferimento piu' largo,
    "28/09 - 04/10 VS 29/09 - 05/10", ne misura 128 senza la spaziatura fra
    le lettere: ci sta con 7 px di margine. Con la spaziatura ne misurava
    145 e si troncava - per questo .ind-periodo non la usa. */
    --sp-5: 20px; --sp-6: 28px; --sp-7: 40px;

    /* 24/09/2026 - Altezza dei bottoni di chiusura Nuova commessa, condivisa
    con i quattro riquadri dei numeri accanto: "devono avere l'altezza del
    bottone di crea commessa" (Angelo). Una misura, due usi. */
    --h-azione: 46px;

    /* Raggi — larghi. Un angolo a 3px su una scheda grande sembra un errore. */
    --r-sm: 8px; --r-md: 12px; --r-full: 999px;
    --radius-sm: 8px; --radius-md: 12px;

    /* Profondita — quasi invisibile, ma c'e': e' quella che stacca la scheda
    bianca dal fondo grigio senza disegnare una cornice. */
    --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05);
    --shadow-lift: 0 4px 12px rgba(0,0,0,.08), 0 24px 48px rgba(0,0,0,.10);
    --ring: 0 0 0 4px rgba(0,113,227,.22);

    /* Retrocompatibilita token vecchi */
    --bg: var(--canvas);
    --text: var(--ink);
    --text-secondary: var(--ink-2);
    --border: var(--line);
    --border-strong: var(--line-strong);
    --brand-dark: var(--brand-deep);
  }
  body[data-negozio="sv"] .card > .card-header {
    border-left: 3px solid var(--sv);
  }
  body[data-negozio="mg"] .card > .card-header {
    border-left: 3px solid var(--mg);
  }
  body[data-negozio="gl"] .card > .card-header {
    border-left: 3px solid var(--gl);
  }
  .banda-negozio {
    position: relative; display: flex; align-items: center; justify-content: center;
    padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
    margin-bottom: var(--sp-4);
  }
  .banda-nome {
    font-size: 20px; font-weight: 600; white-space: nowrap; color: #fff;
    text-transform: uppercase; letter-spacing: .06em;
  }
  .neg-sv, .neg-mg, .neg-gl, .neg-gruppo {
    border: 1.5px solid var(--line-strong);
  }
  .neg-sv {
    border-color: var(--sv);
  }
  .neg-mg {
    border-color: var(--mg);
  }
  .neg-gruppo {
    border-color: var(--gr);
  }
  body .card > .card-header.card-header-gruppo {
    background: var(--gr-tint); color: var(--gr); text-align: center;
    border-left: none;
  }
  .card-body > * + * {
    margin-top: var(--sp-3);
  }
  .card > .total-row:last-child {
    border-radius: 0 0 var(--r-md) var(--r-md);
  }
  .card-body > .section-label:first-child {
    margin-top: 0;
  }
  .ind-riga {
    position: relative; display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--sp-3); row-gap: var(--sp-1);
  }
  .ind-linea {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2);
  }
  .ind-linea > .ind-eti-sx {
    order: 1;
  }
  .ind-linea > .ind-eti-dx {
    order: 2;
  }
  .ind-linea > .ind-riga {
    order: 3; flex: 1 0 100%;
  }
  .ind-linea > .ind-riga-eti {
    margin-top: 0;
  }
  .ind-box .ind-label, .ind-box .ind-valore {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ind-box .ind-delta {
    white-space: nowrap;
  }

  @media (min-width: 721px) {
    .ind-riga::after {
      content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
      width: 3px; margin-left: -2px; background: var(--ink-3); /* 04/09/2026 - piu' marcata: separa vendite da incassi */
    }
    .ind-riga {
      max-width: none; width: auto; margin-left: 0; margin-right: 0;
    }
  }

  @media (min-width: 1201px) {
    .ind-linea {
      display: grid;
      grid-template-columns: 1fr
      calc(6 * var(--box-w) + 6 * var(--sp-1) + var(--sp-5)) 1fr;
      column-gap: var(--sp-1); align-items: center;
      width: auto; margin-left: 0; margin-right: 0;
    }
    .ind-linea > .ind-eti-sx {
      grid-column: 1; order: 0; text-align: right;
    }
    .ind-linea > .ind-riga {
      grid-column: 2; order: 0;
    }
    .ind-linea > .ind-eti-dx {
      grid-column: 3; order: 0; text-align: left;
    }
    .ind-riga {
      grid-template-columns: repeat(3, var(--box-w)) var(--sp-5) repeat(3, var(--box-w));
      column-gap: var(--sp-1);
      width: max-content;
    }
    .ind-riga > .ind-box:nth-child(4) {
      grid-column: 5;
    }
  }
  .ind-box {
    background: var(--surface-raised); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-1);
    display: flex; align-items: baseline; gap: var(--sp-1); line-height: 1.2;
  }
  .ind-box .ind-label {
    flex: 0 0 auto;
    font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-3);
  }
  .ind-box .ind-valore {
    flex: 1 1 auto; text-align: right;
    font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  }
  .ind-box .ind-delta {
    flex: 0 0 auto; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--ink-3);
  }
  .ind-box .ind-delta.su {
    color: var(--ok);
  }
  .ind-box .ind-delta.giu {
    color: var(--ko);
  }
  .ind-box.gruppo {
    border-color: var(--gr); background: var(--surface);
  }
  .ind-box.neg-sv {
    border-color: var(--sv);
  }
  .ind-box.neg-mg {
    border-color: var(--mg);
  }
  .ind-box.neg-gl {
    border-color: var(--gl);
  }
  .ind-riga-eti {
    font-size: 9px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-3); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ind-riga-eti .ind-periodo {
    font-size: 9px; letter-spacing: normal;
  }
  .ind-riga-eti + .ind-riga {
    margin-top: var(--sp-2);
  }

  @media (max-width: 720px) {
    .card-header {
      padding-left: var(--sp-3); padding-right: var(--sp-3);
    }
    .ind-box {
      padding: var(--sp-1) var(--sp-2);
    }
    .ind-box .ind-valore {
      font-size: var(--fs-base);
    }
    .ind-box .ind-label, .ind-box .ind-delta, .ind-riga-eti,
  .ind-riga-eti .ind-periodo {
      font-size: var(--fs-micro);
    }
    :root {
      --fs-micro: 12px;
      --fs-sm: 13px;
      --fs-base: 15px;
    }
  }

  @media (max-width: 640px) {
    .card-body > * + * {
      margin-top: var(--sp-2);
    }
    .card-body {
      padding: var(--sp-3);
    }
  }
  .sotto-tabs {
    display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center;
    padding: var(--sp-3) var(--sp-4) 0 var(--sp-4);
  }
  .sotto-tab {
    border-radius: var(--r-sm); padding: 2px var(--sp-3);
    font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-3); cursor: pointer;
    background: var(--surface-raised); border: 1px solid var(--line);
    min-height: 26px; display: inline-flex; align-items: center;
  }
  .sotto-tab:hover {
    border-color: var(--line-strong); color: var(--ink);
  }
  .sotto-tab.active {
    background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand);
  }
  .card {
    background: var(--surface-raised); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow); overflow: hidden;
  }
  .card-header {
    background: transparent; border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: .04em;
    padding: var(--sp-3) var(--sp-4);
  }
  .card-body {
    padding: var(--sp-3) var(--sp-4);
  }
  .prev-entita {
    margin-top: var(--sp-3); margin-bottom: var(--sp-6);
  }
  .prev-matrice {
    font-variant-numeric: tabular-nums;
  }
  .prev-matrice th, .prev-matrice td {
    border: 1px solid var(--line); padding: var(--sp-1) var(--sp-2);
    font-size: 10px; line-height: 1.2; white-space: nowrap; text-align: right;
  }
  .prev-matrice thead th {
    position: static; text-align: right;
  }
  .prev-matrice th.prev-anno, .prev-matrice td.prev-anno {
    text-align: left; font-weight: 600; color: var(--ink);
  }
  .prev-blocco {
    margin-top: var(--sp-4);
  }
  .prev-entita .banda-negozio {
    position: relative;
  }
  .prev-apri {
    position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%);
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: #fff; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--r-sm);
    padding: 2px var(--sp-2); white-space: nowrap;
  }
  .prev-apri:hover {
    background: rgba(255, 255, 255, .18);
  }
  .prev-banda {
    padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm) var(--r-sm) 0 0;
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: #fff; background: var(--ink-2);
  }
  .prev-banda.prev-s {
    background: var(--stima);
  }
  .prev-banda.prev-t {
    background: var(--ink-2);
  }
  .prev-banda.prev-r[data-negozio="sv"] {
    background: var(--sv);
  }
  .prev-banda.prev-r[data-negozio="mg"] {
    background: var(--mg);
  }
  .prev-banda.prev-r[data-negozio="gl"] {
    background: var(--gl);
  }
  .prev-banda.prev-r[data-negozio="gruppo"] {
    background: var(--gr);
  }
  .prev-matrice td.prev-r {
    color: var(--ink);
  }
  .prev-matrice td.prev-s {
    color: var(--stima);
  }
  .prev-matrice td.prev-t {
    font-weight: 600;
  }
  .prev-matrice td.prev-tot {
    font-weight: 600; background: var(--surface-sunken);
  }
  .prev-matrice td.prev-alto {
    color: var(--ok); font-weight: 600;
  }
  .prev-matrice td.prev-basso {
    color: var(--ko); font-weight: 600;
  }
  .prev-matrice th.prev-anno {
    vertical-align: middle;
  }
  .prev-matrice tr.prev-corrente td.prev-anno,
  .prev-matrice tr.prev-corrente th.prev-anno {
    color: var(--brand-deep);
  }
  .prev-entita[data-negozio="sv"] .banda-negozio {
    background: var(--sv);
  }
  .prev-entita[data-negozio="mg"] .banda-negozio {
    background: var(--mg);
  }
  .prev-entita[data-negozio="gl"] .banda-negozio {
    background: var(--gl);
  }
  .prev-entita[data-negozio="gruppo"] .banda-negozio {
    background: var(--gr);
  }
  .prev-entita .banda-nome {
    font-size: var(--fs-md);
  }
  .prev-matrice td.sco-s, .ind-box .ind-valore.sco-s {
    color: var(--stima);
  }
  .prev-matrice td.prev-metodo, .prev-matrice th.prev-metodo {
    text-align: left;
  }
  .ind-riga.ind-riga-griglia::after {
    content: none;
  }

  @media (min-width: 721px) {
    .ind-riga.ind-riga-griglia {
      grid-template-columns: none; grid-auto-flow: column;
      grid-auto-columns: var(--box-w); width: max-content;
    }
    .ind-riga.ind-riga-griglia > .ind-box:nth-child(4) {
      grid-column: auto;
    }
  }

  @media (max-width: 720px) {
    .prev-matrice th.sco-opz, .prev-matrice td.sco-opz {
      display: none;
    }
    .prev-matrice th.sco-resa, .prev-matrice td.sco-resa {
      display: none;
    }
    .ind-riga.ind-riga-griglia {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--sp-3); row-gap: var(--sp-1); overflow: visible;
      width: auto; max-width: none;
      /* Il verso di riempimento va DETTATO. La riga degli indicatori sul
      telefono scende per colonne su righe esplicite (e' la forma della
      testata), e con due colonne i quattro riquadri uscivano incolonnati
      1 + 1 + 1 + 1 a sinistra con l'ultimo solo in alto a destra. */
      grid-auto-flow: row; grid-template-rows: none;
    }
    .ind-riga.ind-riga-griglia > .ind-box:nth-child(4) {
      grid-column: auto;
    }
  }
  .prev-stimati td.prev-metodo, .prev-stimati th.prev-metodo {
    text-align: left;
  }
  .prev-tetto {
    color: var(--brand-deep);
  }
  .set-matrice tbody th.prev-anno, .set-matrice thead th.prev-anno {
    border-right: 2px solid var(--ink-3);
  }
  .set-matrice td.set-su, .ind-box .ind-valore.set-su {
    color: var(--ok);
  }
  .set-matrice td.set-giu, .ind-box .ind-valore.set-giu {
    color: var(--ko);
  }

  @media (max-width: 720px) {
    .set-matrice thead th.prev-anno {
      width: 32%;
    }
    .set-matrice th.prev-anno {
      white-space: nowrap;
    }
  }
  .tabella-wrap {
    overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-raised);
  }
  .tabella {
    width: 100%; border-collapse: collapse; font-size: var(--fs-base);
  }
  .tabella th {
    text-align: left; font-size: var(--fs-micro); font-weight: 600; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: .04em;
    padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line);
    background: var(--surface-raised); position: sticky; top: 0; z-index: 1;
    white-space: nowrap;
  }
  .tabella td {
    padding: var(--sp-1) var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: middle;
  }
  .tabella tr:last-child td {
    border-bottom: 0;
  }
  .tabella .num {
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .tabella .num input {
    width: 96px;
  }
  .tabella td.azioni {
    text-align: right; white-space: nowrap;
  }
  .tabella td.azioni .btn-secondary {
    padding: var(--sp-1) var(--sp-3); min-height: 30px;
  }
  .tabella tr.riga-ko td {
    background: var(--ko-bg);
  }
  .tabella tr.riga-ko .l-prezzo {
    border-color: var(--ko);
  }
  .tabella th.col-minore, .tabella td.col-minore {
    font-size: var(--fs-micro); color: var(--ink-3); white-space: nowrap; width: 1%;
  }

  @media (max-width: 720px) {
    .card-body {
      padding: var(--sp-2) var(--sp-3);
    }
    .card-header {
      padding: var(--sp-2) var(--sp-3); font-size: 12px;
    }
    .ind-riga {
      flex-wrap: nowrap; gap: var(--sp-2);
      -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .ind-riga::-webkit-scrollbar {
      display: none;
    }
    .ind-riga > .ind-box {
      scroll-snap-align: start;
    }
    .ind-riga-eti {
      margin-top: 0;
    }
    .ind-riga-eti .ind-periodo {
      display: inline;
    }
    .ind-riga-eti + .ind-riga {
      margin-top: var(--sp-1);
    }
  }
  .ind-box .ind-label,
  .ind-box .ind-valore {
    font-size: 10px;
  }
  .ind-box .ind-delta {
    font-size: 9px;
  }
  .ind-riga-eti,
  .ind-riga-eti .ind-periodo {
    font-size: 9px;
  }

  @media (max-width: 720px) {
    .ind-riga {
      display: grid; grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(3, auto); grid-auto-flow: column;
      column-gap: var(--sp-2); row-gap: var(--sp-1);
      overflow-x: visible; padding-bottom: 0; scroll-snap-type: none;
    }
    .ind-riga > .ind-box {
      width: auto; max-width: none; flex: 0 1 auto;
    }
    .ind-box .ind-label,
    .ind-box .ind-valore {
      font-size: 10px;
    }
    .ind-box .ind-delta,
    .ind-riga-eti,
    .ind-riga-eti .ind-periodo {
      font-size: 9px;
    }

    @media (max-width: 359.98px) {
      .ind-box .ind-label,
      .ind-box .ind-valore {
        font-size: 9px;
      }
    }
  }

  @media (min-width: 721px) and (max-width: 1200px) {
    .ind-riga {
      grid-template-columns: repeat(3, var(--box-w));
      grid-template-rows: repeat(2, auto);
      grid-auto-flow: row;
      column-gap: var(--sp-1); row-gap: var(--sp-1);
      width: max-content; margin-left: auto; margin-right: auto;
    }
    .ind-riga::after {
      top: 50%; bottom: auto; left: 0; right: 0;
      width: auto; height: 3px; margin-left: 0; margin-top: -2px;
    }
  }