html.light .kb-table { background: rgba(252,250,246,.85); }
html.light .kb-table th { background: linear-gradient(180deg, #f1ecdf, #e8e2d0); }
html.light .kb-table tr:hover td { background: rgba(156,119,40,.05); }
html.light .kbm-total-box { box-shadow: 0 10px 30px rgba(80,66,38,.12); }
/* verde "incassato": tono più scuro per leggibilità su marmo. "Da incassare" non
serve più un override: usa var(--accent), l'oro del tema, già theme-aware. */
html.light .kb-pay-tag-inc { color: #3f8f42; }
html.light #kb-pay-inc { color: #3f8f42; border-color: #3f8f42; }
/* Chip metriche "Call prenotate" admin: colpo d'occhio su effettuate/prenotate/rifiutate/WCR */
.kbm-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kbm-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 700;
white-space: nowrap;
}
/* "effettuate" in AZZURRO (richiesta utente per il chip accanto alla data
nella vista utente; applicato ovunque per coerenza col resto dei chip). */
.kbm-chip-eff { background: var(--chip-bg-blue); color: var(--blue); border: 1px solid var(--blue); }
.kbm-chip-pren { background: var(--chip-bg-green); color: var(--green); border: 1px solid var(--green); }
.kbm-chip-rif { background: var(--chip-bg-red); color: var(--red); border: 1px solid var(--red); }
.kbm-chip-wcr { background: var(--chip-bg-gold); color: var(--accent); border: 1px solid var(--accent2); }
/* Riquadro del TOTALE: bordo in accento + etichetta, per distinguerlo a colpo
d'occhio dalle righe dei singoli commerciali (che usano il bordo neutro). */
.kbm-total-box {
position: relative; overflow: hidden;
background: linear-gradient(165deg, var(--surface2), var(--surface));
border: 1px solid var(--gold-line); border-radius: 12px;
padding: 16px 20px; margin-bottom: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.kbm-total-box::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: var(--gold-grad);
}
.kbm-total-label {
font-family: var(--font-display); font-size: 10px; letter-spacing: .22em;
text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
/* Card grandi e indipendenti per le metriche del TOTALE — più spazio rispetto ai
chip compatti (che restano per le righe dei singoli commerciali, dove una card
a testa affollerebbe la pagina). Flex, non grid a colonne fisse: qualunque sia
il numero di card restano SEMPRE sulla stessa riga, si restringono insieme
invece di andare a capo (min-width:0 permette a testo/numeri di comprimersi). */
.kbm-stat-grid {
display: flex; gap: 10px; margin-top: 8px;
}
.kbm-stat-card {
flex: 1 1 0; min-width: 0;
border-radius: 10px; padding: 13px 8px; text-align: center; border: 1px solid var(--border);
}
/* NIENTE MICHROMA SUI NUMERI DELLE CARD: alcune portano importi (Venduto,
Profitto generato, i totali del Flusso) e il glifo dell'euro di Michroma e'
un cerchio che a schermo si legge come una "O" — il bug che Logan segnalava
da mesi. Font del corpo in grassetto: stessa presenza, simbolo leggibile.
In piu' le varianti .kbm-stat-num-pair/-ratio erano gia' in Inter, quindi
la card Venduto cambiava carattere quando la si cliccava: ora non piu'. */
.kbm-stat-num { font-size: 20px; font-weight: 800; letter-spacing: .01em;
line-height: 1; white-space: nowrap; }
.kbm-stat-label {
font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
color: var(--muted); margin-top: 7px; white-space: nowrap;
}
.kbm-stat-eff { background: var(--chip-bg-neutral); border-color: var(--border); }
.kbm-stat-eff .kbm-stat-num { color: var(--text); }
.kbm-stat-dig { background: var(--chip-bg-blue); border-color: var(--blue); }
.kbm-stat-dig .kbm-stat-num { color: var(--blue); }
.kbm-stat-pren { background: var(--chip-bg-green); border-color: var(--green); }
.kbm-stat-pren .kbm-stat-num { color: var(--green); }
.kbm-stat-rif { background: var(--chip-bg-red); border-color: var(--red); }
.kbm-stat-rif .kbm-stat-num { color: var(--red); }
.kbm-stat-wcr { background: var(--chip-bg-gold); border-color: var(--accent2); }
.kbm-stat-wcr .kbm-stat-num { color: var(--accent); }
.kbm-stat-noshow { background: var(--chip-bg-orange); border-color: var(--orange); }
.kbm-stat-noshow .kbm-stat-num { color: var(--orange); }
/* Card "Venduto" cliccabile: mostra a richiesta Incassato/Venduto (quanto del
ricavato è davvero entrato). Numero più piccolo e nel font normale (non
Michroma, illeggibile a questa dimensione) quando mostra i due valori. */
.kbm-stat-clickable { cursor: pointer; transition: filter .15s, transform .15s; }
.kbm-stat-clickable:hover { filter: brightness(1.1); transform: translateY(-1px); }
.kbm-stat-num-ratio {
font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 700;
line-height: 1.4; white-space: nowrap;
}
.kbm-stat-num-ratio .kbm-stat-ven { opacity: .6; font-weight: 600; }
/* Card "Incassato / Venduto" delle viste per canale: i due importi SEMPRE
visibili e su UNA SOLA RIGA (richiesta utente: a capo non piaceva). Non
essendo divisa in due righe può stare più grande della .kbm-stat-num-ratio
qui sopra, che invece è il ripiego della card cliccabile della Generale. */
.kbm-stat-num-pair {
font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700;
line-height: 1.25; white-space: nowrap;
}
.kbm-stat-num-pair .kbm-stat-ven { opacity: .6; font-weight: 600; }
/* colonne "placeholder" della griglia Ads (dati piattaforma non ancora collegati) */
.kb-table td.kbm-ph, .kb-table th.kbm-ph { color: var(--muted); opacity: .6; }
/* Doppia barra di scorrimento orizzontale per le tabelle larghe (griglia Ads a
22 colonne): una sopra e una sotto, sincronizzate — non serve scendere fino
in fondo alla tabella per scorrere lateralmente. */
/* Griglia Ads: BOX a scorrimento con altezza limitata al viewport → la
scrollbar orizzontale resta sempre in fondo al box (sempre visibile, anche
in mezzo a una tabella lunga). L'intestazione è STICKY in alto nel box, così
scorrendo in verticale non si perdono i nomi delle 23 colonne. */
.kbm-scrollx-bottom { overflow: auto; max-height: calc(100vh - 300px); }
.kbm-scrollx-bottom table th { position: sticky; top: 0; z-index: 5; }
/* ── KPI aziendali (modulo business, prefisso kb-) ── */
.kb-tabs { display: flex; gap: 6px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.kb-tab {
padding: 10px 18px; cursor: pointer;
border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
background: transparent; border-radius: 0;
color: var(--muted); font-size: 12px; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase;
transition: color .15s, border-color .15s;
}
.kb-tab:hover { color: var(--text); }
.kb-tab.active {
color: var(--accent); border-bottom-color: var(--accent);
text-shadow: 0 0 14px rgba(216,180,94,.4);
}
/* Campanella "da riconciliare" (call aperte da 7+ giorni): in alto a destra
del titolo KPI aziendali, lampeggia in rosso, col pallino del conteggio.
Compare SOLO quando ci sono call in ritardo. */
.kb-head-row { display: flex; align-items: center; gap: 14px; }
.kb-bell-wrap { position: relative; }
.kb-bell {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
background: var(--chip-bg-red); border: 1px solid var(--red); color: var(--red);
animation: kb-bell-blink 1.1s ease-in-out infinite;
}
.kb-bell svg { width: 20px; height: 20px; }
@keyframes kb-bell-blink {
0%, 100% { box-shadow: 0 0 0 rgba(217,92,76,0); transform: scale(1); }
50% { box-shadow: 0 0 15px rgba(217,92,76,.8); transform: scale(1.07); }
}
.kb-bell-badge {
position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
display: flex; align-items: center; justify-content: center;
border-radius: 9px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800;
box-shadow: 0 0 8px rgba(217,92,76,.6);
}
.kb-bell-panel {
position: absolute; top: 48px; left: 0; z-index: 50; width: min(400px, 86vw);
background: var(--surface); border: 1px solid var(--red); border-radius: 12px;
box-shadow: 0 12px 40px rgba(0,0,0,.5); padding: 4px;
}
/* L'AGENDA del commerciale (ago 2026): la tabella delle call prenotate su
Conneqto da spuntare e registrare. Le PASSATE mai registrate hanno il velo
arancio e il badge, come i warning che spegneranno. */
.kb-agenda-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#kb-agenda { margin-bottom: 16px; }
#kb-agenda .kb-table td { vertical-align: middle; }
.kb-ag-passata td { background: var(--chip-bg-orange); }
.kb-ag-mai {
display: inline-block; padding: 2px 9px; border-radius: 999px;
border: 1px solid var(--orange); color: var(--orange);
font-size: 10.5px; letter-spacing: .04em; white-space: nowrap;
}
.kb-ag-inb { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); }
/* La riga su cui il warning ci ha portati: gia' spuntata, e si deve VEDERE
qual e' senza cercarla in mezzo alle altre. Il filo d'oro a sinistra e' la
stessa firma del resto della console. */
.kb-ag-mira td { background: var(--gold-faint); }
.kb-ag-mira td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
/* Tendina "l'ha prenotata…": sta nella colonna Azione accanto al tasto,
quindi deve restare piccola e non rubare la scena al bottone. */
.kb-warn-gira select {
margin-left: 6px; padding: 3px 6px; font-size: 11.5px;
background: var(--surface2); color: var(--muted);
border: 1px solid var(--border); border-radius: 6px;
}
.kb-warn-gira select:hover { color: var(--text); border-color: var(--accent2); }
.kb-ag-canale select { margin-right: 5px; }
.kb-agenda-foot { margin-top: 10px; display: flex; justify-content: flex-end; }
/* testata dello storico collassabile (24/08): parte chiuso, si apre da qui */
/* RETTIFICHE sulla fee (ago 2026): righe che si sommano col segno alla fee
del mese. In attesa = velo dorato, finché un admin non decide. */
.kb-fee-rett { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--gold-line); }
.kb-fee-rett-tit { display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
font-family: var(--font-display); text-transform: uppercase; letter-spacing: .07em;
font-size: 12px; color: var(--accent); }
.kb-fee-meno { color: var(--red); white-space: nowrap; }
.kb-fee-piu { color: var(--green); white-space: nowrap; }
.kb-fee-attesa td { background: var(--gold-faint); }
.kb-fee-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
border: 1px solid var(--gold-line); font-size: 10px; letter-spacing: .04em; color: var(--muted); }
.kb-fee-tag.att { border-color: var(--accent2); color: var(--accent); }
.kb-fee-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.kb-fee-add input { flex: 0 1 240px; }
.kb-fee-add input[type=number] { flex: 0 0 170px; }
.kbm-fee-importo { width: 130px; }
/* COACHING (ago 2026): il registro delle sessioni del coach. Le passate da
confermare hanno il velo dorato, come le cose che aspettano una mano. */
.kb-co-si { color: var(--green); }
.kb-co-no { color: var(--muted); }
.kb-co-att { color: var(--accent); }
.kb-co-daconf td { background: var(--gold-faint); }
.kb-co-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.kb-co-tipo { font-size: 12px; color: var(--muted); }
/* Il tastino che RIAPRE la scelta dell'esito su una sessione gia' decisa.
Fondo TRASPARENTE e non il chip oro: sta accanto a un numero e deve farsi
notare senza rubare la scena al compenso. Solo bordo e glifo, che seguono
il tema da soli; si riempie d'oro al passaggio del mouse. */
.kb-co-cambia {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; margin-left: 6px; padding: 0; vertical-align: middle;
border: 1px solid var(--accent2); border-radius: 6px; font-size: 13px;
font-family: inherit; line-height: 1;
background: transparent; color: var(--accent); cursor: pointer;
transition: background .15s, color .15s;
}
.kb-co-cambia:hover { background: var(--accent); color: var(--bg); }
/* IL LIVELLO DEL COACH (ago 2026): gli upsell del mese sbloccano gradini di
tariffa, e la proiezione dice quanto vale arrivare al prossimo. Sobrio:
oro e hairline come il resto, l'effetto lo fanno i numeri. */
.kb-lv { margin-bottom: 18px; border: 1px solid var(--gold-line); border-radius: 12px;
overflow: hidden; background: var(--surface); }
.kb-lv-head { display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap; padding: 16px 18px 14px;
background: radial-gradient(420px 90px at 12% 0%, var(--gold-faint), transparent 70%),
var(--chip-bg-gold); border-bottom: 1px solid var(--gold-line); }
.kb-lv-liv { font-family: var(--font-display); text-transform: uppercase;
letter-spacing: .09em; font-size: 11px; color: var(--muted); }
/* Gli IMPORTI non usano Michroma: il suo glifo dell'euro e' un cerchio e a
schermo si legge come una "O" (Logan lo chiama "il solito bug"). Font del
corpo in grassetto: stessa presenza, simbolo leggibile. Le ETICHETTE qui
intorno restano in Michroma. */
.kb-lv-tar { margin-top: 4px; font-size: 25px; font-weight: 800;
letter-spacing: .01em; color: var(--accent); line-height: 1; }
.kb-lv-tar span { font-family: inherit; font-size: 12px; color: var(--muted);
letter-spacing: .02em; }
.kb-lv-tot { text-align: right; }
.kb-lv-tot-n { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
.kb-lv-tot-l { margin-top: 4px; font-size: 10.5px; color: var(--muted);
text-transform: uppercase; letter-spacing: .06em; }
.kb-lv-steps { display: flex; gap: 8px; padding: 14px 18px 10px; }
.kb-lv-step { flex: 1; text-align: center; padding: 9px 4px; border-radius: 9px;
border: 1px solid var(--border); background: var(--surface2); opacity: .55; }
.kb-lv-step.on { opacity: 1; border-color: var(--accent2); background: var(--chip-bg-gold); }
.kb-lv-step.now { box-shadow: 0 0 0 1px var(--accent) inset; }
.kb-lv-step-eur { font-size: 16px; font-weight: 800; color: var(--accent); }
.kb-lv-step-lbl { margin-top: 3px; font-size: 10px; color: var(--muted);
text-transform: uppercase; letter-spacing: .05em; }
.kb-lv-bar { height: 7px; margin: 4px 18px 0; border-radius: 999px;
background: var(--surface2); border: 1px solid var(--border); overflow: hidden; }
.kb-lv-fill { height: 100%; background: var(--gold-grad); transition: width .5s ease; }
.kb-lv-sotto { display: flex; justify-content: space-between; gap: 12px;
padding: 9px 18px 0; font-size: 12px; color: var(--muted); }
.kb-lv-sotto strong { color: var(--accent); font-size: 14px; font-weight: 800; }
.kb-lv-manca { color: var(--accent); }
.kb-lv-pro { display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
margin: 14px 18px 0; padding: 13px 15px; border-radius: 10px;
border: 1px solid var(--accent2); background: var(--gold-faint); }
.kb-lv-pro-n { font-size: 24px; font-weight: 800; color: var(--green);
line-height: 1; white-space: nowrap; }
.kb-lv-pro-t { flex: 1; min-width: 220px; font-size: 12.5px; line-height: 1.6; color: var(--text); }
.kb-lv-nota { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.kb-lv-rin { padding: 14px 18px 16px; }
.kb-lv-rin-tit { display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
font-size: 11px; color: var(--muted); }
.kb-co-sel { padding: 3px 6px; font-size: 12px; }
.kb-storico-head {
display: flex; align-items: center; gap: 8px; cursor: pointer;
margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--gold-line);
font-family: var(--font-display); font-size: 12px;
text-transform: uppercase; letter-spacing: .07em; color: var(--accent);
user-select: none;
}
.kb-storico-head:hover .kb-storico-caret { color: var(--accent); }
.kb-storico-caret { color: var(--accent2); font-size: 13px; line-height: 1; }
.kb-bell-item { padding: 13px 13px 15px; border-bottom: 1px solid var(--border); }
.kb-bell-item:last-child { border-bottom: none; }
.kb-bell-item p { font-size: 13px; line-height: 1.55; color: var(--text); margin-bottom: 12px; }
.kb-bell-item p b { color: var(--accent); }
/* Campanella NOTIFICHE OWNER (header admin): oro, lampeggia solo se ci sono
notifiche non lette (classe .has-unread). Riusa .kb-bell-panel/.kb-bell-badge. */
.kbm-notif-wrap { position: relative; display: inline-flex; vertical-align: middle; }
.kbm-notif-btn {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
background: var(--chip-bg-gold); border: 1px solid var(--accent2); color: var(--accent);
}
.kbm-notif-btn svg { width: 18px; height: 18px; }
.kbm-notif-btn.has-unread { border-color: var(--red); color: var(--red);
animation: kb-bell-blink 1.1s ease-in-out infinite; }
.kbm-notif-panel { border-color: var(--accent2); max-height: 62vh; overflow: auto; left: auto; right: 0; }
.kbm-notif-empty { padding: 18px 14px; color: var(--muted); font-size: 13px; text-align: center; }
.kbm-notif-row { padding: 12px 13px; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.5; }
.kbm-notif-row:last-child { border-bottom: none; }
.kbm-notif-row.nuova { background: var(--gold-faint); }
.kbm-notif-when { display: block; margin-top: 5px; font-size: 11px; color: var(--muted); }
/* A chi è indirizzata: il testo dà del tu al commerciale, l'owner deve sapere
a chi. Solo nel pannello dell'owner, il commerciale sa già di essere lui. */
.kbm-notif-di {
display: inline-block; margin-right: 6px; padding: 1px 7px;
border: 1px solid var(--gold-line); border-radius: 999px;
font-size: 10.5px; letter-spacing: .04em; color: var(--accent);
vertical-align: baseline;
}
/* TABELLA WARNING del commerciale (ago 2026): la campanella è una sola,
quella dell'header, e per lui contiene la stessa tabella del tab Warning
admin (filtrata sui suoi) più la colonna Azione, dove sono finiti i
tasti della vecchia campanella di sezione. */
.kbm-notif-panel.kb-warnv { width: min(780px, 94vw); padding: 8px; }
.kb-warnv .kb-table { font-size: 12.5px; }
.kb-warnv .kb-table td { vertical-align: middle; }
.kb-warnv-az { white-space: nowrap; }
.kb-warnv-az .btn { margin: 2px 4px 2px 0; }
.kb-warnv-az .kb-bell-date { margin: 2px 4px 2px 0; }
.kb-warnv-nuova td { background: var(--gold-faint); }
/* POPUP DEI WARNING per admin/owner (rifinito il 21/08 su richiesta di
Logan: "cura maniacale, come Apple"). TRE PIANI DI COLORE che separano
le zone senza gridare:
- TESTATA su chip-bg-gold, con un alone di luce dorata in alto a
sinistra e il filo gradiente sul bordo superiore (stessa firma
delle card del Control Center);
- CORPO sul fondo della modale (surface2), solo hairline tra le righe;
- PIEDE (e l'eventuale "Da controllare") su surface, il piano di
servizio. L'icona sta in un badge arancio: e' l'unico punto caldo,
tutto il resto e' oro su nero (o oro scuro su marmo di giorno). */
.kb-modal.kbm-riass-modal {
max-width: 400px; text-align: left; padding: 0; overflow: hidden;
border-color: var(--gold-line);
animation: kbm-riass-in .22s ease-out;
}
@keyframes kbm-riass-in {
from { opacity: 0; transform: translateY(-10px) scale(.97); }
to { opacity: 1; transform: none; }
}
/* filo di luce dorata sul bordo alto */
.kbm-riass-modal::before {
content: ''; display: block; height: 2px; background: var(--gold-grad);
}
.kbm-riass-head {
display: flex; align-items: center; gap: 13px;
padding: 17px 22px 16px;
background:
radial-gradient(340px 80px at 16% 0%, var(--gold-faint), transparent 72%),
var(--chip-bg-gold);
border-bottom: 1px solid var(--gold-line);
}
.kbm-riass-icona {
flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 10px;
background: var(--chip-bg-orange);
border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent);
color: var(--orange);
}
.kbm-riass-icona svg { width: 19px; height: 19px; }
.kbm-riass-titolo {
font-family: var(--font-display); text-transform: uppercase;
letter-spacing: .09em; font-size: 13.5px; color: var(--accent);
}
.kbm-riass-sub { margin-top: 4px; font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }
.kbm-riass-lista { padding: 4px 22px; max-height: 46vh; overflow: auto; }
.kbm-riass-riga {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 12px 0; border-bottom: 1px solid var(--border);
}
.kbm-riass-riga:last-child { border-bottom: none; }
.kbm-riass-nome { font-size: 13.5px; color: var(--text); letter-spacing: .01em; }
.kbm-riass-n {
flex: 0 0 auto; min-width: 30px; text-align: center;
padding: 4px 10px; border-radius: 999px;
background: var(--chip-bg-gold); border: 1px solid var(--accent2);
font-family: var(--font-display); font-size: 12px; color: var(--accent);
}
.kbm-riass-vuoto { padding: 22px; font-size: 13px; color: var(--muted); }
/* Notifiche di sola lettura dentro il popup: non hanno bottoni, servono a
spiegare perche' la campanella si e' accesa. Piu' sobrie di quelle con
azione, che devono restare le protagoniste. */
.kbm-riass-solo { display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; color: var(--muted); }
.kbm-riass-dest { flex: 0 0 auto; font-size: 10.5px; text-transform: uppercase;
letter-spacing: .06em; color: var(--accent); }
/* notifiche con azione (provenienza da correggere): zona di servizio */
.kbm-riass-extra {
padding: 13px 22px 8px; max-height: 34vh; overflow: auto;
background: var(--surface); border-top: 1px solid var(--border);
}
.kbm-riass-extra-tit {
font-family: var(--font-display); text-transform: uppercase;
letter-spacing: .09em; font-size: 10.5px; color: var(--muted); margin-bottom: 10px;
}
.kbm-riass-extra-row { font-size: 12.5px; line-height: 1.55; color: var(--text);
padding-bottom: 13px; }
.kbm-riass-btns {
display: flex; justify-content: flex-end; gap: 9px;
padding: 13px 22px 15px;
background: var(--surface); border-top: 1px solid var(--border);
}
.kbm-notif-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.kbm-notif-act {
font-size: 12px; padding: 6px 11px; border-radius: 8px; cursor: pointer; line-height: 1;
background: var(--chip-bg-gold); border: 1px solid var(--accent2); color: var(--accent);
font-family: inherit; transition: background .15s, border-color .15s;
}
.kbm-notif-act:hover { border-color: var(--accent); }
.kbm-notif-act.ok { border-color: var(--red); color: var(--red); }
.kbm-notif-act.ok:hover { background: rgba(217,92,76,.12); }
.kbm-notif-fix { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.kbm-notif-fix select {
font-size: 12px; padding: 6px 8px; border-radius: 8px;
background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-family: inherit;
}
/* Tendina Setter/Closer nelle righe di Gestione utenti. */
.kbm-tipo-sel { padding: 4px 8px; border-radius: 8px; font-size: 12px;
background: var(--chip-bg-gold); border: 1px solid var(--accent2); color: var(--accent); }
/* SCHEDA CLIENTE nelle card dei sospesi: storico incassi, avviso, dettagli */
.kb-sched-storico { display: flex; flex-direction: column; gap: 4px; }
.kb-sched-inc { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px;
padding: 4px 8px; border-radius: 8px; background: var(--surface2); }
.kb-sched-inc .d { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 74px; }
.kb-sched-inc .i { color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums; }
.kb-sched-inc .m { color: var(--muted); font-size: 11.5px; }
/* Incassi registrati da ME: data correggibile e ✕ per cancellarli (ago 2026).
La data resta discreta come il testo che sostituisce, si accende al passaggio. */
.kb-sched-inc input.d { background: transparent; border: 1px dashed var(--gold-line);
border-radius: 6px; padding: 1px 5px; font-size: 12.5px; font-family: inherit;
color: var(--muted); cursor: pointer; }
.kb-sched-inc input.d:hover, .kb-sched-inc input.d:focus {
border-style: solid; border-color: var(--accent2); color: var(--text); }
.kb-inc-x { margin-left: auto; background: transparent; border: none; cursor: pointer;
color: var(--muted); font-size: 12px; font-family: inherit; padding: 2px 6px;
border-radius: 6px; transition: .15s; }
.kb-inc-x:hover { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.kb-inc-x.armato { color: var(--red); font-weight: 700;
background: color-mix(in srgb, var(--red) 18%, transparent); }
.kb-sched-vuoto { font-size: 12px; color: var(--muted); font-style: italic; padding: 4px 0; }
.kb-sched-warn { color: var(--orange); font-size: 12px; font-weight: 600; }
/* Prossimo pagamento nella card: etichetta sopra e valore sotto, su due righe
VOLUTE — la vecchia pill unica si spezzava a metà quando la card è stretta. */
.kb-pay-prox { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 2px;
padding: 7px 11px; border-radius: 10px; background: var(--chip-bg-gold);
border: 1px solid var(--accent2); }
.kb-pay-prox .lbl { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
color: var(--muted); }
.kb-pay-prox .val { font-size: 13px; font-weight: 700; color: var(--accent);
font-variant-numeric: tabular-nums; }
.kb-pay-prox.tardi { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.kb-pay-prox.tardi .val { color: var(--red); }
/* PIANO RATE: elenco delle scadenze concordate dentro la scheda */
.kb-rate-lista { display: flex; flex-direction: column; gap: 5px; }
.kb-rata { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px;
background: var(--surface2); font-size: 12.5px; }
.kb-rata .n { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; font-size: 10.5px;
display: flex; align-items: center; justify-content: center; color: var(--accent);
border: 1px solid var(--gold-line); }
.kb-rata .d { min-width: 74px; color: var(--text); font-variant-numeric: tabular-nums; }
.kb-rata .i { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-right: auto; }
.kb-rata .m { font-size: 11px; color: var(--muted); }
.kb-rata.tardi .d { color: var(--red); }
.kb-rata.pagata { opacity: .72; }
.kb-rata.pagata .d, .kb-rata.pagata .i { text-decoration: line-through; }
.kb-rata.pagata .n { color: var(--green); border-color: var(--green); }
.kb-rata.pagata .ok { font-size: 10.5px; color: var(--green); font-weight: 600; }
.kb-rata-met { padding: 2px 6px; font-size: 11px; }
.kb-rate-piede { display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.kb-piano-info { font-size: 12px; color: var(--accent); align-self: center; }
.kb-pay-card.scheda-ko { border-style: dashed; }
.kb-sched-nota { font-size: 12.5px; color: var(--muted); }
/* Scheda cliente aperta dalla tabella admin dei sospesi */
/* Tasto della scheda: pieno e ben visibile (il tratteggio non piaceva).
Le schede da completare restano riconoscibili dal colore, non dal bordo. */
.kbm-sched-btn { padding: 5px 14px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
font-family: inherit; cursor: pointer; transition: .18s; white-space: nowrap;
letter-spacing: .02em; color: var(--accent);
background: var(--chip-bg-gold); border: 1px solid var(--accent2); }
.kbm-sched-btn:hover { background: var(--accent); border-color: var(--accent);
color: #0b0a07; box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 40%, transparent); }
.kbm-sched-btn.ko { color: var(--orange); border-color: var(--orange);
background: color-mix(in srgb, var(--orange) 14%, transparent); }
.kbm-sched-btn.ko:hover { background: var(--orange); border-color: var(--orange); color: #0b0a07;
box-shadow: 0 0 14px color-mix(in srgb, var(--orange) 40%, transparent); }
/* colonne specifiche per categoria nella tabella dei sospesi */
.kbm-piano-avanz { font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.kbm-piano-avanz .sep { color: var(--muted); font-weight: 400; margin: 0 1px; }
.kbm-col-ok { color: var(--green); font-variant-numeric: tabular-nums; }
/* Popup della scheda cliente. Registro Black&Gold: struttura oro, colore
SEMANTICO sui numeri (verde = entrato, azzurro = atteso, rosso = residuo). */
/* il popup non deve MAI sfondare lo schermo: testata e cifre fisse, il corpo scorre */
.kb-modal.kbm-sched-modal { max-width: 820px; width: 100%; text-align: left; padding: 0;
overflow: hidden; background: var(--surface); max-height: 86vh;
display: flex; flex-direction: column; }
.kbm-sched-head, .kbm-sched-cifre { flex: 0 0 auto; }
.kbm-sched-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px 16px;
border-bottom: 1px solid var(--gold-line); background: var(--gold-faint); }
.kbm-sched-chi { flex: 1; min-width: 0; }
.kbm-sched-nome { font-family: var(--font-display); font-size: 18px; color: var(--accent);
letter-spacing: .02em; }
.kbm-sched-sub { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.kbm-sched-stato { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px;
border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
color: var(--pill-color); border: 1px solid var(--pill-color);
background: color-mix(in srgb, var(--pill-color) 12%, transparent); }
.kbm-sched-stato .kb-pill-dot { background: var(--pill-color);
box-shadow: 0 0 8px var(--pill-color); }
.kbm-sched-x { background: transparent; border: 0; color: var(--muted); font-size: 16px;
cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 8px; }
.kbm-sched-x:hover { color: var(--accent); background: var(--gold-faint); }
/* fascia dei tre numeri chiave */
.kbm-sched-cifre { display: grid; grid-template-columns: repeat(3, 1fr);
border-bottom: 1px solid var(--gold-line); }
.kbm-sched-cifra { padding: 14px 22px; display: flex; flex-direction: column; gap: 4px; }
.kbm-sched-cifra + .kbm-sched-cifra { border-left: 1px solid var(--border); }
.kbm-sched-cifra .lbl { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
color: var(--muted); }
.kbm-sched-cifra .val { font-family: var(--font-display); font-size: 17px; color: var(--text);
font-variant-numeric: tabular-nums; }
.kbm-sched-cifra.ok .val { color: var(--green); }
.kbm-sched-cifra.ko .val { color: var(--red); }
/* Le tre aree IMPILATE una sotto l'altra (scelta di Logan: in colonna erano
strette e le note lunghe diventavano illeggibili). Ognuna col suo accento
a sinistra; il box scorre se il contenuto è tanto. */
.kbm-sched-box { display: flex; flex-direction: column; text-align: left;
overflow-y: auto; flex: 1 1 auto; }
.kbm-sched-col { padding: 16px 22px 18px; background: var(--surface);
border-left: 3px solid var(--col-accent, var(--gold-line));
min-width: 0; display: flex; flex-direction: column; }
.kbm-sched-col + .kbm-sched-col { border-top: 1px solid var(--border); }
.kbm-sched-col.c-oro { --col-accent: var(--accent2); }
.kbm-sched-col.c-verde { --col-accent: var(--green); }
.kbm-sched-col.c-azzurro { --col-accent: var(--blue); }
.kbm-sched-lbl { font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
color: var(--col-accent, var(--accent)); margin-bottom: 10px; font-weight: 600; }
/* titolo + data sulla STESSA riga (la descrizione del venditore va sotto) */
.kbm-sched-lbl.riga { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kbm-sched-quando { font-size: 14px; letter-spacing: 0; text-transform: none;
color: var(--blue); font-weight: 700; font-variant-numeric: tabular-nums; }
.kbm-sched-quando.tardi { color: var(--red); }
.kbm-sched-quando.vuoto { color: var(--muted); font-weight: 400; font-style: italic; }
/* testi lunghi (le note storiche possono essere chilometriche): tetto in
altezza + scorrimento nel proprio riquadro, e a capo sulle parole lunghe */
.kbm-sched-txt { font-size: 13px; color: var(--text); line-height: 1.55;
max-height: 160px; overflow-y: auto; white-space: pre-line; overflow-wrap: anywhere; }
.kbm-sched-col .kb-sched-storico { max-height: 170px; overflow-y: auto; }
.kbm-sched-col .kb-sched-nota { max-height: 130px; overflow-y: auto; margin-top: 8px;
white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5;
padding-top: 8px; border-top: 1px dashed var(--border); }
.kbm-sched-piano { max-height: 170px; overflow-y: auto; }
/* la barra di scorrimento resta discreta, in tono col tema */
.kbm-sched-txt::-webkit-scrollbar, .kbm-sched-col .kb-sched-storico::-webkit-scrollbar,
.kbm-sched-col .kb-sched-nota::-webkit-scrollbar, .kbm-sched-box::-webkit-scrollbar,
.kb-scheda-corpo::-webkit-scrollbar { width: 7px; }
.kbm-sched-txt::-webkit-scrollbar-thumb, .kbm-sched-col .kb-sched-storico::-webkit-scrollbar-thumb,
.kbm-sched-col .kb-sched-nota::-webkit-scrollbar-thumb, .kbm-sched-box::-webkit-scrollbar-thumb,
.kb-scheda-corpo::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 4px; }
/* corpo della scheda lato commerciale (campi modificabili dentro il popup) */
.kb-scheda-corpo { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 22px;
max-height: 62vh; overflow-y: auto; }
.kbm-sched-somma { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
font-size: 11.5px; color: var(--muted); display: flex; justify-content: space-between; }
.kbm-sched-somma b { color: var(--green); font-variant-numeric: tabular-nums; }
/* rate previste dentro il popup admin */
.kbm-sched-piano { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.kbm-sched-piano-lbl { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
color: var(--muted); margin-bottom: 8px; }
.kbm-sched-rata { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.kbm-sched-rata .n { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; font-size: 10px;
display: flex; align-items: center; justify-content: center; color: var(--blue);
border: 1px solid var(--blue); }
.kbm-sched-rata .d { min-width: 74px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kbm-sched-rata .i { color: var(--text); font-variant-numeric: tabular-nums; }
.kbm-sched-rata.tardi .d { color: var(--red); }
.kbm-sched-somma b.attesa { color: var(--blue); }
/* Permessi extra (utente ibrido): chip cliccabili nelle righe di Gestione utenti.
Spento = hairline neutra; acceso = oro pieno, come le altre conferme dell'app. */
.kbm-perm-wrap { display: inline-flex; gap: 5px; }
.kbm-perm { padding: 4px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
font-family: inherit; cursor: pointer; transition: .15s;
background: transparent; border: 1px dashed var(--border); color: var(--muted); }
.kbm-perm:hover { border-color: var(--accent2); color: var(--accent); }
.kbm-perm.on { background: var(--chip-bg-gold); border: 1px solid var(--accent2); color: var(--accent); }
.kb-bell-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kb-bell-date { padding: 6px 8px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 13px; }
/* Banner "promessa non mantenuta": grande, rosso, lampeggiante, in alto —
compare quando una call "Ora la segno" è scaduta (24h) ed è ancora aperta. */
.kb-nag {
margin: 22px 0 18px; padding: 18px 22px; border-radius: 12px; cursor: pointer;
background: var(--red); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.5;
border: 2px solid #fff3; text-align: center;
animation: kb-nag-blink .7s steps(1) infinite;
}
.kb-nag:hover { filter: brightness(1.08); }
.kb-nag b { text-decoration: underline; }
@keyframes kb-nag-blink {
0%, 100% { background: var(--red); box-shadow: 0 0 24px rgba(217,92,76,.7); }
50% { background: #a5352a; box-shadow: 0 0 6px rgba(217,92,76,.3); }
}
.kb-day {
display: flex; align-items: center; gap: 12px;
color: var(--accent); font-weight: 600; font-size: 12px;
letter-spacing: .08em; text-transform: uppercase; margin: 20px 0 10px;
}
.kb-day::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-line), transparent); }
.kb-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 13px; margin-bottom: 6px; font-size: 13px;
background: linear-gradient(165deg, var(--surface2), var(--surface));
border: 1px solid var(--border); border-radius: 9px;
transition: border-color .15s;
}
.kb-row:hover { border-color: rgba(216,180,94,.25); }
.kb-row .kb-lead { font-weight: 600; }
.kb-row .kb-meta { color: var(--muted); }
/* Chip "Call rifiutate": stesso principio del kb-row ma inline-flex invece di
block, così si stringe al contenuto invece di stirarsi su tutta la riga.
Bagliore rosso fisso (stesso colore piattaforma di YouTube, --pill-color
del kb-pill) — scelta estetica dell'utente, colore di marca non theme-aware
per design, come i pill delle piattaforme social. */
.kb-rif-chip {
display: inline-flex; align-items: center; gap: 9px;
padding: 8px 13px; margin-bottom: 20px; font-size: 13px;
background: linear-gradient(165deg, var(--surface2), var(--surface));
border: 1.5px solid #ff3b3b; box-shadow: 0 0 12px rgba(255,59,59,.4);
border-radius: 10px;
transition: box-shadow .2s, transform .15s;
}
.kb-rif-chip:hover { box-shadow: 0 0 20px rgba(255,59,59,.4); transform: translateY(-1px); }
.kb-rif-chip .kb-lead { font-weight: 600; }
/* Blocco Digitalizzazioni: stessa forma del chip rifiutate ma aura AZZURRA
(scelta utente), per distinguerlo bene dal rosso delle rifiutate. */
.kb-dig-chip { border-color: #38bdf8; box-shadow: 0 0 12px rgba(56,189,248,.55); }
.kb-dig-chip:hover { box-shadow: 0 0 22px rgba(56,189,248,.55); }
/* Riga dei due contatori del giorno affiancati (Digitalizzazioni | Call rifiutate). */
.kb-counters-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
/* Ricerca "Call (tra le prenotate aperte)": lista filtrata che appare sotto
l'input mentre si scrive, invece di una select con tutte le opzioni. */
.kb-autocomplete {
position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 40;
background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
max-height: 220px; overflow-y: auto; box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.kb-autocomplete-item { padding: 8px 12px; cursor: pointer; font-size: 13px; }
.kb-autocomplete-item:hover { background: var(--surface2); }
.kb-autocomplete-item .kb-meta { color: var(--muted); font-size: 12px; }
.kb-autocomplete-empty { padding: 8px 12px; color: var(--muted); font-size: 13px; }
/* Effetto GRIGLIA (come la vista Ads) su ogni .kb-table: righe E colonne visibili,
non solo separatori orizzontali — bordo anche a destra di ogni cella. */
.kb-table {
width: 100%; border-collapse: collapse; font-size: 13px;
background: rgba(14,14,17,.65);
border: 1px solid var(--border);
}
.kb-table th {
text-align: left; padding: 11px 12px; color: var(--accent); font-weight: 600;
font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
border-bottom: 1px solid var(--gold-line); border-right: 1px solid var(--border);
background: linear-gradient(180deg, #16161b, #101014);
white-space: nowrap;
}
.kb-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.kb-table th:last-child, .kb-table td:last-child { border-right: none; }
.kb-table tr:hover td { background: rgba(216,180,94,.07); }
/* Riga "fissata" col click (kb-hl): sfondo oro più marcato + barretta a sinistra,
per seguire una riga a colpo d'occhio sulle tabelle larghe senza perdersi.
Vince sull'hover (!important) così resta evidente anche passandoci sopra. */
.kb-table tr.kb-hl td { background: rgba(216,180,94,.16) !important; }
.kb-table tr.kb-hl td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
/* Bolle ovali nei dettagli espandibili (call di un commerciale): un lead per
bolla, puntino col colore della piattaforma + nome + canale in piccolo —
minimal, si adattano al contenuto invece di stirarsi su tutta la riga madre. */
.kb-pill-wrap { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 2px 2px; }
/* Pulsantino "vedi dettaglio" (occhio) per aprire nomi+provenienza sulla cella
Prenotazioni inbound della griglia Ads (kbmTogglePrenDetail) — sostituisce
la vecchia freccetta minuscola, poco chiara. */
.kbm-pren-detail {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; margin-left: 5px; padding: 0; vertical-align: middle;
border: 1px solid var(--accent2); border-radius: 6px;
background: var(--chip-bg-gold); color: var(--accent); cursor: pointer;
transition: background .15s, color .15s;
}
.kbm-pren-detail svg { width: 15px; height: 15px; }
.kbm-pren-detail:hover, .kbm-pren-detail.open { background: var(--accent); color: #0b0a07; }
/* Griglia compatta "Call prenotate" utente: una riga per giorno, numeri in evidenza.
width:auto → la tabella si dimensiona al contenuto invece di stirarsi a tutta
pagina (l'utente non vuole celle mezze vuote). I dettagli (bolle) vanno a capo
entro una larghezza contenuta così l'espansione non riallarga tutto. */
.kb-pren-grid { width: auto; max-width: 100%; }
.kb-pren-grid th, .kb-pren-grid .kb-pren-sumrow td { white-space: nowrap; }
.kb-pren-grid .kb-pren-detrow .kb-pill-wrap { max-width: 560px; }
.kb-pren-grid .kb-pren-count { font-family: var(--font-display); font-size: 15px; color: var(--accent); }
/* Etichetta sopra le bolle del dettaglio esito (Call effettuate). */
.kb-eff-detlabel { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 6px 2px; }
.kb-pren-grid .kb-pren-rif { color: var(--red); }
.kb-pren-grid .kb-pren-dig { color: #38bdf8; }
.kb-pren-grid .kb-pren-risp { color: var(--text); }
.kb-pren-grid .kb-pren-sumrow td { vertical-align: middle; }
/* La riga-dettaglio non deve avere i bordi/sfondo della griglia madre. */
.kb-pren-grid .kb-pren-detrow > td { background: transparent; border-top: none; }
/* Bordo + bagliore nel colore della piattaforma (--pill-color/--pill-glow, passati
inline dal JS): il colore diventa il primo segnale visivo, non solo il puntino. */
.kb-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px 6px 11px; border-radius: 20px;
background: linear-gradient(165deg, var(--surface2), var(--surface));
border: 1.5px solid var(--pill-color, var(--border));
box-shadow: 0 0 12px var(--pill-glow, transparent);
font-size: 12.5px; color: var(--text); white-space: nowrap;
transition: box-shadow .2s, transform .15s;
}
.kb-pill:hover { box-shadow: 0 0 20px var(--pill-glow, transparent); transform: translateY(-1px); }
.kb-pill-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
background: var(--pill-color, var(--muted));
box-shadow: 0 0 8px var(--pill-glow, transparent);
}
.kb-pill-tag { color: var(--muted); font-size: 11px; }
/* Dettaglio "Call prenotate": bolla cliccabile + azioni che appaiono al click. */
.kb-pill-item { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.kb-pill-click { cursor: pointer; }
.kb-pill-click.open { box-shadow: 0 0 22px var(--pill-glow, transparent); border-width: 2px; }
.kb-pill-actions { display: inline-flex; align-items: center; gap: 4px; }
/* Nuvoletta-fumetto di conferma sulla bolla di una call effettuata: al click
chiede "Vuoi annullare l'esito?" con SI/NO — sostituisce il vecchio
tastino ⟲, poco chiaro. Freccetta in alto che punta alla bolla. */
.kb-bubble {
position: absolute; top: calc(100% + 9px); left: 6px; z-index: 30;
background: var(--surface2); border: 1px solid var(--accent2);
border-radius: 10px; padding: 10px 14px; white-space: nowrap;
box-shadow: 0 8px 22px rgba(0, 0, 0, .38); text-align: center;
}
.kb-bubble::before {
content: ''; position: absolute; top: -6px; left: 20px;
width: 10px; height: 10px; transform: rotate(45deg);
background: var(--surface2);
border-left: 1px solid var(--accent2); border-top: 1px solid var(--accent2);
}
.kb-bubble-q { font-size: 12.5px; margin-bottom: 8px; }
.kb-bubble-btns { display: flex; gap: 8px; justify-content: center; }
/* SI e NO partono entrambi SPENTI (ghost): si accende d'oro solo quello
sotto il cursore — niente scelta "già suggerita" (richiesta utente). */
.kb-bubble-btns .btn:hover {
background: var(--accent); border-color: var(--accent); color: #0b0a07;
}
/* Modale di conferma (es. provenienza che non torna col tag): overlay + card
centrata, due bottoni spenti che si accendono d'oro all'hover. */
.kb-modal-overlay {
position: fixed; inset: 0; z-index: 200; display: flex;
align-items: center; justify-content: center; padding: 20px;
background: rgba(0, 0, 0, .55);
}
.kb-modal {
max-width: 460px; width: 100%; text-align: center;
background: var(--surface2); border: 1px solid var(--accent2);
border-radius: 14px; padding: 22px 24px;
box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.kb-modal-msg { font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
.kb-modal-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.kb-modal-btns .btn:hover {
background: var(--accent); border-color: var(--accent); color: #0b0a07;
}
/* TRIAGE bloccante: overlay a tutto schermo (non si chiude) che costringe il
commerciale a gestire le sue call scadute prima di usare il portale. */
.kb-triage-overlay {
position: fixed; inset: 0; z-index: 150; display: flex;
align-items: center; justify-content: center; padding: 18px;
background: rgba(0, 0, 0, .72);
}
.kb-triage-box {
width: 100%; max-width: 640px; max-height: 88vh; overflow: auto;
background: var(--surface2); border: 1px solid var(--red); border-radius: 14px;
padding: 20px 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
.kb-triage-box h3 { font-family: var(--font-display); text-transform: uppercase;
letter-spacing: .08em; font-size: 15px; color: var(--red); margin-bottom: 4px; }
.kb-triage-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.kb-triage-row { border: 1px solid var(--border); border-radius: 10px;
padding: 12px 13px; margin-bottom: 10px; background: var(--surface); }
.kb-triage-lead { font-size: 13.5px; margin-bottom: 9px; }
.kb-triage-lead b { color: var(--accent); }
.kb-triage-lead .tag { color: var(--muted); font-size: 12px; }
.kb-triage-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.kb-triage-actions label { font-size: 11px; color: var(--muted); }
.kb-triage-actions input[type=date] { padding: 4px 6px; }
.kb-triage-sub2 { display: none; margin-top: 10px; gap: 8px; align-items: center; flex-wrap: wrap; }
.kb-triage-sub2.open { display: flex; }
.kb-triage-sub2 input[type=number] { width: 110px; }
.kb-triage-sub2 input[type=text] { flex: 1; min-width: 160px; }
.kb-triage-vend { gap: 6px; align-items: center; }
.kb-triage-vend label { font-size: 11px; color: var(--muted); }
.kb-triage-vend input[type=number] { width: 100px; }
.kb-pren-editwrap { flex-basis: 100%; width: 100%; }
.kb-edit-form {
display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
padding: 12px; margin-bottom: 6px;
background: var(--surface); border: 1px solid var(--accent); border-radius: 8px;
}
.kb-pwbox {
background: var(--surface); border: 1px solid var(--accent); border-radius: 8px;
padding: 14px; margin: 12px 0; font-size: 14px;
}
.kb-pwbox code { color: var(--accent); font-size: 17px; font-weight: 700; letter-spacing: 1px; }
/* "i" cerchiata: spiegazione nascosta, appare al passaggio del mouse (data-tip) */
.kb-info {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
border: 1px solid var(--muted); color: var(--muted);
font-size: 11px; font-style: italic; font-weight: 700; font-family: Georgia, serif;
cursor: help; user-select: none;
}
.kb-info::after {
content: attr(data-tip);
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
background: var(--surface2); border: 1px solid var(--border); color: var(--text);
padding: 8px 12px; border-radius: 8px; font-size: 12px; font-style: normal; font-weight: 400;
font-family: 'Segoe UI', system-ui, sans-serif; line-height: 1.4;
width: max-content; max-width: 280px; white-space: normal;
opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 50;
}
.kb-info:hover::after { opacity: 1; }
/* Intestazioni di colonna con spiegazione: tooltip sul NOME stesso (niente "i"
separata, affollerebbe l'intestazione). Il tooltip vero è #kbm-tt (position:fixed,
calcolato via JS in kbmTipShow) — un ::after CSS ancorato al | finirebbe
tagliato dal contenitore a scroll orizzontale se posizionato sopra. */
.kbm-th-tip { cursor: help; }
.kbm-tt {
position: fixed; z-index: 999; pointer-events: none;
background: var(--surface2); border: 1px solid var(--border); color: var(--text);
padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 400;
font-family: 'Segoe UI', system-ui, sans-serif; line-height: 1.4;
max-width: 240px; white-space: normal;
opacity: 0; transition: opacity .15s;
}
.kbm-tt.show { opacity: 1; }
/* Vendita: scelta pagamento — verde = già incassato, oro = da incassare */
.kb-pay-btn { font-weight: 600; }
#kb-pay-inc { color: #6ab04c; border-color: #6ab04c; }
#kb-pay-inc.selected, #kb-pay-inc:hover { background: #6ab04c; color: #0a0a08; }
#kb-pay-da { color: var(--accent); border-color: var(--accent); }
#kb-pay-da.selected, #kb-pay-da:hover { background: var(--accent); color: #0a0a08; }
.kb-pay-tag-inc { color: #6ab04c; font-weight: 600; }
.kb-pay-tag-da { color: var(--accent); font-weight: 600; }
/* Pagamenti in sospeso (dettaglio espandibile): stessa idea delle bolle canale —
bordo + bagliore nell'ORO del tema (non un ambra a parte), con più spazio
per i dati del pagamento. Larghezza a contenuto, vanno a capo in flex-wrap. */
.kb-pay-card {
flex: 1 1 240px; max-width: 320px;
border-radius: 14px; padding: 11px 15px;
background: linear-gradient(165deg, var(--surface2), var(--surface));
border: 1.5px solid var(--gold-line);
box-shadow: 0 0 12px var(--gold-faint);
transition: box-shadow .2s, transform .15s;
}
.kb-pay-card:hover { box-shadow: 0 0 20px var(--gold-line); transform: translateY(-1px); }
/* L'aura della card e' un SEMAFORO: verde chi sta pagando, arancione i
miracoli, rosso le pratiche dall'avvocato. Un colore solo per stato, preso
dalle variabili del tema (valgono anche in modalita' giorno). */
.kb-pay-card.st-in_corso { border-color: var(--green); box-shadow: 0 0 14px color-mix(in srgb, var(--green) 42%, transparent); }
.kb-pay-card.st-in_corso:hover { box-shadow: 0 0 22px color-mix(in srgb, var(--green) 52%, transparent); }
.kb-pay-card.st-miracolo { border-color: var(--orange); box-shadow: 0 0 14px color-mix(in srgb, var(--orange) 42%, transparent); }
.kb-pay-card.st-miracolo:hover { box-shadow: 0 0 22px color-mix(in srgb, var(--orange) 52%, transparent); }
.kb-pay-card.st-avvocato { border-color: var(--red); box-shadow: 0 0 14px color-mix(in srgb, var(--red) 45%, transparent); }
.kb-pay-card.st-avvocato:hover { box-shadow: 0 0 22px color-mix(in srgb, var(--red) 55%, transparent); }
/* Riquadri dei TRE TOTALI in cima: stesso semaforo, bordo e bagliore inclusi. */
.kb-sosp-tot { flex: 1; min-width: 190px; text-align: center;
border: 1.5px solid var(--tot-color); border-radius: 14px; padding: 14px 16px;
background: linear-gradient(165deg, var(--surface2), var(--surface));
box-shadow: 0 0 16px color-mix(in srgb, var(--tot-color) 32%, transparent); }
.kb-sosp-tot .kbm-total-label { color: var(--tot-color); }
.kb-sosp-tot-num { font-size: 30px; font-weight: 800; letter-spacing: .01em;
line-height: 1; color: var(--tot-color); }
.kb-pay-tag-legale {
color: #ff3b3b; border: 1px solid #ff3b3b; border-radius: 6px; padding: 1px 8px;
font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; white-space: nowrap;
}
/* ── Tasto STATO del sospeso (in alto a sinistra della card) ──────────────
Stesso design delle label di canale (Ads/Mail/social): bolla con pallino
colorato e bordo nel colore dello stato. Cliccandola si apre la tendina
con i tre stati. */
.kb-sosp-wrap { position: relative; margin-bottom: 8px; }
.kb-sosp-pill {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
padding: 3px 11px 3px 9px; border-radius: 20px;
background: linear-gradient(165deg, var(--surface2), var(--surface));
border: 1.5px solid var(--pill-color, var(--border));
box-shadow: 0 0 10px var(--pill-glow, transparent);
font-size: 11.5px; color: var(--text); white-space: nowrap;
transition: box-shadow .2s, transform .15s;
}
.kb-sosp-pill:hover { box-shadow: 0 0 18px var(--pill-glow, transparent); transform: translateY(-1px); }
.kb-sosp-pill .kb-pill-dot { background: var(--pill-color); box-shadow: 0 0 8px var(--pill-color); }
.kb-sosp-caret { color: var(--muted); font-size: 9px; }
.kb-sosp-menu {
position: absolute; top: calc(100% + 5px); left: 0; z-index: 40; min-width: 148px;
padding: 5px; border-radius: 12px;
background: var(--surface); border: 1px solid var(--gold-line);
box-shadow: 0 10px 26px rgba(0,0,0,.5);
}
.kb-sosp-voce {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 7px 10px; border-radius: 8px; cursor: pointer;
background: none; border: none; color: var(--text); font-size: 12.5px; text-align: left;
}
.kb-sosp-voce:hover { background: var(--surface2); }
.kb-sosp-voce.attiva { color: var(--pill-color); font-weight: 600; }
/* ── Elenco PAGAMENTI IN SOSPESO admin (ordinato per riscossione) ── */
.kbm-sosp-sub { margin-top: 7px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kbm-sosp-late { color: var(--red); font-weight: 700; } /* riscossione scaduta */
.kbm-sosp-oggi { color: var(--accent); font-weight: 700; } /* scade oggi */
.kbm-sosp-none { color: var(--muted); font-style: italic; } /* nessuna data */
.kbm-avv-tag { color: #ff3b3b; font-weight: 700; }
/* ── Blocchi espandibili dei sospesi admin (uno per stato, ordine semaforo) ── */
.kbm-sosp-blocco { margin-bottom: 12px; border: 1.5px solid var(--tot-color); border-radius: 14px;
overflow: hidden; box-shadow: 0 0 12px color-mix(in srgb, var(--tot-color) 24%, transparent); }
.kbm-sosp-testa { display: flex; align-items: center; gap: 12px; cursor: pointer;
padding: 12px 16px; background: linear-gradient(165deg, var(--surface2), var(--surface)); }
.kbm-sosp-testa:hover { background: var(--surface2); }
.kbm-sosp-freccia { color: var(--tot-color); font-size: 12px; transition: transform .18s; }
.kbm-sosp-freccia.giu { transform: rotate(90deg); }
.kbm-sosp-nome { font-family: var(--font-display); font-size: 12px; letter-spacing: .12em;
text-transform: uppercase; color: var(--tot-color); }
.kbm-sosp-quanti { font-size: 12px; color: var(--muted); }
.kbm-sosp-somma { margin-left: auto; font-weight: 600; color: var(--tot-color); }
.kbm-sosp-nota {
display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; vertical-align: bottom; color: var(--muted); font-size: 12px;
}
/* Fumetto fluttuante dei dettagli-occhio (griglia Ads + vista Generale): non
aggiunge righe alla tabella, si ancora sopra/sotto l'occhio cliccato. */
.kbm-eyepop {
position: absolute; z-index: 200; display: none; --arrow-left: 50%;
/* overscroll-behavior: arrivati in fondo all'elenco la rotella NON deve
passare la mano alla pagina, che scorrendo chiuderebbe il fumetto. */
max-width: min(520px, 90vw); max-height: 60vh; overflow: auto; overscroll-behavior: contain;
background: var(--surface); border: 1px solid var(--accent2); border-radius: 12px;
box-shadow: 0 14px 44px rgba(0,0,0,.55); padding: 12px;
}
.kbm-eyepop::before {
content: ''; position: absolute; top: -7px; left: var(--arrow-left); transform: translateX(-50%) rotate(45deg);
width: 12px; height: 12px; background: var(--surface);
border-left: 1px solid var(--accent2); border-top: 1px solid var(--accent2);
}
.kbm-eyepop.above::before {
top: auto; bottom: -7px; border-left: none; border-top: none;
border-right: 1px solid var(--accent2); border-bottom: 1px solid var(--accent2);
}
.kbm-eyepop .kb-pill-wrap { max-width: 100%; }
.kb-pay-card-head {
display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
font-size: 13px; font-weight: 600;
}
.kb-pay-card-meta { color: var(--muted); font-size: 11.5px; margin-top: 5px; line-height: 1.5; }
.kb-pay-card-nota { color: var(--muted); font-size: 11.5px; margin-top: 5px; font-style: italic; }
/* Righe info categorizzate della card sospeso (riscossione, nota) */
.kb-pay-line { font-size: 13px; margin-top: 7px; color: var(--text); line-height: 1.45; white-space: pre-wrap; }
.kb-pay-nota-lbl { color: var(--accent); font-weight: 700; }
/* Nota lunga nella card dei sospesi: ANTEPRIMA a 2 righe coi puntini, si
espande/richiude al click (richiesta utente 07/08: le note lunghe
stiravano la bolla). */
.kb-pay-nota-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.kb-pay-nota-clamp.aperta { -webkit-line-clamp: unset; }
/* Fila di bottoni + campi che appaiono solo al click del relativo bottone */
.kb-pay-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.kb-pay-field-box { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
/* Pannello unico "Aggiorna" (rata · riscossione · nota insieme). */
.kb-aggiorna-field { display: flex; flex-direction: column; gap: 6px; }
.kb-aggiorna-field > label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
/* wrap dal 2026-08-10: con la data dell'incasso in riga, su telefono i campi
si schiacciavano (l'importo scendeva a 26px). Su desktop non cambia nulla. */
.kb-aggiorna-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* APPUNTAMENTI senza call registrata (colonna Appuntamenti della griglia Ads).
Il boss legge quella colonna come "chi è stato chiamato", quindi chi resta
scoperto deve saltare all'occhio senza aprire il fumetto: numero rosso nella
cella, card col filo rosso nel dettaglio. Colori dalle variabili del tema,
mai hex fissi, o in tema chiaro diventano illeggibili. */
.kbm-app-badge {
display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px;
border-radius: 8px; background: var(--chip-bg-red); color: var(--red);
border: 1px solid var(--red); font-size: 10.5px; font-weight: 700; line-height: 15px;
text-align: center; vertical-align: middle;
}
.kbm-app-card-manca { border-left: 3px solid var(--red); }
.kbm-app-manca { color: var(--red); font-weight: 700; }
/* Triangolo di pericolo sui problemi di qualità dei dati: in griglia
(badge col conteggio, ha sostituito il cerchietto rosso) e nel tab
Warning (una riga per magagna, raggruppate per commerciale). */
.kbm-warn-badge {
display: inline-flex; align-items: center; gap: 3px; margin-left: 4px;
color: var(--red); font-weight: 700; font-size: 11px; cursor: help;
}
.kbm-warn-badge svg, .kbm-warn-icona svg { width: 14px; height: 14px; }
.kbm-warn-gruppo { margin-bottom: 18px; }
.kbm-warn-chi {
font-family: var(--font-display); font-size: 13px; letter-spacing: .06em;
padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--gold-line);
display: flex; align-items: center; gap: 8px;
}
.kbm-warn-conta {
font-family: inherit; font-size: 11px; color: var(--red);
border: 1px solid var(--red); border-radius: 999px; padding: 0 7px;
}
.kbm-warn-row {
display: flex; align-items: baseline; gap: 8px; padding: 6px 2px;
border-bottom: 1px solid var(--border); font-size: 14px;
}
.kbm-warn-row:last-child { border-bottom: none; }
.kbm-warn-icona { color: var(--red); flex: 0 0 auto; position: relative; top: 2px; }
.kbm-app-altrove { color: var(--orange); }
.kbm-app-ok { color: var(--muted); }
/* Appuntamento di oggi o dei prossimi giorni: l'esito manca perché la call
non si è ancora tenuta. Colore spento, non è niente da rincorrere. */
.kbm-app-attesa { color: var(--muted); font-style: italic; }
/* Data esito presa dal calendario di Conneqto: il campo è bloccato, e la
nota sotto dice da dove viene il valore. Se l'appuntamento non c'è la
nota diventa smorzata e il campo torna scrivibile. */
/* Con l'appuntamento in calendario il campo data non c'è: al suo posto
resta questa riga, che dice il giorno e da dove arriva. */
.kb-close-data-nota {
font-size: 13px; color: var(--text); font-weight: 600; white-space: nowrap;
}
.kb-close-data-lbl {
display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
color: var(--muted); font-weight: 600;
}
.kb-close-data-fonte {
font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
color: var(--accent); font-weight: 600; margin-left: 4px;
}
/* senza appuntamento la riga è solo una spiegazione sotto al campo */
.kb-close-data-nota.libera {
display: block; margin-top: 4px; font-size: 10.5px;
color: var(--muted); font-weight: 400; white-space: normal;
}
/* "in attesa" accanto al nome nella ricerca delle call da chiudere: quella
call è già stata fatta, chi la sceglie sta spostando un esito. */
.kb-autocomplete-attesa {
font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
color: var(--accent); border: 1px solid var(--accent2);
border-radius: 6px; padding: 1px 5px; margin-left: 6px; vertical-align: middle;
}
/* Riga secondaria dei suggerimenti (giorno in agenda e commerciale): serve a
riconoscere la persona giusta quando ci sono due nomi simili. */
.kb-autocomplete-sub { color: var(--muted); font-size: 11px; margin-top: 2px; }
/* "era «...»" dentro la bolla di una call il cui nome è stato allineato al
calendario: promemoria per chi l'ha scritto male. Colore d'attenzione, non
di errore: la call è a posto, è solo il nome che non era suo. */
.kb-nome-corretto { color: var(--orange); font-size: 11px; font-style: italic; }
|