/* ============================================================
   PIANO — quanto stai usando, cosa comprende, come si sale
   Blocco `data-sec="piano"` di docs/planning/nosumo-v5-app.html
   ============================================================

   Il vestito e i colori li mette il kit (`nosumo-kit.css`). Qui c'e' solo
   quello che il kit non ha: la barra di avanzamento e le poche misure di
   questa schermata.

   La barra sta qui e non nel kit di proposito: e' l'unica sezione che ne ha
   una, e un componente si mette in comune quando lo usano in due, non quando
   potrebbe usarlo qualcuno. Se domani serve altrove, si sposta allora. */

.pn-wrap {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* ── Le barre dei consumi ────────────────────────────────── */

.pn-uso { margin-bottom: 15px; }
.pn-uso:last-child { margin-bottom: 0; }

.pn-uso-r {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 12.5px;
    margin-bottom: 5px;
}

.pn-prog {
    height: 5px;
    background: var(--nk-ink-3);
    border-radius: 999px;
    overflow: hidden;
    margin: 8px 0;
}

.pn-prog i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--nk-accent), var(--nk-accent-2));
    /* Un filo di animazione all'apertura: la barra che cresce dice «questo e'
       un livello», ferma sembra un tratto decorativo. Mezzo secondo, non di
       piu': oltre, chi arriva qui per controllare un numero deve aspettarlo. */
    transition: width .45s cubic-bezier(.22, .61, .36, 1);
}

/* Il colore lo decide la percentuale, e lo calcola il PHP: giallo dal 70 %,
   rosso dal 90 %. Qui ci sono solo i due colori. */
.pn-prog-giallo i { background: var(--nk-warn); }
.pn-prog-rosso i  { background: var(--nk-danger); }

.pn-uso-n {
    font-size: 11.5px;
    color: var(--nk-muted);
    line-height: 1.45;
}
.pn-uso-n-giallo,
.pn-uso-n-rosso { color: #B36200; }

/* «senza limiti» e «non compreso» al posto del numero: la riga resta, la barra
   no. Sono le due situazioni in cui una corsia vuota direbbe una cosa falsa. */
.pn-uso-fuori {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--nk-muted);
}
.pn-uso-no {
    margin-bottom: 10px;
    opacity: .62;
}

/* ── Cosa comprende ─────────────────────────────────────── */

/* Le righe spente restano leggibili, non sbiadite fino a sparire: servono a
   dire **cosa manca**, che e' meta' del motivo per cui uno guarda questa
   schermata. Il pallino grigio lo fa gia' il kit con `.nk-dot.m`. */
.pn-rt-off { color: var(--nk-muted); }

.pn-su .nk-btn { text-decoration: none; }

.pn-note { margin-top: 14px; }

/* ── Fatture ────────────────────────────────────────────── */

.pn-fatture .nk-ra { white-space: nowrap; }

/* Sul telefono i due riquadri affiancati vanno uno sotto l'altro da soli
   (`nk-g2` lo fa gia'), ma la riga della barra vuole meno spazio ai lati, se
   no il numero a destra va a capo da solo. */
@media (max-width: 560px) {
    .pn-uso-r { font-size: 12px; }
}

/* ── LA TESTATA, E «COSA TI RESTA» ───────────────────────────────────
   [18/08/2026, variante B scelta dal titolare]

   ⚠ NIENTE COLORI, SFONDI O CARATTERI NUOVI: era la condizione posta («senza
   però cambiare il design»). Qui ci sono solo misure e spazi, e i colori dei
   numeri sono le classi che il kit ha già (`.nk-sv.gg` verde, `.ww` arancio,
   `.n` nero). Un colore nuovo in questo foglio sarebbe il primo posto in cui
   la schermata comincia a divergere dal resto dell'app. */

/* Le tre colonne della testata non hanno il margine che il kit dà alle griglie:
   sono dentro una scheda, e lo spazio lo fa già la scheda. */
.pn-testata { margin-bottom: 0; }

/* Il numero grande della testata. Più grande di `.nk-sv` (24px) perché queste
   tre cose sono il motivo per cui si apre la sezione. */
.pn-grande {
    font-size: 26px;
    margin-top: 4px;
}
/* «Come d'accordo» e «Nessuna scadenza» sono parole, non numeri: alla misura
   dei numeri andrebbero a capo dentro la colonna. */
.pn-grande-corto { font-size: 19px; line-height: 1.25; }

.pn-sotto-n { margin-top: 6px; }
.pn-testata .nk-chip { margin-top: 8px; }

/* La riga che dice quando si ricarica, sotto il titolo del riquadro. */
.pn-quando { margin: 4px 0 14px; }

.pn-resta-gr { margin-bottom: 14px; }

/* I tre riquadri di «quanto resta». `.nk-card.flat` è del kit: fondo bianco
   invece di grigio, per staccarli dalla scheda che li contiene senza inventare
   un colore. */
.pn-resta-n { margin-top: 6px; }