/* Portale Backpoint: il guscio (menu delle sezioni) e le sezioni nuove. Stesso stile «Future» e stessi colori dell'Inbox (posta.css). */

/* ---- guscio: testata in alto, menu a sinistra (sul telefono in basso), sezioni ---- */
body.avvio .portale, body.login .portale, body.avvio .testa, body.login .testa { display: none; }
.testa { background: var(--bg); }
.testa-titolo { display: none; margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--q-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:not([data-sez="inbox"]) .testa .cerca, body:not([data-sez="inbox"]) .testa [data-scrivi], body:not([data-sez="inbox"]) .testa .indietro { display: none; }
body:not([data-sez="inbox"]) .utente { margin-left: auto; }
a.btn { text-decoration: none; }
body[data-sez="inbox"] #avviso { display: none; }
.avviso-sez { position: static; }
.portale { flex: 1; min-height: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); }
.rail { display: flex; flex-direction: column; gap: 4px; padding: 12px 8px; border-right: 1px solid var(--sep); overflow-y: auto; scrollbar-width: none; }
.rail a { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 2px 9px; border-radius: 14px; color: var(--ink-2); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; text-decoration: none; }
.rail a:hover { background: var(--panel-2); color: var(--q-ink); }
.rail a[aria-current="page"] { background: var(--blu-s); color: var(--title); }
.rail .i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rail .n { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.sezioni { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.sez { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.sez-inbox, .sez-sales { overflow: hidden; }
.sez-inbox .corpo { flex: 1; }

/* ---- pezzi comuni ---- */
.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn .i { width: 18px; height: 18px; }
.btn.piccolo { height: 34px; padding: 0 14px; font-size: 13.5px; }
.vuoto.piccolo { padding: 18px 8px; text-align: left; }
.sopra { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.cod { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); white-space: nowrap; }
.cnt { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 19px; text-align: center; }
.tag { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.stato-inbound { background: var(--blu-s); color: var(--title); }
.stato-lead { background: var(--card-2); color: var(--q-ink); }
.stato-cliente { background: var(--navy); color: #fff; }
.stato-outbound { background: var(--panel-2); color: var(--muted); }
.fonte-hello, .fonte-sales { background: var(--panel-2); color: var(--ink-2); }
.fonte-sito, .fonte-agente { background: var(--card-1); color: var(--title); }
.cod-tasto { gap: 5px; border: 0; cursor: pointer; font: 600 11.5px/19px var(--f); letter-spacing: .03em; background: var(--panel-2); color: var(--q-ink); }
.cod-tasto:hover { background: var(--blu-s); color: var(--title); }
.cod-tasto .i { width: 12px; height: 12px; }
.carta { padding: 18px 20px; border-radius: 20px; background: var(--panel); box-shadow: 0 0 0 1px var(--sep), var(--ombra); min-width: 0; }
.carta h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--q-ink); }
.carta-sotto { margin: -8px 0 12px; font-size: 13px; color: var(--muted); }
.campo { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.campo i { font-weight: 400; color: var(--muted); }
.fm-link-t { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fm-link-t a { font-size: 13px; font-weight: 600; color: var(--blu); text-decoration: none; white-space: nowrap; }
.fm-link-t a:hover { text-decoration: underline; }
.et-campo { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.campo input, .campo textarea, .nota-campo, .fp-nome-altro, .fp-prezzo input { width: 100%; min-width: 0; padding: 10px 13px; border: 1px solid var(--linea); border-radius: 12px; outline: none; background: var(--panel-2); font: 400 15px/1.45 var(--f); color: var(--q-ink); }
.campo input:focus, .campo textarea:focus, .nota-campo:focus, .fp-nome-altro:focus, .fp-prezzo input:focus { border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-s); background: var(--panel); }
.campo textarea, .nota-campo { resize: vertical; min-height: 84px; }
.tendina-p { flex: none; }
.tendina-p .tendina-tasto { max-width: none; min-height: 44px; background: var(--panel-2); }
.tendina-p .tendina-menu { max-width: none; }
.td-nome.td-segnaposto { color: var(--muted); font-weight: 500; }
.s-cerca { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.s-cerca:focus-within { box-shadow: 0 0 0 2px var(--blu); }
.s-cerca input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14.5px; color: var(--q-ink); }
.s-cerca input::placeholder { color: var(--muted); }
.s-spiega { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.interruttore { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink); cursor: pointer; }
.interruttore input { position: absolute; opacity: 0; pointer-events: none; }
.int-x { flex: none; position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--card-2); transition: background .15s; }
.int-x::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 24, 48, .25); transition: transform .15s; }
.interruttore input:checked + .int-x { background: var(--navy); }
.interruttore input:checked + .int-x::after { transform: translateX(16px); }
.interruttore input:focus-visible + .int-x { outline: 2px solid var(--blu); outline-offset: 2px; }

/* ---- elenco a sinistra (Sales, Customers, Notes) ---- */
.s-lista { flex: 1; overflow: auto; padding: 0 8px calc(18px + env(safe-area-inset-bottom)); }
.s-voce { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 1px; width: 100%; padding: 12px 10px; border: 0; border-radius: 14px; background: transparent; text-align: left; cursor: pointer; }
.s-voce + .s-voce::before { content: ""; position: absolute; left: 58px; right: 10px; top: 0; height: 1px; background: var(--sep); }
.s-voce:hover { background: var(--panel-2); }
.s-voce[aria-current="true"] { background: var(--blu-s); }
.s-voce:hover::before, .s-voce[aria-current="true"]::before, .s-voce:hover + .s-voce::before, .s-voce[aria-current="true"] + .s-voce::before { opacity: 0; }
.s-voce .av { grid-row: 1 / span 3; align-self: start; margin-top: 2px; }
.s-voce .chi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--q-ink); font-weight: 600; }
.s-voce .ora { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.s-voce .az { grid-column: 2 / 4; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink-2); }
.s-voce .ant { grid-column: 2 / 4; display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 3px; font-size: 13px; color: var(--muted); }
.s-voce .ant > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-voce.nuova .chi::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--blu); box-shadow: var(--alone); vertical-align: middle; }
.s-voce.nuova .ant > span:last-child { color: var(--q-ink); font-weight: 600; }

/* ---- Sales Management: 1/3 elenco, 2/3 chat ---- */
.sales { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); }
.s-elenco { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--sep); }
.s-elenco-t { flex: none; display: grid; gap: 10px; padding: 16px 16px 10px; }
.s-tt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.s-tt h2, .d-elenco-t h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--q-ink); }
.s-viste { display: flex; width: 100%; }
.s-viste button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; }
.s-viste button[aria-selected="true"] { background: var(--panel); color: var(--title); font-weight: 600; box-shadow: var(--ombra); }
.s-viste .cnt { font-size: 11px; line-height: 18px; min-width: 18px; }
.s-chat { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.c-testa { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--sep); background: var(--bg); }
.c-testa .av { width: 40px; height: 40px; font-size: 14px; }
.c-chi { flex: 1; min-width: 0; }
.c-chi h3 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; color: var(--q-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-chi p { margin: 1px 0 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-tag { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.c-note-t .cnt { margin-left: 2px; }
.c-indietro { display: none; }
.c-corpo { flex: 1; min-height: 0; overflow: auto; padding: 18px 22px 22px; background: var(--panel-2); display: flex; flex-direction: column; gap: 12px; }
.giorno { align-self: center; margin: 6px 0 2px; }
.giorno span { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--panel); box-shadow: var(--ombra); font-size: 12px; font-weight: 600; color: var(--muted); }
.msg-c { display: flex; flex-direction: column; max-width: 100%; }
.msg-c.in { align-items: flex-start; }
.msg-c.out { align-items: flex-end; }
.b-meta { margin: 4px 6px 0; font-size: 11.5px; color: var(--muted); }
.bolla { min-width: 0; max-width: min(78%, 620px); overflow-wrap: anywhere; }
.bolla.in { padding: 11px 15px; border-radius: 4px 18px 18px 18px; background: var(--panel); box-shadow: 0 0 0 1px var(--sep), var(--ombra); font-size: 14.5px; line-height: 1.55; color: var(--q-ink); }
.bolla.in p { margin: 0 0 8px; }
.bolla.in p:last-of-type { margin-bottom: 0; }
.bolla.out { width: min(560px, 88%); max-width: none; }
.b-etichetta { display: flex; align-items: center; gap: 6px; margin: 0 0 8px !important; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--title); }
.b-etichetta .i { width: 15px; height: 15px; }
.bolla.modulo dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 0 0 10px; font-size: 13.5px; }
.bolla.modulo dt { color: var(--muted); }
.bolla.modulo dd { margin: 0; font-weight: 600; }
.b-orig { display: block; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--title); font: 600 12.5px var(--f); cursor: pointer; }
.b-orig:hover { text-decoration: underline; }
.b-frame { display: block; width: 100%; min-width: 280px; height: 80px; margin-top: 8px; border: 0; border-radius: 12px; background: #fff; }
.bolla.out .b-frame { margin-top: 0; border-radius: 18px; }
.b-allegati { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px !important; color: var(--muted); }
.b-allegati .i { width: 15px; height: 15px; }

/* il modello delle email, com'è nella posta del cliente (sempre chiaro, come l'email vera) */
.tpl { border-radius: 18px 4px 18px 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 24, 48, .06), 0 1px 3px rgba(15, 24, 48, .12); color: #2a3550; font: 400 14.5px/1.6 var(--f); color-scheme: light; }
.tpl-t { padding: 12px 18px; background: #0b1426; text-align: center; }
.tpl-t img { display: block; height: 19px; margin: 0 auto; }
.tpl-c { padding: 16px 18px 16px; background: #eef3fd; }
.tpl-p { margin: 0; }
.tpl-c a { color: #0959de; }
.tpl-h { margin: 0 0 10px; font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -.04em; color: #2f74f0; }
.tpl-l { margin: 4px 0; padding-left: 20px; }
.tpl-riq { display: grid; gap: 2px; margin: 10px 0 12px; padding: 11px 15px; border-radius: 14px; background: #fff; }
.tpl-riq small, .tpl-pay > small, .tpl-meet-t small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7d8aa8; }
.tpl-riq b { font-size: 16px; color: #0959de; }
.tpl-riq span { font-size: 12.5px; color: #7d8aa8; }
.tpl-c-btn { margin: 14px 0 12px; text-align: center; }
.tpl-btn { display: inline-block; padding: 10px 24px; border-radius: 999px; background: #0959de; color: #fff !important; font-weight: 600; text-decoration: none; }
.tpl-meet { display: flex; align-items: center; gap: 14px; margin: 10px 0 12px; padding: 13px 16px; border-radius: 16px; background: #e4edfd; color: inherit !important; text-decoration: none; }
a.tpl-meet:hover { box-shadow: inset 0 0 0 1.5px #0959de; }
.tpl-meet-i { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #0959de; color: #fff; }
.tpl-meet-i .i { width: 21px; height: 21px; stroke-width: 2.1; }
.tpl-meet-t { display: grid; min-width: 0; }
.tpl-meet-t small { color: #0959de; }
.tpl-meet-t b { font-size: 16px; line-height: 1.35; color: #0959de; }
.tpl-meet-t span { font-size: 12.5px; color: #7d8aa8; }
.tpl-meet-t span a { color: #0959de; }
.tpl-pay { margin: 10px 0 12px; padding: 14px 18px 12px; border-radius: 16px; background: #fff; }
.tpl-pay table { width: 100%; margin-top: 4px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tpl-pay td { padding: 7px 0; border-bottom: 1px solid #e6edf8; font-size: 14.5px; color: #2a3550; }
.tpl-pay td + td { padding-left: 12px; text-align: right; white-space: nowrap; font-weight: 600; color: #0f1830; }
.tpl-pay td small { color: #7d8aa8; }
.tpl-pay tr.tot td { border-bottom: 0; font-weight: 700; color: #0f1830; }
.tpl-pay tr.tot td + td { color: #0959de; }
.tpl-cod { margin: 0; font-size: 12px; color: #7d8aa8; text-align: center; }
.tpl-cod b { color: #0f1830; }
.tpl-firma { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 11px 14px; border-radius: 14px; background: #fff; font-size: 13.5px; line-height: 1.45; }
.tpl-firma .av { width: 36px; height: 36px; background: #2f74f0; font-size: 15px; }
.tpl-firma b { color: #0f1830; }
.tpl-firma small { color: #7d8aa8; font-size: 13px; }
.tpl-mail { color: #0959de; }

/* scrivere nella chat */
.c-scrivi { flex: none; display: grid; gap: 8px; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sep); background: var(--bg); }
.c-ogg { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--sep); font-size: 14px; color: var(--muted); }
.c-ogg input { flex: 1; min-width: 0; padding: 6px 0; border: 0; outline: none; background: transparent; font: 600 15px var(--f); color: var(--q-ink); }
.c-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.c-barra > button:not(.magico) { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font-size: 15px; cursor: pointer; }
.c-barra > button:not(.magico):hover { background: var(--panel-2); }
.c-barra svg:not(.i) { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c-barra .sep { width: 1px; height: 20px; margin: 0 6px; background: var(--linea); }
.magico { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 11px; border: 0; border-radius: 999px; background: var(--blu-s); color: var(--title); font: 600 13.5px var(--f); cursor: pointer; white-space: nowrap; }
.magico:hover { box-shadow: inset 0 0 0 1.5px var(--blu); }
.magico .i { width: 17px; height: 17px; }
.c-editor { min-height: 66px; max-height: 38vh; overflow: auto; padding: 10px 14px; border: 1px solid var(--linea); border-radius: 16px; outline: none; background: var(--panel); font-size: 15px; line-height: 1.6; color: var(--q-ink); overflow-wrap: anywhere; cursor: text; }
.c-editor:focus { border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-s); }
.c-editor:empty::before { content: attr(data-vuoto); color: var(--muted); pointer-events: none; }
.c-editor > p, .c-editor > div:not(.ed-meet):not(.ed-pay) { margin: 0; }
.c-editor ul, .c-editor ol { margin: 4px 0; padding-left: 22px; }
.c-editor a { color: var(--title); }
.ed-meet, .ed-pay { position: relative; margin: 8px 0; user-select: none; }
.ed-meet { display: flex; align-items: center; gap: 14px; padding: 12px 44px 12px 14px; border-radius: 16px; background: #e4edfd; color: #2a3550; }
.ed-pay .tpl-pay { margin: 0; padding-right: 44px; box-shadow: 0 0 0 1px #d3def5; }
.ed-meet .ed-x, .ed-pay .ed-x { position: absolute; top: 8px; right: 8px; color: #7d8aa8; }
.ed-meet .ed-x:hover, .ed-pay .ed-x:hover { background: #fff; }
.c-piede { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.c-piede .nota { min-width: 0; font-size: 12.5px; color: var(--muted); }
.c-scrivi .err { margin: 0; }
.c-pannello { position: absolute; z-index: 5; top: 65px; right: 12px; bottom: 12px; width: min(380px, calc(100% - 24px)); display: flex; flex-direction: column; border-radius: 20px; background: var(--panel); box-shadow: 0 0 0 1px var(--sep), var(--ombra-2); }
.c-pan-t { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 8px 18px; }
.c-pan-t h3 { margin: 0; font-size: 16px; color: var(--q-ink); }
.c-pan-c { flex: 1; min-height: 0; overflow: auto; padding: 0 18px 18px; }

/* ---- note ---- */
.note-l { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.nota-v { padding: 12px 14px; border-radius: 14px; background: var(--panel-2); }
.nota-v p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.55; color: var(--q-ink); white-space: normal; overflow-wrap: anywhere; }
.nota-chi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; font-size: 12.5px; color: var(--muted); }
.nota-az { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.nota-az .mini { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; }
.nota-az .mini .i { width: 14px; height: 14px; }
.nota-az .mini.sicuro { background: var(--rif); color: #fff; }
.nota-v .nota-campo { margin-bottom: 8px; background: var(--panel); }
.nota-nuova { display: grid; gap: 8px; }
.nota-nuova .nota-az { justify-content: space-between; gap: 12px; }
.nota-nuova .err { margin: 0; }
.note-vuote, .note-solo { margin: 0 0 12px; font-size: 14px; color: var(--muted); }

/* ---- finestra dei tasti magici ---- */
.velo { position: fixed; z-index: 70; inset: 0; background: rgba(7, 11, 20, .42); }
/* centrata senza transform: così i menu dei campi (position: fixed) possono uscire dalla finestra */
.finestra { position: fixed; z-index: 71; inset: 0; margin: auto; width: min(520px, calc(100% - 24px)); height: fit-content; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: 24px; background: var(--panel); box-shadow: 0 0 0 1px var(--sep), 0 24px 60px rgba(7, 11, 20, .35); }
.finestra.larga { width: min(680px, calc(100% - 24px)); }
.fin-t { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 6px 24px; }
.fin-t h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--q-ink); }
.fin-t p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.fin-t p b { color: var(--q-ink); white-space: nowrap; }
.fin-c { flex: 1; min-height: 0; overflow: auto; display: grid; gap: 14px; align-content: start; padding: 12px 24px 6px; }
.fin-err { margin: 0 24px; }
.fin-f { flex: none; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 20px; }
.scelta { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 10px; }
.scelta .pill { background: var(--card-1); }
#fm-riass { margin: 0; }
#fm-riass.no { color: var(--rif); }
.fp-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fp-voci { display: grid; gap: 10px; }
.fp-riga { display: grid; grid-template-columns: 70px minmax(0, 1fr) 128px 104px 34px; align-items: center; gap: 10px; }
.fp-mese { gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.fp-mese .int-x { width: 34px; height: 20px; }
.fp-mese .int-x::after { width: 14px; height: 14px; }
.fp-mese input:checked + .int-x::after { transform: translateX(14px); }
.fp-mese:has(input:checked) { color: var(--title); }
.fp-cosa { min-width: 0; }
.fp-prezzo { position: relative; display: block; }
.fp-prezzo input { padding-right: 34px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.fp-prezzo.mese input { padding-right: 70px; }
.fp-prezzo span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--muted); pointer-events: none; }
.fp-agg { justify-self: start; display: inline-flex; align-items: center; gap: 6px; color: var(--title); }
.fp-agg .i { width: 15px; height: 15px; }
.fp-tot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--blu-s); color: var(--title); }
.fp-tot:empty { display: none; }
.fp-tot b { font-size: 18px; font-variant-numeric: tabular-nums; }
.fn-ultima { margin: 0; font-size: 13px; color: var(--muted); }
body.con-finestra { overflow: hidden; }

/* ---- pagine (Home, Outbound) ---- */
.pagina { width: 100%; max-width: 1180px; margin: 0 auto; display: grid; gap: 18px; padding: 22px 26px calc(40px + env(safe-area-inset-bottom)); }
.p-testa h2 { margin: 0; font-size: clamp(24px, 3vw, 30px); line-height: 1.15; font-weight: 800; letter-spacing: -.035em; color: var(--q-ink); }
.p-testa p:not(.sopra) { max-width: 70ch; margin: 8px 0 0; color: var(--ink-2); }
.p-avviso { padding: 8px 12px; border-radius: 10px; background: var(--avv-warn); color: var(--warn-tx) !important; font-size: 13.5px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.tile { display: grid; gap: 2px; padding: 16px 18px; border-radius: 20px; background: linear-gradient(180deg, var(--card-1), var(--card-2)); color: inherit; text-decoration: none; transition: box-shadow .15s; }
.tile:hover { box-shadow: 0 0 0 1.5px var(--blu); }
.tile-n { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.04em; color: var(--q-ink); font-variant-numeric: tabular-nums; }
.tile-t { font-size: 14px; font-weight: 700; color: var(--title); }
.tile-s { font-size: 12.5px; color: var(--muted); }
.tile.caldo { background: linear-gradient(135deg, var(--navy), var(--navy-2)); box-shadow: var(--alone); }
.tile.caldo .tile-n, .tile.caldo .tile-t, .tile.caldo .tile-s { color: #fff; }
.h-colonne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.h-lista, .h-eventi, .coll, .o-camp { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.h-lista a { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 12px; color: inherit; text-decoration: none; }
.h-lista a:hover { background: var(--panel-2); }
.h-chi { flex: 1; min-width: 0; display: grid; }
.h-chi b, .h-chi small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-chi b { font-size: 14.5px; color: var(--q-ink); }
.h-chi small { font-size: 12.5px; color: var(--muted); }
.h-att { font-size: 12.5px; font-weight: 600; color: var(--title); white-space: nowrap; }
.h-eventi li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--sep); font-size: 14px; color: var(--ink); }
.h-eventi li:last-child { border-bottom: 0; }
.h-eventi .i { width: 17px; height: 17px; margin-top: 2px; color: var(--title); }
.h-eventi a { color: inherit; text-decoration: none; }
.h-eventi a:hover { color: var(--title); text-decoration: underline; }
.h-eventi time { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.coll { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.coll li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--panel-2); }
.coll li > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.coll b { font-size: 14px; color: var(--q-ink); }
.coll small { font-size: 12.5px; color: var(--muted); }
.punto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--linea); }
.coll-ok .punto { background: var(--blu); box-shadow: var(--alone); }
.coll-prova .punto { background: var(--blu); opacity: .45; }
.o-colonne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.o-form { display: grid; gap: 14px; }
.o-form .pill { justify-self: start; }
.o-piede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.o-piede .nota { font-size: 12.5px; color: var(--muted); }
.o-form .err { margin: 0; }
.o-camp { gap: 10px; }
.o-camp li { padding: 12px 14px; border-radius: 14px; background: var(--panel-2); }
.o-c-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.o-c-t b { color: var(--q-ink); }
.o-camp p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); }
.o-camp .o-num { font-size: 12.5px; color: var(--muted); }
.o-nota { padding-top: 6px; font-style: italic; }
.o-barra { height: 6px; margin: 10px 0 6px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.o-barra span { display: block; height: 100%; border-radius: inherit; background: var(--blu); }
.stato-camp-in-attesa { background: var(--card-2); color: var(--ink-2); }
.stato-camp-in-corso { background: var(--blu-s); color: var(--title); }
.stato-camp-finita { background: var(--panel); color: var(--muted); }
.tabella { overflow-x: auto; }
.tabella table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th { padding: 8px 10px; border-bottom: 1px solid var(--linea); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); text-align: left; white-space: nowrap; }
.tabella td { padding: 10px; border-bottom: 1px solid var(--sep); color: var(--ink); white-space: nowrap; }
.tabella td b { display: block; color: var(--q-ink); }
.tabella td small { color: var(--muted); }
.tabella tr[data-vai] { cursor: pointer; }
.tabella tr[data-vai]:hover td { background: var(--panel-2); }

/* ---- Customers e Leads Notes: elenco e scheda ---- */
.due-col { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); }
.d-elenco { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--sep); }
.d-elenco-t { flex: none; display: grid; gap: 8px; padding: 16px 16px 10px; }
.d-dettaglio { min-width: 0; min-height: 0; overflow: auto; }
.scheda { display: flex; flex-direction: column; min-height: 100%; }
.scheda-c { display: grid; gap: 16px; padding: 18px 22px calc(32px + env(safe-area-inset-bottom)); }
.scheda-c > p { margin: 0; }
.dati { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.dati > div { display: grid; gap: 2px; align-content: start; padding: 12px 14px; border-radius: 14px; background: var(--panel-2); }
.dati small { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.dati b { font-size: 15.5px; color: var(--q-ink); }
.dati b.soldi { font-size: 20px; color: var(--title); font-variant-numeric: tabular-nums; }
.dati span { font-size: 12.5px; color: var(--muted); }
.voci { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.voci td { padding: 8px 0; border-bottom: 1px solid var(--sep); }
.voci td + td { text-align: right; font-weight: 600; color: var(--q-ink); white-space: nowrap; }
.voci tr:last-child td { border-bottom: 0; }
.voci small { color: var(--muted); }
.niente .i { width: 46px; height: 46px; stroke: var(--linea); stroke-width: 1.5; }

/* ---- schermi medi ---- */
@media (max-width: 1060px) {
  .sales, .due-col { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr); }
  .c-tag .tag:not(.cod-tasto) { display: none; }
  .h-colonne, .o-colonne { grid-template-columns: 1fr; }
}
/* ---- telefono: il menu va in basso; elenco → chat una alla volta ---- */
@media (max-width: 760px) {
  .scelta .pill { display: flex; flex-wrap: nowrap; justify-self: stretch; }
  .scelta .pill button { flex: 1; min-width: 0; padding-inline: 4px; }
  .portale { display: flex; flex-direction: column; }
  .rail { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; flex-direction: row; justify-content: space-around; gap: 2px; padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-right: 0; border-top: 1px solid var(--sep); background: var(--bg); }
  .rail a { flex: 1; max-width: 96px; padding: 7px 2px 6px; font-size: 10.5px; }
  .sezioni { flex: 1; padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  body.in-chat .rail, body.scrivendo .rail, body[data-sez="inbox"]:not(.vista-elenco) .rail { display: none; }
  body.in-chat .sezioni, body.scrivendo .sezioni, body[data-sez="inbox"]:not(.vista-elenco) .sezioni { padding-bottom: 0; }
  body:not([data-sez="inbox"]) .marchio { display: flex; }
  body:not([data-sez="inbox"]) .marchio span { display: none; }
  body:not([data-sez="inbox"]) .utente { display: flex; }
  body:not([data-sez="inbox"]) .testa .tema { margin-left: 0; }
  .testa-titolo { font-size: 15px; }
  body:not([data-sez="inbox"]) .testa-titolo { display: block; flex: 1; min-width: 0; padding-left: 4px; }
  .s-tt h2, .d-elenco-t h2 { display: none; }
  .s-tt { justify-content: flex-end; }
  body.in-chat .testa { display: none; }
  .sales, .due-col { display: flex; flex-direction: column; }
  .s-elenco, .d-elenco { flex: 1; border-right: 0; }
  .s-chat, .d-dettaglio { display: none; flex: 1; }
  .sales.in-chat .s-elenco, .due-col.in-dett .d-elenco { display: none; }
  .sales.in-chat .s-chat, .due-col.in-dett .d-dettaglio { display: flex; }
  .due-col.in-dett .d-dettaglio { display: block; }
  .c-indietro { display: grid; }
  .c-testa { gap: 10px; padding: 10px 12px; }
  .c-testa .av { display: none; }
  .c-tag { display: none; }
  .c-note-t span { display: none; }
  .c-note-t { padding: 0 12px; }
  .c-corpo { padding: 14px 12px 16px; }
  .bolla { max-width: 88%; }
  .bolla.out { width: 100%; }
  .b-frame { min-width: 0; }
  .c-scrivi { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  .magico span { display: none; }
  .magico { width: 38px; padding: 0; justify-content: center; }
  .c-barra .sep { margin: 0 2px; }
  .c-piede .nota { display: none; }
  .c-piede { justify-content: flex-end; }
  .c-pannello { top: 58px; right: 8px; left: 8px; bottom: 8px; width: auto; }
  .finestra, .finestra.larga { inset: auto 0 0 0; margin: 0; width: 100%; max-height: 92dvh; border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .scelta { grid-template-columns: 1fr; gap: 6px; }
  .fp-griglia { grid-template-columns: 1fr; }
  .fp-riga { grid-template-columns: minmax(0, 1fr) 128px 34px; }
  .fp-mese { grid-column: 1 / -1; order: 9; justify-self: start; }
  .fp-mese-vuoto { display: none; }
  .fp-riga > .et-p { grid-column: 1 / -1; }
  .pagina { padding: 16px 14px calc(28px + env(safe-area-inset-bottom)); }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile-n { font-size: 26px; }
  .scheda-c { padding: 14px 14px calc(24px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .tile, .int-x, .int-x::after { transition: none; } }

/* ---- campo con suggerimenti (servizio e add-on nel pagamento) ---- */
.combo { position: relative; min-width: 0; }
.combo-campo { width: 100%; min-width: 0; height: 44px; padding: 0 40px 0 14px; border: 1px solid var(--linea); border-radius: 12px; outline: none; background: var(--panel-2); font: 600 14.5px var(--f); color: var(--q-ink); text-overflow: ellipsis; }
.combo-campo::placeholder { font-weight: 400; color: var(--muted); }
.combo-campo:focus { border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-s); background: var(--panel); }
.combo-freccia { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; transform: translateY(-50%); }
.combo-freccia:hover { background: var(--card-1); color: var(--title); }
.combo-freccia .i { width: 18px; height: 18px; }
.combo-campo[aria-expanded="true"] + .combo-freccia .i { transform: rotate(180deg); color: var(--title); }
.combo-menu { position: fixed; z-index: 80; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--linea) transparent; padding: 6px; border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 1px var(--sep), var(--ombra-2); }
.combo-voce { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.combo-voce[aria-selected="true"] { background: var(--blu-s); }
.combo-voce b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--q-ink); }
.combo-voce small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.combo-voce mark { background: none; color: var(--title); font-weight: 800; }
.combo-voce.libera { margin-top: 4px; border-top: 1px solid var(--sep); border-radius: 0 0 10px 10px; padding-top: 10px; }
.combo-voce.libera b { color: var(--title); }
.combo-menu .td-gruppo:first-child { padding-top: 6px; }

/* ---- in locale: il nome in alto apre il menu per entrare come un'altra persona ---- */
.chi-sei.cambia { gap: 6px; border: 0; cursor: pointer; font: 600 14px var(--f); }
.chi-sei.cambia:hover, .chi-sei.cambia[aria-expanded="true"] { background: var(--blu-s); color: var(--title); }
.chi-sei.cambia .i { width: 16px; height: 16px; color: var(--muted); }
#menu-persone { min-width: 220px; }
#menu-persone .menu-t { margin: 4px 10px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
#menu-persone button .av { width: 26px; height: 26px; font-size: 11.5px; }
#menu-persone button[aria-current="true"] { color: var(--title); font-weight: 600; }
#menu-persone button .i { width: 16px; height: 16px; margin-left: auto; color: var(--title); }
@media (max-width: 760px) { .chi-sei.cambia .nome { display: none; } }

/* ---- banner nell'editor: il cursore ci passa sopra e sotto; scelto = sta per essere tolto (Backspace di nuovo) ---- */
.ed-meet, .ed-pay { cursor: default; border-radius: 16px; }
.ed-meet.scelto, .ed-pay.scelto { outline: 3px solid var(--blu); outline-offset: 3px; }
.ed-pay.scelto .tpl-pay { box-shadow: none; }

/* ---- totale con un abbonamento: «Totale di oggi», poi «Poi, ogni mese» più piccolo ---- */
.tpl-pay tr.poi td { padding: 0 0 4px; border-bottom: 0; font-size: 13px; font-weight: 600; color: #7d8aa8; }
.tpl-pay tr.poi td + td { color: #7d8aa8; }
.fp-tot > span { display: grid; gap: 1px; }
.fp-tot small { font-size: 12.5px; font-weight: 600; color: var(--muted); }