/*
 * La barra comune a tutte le pagine (piano 2026-11-08-aspetto-nuovo-sito-personale):
 * in alto al computer, con le sezioni principali e il pallino del loro colore;
 * al telefono resta in alto solo il marchio e le sezioni scendono in basso,
 * con l'illustrazione. La stampa barraSito() di src\pagine.js.
 * Le classi hanno il prefisso ib- e si azzerano da sole, perché la barra sta
 * anche sopra le pagine che hanno regole loro su a e nav.
 */
.ib-barra, .ib-sotto { font-family: var(--im-testo); box-sizing: border-box; }
/* la copia di prova (src\prova.js) */
.ib-prova { margin: 0; padding: 8px 16px; background: var(--im-ocra-c, #f6e6cb); color: var(--im-nero); font: 600 13px/1.35 var(--im-testo); text-align: center; }
.ib-prova a { color: inherit; font-weight: 800; }
.ib-barra *, .ib-sotto * { box-sizing: border-box; }
.ib-barra { background: var(--im-carta); border-bottom: 1px solid var(--im-linea); padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); padding-top: env(safe-area-inset-top, 0px); position: relative; z-index: 20; }
.ib-in { max-width: var(--im-larga); margin: 0 auto; display: flex; align-items: center; gap: 4px; height: 58px; }
.ib-barra a { color: var(--im-nero); text-decoration: none; font: 600 14px/1 var(--im-testo); padding: 9px 12px; border-radius: 6px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ib-barra a:hover { background: var(--im-fondo); }
.ib-barra a[aria-current] { background: var(--im-fondo); font-weight: 700; }
.ib-barra a:focus-visible, .ib-sotto a:focus-visible { outline: 2px solid var(--im-nero); outline-offset: 2px; }
.ib-barra .ib-marchio { font-weight: 800; font-size: 18px; margin-right: 14px; padding-left: 0; }
.ib-barra .ib-marchio:hover { background: none; }
.ib-marchio i { width: 22px; height: 22px; border-radius: 50%; display: block; background: var(--im-ocra); box-shadow: inset -6px -4px 0 var(--im-bordeaux); }
.ib-pt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ib-spazio { flex: 1; }
.ib-sotto { display: none; }

@media (max-width: 900px) {
  .ib-barra .ib-seconda { display: none; }
}
@media (max-width: 640px) {
  .ib-in { height: 50px; }
  .ib-barra a:not(.ib-marchio), .ib-spazio { display: none; }
  .ib-sotto { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--im-carta); border-top: 1px solid var(--im-linea); justify-content: space-around; padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
  .ib-sotto a { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 700 11px/1.2 var(--im-testo); color: var(--im-tenue); text-decoration: none; padding: 3px 8px; border-radius: 6px; min-width: 56px; }
  .ib-sotto a[aria-current] { color: var(--im-nero); background: var(--im-fondo); }
  .ib-sotto img { width: 30px; height: 30px; display: block; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media print { .ib-barra, .ib-sotto { display: none; } }