/*
 * NetGuardian — La barra condivisa dalle pagine nuove (Fase 2)
 *
 * Un foglio a parte e non una copia in ogni pagina: tre copie divergono al
 * primo cambiamento, e una voce di menu che esiste in due pagine su tre è
 * peggio di nessun menu — insegna che la navigazione non è affidabile.
 *
 * Serve anche a rendere evidente dove ci si trova: senza `aria-current`, tre
 * collegamenti identici lasciano chi guarda a dedurre la pagina dal titolo.
 */

.ng-testa {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: #162431;
  border-bottom: 1px solid #24404f;
}

.ng-marchio {
  font-size: 17px;
  font-weight: 600;
  color: #57c5b6;
  letter-spacing: -0.01em;
}

.ng-nav {
  display: flex;
  gap: 4px;
}

.ng-nav a {
  padding: 6px 13px;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  color: #94a3b8;
  border: 1px solid transparent;
}

.ng-nav a:hover {
  color: #e2e8f0;
  background: #1a2d3a;
}

/* La pagina corrente si distingue anche senza colore: il bordo la circoscrive.
   Chi non distingue i colori deve comunque sapere dov'è. */
.ng-nav a[aria-current="page"] {
  color: #57c5b6;
  border-color: #24404f;
  background: #1a2d3a;
}

.ng-stato {
  margin-left: auto;
  font-size: 13px;
  color: #94a3b8;
}

/* ── Telefono ────────────────────────────────────────────────────────────────
 *
 * A 375 pixel la barra andava a capo tre volte e «aggiornato ... fa» finiva su
 * una riga sua, allineato a destra, dove sembrava un'altra cosa. Qui il marchio
 * e l'ora stanno sulla stessa riga — l'ora e' un'informazione di contorno e non
 * merita una riga propria — e le voci di menu scendono sotto, larghe abbastanza
 * da essere toccate: sotto i 44 punti un dito sbaglia bersaglio, e la voce
 * sbagliata su questo pannello significa aprire l'inventario di un altro
 * cliente.
 */
@media (max-width: 640px) {
  .ng-testa {
    padding: 12px 14px;
    gap: 10px;
    row-gap: 12px;
  }

  .ng-stato {
    /* Prima dell'elenco nell'ordine visivo, sulla riga del marchio. */
    order: 1;
    font-size: 12px;
  }

  .ng-nav {
    order: 2;
    width: 100%;
    gap: 6px;
    /* Con quattro voci stavano in riga; a sette la riga sfondava di 175 pixel e
       la PAGINA scorreva in orizzontale — il difetto che si nota per primo e si
       perdona per ultimo. Vanno a capo. */
    flex-wrap: wrap;
  }

  .ng-nav a {
    /* `flex: 1` da solo comprimeva ogni voce fino a farla sbordare invece di
       mandarla a capo: senza una larghezza minima, «Impostazioni» finiva a 550
       pixel su uno schermo da 375. Con la base al 28% ne stanno tre per riga,
       tutte sopra i 44 punti. */
    flex: 1 1 28%;
    text-align: center;
    padding: 11px 6px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: #24404f;
    font-size: 13px;
  }
}