/* Regole comuni a tutti i portali (CLAUDE.md del monorepo), dopo il tema panna. */

/* ---------- Mobile: barra in alto da 40px e navigazione flottante in basso ----------
   Come Dashboard, Spazio, Console e Partner Hub: in alto solo il nome del portale in
   maiuscolo, bianco sul colore della barra laterale; sotto, la pill con le sezioni,
   8px dal fondo nel browser e 34px sopra la safe-area nell'app installata. */
.mtop, .mnav { display: none; }
@media (max-width: 860px) {
  .side { display: none !important; }
  .mtop { display: flex; position: sticky; top: 0; z-index: 30; align-items: center; justify-content: center; height: calc(env(safe-area-inset-top, 0px) + 40px); padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; background: var(--side); color: #fff; font-family: var(--f-body); font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: .05em; text-transform: uppercase; }
  .mnav { display: flex; position: fixed; left: 50%; transform: translateX(-50%); bottom: 8px; z-index: 30; padding: 4px 6px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); }
  html.standalone .mnav { bottom: calc(env(safe-area-inset-bottom, 0px) + 34px); }
  .mnav-i { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 58px; height: 50px; border-radius: 999px; color: var(--ink); cursor: pointer; }
  .mnav-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 26px; border-radius: 999px; }
  .mnav-i svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mnav-l { font-size: 9.5px; font-weight: 600; line-height: 1; color: var(--muted); }
  .mnav-i.on .mnav-ic { background: var(--accent); color: #fff; }
  .mnav-i.on .mnav-l { color: var(--ink); }
  /* spazio per la pill in fondo alla pagina */
  .main { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important; }
}

/* ---------- Divisore "|": linea grigia larga 1px, margine 0 4px, colore del testo al 28% ---------- */
.sep { display: inline-block; width: 1px; height: .95em; margin: 0 4px; vertical-align: -.12em; overflow: hidden; text-indent: 4px; user-select: none; background: #dadada; background: color-mix(in srgb, currentColor 28%, transparent); }

/* ---------- Micro animazioni (spente con "riduci movimento") ---------- */
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-in { animation: page-in .28s cubic-bezier(.2, .7, .2, 1) backwards; }
:where(button, a, .btn, .chip):not(:disabled):active { scale: .985; }
@media (prefers-reduced-motion: reduce) {
  .page-in { animation: none; }
  :where(button, a, .btn, .chip):active { scale: none; }
}