/* Nexorat Live© — il pannello di Alessia Mental Coach (alessiamentalcoach.com/admin).
   15/10/2026, Simone: «fai tutto con la grafica di Nexorat Live dei gestionali che abbiamo fatto a Fabiana e a tutti gli
   altri: voglio tutto uniformato nella mia azienda». È la grafica di myPetDietPro e del pannello di UNAT (barra laterale
   bianca con le voci a pillola, carte bianche molto arrotondate, pulsante principale a pillola chiara col bordo, fondo che
   sfuma, DM Sans ospitato qui) nei colori del marchio di Alessia: vino per i testi, lampone per link e icone, cipria per il
   pulsante principale.
   FILE GENERATO da tools/costruisci-stile.sh: si cambiano sorgenti/base-nexorat-live.css (la base comune, ripresa da
   ~/Sites/unat/sorgenti/live.css) e sorgenti/alessia.css (le parti di questo pannello), poi si rilancia lo script. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("fonts/dm-sans.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --titoli: #3D0D1F;              /* vino del marchio: titoli */
  --notte: #2A0814;
  --testo: #3A1C28;
  --testo-2: #6B5560;
  --testo-3: #7E6873;
  --accento: #B13C62;          /* lampone del marchio */
  --accento-testo: #A3345A;    /* link e icone su chiaro: 6,6:1 sul bianco */
  --primario: #FADCE5;            /* il pulsante principale: cipria (in myPetDietPro e' il lime, in UNAT la pesca) */
  --primario-forte: #F7C8D6;
  --primario-bordo: #E58EA3;
  --attivo: #F6E3EA;            /* voce attiva del menu */
  --tenue: #FBF3F6;
  --fondo: #FBF6F4;
  --carta: #FFFFFF;
  --linea: rgba(61, 13, 31, .10);
  --linea-forte: rgba(61, 13, 31, .20);
  --ombra-1: 0 1px 2px rgba(42, 8, 20, .04), 0 2px 20px rgba(42, 8, 20, .05);
  --ombra-2: 0 2px 6px rgba(0, 0, 0, .04), 0 18px 40px -16px rgba(61, 13, 31, .24);
  --ombra-3: 0 30px 80px -24px rgba(42, 8, 20, .40);
  --ok: #1F7A4D; --ok-fondo: #E4F5EA;
  --attesa: #8A5A00; --attesa-fondo: #FFF3D1;
  --errore: #B3261E; --errore-fondo: #FDECEA;
  --f: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --raggio: 24px; --raggio-s: 14px; --raggio-l: 32px;
  --lato: 264px;
  --barra-h: 68px;
  --schede-h: 64px;
  --lati: max(16px, env(safe-area-inset-left));
  --ease: cubic-bezier(.23, 1, .32, 1);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* errore n. 44: «hidden» deve vincere su display:flex/grid */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--barra-h) + 16px); }
body {
  margin: 0; font-family: var(--f); font-size: 15.5px; line-height: 1.5; color: var(--testo); letter-spacing: -.003em;
  background: linear-gradient(180deg, var(--fondo) 0, var(--fondo) 260px, #F8EEF2 900px, #FFFFFF 1600px);
  background-color: var(--fondo); min-height: 100vh; min-height: 100dvh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; color: var(--titoli); font-weight: 700; letter-spacing: -.022em; line-height: 1.15; }
p { margin: 0; }
a { color: var(--accento-testo); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
::selection { background: var(--primario); color: var(--notte); }
:focus-visible { outline: 2px solid var(--accento-testo); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
sup { font-size: .55em; line-height: 0; }
.vis-nascosto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.salta-al-contenuto { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: 999px; background: var(--titoli); color: #fff; text-decoration: none; font-weight: 600; }
.salta-al-contenuto:focus { top: 12px; }
.nl-noscript { max-width: 520px; margin: 80px auto; padding: 0 var(--lati); text-align: center; }
.nl-ico { width: 20px; height: 20px; flex: none; }

/* ---------------------------------------------------------------- pulsanti a pillola */
.nl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--linea-forte); background: var(--carta); color: var(--titoli);
  font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .25s var(--ease), transform .15s var(--ease);
}
.nl-btn:hover { border-color: var(--accento-testo); color: var(--accento-testo); }
.nl-btn:active { transform: scale(.97); }
.nl-btn:disabled { opacity: .55; cursor: default; transform: none; }
.nl-btn .nl-ico { width: 18px; height: 18px; }
.nl-btn-primario {
  background: var(--primario); border: 1.5px solid var(--primario-bordo); color: var(--notte);
  box-shadow: 0 2px 20px rgba(0, 0, 0, .07);
}
.nl-btn-primario:hover { background: var(--primario-forte); border-color: var(--primario-bordo); color: var(--notte); box-shadow: 0 8px 24px -10px rgba(177, 60, 98, .65); }
.nl-btn-grande { min-height: 52px; padding: 0 26px; font-size: 1.02rem; }
.nl-btn-largo { width: 100%; }
.nl-link {
  background: none; border: 0; padding: 4px 0; color: var(--accento-testo); font-weight: 600; font-size: .92rem;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.nl-link:hover { text-decoration-thickness: 2px; }
.nl-pericolo { color: var(--errore); }
.nl-pill {
  border: 1px solid var(--linea-forte); background: var(--carta); color: var(--titoli); border-radius: 999px;
  padding: 6px 14px; font-weight: 600; font-size: .85rem;
}
.nl-pill:hover { border-color: var(--accento-testo); color: var(--accento-testo); }
.nl-freccia { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: .92rem; text-decoration: none; }
.nl-freccia::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 1.8px 1.8px 0 0; transform: rotate(45deg); margin-left: 2px; }
.nl-freccia:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- campi */
.nl-campo { display: grid; gap: 6px; }
label { font-weight: 600; font-size: .9rem; color: var(--titoli); }
label small, label > span:not([class]) { font-weight: 500; color: var(--testo-3); }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  width: 100%; min-height: 46px; padding: 11px 15px; border: 1px solid var(--linea-forte); border-radius: var(--raggio-s);
  background: var(--carta); font-size: 16px; color: var(--testo);   /* 16 px: su iPhone il campo non ingrandisce la pagina */
  transition: border-color .2s, box-shadow .2s;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accento-testo); box-shadow: 0 0 0 4px rgba(177, 60, 98, .14);
}
select {
  -webkit-appearance: none; appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D0D1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
textarea { resize: vertical; line-height: 1.55; }
::placeholder { color: #9A8690; opacity: 1; }
.nl-campi { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.nl-campi > div { display: grid; gap: 6px; align-content: start; }
.nl-campo-largo { grid-column: 1 / -1; }
.nl-nota { font-size: .86rem; color: var(--testo-2); line-height: 1.45; }
.nl-errore { padding: 10px 14px; border-radius: 12px; background: var(--errore-fondo); color: var(--errore); font-size: .9rem; font-weight: 500; }
.nl-ok { color: var(--ok); font-weight: 600; font-size: .9rem; }
.nl-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

/* ---------------------------------------------------------------- l'ingresso (come quello di myPetDietPro) */
.nl-ingresso {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 48px var(--lati) 56px;
  background:
    radial-gradient(90% 55% at 50% 0%, #FFFFFF 0%, transparent 70%),
    linear-gradient(180deg, var(--fondo) 0%, #F6E6EC 58%, #EFD6E0 100%);
}
.nl-ingresso-dentro { width: min(440px, 100%); display: grid; gap: 22px; justify-items: center; text-align: center; }
.nl-ingresso-marchio img { width: min(300px, 74vw); height: auto; }
.nl-ingresso-sotto { color: var(--testo-2); font-size: 1rem; margin-top: -6px; }
.nl-carta { background: var(--carta); border-radius: var(--raggio); box-shadow: var(--ombra-1); padding: 24px; }
.nl-accesso {
  width: 100%; text-align: left; display: grid; gap: 16px; padding: 30px 28px 24px; border-radius: 28px;
  box-shadow: var(--ombra-2); border: 1px solid rgba(255, 255, 255, .7);
}
.nl-chi { display: grid; justify-items: center; text-align: center; gap: 4px; padding-bottom: 6px; }
.nl-chi-marchio { width: 76px; height: 76px; border-radius: 22px; background: var(--tenue); display: grid; place-items: center; margin-bottom: 10px; }
.nl-chi-marchio img { width: 50px; height: auto; }
.nl-chi strong { font-size: 1.4rem; letter-spacing: -.02em; color: var(--titoli); }
.nl-chi span { color: var(--testo-2); font-size: .92rem; }
.nl-password { position: relative; }
.nl-password input { padding-right: 92px !important; }
.nxl-mostra {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: var(--tenue);
  color: var(--titoli); border-radius: 999px; padding: 7px 13px; font-size: .82rem; font-weight: 600;
}
.nl-altro-utente { justify-self: center; font-weight: 500; font-size: .86rem; color: var(--testo-2); }
.nl-ingresso-piede { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: .82rem; color: var(--testo-2); max-width: 400px; }
.nl-ingresso-piede .nl-ico { width: 15px; height: 15px; margin-top: 2px; }

/* ---------------------------------------------------------------- struttura: barra laterale, barra in alto, schede in basso */
.nl-app { min-height: 100vh; min-height: 100dvh; }
.nl-lato { display: none; }
.nl-corpo { min-width: 0; padding-bottom: calc(var(--schede-h) + env(safe-area-inset-bottom) + 28px); }

/* la barra in alto: il vetro sta su ::before, mai sulla barra (errore n. 30); niente menu che blocca lo scorrimento,
   quindi «sticky» resta fermo anche su iPhone (errore n. 48) */
.nl-barra {
  position: sticky; top: 0; z-index: 50; height: var(--barra-h); display: flex; align-items: center; gap: 12px;
  padding: 0 var(--lati); padding-top: env(safe-area-inset-top); box-sizing: content-box;
}
.nl-barra::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(251, 246, 244, .82);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 var(--linea);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nl-barra::before { background: var(--fondo); } }
.nl-barra-marchio { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--carta); box-shadow: var(--ombra-1); display: grid; place-items: center; }
.nl-barra-marchio img { width: 25px; height: auto; }
.nl-barra-titolo { flex: 1; min-width: 0; font-weight: 700; font-size: 1.12rem; letter-spacing: -.015em; color: var(--titoli); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-barra-nuovo { min-height: 40px; padding: 0 14px; }

.nl-schede {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--schede-h) + env(safe-area-inset-bottom)); padding: 0 max(6px, env(safe-area-inset-left)) env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .95); box-shadow: 0 -1px 0 var(--linea), 0 -10px 30px -20px rgba(42, 8, 20, .3);
}
.nl-scheda {
  display: grid; justify-items: center; align-content: center; gap: 3px; color: var(--testo-3); text-decoration: none;
  font-size: .7rem; font-weight: 600; min-width: 0;
}
.nl-scheda .nl-ico { width: 22px; height: 22px; }
.nl-scheda[aria-current="page"] { color: var(--accento-testo); }
.nl-scheda-nuovo .nl-ico {
  width: 44px; height: 44px; padding: 11px; margin-top: -6px; border-radius: 999px; color: var(--notte);
  background: var(--primario); border: 1.5px solid var(--primario-bordo); box-shadow: 0 6px 16px -8px rgba(177, 60, 98, .7);
}
.nl-scheda-nuovo span { margin-top: -2px; }
.nl-scheda-nuovo[aria-current="page"] { color: var(--notte); }

@media (max-width: 520px) {
  .nl-barra-nuovo { width: 40px; padding: 0; }
  .nl-barra-nuovo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nl-solo-largo { display: none; }
}

@media (min-width: 1024px) {
  .nl-app {
    display: grid; grid-template-columns: var(--lato) minmax(0, 1fr);
    background: linear-gradient(to right, #FFFFFF calc(var(--lato) - 1px), var(--linea) calc(var(--lato) - 1px), var(--linea) var(--lato), transparent var(--lato));
  }
  .nl-lato {
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
    padding: 24px 14px 20px; background: #FFFFFF; scrollbar-width: thin;
  }
  .nl-schede, .nl-barra-marchio { display: none; }
  .nl-corpo { padding-bottom: 56px; }
  .nl-barra { padding: 0 40px; }
}

/* la barra laterale */
.nl-lato-marchio { display: block; padding: 4px 12px 18px; }
.nl-lato-marchio img { width: 150px; height: auto; }
.nl-io { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; background: var(--tenue); margin-bottom: 8px; }
.nl-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
  background: var(--titoli); color: #fff; font-weight: 700; font-size: 1.05rem;
}
.nl-io-testo { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.nl-io-testo strong { color: var(--titoli); font-size: .95rem; }
.nl-io-testo span { color: var(--testo-2); font-size: .8rem; }
.nl-nav { display: grid; gap: 2px; }
.nl-nav-titolo { margin: 16px 12px 4px; font-size: .78rem; font-weight: 600; color: #8A7480; }
.nl-voce {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 999px; color: var(--titoli);
  text-decoration: none; font-weight: 500; font-size: .96rem; transition: background-color .15s;
}
.nl-voce .nl-ico { color: var(--accento-testo); opacity: .95; }
.nl-voce > span:not(.nl-conta) { flex: 1; min-width: 0; }
.nl-voce:hover { background: var(--tenue); }
.nl-voce[aria-current="page"] { background: var(--attivo); color: var(--notte); font-weight: 700; }
.nl-voce-nuovo { margin: 6px 0 2px; background: var(--primario); border: 1.5px solid var(--primario-bordo); color: var(--notte); font-weight: 700; }
.nl-voce-nuovo .nl-ico { color: var(--notte); }
.nl-voce-nuovo:hover, .nl-voce-nuovo[aria-current="page"] { background: var(--primario-forte); }
.nl-conta { font-size: .8rem; color: var(--testo-3); font-variant-numeric: tabular-nums; font-weight: 500; }
.nl-lato-piede { margin-top: auto; padding: 22px 12px 0; font-size: .74rem; color: var(--testo-3); line-height: 1.45; }

/* ---------------------------------------------------------------- le viste */
.nl-viste { width: min(1180px, 100%); margin: 0 auto; padding: 18px var(--lati) 0; }
@media (min-width: 1024px) { .nl-viste { padding: 30px 40px 0; } }
.nl-vista { display: grid; gap: 22px; animation: nl-entra .35s var(--ease) both; }
@keyframes nl-entra { from { opacity: 0; transform: translateY(6px); } }
.nl-titolo-grande { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem); line-height: 1.05; letter-spacing: -.03em; }
.nl-titolo { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); line-height: 1.08; letter-spacing: -.028em; }
.nl-sotto { margin-top: 8px; color: var(--testo-2); font-size: 1rem; max-width: 62ch; }
.nl-vista-testa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; }
.nl-carta-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.nl-carta h3, .nl-carta-testa h3 { font-size: 1.16rem; letter-spacing: -.015em; }
.nl-indietro { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 8px -4px; font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--accento-testo); }
.nl-indietro .nl-ico { width: 18px; height: 18px; }
.nl-sotto-elenco { margin-top: -6px; }

/* ---------------------------------------------------------------- inizio: il riquadro in primo piano */
.nl-crea {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--raggio-l); color: #fff;
  background: var(--titoli); box-shadow: var(--ombra-2); padding: clamp(24px, 4vw, 40px);
  display: grid; gap: 26px;
}
.nl-crea-cuori { position: absolute; inset: 0; z-index: -1; }
.nl-crea-cuori svg { width: 100%; height: 100%; }
.nl-crea-cuori::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, var(--titoli) 30%, rgba(61, 13, 31, .82) 58%, rgba(61, 13, 31, .25) 100%); }
.nl-crea-testo { display: grid; gap: 14px; justify-items: start; max-width: 520px; }
.nl-crea h3 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.35rem); letter-spacing: -.03em; }
.nl-crea p { color: rgba(255, 255, 255, .84); font-size: 1.02rem; }
.nl-crea .nl-btn-primario { margin-top: 6px; box-shadow: 0 10px 30px -12px rgba(177, 60, 98, .9); }
.nl-tipi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nl-tipo {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; text-decoration: none; color: #fff;
  background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: background-color .2s, transform .2s var(--ease);
}
.nl-tipo:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }
.nl-tipo-ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(177, 60, 98, .22); color: #F2A7BD; }
.nl-tipo-testo { display: grid; min-width: 0; line-height: 1.3; }
.nl-tipo-testo strong { font-size: .98rem; }
.nl-tipo-testo span { font-size: .8rem; color: rgba(255, 255, 255, .72); }
@media (max-width: 560px) {
  .nl-tipi { grid-template-columns: minmax(0, 1fr); }
  .nl-crea .nl-btn-grande { width: 100%; }
}
@media (min-width: 1180px) {
  .nl-crea { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
  .nl-crea-cuori::after { background: linear-gradient(100deg, var(--titoli) 38%, rgba(61, 13, 31, .7) 62%, rgba(61, 13, 31, .45) 100%); }
}

.nl-numeri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .nl-numeri { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nl-numero {
  display: grid; gap: 2px; padding: 18px 20px; border-radius: 22px; background: var(--carta); box-shadow: var(--ombra-1);
  text-decoration: none; color: var(--testo-2); transition: transform .2s var(--ease), box-shadow .2s;
}
.nl-numero:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); }
.nl-numero strong { font-size: 2.1rem; line-height: 1.05; letter-spacing: -.03em; color: var(--titoli); font-variant-numeric: tabular-nums; }
.nl-numero span { font-size: .9rem; }

.nl-due { display: grid; gap: 22px; align-items: start; }
@media (min-width: 1100px) { .nl-due { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.nl-vuoto { display: grid; gap: 14px; justify-items: start; color: var(--testo-2); }

/* ---------------------------------------------------------------- elenchi, stati, filtri */
.nl-lista { display: grid; }
.nl-stato {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  background: var(--ok-fondo); color: var(--ok); white-space: nowrap;
}
.nl-stato::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.nl-stato[data-stato="bozza"], .nl-stato[data-stato="nuovo"] { background: #F3ECEF; color: #6B5560; }
.nl-stato[data-stato="programmato"] { background: var(--attesa-fondo); color: var(--attesa); }
.nl-stato[data-stato="sul-sito"]::before { animation: nl-spia 2.4s ease-in-out infinite; }
@keyframes nl-spia { 50% { opacity: .35; } }
.nl-filtri { display: grid; gap: 12px; }
@media (min-width: 900px) { .nl-filtri { grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); align-items: center; } }
.nl-cerca { position: relative; }
.nl-cerca .nl-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--testo-3); width: 18px; height: 18px; pointer-events: none; }
.nl-cerca input { padding-left: 44px !important; border-radius: 999px !important; }
.nl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-chips button {
  min-height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--linea-forte); background: var(--carta);
  color: var(--titoli); font-weight: 600; font-size: .88rem;
}
.nl-chips button[aria-pressed="true"] { background: var(--attivo); border-color: transparent; color: var(--notte); }
.nl-chips button span { color: var(--testo-3); font-weight: 500; margin-left: 4px; }

.nl-carica {
  display: flex; align-items: center; gap: 14px; padding: 18px; border: 1.5px dashed var(--linea-forte); border-radius: 18px;
  cursor: pointer; transition: border-color .2s, background-color .2s; color: var(--testo-2);
}
.nl-carica:hover, .nl-carica.nl-sopra { border-color: var(--accento-testo); background: #FDF4F7; }
.nl-carica .nl-ico { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--primario); color: var(--notte); }
.nl-carica > span { display: grid; gap: 2px; }
.nl-carica strong { color: var(--titoli); font-size: 1rem; }
.nl-carica small { font-size: .84rem; font-weight: 400; color: var(--testo-2); }
input[type="file"]:focus-visible + .nl-carica, .nl-carica:focus-within { outline: 2px solid var(--accento-testo); outline-offset: 2px; }

.nl-interruttore { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.nl-interruttore input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nl-interruttore-segno {
  flex: none; position: relative; width: 50px; height: 30px; border-radius: 999px; background: #DCCBD2; margin-top: 1px;
  transition: background-color .25s var(--ease);
}
.nl-interruttore-segno::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 999px; background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2); transition: transform .3s var(--ease);
}
.nl-interruttore input:checked + .nl-interruttore-segno { background: var(--accento-testo); }
.nl-interruttore input:checked + .nl-interruttore-segno::after { transform: translateX(20px); }
.nl-interruttore input:focus-visible + .nl-interruttore-segno { outline: 2px solid var(--accento-testo); outline-offset: 3px; }
.nl-interruttore-testo { display: grid; gap: 3px; }
.nl-interruttore-testo strong { color: var(--titoli); font-size: 1rem; }
.nl-interruttore-testo small { color: var(--testo-2); font-size: .86rem; font-weight: 400; line-height: 1.45; }

/* ---------------------------------------------------------------- copia e password, guida, altro */
.nl-blocco { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
.nl-blocco > div { display: grid; gap: 12px; }
.nl-blocco p { color: var(--testo-2); }
.nl-blocco-ico { width: 48px; height: 48px; border-radius: 15px; background: var(--tenue); color: var(--accento-testo); display: grid; place-items: center; }
.nl-blocco-ico .nl-ico { width: 22px; height: 22px; }
.nl-blocco-tenue { box-shadow: none; background: rgba(255, 255, 255, .6); border: 1px solid var(--linea); }
@media (max-width: 520px) { .nl-blocco { grid-template-columns: minmax(0, 1fr); } }
.nl-guida { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.nl-guida .nl-carta { display: grid; gap: 10px; align-content: start; }
.nl-guida p { color: var(--testo-2); }
.nl-dove { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.nl-dove .nl-ico { width: 17px; height: 17px; color: var(--accento-testo); }
.nl-dove b { color: var(--titoli); }
.nl-lista-voci { padding: 6px 8px; display: grid; }
.nl-lista-voci a, .nl-lista-voci button {
  display: flex; align-items: center; gap: 14px; padding: 15px 12px; border: 0; border-bottom: 1px solid var(--linea);
  background: none; text-align: left; color: var(--titoli); text-decoration: none; font-weight: 600; font-size: 1rem; width: 100%;
}
.nl-lista-voci > :last-child { border-bottom: 0; }
.nl-lista-voci .nl-ico { color: var(--accento-testo); }
.nl-lista-voci span { flex: 1; }
.nl-lista-voci .nl-ico-freccia { color: var(--testo-3); width: 18px; height: 18px; }

/* ---------------------------------------------------------------- finestre di conferma */
.nl-dialogo {
  width: min(440px, calc(100% - 32px)); border: 0; border-radius: 28px; padding: 32px 28px 24px; box-shadow: var(--ombra-3);
  text-align: center; color: var(--testo);
}
.nl-dialogo[open] { display: grid; gap: 12px; justify-items: center; animation: nl-su .4s var(--ease) both; }
.nl-dialogo::backdrop { background: rgba(42, 8, 20, .42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes nl-su { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.nl-dialogo h3 { font-size: 1.7rem; letter-spacing: -.03em; }
.nl-dialogo p { color: var(--testo-2); }
.nl-dialogo-segno { width: 60px; height: 60px; border-radius: 999px; background: var(--ok-fondo); color: var(--ok); display: grid; place-items: center; }
.nl-dialogo-segno .nl-ico { width: 30px; height: 30px; stroke-width: 2.4; }
.nl-dialogo-azioni { display: grid; gap: 10px; width: 100%; margin-top: 8px; }
.nl-dialogo-azioni .nl-link { justify-self: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* ================================================================ il pannello di Alessia dentro Nexorat Live
   Le sezioni di prima (WhatsApp, Social, Prova, Impostazioni, Pubblicazione, montaggio) tengono le loro classi:
   qui prendono le forme di Nexorat Live (carte bianche arrotondate, pulsanti a pillola, DM Sans). Le sezioni nuove
   (Inizio, Richieste, Prestazioni, Nuovo, Altro) usano direttamente le classi nl-. */

/* le icone della barra laterale e delle schede sono SVG nella pagina: niente emoji (regola del 11/10/2026) */
.nl-ico { stroke-width: 1.8; }
.nl-voce-esterna::after {
  content: ''; width: 7px; height: 7px; border: solid var(--testo-3); border-width: 1.6px 1.6px 0 0; transform: rotate(45deg);
  margin-left: auto; flex: none; opacity: .8;
}
.nl-lato-piede strong { color: var(--testo-2); font-weight: 600; }
.nl-conta-nuove { background: var(--accento-testo); color: #fff !important; border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.nl-lista-voci small { display: block; font-weight: 400; color: var(--testo-2); font-size: .86rem; margin-top: 2px; }
.nl-lista-voci > a > span { display: grid; }
form > .nl-btn-largo { width: 100%; }
.nl-io form { margin: 0; }

/* il riquadro in primo piano: il vino del marchio con i cuori del logo, come le finestre di UNAT */
.nl-crea { background: linear-gradient(120deg, #3D0D1F 0%, #5A1530 55%, #7A2141 100%); }
.nl-crea-cuori img { position: absolute; width: auto; opacity: .16; }
.nl-crea-cuori img:nth-child(1) { height: 120%; right: -6%; top: -18%; transform: rotate(-12deg); }
.nl-crea-cuori img:nth-child(2) { height: 46%; right: 34%; bottom: -14%; transform: rotate(16deg); opacity: .11; }
.nl-crea-cuori img:nth-child(3) { height: 30%; right: 26%; top: 6%; transform: rotate(-24deg); opacity: .09; }
.nl-crea-cuori::after { background: linear-gradient(100deg, rgba(61, 13, 31, .96) 30%, rgba(61, 13, 31, .72) 62%, rgba(61, 13, 31, .30) 100%); }
.nl-tipo-ico { background: rgba(242, 167, 189, .2); color: #F2A7BD; }
.nl-tipo-testo b { font-variant-numeric: tabular-nums; }
.nl-saluto .nl-sotto { margin-top: 6px; }

/* i numeri dell'inizio, con il colore dello stato quando serve attenzione */
.nl-numero-allarme strong { color: var(--accento-testo); }

/* le ultime richieste dell'inizio: nome e stato sulla stessa riga, landing e quando sotto */
.ul-elenco { display: grid; }
.ul-voce { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: inherit; }
.ul-voce:last-child { border-bottom: 0; }
.ul-nome { font-weight: 700; color: var(--titoli); overflow-wrap: anywhere; }
.ul-nome small { font-weight: 500; color: var(--testo-2); margin-left: 6px; font-size: .86rem; }
.ul-voce:hover .ul-nome { color: var(--accento-testo); }
.ul-voce .st { justify-self: end; }
.ul-meta { grid-column: 1 / -1; color: var(--testo-2); font-size: .84rem; }

/* collegamenti: una riga per servizio, con la spia */
.nl-coll { display: grid; }
.nl-coll > div { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.nl-coll > div:last-child { border-bottom: 0; }
.nl-coll strong { color: var(--titoli); min-width: 92px; }
.nl-coll span { color: var(--testo-2); font-size: .92rem; overflow-wrap: anywhere; }
.nl-spia { flex: none; width: 10px; height: 10px; border-radius: 999px; background: #D9C6CE; }
.nl-spia-ok { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-fondo); }
.nl-spia-attesa { background: #C9971C; box-shadow: 0 0 0 4px var(--attesa-fondo); }

/* ---------------------------------------------------------------- Richieste (le persone delle landing) */
.rq-testa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; }
.rq-azioni-testa { display: flex; flex-wrap: wrap; gap: 10px; }
.rq-filtri { display: grid; gap: 12px; }
.rq-radice { display: grid; gap: 18px; }
.rq-chips { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.rq-chips::-webkit-scrollbar { display: none; }
.rq-chips button { flex: none; }
@media (min-width: 900px) { .rq-chips { flex-wrap: wrap; overflow: visible; } }
.rq-elenco { display: grid; gap: 12px; }
.rq {
  background: var(--carta); border-radius: 22px; box-shadow: var(--ombra-1); padding: 18px 20px; display: grid; gap: 12px;
  border: 1px solid transparent; transition: border-color .2s;
}
.rq[data-nuova="1"] { border-color: var(--primario-bordo); }
.rq-capo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; }
.rq-nome { font-size: 1.08rem; font-weight: 700; color: var(--titoli); letter-spacing: -.012em; overflow-wrap: anywhere; }
.rq-nome small { font-weight: 500; color: var(--testo-2); font-size: .9rem; margin-left: 6px; }
.rq-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; color: var(--testo-2); font-size: .86rem; }
.rq-quando { color: var(--testo-3); font-size: .84rem; white-space: nowrap; }
.rq-recupero { color: var(--testo); font-size: .95rem; }
.rq-recupero b { color: var(--titoli); }
.rq-riga { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 640px) { .rq-riga { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); } }
.rq-bottoni { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-bottoni .nl-btn { min-height: 40px; padding: 0 16px; }
.rq select.rq-stato { min-height: 42px; font-weight: 600; border-radius: 999px; padding-left: 16px; }
.rq-dettagli { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
.rq-dettagli[hidden] { display: none !important; }
.rq-dati { display: grid; gap: 0; margin: 0; }
.rq-dati > div { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 4px 14px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.rq-dati > div:last-child { border-bottom: 0; }
.rq-dati dt { font-weight: 600; color: var(--testo-2); font-size: .86rem; }
.rq-dati dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 520px) { .rq-dati > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.rq-note textarea { min-height: 76px; }
.rq-note-stato { font-size: .82rem; color: var(--testo-3); min-height: 1.2em; }
.rq-fondo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rq-altre { justify-self: center; }
.rq-vuoto { padding: 28px 22px; text-align: center; color: var(--testo-2); background: var(--carta); border-radius: 22px; box-shadow: var(--ombra-1); }

/* il foglio delle richieste (30/10/2026): la tabella dei pannelli di prima, che Alessia rivoleva, in sei colonne perché
   stia nella pagina; sul telefono ogni riga diventa una scheda con le etichette a sinistra, come allora */
.rq-azioni-testa { align-items: center; }
.rq-foglio { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); overflow-x: auto; }
.rq-foglio table { border-collapse: collapse; width: 100%; font-size: .9rem; line-height: 1.45; }
.rq-foglio th, .rq-foglio td { padding: 12px 10px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.rq-foglio th:first-child, .rq-foglio td:first-child { padding-left: 16px; }
.rq-foglio th:last-child, .rq-foglio td:last-child { padding-right: 16px; }
.rq-foglio th { background: var(--tenue); color: var(--testo-2); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.rq-foglio tbody tr:last-child td { border-bottom: 0; }
.rq-foglio tr[data-nuova="1"] td:first-child { box-shadow: inset 3px 0 0 var(--primario-bordo); }
.rq-foglio td > div { display: grid; gap: 3px; justify-items: start; overflow-wrap: break-word; }
.rq-foglio b { color: var(--titoli); }
.rq-f-piccolo { font-size: .8rem; color: var(--testo-2); }
.rq-f-piccolo b { font-weight: 700; }
.rq-f-contatti a { max-width: 100%; overflow-wrap: anywhere; }
.rq-f-tel { white-space: nowrap; }
.rq-f-dove > div { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.rq-f-dove .rq-f-piccolo { flex-basis: 100%; }
.rq-f-situazione p { margin: 2px 0 0; white-space: pre-wrap; }
.rq-f-gestione > div { gap: 8px; justify-items: stretch; }
.rq-foglio select.rq-stato { min-height: 38px; width: 100%; border-radius: var(--raggio-s); font-weight: 600; padding-left: 12px; }
.rq-foglio textarea { width: 100%; min-height: 60px; }
.rq-foglio .rq-note-stato:empty { display: none; }
.rq-f-nota { margin: 0; white-space: pre-wrap; color: var(--testo-2); }
.rq-f-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rq-f-azioni .nl-btn { min-height: 36px; padding: 0 14px; white-space: nowrap; }
@media (min-width: 761px) {
  .rq-foglio tbody tr:hover td { background: var(--fondo); }
  .rq-f-data > div { white-space: nowrap; }
  .rq-f-nome > div { min-width: 120px; max-width: 180px; }
  .rq-f-contatti > div { min-width: 140px; max-width: 200px; }
  .rq-f-dove > div { min-width: 104px; max-width: 150px; }
  .rq-f-situazione > div { min-width: 200px; }
  .rq-f-gestione > div { width: 220px; }
}
@media (max-width: 760px) {
  .rq-foglio { background: none; border: 0; border-radius: 0; overflow: visible; }
  .rq-foglio table, .rq-foglio tbody { display: block; }
  .rq-foglio thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rq-foglio tbody tr { display: block; background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 6px 16px; margin-bottom: 12px; }
  .rq-foglio tbody tr[data-nuova="1"] { border-color: var(--primario-bordo); }
  .rq-foglio tr[data-nuova="1"] td:first-child { box-shadow: none; }
  .rq-foglio td, .rq-foglio td:first-child, .rq-foglio td:last-child { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 10px 0; }
  .rq-foglio tbody tr td:last-child { border-bottom: 0; }
  .rq-foglio td::before { content: attr(data-l); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--testo-3); padding-top: 3px; }
  .rq-foglio td > div { min-width: 0; }
  .rq-f-data > div { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; }
  .rq-foglio td.rq-f-gestione { display: block; }
  .rq-foglio td.rq-f-gestione::before { content: none; }
}

/* gli stati delle richieste: gli stessi nomi e quasi gli stessi colori del pannello di prima, perché Alessia li riconosce */
.st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; background: #F3ECEF; color: #5A4650; }
.st::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: .85; }
[data-stato="Nuovo"] { --st-f: #FADCE5; --st-t: #8E2A4E; }
[data-stato="Scritto"] { --st-f: #ECE4F6; --st-t: #5B3E8C; }
[data-stato="Contattato"] { --st-f: #E1EBF7; --st-t: #2D5687; }
[data-stato="Follow-up 1"] { --st-f: #F7EDCB; --st-t: #7A5A00; }
[data-stato="Follow-up 2"] { --st-f: #F1E2AE; --st-t: #6E5000; }
[data-stato="Appuntamento"] { --st-f: #F7E8CF; --st-t: #7A4E10; }
[data-stato="Conoscitiva"] { --st-f: #D7EEE9; --st-t: #1E6458; }
[data-stato="Cliente"] { --st-f: #DDF1E2; --st-t: #1F6B3A; }
[data-stato="Valentina"] { --st-f: #EEDDEC; --st-t: #73386C; }
[data-stato="Non adatto"] { --st-f: #F4E1E4; --st-t: #8A3A47; }
.st[data-stato] { background: var(--st-f); color: var(--st-t); }
select.rq-stato[data-stato] { background-color: var(--st-f); color: var(--st-t); border-color: transparent; }
.rq-landing { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: var(--tenue); color: var(--accento-testo); border: 1px solid var(--linea); }
.rq-pagato { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: var(--ok-fondo); color: var(--ok); }
.nl-btn-wa { background: #E3F6EA; border-color: #9DD7B3; color: #11643A; }
.nl-btn-wa:hover { background: #D2F0DD; border-color: #5FBF85; color: #0B532F; }
.nl-btn-wa .nl-ico { color: #128C4A; }

/* ---------------------------------------------------------------- Prestazioni (l'archivio, salvato sul server) */
.pr-elenco { display: grid; }
.pr-voce { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.pr-voce:last-child { border-bottom: 0; }
.pr-titolo { font-weight: 700; color: var(--titoli); text-decoration: none; overflow-wrap: anywhere; }
a.pr-titolo:hover { color: var(--accento-testo); }
.pr-meta { color: var(--testo-2); font-size: .86rem; }
.pr-totale { font-weight: 700; color: var(--titoli); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.pr-azioni { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 760px) {
  .pr-voce { grid-template-columns: minmax(0, 1fr) 120px auto; }
  .pr-azioni { grid-column: 3; grid-row: 1 / span 2; }
  .pr-totale { grid-row: 1 / span 2; grid-column: 2; }
}
.pr-azioni .nl-btn { min-height: 36px; padding: 0 14px; font-size: .88rem; }

/* le righe dei titoli grandi non si toccano mai (errore n. 55: con DM Sans 700 serve almeno 1,08 fra una base e l'altra) */
.nl-titolo-grande, .nl-titolo, .nl-crea h3 { line-height: 1.1; }

/* ================================================================ le sezioni di prima, nelle forme di Nexorat Live */
#vista { outline: none; }
.nl-viste { display: grid; gap: 20px; align-content: start; padding-bottom: 8px; }
.nl-viste > * { min-width: 0; }
.nl-viste.nl-entra { animation: nl-entra .35s var(--ease) both; }
.nl-viste > h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); line-height: 1.1; letter-spacing: -.028em; margin-top: 2px; }
.nl-viste > h2 + p.nota, .nl-viste > h2 + .consiglio { margin-top: -8px; }
h3 { font-size: 1.16rem; letter-spacing: -.015em; }
h4 { font-size: 1rem; }

.blocco { background: var(--carta); border-radius: var(--raggio); box-shadow: var(--ombra-1); padding: 22px 24px; min-width: 0; }
@media (max-width: 520px) { .blocco { padding: 18px 16px; border-radius: 20px; } }
.blocco > h3 { margin-bottom: 12px; }
.blocco h4 { margin: 20px 0 8px; font-size: 1rem; }
.griglia-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.griglia-2 > * { min-width: 0; }
@media (min-width: 1000px) { .griglia-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

:where(.blocco, .social-voce, .esempio, .esempio-chat, .pub-voce, .pub-impostazioni, .video-editor, .simulatore) label {
  display: block; margin-top: 14px; font-weight: 600; font-size: .9rem; color: var(--titoli);
}
:where(.blocco, .social-voce, .esempio, .esempio-chat, .pub-voce, .pub-impostazioni, .video-editor, .simulatore) label > :is(input, select, textarea) {
  margin-top: 6px; font-weight: 400; color: var(--testo);
}
textarea { min-height: 96px; }
.nota { font-size: .88rem; color: var(--testo-2); line-height: 1.5; }
.vuoto { color: var(--testo-2); text-align: center; padding: 30px 0; }
.etichetta { font-size: .9rem; font-weight: 600; color: var(--titoli); margin: 16px 0 6px; }
label .aiuto, .aiuto { display: block; margin-top: 6px; font-weight: 400; font-size: .84rem; color: var(--testo-2); }
.testo-lungo { white-space: pre-wrap; font-size: .96rem; }
.riepilogo-titolo { display: block; font-weight: 700; color: var(--titoli); margin-top: 12px; }
.riepilogo-titolo:first-child { margin-top: 0; }

/* pulsanti di prima = pulsanti a pillola */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--linea-forte); background: var(--carta); color: var(--titoli);
  font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .25s var(--ease), transform .15s var(--ease);
}
.btn:hover { border-color: var(--accento-testo); color: var(--accento-testo); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn-pieno { background: var(--primario); border: 1.5px solid var(--primario-bordo); color: var(--notte); box-shadow: 0 2px 20px rgba(0, 0, 0, .07); }
.btn-pieno:hover { background: var(--primario-forte); border-color: var(--primario-bordo); color: var(--notte); box-shadow: 0 8px 24px -10px rgba(177, 60, 98, .6); }
.btn-verde { background: var(--ok-fondo); border-color: #9DD7B3; color: var(--ok); }
.btn-verde:hover { border-color: var(--ok); color: var(--ok); }
.btn-rosso { color: var(--errore); border-color: rgba(179, 38, 30, .35); }
.btn-rosso:hover { color: var(--errore); border-color: var(--errore); background: var(--errore-fondo); }
.btn-piccolo { min-height: 36px; padding: 0 14px; font-size: .86rem; }
.btn .nl-ico { width: 18px; height: 18px; }
.riga-btn { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
@media (max-width: 520px) { .riga-btn .btn { white-space: normal; text-align: center; } }

/* avvisi dentro le schede */
.consiglio { background: var(--tenue); border: 1px solid var(--linea); color: var(--testo); border-radius: 20px; padding: 16px 18px; }
.consiglio strong { display: block; margin-bottom: 4px; color: var(--titoli); }
.allarme { background: var(--errore-fondo); border: 1px solid rgba(179, 38, 30, .22); color: var(--errore); border-radius: 20px; padding: 16px 18px; }
.allarme strong { color: var(--errore); }
.errore { background: var(--errore-fondo); color: var(--errore); padding: 10px 14px; border-radius: 12px; font-size: .9rem; font-weight: 500; }
.nota-errore { color: var(--errore); font-size: .86rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.video-giusto { display: inline-block; margin-top: 8px; background: var(--carta); border: 1.5px solid var(--primario-bordo); color: var(--accento-testo); border-radius: 12px; padding: 6px 12px; font-weight: 700; }

/* gettoni (stato, età, gruppo) */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #F3ECEF; color: #5A4650; }
.badge.rosso { background: var(--errore-fondo); color: var(--errore); }
.badge.giallo { background: var(--attesa-fondo); color: var(--attesa); }
.badge.verde { background: var(--ok-fondo); color: var(--ok); }
.badge.blu { background: #E7EEF9; color: #2D4F86; }
.badge.rosa { background: var(--attivo); color: var(--accento-testo); }
.badge.rosso::before, .badge.giallo::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }

/* le viste dei contatti WhatsApp: gettoni in fila che scorrono sul telefono */
.chip-riga { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.chip-riga::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .chip-riga { flex-wrap: wrap; overflow: visible; } }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--linea-forte); background: var(--carta); color: var(--titoli); font-weight: 600; font-size: .88rem; white-space: nowrap;
}
.chip b { font-weight: 600; color: var(--testo-3); font-variant-numeric: tabular-nums; }
.chip.attivo { background: var(--attivo); border-color: transparent; color: var(--notte); }
.chip.attivo b { color: var(--accento-testo); }
.chip.allarme b { background: var(--accento-testo); color: #fff; border-radius: 999px; padding: 1px 8px; }
.filtri { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filtri input[type="search"] { flex: 1; min-width: 200px; border-radius: 999px; padding-left: 18px; }
.segmenti { display: inline-flex; border: 1px solid var(--linea-forte); border-radius: 999px; overflow: hidden; background: var(--carta); }
.segmenti button { border: 0; background: none; padding: 0 14px; min-height: 42px; font-size: .88rem; font-weight: 600; color: var(--titoli); }
.segmenti button.attivo { background: var(--attivo); color: var(--notte); }

/* elenchi di persone: righe dentro una carta */
.lista { display: grid; background: var(--carta); border-radius: var(--raggio); box-shadow: var(--ombra-1); padding: 4px 20px; }
.lista:empty { display: none; }
.lista > .vuoto { padding: 26px 0; }
.voce { display: block; padding: 14px 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: inherit; }
.voce:last-child { border-bottom: 0; }
.voce:hover .voce-nome { color: var(--accento-testo); }
.voce-testa { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.voce-nome { font-weight: 700; color: var(--titoli); overflow-wrap: anywhere; }
.voce-quando { font-size: .82rem; color: var(--testo-3); white-space: nowrap; }
.voce-sotto { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.gruppo-video { padding: 12px 0 4px; }
.gruppo-video h3 { font-size: 1rem; }
.gruppo-video h3 small { display: block; font-weight: 500; color: var(--testo-2); font-size: .86rem; margin-top: 2px; }

/* la scheda di una persona */
.indietro { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--accento-testo); }
.indietro::before { content: ''; width: 8px; height: 8px; border: solid currentColor; border-width: 0 0 1.8px 1.8px; transform: rotate(45deg); margin-left: 2px; }
.scheda-testa { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; }
.scheda-testa h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); letter-spacing: -.028em; line-height: 1.1; overflow-wrap: anywhere; }
.scheda-testa .riga-btn { margin-top: 4px; }
dl.dati { display: grid; grid-template-columns: minmax(120px, 40%) minmax(0, 1fr); gap: 8px 14px; margin: 12px 0 0; font-size: .92rem; }
dl.dati dt { color: var(--testo-2); font-weight: 600; }
dl.dati dd { margin: 0; overflow-wrap: anywhere; }
.cronologia { font-size: .86rem; color: var(--testo-2); display: grid; gap: 6px; max-height: 280px; overflow-y: auto; }

/* la conversazione */
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 540px; overflow-y: auto; padding: 6px 2px; }
.bolla { max-width: 85%; padding: 10px 14px; border-radius: 18px; font-size: .95rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.bolla.in { align-self: flex-start; background: var(--carta); border: 1px solid var(--linea); border-bottom-left-radius: 6px; }
.bolla.out { align-self: flex-end; background: var(--primario); border-bottom-right-radius: 6px; color: var(--notte); }
.bolla.out.alessia { background: var(--ok-fondo); }
.bolla small { display: block; font-size: .72rem; color: var(--testo-3); margin-top: 4px; }
.bolla .err { color: var(--errore); font-weight: 600; }

/* social */
.social-voce { background: var(--tenue); border: 1px solid var(--linea); border-radius: 20px; padding: 16px 18px; margin: 12px 0 0; }
.social-voce .citazione { background: var(--carta); border-radius: 14px; padding: 10px 14px; margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.interruttore { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linea); margin-top: 0 !important; cursor: pointer; }
.interruttore:last-child { border-bottom: 0; }
.interruttore > span { font-weight: 600; color: var(--titoli); }
.interruttore small { display: block; font-weight: 400; color: var(--testo-2); font-size: .84rem; margin-top: 2px; }
.interruttore input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 50px; height: 30px; margin: 0; border-radius: 999px;
  background: #DCCBD2; cursor: pointer; transition: background-color .25s var(--ease);
}
.interruttore input[type="checkbox"]::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 999px; background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2); transition: transform .3s var(--ease);
}
.interruttore input[type="checkbox"]:checked { background: var(--accento-testo); }
.interruttore input[type="checkbox"]:checked::after { transform: translateX(20px); }
.interruttore input[type="checkbox"]:focus-visible { outline: 2px solid var(--accento-testo); outline-offset: 3px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accento-testo); }
.parola { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin: 8px 0; }
@media (max-width: 560px) { .parola { grid-template-columns: minmax(0, 1fr) auto auto; } .parola input[data-campo="dm"] { grid-column: 1 / -1; order: 3; } }
.parola input[type="checkbox"] { width: 20px; height: 20px; }
.voce-elenco { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 8px 0; }
.esempio { border: 1px solid var(--linea); border-radius: 18px; padding: 4px 16px 14px; margin: 12px 0; background: var(--tenue); }
.esempio textarea { min-height: 64px; }

/* prova */
.simulatore { display: flex; flex-direction: column; gap: 12px; }
.simulatore > label { margin-top: 0; }
.simulatore .chat { min-height: 260px; background: #F6EEF1; border-radius: 18px; padding: 12px; }
.scrivi { display: flex; gap: 8px; }
.scrivi input { flex: 1; }

/* impostazioni */
.giorni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.giorni label { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; border: 1px solid var(--linea-forte); border-radius: 999px; padding: 7px 12px; background: var(--carta); color: var(--titoli); font-weight: 500; }
.giorni input { width: auto; margin: 0; }
.stato-coll { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: .94rem; }
.stato-coll:last-child { border-bottom: 0; }
.stato-coll strong { color: var(--titoli); }
.stato-coll > span:last-child { color: var(--testo-2); text-align: right; overflow-wrap: anywhere; }
.salva-fisso { position: sticky; bottom: calc(var(--schede-h) + env(safe-area-inset-bottom) + 12px); z-index: 20; display: flex; justify-content: flex-end; }
.salva-fisso .btn { box-shadow: 0 12px 30px -12px rgba(177, 60, 98, .75); }
@media (min-width: 1024px) { .salva-fisso { bottom: 18px; } }

/* il messaggio che compare e sparisce */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--schede-h) + env(safe-area-inset-bottom) + 14px); transform: translateX(-50%); z-index: 200;
  background: var(--notte); color: #fff; padding: 12px 18px; border-radius: 16px; font-size: .92rem; font-weight: 500;
  max-width: calc(100% - 32px); box-shadow: 0 16px 36px -12px rgba(42, 8, 20, .55);
}
.toast.errore { background: var(--errore); }
@media (min-width: 1024px) { .toast { bottom: 26px; left: calc(50% + var(--lato) / 2); } }

/* ---------------------------------------------------------------- montaggio di prima (#video/prima, per qualche giorno) */
.video-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 1100px) { .video-editor { grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); align-items: start; } .video-editor > .video-colonna:first-child { position: sticky; top: calc(var(--barra-h) + 16px); } }
.video-colonna { min-width: 0; }
.anteprima-cornice { background: #000; border-radius: 20px; overflow: hidden; box-shadow: var(--ombra-2); aspect-ratio: 9 / 16; max-height: 72vh; margin: 0 auto; }
.anteprima { display: block; width: 100%; height: 100%; }
.video-colonna input[type="range"] { padding: 0; margin: 8px 0; min-height: 0; accent-color: var(--accento-testo); }
.effetto { border: 1px solid var(--linea); border-radius: 16px; padding: 12px 14px; margin: 8px 0; background: var(--carta); }
.effetto.spento { opacity: .55; }
.effetto-testa { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.effetto .riga-btn { margin-top: 8px; }
.effetto select { width: auto; }
.spunta { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; font-weight: 600; color: var(--titoli); }
.spunta input { width: auto; }
.aggiungi-effetto { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
.riga-sottotitolo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; margin: 6px 0; }
.sottotitoli { max-height: 420px; overflow: auto; padding-right: 4px; }
.riga-taglio { display: flex; margin: 6px 0; font-weight: 500; }
.risultato { width: 100%; max-width: 300px; border-radius: 16px; display: block; margin: 10px 0; background: #000; }
details.preferenze { margin: 12px 0; }
details.preferenze summary { cursor: pointer; font-weight: 600; color: var(--testo-2); font-size: .92rem; }
.video-nascosto { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: .01; pointer-events: none; }
textarea.incolla-chat { min-height: 150px; }
textarea.guida-stile { min-height: 180px; }
.esempio-chat { border: 1px solid var(--linea); border-radius: 18px; padding: 12px 14px; margin: 12px 0; background: var(--carta); }
.esempio-chat label { margin-top: 8px; }
.chat.chat-esempio { max-height: 300px; margin-top: 8px; background: var(--tenue); border-radius: 14px; padding: 8px; }
.anteprime-chat:empty { display: none; }
.chat-ia { display: grid; gap: 8px; }
.chat-ia .chat { max-height: 300px; background: var(--tenue); border-radius: 14px; padding: 8px; }
.chat-ia .chat:empty { display: none; }
.chat-ia textarea { min-height: 70px; }

/* ---------------------------------------------------------------- pubblicazione programmata */
.nascosto { display: none; }
.pub-scelte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin-bottom: 12px; }
.pub-scelte label { margin: 0; }
.pub-trascina {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 24px 16px; border: 1.5px dashed var(--linea-forte);
  border-radius: 18px; background: var(--carta); cursor: pointer; text-align: center; color: var(--titoli); font-weight: 600;
}
.pub-trascina.sopra, .pub-trascina:hover { border-color: var(--accento-testo); background: #FDF4F7; }
.pub-trascina small { color: var(--testo-2); font-weight: 400; }
.pub-caricamenti { display: grid; gap: 6px; margin-top: 10px; }
.pub-caricamenti:empty { display: none; }
.pub-caricamento { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: .88rem; }
.pub-caricamento span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-caricamento progress { grid-column: 1 / -1; width: 100%; height: 6px; accent-color: var(--accento-testo); }
.pub-caricamento.errore small { color: var(--errore); }
.pub-voce { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; background: var(--carta); border-radius: 22px; padding: 18px; box-shadow: var(--ombra-1); }
@media (min-width: 760px) { .pub-voce { grid-template-columns: 200px minmax(0, 1fr); align-items: start; } }
.pub-anteprima { width: 100%; max-width: 220px; aspect-ratio: 9 / 16; object-fit: cover; background: #000; border-radius: 16px; margin: 0 auto; display: block; }
.pub-dati { min-width: 0; }
.pub-caption { min-height: 140px; }
.pub-quando { font-weight: 700; color: var(--accento-testo); margin: 6px 0; }
.pub-duplica { display: inline-flex; gap: 6px; align-items: center; max-width: 100%; }
.pub-duplica select { width: auto; min-width: 0; }
@media (max-width: 640px) { .pub-duplica { display: flex; width: 100%; } .pub-duplica select { flex: 1; } }
.pub-ritmo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
@media (min-width: 640px) { .pub-ritmo { grid-template-columns: 220px 110px minmax(0, 1fr); align-items: end; } }
.pub-ritmo label { margin: 0; }
.pub-istruzioni { min-height: 140px; }
.pub-impostazioni summary { cursor: pointer; font-weight: 700; color: var(--titoli); }
.sez-corta { display: none; }

/* l'accesso «revisore» dei revisori di Meta (22/10/2026): sul telefono due schede sole */
.nl-schede.nl-schede-due { grid-template-columns: repeat(2, 1fr); }

/* Pubblicazione, 26/10/2026: «Programma da sola», giorno e ora a mano, storie */
.pub-dove { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 12px; }
.pub-dove .etichetta { margin: 0; }
.pub-spunta { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
.pub-spunta input { width: 20px; height: 20px; accent-color: var(--primario-forte); }
.pub-orario { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pub-orario input { width: auto; min-width: 0; }
img.pub-anteprima { object-fit: cover; background: var(--fondo); }
/* ---------------------------------------------------------------- Clienti, scheda cliente e statistiche (21/10/2026) */
.cl-linee { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -8px 0 0; color: var(--testo-2); font-size: .9rem; }
.cl-linee > span { display: inline-flex; align-items: center; gap: 8px; }
.cl-conta { font-variant-numeric: tabular-nums; color: var(--testo-3); }
.cl-conta-allarme { color: var(--accento-testo); font-weight: 700; }
.cl-eta { font-weight: 500; color: var(--testo-2); font-size: .86rem; }
.cl-ultimo { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cl-segni { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; align-items: center; }
.cl-iniziale-allarme { background: var(--errore-fondo); color: var(--errore); }
.badge.cl-t-calda::before { background: #D9502F; }
.badge.cl-t-tiepida::before { background: #D29B16; }
.badge.cl-t-fredda::before { background: #7FA3C8; }
.ne-rif { font-size: .82rem; color: var(--testo-3); white-space: nowrap; }
.ne-colonna { display: grid; gap: 22px; align-content: start; min-width: 0; }
.cl-passo { margin-top: 12px; padding: 10px 12px; border-radius: var(--raggio-s); background: var(--tenue); }
.cl-chat { max-height: 620px; background: var(--fondo); border-radius: var(--raggio-s); padding: 10px; }
.cl-spazio { margin-top: 12px; }
.cl-aggiungi { margin-top: 12px; border-top: 1px solid var(--linea); padding-top: 12px; }
.cl-aggiungi summary { cursor: pointer; font-weight: 600; color: var(--accento-testo); }
.cl-aggiungi[open] summary { margin-bottom: 12px; }
.cl-campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 12px; }
@media (max-width: 520px) { .cl-campi { grid-template-columns: minmax(0, 1fr); } }
.cl-bozza:empty { display: none; }
/* grafici semplici: barre orizzontali con il valore scritto, colonne per giorni e ore */
.cl-barre { display: grid; gap: 8px; margin-top: 12px; }
.cl-barra { display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .88rem; }
.cl-barra-nome { color: var(--testo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-barra-binario { height: 10px; border-radius: 3px; background: var(--tenue); overflow: hidden; }
.cl-barra-pieno { display: block; height: 100%; background: var(--accento); border-radius: 3px; }
.cl-barra-valore { font-variant-numeric: tabular-nums; color: var(--titoli); font-weight: 600; white-space: nowrap; }
.cl-colonne { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; align-items: end; height: 150px; padding-bottom: 20px; position: relative; }
.cl-colonna { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.cl-colonna-pieno { display: block; background: var(--accento); border-radius: 2px 2px 0 0; min-height: 0; }
.cl-colonna-nome { position: absolute; top: calc(100% + 4px); left: 0; font-size: .68rem; color: var(--testo-3); white-space: nowrap; }
/* «Migliora il bot» (26/10/2026): le ultime risposte dell'assistente da valutare e correggere (public/migliora.js) */
.mg-voce { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio-l); padding: 14px 16px; margin: 0 0 14px; box-shadow: var(--ombra-1); }
.mg-voce.mg-no { border-color: var(--errore); }
.mg-voce.mg-ok { border-color: var(--ok); }
.mg-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; font-size: .9rem; color: var(--testo-2); }
.mg-testa a { font-weight: 600; color: var(--testo); }
.mg-quando { margin-left: auto; color: var(--testo-3); }
.mg-chat { max-height: none; overflow: visible; background: var(--fondo); border-radius: var(--raggio); padding: 10px; }
.mg-chat .bolla { font-size: .9rem; }
.mg-chat .bolla.mg-bot { box-shadow: 0 0 0 2px var(--primario-forte); }
.mg-esito { margin: 10px 0 0; display: grid; gap: 4px; font-size: .92rem; }
.mg-esito p { margin: 0; }
.mg-voce > .nl-riga { margin-top: 10px; }
.mg-form { display: grid; gap: 12px; margin-top: 12px; }
.mg-form textarea { min-height: 96px; }
.mg-frase { display: grid; gap: 8px; border: 1px dashed var(--linea-forte); border-radius: var(--raggio); padding: 10px 12px; }
.mg-frase .nl-nota { margin: 0; }
.mg-frase-dentro { display: grid; gap: 10px; }
.mg-correggi { display: inline-block; margin-left: 8px; color: inherit; text-decoration: underline; }
.mg-imparato { margin: 6px 0 24px; }
.mg-imparato summary { cursor: pointer; font-weight: 600; }
.mg-anteprima { white-space: pre-wrap; overflow-wrap: anywhere; font: .82rem/1.5 var(--f); background: var(--fondo); border-radius: var(--raggio); padding: 12px; }
/* ================================================================ 21/10/2026: le forme di nexEstate
   Simone: «il pannello di controllo di Alessia me lo rifai in stile a quello che abbiamo fatto di Immobilplace, così è tutto
   più serio e uniformato con tutti i pannelli di Nexorat». Stesse regole del gestionale nexEstate (~/nexestate-definitivo,
   tools/nexestate.css: «via il kit da modello» del 18/10/2026 e l'Inizio col riquadro scuro), nei colori di Alessia; sotto,
   le classi di prima del pannello (pulsanti, gettoni, liste, schede) portate alle stesse forme. In fondo apposta: vincono. */
/* ================================================================ 18/10/2026 sera: via il «kit da modello»
   Simone: «non ti sembra un po' ai slop la grafica del gestionale?». Resta la base di Nexorat Live (carattere, petrolio e
   terracotta, menu a sinistra), che vuole uguale in tutti i gestionali; cambiano le forme: angoli piccoli, schede senza ombra
   con un filo, pulsanti rettangolari, niente pillole, stati con un pallino e la parola, schede a linguetta sottolineata,
   numeri in una riga invece che nei riquadri. Queste regole stanno in fondo apposta: vincono su quelle sopra e sulla base. */
:root { --raggio: 12px; --raggio-s: 8px; --raggio-l: 14px; --ombra-1: none; }
body { background: var(--fondo); }
h1, h2, h3, h4 { line-height: 1.2; }
.nl-titolo { line-height: 1.15; letter-spacing: -.024em; }
.nl-vista { gap: 20px; }

/* schede: un filo al posto dell'ombra */
.nl-carta { border-radius: var(--raggio); box-shadow: none; border: 1px solid var(--linea); padding: 20px 22px; }
.nl-carta-testa { margin-bottom: 10px; }
.nl-carta h3, .nl-carta-testa h3 { font-size: 1.06rem; letter-spacing: -.01em; }

/* pulsanti: rettangolari, il principale pieno */
.nl-btn { border-radius: var(--raggio-s); min-height: 40px; padding: 0 16px; font-size: .92rem; }
.nl-btn:active { transform: none; }
.nl-btn-grande { min-height: 46px; padding: 0 22px; font-size: .98rem; }
.nl-btn-primario { background: var(--titoli); border: 1px solid var(--titoli); color: #FFFFFF; box-shadow: none; }
.nl-btn-primario:hover { background: var(--accento-testo); border-color: var(--accento-testo); color: #FFFFFF; box-shadow: none; }
.nl-pill { border-radius: 6px; padding: 5px 11px; font-size: .84rem; }
.nl-btn[aria-pressed="true"] { background: var(--attivo); border-color: var(--linea-forte); }

/* campi */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { min-height: 42px; padding: 9px 13px; }
select { padding-right: 38px; background-position: right 12px center; }
.nl-cerca input { border-radius: var(--raggio-s) !important; padding-left: 40px !important; }
.nl-cerca .nl-ico { left: 13px; }

/* menu a sinistra: voci rettangolari, «Nuovo» è il pulsante principale (uno solo: la barra in alto non c'è più sul computer) */
.nl-voce { border-radius: var(--raggio-s); padding: 7px 10px; gap: 10px; font-size: .94rem; }
.nl-voce .nl-ico { width: 18px; height: 18px; }
.nl-voce[aria-current="page"] { font-weight: 600; }
.nl-voce-nuovo { margin: 2px 0 10px; justify-content: center; gap: 8px; background: var(--titoli); border: 0; color: #FFFFFF; font-weight: 600; }
.nl-voce-nuovo > span:not(.nl-conta) { flex: none; }
.nl-voce-nuovo .nl-ico { color: #FFFFFF; }
.nl-voce-nuovo:hover, .nl-voce-nuovo[aria-current="page"] { background: var(--accento-testo); color: #FFFFFF; }
.nl-nav-titolo { margin: 14px 10px 4px; font-size: .76rem; }
.nl-io { background: none; border-radius: 0; padding: 4px 10px 14px; margin-bottom: 10px; border-bottom: 1px solid var(--linea); gap: 10px; }
.nl-avatar { width: 32px; height: 32px; font-size: .88rem; }
.nl-io .nl-pill { border: 0; background: none; padding: 4px 2px; color: var(--testo-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.nl-io .nl-pill:hover { color: var(--accento-testo); }

/* la barra in alto: sul computer non serve (il titolo è nella pagina, «Nuovo» nel menu); sul telefono resta com'era */
@media (min-width: 1024px) {
  .nl-barra { display: none; }
  .nl-viste { padding-top: 34px; }
}

/* i numeri in una riga, non nei riquadri */
.nl-numeri { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.nl-numero { display: inline-flex; align-items: baseline; gap: 6px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--testo-2); }
.nl-numero:hover { transform: none; box-shadow: none; color: var(--titoli); }
a.nl-numero:hover span { text-decoration: underline; text-underline-offset: 3px; }
.nl-numero strong { font-size: 1.02rem; line-height: 1.4; letter-spacing: -.01em; }
.nl-numero span { font-size: .92rem; }

/* schede a linguetta: sottolineate, non pillole */
.nl-chips:has(> button) { flex-wrap: nowrap; gap: 0 20px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--linea); }
.nl-chips:has(> button)::-webkit-scrollbar { display: none; }
.nl-chips button { flex: none; min-height: 0; padding: 8px 0 9px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--testo-2); white-space: nowrap; }
.nl-chips button:hover { color: var(--titoli); }
.nl-chips button[aria-pressed="true"] { background: none; color: var(--titoli); border-bottom-color: var(--titoli); }

/* gli stati: un pallino colorato e la parola */
.nl-stato, .nl-stato[data-stato] { background: none; padding: 0; border-radius: 0; gap: 6px; color: var(--testo-2); font-weight: 600; font-size: .8rem; }
.nl-stato::before { width: 8px; height: 8px; background: #2E9A62; animation: none !important; }
.nl-stato[data-stato="trattativa"]::before, .nl-stato[data-stato="programmato"]::before, .nl-stato[data-stato="da_fare"]::before { background: #D29B16; }
.nl-stato[data-stato="venduto"]::before, .nl-stato[data-stato="affittato"]::before { background: #3F6FB5; }
.nl-stato[data-stato="riservato"]::before { background: #8A5CC2; }
.nl-stato[data-stato="bozza"]::before, .nl-stato[data-stato="nuovo"]::before, .nl-stato[data-stato="ritirato"]::before,
.nl-stato[data-stato="annullata"]::before, .nl-stato[data-stato="sospeso"]::before { background: #9AA7AC; }
.ne-segno, .ne-segno-tenue { background: none; padding: 0; border-radius: 0; font-size: .8rem; font-weight: 600; }
.ne-segno { color: var(--accento-testo); }
.ne-segno-tenue { color: var(--testo-3); }
.ne-segno-allarme { color: var(--errore); }

/* annunci */
.ne-mini { border-radius: 6px; }
.nl-carica { border-radius: var(--raggio); }
.nl-carica .nl-ico { width: 28px; height: 28px; padding: 0; border-radius: 0; background: none; color: var(--accento-testo); }
.nl-blocco { grid-template-columns: 28px minmax(0, 1fr); gap: 14px; }
.nl-blocco-ico { width: 28px; height: 28px; border-radius: 0; background: none; }

/* le foto dell'annuncio: i comandi compaiono sopra la foto quando ci si passa (sul telefono restano sotto) */

/* finestre, messaggi */
.nl-dialogo { border-radius: 16px; padding: 28px 24px 22px; }
.nl-dialogo h3 { font-size: 1.35rem; letter-spacing: -.02em; }
.toast { border-radius: 10px; }

/* l'accesso: fondo pieno, niente alone */
.nl-ingresso { background: var(--fondo); }
.nl-accesso { border-radius: 16px; box-shadow: 0 1px 2px rgba(42, 8, 20, .05); border: 1px solid var(--linea); }

/* portali e Photo Lab */
.nl-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.nl-pill .nl-ico { width: 16px; height: 16px; }
a.nl-pill { text-decoration: none; }
/* la barra in basso del telefono è piena: il testo che scorre sotto non si vede in trasparenza */
.nl-schede { background: var(--carta); }


/* ---------------------------------------------------------------- righe degli elenchi (come nexEstate) */
.ne-righe { display: grid; }
.ne-riga {
  display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--linea); color: var(--testo);
  text-decoration: none; min-width: 0;
}
.ne-righe > :last-child { border-bottom: 0; }
a.ne-riga:hover .ne-riga-titolo { color: var(--accento-testo); }
.ne-riga-testo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ne-riga-titolo { font-weight: 600; color: var(--titoli); overflow-wrap: anywhere; }
.ne-riga-sotto { font-size: .86rem; color: var(--testo-2); overflow-wrap: anywhere; }
.ne-riga-destra { flex: none; display: flex; align-items: center; gap: 8px; }
.ne-iniziale { flex: none; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--tenue); color: var(--accento-testo); font-weight: 700; }
.ne-mini { flex: none; width: 64px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--tenue); }
.ne-mini img { width: 100%; height: 100%; object-fit: cover; }
.ne-segno { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--primario); color: var(--notte); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.ne-segno-tenue { background: var(--tenue); color: var(--testo-2); }

/* ================================================================ 18/10/2026 sera: Inizio di nuovo com'era
   Simone, viste le foto prima/dopo: «queste tre grafiche erano più belle prima, quindi rimettile come erano prima» (Inizio da
   computer, da telefono e scuro). Dentro .ne-inizio tornano le misure e le ombre di prima: il riquadro scuro col nome e le
   tessere, i riquadri coi numeri, le schede tonde con l'ombra, i segni pieni. Sul telefono tornano anche la barra in alto col
   titolo e il «+» tondo, e il «+» tondo in basso. Il resto del pannello resta col ritocco (Annunci e schede gli vanno bene). */
.ne-inizio { --raggio: 24px; --raggio-s: 14px; --raggio-l: 32px; --ombra-1: 0 1px 2px rgba(42, 8, 20, .04), 0 2px 20px rgba(42, 8, 20, .05); gap: 22px; }
.ne-inizio h3 { line-height: 1.15; }
.ne-inizio .nl-carta { border: 0; box-shadow: var(--ombra-1); padding: 24px; }
.ne-inizio .nl-carta-testa { margin-bottom: 14px; }
.ne-inizio .nl-carta h3, .ne-inizio .nl-carta-testa h3 { font-size: 1.16rem; letter-spacing: -.015em; }
.ne-inizio .nl-numeri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .ne-inizio .nl-numeri { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ne-inizio .nl-numero { display: grid; align-items: stretch; gap: 2px; padding: 18px 20px; border-radius: 22px; background: var(--carta); box-shadow: var(--ombra-1); color: var(--testo-2); transition: transform .2s var(--ease), box-shadow .2s; }
.ne-inizio .nl-numero:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); color: var(--testo-2); }
.ne-inizio a.nl-numero:hover span { text-decoration: none; }
.ne-inizio .nl-numero strong { font-size: 2.1rem; line-height: 1.05; letter-spacing: -.03em; }
.ne-inizio .nl-numero span { font-size: .9rem; }
.ne-inizio .ne-segno { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--primario); color: var(--notte); font-size: .78rem; font-weight: 700; }
.ne-inizio .ne-segno-tenue { background: var(--tenue); color: var(--testo-2); }
.ne-inizio .ne-mini { border-radius: 10px; }
body:has(.ne-inizio) { background: linear-gradient(180deg, var(--fondo) 0, var(--fondo) 260px, #F8EEF2 900px, #FFFFFF 1600px); background-color: var(--fondo); }
/* la barra in alto e le schede in basso del telefono, come prima */
.nl-barra-marchio { box-shadow: 0 1px 2px rgba(42, 8, 20, .04), 0 2px 20px rgba(42, 8, 20, .05); }
.nl-barra-nuovo { border-radius: 999px; background: var(--primario); border: 1.5px solid var(--primario-bordo); color: var(--notte); box-shadow: 0 2px 20px rgba(0, 0, 0, .07); }
.nl-barra-nuovo:hover { background: var(--primario-forte); border-color: var(--primario-bordo); color: var(--notte); box-shadow: 0 8px 24px -10px rgba(177, 60, 98, .65); }
.nl-barra-nuovo { min-height: 40px; padding: 0 14px; }
@media (max-width: 520px) { .nl-barra-nuovo { width: 40px; padding: 0; } }

/* ---------------------------------------------------------------- le classi di prima nelle forme di nexEstate */
.btn { border-radius: var(--raggio-s); min-height: 40px; padding: 0 16px; font-size: .92rem; }
.btn:active { transform: none; }
.btn-pieno { background: var(--titoli); border: 1px solid var(--titoli); color: #FFFFFF; box-shadow: none; }
.btn-pieno:hover { background: var(--accento-testo); border-color: var(--accento-testo); color: #FFFFFF; box-shadow: none; }
.btn-piccolo { min-height: 34px; padding: 0 12px; font-size: .86rem; }
.blocco { border-radius: var(--raggio); box-shadow: none; border: 1px solid var(--linea); padding: 20px 22px; }
@media (max-width: 520px) { .blocco { padding: 16px; border-radius: var(--raggio); } }
.lista { border-radius: var(--raggio); box-shadow: none; border: 1px solid var(--linea); padding: 0 18px; }
.consiglio, .allarme { border-radius: var(--raggio-s); }
.social-voce, .esempio, .esempio-chat, .effetto { border-radius: var(--raggio-s); }
.pub-voce, .rq, .rq-vuoto { border-radius: var(--raggio); box-shadow: none; border: 1px solid var(--linea); }
.rq[data-nuova="1"] { border-color: var(--primario-bordo); }
.rq select.rq-stato { border-radius: var(--raggio-s); }
.pub-trascina { border-radius: var(--raggio); }
.filtri input[type="search"] { border-radius: var(--raggio-s); }
.toast { border-radius: 10px; }
.giorni label { border-radius: var(--raggio-s); }
.video-giusto { border-radius: var(--raggio-s); }
/* gettoni e stati: un pallino e la parola */
.badge, .badge.rosa, .badge.blu, .badge.verde, .st, .st[data-stato] { background: none; padding: 0; border-radius: 0; gap: 6px; color: var(--testo-2); font-weight: 600; font-size: .8rem; }
.badge::before, .st::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 999px; background: #B7A9AF; opacity: 1; }
.badge.rosa::before { background: var(--accento); }
.badge.verde::before { background: #2E9A62; }
.badge.blu::before { background: #3F6FB5; }
.badge.giallo { background: none; padding: 0; color: var(--attesa); }
.badge.giallo::before { background: #D29B16; }
.badge.rosso { background: none; padding: 0; color: var(--errore); }
.badge.rosso::before { background: var(--errore); }
.st[data-stato]::before { background: var(--st-t); }
.rq-landing, .rq-pagato { border-radius: 6px; }
/* le viste come linguette sottolineate */
.chip-riga { flex-wrap: nowrap; gap: 0 20px; overflow-x: auto; border-bottom: 1px solid var(--linea); padding: 0; }
@media (min-width: 900px) { .chip-riga { flex-wrap: nowrap; overflow-x: auto; } }
.chip { min-height: 0; padding: 8px 0 9px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--testo-2); }
.chip:hover { color: var(--titoli); }
.chip.attivo { background: none; color: var(--titoli); border-bottom-color: var(--titoli); }
.chip.allarme b { border-radius: 6px; padding: 0 6px; }
.segmenti { border-radius: var(--raggio-s); }
.rq-chips { gap: 0 20px; border-bottom: 1px solid var(--linea); padding: 0; }
.rq-chips button { min-height: 0; padding: 8px 0 9px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--testo-2); box-shadow: none; }
.rq-chips button[aria-pressed="true"] { background: none; color: var(--titoli); border-bottom-color: var(--titoli); }
@media (min-width: 900px) { .rq-chips { flex-wrap: nowrap; overflow-x: auto; } }
/* le bolle della chat */
.bolla { border-radius: 14px; }
.bolla.out { background: var(--attivo); }
.bolla.out.alessia { background: var(--attivo); }
.simulatore .chat { border-radius: var(--raggio-s); }