/* SP-IN · Barre dell'app in stile "Prima serata" (barra in alto su PC, barra dei tab flottante su telefono).
   Solo CSS sul markup che app.js genera già: header.pbar (.brand, .logo, .bt, .tnav, .acc-in, .tbav) e
   #app>nav.tabbar (a, .tbi, .tbav, .tbnm). Va caricato DOPO platform.css.
   Decisioni (Diego, 2026-10-21): su telefono niente barra in alto (platform.css la nasconde già sotto 900 px);
   la barra dei tab è flottante, scura, con la sezione attiva in un riquadro bianco inclinato.
   Design system v2 (Diego, 2026-10-22): la barra dei tab è CHIARA (surface, filo e ombra) e la sezione attiva sta in un
   riquadro inclinato `action` con il testo `on-action` (nero nel tema chiaro, bianco nel tema scuro). In Segreteria, mentre
   si modifica, la barra lascia il posto alla barra delle azioni (body.is-editing, vedi DESIGN-SYSTEM-V2.md). */

/* ---------- PC: barra in alto scura con le sezioni inclinate ---------- */
@media (min-width:900px){
  .pbar{position:relative;overflow:hidden;height:68px;background:#14202B;border-bottom:0;color:#FFFFFF}
  .pbar::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px)}
  .pbar>*{position:relative}
  .pbar .brand{color:#FFFFFF}
  .pbar .bt b{font-family:var(--font-display);font-weight:900;font-stretch:62%;font-style:italic;text-transform:uppercase;font-size:24px}
  .tnav{gap:6px}
  .tnav a{padding:8px 16px;border-radius:0;transform:skewX(-12deg);color:#C9D0D6;background:transparent;text-decoration:none;
    font-family:var(--font-display);font-weight:900;font-stretch:62%;font-style:italic;text-transform:uppercase;font-size:17px}
  .tnav a>*{transform:skewX(12deg)}
  .tnav a[aria-current="page"]{background:#FFFFFF;color:#14202B}
  @media (hover:hover){.tnav a:not([aria-current="page"]):hover{background:rgba(255,255,255,.1);color:#FFFFFF}}
  .pbar .btn.ghost{color:#FFFFFF}
  /* Babacapa (Diego, 2026-10-27): la sezione Home è il solo simbolo delle corsie */
  .tnav a.tnav-ic .tbi{display:flex}.tnav a.tnav-ic svg{width:26px;height:26px}
  .pbar .acc-in .tbav{background:var(--brand-orange);color:#14202B}
}

/* ---------- telefono: barra dei tab flottante chiara (v2) ---------- */
@media (max-width:899px){
  #app>.tabbar{left:calc(14px + env(safe-area-inset-left,0px));right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));
    padding:6px 16px;gap:4px;align-items:center;border:0;border-radius:16px;
    background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow-dialog)}
  #app>.tabbar a{height:52px;padding:0;justify-content:center;gap:2px;color:var(--muted);font-size:var(--fs-11);font-weight:600}
  #app>.tabbar a[aria-current="page"]{background:var(--action);color:var(--on-action);font-weight:800;transform:skewX(var(--skew))}
  #app>.tabbar a[aria-current="page"]>*{transform:skewX(var(--unskew))}
  #app>.tabbar a svg{width:22px;height:22px}
  #app>.tabbar a.tb-ic svg{width:30px;height:30px}   /* Babacapa (2026-10-27): Home col solo simbolo delle corsie */
  #app>.tabbar .tbav{background:var(--sunk);color:var(--ink)}
  #app>.tabbar a[aria-current="page"] .tbav{background:var(--primary-fill);color:var(--on-fill)}
  /* Segreteria in modifica: niente barra dei tab, al suo posto la barra delle azioni (SPIN.core.ActionBar) */
  body.is-editing #app>.tabbar{display:none}
  .sp-actionbar--fixed{position:fixed;left:0;right:0;bottom:0;z-index:40;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
}