/* Guscio: barra demo, menu laterale / cassetto, area pagina, guida (pannello / foglio), finestre.
   Punti di rottura: 768 px (mobile), 1200 px (guida affiancata). */
:root { --barra: 48px; --menu: 264px; --guida: 320px; }

html.con-finestra body { overflow: hidden; }

.salta {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  padding: 8px 14px; border-radius: var(--raggio); background: #FFFFFF; color: var(--gray-900);
  box-shadow: var(--ombra-lg); font-weight: 600; text-decoration: none;
}
.salta:focus { top: 8px; }

/* ---------- Barra demo ---------- */
.barra-demo {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--barra); padding: 0 16px 0 20px;
  background: var(--gray-900); color: var(--gray-300); font-size: 13px; line-height: 18px;
}
.barra-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.barra-pill {
  flex: none; padding: 2px 8px; border-radius: 6px;
  background: var(--brand-600); color: #FFFFFF; font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.barra-testo { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-testo strong, .barra-vista strong { color: #FFFFFF; font-weight: 600; }
.barra-vista {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 3px 10px; border-radius: 16px; background: var(--gray-800); border: 1px solid var(--gray-700);
  white-space: nowrap;
}
.barra-come { display: none; }
.barra-ruolo { flex: none; white-space: nowrap; }
.barra-vista .ph { color: var(--brand-200); font-size: 14px; }
.barra-azioni { display: flex; align-items: center; gap: 8px; flex: none; }
.barra-vedi { display: flex; align-items: center; gap: 8px; }
.barra-vedi label { color: var(--gray-300); white-space: nowrap; }
.barra-select {
  height: 32px; padding: 0 30px 0 10px; appearance: none;
  border: 1px solid var(--gray-700); border-radius: var(--raggio); background-color: var(--gray-800); color: #FFFFFF;
  font-size: 13px; font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%23D0D5DD' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.barra-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--gray-700); border-radius: var(--raggio); color: var(--gray-100);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.barra-btn:hover { background: var(--gray-800); color: #FFFFFF; }
.barra-btn .ph { font-size: 16px; }
.barra-demo .btn-sm { min-height: 32px; padding: 5px 12px; font-size: 13px; }
.barra-demo :focus-visible { outline-color: var(--brand-200); }
.solo-stretto { display: none; }

@media (max-width: 1439.98px) {
  .barra-info:has(.barra-vista) .barra-testo .solo-largo { display: none; }
  .barra-info:has(.barra-vista) .barra-testo .solo-stretto { display: inline; }
}
@media (max-width: 1279.98px) {
  .barra-testo .solo-largo { display: none; }
  .barra-testo .solo-stretto { display: inline; }
  .barra-vista > span:not(.barra-ruolo):not(.barra-come) { display: none; }
  .barra-vista > .barra-come { display: inline; }
}
@media (max-width: 1023.98px) {
  .barra-vista { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; }
  .barra-vista strong { min-width: 0; white-space: nowrap; }
  .barra-vista strong { overflow: hidden; text-overflow: ellipsis; }
  .barra-info:has(.barra-vista) .barra-testo { display: none; }
  .barra-vedi label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .barra-btn .solo-largo-btn { display: none; }
  .barra-btn[aria-label] { padding: 0 8px; }
}

/* ---------- Struttura ---------- */
.guscio-corpo { display: grid; grid-template-columns: var(--menu) minmax(0, 1fr); align-items: start; }
.guscio-area { min-width: 0; min-height: calc(100vh - var(--barra)); }
.pagina { padding: 32px 32px 64px; max-width: 1280px; }
.pagina:focus { outline: none; }

/* ---------- Menu ---------- */
.menu {
  position: sticky; top: var(--barra); height: calc(100vh - var(--barra));
  display: flex; flex-direction: column;
  padding: 20px 16px 16px; background: #FFFFFF; border-right: 1px solid var(--gray-200);
}
.menu-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.menu-chiudi { display: none; }
.marchio { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marchio-logo {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--raggio);
  background: var(--brand-600); color: #FFFFFF; font-size: 16px; font-weight: 700;
  box-shadow: inset 0 -2px 0 rgba(16, 24, 40, .12);
}
.marchio-nome {
  min-width: 0; font-size: 16px; line-height: 20px; font-weight: 600; color: var(--gray-900);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.menu-scorre { flex: 1; margin: 24px -4px 0; padding: 0 4px; overflow-y: auto; }
.menu-voci { display: flex; flex-direction: column; gap: 2px; }
.menu-voce {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px;
  border-radius: 6px; color: var(--gray-700); font-size: 15px; font-weight: 500; text-decoration: none;
}
.menu-voce span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-voce .ph, .menu-voce .ph-fill { font-size: 20px; color: var(--gray-500); flex: none; }
.menu-voce:hover { background: var(--gray-50); color: var(--gray-900); }
.menu-voce.attiva { background: var(--gray-50); color: var(--gray-900); font-weight: 600; }
.menu-voce.attiva .ph-fill { color: var(--brand-600); }
.menu-voce:focus-visible { outline-offset: -2px; }
.menu-voce--sotto { height: 36px; padding-left: 24px; font-size: 14px; color: var(--gray-600); }
.menu-voce--sotto .ph, .menu-voce--sotto .ph-fill { font-size: 18px; }
.menu-piede { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gray-200); }
.utente { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
.utente-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gray-100); border: 1px solid rgba(16, 24, 40, .08);
  color: var(--gray-600); font-size: 14px; font-weight: 600;
}
.utente-testi { display: flex; flex-direction: column; min-width: 0; }
.utente-nome, .utente-ruolo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utente-nome { font-weight: 600; color: var(--gray-700); }
.utente-ruolo { color: var(--gray-600); }
.menu-prodotto {
  display: flex; align-items: center; gap: 6px; margin-top: 14px; padding: 0 4px;
  font-size: 12px; font-weight: 500; color: var(--gray-500);
}
.menu-prodotto .ph-fill { color: var(--brand-500); font-size: 14px; }

.testata-mobile, .cassetto-sfondo { display: none; }

/* ---------- Guida ---------- */
.guida {
  display: flex; flex-direction: column; gap: 20px;
  background: #FFFFFF; padding: 24px;
}
.guida-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.guida-testa .btn-icona { margin: -8px -8px 0 0; }
.guida-sopra { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-600); }
.guida-titolo { margin-top: 2px; font-size: 18px; line-height: 28px; font-weight: 600; }
.guida-avanzamento p { margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--gray-700); }
.progresso { height: 8px; border-radius: 8px; background: var(--gray-200); overflow: hidden; }
.progresso-pieno { display: block; height: 100%; border-radius: 8px; background: var(--brand-600); transition: width .3s; }
.progresso--mini { height: 4px; margin-top: 6px; }

.guida-passi { display: flex; flex-direction: column; counter-reset: passo; }
.passo { position: relative; display: flex; gap: 12px; padding-bottom: 20px; }
.passo:not(:last-child)::before {
  content: ''; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--gray-200);
}
.passo--fatto:not(:last-child)::before { background: var(--brand-200); }
.passo-segno {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--gray-300); background: #FFFFFF; color: var(--gray-500);
  font-size: 13px; font-weight: 600;
}
.passo--fatto .passo-segno { border-color: var(--brand-600); background: var(--brand-600); color: #FFFFFF; font-size: 15px; }
.passo--corrente .passo-segno { border: 2px solid var(--brand-600); color: var(--brand-600); box-shadow: 0 0 0 4px var(--brand-100); }
.passo-testi { min-width: 0; padding-top: 3px; }
.passo-titolo { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--gray-700); }
.passo--corrente .passo-titolo { color: var(--gray-900); }
.passo--fatto .passo-titolo { color: var(--gray-600); }
.passo-spiegazione { margin-top: 2px; color: var(--gray-600); }
.passo--fatto .passo-spiegazione { display: none; }
.passo .btn { margin-top: 10px; }
.passo .btn-link { margin-top: 6px; }

.guida-fine {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px; border-radius: var(--raggio-card); background: var(--brand-50); border: 1px solid var(--brand-200);
}
.guida-fine-icona { font-size: 24px; color: var(--brand-600); }
.guida-fine-titolo { font-weight: 600; color: var(--gray-900); }
.guida-fine-testo { color: var(--gray-700); margin-bottom: 8px; }
.guida-piede { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--gray-200); }
.guida-piede .btn { margin-left: -14px; }

.guida-barretta, .guida-sfondo { display: none; }

.guida-apri {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 16px;
  border-radius: 999px; background: var(--gray-900); color: #FFFFFF; box-shadow: var(--ombra-lg);
  font-weight: 600;
}
.guida-apri:hover { background: var(--gray-800); }
.guida-apri .ph { font-size: 18px; color: var(--brand-200); }
.guida-apri-conto { padding: 2px 10px; border-radius: 999px; background: var(--brand-600); font-size: 12px; }

/* Guida affiancata */
@media (min-width: 1200px) {
  .con-guida .guscio-corpo { grid-template-columns: var(--menu) minmax(0, 1fr) var(--guida); }
  .guida {
    position: sticky; top: var(--barra); height: calc(100vh - var(--barra)); overflow-y: auto;
    border-left: 1px solid var(--gray-200);
  }
}

/* Guida sovrapposta a destra */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .guida {
    position: fixed; top: var(--barra); right: 0; bottom: 0; z-index: 40; width: var(--guida);
    overflow-y: auto; border-left: 1px solid var(--gray-200); box-shadow: var(--ombra-xl);
  }
}

/* ---------- Finestre ---------- */
.finestra-sfondo {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(12, 17, 29, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: dissolvenza .15s ease-out;
}
.finestra {
  position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: #FFFFFF; border-radius: var(--raggio-card); box-shadow: var(--ombra-xl);
  animation: sali .2s ease-out;
}
.finestra:focus { outline: none; }
.finestra-testa { padding: 24px 24px 0; }
.finestra-marchio {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 16px;
  border-radius: 50%; background: var(--brand-100); color: var(--brand-600); font-size: 24px;
  box-shadow: 0 0 0 8px var(--brand-50);
}
.finestra-titolo { font-size: 18px; line-height: 28px; font-weight: 600; padding-right: 32px; }
.finestra-x { position: absolute; top: 12px; right: 12px; }
.finestra-corpo { padding: 4px 24px 0; color: var(--gray-600); }
.finestra-corpo > * + * { margin-top: 12px; }
.finestra-corpo .campo { margin-top: 20px; }
.finestra-nota { font-size: 13px; color: var(--gray-500); }
.finestra-azioni {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px;
  padding: 32px 24px 24px;
}
.finestra--prova .finestra-azioni, .finestra--benvenuto .finestra-azioni { grid-auto-flow: row; }
.finestra--prova { max-width: 440px; }

@keyframes dissolvenza { from { opacity: 0; } to { opacity: 1; } }
@keyframes sali { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
  html.con-cassetto body, html.con-foglio body { overflow: hidden; }

  .barra-demo {
    position: static; height: auto; flex-wrap: wrap; gap: 8px; padding: 8px 16px 10px;
  }
  .barra-info { width: 100%; gap: 8px; }
  .barra-vista { display: inline-flex; padding: 2px 8px; min-width: 0; overflow: hidden; }
  .barra-vista strong { overflow: hidden; text-overflow: ellipsis; }
  .barra-info:has(.barra-vista) .barra-testo { display: none; }
  .barra-azioni { width: 100%; justify-content: space-between; }
  .barra-vedi { flex: 1; min-width: 0; }
  .barra-select { min-width: 104px; width: 100%; max-width: 140px; }
  .barra-btn { padding: 0 9px; }

  .guscio-corpo { display: block; }
  .testata-mobile {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px 0 8px;
    background: #FFFFFF; border-bottom: 1px solid var(--gray-200);
  }
  .testata-mobile .marchio-nome { -webkit-line-clamp: 1; }
  .pagina { padding: 24px 16px 104px; }
  .guscio-area { min-height: 0; }

  .menu {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: min(304px, 86vw); height: auto;
    border-right: 0; box-shadow: var(--ombra-xl);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  .menu-aperto .menu { transform: none; visibility: visible; transition: transform .22s ease; }
  .menu-chiudi { display: inline-flex; margin-right: -8px; }
  .cassetto-sfondo {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(12, 17, 29, .6); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  .menu-aperto .cassetto-sfondo { display: block; }

  /* Guida: foglio dal basso + barretta */
  .guida {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    max-height: 86vh; overflow-y: auto; padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0; box-shadow: var(--ombra-xl);
    transform: translateY(100%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .guida.guida--foglio { transform: none; visibility: visible; transition: transform .25s ease; }
  .guida-sfondo.visibile {
    display: block; position: fixed; inset: 0; z-index: 65; background: rgba(12, 17, 29, .6);
  }
  .guida-barretta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #FFFFFF; border-top: 1px solid var(--gray-200); box-shadow: 0 -4px 12px rgba(16, 24, 40, .06);
    text-align: left;
  }
  .guida-barretta-icona {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 36px; height: 36px; border-radius: 50%; background: var(--brand-100); color: var(--brand-600); font-size: 18px;
  }
  .guida-barretta-testi { flex: 1; min-width: 0; }
  .guida-barretta-titolo { display: block; font-weight: 600; color: var(--gray-900); }
  .guida-barretta > .ph { color: var(--gray-500); font-size: 20px; }
  .guida-apri { right: 16px; bottom: 16px; }

  /* Finestre a tutto schermo */
  .finestra-sfondo { padding: 0; align-items: stretch; }
  .finestra {
    max-width: none; max-height: none; height: 100%; border-radius: 0;
    display: flex; flex-direction: column;
  }
  .finestra-modulo { display: flex; flex-direction: column; flex: 1; }
  .finestra-testa { padding-top: 56px; }
  .finestra-azioni { margin-top: auto; grid-auto-flow: row; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .finestra--conferma .finestra-azioni > :last-child { order: -1; }
}