/* =====================================================================
   Vista «altro» (disegno «private»). Le voci che sul telefono non stanno nella barra in basso.
   Ogni regola è chiusa dentro [data-vista="altro"]: vale nella pagina e nei pannelli che la vista apre.
   Dal prototipo: .altro-g .at .altro-basso (sezione Altro).
   ===================================================================== */
[data-vista="altro"] .altro-g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
[data-vista="altro"] .at { display: grid; gap: 6px; align-content: start; padding: 14px; min-height: 152px; border-radius: 16px; background: var(--foglio); border: 1px solid var(--filo);
  box-shadow: var(--ombra-1); position: relative; color: inherit; transition: box-shadow .15s, border-color .15s, transform .15s; }
[data-vista="altro"] .at:hover { border-color: var(--oro-filo); box-shadow: var(--ombra-2); transform: translateY(-1px); }
[data-vista="altro"] .at:active { transform: scale(.985); }
[data-vista="altro"] .at .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--notte); color: var(--oro-2); display: grid; place-items: center; margin-bottom: 4px; }
[data-vista="altro"] .at .ico svg { width: 19px; height: 19px; }
[data-vista="altro"] .at b { font-size: 15px; font-weight: 600; }
[data-vista="altro"] .at .sotto { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.4; }
[data-vista="altro"] .at .num { font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--ink); line-height: 1.15; font-variant-numeric: lining-nums; }
[data-vista="altro"] .at .num .cifra { font-size: 20px; color: inherit; }
[data-vista="altro"] .at .num .cifra .eur { font-size: 12px; color: var(--ink-3); }
[data-vista="altro"] .at .num.rosso, [data-vista="altro"] .at .num.rosso .cifra { color: var(--scaduta); }
[data-vista="altro"] .at .lucch, [data-vista="altro"] .at .frec { position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; }
[data-vista="altro"] .at .lucch { color: var(--oro); }
[data-vista="altro"] .at .frec { color: var(--ink-4); }
[data-vista="altro"] .sez .nota.lucch-n { display: inline-flex; align-items: center; gap: 5px; color: var(--oro); font-weight: 600; }
[data-vista="altro"] .sez .nota.lucch-n svg { width: 14px; height: 14px; }
[data-vista="altro"] .altro-basso { display: grid; gap: 8px; margin-top: 22px; }
[data-vista="altro"] .altro-basso a, [data-vista="altro"] .altro-basso button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 13px 14px; border-radius: 12px;
  background: var(--foglio); border: 1px solid var(--filo); font-weight: 600; width: 100%; text-align: left; cursor: pointer; color: var(--ink); }
[data-vista="altro"] .altro-basso a:hover, [data-vista="altro"] .altro-basso button:hover { border-color: var(--oro-filo); }
[data-vista="altro"] .altro-basso svg { color: var(--ink-3); }
[data-vista="altro"] .altro-basso span { flex: 1; }
[data-vista="altro"] .altro-basso .frec { width: 16px; height: 16px; color: var(--ink-4); }
[data-vista="altro"] .altro-basso button svg { color: var(--scaduta); }

@media (min-width: 761px) {
  [data-vista="altro"] .altro-g { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  [data-vista="altro"] .at { padding: 16px; min-height: 168px; }
  [data-vista="altro"] .at .num, [data-vista="altro"] .at .num .cifra { font-size: 24px; }
  [data-vista="altro"] .altro-basso { grid-template-columns: repeat(2, minmax(0, 260px)); }
}
@media (max-width: 380px) {
  [data-vista="altro"] .at { padding: 12px; }
  [data-vista="altro"] .at .num, [data-vista="altro"] .at .num .cifra { font-size: 18px; }
}