/* ══ MERCURIO SUITE ═══════════════════════════════════════════════
   COME IL COCKPIT (15 ott 2026, Vincenzo: «come il Cockpit»). I valori
   sono quelli di mercurio-cockpit (tailwind.config.js, index.css,
   Sidebar.jsx, StatCard.jsx, PageHeader.jsx): notte #060810 con la
   nebulosa cobalto, pannelli #0b1020 con il filo #1c2740, cobalto come
   accento, etichette piccole maiuscole in #4d6fff.
   Il telefono resta la misura: aree toccabili ≥44px, campi ≥16px,
   niente scorrimento laterale; sotto i 900px il menu sta in basso
   sotto il pollice, da 900px a sinistra alto quanto la pagina. */
@font-face { font-family: 'Geist'; src: url('/font/geist-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --fondo: #060810; --incavo: #0a0f1e; --foglio: #0b1020; --rialzo: #141d33;
  --linea: #1c2740; --linea-forte: #2a3a5e;
  --testo: #eaf0fa; --testo-2: #b3c1de; --tenue: #8b9cc0; --fioco: #64749b;
  --cobalt: #1a3cff; --cobalt-2: #4d6fff; --cobalt-chiaro: #9db6ff; --cobalt-fondo: rgba(26,60,255,.16); --cobalt-bordo: rgba(77,111,255,.45);
  --ok: #4ade80; --ok-fondo: rgba(22,163,74,.18);
  --attesa: #fbbf24; --attesa-fondo: rgba(245,158,11,.18);
  --no: #f87171; --no-fondo: rgba(239,68,68,.16); --no-bordo: rgba(239,68,68,.45);
  --neutro-fondo: rgba(139,156,192,.12);
  --ombra: 0 1px 2px rgba(0,0,0,.30), 0 10px 40px rgba(0,0,0,.35);
  --ombra-alta: 0 8px 20px rgba(0,0,0,.45), 0 28px 60px rgba(0,0,0,.55);
  --luce: 0 1px 2px rgba(0,0,0,.25), 0 12px 34px rgba(26,60,255,.28);
  --r: 12px; --r-lg: 18px;
  --barra-h: 60px; --schede-h: 66px; --lato: 240px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--fondo); }
body {
  margin: 0; min-height: 100vh; color: var(--testo); overflow-x: hidden;
  font: 400 16px/1.5 Geist, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased;
  background-color: var(--fondo);
  background-image: radial-gradient(ellipse 70% 45% at 50% -8%, rgba(26,60,255,.16), transparent 60%);
  background-attachment: fixed;
}
::selection { color: var(--testo); background: rgba(26,60,255,.55); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--cobalt-chiaro); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.2; }
h1 { font-size: 28px; } h2 { font-size: 18px; } h3 { font-size: 16px; }
p { margin: 0; }
[hidden], .nascosto { display: none !important; }
.tenue { color: var(--tenue); }
.piccolo { font-size: 14px; }
.piccolissimo { font-size: 12px; color: var(--tenue); }
.spezza { overflow-wrap: anywhere; word-break: break-word; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cobalt-2); line-height: 1.4; }

/* ── pulsanti e campi ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: var(--r); border: 1px solid var(--linea); background: var(--foglio); color: var(--testo); font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, filter .2s; }
.btn:hover { background: var(--rialzo); border-color: var(--linea-forte); }
.btn:focus-visible, .campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible, .nav a:focus-visible, .scheda:focus-visible, .riga-conv:focus-visible, .salta:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
.btn.pieno { background: var(--cobalt); border-color: var(--cobalt); color: #fff; font-weight: 700; }
.btn.pieno:hover { background: var(--cobalt-2); border-color: var(--cobalt-2); }
.btn.vuoto { border-color: transparent; background: transparent; color: var(--testo-2); }
.btn.vuoto:hover { background: rgba(255,255,255,.04); color: var(--testo); }
.btn.rosso { color: var(--no); border-color: var(--no-bordo); background: transparent; }
.btn.rosso:hover { background: var(--no-fondo); }
.btn.largo { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-icona { min-width: 44px; padding: 10px; }
.campo { display: block; }
.campo > span { display: block; font-size: 14px; font-weight: 600; color: var(--testo-2); margin-bottom: 6px; }
.campo input, .campo textarea, .campo select { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--incavo); color: var(--testo); font-size: 16px; line-height: 1.4; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--fioco); opacity: 1; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--cobalt); }
.campo textarea { min-height: 96px; resize: vertical; }
.errore { color: var(--attesa); font-size: 14px; }
form.pila { display: grid; gap: 14px; }
.lingue { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--foglio); flex: none; }
.lingue svg { width: 15px; height: 15px; margin: 0 4px 0 8px; fill: none; stroke: var(--tenue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lingue button { min-height: 44px; min-width: 46px; border: 0; border-radius: 9px; background: transparent; color: var(--tenue); font-size: 13px; font-weight: 700; cursor: pointer; }
.lingue button:hover { color: var(--testo); }
.lingue button[aria-pressed="true"] { background: linear-gradient(135deg, var(--cobalt), var(--cobalt-2)); color: #fff; box-shadow: var(--luce); }
.lingue button:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }

/* ── entrata: come l'accesso del Cockpit (15 ott 2026, «falla stile accesso cockpit») ──
   Notte #060810 con la nebulosa cobalto e la polvere di stelle, marchio nel
   riquadro, campi scuri con l'icona, pulsante cobalto con la luce sotto.
   Valori presi dal Cockpit (index.css, tailwind.config.js, Login.jsx). Rispetto
   al Cockpit: campi a 16px (iOS non zooma), lingue a 44px, nota più chiara. */
html.notte, html.notte body { background: #060810; color-scheme: dark; }
.entrata {
  --e-pannello: #0b1020; --e-linea: #1c2740; --e-testo: #eaf0fa; --e-tenue: #8b9cc0; --e-fioco: #64749b; --e-cob: #1a3cff; --e-cob2: #4d6fff;
  --e-luce: 0 1px 2px rgba(0,0,0,.25), 0 12px 34px rgba(26,60,255,.28);
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 40px 16px;
  color: var(--e-testo); background-color: #060810;
  /* la nebulosa resta qui; le stelle le disegna la tela (si muovono piano, 15 ott: «con stelle che si muovono») */
  background-image: radial-gradient(ellipse 70% 45% at 50% -8%, rgba(26,60,255,.16), transparent 60%);
  background-attachment: fixed;
  position: relative;
}
.entrata-cielo { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.entrata-dentro { position: relative; z-index: 1; width: 100%; max-width: 448px; text-align: center; animation: entrata-su .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes entrata-su { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .entrata-dentro { animation: none; } }
.entrata-lingua { display: flex; justify-content: center; margin-bottom: 24px; }
.entrata .lingue { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--e-linea); border-radius: 12px; background: var(--e-pannello); overflow: visible; }
.entrata .lingue svg { width: 15px; height: 15px; margin: 0 4px 0 8px; fill: none; stroke: var(--e-tenue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.entrata .lingue button { min-height: 44px; min-width: 48px; border: 0; border-radius: 9px; background: transparent; color: var(--e-tenue); font-size: 13px; font-weight: 700; cursor: pointer; }
.entrata .lingue button:hover { color: var(--e-testo); }
.entrata .lingue button[aria-pressed="true"] { background: linear-gradient(135deg, var(--e-cob), var(--e-cob2)); color: #fff; box-shadow: var(--e-luce); }
.entrata .lingue button:focus-visible { outline: 2px solid var(--e-cob2); outline-offset: 2px; }
.entrata-logo { display: inline-flex; margin-bottom: 20px; padding: 12px 16px; border: 1px solid var(--e-linea); border-radius: 12px; background: rgba(11,16,32,.7); box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 40px rgba(0,0,0,.35); }
.entrata-logo img { display: block; width: auto; height: 52px; }   /* il monogramma MS (15 ott: «metti come logo la MS») */
.entrata h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--e-testo); }
.entrata .sotto { margin: 8px 0 32px; font-size: 15px; color: var(--e-tenue); }
.entrata form.pila { gap: 12px; text-align: left; }
.campo-icona { position: relative; display: block; }
.campo-icona svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: none; stroke: var(--e-tenue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.campo-icona input { display: block; width: 100%; min-height: 50px; padding: 12px 12px 12px 42px; border: 1px solid var(--e-linea); border-radius: 12px; background: var(--e-pannello); color: var(--e-testo); font-size: 16px; }
.campo-icona input::placeholder { color: var(--e-fioco); opacity: 1; }
.campo-icona input:focus { outline: none; border-color: var(--e-cob); }
.campo-icona input:focus-visible { box-shadow: 0 0 0 3px rgba(26,60,255,.35); }
.campo-icona input[readonly] { color: var(--e-tenue); }
.campo-icona input:-webkit-autofill { -webkit-text-fill-color: var(--e-testo); -webkit-box-shadow: 0 0 0 40px var(--e-pannello) inset; caret-color: var(--e-testo); }
.entrata .btn.pieno { min-height: 50px; border: 0; border-radius: 18px; background-color: var(--e-cob); background-image: linear-gradient(135deg, var(--e-cob), var(--e-cob2)); box-shadow: var(--e-luce); color: #fff; font-weight: 700; }
.entrata .btn.pieno:hover { filter: brightness(1.1); }
.entrata .btn.pieno svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.entrata .btn.vuoto { margin-top: 8px; color: var(--e-tenue); font-weight: 600; }
.entrata .btn.vuoto:hover { background: rgba(255,255,255,.04); color: var(--e-testo); }
.entrata .btn:focus-visible { outline: 2px solid var(--e-cob2); outline-offset: 2px; }
.entrata .errore { padding: 8px 12px; border-radius: 12px; background: rgba(245,158,11,.12); color: #fbbf24; font-size: 14px; }
.entrata .tenue { color: var(--e-tenue); }
.entrata-nota { margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--e-tenue); }

/* ── la cornice: sul telefono barra in alto e menu in basso; da 900px menu a sinistra (vedi in fondo) ── */
.app { min-height: 100vh; }
.lato { display: contents; }
.lato-marchio, .lato-io { display: none; }
.barra { position: sticky; top: 0; z-index: 20; min-height: var(--barra-h); display: flex; align-items: center; gap: 10px; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); background: rgba(6,8,16,.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); }
.barra-sx { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.segno { width: 30px; height: 30px; flex: none; border-radius: 8px; }
.barra-nome { display: grid; min-width: 0; line-height: 1.15; }
.barra-nome b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-nome small { color: var(--tenue); font-size: 12px; }
.barra-titolo { display: none; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-lingue { display: none; }
.scegli-cliente { min-height: 44px; max-width: 46vw; border: 1px solid var(--linea); border-radius: var(--r); padding: 8px 10px; background: var(--foglio); color: var(--testo); font-size: 16px; }
.menu-utente { position: relative; }
.tendina { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 260px; background: var(--foglio); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 8px; box-shadow: var(--ombra-alta); display: grid; gap: 2px; }
.tendina .chi { padding: 8px 10px 10px; border-bottom: 1px solid var(--linea); margin-bottom: 4px; }
.tendina-lingue { padding: 6px 8px; }
.tendina .btn { justify-content: flex-start; border: 0; width: 100%; background: transparent; }
.tendina .btn:hover { background: var(--rialzo); }

.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--incavo); border-top: 1px solid var(--linea); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-bottom: env(safe-area-inset-bottom); }
.nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--schede-h); padding: 6px 2px; color: var(--tenue); text-decoration: none; font-size: 12px; font-weight: 600; text-align: center; }
.nav a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav a[aria-current="page"] { color: var(--cobalt-2); }
.nav a span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav .lungo { display: none; }
.nav .solo-largo { display: none; }
.nav .conta { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--attesa); color: #1a1205; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
main.contenuto { padding: 22px 16px calc(var(--schede-h) + 28px + env(safe-area-inset-bottom)); max-width: 1152px; margin: 0 auto; }
.vista { display: grid; gap: 20px; animation: vista-su .28s cubic-bezier(.22,1,.36,1) both; }
@keyframes vista-su { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vista { animation: none; } }
.vista > h2 { margin-top: 6px; }

/* ── il titolo della pagina (PageHeader del Cockpit) ── */
.testa-vista { display: grid; gap: 6px; }
.testa-vista h1 { font-size: 28px; }
.testa-vista p:not(.eyebrow) { color: var(--testo-2); font-size: 15px; line-height: 1.6; max-width: 68ch; }

/* ── le carte (StatCard del Cockpit) ── */
.griglia { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.carta { background: var(--foglio); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--ombra); display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: box-shadow .3s; }
.carta:hover { box-shadow: var(--luce); }
.carta > h2 { font-size: 17px; }
.carta-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.carta-testa h2 { padding-top: 2px; }
.carta-segni { display: flex; align-items: center; gap: 8px; flex: none; }
.carta-segni:empty { display: none; }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 1px solid var(--linea-forte); background: var(--rialzo); flex: none; }
.carta .numero { margin-top: 2px; font-size: 38px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--testo); }
.sotto-numero { margin-top: -4px; font-size: 13px; color: var(--tenue); }
.carta .azioni { margin-top: auto; padding-top: 4px; }
.carta .azioni, .azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.barretta { height: 6px; border-radius: 99px; background: var(--rialzo); overflow: hidden; }
.barretta i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cobalt), var(--cobalt-2)); }
.etichetta { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--neutro-fondo); color: var(--testo-2); line-height: 1.4; }
.etichetta.attesa { background: var(--attesa-fondo); color: var(--attesa); }
.etichetta.ok { background: var(--ok-fondo); color: var(--ok); }
.etichetta.no { background: var(--no-fondo); color: var(--no); }
.etichetta.cob { background: var(--cobalt-fondo); color: var(--cobalt-chiaro); }
/* il riquadro vuoto; ⚠️ NON i pulsanti «btn vuoto» (stesso nome: prendevano imbottitura e tratteggio, «Salta» e «Chiudi» gonfi, 15 ott) */
.vuoto:not(.btn) { padding: 28px 18px; text-align: center; color: var(--tenue); background: var(--foglio); border: 1px dashed var(--linea-forte); border-radius: var(--r-lg); }
.nota { background: rgba(26,60,255,.06); border: 1px solid rgba(26,60,255,.25); border-radius: var(--r); padding: 14px 16px; color: var(--testo-2); font-size: 14px; line-height: 1.6; }
.elenco { display: grid; gap: 10px; }
.voce { background: var(--foglio); border: 1px solid var(--linea); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 6px; min-width: 0; }
.voce .testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; }
.dati { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: 15px; margin: 0; }
.dati dt { color: var(--tenue); }
.dati dd { margin: 0; overflow-wrap: anywhere; }

.iniziali { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--cobalt), var(--cobalt-2)); color: #fff; font-size: 12px; font-weight: 800; }

/* ── la squadra ── */
.sq-invita h2 { font-size: 17px; }
.sq-campi { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.sq-voce { grid-template-columns: minmax(0, 1fr); align-items: center; gap: 12px; }
.sq-chi { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.sq-testo { display: grid; gap: 2px; min-width: 0; }
.sq-testo .testa { justify-content: flex-start; align-items: center; gap: 8px; }
.sq-voce > .btn { justify-self: start; }
@media (min-width: 600px) {
  .sq-campi { grid-template-columns: 1.2fr 1.4fr .8fr; }
  .sq-voce { grid-template-columns: minmax(0, 1fr) auto; }
  .sq-voce > .btn { justify-self: end; }
}

/* ── conversazioni ── */
.filtri { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filtri::-webkit-scrollbar { display: none; }
.scheda { flex: none; min-height: 44px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--linea); background: var(--foglio); color: var(--testo-2); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.scheda:hover { border-color: var(--linea-forte); color: var(--testo); }
.scheda[aria-selected="true"], .scheda[aria-pressed="true"] { background: var(--cobalt-fondo); border-color: var(--cobalt-bordo); color: var(--cobalt-chiaro); }
.conv { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.lista-conv { display: grid; gap: 8px; align-content: start; }
.riga-conv { display: grid; gap: 6px; text-align: left; width: 100%; min-height: 44px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--foglio); color: var(--testo); cursor: pointer; }
.riga-conv:hover { border-color: var(--linea-forte); }
.riga-conv[aria-current="true"] { border-color: var(--cobalt-bordo); background: var(--rialzo); box-shadow: inset 3px 0 0 var(--cobalt); }
.riga-conv .su { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.riga-conv .ultimo { color: var(--tenue); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dettaglio { background: var(--foglio); border: 1px solid var(--linea); border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: 420px; min-width: 0; box-shadow: var(--ombra); }
.dettaglio .testa { padding: 14px 16px; border-bottom: 1px solid var(--linea); display: grid; gap: 8px; }
.dettaglio .messaggi { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 60vh; background: transparent; border: 0; border-radius: 0; }
.dettaglio > .vuoto:not(.btn) { margin: 16px; border: 0; background: transparent; }
.fumetto { max-width: 85%; padding: 10px 13px; border-radius: 14px; background: var(--rialzo); border: 1px solid var(--linea); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.fumetto small { display: block; color: var(--tenue); font-size: 12px; margin-bottom: 2px; }
.fumetto.visitatore { align-self: flex-start; }
.fumetto.assistente { align-self: flex-end; background: var(--incavo); }
.fumetto.operatore { align-self: flex-end; background: var(--cobalt-fondo); border-color: var(--cobalt-bordo); }
.fumetto.sistema { align-self: center; background: transparent; border: 0; color: var(--tenue); font-size: 13px; text-align: center; }
.fumetto.io { align-self: flex-end; background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.messaggi { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--foglio); border: 1px solid var(--linea); border-radius: var(--r-lg); overflow-y: auto; }
.scrivi { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--linea); }
.scrivi .campo { flex: 1; min-width: 0; }
.scrivi .campo input { margin: 0; }

/* ── il sapere di KAY ── */
.barra-sapere { background: var(--foglio); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 14px 16px; display: grid; gap: 10px; box-shadow: var(--ombra); }
.barra-sapere .azioni { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pezzo { background: var(--foglio); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 16px; display: grid; gap: 14px; min-width: 0; }
.pezzo .testa { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.due-lingue { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.lingua-tag { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cobalt-2); margin-bottom: 6px; }
.manca { color: var(--attesa); font-weight: 600; font-size: 13px; letter-spacing: 0; text-transform: none; }
.conta-car { font-size: 12.5px; color: var(--tenue); text-align: right; margin-top: 4px; }
details.sa-gia { background: var(--foglio); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 0 16px; }
details.sa-gia summary { min-height: 52px; display: flex; align-items: center; cursor: pointer; font-weight: 600; list-style: none; }
details.sa-gia summary::-webkit-details-marker { display: none; }
details.sa-gia summary::after { content: '+'; margin-left: auto; font-size: 20px; color: var(--tenue); }
details.sa-gia[open] summary::after { content: '−'; }
details.sa-gia .dentro { padding: 0 0 16px; display: grid; gap: 12px; }
ul.semplice { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--testo-2); }

/* ── i criteri di Cerca clienti: una zona è un pulsante che si toglie ── */
details.crit-ter { background: var(--foglio); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 0 16px; min-width: 0; box-shadow: var(--ombra); }
details.crit-ter summary { min-height: 56px; display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
details.crit-ter summary::-webkit-details-marker { display: none; }
details.crit-ter summary h3 { flex: 1; min-width: 0; }
details.crit-ter summary::after { content: '+'; width: 20px; text-align: center; font-size: 20px; color: var(--tenue); }
details.crit-ter[open] summary::after { content: '−'; }
details.crit-ter summary:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; border-radius: 8px; }
details.crit-ter .dentro { display: grid; gap: 12px; padding-bottom: 16px; }
.crit-riga { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--linea); min-width: 0; }
.crit-zone { display: flex; flex-wrap: wrap; gap: 8px; }
.zona { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 100%; padding: 8px 12px 8px 14px; border-radius: 99px; border: 1px solid var(--linea); background: var(--incavo); color: var(--testo-2); font-size: 15px; font-weight: 500; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.zona span { color: var(--tenue); font-size: 18px; line-height: 1; }
.zona:hover, .zona:hover span { border-color: var(--no-bordo); color: var(--no); }
.zona:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
.crit-aggiungi { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
.crit-aggiungi .azioni { justify-content: flex-end; }
@media (min-width: 600px) { .crit-aggiungi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crit-aggiungi .azioni { grid-column: 1 / -1; } }

/* ── pannelli a tutto schermo (prova di KAY) ── */
.pannello-pieno { position: fixed; inset: 0; z-index: 40; background: var(--fondo); display: flex; flex-direction: column; }
.pannello-pieno .testa-p { display: flex; align-items: center; gap: 10px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--incavo); border-bottom: 1px solid var(--linea); }
.pannello-pieno .testa-p h2 { flex: 1; font-size: 17px; }
.pannello-pieno .messaggi { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: transparent; border: 0; border-radius: 0; }
.pannello-pieno form { display: flex; gap: 8px; padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: var(--incavo); }
.pannello-pieno form .campo { flex: 1; min-width: 0; }

/* ── finestre e guida (come il giro del Cockpit) ── */
dialog { background: var(--foglio); color: var(--testo); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 24px 22px; width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: var(--ombra-alta); }
dialog::backdrop { background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog .azioni { justify-content: flex-end; margin-top: 4px; }
dialog h2 { font-size: 22px; }
.guida-passo { display: grid; gap: 10px; }
.guida-passo p:not(.eyebrow) { color: var(--testo-2); font-size: 15px; line-height: 1.6; }
.guida-azioni { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.salta { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--tenue); font-size: 14px; font-weight: 600; cursor: pointer; }
.salta:hover { color: var(--testo-2); }

#avviso { position: fixed; left: 16px; right: 16px; bottom: calc(var(--schede-h) + 14px + env(safe-area-inset-bottom)); z-index: 50; display: flex; justify-content: center; pointer-events: none; }
#avviso div { background: var(--rialzo); color: var(--testo); border: 1px solid var(--linea-forte); border-radius: var(--r); padding: 12px 16px; box-shadow: var(--ombra-alta); max-width: 520px; pointer-events: auto; font-size: 15px; }
#avviso div.male { background: #7f1d1d; border-color: var(--no-bordo); color: #fff; }

@media (min-width: 600px) {
  .griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barra-lingue { display: inline-flex; }
  .tendina-lingue { display: none; }
}
@media (min-width: 900px) {
  /* il lato del Cockpit: alto quanto la pagina, la barra sta solo sopra il contenuto */
  .lato { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; width: var(--lato); display: flex; flex-direction: column; overflow-y: auto; background: var(--incavo); border-right: 1px solid var(--linea); }
  .lato-marchio { display: block; padding: 24px 20px 24px; }
  .placca { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--linea); border-radius: var(--r); background: rgba(6,8,16,.6); }
  .placca img { width: auto; height: 40px; flex: none; }
  .placca span { display: grid; font-size: 15px; font-weight: 600; line-height: 1.15; color: var(--testo-2); }
  .placca b { font-weight: 800; color: var(--testo); }
  .lato-marchio .eyebrow { margin-top: 12px; }
  .lato-io { display: flex; align-items: center; gap: 10px; margin: 16px 20px 24px; padding-top: 16px; border-top: 1px solid var(--linea); }
  .lato-io-testo { min-width: 0; line-height: 1.25; }
  .lato-io-testo p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #lato-nome { font-size: 14px; font-weight: 600; }
  .nav { position: static; flex: 1; display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-auto-rows: min-content; align-content: start; gap: 2px; padding: 0 12px; border-top: 0; background: transparent; }
  .nav a { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 10px 16px; border-radius: var(--r); color: var(--testo-2); font-size: 14px; font-weight: 500; text-align: left; transition: background .3s, color .3s; }
  .nav a svg { width: 18px; height: 18px; color: var(--tenue); }
  .nav a:hover { background: rgba(11,16,32,.7); color: var(--testo); }
  .nav a[aria-current="page"] { background: var(--rialzo); color: var(--testo); font-weight: 600; box-shadow: var(--ombra); }
  .nav a[aria-current="page"]::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 20px; transform: translateY(-50%); border-radius: 0 99px 99px 0; background: var(--cobalt); }
  .nav a[aria-current="page"] svg { color: var(--cobalt-2); stroke-width: 2.2; }
  .nav .solo-largo { display: flex; }
  .nav .solo-stretto { display: none; }
  .nav .breve { display: none; }
  .nav .lungo { display: inline; }
  .nav .conta { position: static; margin-left: auto; }
  .colonna { padding-left: var(--lato); }
  .barra { padding: 10px 24px; }
  .barra-titolo { display: block; }
  .solo-telefono { display: none !important; }
  main.contenuto { padding: 32px 32px 56px; }
  .testa-vista h1 { font-size: 34px; }
  .griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .due-lingue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conv { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); align-items: start; }
  .conv.con-dettaglio .lista-conv { display: grid; }
  .pannello-pieno { inset: 0 0 0 auto; width: min(460px, 100vw); border-left: 1px solid var(--linea); box-shadow: -20px 0 40px rgba(0,0,0,.45); }
  #avviso { bottom: 24px; left: calc(var(--lato) + 16px); }
}
@media (min-width: 1100px) {
  main.contenuto { padding: 40px 40px 56px; }
  .griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .conv.con-dettaglio .lista-conv { display: none; }
  .conv:not(.con-dettaglio) .dettaglio { display: none; }
}
@media (max-width: 359px) {
  .barra-sapere .azioni { grid-template-columns: minmax(0, 1fr); }
  .nav a { font-size: 11px; }
}