/* static/css/profilo.css — 3.94.0
   Profilo e Account. Struttura approvata su anteprima il 07/09/2026.
   Un foglio per sezione, come fatturazione.css e anagrafica.css: qui dentro
   non c'e' niente che serva ad altre schermate, e components.css e' gia' un
   file da settemila righe. */

/* ── Avatar in topbar ─────────────────────────────────────────────── */
.pf-avatar {
  width: 31px; height: 31px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); font: 600 12px var(--sans);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex: 0 0 auto;
}
.pf-avatar:hover { border-color: var(--accent); }
.pf-avatar[hidden] { display: none; }

/* Il menu e' figlio di .topbar, che ha `position: sticky` e quindi fa da
   riferimento. `top: 100%` invece di un numero fisso: la topbar cambia
   altezza con la densita' (compatta/comoda) e su mobile va a capo. */
.pf-menu {
  position: absolute; right: var(--pad-lg); top: calc(100% + 6px);
  z-index: 80; width: 248px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 16px 44px rgba(0, 0, 0, .5);
  padding: 6px;
}
.pf-menu[hidden] { display: none; }
.pf-menu-chi {
  padding: 8px 10px 9px; border-bottom: 1px solid var(--border); margin-bottom: 5px;
}
.pf-menu-nome {
  font-size: var(--fs-sm); color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-menu-sotto { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.pf-menu-voce, .pf-menu-radio {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 7px 10px; background: transparent; border: none; border-radius: 7px;
  color: var(--text); font-family: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.pf-menu-voce:hover, .pf-menu-radio:hover { background: var(--surface2); }
.pf-menu-titolo {
  padding: 9px 10px 4px; font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.pf-menu-sep { height: 1px; background: var(--border); margin: 6px 0; }
.pf-menu-esci { color: #f3a3a3; }
.pf-menu-esci:hover { background: rgba(239, 68, 68, .12); }
.pf-pallino {
  width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--muted); position: relative;
}
.pf-menu-radio[aria-checked="true"] .pf-pallino { border-color: var(--accent); }
.pf-menu-radio[aria-checked="true"] .pf-pallino::after {
  content: ''; position: absolute; inset: 2.5px; border-radius: 50%;
  background: var(--accent);
}

/* ── Pagina Account ───────────────────────────────────────────────── */
.pf-barra { padding: 0 0 var(--pad-md) 0; }
.pf-indietro {
  display: inline-flex; align-items: center; gap: 7px; background: transparent;
  border: none; color: var(--muted); font: 500 var(--fs-sm) var(--sans);
  cursor: pointer; padding: 0;
}
.pf-indietro:hover { color: var(--text); }

.pf-guscio { display: flex; gap: var(--pad-xl); align-items: flex-start; }
.pf-nav {
  flex: 0 0 208px; border-right: 1px solid var(--border);
  padding-right: var(--pad-md);
}
.pf-nav-et {
  padding: 10px 12px 5px; font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.pf-nav-voce {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  background: transparent; border: none; border-left: 2px solid transparent;
  color: var(--muted); font: 400 var(--fs-sm) var(--sans); cursor: pointer;
}
.pf-nav-voce:hover { color: var(--text); background: var(--surface2); }
.pf-nav-voce.on {
  color: var(--text); background: var(--surface2); border-left-color: var(--accent);
}

.pf-corpo { flex: 1 1 auto; min-width: 0; max-width: 720px; }
.pf-corpo h2 { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.pf-corpo h3 { margin: var(--pad-xl) 0 var(--pad-sm); font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.pf-sotto { margin: 5px 0 var(--pad-lg); font-size: var(--fs-sm); color: var(--muted); max-width: 62ch; }
.pf-h3sotto { margin: var(--pad-sm) 0 0; font-size: var(--fs-xs); color: var(--muted); max-width: 62ch; }
.pf-errore { color: var(--danger); font-size: var(--fs-sm); }

.pf-scheda {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden;
}
.pf-campo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--pad-lg); align-items: center; padding: 13px 16px;
}
.pf-campo + .pf-campo { border-top: 1px solid var(--border); }
.pf-campo-et { font-size: var(--fs-sm); color: var(--text); }
.pf-campo-et span { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.pf-campo input, .pf-campo select {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 10px; color: var(--text);
  font: 400 var(--fs-sm) var(--sans);
}
.pf-campo input:focus, .pf-campo select:focus { outline: none; border-color: var(--accent); }
.pf-fisso {
  font: 400 var(--fs-sm) var(--mono); color: var(--muted);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-piede {
  display: flex; align-items: center; gap: var(--pad-md); justify-content: flex-end;
  padding: 11px 16px; border-top: 1px solid var(--border); background: var(--bg);
}
.pf-nota { margin-right: auto; font-size: var(--fs-xs); color: var(--muted); }

.pf-metodo { display: flex; align-items: center; gap: 13px; padding: 14px 16px; }
.pf-metodo + .pf-metodo { border-top: 1px solid var(--border); }
.pf-metodo-testo { min-width: 0; }
.pf-metodo-testo b { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.pf-metodo-testo span { font-size: var(--fs-xs); color: var(--muted); }
.pf-metodo-destra { margin-left: auto; display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }

/* L'etichetta che rende onesta la schermata: accanto al comando, non in
   fondo alla pagina. Verde = funziona adesso; ambra = aspetta il blocco M. */
.pf-tag {
  font: 500 10.5px var(--sans); letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 8px; white-space: nowrap; border: 1px solid;
}
.pf-tag-ora { color: var(--accent2); border-color: rgba(16, 185, 129, .45); background: rgba(16, 185, 129, .1); }
.pf-tag-dopo { color: var(--accent3); border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .1); }

@media (max-width: 768px) {
  .pf-guscio { flex-direction: column; gap: var(--pad-md); }
  .pf-nav {
    flex: 0 0 auto; width: 100%; border-right: none;
    border-bottom: 1px solid var(--border); padding-right: 0;
    display: flex; gap: 2px; overflow-x: auto;
  }
  .pf-nav-et { display: none; }
  .pf-nav-voce {
    width: auto; white-space: nowrap; border-left: none;
    border-bottom: 2px solid transparent; border-radius: 7px 7px 0 0;
  }
  .pf-nav-voce.on { border-bottom-color: var(--accent); }
  .pf-campo { grid-template-columns: 1fr; gap: 7px; align-items: start; }
  .pf-menu { right: 8px; left: 8px; width: auto; }
}