@charset "UTF-8";
/* Cursore pallina su tutto */


.cursor-dot {
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2147483647; /* sempre sopra tutto (drawer 10001, swal 10005, tooltip) */
  transform: translate(-50%, -50%);

  --cursor-color: #55d5cc;

  background: var(--cursor-color);
  animation: cursor-pulse 1.5s infinite;
  transition: opacity .15s ease, transform .15s ease;
}

.cursor-dot.is-hidden {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}

@keyframes cursor-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--cursor-color) 70%, transparent);
  }
  70% {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 0 18px color-mix(in srgb, var(--cursor-color) 0%, transparent);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--cursor-color) 0%, transparent);
  }
}

/* Cursore manina su elementi cliccabili.
   `button:not(:disabled)`: un bottone SPENTO non è cliccabile, e la manina diceva il contrario.
   L'esclusione sta qui e non in una regola a parte perché questa dichiarazione è `!important`:
   una regola successiva con `cursor: not-allowed` non la batterebbe mai senza aggiungere un
   secondo `!important`, che è proprio ciò che si sta evitando (22/09/2026). */
a, a svg,
button:not(:disabled), button:not(:disabled) svg,
/* L'esclusione dei disabilitati vale per OGNI forma di comando, non solo per `button`: il floppy
   dei pannelli è un `.toolbar-button` con un `onclick`, e da spento si prendeva la manina da
   queste due righe mentre `button:not(:disabled)` lo lasciava stare. Un bottone spento che mostra
   la manina promette una cosa che non fa (23/09/2026). */
[onclick]:not(:disabled), [onclick]:not(:disabled) svg,
[style*='cursor:pointer'],
.toolbar-icon, .toolbar-icon svg,
.toolbar-button:not(:disabled), .toolbar-button:not(:disabled) svg,
.footer-icon-wrap, .footer-icon-wrap svg,
.footer-icon-wrap a, .footer-icon-wrap a svg,
.footer-icon-sm, .footer-icon-sm svg,
.footer-sm-wrap, .footer-sm-wrap svg, .footer-sm-wrap a, .footer-sm-wrap a svg,
span[id^='filter'],
#btn-fullscreen, #btn-fullscreen svg,
#btn-chat, #btn-chat svg,
#side-actions span, #side-actions span svg, .dt-search,
.dt-search input,
.dt-search svg,
.select2-results__option--selectable,
.select2-selection, .select2-selection--single,.nuvolai-send,
.view-stat, .view-period-btn, .view-dt-search, .view-ref > summary, .view-dt thead th,
.skill-info, .skill-info svg,
.list-action-icon, .list-action-icon svg,
.nv-dz-doc .dz-image, .nv-dz-doc .dz-image svg,
.nv-avatar-trigger,
.nv-close-x, .nv-close-x svg,
.header-icon-wrap, .header-icon-wrap svg,
.form-check-input,
.form-control,
select, .form-select,
textarea,
label[for],
summary,
[role='button'],
[data-mass], [data-quick],
.nv-lista-tabella tbody tr,
.matrixValue,
/* le card del kanban (pipeline, trattative) si aprono col clic: la manina, non il «grab» (CRM-RITOCCHI T7, 13/10/2026) */
.kanban-card,
[style*='cursor: pointer'] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' width='28' height='28'%3E%3Cpath fill='%2355d5cc' d='M118.5 392.9C123.5 399.8 151.1 437.8 201.3 507.2C225.4 540.4 263.9 560.1 304.9 560.1L439.9 560.1C488.5 560.1 527.9 520.7 527.9 472.1L527.9 312.1L455.9 312.1L455.9 280.1L375.9 280.1L375.9 256.1L295.9 256.1L295.9 80.1L223.9 80.1L223.9 393.7C221.7 395.9 211.1 406.5 208.9 408.7C204.3 402.4 178.2 366.3 170.2 355.4L118.5 392.9zM304 368L320 368L320 496L304 496L304 368zM368 368L384 368L384 496L368 496L368 368zM432 368L448 368L448 496L432 496L432 368z'/%3E%3Cpath fill='%2355d5cc' d='M216 64L208 64L208 380C207 378.6 197.2 365 178.6 339.4L173.9 332.9L167.4 337.6L102.6 384.6L96.1 389.3L100.8 395.8C109.7 408.1 138.9 448.3 188.3 516.5C215.4 553.9 258.7 576 304.9 576L439.9 576C497.3 576 543.9 529.4 543.9 472L543.9 296L471.9 296L471.9 264L391.9 264L391.9 240L311.9 240L311.9 64L215.9 64zM224 390.3L224 80L296 80L296 256L376 256L376 280L456 280L456 312L528 312L528 472C528 520.6 488.6 560 440 560L305 560C264 560 225.4 540.3 201.4 507.1C151.1 437.8 123.5 399.7 118.6 392.8L170.4 355.2C201.5 398.1 207.8 406.8 209.1 408.5C213.6 404 217.8 399.8 221.8 395.8L224.1 393.5L224.1 390.2zM320 376L320 368L304 368L304 496L320 496L320 376zM384 376L384 368L368 368L368 496L384 496L384 376zM448 376L448 368L432 368L432 496L448 496L448 376z'/%3E%3C/svg%3E") 6 2, pointer !important;
}

/* Un bottone spento lo dice col cursore, non solo col colore. Vale per i `<button>` nativi e per
   i `.btn` di Bootstrap resi con un `<a class="btn disabled">` (che non ha l'attributo disabled). */
button:disabled, .btn:disabled, .btn.disabled { cursor: not-allowed; }

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
     display: none;
}

.footer-icon-wrap svg,
.toolbar-icon svg,
.toolbar-button svg,
#btn-fullscreen svg,
#btn-chat svg,
#btn-heatmap svg,
#btn-markers svg,
#btn-excel svg,
#btn-csv svg,
#close-heatmap svg,
#close-markers svg,
#close-chat svg,
a svg,
button svg,
[onclick] svg,
span[id^='filter'] svg,
#side-actions span svg {
  pointer-events: none;
  display: block;
}

.footer-icon-wrap a {
    display: block;
    width: 100%;
    height: 100%;
}

body {
  overflow: hidden;
  margin: 0!important;
  padding: 50px 0!important;
  font-family: 'Outfit', sans-serif!important;
  background: #000!important;
  background-color: #000!important;
  /* IL TESTO DI DEFAULT È QUELLO DEL TEMA. Il body era nero di sfondo ma teneva il colore di testo
     di Bootstrap (--bs-body-color: #212529): qualunque testo senza una classe che gli desse un
     colore proprio finiva NERO SU NERO. Misurato (QA notte 07/09, contrasto 1.36 su nero): il
     numero delle faccette nelle liste, la label «Partita Iva» in La tua azienda, l'importo nello
     scadenzario, i nomi dei canali nel Marketing, le etichette dei grafici. Non era una scelta di
     stile: era un colore ereditato da un tema chiaro dentro un'applicazione scura. */
  color: var(--nv-text-value);
  cursor: none;
}

/* (NOTTE-STILI-UX) il colore dei link è il token --nv-text-link: era #5a5a5a, 3,04:1 sul nero (breadcrumb, link di riga,
   bottoni-link), sotto la soglia di 4,5:1 su quasi 400 pagine. Ora #8a8a8a, 5,67:1 anche su #0c0c0c. */
body a {
  color: var(--nv-text-link)!important;
  text-decoration: none!important;
}

body a:hover {
  color: #55d5cc!important;
  text-decoration: none!important;
}

/* ── IL GUSCIO (dal 23/09/2026) ────────────────────────────────────────────────────────────────
   La PAGINA non scorre mai: html e body sono fermi, header e footer sono fissi. Scorre UN solo
   contenitore, .main-content, alto esattamente lo spazio fra header e footer.
     · contenuto corto → nessuna barra, nessuno scroll;
     · contenuto lungo → scorre il contenitore, e con lui niente altro.
   Prima il body era `overflow:hidden` e basta: tutto ciò che finiva sotto il footer era tagliato
   via, senza barra, e sul telefono la maggior parte delle pagine non si poteva leggere fino in
   fondo. Ogni modulo si era costruito il SUO riquadro che scorre, con un'altezza calcolata dal JS —
   e dove nessuno l'aveva fatto (il conto economico, il form sul telefono) il fondo non esisteva.
   Le misure sono token: 50px di padding del body + 30px di margine = 80px sopra; il footer è 45px.
   `dvh` e non `vh`: sul telefono `vh` conta anche la barra dell'indirizzo, e il fondo finiva sotto.
   Chi scorre DENTRO sé stesso resta com'è: colonne della board, pannelli, modal, griglie larghe.
   → css-ux.md, «Il guscio». */
:root {
  --nv-shell-top: 80px;
  --nv-shell-bottom: 45px;
  --nv-page-bg: #000000;
}
html { overflow: hidden; height: 100%; }
.main-content {
  width: 100%;
  box-sizing: border-box;
  padding: 0 1.5%;
  margin: 30px 0 0 0;
  height: calc(100vh - var(--nv-shell-top) - var(--nv-shell-bottom));
  height: calc(100dvh - var(--nv-shell-top) - var(--nv-shell-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* La toolbar del modulo (breadcrumb + azioni, compreso il floppy del Salva) non scappa quando il
   contenitore scorre: è lì che stanno le azioni della pagina. Sfondo opaco obbligatorio, o le righe
   che scorrono le passano sotto visibili. */
.main-content > #toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nv-page-bg);
}

.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 55px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: flex-start;
overflow: visible;
background: #000;
z-index: 900;
}

.header-center {
width: 180px;
height: 55px;
display: flex;
justify-content: center;
align-items: center;
background: #000;
}

.header-right {
position: absolute;
right: 16px;
height: 55px;
display: flex;
align-items: center;
gap: 24px;
/* L'ALTEZZA dei glifi a destra, una sola (26/09/2026): laboratorio, chat, campanella E utente.
   L'icona utente era a 1.2em: disegno più grande dentro lo stesso contenitore, e quindi più in basso
   delle vicine. La foto profilo ha la sua misura, 23px (.header-avatar), centrata nello stesso box. */
--nv-header-icona: 1.1em;
}

.header-icon-wrap {
position: relative;
cursor: pointer;
/* 24/09/2026 (collaudo): UN box per le quattro icone a destra — laboratorio, chat, notifiche,
   avatar — e il glifo al centro. L'icona utente, più grande, stava 1,2px più in alto delle altre.
   Il badge è assoluto: non sposta niente. Misura: scenari_fix_24_09 F4. */
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
}
.header-icon-wrap > i { line-height: 1; display: block; }

/* tooltip in basso: ora reso dal tooltip flottante unico (.list-tooltip via nuvolai.js,
   auto-flip sotto per data-tooltip-bottom). Pseudo-elementi CSS neutralizzati. */
.header-icon-wrap[data-tooltip-bottom]::before,
.header-icon-wrap[data-tooltip-bottom]::after { content: none !important; }

/* LA TENDINA DELL'HEADER — un componente solo (DIURNO-CRM-UI, 08/10/2026): menu utente e notifiche hanno la classe
   .nv-tendina, che dà guscio (fondo, bordo, raggio, ombra, larghezza minima) e voci (.menu-link, .menu-section). Prima
   la campanella aveva un guscio suo, copiato a mano e già diverso, e voci grigie poco leggibili. */
.nv-tendina {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
background: #000000;
border: 1px solid #55d5cc;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
min-width: 220px;
z-index: 999;
padding: 8px 0;
color: #ffffff;
}

.nv-tendina.open {
display: block;
}

/* mostra il menu utente al passaggio del mouse sull'icona */
#user-menu-trigger:hover .user-dropdown {
display: block;
}

/* ponte invisibile che copre lo stacco di 8px tra icona e menu,
   così il cursore può raggiungere il menu senza farlo sparire */
#user-menu-trigger .user-dropdown::before {
content: '';
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 8px;
}

/* nome e cognome nel menu utente */
.nv-tendina .menu-content .fw-bold {
font-size: 0.9rem !important;
}

/* voci del menu utente */
/* (TASK 12) .menu-section — il titolo di una sezione del menu utente.
   Il dropdown ha due parti: quello che riguarda l'AZIENDA (dati e brand, skill, utenze) e quello che
   riguarda CHI STA USANDO il software (password, uscita). Senza un'etichetta la separazione la fa
   solo una riga orizzontale, e non si capisce di chi siano le prime voci. Unica classe nuova del
   task; i valori sono quelli della scala dei testi, nessun colore inventato. */
.nv-tendina .menu-section {
  padding: 6px 16px 2px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nv-text-label);
}

.nv-tendina .menu-link {
display: flex;
align-items: center;
padding: 8px 16px;
/* Era `#000`: nero su fondo nero. Non si vedeva l'effetto solo perché `body a{color:#5a5a5a}` è
   !important e vinceva — cioè il menu era leggibile per un incidente, non per disegno. Qui il
   colore è quello dei valori della scala testi, e l'hover (fondo teal, testo nero) resta com'era. */
color: var(--nv-text-value);
font-size: 0.9rem;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}

.nv-tendina .menu-link,
.nv-tendina .menu-link span { color: var(--nv-text-value) !important; }

.nv-tendina .menu-link:hover {
background-color: #55d5cc;
color: #000;
}

.nv-tendina .menu-link:hover span {
color: #000;
}

.nv-tendina .menu-link:hover i,
.nv-tendina .menu-link:hover i {
color: #000;
--fa-primary-color: #000;
--fa-secondary-color: #000;
}

.nv-tendina .menu-link i,
.nv-tendina .menu-link i {
width: 1.25rem;
text-align: center;
color: #000;
--fa-primary-color: #ffffff;
--fa-secondary-color: #dddddd;
--fa-secondary-opacity: 1;
}

.nv-tendina .menu-link span {
padding-left: 1rem;
color: #ffffff;
}

.header-right .header-icon {
font-size: var(--nv-header-icona);
color: white;
cursor: pointer;
--fa-primary-color: white;
--fa-secondary-color: rgba(255, 255, 255, 0.7);
--fa-secondary-opacity: 0.7;
transition: transform 0.2s ease;
}

/* .header-icon-user: niente dimensione sua — è alta come le altre (--nv-header-icona). */

.header-right .header-icon:hover {
transform: scale(1.2);
}

.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 45px;
box-sizing: border-box;
background: #000;
background-attachment: fixed;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 16px;
z-index: 1000;
}

.footer-left {
width: 280px;
color: #c0efec;
font-size: 11px;
white-space: nowrap;
}

.footer-center {
display: flex;
flex-direction: row;
align-items: center;
gap: 28px;
}

.footer-right {
width: 280px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 16px;
}


.footer-icon-wrap {
position: relative;
cursor: pointer;
}

/* Tooltip footer: ora reso dal tooltip flottante unico (.list-tooltip via nuvolai.js).
   Pseudo-elementi CSS neutralizzati per evitare doppioni. */
.footer-icon-wrap::before,
.footer-icon-wrap::after { content: none !important; }

.footer-icon {
font-size: 2em;
color: white;
/* 24/09/2026 (collaudo, terza volta): SOLO padding verticale. Con box-sizing: border-box la
   scatola è 40px e 14px di padding per lato lasciavano al contenuto 12px: il glifo fa7 partiva
   dopo il padding e debordava a destra, disegnato 10px a destra del centro della scatola. Le
   maschere di Magento e Shopify (uno sfondo, che il padding non sposta) stavano invece al centro:
   i box erano equidistanti, i disegni no. Misura: tests/misura_icone_footer.py. */
padding: 8px 0;
--fa-primary-color: #b5b5b5;
--fa-secondary-color: rgba(153, 153, 153, 0.4);
--fa-secondary-opacity: 0.7;
/* inline-block + origine centro: lo scale(1.4) all'hover è un transform, e su un <i> display:inline
   è quirky (l'icona si sposta orizzontalmente) → il glifo finiva fuori asse rispetto al tooltip.
   Come inline-block lo scale è simmetrico attorno al centro e l'icona resta allineata al tooltip. */
display: inline-block;
transform-origin: center center;
transition: transform 0.2s ease;
}

.footer-icon-wrap:hover .footer-icon,
a:hover .footer-icon {
    transform: scale(1.4);
}

/* Zoom hover coerente per header e footer anche quando FA converte <i> in <svg> perdendo la classe
   custom (GOTCHA kit SVG): si aggancia al WRAP (classe stabile) e scala l'icona diretta (i o svg),
   senza toccare le icone dentro i dropdown dell'header. */
.header-right .header-icon-wrap > i, .header-right .header-icon-wrap > svg { transition: transform 0.2s ease; }
.header-right .header-icon-wrap:hover > i, .header-right .header-icon-wrap:hover > svg { transform: scale(1.2); }
.footer-icon-wrap a > i, .footer-icon-wrap a > svg { transition: transform 0.2s ease; }
.footer-icon-wrap:hover a > i, .footer-icon-wrap:hover a > svg { transform: scale(1.4); }

.footer-icon-sm {
color: #1e7672;

--fa-primary-color: #9a9a9a;
--fa-secondary-color: rgba(255, 255, 255, 0.4);
--fa-secondary-opacity: 0.9;

}

.footer-icon-selected {
  --fa-primary-color: #55d5cc;
  --fa-secondary-color: #55d5cc94;
  --fa-secondary-opacity: 0.9;

}

.card-body{
background: #000;
min-height: 120px;
padding: 5px 10px 5px 10px;
}

.card-body-title{
color: #FFF;
font-weight: 100;
font-size: 1.1em;
}

.card-body-table {
    background: #000;
    min-height: auto;
    padding: 5px 10px 5px 10px;
    color: #cfcfcf;
    font-size: 0.8em;
}

.card-body-table table tbody tr:nth-child(odd) {
    background-color: #0c0c0c !important;
}

.card-body-table table tbody tr:nth-child(even) {
    background-color: #000000 !important;
}

.card-body-table table tbody tr:hover {
    background-color: #55d5cc2e !important;
}

/* I campi dentro le tabelle (filtri, testi delle notifiche CRM…): i token dei campi del kit, non valori a mano. Prima testo #fff
   puro e bordo #333333 (1,5:1): la textarea delle Notifiche era «diversa dal kit» per audit-stili (09/10/2026). */
.card-body-table .form-select {
  background-color: var(--nv-campo-fondo);
  color: var(--nv-campo-testo);
  --bs-border-color: var(--nv-campo-bordo);
}

.card-body-table .form-control {
  background-color: var(--nv-campo-fondo);
  color: var(--nv-campo-testo);
  --bs-border-color: var(--nv-campo-bordo);
}

.card-body-table .pagination  {
    font-family: 'Outfit', sans-serif!important;
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 0.8rem;
    --bs-pagination-color: #7a7a7a;
    --bs-pagination-bg: #000000;
    --bs-pagination-border-width: var(--bs-border-width);
    --bs-pagination-border-color: #000000;
    --bs-pagination-border-radius: var(--bs-border-radius);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-hover-bg: #000000;
    --bs-pagination-hover-border-color: #000000;
    --bs-pagination-focus-color: #ffffff;
    --bs-pagination-focus-bg: #000000;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-pagination-active-color: #55d5cc;
    --bs-pagination-active-bg: #000000;
    --bs-pagination-active-border-color: #000000;
    --bs-pagination-disabled-color: var(--bs-secondary-color);
    --bs-pagination-disabled-bg: #000000;
    --bs-pagination-disabled-border-color: #000000;
    text-decoration: none;
    display: flex;
    padding-left: 0;
    list-style: none;
}

.card-body-table thead,
.card-body-table thead tr {
  /* .card-body-table thead tr (0,1,2) vince sul globale "table thead tr" (0,0,3) che
     altrimenti disegna un bordo 2px #72cad7 sul <tr> coprendo questo #55d5cc. */
  border-bottom: 2px solid #55d5cc;
}

.card-body-table tbody, td, tfoot, th, tr {
    border-bottom: 0px solid #232323b0;
}
/* Padding celle per le tabelle "nude" (non DataTables) dentro .card-body-table: es. tabella sessioni
   degli analytics demo e le tabelle Righe/Scadenze delle view documentali. Le liste DataTables hanno
   già il proprio padding e restano escluse. */
.card-body-table table:not(.dataTable) td,
.card-body-table table:not(.dataTable) th { padding: 8px 10px; }

/* Campi dentro un passo del WIZARD di onboarding (select del settore, nome dell'entità, campo per
   aggiungere una fase). Il wizard vive nella veste della home dell'assistente, cioè FUORI dai
   contenitori che vestono i form (.card-body-table, .matrix-card-row): senza questa regola un
   <select> resterebbe bianco Bootstrap in mezzo alla pagina nera. Qui solo il vestito scuro degli
   input e la larghezza centrata: il resto è già nelle classi dei chip. */
.nv-onb-campo { max-width: 340px; margin-left: auto; margin-right: auto; }
.nv-onb-campo .form-select,
.nv-onb-campo .form-control { background-color: #000; color: #fff; --bs-border-color: #333333; }

/* Campo largo di un passo del wizard: è la barra della home dell'assistente (.nuvolai-inputbar), qui
   con un <input> invece del textarea — la regola della home veste solo il textarea. */
.nuvolai-inputbar input.form-control {
    flex: 1 1 auto;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff;
    padding: 8px 4px;
    line-height: 1.5;
}
.nuvolai-inputbar input.form-control::placeholder { color: #8a8a8a; }
.nv-onb-inputbar { max-width: 620px; margin-left: auto; margin-right: auto; }
/* Lo stesso campo dentro un box della pagina a tab: stessa larghezza, ma allineato a sinistra come
   tutti gli altri controlli della pagina — al centro di un blocco largo sembrerebbe fuori posto. */
.crm-block .nv-onb-inputbar { margin-left: 0; }

/* Multiscelta del wizard: chip che si accendono. Spento e acceso usano gli stessi due colori degli
   stati dell'albero delle categorie — grigio di un campo disabilitato, teal di uno valorizzato —
   così "scelto" si legge allo stesso modo in tutta l'applicazione. */
/* Il colore della voce arriva runtime in --chip: è quello che la voce ha nella pagina a tab, così un
   chip si riconosce nei due posti. Il colore però resta identità, non stato: da spento è smorzato sul
   grigio, da acceso è pieno e tinge anche il testo — altrimenti "scelto" e "non scelto" si
   somiglierebbero. Senza --chip (una voce senza colore) si ricade sul teal di prima. */
#onb-multi .tag-chip {
  border-color: color-mix(in srgb, var(--chip, #55d5cc) 42%, #3c3c3c);
  color: var(--nv-text-label); cursor: pointer; user-select: none;   /* il grigio della label del tema (era #ababab fisso: 2,2:1 nel chiaro) */
}
#onb-multi .tag-chip:hover { border-color: var(--chip, #55d5cc); }
#onb-multi .tag-chip.is-on { border-color: var(--chip, #55d5cc); color: var(--chip, #55d5cc); font-weight: 500; }

/* Tabelle delle tab di Impostazioni (Attributi, Lavorazioni, e le future di CRM e Commesse): devono
   avere la stessa GEOMETRIA delle pagine lista, non una simile. Nelle liste i 14px arrivano dal
   cellpadding="14" del partial layout_lista, che resta valido perché la <table> ha classe .dataTable
   ed è quindi esclusa dalla regola qui sopra; senza DataTables il cellpadding perde contro il CSS.
   Da qui il 14px esplicito: riga alta 50px come in Clienti. Il resto della veste (righe alternate,
   hover, bordo teal dell'intestazione, tipografia) viene già da .card-body-table. */
.card-body-table table.nv-settings-table td,
.card-body-table table.nv-settings-table th { padding: 14px; }

/* TABELLA A CAMPI: una tabella le cui celle contengono controlli, non testo (22/09/2026).
   Le celle di una tabella sono allineate al centro per default, e finché ogni cella è alta uguale
   non si nota; ma basta una cella con due righe — un badge sotto il giorno, «12 venduti» sotto il
   numero dei posti — perché i controlli delle altre colonne scendano a metà di quell'altezza e la
   riga risulti a scalini. Undici pixel di scarto nel pannello delle sessioni, misurati.
   La classe è esplicita e non tocca le tabelle di sola lettura.
   24/09/2026 (collaudo): i campi stanno AL CENTRO della riga, e l'allineamento orizzontale è uno
   solo per intestazione e cella — nessuna delle due porta text-center o text-end (sono utility con
   !important, e un'intestazione centrata sopra un campo largo quanto la cella partiva 40px più in
   là del suo campo). Se un valore va a destra, si allinea DENTRO il campo (`.form-control.text-end`).
   Misurato da tests/scenari_fix_24_09.py F1: bordo dell'intestazione = bordo del campo. */
table.nv-tabella-campi td { vertical-align: middle; }
table.nv-tabella-campi th { text-align: left; }
/* Lo switch è un inline-block: sulla linea di base del testo si portava sotto lo spazio dei
   discendenti e restava 2px sopra il centro della riga (misurato). Alto quanto il suo campo e
   allineato al centro, come gli altri controlli. */
table.nv-tabella-campi td .form-check { vertical-align: middle; min-height: 1em; margin: 0; }
table.nv-tabella-campi td .form-check .form-check-input { margin-top: 0; }
/* Un campo con una nota breve (es. «12 venduti»): sulla stessa riga, non sotto — una seconda riga
   spingeva il campo 10px sopra il centro. */
.nv-campo-nota { display: flex; align-items: center; gap: 8px; }
.nv-campo-nota .form-control { flex: 1 1 auto; min-width: 0; }
.nv-campo-nota small { flex: 0 0 auto; white-space: nowrap; color: var(--nv-text-muted); }

.card-body-table .active>.page-link, .page-link.active {
    z-index: 3;
    color: #ffffff;
    font-weight: 500;
}

.card-body-table .page-link:hover {
    z-index: 2;
    color: #55d5cc;
}

/* Tabella sottocategorie (child row di catalogo/categorie): colonne a larghezza fissa
   (Articoli/Azioni allineate alla riga della categoria padre) + righe più alte. */
.cat-subtable { table-layout: fixed; }
.cat-subtable td, .cat-subtable th { padding-top: 13px; padding-bottom: 13px; }

/* Icona lente nel campo ricerca DataTables (prima era inline in ogni list.php). */
.dt-search { position: relative; }
.dt-search input { padding-right: 32px; }
.nv-dt-search-ico { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #fff; pointer-events: none; }

.toolbar{
gap: 8px;
}

.toolbar-title{
color: #fff;
font-weight: 100;
font-size: 1.1em;
}

.toolbar-subtitle{
color: #fff;
font-weight: 100;
font-size: 0.9em;
text-decoration: none;
}

.toolbar-subtitle-a {
color: #fff;
font-weight: 100;
font-size: 0.9em;
text-decoration: none!important;
}

.toolbar-subtitle-a a:hover {
color: #55d5cc!important;
}

.toolbar-button {
/* background: #2fa8b6; */
border: 1px solid #55d5cc;
border-radius: 6px;
width: 36px;
height: 36px;
color: #f0f0f0!important;
font-size: 1.2em;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, background 0.2s ease;
text-decoration: none;
}

.toolbar-icon {
width: 40px;
height: 40px;
color: #9a9a9a;
font-size: 1.3em;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, background 0.2s ease;
text-decoration: none;
}

.toolbar-button:hover {
background: #55d5cc;
transform: scale(1.07);
border: #55d5cc;
color: #2a2a2a!important;
}

.toolbar-button:visited,
.toolbar-button:active,
.toolbar-button:focus {
color: #f0f0f0;
text-decoration: none;
}

.toolbar-button {
position: relative;
}

/* tooltip .toolbar-button: ora reso dal tooltip flottante unico (.list-tooltip via nuvolai.js).
   Pseudo-elementi CSS neutralizzati per evitare doppioni. */
.toolbar-button::before,
.toolbar-button::after { content: none !important; }

.toolbar-icon {
position: relative;
}

/* tooltip .toolbar-icon: ora reso dal tooltip flottante unico (.list-tooltip via nuvolai.js).
   Pseudo-elementi CSS neutralizzati per evitare doppioni. */
.toolbar-icon::before,
.toolbar-icon::after { content: none !important; }

.breadcrumb {
font-size: 1rem;

}

#matrix{

}

.matrixTitle{
font-size: 1.2em;
color: #9a9a9a;
}

/* --- Card laterale dei form (col-md-2 destra di new/upd): "Indirizzi/Referenti/Banche".
   Stile centralizzato (niente inline) = quello delle card matrix di anagrafica clienti, così
   tutti i moduli sono coerenti. Accento sinistro teal di default; varianti colore per card. --- */
/* Icona-azione dentro un campo (lente P.IVA, mappa Google address): finché il campo è disabilitato
   è grigia e non cliccabile; quando il campo viene abilitato diventa colore nuvolai e cliccabile. */
.field-action-icon { color: #9a9a9a; cursor: default; pointer-events: none; }
.form-control:not(:disabled) + .field-action-icon { color: #55d5cc; cursor: pointer; pointer-events: auto; }
/* Variante per i campi SELECT (es. + "crea set" nel form commesse): l'icona sta dentro il campo,
   a sinistra della freccetta nativa del select. Richiede un wrapper .position-relative. */
.nv-select-action {
    position: absolute;
    right: 34px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}
/* Richiamo attenzione: zoom in/out ×3 sull'icona corrispondente all'hover di una skill attiva. */
@keyframes skillAttention {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.28); }
}
.skill-attention { animation: skillAttention .4s ease-in-out 5; }

.form-side-col { margin-top: 52px; margin-left: 20px; }
/* Se è presente la card Skill con almeno una skill, il margine superiore si riduce. */
.form-side-col:has(.servizio-label) { margin-top: 20px; }
.matrix-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  border-left: 3px solid #55d5cc;
  padding: .85rem 1rem;
  margin-bottom: 26px;
}
.matrix-card.matrix-card--blue   { border-left-color: #5a8bff; }
.matrix-card.matrix-card--green  { border-left-color: #57d555; }
.matrix-card.matrix-card--orange { border-left-color: #f59421; }
.matrix-card.matrix-card--purple { border-left-color: #a97bff; }   /* il Fascicolo (CRM-RITOCCHI T8): un colore suo, l'arancione è di Indirizzi */
/* Indirizzi, Referenti, Banche senza righe (o in una pagina new): solo il testo, come il Fascicolo (.fasc-vuoto), niente select né cestino */
.box-entita .be-vuoto { color: var(--nv-text-muted); font-size: .85em; }
/* Card "servizi" (prima card matrix di anagrafica clienti): niente select/+/cestino, solo
   label-servizio cliccabili (bordo colore nuvolai, testo bianco, cerchio grigio segnaposto). */
.servizio-label {
  display: flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid #55d5cc;
  border-radius: 6px;
  padding: .5rem .7rem;
  color: #fff;
  font-size: .8em;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s ease;
}
.servizio-label:hover { background: rgba(85, 213, 204, .12); }
.servizio-label .servizio-text { text-transform: uppercase; }
/* Pallino di stato: SENZA icona — rosso = non attiva, verde = attiva. */
.servizio-label .servizio-dot {
  flex: 0 0 auto;
  margin-left: auto;                 /* pallino allineato a destra nella label */
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #db3131;               /* non attiva (come hover cestino) */
  transition: background .2s ease;
}
.servizio-label .servizio-dot--attiva { background: #57d555; }   /* attiva */
/* Label larghe quanto la select delle altre card: lascio a destra lo spazio cestino(30px)+gap(.4rem). */
.servizio-card .servizio-label { margin-right: calc(30px + .4rem); }
/* Rocket accanto al titolo "Skill" (colore nuvolai), allineato alla fine delle label
   grazie al padding-right di .matrix-card-head (stesso del "+" delle altre card). */
.servizio-card-icon { color: #55d5cc; font-size: 1.5em; }
/* La sola card Skill non ha il bordo sinistro colorato. */
.matrix-card.servizio-card { border-left: none; }
/* Riga select + azioni: allineata verticalmente al centro; il "+"/cestino sono dimensionati
   sull'altezza del select (non più il box 40px del toolbar-icon che sbilanciava la card). */
.matrix-card-row { display: flex; align-items: center; gap: .4rem; position: relative; }
/* Marcatore predefinito: solo la ★ in colore nuvolai, sovrapposta a sinistra della select
   (la <select> nativa non consente di colorare un singolo carattere dell'option). */
.matrix-card-row.be-has-default .box-entita-select { padding-left: 1.4rem; }
.matrix-card-row.be-has-default::before {
  content: '\2605';
  position: absolute;
  left: .55rem;
  top: 50%;
  transform: translateY(-50%);
  color: #55d5cc;
  font-size: .85em;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}
.matrix-card-row .form-select {
  flex: 1 1 auto;
  min-width: 0;
  background-color: var(--nv-campo-fondo);   /* la select del kit (era #1a1a1a e #cfcfcf, fuori canone) */
  padding-right: 1.7rem; background-position: right .45rem center; background-size: 12px 10px;   /* la freccia del kit, senza coprire il testo */
  border: 1px solid var(--nv-campo-bordo);
  color: var(--nv-campo-testo);
  font-size: .8em;
}
.matrix-card-row .toolbar-icon { flex: 0 0 auto; width: 30px; height: 30px; font-size: 1em; }
/* Il cestino al passaggio del mouse vira al rosso azione. */
.matrix-card-row .box-entita-del:hover { color: var(--nv-danger-testo) !important; } /* batte body a:hover (teal, !important) */
/* "+" spostato a destra del titolo della card: stesso trattamento del "+" delle liste
   (.toolbar-button) ma più piccolo. */
/* padding-right = larghezza cestino (30px) + gap della row (.4rem): così il "+" si allinea
   al bordo destro della select, non sopra il cestino. */
.matrix-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-right: calc(30px + .4rem); }
.toolbar-button--sm { width: 26px; height: 26px; font-size: .85em; border-radius: 5px; }
/* Dropdown autocomplete Google Places sopra la modal SweetAlert (che ha z-index ~1060). */
.pac-container { z-index: 20000 !important; }
/* Modal dei box entità (campi DSL spostati dentro): label a sinistra, spaziatura tra i campi,
   placeholder leggibile. Scoped a .box-modal per non toccare le altre modal. */
.box-modal .swal2-html-container { text-align: left; }
.box-modal label { display: block; text-align: left; margin-bottom: .3rem; }
.box-modal .form-control { margin-bottom: 1rem; }
.box-modal .form-control::placeholder { color: #9a9a9a; opacity: 1; }
/* Widget indirizzo: azzero il margin-bottom extra della modal sull'input Google Maps, così l'icona
   mappa (top:-29px inline, tarato sul form senza quel margin) resta centrata nel campo. Lo spazio
   sotto è già dato dal mt-3 del checkbox Predefinito. */
.box-modal #bx_indirizzi_indirizzo { margin-bottom: 0 !important; }

#nuvolai-body{

}

/* ============================================================
   LAYOUT LISTA CONDIVISO — geometria UNICA (partial include/lib/nuvola/layout_lista.php).
   Riferimento: modulo Clienti. I contenitori nv-lista-* sono i marker della geometria
   (larghezze da .col-md-10/.col-md-2, padding da .card-body-table, offset faccette qui sotto).
   VIETATO ridefinire larghezze/margini/posizioni di questi contenitori nei moduli.
   ============================================================ */
.nv-lista-faccette-inner { margin-top: 72px; }


.dt-buttons {
    display: none;
}
div.dt-search input {
    width: 30vw !important; /* 30% della larghezza dello schermo */
    height: 36px;
    border:1px solid #55d5cc !important;
    outline: none !important;
    margin-top: 4px;
}
div.dt-search {
  position: fixed !important;
     left: 50% !important;
     transform: translateX(-50%) !important;
     z-index: 9999;
     top: 85px; /* aggiusta questo valore */
}

/* LA RICERCA TORNA NEL FLUSSO SUI SCHERMI STRETTI (D-1 della roadmap debug, 20/09/2026).
   Sopra, `position: fixed` con `top: 85px` mette il campo di ricerca sospeso sopra la pagina, al
   centro: su un monitor è esattamente dove serve. Sotto i 576px quel punto è occupato dal titolo
   della pagina, e il campo — largo 30vw, cioè un centimetro — ci si appoggia sopra coprendolo.
   Succede in OGNI lista dell'applicazione, non in un modulo.
   Qui la si rimette nel flusso e la si allarga: niente `fixed`, niente centratura, larghezza
   piena. Sopra i 576px non cambia una virgola, quindi il design congelato resta quello che è. */
@media (max-width: 575.98px) {
  div.dt-search {
    position: static !important;
    left: auto !important;
    transform: none !important;
    z-index: auto;
    top: auto;
    width: 100%;
    margin-bottom: 8px;
  }
  div.dt-search input { width: 100% !important; margin-top: 0; }
}
div.dt-search input:focus {
    color:#fff;
    border-color: #55d5cc !important;
    box-shadow: 0 0 0 0.35rem rgba(85, 213, 204, 0.25) !important;
}

.dt-scroll-body thead {
    display: none;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--nv-sb-track);
}

::-webkit-scrollbar-thumb {
    background-color: var(--nv-sb-thumb);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--nv-sb-thumb-hover);
}

div.dt-scroll-body {
    border-bottom-style: hidden;
}

/* FASE 2: le ombre sopra il footer usano SOLO .nv-fade / .nv-fade-box (design-system, in fondo).
   Rimossi .table-fade/.card-fade e gli override per-gruppo (.grp-hr/.grp-impostazioni/kanban). */
.gmnoprint {
    display: none !important;
}
#heatmap-container {
    width: 100%;
    border-radius: 4px;
}
#side-actions span:hover i {
    color: #55d5cc !important;
    transform: scale(1.2);
    transition: transform 0.2s ease, color 0.2s ease;
}

#side-actions span i {
    transition: transform 0.2s ease, color 0.2s ease;
}
#side-actions {
    z-index: 9990;
}

/* Overlay dei pannelli laterali (chat/assistente): stesso backdrop del drawer CRM. */
.nv-side-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 10000;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.nv-side-overlay.is-open { opacity: 1; visibility: visible; }
#side-actions span:hover svg {
    color: #55d5cc !important;
    transform: scale(1.2);
}

#side-actions span svg {
    transition: transform 0.2s ease, color 0.2s ease;
    color: #fff;
    font-size: 1.5rem;
}
.anagrafica-container {
    width: 100%;
    min-height: calc(100vh - 110px - 50px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #f0f7ff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color:#000;
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--nv-campo-bordo);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Selettore di colore accanto al campo hex, dentro un .input-group (brand identity: il colore
   primario si sceglie col picker o si incolla come codice — sono lo stesso dato).

   Perché serve una regola invece delle sole classi Bootstrap: `.form-control-color` da solo è alto
   38px, perché Bootstrap ne calcola l'altezza sul proprio font-size da 1rem, mentre il
   `.form-control` di Nuvolai è alto 36px (padding + 0.9rem); aggiungendo `.form-control` l'altezza
   torna giusta ma la larghezza si riduce al contenuto e il quadratino di colore sparisce — misurato:
   swatch 0px. Qui si fissano insieme le due cose, larghezza e altezza, una volta per tutte.

   Il selettore discendente serve: dentro un input-group Bootstrap dichiara
   `.input-group > .form-control { flex: 1 1 auto; width: 1% }`, che con una classe sola batte questa
   regola per specificità e riallarga il picker a metà riga. */
.input-group > .nv-color-picker,
.nv-color-picker {
    flex: 0 0 52px;
    width: 52px;
    height: auto;          /* la toglie a .form-control-color: l'altezza la dà .form-control */
    padding: .25rem;       /* lo swatch riempie il campo invece di essere schiacciato dal padding */
}

.form-control:disabled {
    background-color: #3d3e3e;
    color: #ababab;
    opacity: 1;
}

/* Campo compilato dal sistema e non modificabile qui: stesso aspetto di un campo disabilitato, ma
   `readonly` e non `disabled`, perché il valore deve restare leggibile e selezionabile (si copia).
   Usata dal campo Icona del catalogo quando il servizio è collegato a un modulo: quell'icona sta
   nel manifesto, e il form lo dice invece di lasciar credere che il campo sia rotto. */
.form-control.nv-campo-bloccato {
    background-color: #3d3e3e;
    color: #ababab;
    cursor: default;
}

/* Input numerici (type=number): lo spinner nativo del browser deve seguire il tema scuro
   (sfondo nero, frecce bianche) invece del default chiaro. */
.form-control[type="number"] { color-scheme: dark; }

.form-control:focus {
    color: #fff;
    background-color: #000;
    border: 1px solid #55d5cc;
    outline: none !important;
    box-shadow: 0 0 0 0.35rem rgba(85, 213, 204, 0.25) !important;
}

.card-input-label{
  font-family: 'Outfit', sans-serif !important;
  color: #cfcfcf;
  font-weight: bold;
  font-size: 0.8em;
}

/* =====================================================================
   STILI CENTRALIZZATI — consolidati dai blocchi <style> dei moduli.
   Spostati qui per evitare CSS sparso nei singoli file PHP.
   ===================================================================== */

/* --- Widget orologio (footer / clock.php) --- */
.clock {
  color: #9a9a9a;
}
#clock ul {
    width: 100%;
    margin: 0 auto;
    padding: 0px;
    list-style: none;
}
#clock ul li {
    display: inline;
    font-size: 12px;
}
#point {
    position: relative;
}

/* --- Tabelle di elenco (list.php dei moduli) --- */
table tbody tr:hover{
background-color: #00cdda2b!important;
}
table thead tr{
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  border-bottom: 2px solid #55d5cc; /* colore nuvolai */
}

/* --- DataTable: riga di dettaglio espandibile (articoli / nuvolai moduli, w) --- */
td.details-control {
  text-align: center;
  cursor: pointer;
  padding-left:5px!important;
  svg{

    font-size: 17px;
  }
}
#table tbody tr.child-row:hover {
  background-color: transparent !important;
}
.centered-cell {
  text-align: center!important;
  vertical-align: middle;
}
.left-cell {
  text-align: left!important;
  vertical-align: middle;
}

/* --- Editing prezzo inline (catalogo/articoli/list.php) --- */
.input-prezzo,
.salva-prezzo {
  display: none;
  width: 80px;
}
.prezzo-editable:hover {
  cursor: pointer;
  text-decoration: underline;
}
.saved {
  border: 1px solid #28a745;
  background-color: #eafaf1;
}
.prezzo-container {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  white-space: nowrap;
  justify-content: center;
}
.prezzosalvato{
  color: #50cd89!important;
  font-weight: 700!important;
}

/* --- Loader / spinner --- */
.loader-wrapper{width:150px;height:100px;float:left !important}

.loaderabilita,
.loaderabilita:before,
.loaderabilita:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    animation-fill-mode: both;
    animation: bblFadInOut 2.4s infinite ease-in-out;
}
.loaderabilita {
  color: #55d5cc;
    font-size: 5px;
    position: relative;
    text-indent: -9999em;
    transform: translateZ(0) translateY(-2.5em);
    animation-delay: -0.48s;
    display: inline-block;
}
.loaderabilita:before,
.loaderabilita:after {
    content: '';
    position: absolute;
    top: 0;
}
.loaderabilita:before {
    left: -3.5em;
    animation-delay: -0.96s;
}
.loaderabilita:after {
    left: 3.5em;
    animation-delay: 0s;
}
@keyframes bblFadInOut {
    0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em #55d5cc; }
    40% { box-shadow: 0 2.5em 0 0 #55d5cc; }
}
.loaderabilita-red,
.loaderabilita-red:before,
.loaderabilita-red:after {
    animation-name: bblFadInOutRed;
}
@keyframes bblFadInOutRed {
    0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em #ce2800; }
    40% { box-shadow: 0 2.5em 0 0 #ce2800; }
}
.loaderabilita-green,
.loaderabilita-green:before,
.loaderabilita-green:after {
    animation-name: bblFadInOutGreen;
}
@keyframes bblFadInOutGreen {
    0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em #57d555; }
    40% { box-shadow: 0 2.5em 0 0 #57d555; }
}

/* Badge esito skill "Verifica Rischio" (Nuvolai Credit Scoring) nel form clienti: pillola colorata
   per severità (verde/giallo/rosso), click = dettaglio (sweetCreditScore). */
.ncs-badge { display:inline-flex; align-items:center; gap:8px; padding:5px 14px; border-radius:6px; font-weight:600; font-size:0.8em; color:#fff !important; text-decoration:none; cursor:pointer; background:transparent; border:1px solid transparent; }
.ncs-badge:hover { color:#fff !important; filter:brightness(1.12); }
.ncs-badge i { font-size:1.1em; color:#fff !important; }
.ncs-badge--green { border-color:#57d555; }
.ncs-badge--orange { border-color:#ffb020; }
.ncs-badge--red { border-color:#db3131; }

/* View cliente: riga di 6 statistiche sopra le tab (numeri stile .card-number-custom ridotti per
   stare in una riga; etichetta sopra). */
.view-stats { display:flex; gap:8px; margin-bottom:14px; }
.view-stats .view-stat { flex:1 1 0; min-width:0; text-align:center; cursor:pointer; }
.view-stats .view-stat-label { color:#8a8a8a; font-size:0.8rem; line-height:1.15; margin-bottom:4px; min-height:2.6em; display:flex; align-items:flex-end; justify-content:center; }
.view-stats .view-stat .card-number-custom { flex:none; display:block; font-size:2.5rem; color:#e8e8e8; transition:color .15s ease; }
.view-stats .view-stat:hover .card-number-custom { color:#55d5cc; }
.view-stats .view-stat.is-active .card-number-custom { color:#55d5cc; }
/* Grafico ApexCharts sotto i numeri (sfondo nero, curve morbide blu nuvolai). */
.view-chart { margin-bottom:28px; min-height:210px; }

/* View cliente: filtro periodo in alto a destra (Totale / Anno in corso / Mese in corso).
   Nero + bordo blu nuvolai; selezionato/hover = sfondo blu nuvolai + testo nero. */
.view-period { display:flex; gap:8px; justify-content:flex-end; margin-bottom:12px; }
.view-period-btn { cursor:pointer; padding:4px 12px; border-radius:6px; font-size:0.8rem; font-weight:600; background:#000; color:#fff; border:1px solid #55d5cc; transition:background-color .15s ease, color .15s ease; }
.view-period-btn:hover,
.view-period-btn.is-active { background:#55d5cc; color:#000; }

/* View cliente: referenti come accordion (native <details>) nella colonna sinistra: da chiuso il
   nome, da aperto ruolo/telefono/email. */
.view-ref { border:1px solid #2a2a2a; border-radius:6px; margin-top:8px; }
.view-ref > summary { list-style:none; cursor:pointer; padding:9px 12px; color:#e8e8e8; font-weight:600; font-size:0.9rem; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.view-ref > summary::-webkit-details-marker { display:none; }
.view-ref .view-ref-caret { color:#8a8a8a; font-size:0.75rem; transition:transform .2s ease; }
.view-ref[open] .view-ref-caret { transform:rotate(180deg); }
.view-ref .view-ref-body { padding:2px 12px 10px; border-top:1px solid #1e1e1e; }
/* Mini-mappa dentro l'accordion Indirizzo (colonna riepilogo) */
.view-ref-map { width:100%; height:170px; border-radius:6px; overflow:hidden; margin:8px 0 10px; background:#0a0a0a; }
/* Stella "predefinito" negli accordion (colore nuvolai), prima dell'etichetta */
.view-ref-star { color:#55d5cc; font-size:0.8rem; margin-right:3px; }
/* Liste accordion in colonna sx (Indirizzi, Referenti): flush, allineati a sinistra ai testi e attaccati fra loro */
.view-acc-list .view-ref { margin-top:0; border:0; border-bottom:1px solid #2a2a2a; border-radius:0; }
/* padding-right allinea il chevron sotto il glifo del "+" (.toolbar-button 36px) del titolo */
.view-acc-list .view-ref > summary { padding-left:0; padding-right:13px; }
.view-acc-list .view-ref > summary > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.view-acc-list .view-ref .view-ref-body { padding-left:0; padding-right:0; }
/* Riga badge (tipologia + insolvente + verifica rischio): tutti alti 30px, testo centrato */
.view-badges { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.view-badges .mv-badge, .view-badges .ncs-badge { box-sizing:border-box; height:30px; padding:0 14px; font-size:0.8em; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
/* Colori badge SOLO nella view (col.1) */
.view-badges .view-badge-tip.is-giuridica,
.view-badges .view-badge-tip.is-fisica { background:#55d5cc; color:#000; border-color:#55d5cc; }
.view-badges .view-badge-insolvente { background:#db3131; color:#fff; border-color:#db3131; }
/* Verifica rischio: testo sempre maiuscolo; sfondo pieno del suo colore, testo+icona NERI; hover = sfondo nero, bordo del suo colore, testo+icona BIANCHI */
.view-badges .ncs-badge { text-transform:uppercase; }
.view-badges .ncs-badge, .view-badges .ncs-badge i { color:#000 !important; }
.view-badges .ncs-badge--green  { background:#57d555; }
.view-badges .ncs-badge--orange { background:#ffb020; }
.view-badges .ncs-badge--red    { background:#db3131; }
.view-badges .ncs-badge:hover { background:#000 !important; filter:none; }
.view-badges .ncs-badge:hover, .view-badges .ncs-badge:hover i { color:#fff !important; }
/* Tabelle (DataTable) dentro i tab della colonna centrale della view */
.view-dt { width:100%; border-collapse:collapse; }
.view-dt thead th { color:#8a8a8a; font-size:0.72rem; text-transform:uppercase; letter-spacing:.04em; font-weight:600; padding:8px 10px; text-align:left; white-space:nowrap; }
.view-dt tbody td { color:#e8e8e8; font-size:0.9rem; border-bottom:1px solid #141414; padding:9px 10px; vertical-align:middle; }
.view-dt tbody tr:hover td { background:#0c0c0c; }
.view-dt .dt-empty, .view-dt td.dt-empty { color:var(--nv-text-muted); text-align:center; padding:22px 10px; }
.view-dt-wrap .dt-paging { margin-top:10px; }
/* Barra sopra la tabella: conteggio record (sx) + ricerca e pulsante "+" (dx) */
.view-dt-head { display:flex; align-items:center; justify-content:space-between; margin-top:30px; margin-bottom:0; }
.view-dt-count { color:#8a8a8a; font-size:0.82rem; white-space:nowrap; margin-left:10px; }
/* [#id] del record nel breadcrumb toolbar (view) */
.tb-record-id { color:#8a8a8a; }
/* #id cliccabile nel breadcrumb (upd) → torna alla view: bianco */
.tb-record-link { color:#fff; }
.view-dt-tools { display:flex; align-items:stretch; gap:18px; } /* stretch: il search prende l'altezza del "+" */
.view-dt-search { box-sizing:border-box; margin-top:-2px; height:40px; width:180px; background:var(--nv-campo-fondo); border:1px solid var(--nv-campo-bordo); border-radius:6px; color:var(--nv-campo-testo); padding:0 12px; font-size:0.85rem; line-height:38px; outline:none; transition:border-color .15s ease; }
.view-dt-search:focus { border-color:#55d5cc; }
.view-dt-search::placeholder { color:#5a5a5a; }

/* Overlay loader globale (#nuvolailoader): backdrop scuro + spinner .loaderabilita centrato.
   Mostrato dai launcher delle skill (getCompany) durante le chiamate al webservice. */
.nuvola-loader-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100001;
}
/* Messaggio sopra lo spinner (es. generazione testi AI). */
.nuvola-loader-msg { color: #fff; font-size: 1.05rem; text-align: center; max-width: 80%; margin-bottom: 22px; }

/* --- Numeri / select dashboard impostazioni e nuvolai (list.php) --- */
.matrixNumber {
    margin-left: 34%;
}
.matrixSelect {
    margin-left: 24%;
        padding: 7px 0px 8px 0px;
}

/* --- Mappa clienti (anagrafica/clienti/matrix.php) --- */
.matrixNumberMap {
    font-size: 2.2em;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
    text-align: center;
    margin-left: 86px;
}
.dt-info{
  color:var(--nv-text-muted);   /* NOTTE-STILI-UX: era #6b6b6b, 3,94:1 */
}

/* --- Dashboard anagrafica (anagrafica/index.php) --- */
.centering-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56vh;
  width: 100%;
}
.anagrafica-container {
  width: 100%;
}
.anagrafica-title {
  color: #55d5cc;
  text-align: center;
  font-size: 2em;
  font-weight: 100;
  margin-bottom: 30px;
}
/* Icona-azione INLINE dentro un titolo di gruppo (h1.anagrafica-title → Impostazioni del gruppo).
   .toolbar-icon non va bene qui: è un box 40x40 pensato per la toolbar e in mezzo a un titolo
   spezzerebbe la riga. Questa invece segue il testo: mezza dimensione del titolo (2em → 1em),
   centrata sulla riga, colore delle icone azione (#9a9a9a) e, all'hover, lo stesso ingrandimento
   delle icone del menu footer. display:inline-block è obbligatorio: su un <i> inline il transform
   non si applica (stessa ragione già annotata per .footer-icon). */
.nv-title-icon {
  display: inline-block;
  font-size: .5em;
  color: #9a9a9a;
  margin-left: .35em;
  vertical-align: middle;
  cursor: pointer;
  transition: transform .15s ease;
}
.nv-title-icon:hover { color: #9a9a9a; transform: scale(1.4); }

/* Testo giustificato. Bootstrap 5 ha rimosso .text-justify (c'era in v4) e non esiste un'utility
   equivalente: serve per i paragrafi lunghi centrati nella pagina (intro del wizard di onboarding),
   dove le righe di lunghezza diversa lascerebbero il blocco sfrangiato. */
.nv-text-justify { text-align: justify; text-justify: inter-word; }

.card-custom {
  background-color: #000;
  border: 1px solid #444444;
  border-radius: 6px;
  padding: 15px 20px;
  margin-bottom: 30px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
}
.card-header-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.card-title-custom {
  color: #fff;
  font-size: 1.1em;
  font-weight: 500;
}
.card-number-custom {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.8em;
  font-weight: bold;
}
.card-title-link,
.card-number-link {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: color 0.2s ease;
}
.card-title-link:hover,
.card-title-link:hover .card-title-custom,
.card-number-link:hover,
.card-number-link:hover .card-number-custom {
  color: #55d5cc;
  text-decoration: none;
}
/* Fa in modo che il link che avvolge il numero mantenga il layout flex */
.card-number-link {
  flex: 1;
  display: flex;
}
.card-number-link .card-number-custom {
  width: 100%;
}
/* CRM home — card-risposta: unità/etichetta piccola e risposta testuale dentro .card-number-custom */
.card-number-custom .crm-card-unit { font-size: 0.4em; font-weight: 400; color: #8a8a8a; margin-left: 6px; align-self: center; }
.card-number-custom .crm-card-text { font-size: 0.5em; font-weight: 500; line-height: 1.2; text-align: center; }

/* --- Impostazioni: box settings (.settings-box su .card-custom) --- */
/* Descrizioni e label (incl. quelle generate dalla DSL new*) leggibili su fondo nero. */
.settings-box .settings-desc,
.settings-box label {
  color: #ababab;
}
/* Chip tag: colorato SOLO nel bordo (border-color runtime inline), fondo nero, testo bianco. */
.tag-chip {
  background-color: #000;
  color: #fff;
  border: 1px solid #55d5cc;
}
/* La × è resa da FontAwesome come <svg> (kit SVG+JS sostituisce l'<i>): targettare entrambi. */
.tag-chip i, .tag-chip svg {
  color: #fff;
  cursor: pointer;
  margin-left: 4px;
}
.tag-chip i:hover, .tag-chip svg:hover { color: var(--nv-danger-testo) !important; }
/* Tag lead (pagina impostazioni): testo sottile. */
/* --- Impostazioni: Centri Costo e Ricavo (moduli/impostazioni/centri-costo) --- */
/* Separatore fra l'input "nuovo gruppo" e l'elenco dei gruppi, con spazio sopra/sotto. */
.centro-sep { border: 0; border-top: 1px solid #444444; opacity: 1; margin: 1.6rem 0; }
/* Riga gruppo allineata a destra all'input "nuovo gruppo": niente padding a destra della card → i "+"
   e il cestino cadono sullo stesso asse. A sinistra resta il padding di default della card (spazio fra
   il bordo colorato e il contenuto: titolo/voci/input). L'input "nuovo gruppo" è rientrato di pari
   passo con .ps-3 in list.php, così le larghezze coincidono. */
.centro-gruppo { padding-right: 0; }
/* Cestino "elimina gruppo" a filo destro e della stessa misura del "+" (36px) → perfettamente
   allineato, in colonna, sopra il "+" della voce. */
.centro-gruppo .matrix-card-head { padding-right: 0; }
.centro-gruppo .matrix-card-head .toolbar-icon { width: 36px; height: 36px; }
/* Hover rosso sul cestino "elimina gruppo" (batte il body a:hover teal !important). */
.centro-gruppo .matrix-card-head .toolbar-icon:hover { color: var(--nv-danger-testo) !important; }
/* Titolo del gruppo bianco (il colore del gruppo resta su bordo sinistro + chip voci). */
.centro-gruppo .matrixTitle { color: #fff; }
/* Box principale: altezza impostata via JS (list.php) per finire prima del footer; niente margine
   sotto (il footer è fisso). Il .card-custom è già flex-column, quindi la lista gruppi cresce dentro. */
.centro-box { margin-bottom: 0; position: relative; }
/* FASE 2: l'ombra in basso al box è la canonica .nv-fade-box (design-system, in fondo). */
/* Elenco gruppi scrollabile (flex-grow dentro il box): scrollbar sottile come i pannelli (.view-panel).
   padding-right = spazio fra la scrollbar e i "+"/cestino (l'input "nuovo gruppo" ha .pe-2 in list.php
   per restare allineato). */
.centro-gruppi-scroll { overflow-y: auto; overflow-x: hidden; min-height: 0; padding-right: .5rem; }
/* Testo delle voci (chip) sottile. Scoped a .centro-voci per non toccare i tag Lead. */
.centro-voci .tag-chip { font-weight: 100; }
/* Chip tag selezionabili nella modal di qualifica lead (toggle on/off via opacity-50 Bootstrap). */
.lead-qual-tag {
  cursor: pointer;
  user-select: none;
}

/* --- Form layout, scrollbar custom, switch/checkbox, CKEditor (form new/upd) --- */
/* Il corpo dei form (new/upd) NON scorre più per conto suo (23/09/2026): lo faceva con la barra
   NASCOSTA, e l'unico modo di sapere che sotto c'erano altri campi era provare la rotella. Adesso il
   form è alto quanto il suo contenuto e scorre il guscio (.main-content), con la toolbar e il Salva
   fermi in cima. `position:relative` resta: è il riferimento delle icone dentro i campi. */
.col-md-10 .card-body {
    position: relative;
}
.card-body label {
    color: #cfcfcf;
    font-size: 0.8em;
    padding-bottom:4px;
}
.card-body input::placeholder,
.card-body textarea::placeholder,
.card-body select::placeholder {
    color: #9a9a9a;
    font-size: 0.9em;
}
/* Brand Identity master-detail (fuori da .card-body): label/placeholder standard come il form New. */
.nv-brand-set label { color: #cfcfcf; font-size: 0.8em; padding-bottom: 4px; }
/* Stessa cosa per i BLOCCHI DELLE IMPOSTAZIONI (.crm-block), che sono anch'essi fuori da .card-body:
   "La tua azienda", le tab dei settings di gruppo. Senza questa riga le label dei campi ereditavano
   il #212529 di Bootstrap — grigio scurissimo su fondo nero, praticamente illeggibile — e sembravano
   campi disabilitati anche da abilitati. Lo stato disabled vero è un'altra cosa e ha il suo colore
   (.form-control:disabled → #ababab). Trovato col task 11d. */
.crm-block label { color: #cfcfcf; font-size: 0.8em; padding-bottom: 4px; }
.nv-brand-set input::placeholder,
.nv-brand-set textarea::placeholder,
.nv-brand-set select::placeholder { color: #9a9a9a; font-size: 0.9em; }
/* Allineamento uniforme di checkbox, radio e switch con le rispettive label.
   Prima: .form-check aveva padding-left:0!important mentre l'input conservava il
   margin-left:-2.25rem di Bootstrap (che presuppone quel padding) -> il controllo veniva tirato
   FUORI dal proprio contenitore, sovrapponendosi a cio' che aveva a sinistra, e la label partiva
   dal bordo del box invece che dal controllo. In verticale, un input di 1.75rem contro una riga di
   label da 1.5rem restava scentrato. Con flex + align-items:center i due si allineano da soli, in
   tutte le varianti di wrapper usate nei moduli (form-check, form-check form-switch, label.form-check). */
.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.5rem;
    padding-left: 0rem!important;
    margin-bottom: 0.125rem;
    margin-left: 0 !important;
    padding-right: 0rem !important;
}
/* I moduli che vogliono lo switch in linea (liste, celle) usano d-inline-block: resta inline. */
.form-check.d-inline-block { display: inline-flex !important; }
.form-check .form-check-input {
    float: none !important;
    margin-left: 0 !important;
    margin-top: 0;
    flex: 0 0 auto;
}
.form-check .form-check-label { margin-bottom: 0; }
.form-check-reverse {
    padding-right: 2.25rem;
    padding-left: 0;
    text-align: right;
}
.form-check-reverse .form-check-input {
    float: right;
    margin-right: -2.25rem;
    margin-left: 0;
}
.form-check-input {
    --bs-form-check-bg: transparent;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: -0.125rem;
    vertical-align: top;
    background-color: var(--bs-form-check-bg);

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: var(--bs-border-width) solid var(--nv-campo-bordo);
    appearance: none;
    print-color-adjust: exact;
}
.form-check-input[type="checkbox"] {
    border-radius: 0.45em;
}
.form-check-input[type="radio"] {
    border-radius: 50%;
}
.form-check-input:active {
    filter: brightness(90%);
}
.form-check-input:checked {
        background-color: #55d5cc;
    border-color: #55d5cc;   /* acceso: il bordo è il riempimento (era #3a3a3a: lo switch del kit era diverso da tutti gli altri) */
}
.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23FFFFFF'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FFFFFF'/%3e%3c/svg%3e");
}
.form-check-input[type="checkbox"]:indeterminate {
    background-color: #00cfbe;
    border-color: #00cfbe;
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 1%29'/%3e%3c/svg%3e")!important;
    pointer-events: none;
    filter: none;
    opacity: 0.5;
    background-color: #8a8a8a;
    border: #8a8a8a;
    border-radius: 1.2rem!important;
}
.form-check-input:focus {
     --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.5%29'/%3e%3c/svg%3e");

    border: 1px solid #55d5cc;
    outline: none !important;
    box-shadow: 0 0 0 0.35rem rgba(85, 213, 204, 0.25) !important;
}
.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
    cursor: default;
    opacity: 0.5;
}
.form-check-label {
    color: var(--nv-text-label);   /* NOTTE-STILI-UX: era il grigio 500 di Bootstrap (#adb5bd), 1,85:1 nel chiaro */
}
.form-switch {
    padding-left: 3.75rem;
}
.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.5%29'/%3e%3c/svg%3e");
    width: 3.25rem;
    margin-left: -3.75rem;
    background-image: var(--bs-form-switch-bg);
    background-position: left center;
    border-radius: 3.25rem;
    transition: background-position 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .form-switch .form-check-input {
        transition: none;
    }
}
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.5%29'/%3e%3c/svg%3e");
   }
.form-switch .form-check-input:checked {
    background-position: right center;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e");
}
.form-switch.form-check-reverse {
    padding-right: 3.75rem;
    padding-left: 0;
}
.form-switch.form-check-reverse .form-check-input {
    margin-right: -3.75rem;
    margin-left: 0;
}
.form-check-inline {
    display: inline-block;
    margin-right: 1rem;
}
.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}
.btn-check:disabled + .btn,
.btn-check[disabled] + .btn {
    pointer-events: none;
    filter: none;
    opacity: 0.65;
}
.ck-content{
    min-height: 136px;
    background-color: #000;
    color: #f0f0f0; /* testo bianco anche fuori focus (prima ereditava un grigio scuro) */
    border: var(--bs-border-width) solid var(--nv-campo-bordo)!important;
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.ck-content:focus {
    color: #fff;
    background-color: #000;
    border: 1px solid #55d5cc!important;
    outline: none !important;
    box-shadow: 0 0 0 0.35rem rgba(85, 213, 204, 0.25) !important;
}
.disabledtextarea {
    background-color: #3d3e3e!important;
    border: 1px solid #3d3e3e!important;
    color: #ababab!important; /* testo leggibile come .form-control:disabled */
    pointer-events: none;
}
.ck.ck-editor__editable.ck-rounded-corners:not(.ck-editor__nested-editable) {
    border-radius: var(--bs-border-radius);
}
.ck-powered-by-balloon{

  visibility: hidden;

}
.ck.ck-toolbar {
    background: #000000!important;
    color: #FFF!important;
    border: 1px solid var(--ck-color-toolbar-border);
    padding: 0 var(--ck-spacing-small);
    border-radius: var(--bs-border-radius);
}
.ck.ck-button, a.ck.ck-button {
    color: #FFF;
}
.ck.ck-button:not(.ck-disabled):hover, a.ck.ck-button:not(.ck-disabled):hover {
    background: #55d5cc;
    color: #000;
}
.ck.ck-button.ck-on, a.ck.ck-button.ck-on {
    background: #55d5cc;
    color: #000;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    color: #ababab!important;
  background-color: #3d3e3e!important;
  border-color: #3d3e3e!important;
  font-size: 0.8rem;
  font-weight: 400;
  padding: 6px 6px 6px 0px;
}
.select2-container .select2-selection--single {
    height: 36px !important;
    border-radius: 0.375rem;
        background-color: #000000;
    border: 1px solid var(--nv-campo-bordo);
      padding: 6px 6px 6px 0px;
}
.select2-selection__placeholder {
    color: #8a8a8a!important;
    opacity: 1!important;
}

.select2disabled{
  color: #ababab!important;
  background-color: #3d3e3e!important;
  border-color: #3d3e3e!important;
  opacity: 1!important;
  font-size: 0.8rem;
  font-weight: 400;
  padding: 6px 6px 6px 0px;
}
/* Testo dei select/multiselect DISABILITATI uniformato agli altri input disabled (#a9a9a9):
   il rendered dei single (che è #fff!important) e i chip dei multiselect (che sono #FFF). */
.select2disabled .select2-selection__rendered,
.select2-container--disabled .select2-selection__rendered,
.select2disabled .select2-selection__choice,
.select2-container--disabled .select2-selection__choice { color:#ababab !important; }



.select2-container--bootstrap5 .select2-selection--multiple:not(.form-select-sm):not(.form-select-lg) {
    padding-top: .8rem!important;
}
/* Multiselect: box nero come il single (default select2 era grigio). I chip restano quelli di default. */
.select2-container .select2-selection--multiple {
    background-color: #000000 !important;
    border: 1px solid var(--nv-campo-bordo) !important;
    border-radius: 0.375rem;
    min-height: 36px;
}
/* Batte lo stato disabled (grigio) del select2 multiplo: il box resta nero come gli altri input del drawer. */
.select2-selection--multiple.select2disabled,
.select2-container--disabled .select2-selection--multiple,
#art-drawer .select2-selection--multiple { background-color: #000000 !important; border-color: var(--nv-campo-bordo) !important; color: #f0f0f0 !important; }
.select2-container .select2-selection--single .select2-selection__rendered {
    color: #fff!important;
    padding: .1rem .75rem;
    font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.5;
}
.select2-selection__arrow{
  display:none!important;
}
.select2-results {
background-color: #000000;
    color: #FFF;
    font-size: 0.8rem;
}
/* Campo di ricerca dentro il dropdown di Select2: la libreria lo lascia col proprio grigio (#545454
   su fondo trasparente, misurato contrasto 1.42) e chi digita non vede quello che scrive. Il resto
   del componente è già vestito qui sopra: mancava solo questo pezzo. */
.select2-search__field,
.select2-container .select2-search--dropdown .select2-search__field {
    background-color: #000;
    border: 1px solid var(--nv-campo-bordo);
    border-radius: var(--bs-border-radius);
    color: #f0f7ff;
}
.select2-search__field::placeholder { color: #8a8a8a; }
.select2-dropdown {
    background-color: #000000;
    border: 1px solid #333333;
    padding: 6px;
    border-radius: 8px;
    margin-top: -2px;
}
.select2-container--default .select2-results__option--selected {
    background-color: #55d5cc!important;
    color: #000!important;
    font-weight: 500!important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #000000;
    color: white;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable:hover {
    background-color: #2a2a2a;
    color: white;
}
.select2-container .select2-selection--single .select2-selection__clear {
    background-color: #ffffff00;
    border: none;
    font-size: 1em;
    color: #FFF!important;
    height: 17px!important;
    margin-right: 6px!important;
    padding-right: 0px!important;
    margin-top: -1px;
}
/* (CRM-RITOCCHI T6, 13/10/2026) fondo, bordo e testo dei campi, come gli altri input: era grigio #3d3e3e e, venendo dopo il «box
   nero» qui sopra con la stessa forza, vinceva su ogni multiselect del tema di default (Invitati del pannello CRM, i multiselect
   dei form): sembrava disabilitato */
.select2-container--default .select2-selection--multiple {
    color: var(--nv-campo-testo)!important;
  background-color: var(--nv-campo-fondo)!important;
  border-color: var(--nv-campo-bordo)!important;
  opacity: 1!important;
  font-size: 0.8rem;
  font-weight: 400;
  padding: 4px 6px 6px 0px;
  border-radius: 8px;

}
.select2-container .select2-search--inline .select2-search__field {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.9rem;
    font-weight: 400;
    margin-left: 10px;
    margin-top: 2px;
    height: 20px;
}
select option:disabled {
    color:#535674!important;
}
select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #000000;
    border: 1px solid #ababab;
    margin-left: 9px;
    margin-top: 0px;
    padding: 0;
    padding-left: 18px;
    font-size: 0.8rem;
    color: #FFF;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    background-color: #ffffff00;
    border: none;
    font-size: 1.1rem;
    color: #FFF !important;
    height: 17px !important;
    margin-right: 10px !important;
    margin-top: -1px;
    padding-right: 0px !important;
}
.select2-selection--single:focus{
border: 1px solid #55d5cc!important;
    outline: none !important;
    box-shadow: 0 0 0 0.35rem rgba(85, 213, 204, 0.25) !important;
}
.select2-selection--multiple:active{
border: 1px solid #55d5cc!important;
    outline: none !important;
    box-shadow: 0 0 0 0.35rem rgba(85, 213, 204, 0.25) !important;
}
.select2-container--focus{
    border: 1px solid #55d5cc!important;
    outline: none !important;
    box-shadow: 0 0 0 0.35rem rgba(85, 213, 204, 0.25) !important;
    height: 36px;
    border-radius: 8px;
}

/* ============================================================
   Home /index — Prompt assistente AI Nuvolai (stile Claude)
   ============================================================ */
/* Wizard più alto dello spazio disponibile (schermo basso, editor aperto, elenco lungo): il blocco
   smette di stare al centro e scorre. Senza, il contenuto centrato in un flex più corto di lui viene
   tagliato IN ALTO e quella parte non si raggiunge in nessun modo. La classe la mette onbResize(),
   che è l'unico punto che conosce l'altezza reale. */
.nuvolai-home.is-scroll {
    justify-content: flex-start;
    overflow-y: auto;
}

.nuvolai-home {
    /* centra il blocco tra header (55px) e footer (45px):
       body padding-top 50 + main-content margin-top 30 = 80px sopra il blocco;
       min-height = 100vh - (80 + 70) → centro del blocco a 50vh + 5px */
    position: relative;
    min-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* La barra di input è l'unico elemento in flusso (chat nascosta all'avvio):
   resta esattamente al centro. Saluto e suggerimenti fluttuano sopra/sotto,
   ancorati simmetricamente alla linea mediana. */
.nuvolai-greeting {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50%;
    margin-bottom: 2.5rem;
}
.nuvolai-greeting-title {
    font-weight: 100;
    margin-bottom: 0.25rem;
    color: #55d5cc;
    text-align: center;
    font-size: 2em;
}
.nuvolai-greeting-sub {
    color: #8a8a8a;
    font-size: 1.05rem;
    margin-bottom: 0;
}
/* Video di auguri sopra il saluto, SOLO il giorno del compleanno del dipendente loggato */
.nuvolai-birthday-video {
    width: 180px;
    max-width: 100%;
    margin-bottom: 12px;
}

/* Barra di input (textarea + invio) */
.nuvolai-inputbar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    border: 1px solid #55d5cc !important;
    outline: none !important;
    border-radius: 0.375rem;
    padding: 6px 16px 6px 18px;
    background-color: #000;
    color: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nuvolai-inputbar:focus-within {
    color: #fff;
    border-color: #55d5cc !important;
    box-shadow: 0 0 0 0.35rem rgba(85, 213, 204, 0.25) !important;
}
/* (voce 4) Stessa ombra fade-to-black di .nv-fade (sopra il footer), qui ancorata
   esattamente sopra il campo input: sfuma la conversazione che scorre prima dell'input.
   z-index:-1 → resta SOTTO textarea/send (l'inputbar forma lo stacking context con z-index:1);
   opacity 0 di default → visibile solo quando la chat va in scroll (classe .nuvolai-scrollable via JS). */
.nuvolai-inputbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    /* +1px = spessore del bordo: la fade termina sopra il bordo superiore dell'input, senza coprirlo. */
    bottom: calc(100% + 1px);
    height: var(--nv-fade-h);
    background: linear-gradient(to bottom, transparent, #000000);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.nuvolai-scrollable .nuvolai-inputbar::before {
    opacity: 1;
}
.nuvolai-inputbar textarea.form-control {
    flex: 1 1 auto;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff;
    resize: none;
    overflow-y: auto;
    max-height: 200px;
    padding: 8px 4px;
    line-height: 1.5;
}
.nuvolai-inputbar textarea.form-control::placeholder {
    color: #8a8a8a;
}
.nuvolai-send {
    flex: 0 0 auto;
    align-self: center;
    cursor: pointer;
    padding: 0 6px;
    font-size: 1.4rem;
    color: #fff;
    --fa-primary-color: #fff;
    --fa-secondary-color: #fff;
    transition: color 0.15s ease;
}
.nuvolai-send:hover {
    color: #55d5cc;
    --fa-primary-color: #55d5cc;
    --fa-secondary-color: #55d5cc;
}

/* Suggerimenti */
.nuvolai-chips {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: 2.5rem;
}
.nuvolai-chip {
    margin: 6px 14px;
    border-radius: 18px;
    transition: transform 0.2s ease;
}
/* hover: niente cambio sfondo, solo ingrandimento (come le icone del footer) */
.nuvolai-chip:hover,
.nuvolai-chip:focus,
.nuvolai-chip:active {
    transform: scale(1.1);
    background-color: transparent !important;
    color: #6c757d !important;
    border-color: #6c757d !important;
    box-shadow: none !important;
}

/* Variante MINORE del chip: stessa forma, stesso colore, stesso hover, peso visivo inferiore.
   Serve quando in una riga di chip uno è l'azione secondaria e non deve competere con la principale
   (il "Salta configurazione" del wizard di onboarding accanto alla risposta). Si usa SEMPRE insieme a
   .nuvolai-chip e agisce sulle variabili del bottone Bootstrap invece che su font-size/padding
   diretti: così eredita il resto di .btn e non serve nessun !important per avere la meglio su btn-sm. */
.nuvolai-chip-sm {
    --bs-btn-font-size: 0.675rem;
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-padding-x: 0.45rem;
}

/* Chip a larghezza fissa: le risposte di una stessa riga (Sì / No / Skip, Avanti / Skip del wizard di
   onboarding) devono avere tutte la stessa ampiezza, altrimenti "Sì" resta un bottoncino accanto a
   "Skip" e la riga sembra sbilanciata. 80px basta a contenere le parole brevi delle risposte; il testo
   è già centrato da .btn, lo si dichiara perché la larghezza fissa lo rende una scelta e non un caso. */
.nuvolai-chip-fixed {
    width: 80px;
    text-align: center;
}

/* ============================================================
   Albero categorie (.nv-tree) — veste Nuvolai per jsTree
   ============================================================
   Del pacchetto jsTree si carica SOLO il JavaScript: il suo tema "default" è chiaro, porta i propri
   grigi e due immagini (sprite 32px.png e throbber.gif) e su fondo nero sarebbe fuori posto. Qui c'è
   quel poco che serve — indentazione, linee di collegamento, riga selezionata, +/−, checkbox — scritto
   con i colori che l'app usa già. Nessun font nuovo, nessuna immagine: il +/− sono i triangoli ▸/▾ che
   il catalogo usa anche nei testi, e le cartelle sono icone FontAwesome passate da `types`.
   Il markup lo genera jsTree; l'unico gancio nostro è .nv-tree sul contenitore. */
.nv-tree ul { list-style: none; margin: 0; padding: 0; }
.nv-tree > ul { margin-left: 2px; }
/* i figli rientrano e portano la linea verticale di collegamento, sottile e discreta */
.nv-tree .jstree-children {
    margin-left: 10px;
    padding-left: 12px;
    border-left: 1px solid #2a2a2a;
}
.nv-tree .jstree-node { margin: 0; padding: 0; }

/* riga del nodo: icona apri/chiudi, (checkbox), cartella, testo */
.nv-tree .jstree-anchor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 8px;
    border-radius: 4px;
    color: #e8e8e8 !important;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
}
/* Stato del nodo con gli stessi colori degli input: non scelto = #ababab, quello di
   .form-control:disabled; scelto = il teal dell'accento, come un campo valorizzato e a fuoco.
   Nessun colore nuovo, e la differenza si vede a colpo d'occhio. */
.nv-tree .jstree-anchor { color: #ababab !important; }
.nv-tree .jstree-anchor:hover { background-color: #141414; color: #f0f7ff !important; }
.nv-tree .jstree-anchor.jstree-clicked { background-color: #141414; color: #55d5cc !important; font-weight: 500; }
.nv-tree .jstree-anchor > .jstree-themeicon { color: #ababab; background: none !important; }
.nv-tree .jstree-anchor.jstree-clicked > .jstree-themeicon { color: #55d5cc; }
/* Focus: quello degli input (alone teal), non il riquadro chiaro del browser sull'anchor. */
.nv-tree .jstree-anchor:focus,
.nv-tree .jstree-anchor:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(85, 213, 204, 0.25);
    border-radius: 4px;
}
.nv-tree a { text-decoration: none !important; }

/* apri/chiudi: solo sui nodi che hanno figli */
.nv-tree .jstree-ocl {
    width: 16px;
    flex: 0 0 16px;
    color: #7a7a7a;
    cursor: pointer;
    background: none !important;
    text-align: center;
}
.nv-tree .jstree-closed > .jstree-ocl::before { content: "\25B8"; }   /* ▸ */
.nv-tree .jstree-open   > .jstree-ocl::before { content: "\25BE"; }   /* ▾ */
.nv-tree .jstree-leaf   > .jstree-ocl { visibility: hidden; }

/* checkbox (modalità selettore): quadratino con la spunta, non l'immagine del tema */
.nv-tree .jstree-checkbox {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 1px solid var(--nv-campo-bordo);
    border-radius: 3px;
    background: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
}
.nv-tree .jstree-anchor.jstree-clicked > .jstree-checkbox {
    border-color: #55d5cc;
    color: #55d5cc;
}
.nv-tree .jstree-anchor.jstree-clicked > .jstree-checkbox::before { content: "\2713"; }  /* ✓ */

/* trascinamento: l'etichetta che segue il mouse e la riga che indica dove si rilascia.
   Vivono in fondo al <body>, fuori da .nv-tree, quindi si stilano per id come li crea jsTree. */
#jstree-dnd {
    background-color: #000;
    border: 1px solid #55d5cc;
    border-radius: 4px;
    padding: 4px 10px;
    color: #e8e8e8;
    font-size: .9rem;
}
#jstree-dnd .jstree-icon { display: none; }
#jstree-marker {
    position: absolute;
    border-top: 2px solid #55d5cc;
    width: 40px;
    margin-top: -1px;
    z-index: 10010;
}
/* nodi che non accettano il rilascio: nessun segnale verde/rosso del tema, solo opacità */
#jstree-dnd .jstree-er { opacity: .45; }

/* contenitore dell'albero nelle pagine: scorre da solo se l'elenco è lungo */
.nv-tree-box {
    max-height: 420px;
    overflow: auto;
    padding: 4px 2px;
}
/* dentro un form (scheda prodotto/servizio) l'albero sta in una riga con gli altri campi */
.nv-tree-box-sm { max-height: 220px; }
/* Dentro un passo del wizard l'editor NON ha un tetto: l'albero (o la lista) è alto quanto il suo
   contenuto e il chip "Fatto" resta sotto, sempre raggiungibile. A scorrere è la pagina, perché con
   l'editor aperto nvWizard.resize() toglie il max-height al blocco centrato.
   Prima qui c'era `max-height: 240px; overflow: auto`: con più di cinque o sei nodi l'albero si
   accorciava e il contenuto finiva sotto il chip, coprendolo (task 3N). */
.onb-editor .nv-tree { max-height: none; overflow: visible; }
/* sola lettura: i nodi non si selezionano, ma l'albero resta navigabile — il +/− (.jstree-ocl) è
   fratello dell'anchor, quindi continua a rispondere. Vale per la scheda non ancora abilitata e per
   l'utente con il modulo in sola lettura. */
.nv-tree.is-readonly .jstree-anchor { pointer-events: none; }

/* Conversazione */
.nuvolai-chat {
    max-height: 62vh;
    overflow-y: auto;
    margin-bottom: 1.25rem;
    padding: 4px;
}
.nuvolai-msg {
    display: flex;
    margin-bottom: 14px;
}
.nuvolai-msg-user {
    justify-content: flex-end;
}
.nuvolai-msg-assistant {
    justify-content: flex-start;
}
.nuvolai-bubble {
    max-width: 85%;
    padding: 10px 15px;
    border-radius: 16px;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.55;
}
.nuvolai-msg-user .nuvolai-bubble {
    background: #000000fa;
    color: #55d5cc;
    font-size: 0.9rem;
    border-bottom-right-radius: 3px;
    border: 1px solid;
}
.nuvolai-msg-assistant .nuvolai-bubble {
    background: transparent;
    color: #dbdbdb;
    font-weight: 100;
    font-size: 0.9rem;
    padding-left: 0;
    max-width: 100%;
}

/* La risposta dell'assistente col markdown reso (26/09/2026): paragrafi ed elenchi veri, quindi
   niente pre-wrap (gli a capo sono <br>); il grassetto con il peso del testo del canone. */
.nuvolai-bubble.nuvolai-md { white-space: normal; }
.nuvolai-md p { margin: 0 0 0.6em; }
.nuvolai-md ul, .nuvolai-md ol { margin: 0 0 0.6em; padding-left: 1.3em; }
.nuvolai-md li { margin: 0.15em 0; }
.nuvolai-md > :last-child { margin-bottom: 0; }
.nuvolai-md strong { font-weight: 500; color: var(--nv-text-title); }
.nuvolai-md code { font-size: 0.85em; padding: 0 0.3em; border-radius: 4px; color: var(--nv-accent); background: var(--nv-page-bg); }

/* Indicatore "sta scrivendo" */
.nuvolai-typing .nuvolai-bubble span {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 2px;
    border-radius: 50%;
    background: #b5b5b5;
    animation: nuvolaiBlink 1.2s infinite both;
}
.nuvolai-typing .nuvolai-bubble span:nth-child(2) { animation-delay: 0.2s; }
.nuvolai-typing .nuvolai-bubble span:nth-child(3) { animation-delay: 0.4s; }
@keyframes nuvolaiBlink {
    0%, 80%, 100% { opacity: 0.2; }
    40%           { opacity: 1; }
}

/* --- Icone azioni standard nelle liste (seleziona / elimina) ---
   Bianche di default; hover: elimina -> #db3131, seleziona -> #5a8bff.
   Markup: <span class="far fa-trash-alt list-action-icon is-delete" ...>
           <a ...><span class="far fa-sign-out list-action-icon is-select"></span></a> */
.list-action-icon {
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: color .15s ease;
}
.list-action-icon.is-select { font-size: 1.5em !important; } /* seleziona leggermente più grande di elimina */
.list-action-icon.is-delete:hover { color: var(--nv-danger-testo); }
.list-action-icon.is-select:hover { color: #5a8bff; }
/* Tooltip icone azione liste: elemento flottante creato via JS (nuvolai.js) e agganciato al
   <body>, per uscire dall'overflow del contenitore scroll della tabella. */
/* Elementi con tooltip flottante (data-float-tip) NON devono mostrare il tooltip CSS ::before/::after
   (es. il "+" .toolbar-button dentro una card con overflow). */
.float-tip::before, .float-tip::after { content: none !important; }
/* Look "pill footer": nero, bordo teal. È il tooltip UNICO dell'app (nuvolai.js). */
.list-tooltip {
  position: fixed;
  background: #000000;
  color: #ffffff;
  border: 1px solid #55d5cc;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 2147483647;
}
/* freccia in basso: tooltip SOPRA l'elemento (default) */
.list-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--tip-arrow, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #55d5cc;
}
/* freccia in alto: tooltip SOTTO l'elemento (auto-flip / data-tooltip-bottom) */
.list-tooltip--below::after {
  top: auto;
  bottom: 100%;
  left: var(--tip-arrow, 50%);
  transform: translateX(-50%);
  border-top-color: transparent;
  border-bottom-color: #55d5cc;
}

/* --- Badge Stato nelle liste: sfondo nero, bordo del colore dello stato (impostato inline), testo bianco --- */

/* Nella view il badge stato si adatta in larghezza al testo (es. "NON CONFORME") */

/* Badge stato cliccabile (es. "NUOVO" nella view → segna Non conforme): hint al passaggio del mouse */



/* --- Matrix filtri liste: etichetta grigia sopra, numero con barra colorata a sinistra (2 per riga, no icone) --- */
.matrixCell {
  margin-bottom: 26px;
}
.matrixLabel {
  color: #8a8a8a;
  font-size: 0.9rem;
  margin-bottom: 12px;
  font-weight: 500;
}
.matrixValue {
  border-left: 3px solid transparent; /* colore barra: var --matrix-color impostata inline per filtro */
  border-left-color: var(--matrix-color, transparent);
  padding-left: 12px;
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1;
  transition: color .15s ease;
}
/* Varianti del valore matrix quando non è un numero-conteggio corto (il 2.8rem è per i filtri):
   is-text = testo (es. nome cliente); is-money = importo €. Barra colorata invariata. */
.matrixValue.is-text  { font-size: 0.9rem; line-height: 1.3; word-break: break-word; }
.matrixValue.is-money { font-size: 1.5rem; }
/* Sintesi record demo (developer/demo/view): contatori matrix più compatti dei filtri list + leggibili. */
.demo-sintesi .matrixValue { font-size: 1.9rem; color: #e8e8e8; }
.demo-sintesi .matrixCell { margin-bottom: 14px; }
/* Nome + badge dentro lo stesso matrixValue: il badge si allinea a sinistra al testo (padding
   della barra) e la barra colorata copre anche il tag. */
/* Badge pillola con colore accent via --matrix-color inline (stati, semafori, rubriche…).
   Stesso disegno di .crm-drawer-badge ma parametrico: bordo + testo nel colore del badge.
   Base necessaria ovunque: senza, il testo eredita il colore del contesto (scuro nei drawer). */
.mv-badge { display: inline-block; padding: 2px 10px; border-radius: 12px;
  border: 1px solid var(--matrix-color, #55d5cc); color: var(--matrix-color, #55d5cc);
  font-size: 0.75rem; white-space: nowrap; }
.matrixValue .mv-badge { margin-top: 8px; }
/* ============================================================
   Pagina VIEW (dettaglio record read-only) — layout 3 colonne.
   Card scure, accento teal. Usata da crm/lead/view.php (standard).
   ============================================================ */
.view-panel {
  background: #000;
  border: 0; /* bordo disattivato (temporaneo) */
  border-radius: 6px;
  padding: 18px;
  height: calc(100vh - 170px); /* fallback: JS (view.php) ricalcola l'altezza esatta fino al footer */
  overflow-y: auto;
  overflow-x: hidden; /* niente scroll orizzontale (es. tooltip assoluto del + che sforerebbe) */
}
/* Variante a flusso: pannelli ad altezza automatica (dashboard multi-riga, es. Developer▸Demo)
   dove il .view-panel a tutta altezza spingerebbe le righe successive fuori schermo. */
.view-panel.view-panel-flow { height: auto; min-height: 0; overflow: visible; }
.view-panel-title {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Sottotitolo di sezione dentro un .view-panel (es. gruppi grafici/tabella negli analytics) */
.view-panel-subtitle {
  color: #b8b8b8;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.view-head-title {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 10px;
  word-break: break-word;
}
/* Riepilogo: coppie label/valore, disposte su due colonne */
.view-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}
.view-summary .view-row {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-bottom: 1px solid #141414;
}
.view-summary .view-row.full { grid-column: 1 / -1; } /* campo a tutta larghezza (es. Note) */
.view-summary .view-row.nb { border-bottom: 0; } /* riga senza separatore (ultime righe) */
.view-label {
  color: #8a8a8a;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.view-value { color: #e8e8e8; font-size: 0.95rem; word-break: break-word; }
.view-value.empty { color: #4a4a4a; }
/* Tabs (dark) */
.view-tabs.nav-tabs { border-bottom: 1px solid #1e1e1e; gap: 4px; padding: 0 20px 0 20px; }
/* Contenuto dei tab (DataTable) nella view */
.view-tab-content { padding: 0 8px 0 8px; }
.view-tabs.nav-tabs .nav-link {
  color: #8a8a8a;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 16px;
  font-size: 0.9rem;
}
.view-tabs.nav-tabs .nav-link:hover { color: #e8e8e8; }
.view-tabs.nav-tabs .nav-link.active {
  color: #55d5cc;
  background: transparent;
  border-bottom-color: #55d5cc;
}
/* Mappa inline (altezza contenuta: mappa + info indirizzo entrano nel pannello senza scroll) */
.lead-map-canvas {
  width: 100%;
  height: 38vh;
  min-height: 240px;
  border-radius: 8px;
  overflow: hidden;
}
/* Stato vuoto (offerte, timeline) */


/* Timeline verticale attività */
.timeline { position: relative; margin: 6px 0 0 6px; padding-left: 22px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 4px; top: 4px; bottom: 4px;
  width: 2px;
  background: #1e1e1e;
}
.timeline-item { position: relative; padding: 0 0 22px 0; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: -22px; top: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #55d5cc;
  box-shadow: 0 0 0 3px #000;
}
.timeline-date { color: #8a8a8a; font-size: 0.72rem; margin-bottom: 2px; }
.timeline-title { color: #e8e8e8; font-size: 0.92rem; font-weight: 600; }
.timeline-desc { color: #9a9a9a; font-size: 0.82rem; }

/* al passaggio del mouse (o filtro selezionato) il numero assume il colore della barra */
.matrixValue { cursor: pointer; }
.matrixValue:hover,
.matrixValue.is-active {
  color: var(--matrix-color, inherit);
}

/* ============================================================
   KANBAN — usata da crm/attivita/list.php (vista board a colonne).
   Colonna: --kanban-color impostata inline (barra superiore + accento card).
   ============================================================ */
.kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  align-items: stretch;
}
.kanban-col {
  flex: 1 1 0;
  min-width: 232px;
  display: flex;
  flex-direction: column;
  background: #000;
  border: 1px solid #333;
  border-radius: 8px;
  overflow: hidden;
}
.kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #1e1e1e;
  border-top: 3px solid var(--kanban-color, #55d5cc);
}
.kanban-col-label { color: #e8e8e8; font-weight: 600; font-size: 0.9rem; }
.kanban-col-count {
  color: #8a8a8a;
  font-weight: 600;
  font-size: 0.82rem;
  background: #141414;
  border-radius: 12px;
  padding: 1px 9px;
  min-width: 26px;
  text-align: center;
}
.kanban-col-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kanban-col-body.drag-over {
  background: #0c0c0c;
  outline: 2px dashed var(--kanban-color, #55d5cc);
  outline-offset: -6px;
}
.kanban-card {
  background: #000000;
  border: 1px solid #2a2a2a;
  border-left: 3px solid var(--kanban-color, #55d5cc);
  border-radius: 6px;
  padding: 11px 12px;
  cursor: grab;
  transition: border-color .15s ease;
}
.kanban-card:hover { border-color: #4a4a4a; border-left-color: var(--kanban-color, #55d5cc); }
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: .45; }
/* Pulsazione al drop riuscito: riusa lo "zoom footer" (scale 1.4, 0.2s) ripetuto 3 volte.
   z-index per far emergere la card sopra le vicine durante lo zoom. */
@keyframes kanbanPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.kanban-card.kanban-pulse { animation: kanbanPulse 0.2s ease 3; position: relative; z-index: 2; }
/* LO STATO DELL'AZIENDA — .nv-stato-az (NOTTE-CRM-CHIUSURE N5, 13/10/2026, rules/css-ux.md «Label e badge»): un componente solo
   per Lead / Cliente / Non qualificata, ovunque (card e pannello del CRM, liste, schede, offerte), generato da nvStatoAzienda().
   La forma è quella che era della card della pipeline (era .kanban-card-tag): piccola, maiuscola, piena, testo nero. */
.nv-stato-az {
  display: inline-block; flex: none; font-size: 0.52rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5;
  padding: 1px 6px; border-radius: 8px; color: #000; background: #bdbdbd; white-space: nowrap; vertical-align: middle;
}
.nv-stato-az.is-lead    { background: #5a8bff; }
.nv-stato-az.is-cliente { background: #f5a623; }
.nv-stato-az.is-non-qualificata { background: #bdbdbd; }
.kanban-card-title {
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.kanban-card-title > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card-row {
  color: #9a9a9a;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
}
.kanban-card-row i { width: 14px; color: #6a6a6a; flex: none; text-align: center; }
.kanban-card-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kanban-badge {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid #333;
  color: #bdbdbd;
}
.kanban-badge.is-esito   { color: #57d555; border-color: #57d555; }
.kanban-badge.is-scaduta { color: var(--nv-danger-testo); border-color: #db3131; }


/* ============================================================
   PIPELINE UNIFICATA — crm/pipeline/list.php (zona lead + trattative + chiuse).
   Colori intestazioni/striscia forniti inline (runtime) da pipelineColori().
   ============================================================ */
.pipeline-controls .btn.is-active { background: #55d5cc; color: #000; border-color: #55d5cc; }
/* Card contenitore del kanban: altezza fissa (JS) fino al footer. In verticale NON scrolla: scrollano
   i singoli .pipeline-col-body, così intestazioni, importi, conteggi e linea verticale restano fissi.
   In orizzontale scrolla se le colonne non ci stanno (overflow-x). */
.pipeline-card-wrap { position: relative; overflow-x: auto; overflow-y: hidden; }
/* ===== Gestione Utenti — matrice di profilazione ===== */
.gu-matrix-title { color:#fff; font-size:1rem; margin-bottom:10px; }
.gu-matrix { display:flex; flex-wrap:wrap; gap:14px; }
.gu-grp-block { flex:1 1 320px; padding:12px 14px; }
.gu-grp-row { display:flex; align-items:center; gap:10px; border-bottom:1px solid #333; padding-bottom:8px; margin-bottom:8px; }
.gu-grp-ico { color:#55d5cc; font-size:1.1rem; }
.gu-grp-name { color:#fff; font-weight:500; }
.gu-mod-row { display:flex; align-items:center; gap:10px; padding:1px 0; }
.gu-mod-name { color:#cfcfcf; flex:1 1 auto; font-size:.9rem; }
.gu-ro-label { display:flex; align-items:center; gap:6px; color:#9aa0a6; font-size:.8rem; margin:0; cursor:pointer; }
.gu-ro-label span { white-space:nowrap; }
/* Controlli compatti nella matrice permessi: switch/checkbox più bassi + righe fitte
   (default 1.75rem creava righe troppo distanziate). */
.gu-matrix .form-check-input { cursor:pointer; width:1.4rem; height:1.4rem; }
.gu-matrix .form-switch { min-height:auto; }
.gu-matrix .form-switch .form-check-input { width:2.5rem; }
.view-field { display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid #2a2a2a; }
.view-field .view-label { color:#9aa0a6; font-size:.8rem; }
.view-field .view-value { color:#e8e8e8; font-size:.85rem; text-align:right; }
/* Griglia colonne lead+trattative: N tracce uguali, gap 0 così il confine di zona è esatto (nLead/nCol) */
.pipeline-main { position: relative; flex: 1 1 auto; display: grid; grid-template-columns: repeat(var(--ncol, 1), minmax(200px, 1fr)); gap: 0; align-content: start; }

/* Divisore verticale zona Lead | zona {entità} (2.2): linea tratteggiata grigia sul confine
   (--lead-frac, ereditata da .pipeline-main), spostata 4px a sinistra. top/height sono calcolati in
   JS (pipelinePositionDivider): parte dall'altezza di .pipeline-col-count e arriva poco sopra il
   footer; i valori top:0/bottom:0 qui sono solo fallback. L'etichetta è centrata sulla linea con
   sfondo nero, così in quel tratto la tratteggiata appare interrotta/nera. */
.pipeline-divider {
  position: absolute; top: 0; bottom: 0; left: calc(var(--lead-frac) * 100% - 4px);
  border-left: 2px dashed #3a3a3a; pointer-events: none; z-index: 3;
}
.pipeline-divider-label {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap;
  background: #000; padding: 10px 3px;
  color: var(--nv-text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 2px;   /* era #3a3a3a, 1,85:1 */
}

/* Intestazioni a chevron (2.4): sfondo nero, colore della fase = SOLO bordo basso (segue la forma a
   freccia, triangolo di dx incluso). Il colore fase arriva runtime nella var --col-color: è lo sfondo
   del box, lasciato scoperto per 2px in basso; uno strato ::before nero copre tutto il resto con la
   stessa clip-path. NIENTE border/border-radius reali (incompatibili con clip-path). Il testo va in
   uno <span> figlio così resta sopra l'overlay (i nodi di testo nudi verrebbero coperti). */
.pipeline-col-header {
  position: relative;
  background: var(--col-color, #000);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
  padding: 8px 20px; font-size: 0.82rem; font-weight: 600; color: #EEF4FB;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  overflow: hidden; white-space: nowrap;
}
.pipeline-col-title { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.pipeline-col-header::before {
  content: ""; position: absolute; inset: 0 0 2px 0;
  background: #000; clip-path: inherit;
}
.pipeline-col-header > * { position: relative; z-index: 1; }
.pipeline-col-header.first { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); padding-left: 12px; }
.pipeline-col-header.last  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); }

/* Passo "fasi" del wizard CRM: la stessa barra a chevron del kanban (stesso markup, da
   crmPipelineChevron()), qui riordinabile col drag orizzontale e con la × per togliere una fase.
   Le colonne si dividono lo spazio disponibile — minmax(0,1fr) e non i 200px del kanban, perché la
   colonna del wizard è più stretta e i chevron devono restare tutti in riga. */
.nv-onb-pipeline {
  display: grid; grid-template-columns: repeat(var(--ncol, 1), minmax(0, 1fr));
  gap: 0; margin-top: 12px; align-items: center;
}
/* Nel wizard la barra è larga quanto la colonna della domanda, non quanto lo schermo: testo più
   compatto e punte più strette, così ci stanno i nomi lunghi. Quello che avanza va in ellipsis e si
   legge dal tooltip. */
.nv-onb-pipeline .pipeline-col-header { cursor: grab; padding: 8px 9px; min-width: 0; font-size: .72rem; gap: 5px; }
.nv-onb-pipeline .pipeline-col-header.is-dragging { cursor: grabbing; opacity: .45; }
.nv-onb-pipeline .pipeline-col-header.is-dragover { filter: brightness(1.45); }
.nv-onb-pipeline .pipeline-col-header i,
.nv-onb-pipeline .pipeline-col-header svg { color: #EEF4FB; cursor: pointer; flex: 0 0 auto; }
.nv-onb-pipeline .pipeline-col-header i:hover,
.nv-onb-pipeline .pipeline-col-header svg:hover { color: var(--nv-danger-testo) !important; }
/* Il campo "Nuova fase" sta sotto la barra, centrato come gli altri controlli del wizard. */
.nv-onb-pipeline-add { display: flex; justify-content: center; margin-top: 16px; }

.pipeline-col-importo { text-align: center; font-size: 0.8rem; font-weight: 600; color: #cfcfcf; padding: 4px 6px 8px; }
/* Corpo colonna: altezza fissa (--body-h da JS) e scroll verticale proprio → scrollano SOLO le card.
   Scrollbar sottile nuvolai come le tabelle. */
.pipeline-col-body { height: var(--body-h, 300px); overflow-y: auto; overflow-x: hidden; margin: 0 4px; border-radius: 6px; }
.pipeline-col-count { color: #EEF4FB; font-size: 0.7rem; font-weight: 700; opacity: .75; background: rgba(0,0,0,.3); border-radius: 8px; padding: 0 6px; }

.pipeline-card { position: relative; }
.pipeline-card-next, .pipeline-card-warn { font-size: 0.72rem; margin-top: 6px; display: flex; align-items: center; gap: 5px; }
.pipeline-card-next { color: #9a9a9a; }
.pipeline-card-next.is-scaduta { color: #f5a623; }
.pipeline-card-next i, .pipeline-card-warn i { width: 13px; text-align: center; flex: none; }
.pipeline-card-warn { color: var(--nv-danger-testo); }

/* Colonna compatta Chiuse (drop-zone Vinte/Perse) */
.pipeline-chiuse { flex: 0 0 150px; width: 150px; display: flex; flex-direction: column; gap: 10px; padding-top: 0; }
.pipeline-chiuse-title { color: #e8e8e8; font-weight: 600; font-size: 0.85rem; }
.pipeline-close-drop {
  border: 1px dotted #444; border-radius: 6px; padding: 12px 10px; text-align: center; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.pipeline-close-drop.drag-over { outline: 2px dashed currentColor; }
.pipeline-close-drop:hover { background: #0c0c0c; }
.pipeline-close-num { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.pipeline-close-ico { font-size: 1.25rem; line-height: 1; }
.pipeline-close-meta { display: flex; flex-direction: column; line-height: 1.05; }
.pipeline-close-per { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .5px; color: #8a8a8a; }

.pipeline-ricollocare-wrap { margin-top: 18px; max-width: 320px; }

/* ============================================================
   DRAWER CRM — pannello laterale riusabile (include/lib/nuvola/crmdrawer.php).
   ============================================================ */
/* La modal SweetAlert deve stare SOPRA il drawer/overlay CRM (10000/10001): senza questo,
   le modal aperte dal drawer (es. "Avanza step/stato") finiscono dietro e sembrano non aprirsi.
   Ridefinito anche qui oltre a swal-nuvolai.css così il fix viaggia con nuvola.css. */
.swal2-container { z-index: 10005; }
#crm-drawer-overlay {
  /* Backdrop modale: sopra la chrome di pagina (search bar fissa 9999, side-actions, chat). */
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 10000;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
#crm-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.crm-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 25%; max-width: 92vw;
  background: #000000; border-left: 1px solid #55d5cc; z-index: 10001;
  transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
  box-shadow: -8px 0 30px rgba(0,0,0,.5);
}
.crm-drawer.is-open { transform: translateX(0); }
/* × di chiusura dei pannelli a scomparsa: IDENTICA alla × delle modal (.swal2-close):
   grigio → teal con rotazione di 90° all'hover. Condivisa da drawer CRM + chat + assistente. */
.nv-close-x { background: none; border: none; padding: 0; cursor: pointer; color: #8a8a8a; font-size: 1rem;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s ease, transform .2s ease; transform-origin: center center; }
.nv-close-x:hover { color: #55d5cc; transform: rotate(90deg); }

/* Icona Nuvolai Lab (header): sharp-duotone thin, layer primario bianco + secondario grigio. */
.header-icon-lab { --fa-primary-color: #ffffff; --fa-secondary-color: #9a9a9a; }

/* Icona assistente AI (#btn-assistente): stesso duotone bianco/grigio delle icone header; teal
   quando attivo (pannello aperto o conversazione in corso), via classe .ai-active sul wrap. */
.nuvolai-ai-icon { --fa-primary-color: #ffffff; --fa-secondary-color: #9a9a9a; }
#btn-assistente.ai-active .nuvolai-ai-icon { --fa-primary-color: #55d5cc; --fa-secondary-color: #55d5cc; }

/* ═══ IL PANNELLO A COMPARSA — .nv-pannello-lato (chat, assistente) · NOTTE-STILI-UX, 08/10/2026 ═════════════════════
   Il guscio unico dei pannelli laterali, sul modello del drawer CRM: prima chat e assistente erano due <div> con lo stile
   scritto nel markup (fondo #0a0a0a anche nel chiaro, larghezza 25% — 98 px a 390 —, height:100%), e il campo di scrittura
   finiva sotto la barra di Safari o la tastiera. Ora:
     · largo clamp(360px, 25vw, 480px); sotto i 768 px tutto lo schermo;
     · alto quanto si VEDE: 100dvh, e con la tastiera aperta l'altezza di visualViewport (--nv-vv-h, da nv-kit.js);
     · fondo e testo dai token del tema (--nv-drawer-bg, --nv-text-value): il chiaro li ridefinisce, il pannello no;
     · in fondo la safe area del telefono (env(safe-area-inset-bottom)), così niente finisce sotto la barra di casa.
   Si apre con .is-open (index.php), come .crm-drawer. */
.nv-pannello-lato {
  position: fixed; top: var(--nv-vv-top, 0px); right: 0; z-index: 10001;
  width: clamp(360px, 25vw, 480px); max-width: 100vw;
  height: 100vh; height: 100dvh; height: var(--nv-vv-h, 100dvh);
  background: var(--nv-drawer-bg); color: var(--nv-text-value);
  border-left: 1px solid var(--nv-accent); box-shadow: -8px 0 30px rgba(0,0,0,.5);
  transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility .25s;
  display: flex; flex-direction: column;
}
.nv-pannello-lato.is-open { transform: translateX(0); visibility: visible; }
#btn-chat.is-attivo i { color: var(--nv-accent); --fa-primary-color: var(--nv-accent); --fa-secondary-color: var(--nv-accent); }   /* chat aperta */
.nv-pannello-lato-corpo {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  padding: 20px 20px calc(14px + env(safe-area-inset-bottom, 0px));
}
.nv-pannello-lato-testa {
  flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center;
  color: var(--nv-accent); font-size: 1.1rem; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--nv-grid-border);
}
@media (max-width: 767.98px) {
  .nv-pannello-lato { width: 100vw; border-left: 0; }
  .nv-pannello-lato-corpo { padding: 14px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ═══ LA CHAT dentro il pannello ═══════════════════════════════════════════════════════════════════════════════════════
   Due zone: le PERSONE (ricerca + chip, alte al massimo un terzo del pannello, scorrono da sole) e la CONVERSAZIONE, che
   prende tutto il resto: testa (indietro, avatar, nome, presenza), messaggi (l'unico pezzo che scorre) e il campo di
   scrittura ANCORATO IN FONDO (flex: 0 0 auto: non si comprime e non esce dal pannello). min-height:0 su ogni contenitore
   flex: senza, i messaggi non scorrono e spingono fuori il campo. */
.nv-chat-persone { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
#chat-conv-list.chat-conv-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  max-height: 30vh; max-height: calc(var(--nv-vv-h, 100dvh) * .3); overflow-y: auto; min-height: 0; padding-right: 2px;
}
@media (max-width: 420px) { #chat-conv-list.chat-conv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nv-chat-vuoto { grid-column: 1 / -1; text-align: center; padding: 12px 0; color: var(--nv-text-muted); font-size: .85rem; }
/* Il chip di una persona: il componente chip della piattaforma (fondo del campo, bordo della griglia, hover teal), con il
   filo sinistro nel colore dell'utente (--chat-col): è il segno che lo ritrova nelle sue bolle. */
.chat-name-btn {
  display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%;
  background: var(--nv-campo-fondo); color: var(--nv-text-value);
  border: 1px solid var(--nv-campo-bordo); border-left: 3px solid var(--chat-col, var(--nv-accent));
  border-radius: 8px; padding: 7px 9px; font-size: .82rem; line-height: 1.1; text-align: left;
  transition: background .15s ease, border-color .15s ease;
}
.chat-name-btn:hover { border-color: var(--nv-accent); border-left-color: var(--chat-col, var(--nv-accent)); }
.chat-name-btn.is-active { border-color: var(--nv-accent); border-left-color: var(--chat-col, var(--nv-accent)); box-shadow: inset 0 0 0 1px var(--nv-accent); }
.chat-name-btn .chat-name-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-name-btn .chat-name-dot { flex: 0 0 auto; display: inline-flex; }
.chat-name-btn .chat-name-badge {
  flex: 0 0 auto; background: var(--nv-danger); color: #fff; font-size: .62rem; font-weight: 700;
  border-radius: 999px; padding: 1px 6px; line-height: 1.4;
}
/* La presenza: pallino E parola. Online = successo; offline = un anello del colore muted (leggibile su ogni fondo, a
   differenza del vecchio #6b6b6b pieno su nero, 3,4:1). */
.nv-presenza { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; vertical-align: middle; }
.nv-presenza.is-online { background: var(--nv-success); }
.nv-presenza.is-offline { background: transparent; border: 2px solid var(--nv-text-muted); }
/* Avatar: .header-avatar (tondo, bordo nel colore del testo del tema), in misura media dentro la chat; le iniziali sul
   fondo delle intestazioni. */
.header-avatar.nv-avatar-md { width: 32px; height: 32px; }
.nv-avatar-iniziali { display: inline-flex; align-items: center; justify-content: center; background: var(--nv-grid-header);
  color: var(--nv-text-title); font-size: .72rem; font-weight: 600; letter-spacing: .02em; }
.nv-chat-conv { flex: 1 1 auto; min-height: 0; flex-direction: column; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--nv-grid-border); }
.nv-chat-conv-testa { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--nv-grid-border); }
.nv-chat-conv-testa .toolbar-icon { width: 32px; height: 32px; font-size: 1.05em; flex: 0 0 auto; }
.nv-chat-conv-chi { display: flex; flex-direction: column; min-width: 0; }
#chat-conv-name { color: var(--nv-text-title); font-weight: 500; }
#chat-conv-presence { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--nv-text-label); }
.nv-chat-messaggi { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 2px 2px 6px; }
.nv-chat-giorno { text-align: center; font-size: .75rem; color: var(--nv-text-muted); margin: 8px 0 4px; }
.nv-chat-bolla { max-width: 85%; border-radius: 12px; padding: 8px 12px; font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.nv-chat-sua { background: var(--nv-campo-fondo); color: var(--nv-text-value); border: 1px solid var(--nv-grid-border); border-left: 3px solid var(--chat-col, var(--nv-grid-border)); }
.nv-chat-eliminato { font-style: italic; color: var(--nv-text-muted); font-size: .85rem; }
.nv-chat-meta { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 4px; font-size: .72rem; color: var(--nv-text-muted); }
.nv-chat-meta .chat-ck { color: var(--nv-text-muted); }
.nv-chat-meta .chat-ck.is-letto { color: var(--nv-accent); }
.nv-chat-meta .list-action-icon { cursor: pointer; }
.nv-chat-img { display: block; max-width: 100%; border-radius: 8px; margin-bottom: 4px; cursor: zoom-in; }
.nv-chat-file { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.nv-chat-allegato { flex: 0 0 auto; align-items: center; gap: 8px; margin-bottom: 8px; padding: 4px 8px; border: 1px solid var(--nv-grid-border); border-radius: 8px; font-size: .82rem; }
.nv-chat-lightbox { position: fixed; inset: 0; z-index: 10050; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.9); cursor: zoom-out; }
.nv-chat-lightbox img { max-height: 92vh; max-width: 92vw; }
/* IL CAMPO DI SCRITTURA, ancorato in fondo: allegato, testo (cresce fino a 120 px) e invio sulla stessa linea mediana. */
.nv-chat-scrivi { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--nv-grid-border); }
.nv-chat-scrivi .toolbar-icon { width: 36px; height: 36px; font-size: 1.15em; flex: 0 0 auto; }
.nv-chat-scrivi #chat-input { flex: 1 1 auto; min-height: 38px; max-height: 120px; resize: none; }
/* ricerca e messaggio: i campi della piattaforma; qui solo il placeholder, che fuori da .card-body non ha regola sua */
#chat-input::placeholder, #chat-filter::placeholder { color: var(--nv-text-muted); opacity: 1; }
.crm-drawer-body { padding: 22px 22px 40px; }
.crm-drawer-header { margin-bottom: 20px; }
/* Titolo drawer: stesso trattamento dell'header "Chiedi a Nuvolai" (flex, × a destra, riga con bordo). */
.crm-drawer-title { color: #55d5cc; font-size: 1.1rem; margin-bottom: 20px; border-bottom: 1px solid #1a1a1a; padding-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.crm-drawer-name { color: #fff; font-size: 1.15rem; font-weight: 600; margin-top: 0; display: flex; align-items: center; gap: 8px; }
/* (CRM-RITOCCHI T13, 13/10/2026) «Apri la scheda» è l'icona teal subito dopo ragione sociale e nome, prima del badge (era una riga di
   testo grigia); nella riga liberata i tag del lead, coi chip del canone */
.crm-drawer-apri { text-decoration: none; line-height: 1; display: inline-flex; align-items: center; }
.crm-drawer-apri i { color: var(--nv-accent); font-size: 1.3em; }
.crm-drawer-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .5rem; }
/* (CRM-RITOCCHI T20) le righe della testata — ragione sociale + icona + badge, importo · probabilità · step, «Assegnata a», i tag —
   stanno alla stessa distanza, la spaziatura standard fra righe di testo (.5rem, lo spacer 2 di Bootstrap, come mb-2) */
.crm-drawer-rif { min-height: 1.5rem; }
.crm-drawer-subwrap { margin-top: 6px; }
.crm-drawer-rif { color: #cfcfcf; font-size: 0.9rem; }
.crm-drawer-meta { color: #9a9a9a; font-size: 0.85rem; margin-top: .5rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crm-drawer-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; border: 1px solid #55d5cc; color: #55d5cc; font-size: 0.75rem; }
.nv-step { display: inline-block; padding: 2px 10px; border-radius: 12px; background: var(--step, var(--nv-accent)); color: #0a0a0a; font-size: 0.75rem; font-weight: 600; white-space: nowrap; vertical-align: middle; }   /* N5: lo step, uno per tutta l'app (nvStep / crmStepBadge) */
.crm-drawer-subwrap > .nv-step, .crm-drawer-subwrap .tag-chip { margin-right: 10px; }
.crm-drawer-step-adv { cursor: pointer; }
.crm-step-adv-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
/* Freccia: la kit FA sostituisce l'<i> con <svg>, quindi si colora l'svg (non solo l'<i>).
   Duotone: entrambi i layer teal (il secondario di default è quasi trasparente). */
.crm-step-adv-row i, .crm-step-adv-row svg {
  color: #fff; font-size: 1.1rem;
  --fa-primary-color: #fff; --fa-secondary-color: #fff; --fa-secondary-opacity: 0.45;
}

.crm-drawer-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; margin-top: 28px; }
/* Bottoni rapidi = stesso look della massbar (btn btn-sm btn-outline-primary, testo/bordo teal,
   hover pieno teal). .crm-drawer-qa resta solo come hook per il JS. */
.crm-drawer-quick .btn { --bs-btn-color:#fff; --bs-btn-border-color:#55d5cc; --bs-btn-hover-bg:#55d5cc; --bs-btn-hover-border-color:#55d5cc; --bs-btn-hover-color:#000; --bs-btn-active-bg:#55d5cc; --bs-btn-active-border-color:#55d5cc; --bs-btn-active-color:#000; --bs-btn-focus-shadow-rgb:85,213,204; }
.crm-drawer-quick .btn i { color: #fff; margin-right: 4px; }
.crm-drawer-quick .btn:hover i, .crm-drawer-quick .btn:active i { color: #000; }
/* Bottoni rapidi icona-only: nessun testo, icona molto grande, bottone che la abbraccia senza extra padding */
/* (CRM-RITOCCHI T2, 13/10/2026) 40×38, l'icona al centro, mai schiacciati dal flex (prima 60px in 3:2). Con 8 tipologie (T3) vanno a
   capo allineati a sinistra, sempre alla stessa distanza (gap del contenitore). */
.crm-drawer-quick .crm-drawer-qa { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 38px; padding: 0; font-size: 1.1em; }
/* Niente width/height sull'<i>: con FA7 webfont (display:inline-block) un box 2em spingerebbe
   il glifo sul bordo superiore del bottone; il flex del bottone centra già l'icona. */
.crm-drawer-quick .crm-drawer-qa i { margin-right: 0; }
.crm-drawer-qaform { background: #000000; border: 1px solid #333; border-radius: 6px; padding: 12px; margin-bottom: 14px; }
.crm-drawer-qaform-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.crm-drawer-qaform-row input { flex: 1 1 140px; }
/* (NOTTE-CRM-REVISIONE, task 12) i campi del mini-form per tipo: etichetta piccola sopra il campo, due per riga dove serve */
.crm-drawer-qaform-row > .crm-drawer-qaform-campo { flex: 1 1 140px; min-width: 0; }
.crm-drawer-qaform-tit { font-weight: 600; }
.crm-drawer-qaform .select2-container { width: 100% !important; }
/* Campi del mini-form: dark su fondo nero + placeholder leggibile.
   background-COLOR (longhand), NON lo shorthand: lo shorthand resettava repeat/position/size
   e al focus l'iconcina calendario di .nv-date-input:focus veniva tassellata su tutto l'input. */
.crm-drawer-qaform .form-control { background-color: var(--nv-campo-fondo); border-color: var(--nv-campo-bordo); color: var(--nv-campo-testo); }
.crm-drawer-qaform .form-control:focus { border-color: #55d5cc; box-shadow: none; }
.crm-drawer-qaform .form-control::placeholder { color: #8a8a8a; opacity: 1; }
/* Bottoni Annulla e Salva: i due bottoni del canone (btn-outline-primary, btn-primary pieno) senza ritocchi, a destra, staccati dai
   campi sopra (CRM-RITOCCHI T5, 13/10/2026: prima un override li faceva tutti e due a contorno) */
.crm-drawer-qaform-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

.crm-drawer-section-title { color: #55d5cc; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 1px; margin: 18px 0 8px; border-bottom: 1px dotted #55d5cc; }
.crm-drawer-next { display: flex; gap: 10px; align-items: flex-start; background: #000000; border: 0px solid #333; border-radius: 6px; padding: 12px 0px 12px 0px; }
.crm-drawer-next.is-scaduta { border-color: #db3131; }
.crm-drawer-next.is-oggi { border-color: #f5a623; }
.crm-drawer-next-check { margin: 0; min-height: auto; padding-left: 0; display: flex; align-items: center; }
.crm-drawer-next-check .form-check-input { float: none; margin: -1px 0 0 0; cursor: pointer; background-color: #1a1a1a; border-color: #444; height: 22px; }
.crm-drawer-next-check .form-check-input:checked { background-color: #55d5cc; border-color: #55d5cc; }
.crm-drawer-next-check .form-check-input:focus { border-color: #55d5cc; box-shadow: 0 0 0 .2rem rgba(85,213,204,.25); }
.crm-drawer-next-body { flex: 1; }
.crm-drawer-next-tit { color: #e8e8e8; font-size: 0.9rem; }
/* Icona attività della "Prossima attività": grigio e leggermente distanziata dal titolo (FA=svg). */
.crm-drawer-next-tit i, .crm-drawer-next-tit svg { color: #6c6c6c; margin-right: 6px; }
.crm-drawer-next-meta { color: #9a9a9a; font-size: 0.78rem; margin-top: 3px; }
.crm-drawer-next.is-scaduta .crm-drawer-next-meta { color: #ff5e5e; }
.crm-drawer-next-warn { color: #ff7c7c; font-size: 0.85rem; background: #0a0a0a; border: 0px dashed #ff7c7c; border-radius: 6px; padding: 12px 0px 12px 0px; }


.crm-drawer-timeline { position: relative; }
/* color di default leggibile: il drawer PED (marketing) mette il testo direttamente nell'item
   (brief/CTA/contenuto), senza .crm-drawer-tl-txt — senza questo eredita lo scuro del body. */
.crm-drawer-tl-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #1a1a1a; color: #cfcfcf; }
.crm-drawer-tl-item i { width: 22px; height: 22px; border-radius: 50%; background: #141414; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; flex: none; color: #8a8a8a; }
/* FA (kit SVG) rende gli <i> come <svg>: la regola colore deve colpire anche l'svg, altrimenti
   l'icona eredita un grigio più scuro. Voci-attività (concluse/note) #676767; cambio step/stato blu. */
.crm-drawer-tl-item.is-done i, .crm-drawer-tl-item.is-done svg { color: #676767; }
.crm-drawer-tl-item.is-note i, .crm-drawer-tl-item.is-note svg { color: #676767; }
.crm-drawer-tl-item.is-sys i,  .crm-drawer-tl-item.is-sys svg  { color: #5a8bff; }
.crm-drawer-tl-txt { color: #cfcfcf; font-size: 0.85rem; }
.crm-drawer-tl-data { color: #6a6a6a; font-size: 0.72rem; margin-top: 2px; }
.crm-drawer-footer { margin-top: 20px; padding-top: 14px; border-top: 1px solid #333; }

/* Contenuto faccette (select/controlli) nel matrix condiviso — NON tocca la geometria del contenitore */
.nv-lista-faccette-inner .form-control { width: 100%; }
.nv-lista-faccette-inner .pl-filtro-check { display: flex; align-items: center; gap: 6px; color: #cfcfcf; font-size: 0.82rem; min-height: 31px; }
.nv-lista-faccette-inner .pl-filtro-count { text-align: center; color: #55d5cc; font-size: 0.85rem; margin-top: 4px; }
/* Label Tipo (Lead/Trattative) a larghezza uniforme: 2 colori fissi, SOLO bordo, fondo nero, testo bianco */

/* Switch selezione riga (prima colonna) in tema nuvolai */
.card-body-table .form-switch { padding-left: 2.2em; min-height: auto; }
.card-body-table .form-switch .form-check-input { cursor: pointer; margin-left: -2.2em; height: 1.55rem; }
.card-body-table .form-check-input:checked { background-color: #55d5cc; border-color: #55d5cc; }
.card-body-table .form-check-input:focus { border-color: #55d5cc; box-shadow: 0 0 0 0.15rem rgba(85,213,204,.25); }
/* Barra azioni massive pipeline: overlay FISSO e TRASCINABILE (nessun impatto sulla geometria lista) */
.pipeline-massbar { position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%); z-index: 1090; background: #0c0c0c; border: 1px solid #55d5cc; border-radius: 8px; padding: 8px 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: #cfcfcf; box-shadow: 0 6px 24px rgba(0,0,0,.5); user-select: none; }
.pl-massbar-grip { cursor: move; color: #8a8a8a; padding: 0 6px 0 2px; }
.pl-massbar-grip:hover { color: #55d5cc; }
/* Bottoni massbar in tema nuvolai (teal): outline teal, hover pieno teal su testo nero */
.pipeline-massbar .btn { --bs-btn-color:#fff; --bs-btn-border-color:#55d5cc; --bs-btn-hover-bg:#55d5cc; --bs-btn-hover-border-color:#55d5cc; --bs-btn-hover-color:#000; --bs-btn-active-bg:#55d5cc; --bs-btn-active-border-color:#55d5cc; --bs-btn-active-color:#000; --bs-btn-focus-shadow-rgb:85,213,204; }
.pipeline-massbar .btn i { color: #fff; }
.pipeline-massbar .btn:hover i, .pipeline-massbar .btn:active i { color: #000; }
/* spazio leggermente maggiore tra icona e testo */
.pipeline-massbar .btn i, .pipeline-massbar .btn svg { margin-right: 4px; }
/* Filtri custom in SweetAlert (standard nuvolai): 2 colonne, label grigie, switch teal */
.pl-filtri-swal .pl-f-lbl { color: #8a8a8a; font-size: 0.78rem; display: block; margin-bottom: 3px; }
.pl-filtri-swal .form-control { width: 100%; }
.pl-filtri-swal .form-check-input:checked { background-color: #55d5cc; border-color: #55d5cc; }
.pl-filtri-swal .form-check-input:focus { border-color: #55d5cc; box-shadow: 0 0 0 0.15rem rgba(85,213,204,.25); }
.pl-filtri-swal .form-check-label { color: #e8e8e8; font-size: 0.85rem; }
/* switch "Senza attività" allineato a sinistra come i campi (annulla il padding/margin negativo di Bootstrap) */
.pl-filtri-swal .form-switch { display: flex; align-items: center; gap: 8px; padding-left: 0; min-height: 31px; }
.pl-filtri-swal .form-switch .form-check-input { margin-left: 0; margin-top: 0; float: none; }

/* Le mie attività (crm/attivita/list.php) */
.mieatt-controls .btn.is-active { background: #55d5cc; color: #000; border-color: #55d5cc; }
.mieatt-group-title { color: #8a8a8a; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 1px; margin: 14px 0 6px; }
.mieatt-group-title.is-scaduta { color: var(--nv-danger-testo); }
.mieatt-group-title.is-oggi { color: #f5a623; }
.mieatt-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #333; border-radius: 6px; margin-bottom: 6px; background: #0c0c0c; cursor: pointer; transition: border-color .15s ease; }
.mieatt-row:hover { border-color: #55d5cc; }
.mieatt-check-wrap { flex: none; margin: 0; }
.mieatt-check { width: 18px; height: 18px; cursor: pointer; }
.mieatt-ico { width: 22px; text-align: center; color: #8a8a8a; flex: none; }
.mieatt-titolo { flex: 1; color: #e8e8e8; min-width: 0; }
.mieatt-ent { flex: 0 0 220px; color: #cfcfcf; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mieatt-scad { flex: 0 0 150px; text-align: right; color: #9a9a9a; font-size: 0.85rem; }
.mieatt-scad.is-scaduta { color: var(--nv-danger-testo); }
.mieatt-scad.is-oggi { color: #f5a623; }

/* Calendario — banner ICS + toggle vista */
.cal-ics-hint { background: #0c0c0c; border: 1px solid #333; border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; color: #9a9a9a; font-size: 0.85rem; }
.cal-ics-hint i { color: #55d5cc; margin-right: 5px; }
.cal-ics-hint a { color: #55d5cc; }
.cal-toggle { display: inline-flex; align-items: center; gap: 5px; color: #cfcfcf; font-size: 0.85rem; margin: 0 6px; }

/* Forecast (crm/forecast) */





/* ============================================================
   CALENDARIO — usata da crm/attivita/list.php (vista mese/settimana/giorno).
   ============================================================ */
.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.cal-nav, .cal-views { display: flex; align-items: center; gap: 8px; }
.cal-title { color: #fff; font-weight: 600; font-size: 1.05rem; margin-left: 10px; }
.cal-body { overflow-y: auto; border: 1px solid #333; border-radius: 8px; }
.cal-grid-month { display: flex; flex-direction: column; }
.cal-weekrow { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-weekhead .cal-weekday {
  color: #8a8a8a;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #1e1e1e;
}
.cal-cell {
  min-height: 96px;
  border-right: 1px solid #141414;
  border-bottom: 1px solid #141414;
  padding: 6px;
  overflow: hidden;
}
.cal-cell.other-month { background: #000000; }
.cal-cell.other-month .cal-daynum { color: var(--nv-text-muted); }   /* il mese accanto (era #3a3a3a, 1,85:1) */
.cal-cell.today { background: #0c0c0c; }
.cal-cell.today .cal-daynum { color: #55d5cc; font-weight: 700; }
.cal-daynum { color: #bdbdbd; font-size: 0.8rem; margin-bottom: 4px; }
.cal-cell-events { display: flex; flex-direction: column; gap: 3px; }
.cal-event {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #0c0c0c;
  border-left: 3px solid var(--kanban-color, #55d5cc);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  overflow: hidden;
}
.cal-event:hover { background: #141414; }
.cal-ev-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kanban-color, #55d5cc); flex: none; }
.cal-ev-dot.is-scaduta { background: #db3131; }
.cal-ev-txt { color: #cfcfcf; font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-grid-week { display: grid; grid-template-columns: repeat(7, 1fr); min-height: 100%; }
.cal-daycol { border-right: 1px solid #141414; display: flex; flex-direction: column; }
.cal-daycol.today .cal-daycol-head { color: #55d5cc; }
.cal-daycol-head {
  color: #bdbdbd;
  font-size: 0.8rem;
  text-align: center;
  padding: 8px;
  border-bottom: 1px solid #1e1e1e;
  position: sticky;
  top: 0;
  background: #000;
}
.cal-daycol-body { padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.cal-day-body { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.cal-empty { color: #3a3a3a; font-size: 0.8rem; text-align: center; padding: 10px; }

/* --- Calendario CRM: griglia a ORE, condivisa dalle viste Giorno e Settimana (TASK 1, blocco 3).
   Una sola struttura per due viste: cambia solo quante colonne ha (.cal-cols-1 / .cal-cols-7), così
   la fascia oraria, l'allineamento delle righe e i bersagli del drag si scrivono una volta sola. --- */
.cal-grid-time { display: flex; flex-direction: column; min-height: 100%; }
.cal-cols-1 { --cal-cols: 1; }
.cal-cols-7 { --cal-cols: 7; }
.cal-time-head,
.cal-allday,
.cal-time-body { display: grid; grid-template-columns: 56px repeat(var(--cal-cols, 7), 1fr); }
.cal-time-head { position: sticky; top: 0; z-index: 2; background: #0c0c0c; }
.cal-time-gutter-head { border-bottom: 1px solid #333; }
.cal-time-colhead {
  height: 36px; display: flex; align-items: center; justify-content: center;
  padding: 0 6px; color: #9a9a9a; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid #333; border-right: 1px solid #141414;
}
.cal-time-colhead.today { color: #55d5cc; font-weight: 700; }
/* La fascia senza orario resta appiccicata SOTTO la testata: e' dove stanno le scadenze delle
   trattative, e se scorre via con la griglia sparisce appena si guarda il pomeriggio. I 36px sono
   l'altezza fissa della testata qui sopra — le due misure vanno cambiate insieme. */
.cal-allday { position: sticky; top: 36px; z-index: 1; border-bottom: 1px solid #333; background: #000000; }
.cal-allday-label { color: var(--nv-text-muted); font-size: 0.68rem; padding: 7px 6px 0 0; text-align: right; }
.cal-allday-cell {
  padding: 5px 4px; border-right: 1px solid #141414; min-height: 32px; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.cal-hour-label { height: 44px; color: var(--nv-text-muted); font-size: 0.7rem; text-align: right; padding: 2px 6px 0 0; border-top: 1px solid #141414; }
/* `min-width: 0` non e' un dettaglio: senza, un elemento di griglia si allarga fino al suo
   contenuto (min-width:auto) e il titolo lungo di un appuntamento esce dalla sua colonna e si
   stende sopra i giorni successivi. */
.cal-time-col { border-right: 1px solid #141414; min-width: 0; }
.cal-slot { height: 44px; min-width: 0; border-top: 1px solid #141414; padding: 2px 4px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-slot .cal-event, .cal-allday-cell .cal-event { min-width: 0; max-width: 100%; }
.cal-slot .cal-ev-txt, .cal-allday-cell .cal-ev-txt { min-width: 0; }
.cal-slot.today { background: #0c0c0c; }
.cal-slot.is-drop { background: #141414; box-shadow: inset 0 0 0 1px #55d5cc; }
.cal-cell.is-drop, .cal-allday-cell.is-drop { box-shadow: inset 0 0 0 1px #55d5cc; }
.cal-loading { color: var(--nv-stato-colore); font-size: var(--nv-stato-size); font-weight: var(--nv-stato-peso); text-align: center; padding: 26px 10px; }

/* Telefono. La settimana NON cambia numero di colonne: la griglia resta di sette e si scorre di
   lato. Ridurre le colonne in CSS lasciando che il JS ne disegni sette significa farle andare a
   capo dentro la griglia — le testate finiscono su tre righe e non stanno più sopra il giorno che
   nominano. Meglio una barra di scorrimento che un allineamento finto. */
@media (max-width: 767.98px) {
  .cal-toolbar { flex-wrap: wrap; gap: 8px; }
  .cal-nav, .cal-views { flex-wrap: wrap; }
  .cal-title { margin-left: 0; font-size: 0.95rem; }
  .cal-body { overflow-x: auto; }
  .cal-cols-7 { min-width: 720px; }
  .cal-grid-month { min-width: 640px; }
  .cal-time-colhead { font-size: 0.68rem; }
  .cal-cell { min-height: 68px; }
}

/* --- Automazioni CRM: la riga della lista regole e il log delle esecuzioni (TASK 1, blocco 3) --- */
.crm-auto-nome { color: #e8e8e8; font-size: 0.92rem; }
.crm-auto-sub { color: #8a8a8a; font-size: 0.76rem; margin-top: 2px; }
.crm-auto-flow { display: inline-flex; align-items: center; gap: 7px; color: #cfcfcf; font-size: 0.82rem; }
.crm-auto-flow i { color: #55d5cc; font-size: 0.72rem; }
.crm-auto-mono { font-family: monospace; color: #8a8a8a; font-size: 0.8rem; }

.crm-auto-azioni { display: flex; align-items: center; justify-content: center; gap: 16px; }

/* Datepicker nativo (date / datetime-local): indicatore a dx bianco sul tema scuro
   (di default è nero, quindi invisibile). invert(1) su glifo nero => bianco. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
  opacity: 1;
}

/* ===========================================================================================
   Impostazioni CRM — layout master-detail (moduli/impostazioni/crm)
   Palette congelata: fondo #000, bordi #444, accento teal #55d5cc, testo secondario #ababab.
   =========================================================================================== */
/* Menu orizzontale in alto: box compatti in stile index (.card-custom) ma più piccoli */
.crm-nav-boxes { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.crm-nav-box {
  position: relative;
  height: 64px;
  flex: 1 1 0; min-width: 120px;
  background-color: #000; border: 1px solid #444; border-radius: 6px;
  padding: 14px 16px; cursor: pointer; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  transition: border-color .15s ease, color .15s ease;
}
.crm-nav-box-title { color: #fff; font-size: .95rem; font-weight: 500; }
/* Sottotitolo del riquadro: dice COSA si configura li' dentro. I riquadri avevano il solo titolo, e
   dove due su tre ripetono la stessa formula cambiando una parola («Step delle commesse esterne» /
   «... interne») il titolo da solo non basta a scegliere (bug D-14). E' facoltativo: il riquadro che
   non ce l'ha resta identico a prima, alto 64px — l'altezza diventa automatica solo con .has-sub,
   cosi' nessuna delle pagine che gia' usano il componente cambia aspetto. */
.crm-nav-box.has-sub { height: auto; min-height: 64px; gap: 4px; }
.crm-nav-box-sub { color: #8a8a8a; font-size: .76rem; font-weight: 400; line-height: 1.25; }
/* Matita "rinomina" (solo box Opportunità): centrata verticalmente a destra, hover teal */
.crm-nav-edit { position: absolute; top: 50%; right: 9px; transform: translateY(-50%); color: #7a7a7a; cursor: pointer; font-size: .78rem; transition: color .15s ease; }
.crm-nav-edit:hover { color: #55d5cc; }
/* Select (select2 nuvolai) che rimpiazza la scritta durante la rinomina: centrata nel box */
.crm-nav-box .select2-container { margin: 0 auto; }
.crm-nav-box:hover { border-color: #55d5cc; text-decoration: none; }
.crm-nav-box.is-active { border-color: #55d5cc; }
.crm-nav-box.is-disabled { cursor: not-allowed; opacity: .45; }
.crm-nav-box.is-disabled:hover { border-color: #444; }

/* Dettaglio: area che finisce sopra il footer (altezza via JS), scroll interno + ombra
   (la canonica .nv-fade-box), stesso meccanismo dei box Centri Costo (.centro-box). */
.crm-detail { position: relative; display: flex; flex-direction: column; margin-bottom: 0; }
.crm-settings-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: .5rem; padding-bottom: 24px; }
.crm-panel { display: none; }
.crm-panel.is-active { display: block; }
/* Placeholder leggibili sul tema scuro (input/textarea della pagina Impostazioni CRM) */
.crm-settings-content .form-control::placeholder { color: #8a8a8a; opacity: 1; }
/* Riga di blocchi affiancati (col-md-6): stessa altezza, la spaziatura verticale la dà la riga */
.crm-row { margin-bottom: 22px; }
.crm-row .crm-block { height: 100%; margin-bottom: 0; }
/* Switch "Qualifica lead": senza label ("Attiva") e largo come il select (.crm-inline = 340px) */
.crm-switch-inline label { display: none; }
.crm-switch-inline .form-check-input { max-width: 340px; }

/* Blocco impostazione dentro un pannello */
.crm-block { border: 1px solid #444; border-radius: 6px; padding: 18px 20px; margin-bottom: 22px; background-color: #000; }
.crm-block-title { color: #fff; font-size: 1.05em; font-weight: 500; margin-bottom: 4px; }
.crm-block-desc { color: #ababab; font-size: .85em; margin-bottom: 14px; }
.crm-inline { max-width: 340px; }
.crm-save-hint { font-size: .8em; margin-left: 8px; }

/* Chip generici (tag / motivi / origini): riusano .tag-chip (bordo colorato, fondo nero) */


.crm-add-inline { display: flex; align-items: flex-end; gap: 8px; max-width: 340px; }
.crm-add-inline .flex-grow-1 { flex: 1 1 auto; }

/* Impostazioni CRM ▸ Attività: griglia di pulsanti-tipologia (solo icona duotone, tooltip, max 6) */
.crm-att-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.crm-att-tipo {
  width: 62px; height: 62px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #4a4a4a; border-radius: 8px; background-color: #000;
  cursor: pointer; padding: 0; font-size: 1.5rem; line-height: 1;
  transition: transform .18s ease, border-color .18s ease;
  /* Stato da selezionare (default): duotone primario #ababab, secondario #616161 */
  --fa-primary-color: #ababab; --fa-secondary-color: #616161; --fa-secondary-opacity: .9;
}
.crm-att-tipo i, .crm-att-tipo svg { color: #ababab; }              /* fallback + brand mono-layer */
.crm-att-tipo:hover { transform: scale(1.12); border-color: #6a6a6a; }
.crm-att-tipo.is-selected {
  border-color: #55d5cc;
  /* Selezionato: primario #7d7d7d, secondario bianco */
  --fa-primary-color: #7a7a7a; --fa-secondary-color: #ffffff; --fa-secondary-opacity: .9;
}
.crm-att-tipo.is-selected i, .crm-att-tipo.is-selected svg { color: #ffffff; }
.crm-att-tipo.is-shake { animation: crmAttShake .45s cubic-bezier(.36,.07,.19,.97) both; border-color: #db3131; }
@keyframes crmAttShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.crm-att-counter { color: #ababab; font-size: .85em; transition: color .2s ease; }
.crm-att-counter.is-limit { color: var(--nv-danger-testo); font-weight: 500; }

/* Righe step/stato opportunità */
.crm-stage-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid #444; border-radius: 6px;
  background-color: #0c0c0c; margin-bottom: 8px;
}
.crm-stage-row.is-dragging { opacity: .4; }
.crm-stage-row.is-dragover { border-color: #55d5cc; }
/* Colore di base delle icone di riga (maniglia/asterisco/×): visibili anche se una classe custom
   venisse persa; le regole specifiche sotto (is-on teal, hover rosso) restano prioritarie. */
.crm-stage-row i, .crm-stage-row svg { color: #7a7a7a; }
.crm-stage-handle { cursor: grab; color: #7a7a7a; flex: 0 0 auto; }
.crm-stage-handle:active { cursor: grabbing; }
.crm-stage-lock { color: #7a7a7a; flex: 0 0 auto; }
.crm-stage-nome { flex: 1 1 auto; min-width: 0; }
.crm-stage-prob { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; color: #ababab; font-size: .9em; }
.crm-stage-prob input { width: 64px; text-align: right; }




.crm-stage-del { color: #7a7a7a; flex: 0 0 auto; cursor: pointer; }
.crm-stage-del:hover { color: var(--nv-danger-testo) !important; }
.crm-stage-spacer { flex: 0 0 16px; }
/* (NOTTE-CRM-REVISIONE, task 8) tutti i campi del nome larghi uguali: le icone ai lati (maniglia o lucchetto, × o spazio) e il
   badge della categoria (aperta, vinta, persa) hanno una misura fissa, così la colonna del nome è la stessa in ogni riga */
.crm-stage-row .crm-stage-handle, .crm-stage-row .crm-stage-lock, .crm-stage-row .crm-stage-del, .crm-stage-row .crm-stage-spacer,
.crm-stage-row .crm-stage-desc-btn { flex: 0 0 16px; width: 16px; text-align: center; }
.crm-stage-row > .mv-badge { flex: 0 0 72px; justify-content: center; text-align: center; }
/* (NOTTE-CRM-REVISIONE, task 7) l'icona della descrizione dello step, accanto al nome: accesa se la descrizione c'è */
.crm-stage-desc-btn { flex: 0 0 auto; cursor: pointer; }
.crm-stage-row .crm-stage-desc-btn.is-on { color: var(--nv-accent); }
/* è un bottone del canone (list-action-icon is-azione, come la descrizione delle righe d'offerta) ma alla misura delle altre icone della riga */
.crm-stage-row .list-action-icon.crm-stage-desc-btn { font-size: 1em; }

.crm-divider { border: 0; border-top: 1px solid #444; margin: 20px 0 6px; }
.crm-divider-label { color: #7a7a7a; font-size: .78em; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }

/* Rinomina label stati lead: codice (readonly, monospace) + input label */
.crm-label-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.crm-label-code {
  flex: 0 0 170px; font-family: monospace; color: #7a7a7a; font-size: .85em;
  background-color: #0c0c0c; border: 1px solid #333; border-radius: 5px; padding: 7px 10px;
}
.crm-label-row .form-control { flex: 1 1 auto; }

/* Builder campi di qualifica: badge tipo neutro, asterisco "obbligatorio", riga "aggiungi campo" */

.crm-req { color: #6a6a6a; cursor: pointer; flex: 0 0 auto; transition: color .15s ease; }
.crm-req.is-on, .crm-req[data-on="1"] { color: #55d5cc; }
.crm-campo-add { display: flex; align-items: center; gap: 8px; }
.crm-campo-add .flex-grow-1 { flex: 1 1 auto; }
.crm-campo-tipo-wrap { flex: 0 0 210px; }
/* (NOTTE-CRM-REVISIONE, task 10) il tipo del campo della qualifica sta nella riga: la select dei campi creati e il badge di quelli di
   sistema hanno la stessa misura, così l'etichetta è larga uguale in ogni riga */
#campi-qual .crm-stage-row > .crm-campo-tipo, #campi-qual .crm-stage-row > .mv-badge { flex: 0 0 180px; width: 180px; }

/* Notifiche: matrice eventi × canali */
/* FASE 2: base tabella da .nv-matrix; qui restano solo i delta (vedi design-system in fondo). */
.crm-notif-ev { color: #fff; font-size: .95rem; }
.crm-notif-desc { color: #8a8a8a; font-size: .8rem; margin-top: 2px; }
.crm-notif-table tr.is-soon .crm-notif-ev { color: #ababab; }
.crm-notif-soon { font-size: .66rem; color: #7a7a7a; border: 1px solid #555; border-radius: 10px; padding: 1px 7px; margin-left: 6px; text-transform: uppercase; letter-spacing: .04em; }
.crm-notif-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: #55d5cc; cursor: pointer; }
.crm-notif-table input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .4; }

/* Calendario: feed ICS */
.crm-cal-row { display: flex; align-items: center; gap: 8px; max-width: 640px; }
.crm-cal-row .form-control { flex: 1 1 auto; }
.crm-cal-actions { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.crm-cal-toggle { color: #ababab; font-size: .9rem; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; }
.crm-cal-toggle input { width: 16px; height: 16px; accent-color: #55d5cc; cursor: pointer; }
.crm-cal-copied { border-color: #57d555 !important; }
.crm-cal-help-link { display: inline-block; margin-top: 8px; color: #55d5cc; cursor: pointer; font-size: .85rem; }
.crm-cal-help { margin-top: 10px; color: #ababab; font-size: .85rem; }
.crm-cal-help ol { margin: 0; padding-left: 18px; }
/* ===== Campanella notifiche (header) ===== */
.notif-badge {
  position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px;
  background: #db3131; color: #fff; border-radius: 9px; font-size: 11px; line-height: 18px;
  text-align: center; font-weight: 700; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.45);
}
.notif-dropdown { width: 340px; padding-bottom: 0; }
.nv-tendina-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 16px 10px; border-bottom: 1px solid #333; }
.nv-tendina-titolo { font-size: .9rem; font-weight: 600; color: var(--nv-text-value); }
.nv-tendina-testa a { color: #55d5cc !important; font-size: .78rem; cursor: pointer; }   /* body a è !important */
.notif-list { max-height: 380px; overflow-y: auto; padding: 6px 0; }
/* una voce su due righe: il testo nel colore dei valori, il tempo in quello delle etichette, il pallino delle non lette */
.nv-tendina .menu-link.is-doppia { align-items: flex-start; }
.nv-tendina .menu-link.is-doppia > i { margin-top: 3px; }
.nv-tendina .menu-link-corpo { flex: 1 1 auto; min-width: 0; padding-left: 1rem; }
.nv-tendina .menu-link-testo { font-size: .88rem; line-height: 1.35; color: var(--nv-text-value); overflow-wrap: anywhere; }
.nv-tendina .menu-link-sotto { font-size: .72rem; margin-top: 2px; color: var(--nv-text-label); }
.nv-tendina .menu-link-punto { flex: 0 0 8px; width: 8px; height: 8px; margin: 6px 0 0 10px; border-radius: 50%; background: #55d5cc; }
.nv-tendina .menu-link.is-nuova .menu-link-testo { font-weight: 600; }
.nv-tendina .menu-link:hover .menu-link-testo, .nv-tendina .menu-link:hover .menu-link-sotto { color: #000; }
.nv-tendina .menu-link:hover .menu-link-punto { background: #000; }
/* (DIURNA PANNELLO-OFFERTE, 14/10/2026) IL BADGE DEL KIT DENTRO UNA VOCE DELLA TENDINA — il menu delle offerte della trattativa
   (crm.md spec. 42) mette lo stato col suo badge (.mv-badge, uno span) nella seconda riga. Le regole delle voci danno a ogni span il
   rientro di 1rem e il colore dei valori, !important: il badge perdeva colore e forma. Qui li riprende; al passaggio del mouse, sul
   fondo teal della voce, il badge diventa nero come il testo (un badge teal sul teal sparirebbe). Vale per i due temi. */
.nv-tendina .menu-link .mv-badge { padding: 2px 10px; color: var(--matrix-color, #55d5cc) !important; }
.nv-tendina .menu-link:hover .mv-badge { --matrix-color: #000; }


/* ===== Impostazioni ▸ Skill: griglia di FLIP-CARD ===== */
.skill-grid { display: grid; grid-template-columns: repeat(3, 300px); gap: 22px; justify-content: center; padding: 6px 0 40px; }

/* Contenitore 3D (trasparente): la card ruota su .skill-flip, le due facce sono i .skill-face */
.skill-box { width: 300px; height: 300px; perspective: 1200px; }
.skill-flip { position: relative; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; }
.skill-box.is-flipped .skill-flip { transform: rotateY(180deg); }

/* Faccia = card (fondo nero, bordo, ribbon). backface nascosta per il flip. */
.skill-face {
  position: absolute; inset: 0; overflow: hidden;
  background: #000; border: 1px solid #444; border-radius: 12px;
  padding: 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.skill-face--back { transform: rotateY(180deg); }
/* Corner ribbon "Nuvolai Skill" su entrambe le facce */
.skill-face::after {
  content: 'Nuvolai Skill'; position: absolute; top: 22px; right: -54px; width: 200px;
  transform: rotate(45deg); background: #55d5cc; color: #000; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 5px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); pointer-events: none; z-index: 2;
}

/* Icona: cerchio SEMPRE teal + glifo BIANCO (lo stato attivo/spento è nello switch, non nel bordo).
   flex:0 0 auto → cerchio perfettamente tondo; icone DUOTONE → bianco forzato con le variabili FA. */
.skill-box-icon {
  flex: 0 0 auto;
  width: 86px; height: 86px; border: 3px solid #55d5cc; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; margin-bottom: 26px;
}
.skill-box-icon, .skill-box-icon i, .skill-box-icon svg {
  color: #fff;
  --fa-primary-color: #fff;
  --fa-secondary-color: #9a9a9a;
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
}

/* Info "i" in ALTO A DESTRA nell'angolo della card. Famiglia FA `fa-sharp-duotone` (l'unica che rende
   nel kit Pro caricato). Colore grigio #9e9e9e (color + fill: FA carica sia webfont sia SVG). */
.skill-info { position: absolute; top: 9px; right: 9px; font-size: 1.05rem; z-index: 5; line-height: 1; }
/* !important: batte la specificità di FontAwesome (che altrimenti vince sul color/fill). */
.skill-info, .skill-info i, .skill-info svg, .skill-info svg * { color: #fff !important; fill: #fff !important; transition: color .15s ease, fill .15s ease; }
.skill-info:hover, .skill-info:hover i, .skill-info:hover svg, .skill-info:hover svg * { color: #55d5cc !important; fill: #55d5cc !important; }

/* FRONT: nome skill + badge modulo + switch */
.skill-box-name {
  color: #fff; font-size: 1.15rem; font-weight: 500; line-height: 1.25; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Sottotitolo = colonna `titolo` del catalogo, subito sotto il nome skill.
   min-height = 2 righe (2 × line-height 1.3): i titoli brevi occupano comunque lo spazio di due
   righe, così badge e switch restano allineati tra card affiancate. Il clamp resta a 2 righe. */
.skill-box-subtitle {
  color: #ababab; font-size: .82rem; line-height: 1.3; margin-bottom: 10px;
  min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Badge modulo (dove è disponibile la skill): bordo nuvolai, testo bianco */
.skill-module-badge {
  display: inline-block; border: 1px solid #55d5cc; color: #fff; border-radius: 12px;
  padding: 2px 14px; font-size: .72rem; font-weight: 500; letter-spacing: .03em;
}
/* Il badge è un LINK: porta al gruppo in cui la skill si usa. Senza questa riga eredita
   `body a { color:#5a5a5a!important }` — grigio scuro su fondo nero, illeggibile — e la classe qui
   sopra, che non ha !important, perde. È lo stesso caso già risolto per i badge delle query salvate
   di nl2stat, e vale per TUTTE le card: il colore del badge non dipende dallo stato della skill,
   solo il suo switch cambia. Hover teal come ogni altro link della piattaforma. */
a.skill-module-badge { color: #fff !important; }
a.skill-module-badge:hover { color: #55d5cc !important; }
/* Switch attiva/disattiva: rosso (off) → teal (on), knob bianco. Largo (~2×). */
.skill-switch { display: inline-flex; align-items: center; cursor: pointer; margin-top: auto; }
.skill-switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.skill-switch-track { width: 100px; height: 26px; border-radius: 13px; background: #db3131; position: relative; transition: background .2s ease; }
.skill-switch-input:checked + .skill-switch-track { background: #55d5cc; }
.skill-switch-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s ease; }
.skill-switch-input:checked + .skill-switch-track .skill-switch-knob { left: 77px; }

/* BACK: titolo + descrizione completa + Torna */
.skill-back-title { color: #fff; font-size: 1rem; font-weight: 500; line-height: 1.25; margin-bottom: 8px; }
.skill-back-desc { color: #ababab; font-size: .82rem; line-height: 1.4; margin-bottom: 14px; overflow-y: auto; flex: 1 1 auto; }
.skill-torna { margin-top: auto; min-width: 150px; }
.skill-torna.btn-outline-primary {
  --bs-btn-color: #55d5cc; --bs-btn-border-color: #55d5cc;
  --bs-btn-hover-color: #000000; --bs-btn-hover-bg: #55d5cc; --bs-btn-hover-border-color: #55d5cc;
  --bs-btn-active-color: #fff;
}

/* ============================================================
   Nuvolai — Tema flatpickr "Editor Dark"
   Coerente con la toolbar dell'editor: sfondo quasi nero,
   testo bianco, bordi grigi sottili, accento teal #55D5CC.
   Caricato DOPO flatpickr.min.css (incluso prima di nuvola.css
   nell'head di godmode/index.php).
   ============================================================ */

:root {
  --nv-dp-bg:        #000000;  /* pannello */
  --nv-dp-bg-alt:    #000000;  /* header mese / time */
  --nv-dp-border:    #3a3a3a;  /* bordi sottili */
  --nv-dp-text:      #f0f0f0;  /* testo principale */
  --nv-dp-text-dim:  #8a8a8a;  /* giorni fuori mese, weekday */
  --nv-dp-hover:     #333333;  /* hover giorno */
  --nv-dp-accent:    #55D5CC;  /* teal Nuvolai */
  --nv-dp-on-accent: #000000;  /* testo su teal */
  --nv-dp-radius:    6px;
  --nv-dp-font:      'Outfit', system-ui, sans-serif;
}

/* ---------- Contenitore ---------- */
.flatpickr-calendar {
  background: var(--nv-dp-bg);
  border: 1px solid var(--nv-dp-accent);
  border-radius: var(--nv-dp-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  font-family: var(--nv-dp-font);
}

/* Freccetta del popup */
.flatpickr-calendar.arrowTop::before  { border-bottom-color: var(--nv-dp-accent); }
.flatpickr-calendar.arrowTop::after   { border-bottom-color: var(--nv-dp-bg-alt); }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--nv-dp-accent); }
.flatpickr-calendar.arrowBottom::after  { border-top-color: var(--nv-dp-bg); }

/* ---------- Header mese/anno ---------- */
.flatpickr-months {
  background: var(--nv-dp-bg-alt);
  border-bottom: 1px solid var(--nv-dp-border);
  border-radius: var(--nv-dp-radius) var(--nv-dp-radius) 0 0;
}

.flatpickr-months .flatpickr-month {
  background: transparent;
  color: var(--nv-dp-text);
  fill: var(--nv-dp-text);
  height: 40px;
}

.flatpickr-current-month {
  font-size: 14px;
  font-weight: 600;
  padding-top: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: #000000;
  color: #ffffff;
  font-weight: 600;
  border-radius: 4px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: #000000;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: var(--nv-dp-bg);
  color: var(--nv-dp-text);
}

.flatpickr-current-month input.cur-year {
  color: var(--nv-dp-text);
  font-weight: 600;
}

.numInputWrapper:hover { background: var(--nv-dp-hover); }
.numInputWrapper span  { border-color: #000000; }
.numInputWrapper span:hover { background: var(--nv-dp-hover); }
.numInputWrapper span.arrowUp::after   { border-bottom-color: var(--nv-dp-text-dim); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--nv-dp-text-dim); }

/* Frecce prev/next — icone bianche come la toolbar */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: #ffffff;
  height: 40px;
  padding: 8px 10px;
  border-radius: 4px;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: var(--nv-dp-accent);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--nv-dp-accent);
}

/* ---------- Intestazione giorni settimana ---------- */
.flatpickr-weekdays { background: transparent; }

span.flatpickr-weekday {
  background: transparent;
  color: var(--nv-dp-text-dim);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------- Griglia giorni ---------- */
.flatpickr-day {
  color: var(--nv-dp-text);
  border-radius: 50%;               /* cerchietti */
  border: 1px solid transparent;
  transition: background .12s ease, color .12s ease;
}

/* Hover: cerchietto pieno teal */
.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: var(--nv-dp-accent);
  border-color: var(--nv-dp-accent);
  color: var(--nv-dp-on-accent);
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--nv-dp-text-dim);
}

/* Oggi: solo outline teal */
.flatpickr-day.today {
  border-color: var(--nv-dp-accent);
  color: var(--nv-dp-accent);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  background: var(--nv-dp-accent);
  border-color: var(--nv-dp-accent);
  color: var(--nv-dp-on-accent);
}

/* Selezionato: pieno teal, testo nero */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus {
  background: var(--nv-dp-accent);
  border-color: var(--nv-dp-accent);
  color: var(--nv-dp-on-accent);
  font-weight: 600;
}

/* Range intermedio (se usi mode: "range") */
.flatpickr-day.inRange {
  background: rgba(85, 213, 204, .16);
  border-color: rgba(85, 213, 204, .16);
  box-shadow: -5px 0 0 rgba(85, 213, 204, .16), 5px 0 0 rgba(85, 213, 204, .16);
  color: var(--nv-dp-text);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #555;
}

/* ---------- Time picker (se enableTime: true) ---------- */
.flatpickr-time {
  background: var(--nv-dp-bg-alt);
  border-top: 1px solid var(--nv-dp-border) !important;
  border-radius: 0 0 var(--nv-dp-radius) var(--nv-dp-radius);
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  background: transparent;
  color: var(--nv-dp-text);
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover {
  background: #000000;
}

/* ---------- Input associato (altInput) — con iconcina calendario ---------- */
.nv-date-input {
  background-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238a8a8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='18'%20rx='2'%20ry='2'/%3E%3Cline%20x1='16'%20y1='2'%20x2='16'%20y2='6'/%3E%3Cline%20x1='8'%20y1='2'%20x2='8'%20y2='6'/%3E%3Cline%20x1='3'%20y1='10'%20x2='21'%20y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  border: 1px solid var(--nv-campo-bordo);   /* il contorno di un controllo, come ogni campo (era #3a3a3a, 1,85:1) */
  border-radius: 6px;
  color: #f0f0f0;
  font-family: var(--nv-dp-font);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: .375rem 34px .375rem .75rem;
  outline: none;
  transition: border-color .15s ease;
}

.nv-date-input::placeholder { color: #8a8a8a; }

.nv-date-input:focus {
  border-color: var(--nv-dp-accent);
  box-shadow: 0 0 0 3px rgba(85, 213, 204, .18);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2355D5CC'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='18'%20rx='2'%20ry='2'/%3E%3Cline%20x1='16'%20y1='2'%20x2='16'%20y2='6'/%3E%3Cline%20x1='8'%20y1='2'%20x2='8'%20y2='6'/%3E%3Cline%20x1='3'%20y1='10'%20x2='21'%20y2='10'/%3E%3C/svg%3E");
}

/* ─────────────────────────────────────────────────────────────────────────
   Dropzone MULTI-documento (newDropzoneMulti) — box scuro, bordo teal
   tratteggiato, mezza altezza. Ogni file = icona del suo tipo, click = anteprima.
   ───────────────────────────────────────────────────────────────────────── */
.nv-dz-doc.dropzone{
  min-height:75px;            /* metà del default (150px) */
  background:#000 !important;
  border:1px dotted #55d5cc !important;
  border-radius:8px;
  padding:6px;
}
/* dropzone.css viene caricato DOPO nuvola.css (lazy-load all'apertura del drawer):
   a parità di specificità vincerebbe lui → tutte le override usano il prefisso
   .nv-dz-doc.dropzone (specificità superiore) per battere .dropzone .dz-*. */
.nv-dz-doc.dropzone .dz-message{ margin:1.1em 0; color:#8a8a8a; font-size:.82rem; }
.nv-dz-doc.dropzone.dz-started .dz-message{ display:none; }
.nv-dz-doc.dropzone .dz-preview{ min-height:auto !important; margin:6px; vertical-align:top; text-align:center; }
.nv-dz-doc.dropzone .dz-preview .dz-image{
  width:56px; height:56px; border-radius:10px; margin:0 auto;
  background:transparent !important;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.nv-dz-doc.dropzone .dz-preview.dz-file-preview .dz-image,
.nv-dz-doc.dropzone .dz-preview.dz-image-preview{ background:transparent !important; }
.nv-dz-doc.dropzone .dz-preview:hover .dz-image img{ transform:none; filter:none; }
.nv-dz-doc .nv-doc-ico{ font-size:40px; line-height:1; }

/* ANTEPRIMA DI UN LOGO (.nv-dz-logo, sopra .nv-dz-doc) — un logo e' quasi sempre un PNG con lo
   sfondo trasparente, e il riquadro della dropzone e' nero: il logo nero dei documenti, che e' la
   versione piu' comune, spariva del tutto. Non era un'anteprima vuota, era nera su nero (bug A-01 /
   segnalazione B1 dei colleghi). La scacchiera e' il fondo con cui si guarda un'immagine
   trasparente: mostra il logo chiaro come quello scuro, senza decidere al posto dell'utente quale
   dei due sta caricando. E l'anteprima prende tutta la larghezza del riquadro, perche' 56 pixel non
   bastano a riconoscere un marchio. */
.nv-dz-logo.dropzone .dz-preview{ width:100%; margin:6px 0; }
.nv-dz-logo.dropzone .dz-preview .dz-image{
  width:100%; height:64px; border-radius:6px; padding:4px;
  background-color:#d8d8d8 !important;
  background-image:
    linear-gradient(45deg, #b4b4b4 25%, transparent 25%, transparent 75%, #b4b4b4 75%),
    linear-gradient(45deg, #b4b4b4 25%, transparent 25%, transparent 75%, #b4b4b4 75%) !important;
  background-size:14px 14px !important;
  background-position:0 0, 7px 7px !important;
}
.nv-dz-logo.dropzone .dz-preview .dz-image img{
  width:100%; height:100%; object-fit:contain; border-radius:0;
}
/* Dopo l'upload: niente nome file né dimensione */
.nv-dz-doc.dropzone .dz-preview .dz-details{ display:none !important; }
/* Niente check/errore sovrapposti all'icona */
.nv-dz-doc.dropzone .dz-preview .dz-success-mark,
.nv-dz-doc.dropzone .dz-preview .dz-error-mark{ display:none !important; }
/* "Rimuovi" subito sotto l'icona, compatto (così il box non si allunga) */
.nv-dz-doc.dropzone .dz-preview .dz-remove{
  position:static; margin:4px 0 0; padding:0;
  color:var(--nv-danger-testo); font-size:11px; line-height:1.2;
}
.nv-dz-doc.dropzone .dz-preview .dz-remove:hover{ color:#ff5b5b; text-decoration:underline; }
/* «Rimuovi» delle immagini (loghi, copertina): il bottone secondario del kit — teal a contorno —, non un testo grigio
   (30/09/2026; le classi le mette logodropzone.php). Sotto l'immagine, centrato. */
.nv-dz-doc.dropzone .dz-preview .dz-remove.nv-dz-rimuovi{ display:inline-block; width:auto; margin:8px auto 0; padding:.2rem .75rem;
  font-family:inherit; font-size:.8rem; line-height:1.4; text-decoration:none;
  /* le regole della dropzone (colore, bordo: nessuno) sono più specifiche di .btn: qui si rimettono le variabili del bottone */
  color:var(--bs-btn-color); background:transparent; border:var(--bs-btn-border-width, 1px) solid var(--bs-btn-border-color); border-radius:var(--bs-btn-border-radius, .375rem); }
.nv-dz-doc.dropzone .dz-preview .dz-remove.nv-dz-rimuovi:hover{ text-decoration:none; color:var(--bs-btn-hover-color); background:var(--bs-btn-hover-bg); border-color:var(--bs-btn-hover-border-color); }
.nv-dz-doc.dropzone .dz-preview:has(.nv-dz-rimuovi){ text-align:center; }
/* è un <a>: come per gli altri link del kit che hanno un colore loro, si supera `body a { color … !important }` */
a.nv-dz-rimuovi{ color:var(--bs-btn-color) !important; }
a.nv-dz-rimuovi:hover{ color:var(--bs-btn-hover-color) !important; }
/* AZIENDA ▸ BRAND IDENTITY ▸ LOGHI (30/09/2026): le tre card stanno nella larghezza della pagina — 3 colonne da 1280 px,
   2 sotto, una sul telefono. minmax(0, 1fr): una card non si allarga per il suo contenuto. */
.bi-loghi{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px 24px; }
.bi-loghi > .form-group{ min-width:0; }
.bi-loghi .nv-dz-doc{ max-width:100%; box-sizing:border-box; }
@media (max-width: 1279.98px){ .bi-loghi{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px){ .bi-loghi{ grid-template-columns:minmax(0, 1fr); } }

/* Colore icona per tipo di file */
.nv-doc-ico.nv-ico-pdf   { color:var(--nv-danger-testo); }
.nv-doc-ico.nv-ico-word  { color:#4a86e8; }
.nv-doc-ico.nv-ico-excel { color:#57d555; }
.nv-doc-ico.nv-ico-ppt   { color:#f5a623; }
.nv-doc-ico.nv-ico-img   { color:#55d5cc; }
.nv-doc-ico.nv-ico-generic{ color:#9aa0a6; }

/* ─────────────────────────────────────────────────────────────────────────
   Lettore PDF custom Nuvolai (nvPdfOpen / PDF.js) — tutto nero, scrollbar
   Nuvolai (globale teal), manina custom (canvas/bottoni). Sostituisce il
   visualizzatore nativo del browser (non stilabile) nell'anteprima documenti.
   ───────────────────────────────────────────────────────────────────────── */
.nv-pdf{ background:#000; border:none; border-radius:8px; overflow:hidden; }
.nv-pdf-bar{
  display:flex; align-items:center; justify-content:space-between;
  background:#000; border:none; padding:6px 10px;
  position:sticky; top:0; z-index:2;
}
.nv-pdf-pageinfo{ font-size:.82rem; color:#9aa0a6; }
.nv-pdf-zoom{ display:flex; align-items:center; gap:8px; }
.nv-pdf-zval{ font-size:.8rem; color:#e8e8e8; min-width:46px; text-align:center; }
.nv-pdf-zbtn{
  background:#000; color:#55d5cc; border:1px solid #55d5cc; border-radius:6px;
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, color .15s ease;
}
.nv-pdf-zbtn:hover{ background:#55d5cc; color:#000; }
.nv-pdf-scroll{ background:#000; overflow:auto; height:70vh; padding:12px 0; text-align:center; }
.nv-pdf-page{ display:block; margin:0 auto 12px; background:#fff; box-shadow:0 0 0 1px #1e1e1e; }
.nv-pdf-loading{ color:var(--nv-stato-colore); font-weight:var(--nv-stato-peso); padding:24px; font-size:var(--nv-stato-size); }
.nv-pdf-err{ color:#9aa0a6; padding:24px; font-size:.9rem; }
.nv-pdf-err{ color:var(--nv-danger-testo); }
.nv-doc-img{ max-width:100%; max-height:72vh; width:auto; height:auto; object-fit:contain; display:block; margin:0 auto; }
/* Iframe di anteprima del template HTML del documento (fallback quando mPDF non è installato) */
.nv-doc-htmlframe{ width:100%; height:72vh; border:0; border-radius:4px; background:#fff; display:block; }

/* Box risultati del picker catalogo (modal offerte): area scrollabile — sostituisce l'inline max-height */
.nv-picker-results{ max-height:320px; overflow:auto; }

/* White Label — crop/posizionamento del logo personalizzato (modal in impostazioni/index).
   La scacchiera mostra la trasparenza; il canvas viene disegnato trasparente (clearRect). */
.wl-crop{ text-align:center; }
.wl-crop-stage{ position:relative; width:300px; margin:0 auto 12px; }
.wl-crop-canvas{ width:300px; height:84px; border:1px solid #333333; border-radius:4px; display:block; cursor:move; touch-action:none;
  background-image:linear-gradient(45deg,#1a1a1a 25%,transparent 25%),linear-gradient(-45deg,#1a1a1a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1a1a1a 75%),linear-gradient(-45deg,transparent 75%,#1a1a1a 75%);
  background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0; background-color:#000; }
.wl-crop-tools{ display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:8px; }
.wl-crop-tools input[type=range]{ width:160px; accent-color:#55d5cc; }
.wl-crop-hint{ color:#9aa0a6; font-size:.8rem; }

.wl-crop-remove{ color:var(--nv-danger-testo); font-size:.82rem; display:inline-block; margin-top:6px; }

/* Avatar utente — editor foto profilo (modal) + thumb nell'header */
.av-stage{ position:relative; width:256px; height:256px; margin:0 auto 12px; border-radius:8px; overflow:hidden; background:#000; }
.av-video{ width:256px; height:256px; object-fit:cover; transform:scaleX(-1); display:block; }
.av-canvas{ width:256px; height:256px; display:block; }
.av-flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.av-flash.is-flash{ animation:avFlash .32s ease; }
@keyframes avFlash{ 0%{opacity:.9;} 100%{opacity:0;} }
.av-actions{ display:flex; gap:8px; justify-content:center; margin-bottom:8px; }
/* Il bordo separa l'avatar dallo sfondo dell'header quando la foto e' chiara nel tema scuro (o
   scura nel light). Prende --nv-text-title, che e' l'unica variabile che il tema light
   ridefinisce nel verso giusto: bianco sul nero, quasi nero sul chiaro. Un #FFF fisso sarebbe
   invisibile nel light, che e' esattamente il caso in cui il bordo serve. */
.header-avatar{ width:23px; height:23px;   /* la foto profilo: 23px, deciso da Alessio il 26/09/2026 */
                border-radius:50%; object-fit:cover; display:block;
                border:1px solid var(--nv-text-title); }
.av-thumb{ width:50px; height:50px; border-radius:50%; object-fit:cover; display:block; }
/* Nome utente cliccabile (menu utente) → apre la modal Foto profilo quando la skill è attiva */
.nv-avatar-trigger{ transition:color .15s ease; }
.nv-avatar-trigger:hover{ color:#55d5cc; }
/* Editor avatar: stato vuoto (scegli file / webcam), frame con maschera circolare, zoom, rimozione.
   Il frame resta quadrato: il cerchio è solo la maschera che mostra quale parte verrà ritagliata. */
.av-editor{ text-align:center; }


.av-canvas{ cursor:move; touch-action:none; }
.av-mask{ position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 9999px rgba(10,10,10,.62); pointer-events:none; }
.av-zoom{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px; color:#9aa0a6; }
.av-zoom input[type=range]{ width:200px; accent-color:#55d5cc; }
.av-hint{ color:#8a8a8a; font-size:.8rem; margin-top:10px; }
.av-remove{ display:inline-block; margin-top:14px; color:#8a8a8a; font-size:.84rem; text-decoration:none; }
.av-remove:hover{ color:var(--nv-danger-testo); }
/* La barra regolazioni è la stessa di catalogo/articoli: qui sta in un modal da 460px, non da 950px. */
.av-editor .nv-fx-slider{ width:170px; }
.av-editor .nv-fx-label{ min-width:76px; }
.av-editor .nv-fx-bar{ gap:10px; }

/* Traccia Offerta — pagina pubblica sfogliabile (traccia.php) */
.tracc-body{ background:#0c0c0c; margin:0; }
.tracc-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:24px 12px; }
.tracc-head{ margin-bottom:18px; }
.tracc-logo{ height:34px; width:auto; }
.tracc-stage{ display:flex; justify-content:center; width:100%; }
.tracc-tools{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.tracc-pageinfo{ color:#cfcfcf; font-size:.9rem; min-width:64px; text-align:center; }
.tracc-fallback{ width:100%; max-width:900px; }
.tracc-loading{ color:var(--nv-stato-colore); font-weight:var(--nv-stato-peso); margin-top:30px; font-size:var(--nv-stato-size); }
/* LA PAGINA PUBBLICA CON LA VESTE DI CHI EMETTE (revisione Offerte 2): il link /documenti/<token> lo apre il
   cliente del nostro cliente. Cursore di SISTEMA (il body dell'app lo nasconde per il puntino, che qui non
   c'è), fondo neutro chiaro sotto il documento, barra col colore primario, font e bottoni del brand. I colori
   arrivano come variabili sul body (--tr-primario, --tr-su-primario, --tr-font): sono dati del cliente. */
body.tracc-body, body.tracc-body *{ cursor:auto; }
body.tracc-body a, body.tracc-body button, body.tracc-body .btn{ cursor:pointer; }
body.tracc-brand{ background:#eceef1 !important; color:#2a2a2a; font-family:var(--tr-font, sans-serif) !important; padding:0 !important; overflow:auto; }
.tracc-brand .tracc-barra{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 24px; background:var(--tr-primario); color:var(--tr-su-primario); }
.tracc-brand .tracc-logo-box{ display:inline-flex; align-items:center; }
.tracc-brand .tracc-logo-box.is-piastrina{ background:#fff; padding:6px 10px; border-radius:6px; }
.tracc-brand .tracc-logo{ height:32px; width:auto; }
.tracc-brand .tracc-nome{ font-weight:700; font-size:1.05rem; }
.tracc-brand .tracc-titolo{ font-size:.9rem; opacity:.9; white-space:nowrap; }
.tracc-brand .tracc-wrap{ min-height:auto; padding:28px 12px 18px; }
.tracc-brand .tracc-pageinfo{ color:#555; }
.tracc-brand .tracc-loading{ color:#666; }
.tracc-brand .tracc-tools .btn{ background:#fff; color:var(--tr-primario) !important; border:1px solid var(--tr-primario); font-family:inherit; }
.tracc-brand .tracc-tools .btn:hover{ background:var(--tr-primario); color:var(--tr-su-primario) !important; }
.tracc-brand .tracc-powered{ text-align:center; font-size:.72rem; color:#9a9a9a; padding:6px 0 18px; }
.tracc-brand .tracc-powered a{ color:#8a8a8a !important; text-decoration:underline !important; }
@media (max-width: 575.98px){ .tracc-brand .tracc-barra{ padding:10px 16px; } .tracc-brand .tracc-titolo{ font-size:.8rem; } }

/* Gruppo di radio in linea (cosa vendi, chooser Cliente/Lead): il .form-check dell'app trascina
   l'input con float:left + margin negativo → per i radio affiancati serve resettarlo e allineare. */
.nv-radio-inline{ display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; align-items:center; }
.nv-radio-inline .form-check{ display:flex; align-items:center; gap:.5rem; min-height:auto; margin:0; padding:0 !important; }
.nv-radio-inline .form-check .form-check-input{ float:none; margin:0; width:1.2rem; height:1.2rem; flex:0 0 auto; }
.nv-radio-inline .form-check-label{ color:#e8e8e8; cursor:pointer; }

/* ===== Scheda articolo (Catalogo ▸ Articoli): drawer di sezione a scomparsa da DESTRA =====
   Layout scheda = identico al form New (col-md-10 anagrafica + col-md-2 side-col: Skill + matrix Sezioni).
   Le voci sezione (Foto/Attributi/…) usano .servizio-label e aprono il .crm-drawer (da destra, .is-wide). */
.nv-drawer-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:10000; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; }
.nv-drawer-overlay.is-open{ opacity:1; visibility:visible; }
.crm-drawer.is-wide{ width:640px; max-width:96vw; }
.art-sez-pane{ display:none; }
.art-sez-pane.is-active{ display:block; }
/* Pill Sezioni: stesso look delle pill Skill (.servizio-label) ma classe PROPRIA — così skillcard.js
   (delegato su .servizio-label) NON intercetta il click. Fine allineata alle pill Skill (spazio cestino). */
.art-sez-link{ display:flex; align-items:center; gap:.55rem; border:1px solid #55d5cc; border-radius:6px;
  padding:.5rem .7rem; color:#fff; font-size:.8em; letter-spacing:.02em; cursor:pointer;
  transition:background .2s ease; margin-right: calc(30px + .4rem); }
.art-sez-link:hover{ background: rgba(85,213,204,.12); }
/* Icona teal; larghezza fissa via fa-fw così i testi dei bottoni si allineano verticalmente. */
.art-sez-link i, .art-sez-link svg{ color:#55d5cc; }
/* Badge conteggio (es. n° varianti) a destra nel bottone sezione. */
.art-sez-count{ margin-left:auto; background:#3c3c3c; color:#cfcfcf; border-radius:10px; padding:1px 8px; font-size:.72rem; font-weight:600; }
/* ---- Varianti (drawer sezione): selettori attributi/valori + griglia ---- */
.nv-var-selettori{ margin-bottom: 18px; }
.nv-var-attr{ margin-bottom: 10px; }
.nv-var-attr-nome{ color:#e8e8e8; font-weight:600; margin-bottom:4px; display:flex; align-items:center; cursor:pointer; }
.nv-var-attr-nome input, .nv-var-valori input{ float:none; margin:0 .4rem 0 0; width:1rem; height:1rem; flex:0 0 auto; }
.nv-var-valori{ display:flex; flex-wrap:wrap; gap:.25rem .9rem; padding-left:1.4rem; }
.nv-var-valori label{ color:#cfcfcf; font-size:.85rem; cursor:pointer; display:inline-flex; align-items:center; margin:0; }
/* FASE 2: base tabella da .nv-matrix; qui restano solo i delta (vedi design-system in fondo). */
/* Solo le righe scrollano; la testata resta fissa (sticky). Scrollbar sottile come le list. */
#var-scroll{ max-height:300px; overflow-y:auto; }
.nv-var-table input{ background:#000; border:1px solid #3a3a3a; color:#f0f0f0; border-radius:4px; padding:3px 6px; width:100%; font-size:.85rem; }
.nv-var-table input:focus{ border-color:#55d5cc; outline:none; }
.nv-var-table input[readonly]{ color:#ababab; background:#1a1a1a; }
.nv-var-foto{ width:34px; height:34px; border-radius:4px; border:1px solid #3a3a3a; background:#0a0a0a; display:inline-flex; align-items:center; justify-content:center; color:#616161; cursor:pointer; }
.nv-var-foto img{ width:100%; height:100%; object-fit:cover; border-radius:4px; }

/* ---- Foto: thumbnail in lista + galleria (drawer) + picker variante ---- */
.nv-lista-thumb{ width:34px; height:34px; object-fit:cover; border-radius:4px; border:1px solid #3a3a3a; }
.nv-foto-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.nv-foto-item{ position:relative; width:96px; height:96px; border-radius:6px; overflow:hidden; border:1px solid #3a3a3a; background:#0a0a0a; cursor:grab; }
.nv-foto-item:active{ cursor:grabbing; }
.nv-foto-item.is-dragging{ opacity:.35; }
.nv-foto-item.drag-over{ outline:2px dashed #55d5cc; outline-offset:2px; }
.nv-foto-item img{ width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
/* Galleria (drawer): 4 miniature per riga che riempiono la larghezza; le altre vanno a capo. */
#nv-foto-sortable{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
#nv-foto-sortable .nv-foto-item{ width:auto; height:auto; aspect-ratio:1 / 1; }
/* Maniglia "presa" per il riordino (affordance chiara). */
.nv-foto-move{ position:absolute; bottom:5px; left:50%; transform:translateX(-50%); padding:2px 9px; border-radius:9px; background:rgba(0,0,0,.6); color:#cfcfcf; font-size:.72rem; cursor:grab; display:inline-flex; align-items:center; }
.nv-foto-item:hover .nv-foto-move{ color:#55d5cc; }
/* Foto ▸ "Genera con AI" (skill attiva): stesso aspetto e altezza del dropzone, affiancato.
   Layout flex: se il box AI è nascosto (skill spenta → .d-none) il dropzone occupa tutta la larghezza. */
#foto-upload-row{ align-items:stretch; }
.foto-up-col{ flex:1 1 0; min-width:0; }
#foto-upload-row .nv-dz-doc, #foto-upload-row .nv-ai-btn{ height:100%; margin:0; }
.nv-ai-btn{ width:100%; min-height:75px; background:#000; border:1px dotted #55d5cc; border-radius:8px; color:#55d5cc; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; font-size:.85rem; transition:background .2s ease; }
.nv-ai-btn i{ font-size:1.3rem; }
.nv-ai-btn:hover{ background:rgba(85,213,204,.10); }
/* Placeholder leggibile e bottoni outline in stile nuvolai (teal) dentro i drawer di sezione. */
.crm-drawer .form-control::placeholder, .crm-drawer textarea::placeholder{ color:#9a9a9a; opacity:1; font-size:.9em; }
.crm-drawer .btn-outline-primary{ --bs-btn-color:#55d5cc; --bs-btn-border-color:#55d5cc; --bs-btn-hover-bg:#55d5cc; --bs-btn-hover-border-color:#55d5cc; --bs-btn-hover-color:#000; --bs-btn-active-bg:#55d5cc; --bs-btn-active-border-color:#55d5cc; --bs-btn-active-color:#000; --bs-btn-focus-shadow-rgb:85,213,204; }
/* (CRM-RITOCCHI T20, 13/10/2026) I RIQUADRI INLINE (.nv-azioni-inline: la nuova attività nel pannello laterale e ogni riquadro che
   salva sul posto, non le modal né la toolbar): il primario «Salva» a riposo è a contorno come «Annulla» e si riempie solo al
   passaggio del mouse e al focus da tastiera (Bootstrap usa per :focus-visible le variabili di hover). Regola in css-ux.md. */
.nv-azioni-inline .btn-primary{ --bs-btn-color:#55d5cc; --bs-btn-bg:transparent; --bs-btn-border-color:#55d5cc; --bs-btn-hover-color:#000; --bs-btn-hover-bg:#55d5cc; --bs-btn-hover-border-color:#55d5cc; --bs-btn-active-color:#000; --bs-btn-active-bg:#55d5cc; --bs-btn-active-border-color:#55d5cc; }
/* Testi articolo: bandierina IT, footer con 2 icone grigie a destra (no divisore), box CKEditor. */
.nv-flag-it{ display:inline-block; width:15px; height:11px; border-radius:2px; vertical-align:middle; margin-right:6px; background:linear-gradient(to right, #009246 0 33.33%, #fff 33.33% 66.66%, #ce2b37 66.66% 100%); }
.nv-pane-tools, .nv-testi-tools{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:16px; }
/* (NOTTE-STILI-UX) lo stato del piede di un pannello è il TESTO DI STATO (.nv-stato): blu Nuvolai, non più verde #57d555 */
.nv-pane-tools .nv-pane-status, .nv-testi-tools .nv-testi-status{ color:var(--nv-stato-colore); font-weight:var(--nv-stato-peso); font-size:var(--nv-stato-size); }
.nv-pane-tools .nv-pane-icons, .nv-testi-tools .nv-testi-icons{ display:flex; gap:16px; }
.nv-pane-tools .nv-fx-reset, .nv-testi-tools .nv-fx-reset{ font-size:1.1rem; }
.nv-testi-descr label[for="descrizione"]{ display:none; }
/* Descrizione = campo note standard: eredita .ck-content. Scroll INTERNO all'editor (scrollbar nuvolai
   globale teal) quando il testo è lungo, così non scorre l'intero pane. */
.nv-testi-descr .ck-content{ max-height:280px; overflow-y:auto; }
/* Toolbar/balloon flottante di CKEditor: appesa al <body>, va sopra drawer (10001), overlay (10000) e
   modal (swal 10005), altrimenti resta dietro al pannello e "non compare" quando l'editor è in un drawer. */
.ck-body-wrapper .ck.ck-balloon-panel, .ck.ck-balloon-panel{ z-index: 10060 !important; }
/* Anteprima foto ▸ regolazioni immagine (skill attiva): 4 icone + barra centrata su 0, filtro CSS live. */
.nv-fx-modal .nv-doc-img{ max-height:62vh; }
.nv-fx-bar{ display:flex; justify-content:center; gap:14px; margin-top:14px; }
.nv-fx-icon{ width:38px; height:38px; border-radius:50%; border:1px solid #3a3a3a; background:#0a0a0a; color:#bdbdbd; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s ease; }
.nv-fx-icon:hover{ color:#55d5cc; border-color:#55d5cc; }
.nv-fx-icon.is-active{ color:#000; background:#55d5cc; border-color:#55d5cc; }
.nv-fx-slider-wrap{ display:none; align-items:center; gap:10px; justify-content:center; margin-top:14px; }
.nv-fx-slider-wrap.is-open{ display:flex; }
.nv-fx-label{ color:#ababab; font-size:.82rem; min-width:96px; text-align:right; }
.nv-fx-slider{ width:280px; accent-color:#55d5cc; }
.nv-fx-val{ color:#e8e8e8; font-size:.82rem; min-width:40px; text-align:left; }
.nv-fx-reset{ color:#8a8a8a; cursor:pointer; }
.nv-fx-reset:hover{ color:#55d5cc; }
/* Crop: riquadro trascinabile/ridimensionabile + rapporti; salva come nuova foto (canvas → upload). */
.nv-fx-stage{ position:relative; display:inline-block; line-height:0; max-width:100%; }
.nv-crop{ position:absolute; display:none; border:2px dashed #55d5cc; box-sizing:border-box; cursor:move; }
.nv-crop.is-on{ display:block; }
.nv-crop-se{ position:absolute; right:-7px; bottom:-7px; width:14px; height:14px; background:#55d5cc; border-radius:2px; cursor:se-resize; }
.nv-crop-tools{ display:none; gap:10px; justify-content:center; align-items:center; margin-top:14px; flex-wrap:wrap; }
.nv-crop-tools.is-on{ display:flex; }
.nv-crop-ratios{ display:inline-flex; gap:6px; }
.nv-crop-ratios button{ background:#0a0a0a; border:1px solid #3a3a3a; color:#cfcfcf; border-radius:6px; padding:3px 10px; cursor:pointer; font-size:.8rem; }
.nv-crop-ratios button.is-active, .nv-crop-ratios button:hover{ border-color:#55d5cc; color:#55d5cc; }
.nv-foto-item.is-principale{ border-color:#55d5cc; }
.nv-foto-star, .nv-foto-del{ position:absolute; top:4px; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.72rem; }
.nv-foto-star{ left:4px; color:#8a8a8a; }
.nv-foto-item.is-principale .nv-foto-star{ color:#f5c518; }
.nv-foto-star:hover{ color:#f5c518; }
.nv-foto-del{ right:4px; color:#fff; }
.nv-foto-del:hover{ color:var(--nv-danger-testo); }
.nv-foto-pickwrap{ display:flex; justify-content:center; }
.nv-foto-picker{ justify-content:center; max-height:320px; overflow:auto; }
.nv-foto-pick{ cursor:pointer; }
.nv-foto-pick:hover{ border-color:#55d5cc; }
.nv-foto-none{ display:flex; flex-direction:column; align-items:center; justify-content:center; color:#8a8a8a; gap:4px; }
.nv-foto-none-txt{ font-size:.7rem; }
/* ---- Form sezioni (Attributi/Packaging/Prezzi/Magazzino/Testi) nel drawer ---- */
.nv-attr-form{ margin-bottom:8px; }
.nv-attr-row{ margin-bottom:12px; }
.nv-attr-lbl{ display:block; font-weight:600; margin-bottom:4px; }
/* Label e placeholder dei campi nei drawer/modal = identici al form New (.card-body label). */
.crm-drawer label{ color:#cfcfcf; font-size:.8em; padding-bottom:4px; }
/* Magazzino: card KPI (In stock / Impegnato / Disponibile / Ordinato / Inventario). */
.nv-mag-grid{ display:flex; flex-wrap:wrap; gap:12px; }
.nv-mag-card{ flex:1 1 0; min-width:100px; border:1px solid #3c3c3c; border-radius:8px; padding:12px 8px; text-align:center; background:#0a0a0a; }
.nv-mag-card--stock{ border-color:#f59421; }
.nv-mag-card--green{ border-color:#57d555; }
.nv-mag-lbl{ color:#8a8a8a; font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.nv-mag-val{ color:#8a8a8a; font-size:1.8rem; font-weight:700; line-height:1; }
.nv-mag-card--stock .nv-mag-val{ color:#f59421; }
.nv-mag-card input{ width:80px; text-align:center; display:inline-block; margin-top:2px; }
/* Lista articoli: label Disponibile colorata, anteprima foto con frecce, card modal magazzino cliccabili. */
/* Label celle lista (Disponibile / Stato): stessa dimensione, fondo nero, testo bianco, SOLO bordo colorato. */
.nv-cell-badge{ display:inline-block; width:88px; height:24px; line-height:22px; padding:0 6px; border-radius:12px;
  border:1px solid #616161; background:#000; color:#fff; font-weight:600; font-size:.72rem; text-align:center;
  box-sizing:border-box; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.nv-cell-badge.is-click{ cursor:pointer; }
.nv-cell-badge.bd-red{ border-color:#db3131; }
.nv-cell-badge.bd-orange{ border-color:#f59421; }
.nv-cell-badge.bd-green{ border-color:#57d555; }
.nv-cell-badge.bd-grey{ border-color:#616161; }
.nv-listfoto{ position:relative; width:100%; text-align:center; line-height:0; }
.nv-listfoto-nav{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; }
.nv-listfoto-prev{ left:8px; } .nv-listfoto-next{ right:8px; }
.nv-listfoto-nav:hover{ background:#55d5cc; color:#000; }
.nv-mag-modal{ margin-bottom:6px; }
.nv-mag-clickable{ cursor:pointer; }
.nv-mag-card.is-sel{ border-color:#55d5cc; }

/* ── Commesse: progress inline (list) ── */
.nv-progress{ position:relative; height:16px; background:#141414; border:1px solid #2a2a2a; border-radius:9px; overflow:hidden; min-width:90px; }
.nv-progress-bar{ position:absolute; left:0; top:0; bottom:0; background:#55d5cc; }
.nv-progress-val{ position:relative; z-index:1; font-size:0.7rem; font-weight:600; color:#e8e8e8; line-height:16px; }

/* ── Commesse: barra avanzamento (riepilogo view) ── */
.nv-avz{ height:10px; background:#141414; border:1px solid #2a2a2a; border-radius:6px; overflow:hidden; }
.nv-avz-bar{ height:100%; background:#57d555; }
/* Barra avanzamento nella toolbar (scheda commessa): larga 340px, più alta, con % centrata dentro. */
.nv-avz-toolbar{ width:340px; height:26px; line-height:8px; position:relative; }
.nv-avz-toolbar .nv-avz-val{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:600; color:#fff; pointer-events:none; }
/* LO STATO DELLA TOOLBAR (NOTTE-STILI-UX, 08/10/2026): barra di avanzamento, testo di periodo e badge di una scheda, in UNA
   riga sulla mediana della toolbar, spazi da token, il badge subito dopo il testo. La barra si stringe (fino a 120 px) prima
   che qualcosa vada a capo; se non basta, o sotto i 1024 px, nv-kit.js (nvToolbarStato) mette .nv-tb-stato-a-capo sulla
   toolbar e lo stato scende in una seconda riga intera, centrata. Prima la barra era larga 340 px fissi in una colonna da
   ~330 (a 1024) e il periodo andava a capo, col badge fuori asse. */
:root{ --nv-tb-stato-gap: 10px; --nv-tb-stato-h: 26px; --nv-tb-riga-h: 40px; }   /* --nv-tb-riga-h = l'altezza di .toolbar-icon: la mediana della toolbar */
.nv-tb-stato{ display:flex; align-items:center; justify-content:center; gap:var(--nv-tb-stato-gap); flex-wrap:nowrap; white-space:nowrap; min-width:0; width:100%; }
.nv-tb-stato > *{ flex:0 0 auto; margin:0; }
.nv-tb-stato .nv-avz-toolbar{ flex:1 1 340px; width:auto; min-width:120px; max-width:340px; height:var(--nv-tb-stato-h); }
.nv-tb-stato-testo{ font-size:.8rem; color:var(--nv-text-label); line-height:var(--nv-tb-stato-h); }
.nv-tb-stato .mv-badge{ display:inline-flex; align-items:center; white-space:nowrap; }
#toolbar > .nv-tb-centro-stato{ min-width:0; align-items:flex-start !important; }
#toolbar > .nv-tb-centro-stato .nv-tb-stato{ min-height:var(--nv-tb-riga-h); }   /* sulla riga dei bottoni, non al centro della colonna */
#toolbar.nv-tb-stato-a-capo > .nv-tb-centro-stato ~ .toolbar{ margin-left:auto; }   /* i bottoni restano al bordo destro */
#toolbar.nv-tb-stato-a-capo > .nv-tb-centro-stato{ order:3; flex:0 0 100%; width:100%; max-width:100%; justify-content:center; padding-top:var(--nv-tb-stato-gap); }
#toolbar.nv-tb-stato-a-capo .nv-tb-stato, #toolbar > .nv-tb-centro-stato .nv-tb-stato{ max-width:100%; }
/* nella riga propria, se nemmeno lì c'è posto (telefono), vanno a capo i PEZZI interi — barra sopra, periodo e badge sotto —, mai un pezzo spezzato */
#toolbar.nv-tb-stato-a-capo .nv-tb-stato{ flex-wrap:wrap; justify-content:center; row-gap:6px; }
@media (max-width: 1023.98px){
  #toolbar > .nv-tb-centro-stato ~ .toolbar{ margin-left:auto; }
  #toolbar > .nv-tb-centro-stato{ order:3; flex:0 0 100%; width:100%; max-width:100%; justify-content:center; padding-top:var(--nv-tb-stato-gap); }
  #toolbar > .nv-tb-centro-stato .nv-tb-stato{ flex-wrap:wrap; justify-content:center; row-gap:6px; }
}
/* Badge di stato leggibili nella tabella task e nelle faccette (il .badge Bootstrap è troppo piccolo). */
#cm-list td .badge, .matrixValue .badge { font-size: 0.72rem; font-weight: 600; padding: 0.35em 0.6em; }
/* Toggle viste (list/kanban/gantt) come toolbar-icon: la vista attiva è evidenziata in teal. */
.toolbar-icon.cm-vista-btn.active { color: #55d5cc; }
/* KPI commessa in orizzontale (vista Kanban/Gantt): celle affiancate in alto, niente margine sotto. */
#cm-kpi.cm-kpi-horizontal { display:flex; gap:1.5rem 2.5rem; flex-wrap:wrap; align-items:flex-start; }
#cm-kpi.cm-kpi-horizontal .matrixCell { margin-bottom:0; }
/* Scheda commessa: area viste (main) che chiude sopra il footer, scroll interno thin (come le list). */
.cm-main-scroll{ overflow-y:auto; overflow-x:hidden; padding-right:.4rem; }

/* ── Commesse: segmented toggle viste (list/kanban/gantt) ── */


/* ── Commesse: card task (checklist/risorse nel kanban) ── */
.kanban-card-chk{ color:#8a8a8a; font-size:0.74rem; margin-top:8px; }
.kanban-card-ris{ display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.kanban-card-ris .nv-ris-pill{ font-size:0.6rem; font-weight:600; padding:1px 7px; border-radius:9px; background:#141414; border:1px solid #333; color:#bdbdbd; }

/* ── Impostazioni ▸ Commesse: nav + card set di step (scoped .nv-commesse-set: non tocca Impostazioni CRM) ── */
.nv-commesse-set .crm-nav-box.is-active{ border-color:#4a4a4a; }
.nv-commesse-set .list-action-icon.is-select{ font-size:1em !important; }
.nv-set-card{ border:1px solid #4a4a4a; border-radius:8px; padding:.7rem .85rem; }
.nv-set-nome{ font-size:0.9rem; font-weight:600; color:#fff; }
.nv-set-actions .list-action-icon{ font-size:1em !important; line-height:1; }
.nv-set-fase{ display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.nv-set-num{ display:inline-flex; align-items:center; justify-content:center; width:40px; min-width:40px; height:24px; border-radius:6px; color:#000; font-size:0.72rem; font-weight:700; }
.nv-set-fase-nome{ color:#cfcfcf; font-size:0.85rem; }
/* drag&drop fasi nel builder set */
.st-grip{ color:#8a8a8a; cursor:grab; padding:0 2px; }
.st-row.dragging{ opacity:.5; }

/* ── Commesse: GANTT (tema dark, coerente col kanban) ── */
.nv-gantt{ overflow-x:auto; background:#000; border:1px solid #333; border-radius:8px; }
.nv-gantt-body{ display:inline-block; min-width:100%; --gantt-dw:30px; --gantt-lbl:220px; }
.nv-gantt-headrow{ display:flex; border-bottom:1px solid #1e1e1e; position:sticky; top:0; z-index:3; background:#0a0a0a; }
.nv-gantt-corner{ flex:0 0 var(--gantt-lbl); width:var(--gantt-lbl); position:sticky; left:0; z-index:4; background:#0a0a0a; border-right:1px solid #1e1e1e; padding:8px 12px; color:#8a8a8a; font-size:0.78rem; font-weight:600; }
.nv-gantt-timeline{ position:relative; }
.nv-gantt-months{ display:flex; height:22px; }
.nv-gantt-month{ border-right:1px solid #1e1e1e; color:#cfcfcf; font-size:0.72rem; font-weight:600; padding:2px 6px; white-space:nowrap; overflow:hidden; }
.nv-gantt-days{ display:flex; height:20px; }
.nv-gantt-day{ flex:0 0 var(--gantt-dw); width:var(--gantt-dw); text-align:center; font-size:0.6rem; color:#6a6a6a; border-right:1px solid #141414; line-height:20px; }
.nv-gantt-day.is-weekend{ background:#0c0c0c; color:#4a4a4a; }
.nv-gantt-row{ display:flex; height:38px; border-bottom:1px solid #141414; }
.nv-gantt-row:hover{ background:#0c0c0c; }
.nv-gantt-label{ flex:0 0 var(--gantt-lbl); width:var(--gantt-lbl); position:sticky; left:0; z-index:2; background:#000; border-right:1px solid #1e1e1e; padding:0 12px; display:flex; align-items:center; color:#e8e8e8; font-size:0.82rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.nv-gantt-row:hover .nv-gantt-label{ background:#0c0c0c; }
.nv-gantt-track{ position:relative; flex:1 1 auto; background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(var(--gantt-dw) - 1px),#141414 calc(var(--gantt-dw) - 1px),#141414 var(--gantt-dw)); }
.nv-gantt-bar{ position:absolute; top:7px; height:24px; border-radius:5px; background:var(--kanban-color,#55d5cc); opacity:.92; cursor:grab; display:flex; align-items:center; padding:0 8px; color:#001014; font-size:0.72rem; font-weight:600; white-space:nowrap; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.nv-gantt-bar:hover{ opacity:1; }
.nv-gantt-bar.is-dragging{ opacity:.7; }
.nv-gantt-handle{ position:absolute; top:0; bottom:0; width:8px; cursor:ew-resize; }
.nv-gantt-handle.is-left{ left:0; } .nv-gantt-handle.is-right{ right:0; }
.nv-gantt-today{ position:absolute; top:0; bottom:0; width:2px; background:#db3131; z-index:1; opacity:.7; }


/* ── Footer: popover ricco sulle icone piccole (footer-right) ── */
/* Stile user dropdown: fondo nero, bordo teal. Posizione via JS (position:fixed): centrato
   sull'icona dove possibile, altrimenti clampato al bordo schermo. Freccetta sotto, verso l'icona. */
.footer-sm-wrap{ position:relative; display:inline-flex; align-items:center; }
.footer-pop{
  position:fixed; left:0; bottom:0;
  width:230px; max-width:calc(100vw - 16px); background:#000000; border:1px solid #55d5cc; border-radius:8px;
  padding:14px 16px; text-align:left; z-index:1100; color:#ffffff;
  box-shadow:0 4px 16px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.footer-sm-wrap:hover .footer-pop{ opacity:1; visibility:visible; transform:translateY(0); }
/* Freccetta SOTTO il box (fuori), stesso triangolo teal dei tooltip di menu; left impostato via JS */
.footer-pop-arrow{ position:absolute; top:100%; width:0; height:0; border:6px solid transparent; border-top-color:#55d5cc; transform:translateX(-50%); }
.footer-pop-title{ display:block; color:#ffffff; font-weight:600; font-size:0.85rem; margin-bottom:10px; }
.footer-pop-text{ display:block; color:#c4cdd8; font-size:0.78rem; line-height:1.4; }
.footer-pop-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:0.78rem; color:#dfe4ea; }
.footer-pop-row:last-of-type{ border-bottom:0; }
.footer-pop-row span:last-child{ color:#ffffff; font-weight:600; }
.footer-pop-meta{ display:flex; align-items:center; gap:6px; color:#7f93a8; font-size:0.72rem; margin-top:10px; }
.footer-pop-meta i{ font-size:0.82rem; }

/* Il peso di un badge lo decide il testo intorno, non il badge (22/09/2026). Bootstrap gli dà 700
   via `--bs-badge-font-weight`, ed è quel valore che si neutralizza: la regola di `.badge` resta
   di Bootstrap — file che non ci appartiene — e risolve all'ereditarietà. */
.badge { --bs-badge-font-weight: inherit; }

/* ── I DUE BOTTONI DEL DESIGN SYSTEM (canone 22/09/2026, → .claude/rules/css-ux.md) ──────────
   Ce ne sono due, e sono questi. `.btn-primary` fino a oggi era ancora il BLU di Bootstrap
   (#0d6efd): esisteva solo in pagine non servite e nel signup, che ha il suo `auth.css`, quindi
   nessuno se n'era accorto — ma era un terzo colore in canna, pronto a comparire al primo uso.
   Primario = teal pieno, testo nero. È l'azione della pagina o della modal.
   Lo spento non è un colore nuovo: gli stessi due valori, smorzati dall'opacità di Bootstrap. */
.btn-primary{ --bs-btn-color:#000; --bs-btn-bg:#55d5cc; --bs-btn-border-color:#55d5cc; --bs-btn-hover-color:#000; --bs-btn-hover-bg:#6fdfd7; --bs-btn-hover-border-color:#6fdfd7; --bs-btn-active-color:#000; --bs-btn-active-bg:#42bdb4; --bs-btn-active-border-color:#42bdb4; --bs-btn-focus-shadow-rgb:85,213,204; --bs-btn-disabled-color:var(--bs-btn-color); --bs-btn-disabled-bg:var(--bs-btn-bg); --bs-btn-disabled-border-color:var(--bs-btn-border-color); }

/* Secondario = teal contorno, si riempie di teal al passaggio. Accompagna il primario o sta da solo
   dove l'azione non è distruttiva. Globale, non solo nei drawer. */
.btn-outline-primary{ --bs-btn-color:#55d5cc; --bs-btn-border-color:#55d5cc; --bs-btn-hover-bg:#55d5cc; --bs-btn-hover-border-color:#55d5cc; --bs-btn-hover-color:#000; --bs-btn-active-bg:#55d5cc; --bs-btn-active-border-color:#55d5cc; --bs-btn-active-color:#000; --bs-btn-focus-shadow-rgb:85,213,204; --bs-btn-disabled-color:var(--bs-btn-color); --bs-btn-disabled-border-color:var(--bs-btn-border-color); }

/* ── Picker catalogo (modal "Aggiungi dal catalogo"): lista scura + scroll nuvolai ── */
.nv-picker-results .list-group-item{ background:#000000; color:#e8e8e8; border-color:#1e1e1e; font-size:0.8rem; padding:0.45rem 0.7rem; }
.nv-picker-results .list-group-item .text-secondary{ color:#8a8a8a !important; }
.nv-picker-results .list-group-item:hover,
.nv-picker-results .list-group-item:focus{ background:#141414; color:#55d5cc; }

/* ── Righe documento (docRigheEditor): sfondo sempre nero, header come label input, switch Incl. ── */
#doc-righe-card{ background:#000; }
#doc-righe-card h6{ color:#9a9a9a; font-weight:600; }
#doc-righe{ --bs-table-bg:transparent; --bs-table-color:#e8e8e8; background:#000; color:#e8e8e8; margin-bottom:0; }
#doc-righe thead th{ background:#000; color:#ffffff; font-weight:700; border-color:#2a2a2a; }
#doc-righe tbody td{ background:#000; border-color:#1a1a1a; vertical-align:middle; }
#doc-righe tbody tr{ background:#000; }
#doc-righe .r-imp{ color:#f0f0f0; }
#doc-righe .form-check-input{ background-color:#1a1a1a; border-color:var(--nv-campo-bordo, #6b6b6b); }   /* era #555: 2,4:1 sul fondo dello switch, sotto il 3:1 dei controlli (U-11) */
#doc-righe .form-check-input:checked{ background-color:#55d5cc; border-color:#55d5cc; }
/* ── Intestazione griglia righe (stile richiesto) + colonna toggle e child descrizione ── */
.nv-doc-table thead tr{ font-weight:bold; height:30px; line-height:30px; border-bottom:2px solid #000000; }
/* RIORDINO DELLE RIGHE (30/09/2026): la maniglia ⋮⋮ a sinistra, il componente nvOrdinabile del kit (lo stesso dei
   Paragrafi delle Impostazioni offerte): si prende col mouse o si sposta da tastiera con le frecce. */
.nv-doc-table .nv-doc-drag-col{ width:26px; padding-left:4px; padding-right:0; text-align:center; }
.nv-maniglia{ cursor:grab; color:var(--nv-text-muted); display:inline-block; padding:4px 3px; border-radius:4px; line-height:1; }
.nv-maniglia:hover{ color:var(--nv-accent); }
.nv-maniglia:focus-visible{ outline:1px solid var(--nv-accent); outline-offset:1px; color:var(--nv-accent); }
.nv-doc-table tr.is-trascinata{ opacity:.45; }
/* LA GRIGLIA DELLE RIGHE DEI DOCUMENTI (revisione 2, 29/09/2026; dal 30/09/2026 in offerte, fatture, DDT, ordini e
   acquisti). Ogni colonna ha la sua larghezza e solo la Descrizione si restringe: da 1280 px in su nulla si sovrappone
   (a 1280 la tabella è larga 991 px e alla Descrizione ne restano ~160); sotto va a capo (media query più giù).
   Imponibile: «9.999.999,99» per intero (89 px di testo); Prezzo: «999.999,99» si legge mentre si scrive (70 px
   + 24 di padding); Incl.: lo switch del kit (52 px) più il padding della cella. */
.nv-doc-table.is-compatta{ table-layout:fixed; width:100%; }
.nv-doc-table.is-compatta .nv-doc-col-qta{ width:80px; }
.nv-doc-table.is-compatta .nv-doc-col-pu{ width:124px; }
.nv-doc-table.is-compatta .nv-doc-col-sc{ width:80px; }
.nv-doc-table.is-compatta .nv-doc-col-iva{ width:84px; }
.nv-doc-table.is-compatta .nv-doc-col-incl{ width:72px; }
.nv-doc-table.is-compatta .nv-doc-col-imp{ width:124px; }
.nv-doc-table.is-compatta .nv-doc-col-cm{ width:170px; }
.nv-doc-table.is-compatta .nv-doc-col-azioni{ width:70px; }       /* azioni: Descrizione ed Elimina (OFFERTE-REVISIONE-3): 2 × 22 px + 14 di spazio + 12 di margine */
.nv-doc-table.is-compatta.is-costi .nv-doc-col-azioni{ width:108px; } /* l'offerta coi costi esterni: + «Aggiungi costo esterno» */
/* gli importi in cifre tabellari, allineati a destra e mai a capo: i totali restano incolonnati */
.nv-doc-table.is-compatta td.r-imp{ white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right; }
.nv-doc-table.is-compatta .r-num-cell .form-control{ font-variant-numeric:tabular-nums; }
/* lo switch «Incl.» dentro la sua cella: senza il rientro di Bootstrap (padding e margine negativo di 3,75rem) che lo
   spingeva sull'Imponibile */
.nv-doc-table .r-incl-wrap .form-switch{ padding-left:0; min-height:0; }
.nv-doc-table .r-incl-wrap .form-switch .form-check-input{ margin-left:0; float:none; }
/* «Escl.» dell'offerta (30/09/2026): la riga esclusa resta nel form, attenuata con la sua sottoriga — tranne lo switch
   che la riaccende e il cestino —; il titolo di gruppo tiene la cella vuota, per restare in colonna. */
.nv-doc-table tr.is-esclusa > td:not(.r-escl-cell):not(.r-azioni-cell):not(.nv-doc-drag-col){ opacity:.45; }
.nv-doc-table tr.doc-riga-child.is-esclusa > td{ opacity:.45; }
.nv-doc-table tr.doc-riga.is-gruppo .r-escl-cell .r-incl-wrap{ visibility:hidden; }
.nv-doc-table .r-escl-cell{ text-align:center; }
/* (0132) EXTRA OPPORTUNITIES: lo switch accanto a «Escl.»; la riga extra resta piena ma il suo importo è in corsivo e grigio:
   è fuori dai totali, come dice il tooltip, e va nella tabella «Opportunità extra» del documento */
.nv-doc-table .r-extra-cell{ text-align:center; }
.nv-doc-table tr.doc-riga.is-gruppo .r-extra-cell .r-incl-wrap{ visibility:hidden; }
.nv-doc-table tr.doc-riga.is-esclusa > td.r-extra-cell{ opacity:.45; }
.nv-doc-table tr.doc-riga.is-extra > td.r-imp{ font-style:italic; color:var(--bs-secondary-color); }
.nv-doc-table.is-compatta td.r-azioni-cell{ padding-left:6px; padding-right:6px; white-space:nowrap; }
/* GANTT DELL'OFFERTA (blocco 10): nomi a sinistra, asse a settimane che scorre in orizzontale, barre trascinabili
   (inizio) e con la maniglia a destra (durata). Le misure in pixel per giorno le mette il JS (OFF_GANTT_GG). */
.nv-gantt-griglia{ display:flex; border:1px solid var(--nv-grid-border); border-radius:var(--bs-border-radius); overflow:hidden; }
.nv-gantt-nomi{ flex:0 0 32%; max-width:340px; border-right:1px solid var(--nv-grid-border); }
.nv-gantt-scorri{ flex:1 1 auto; overflow-x:auto; }
.nv-gantt-area{ position:relative; background-image:repeating-linear-gradient(to right, transparent 0, transparent 129px, var(--nv-grid-border) 129px, var(--nv-grid-border) 130px); }
.nv-gantt-testa{ height:34px; line-height:34px; font-size:.75rem; font-weight:600; color:var(--nv-text-label); padding:0 .6rem; border-bottom:1px solid var(--nv-grid-border); white-space:nowrap; }
.nv-gantt-assi{ display:flex; padding:0; }
.nv-gantt-sett{ flex:0 0 auto; text-align:center; font-weight:600; }
.nv-gantt-gr{ height:28px; line-height:28px; font-size:.78rem; font-weight:600; color:var(--nv-text-value); padding:0 .6rem; background:rgba(127,127,127,.08); border-bottom:1px solid var(--nv-grid-border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nv-gantt-nome, .nv-gantt-fila{ height:34px; border-bottom:1px solid var(--nv-grid-border); }
.nv-gantt-nome{ line-height:34px; font-size:.82rem; padding:0 .6rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--nv-text-value); }
/* l'effort della riga accanto al nome (30/09/2026: nelle righe non c'è più la colonna, si cambia dal Gantt) */
.nv-gantt-eff{ color:var(--nv-text-muted); font-variant-numeric:tabular-nums; }
.nv-gantt-fila{ position:relative; }
.nv-gantt-barra{ position:absolute; top:7px; height:20px; background:var(--nv-accent); border-radius:4px; cursor:grab; touch-action:none; display:flex; align-items:center; }
.nv-gantt-barra.is-attiva{ opacity:.8; cursor:grabbing; }
.nv-gantt-dur{ font-size:.68rem; color:#000; padding-left:6px; white-space:nowrap; overflow:hidden; pointer-events:none; }
.nv-gantt-maniglia{ position:absolute; right:0; top:0; bottom:0; width:8px; cursor:ew-resize; border-radius:0 4px 4px 0; background:rgba(0,0,0,.18); }
/* LA RIGA DELL'OFFERTA SOTTO I 1280 px (29/09/2026): niente scroll orizzontale. La tabella diventa un elenco di
   righe a capo: la descrizione su una riga intera, sotto i campi numerici con la loro etichetta (data-etichetta),
   in fila finché ci stanno e poi a capo; le azioni in fondo. L'intestazione della tabella non serve più. */
@media (max-width: 1279.98px){
  .nv-doc-table.is-compatta{ table-layout:auto; }
  .nv-doc-table.is-compatta thead{ display:none; }
  .nv-doc-table.is-compatta, .nv-doc-table.is-compatta tbody{ display:block; width:100%; }
  .nv-doc-table.is-compatta tr.doc-riga{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 10px; padding:10px 0; border-bottom:1px solid var(--nv-grid-border); }
  .nv-doc-table.is-compatta tr.doc-riga > td{ display:block; border:0; padding:0; }
  .nv-doc-table.is-compatta tr.doc-riga > td.d-none{ display:none; }
  .nv-doc-table.is-compatta tr.doc-riga > td.r-descr-cell{ flex:1 1 calc(100% - 34px); }
  /* larghezze fisse: i campi stanno in fila e vanno a capo quando la riga finisce */
  .nv-doc-table.is-compatta tr.doc-riga > td[data-etichetta]{ flex:0 0 88px; width:88px; }
  .nv-doc-table.is-compatta tr.doc-riga > td.r-eff-cell{ flex-basis:150px; width:150px; }
  .nv-doc-table.is-compatta tr.doc-riga > td[data-etichetta="Incl."], .nv-doc-table.is-compatta tr.doc-riga > td[data-etichetta="Escl."]{ flex-basis:60px; width:60px; }
  .nv-doc-table.is-compatta tr.doc-riga > td[data-etichetta]::before{ content:attr(data-etichetta); display:block; font-size:.72rem; color:var(--nv-text-muted); margin:0 0 2px 2px; text-align:left; }
  .nv-doc-table.is-compatta tr.doc-riga > td.r-imp{ flex-basis:124px; width:124px; padding-bottom:6px; }
  .nv-doc-table.is-compatta tr.doc-riga > td[data-etichetta="Prezzo €"]{ flex-basis:112px; width:112px; }
  .nv-doc-table.is-compatta tr.doc-riga > td.r-cm-cell{ flex-basis:180px; width:180px; }
  .nv-doc-table.is-compatta tr.doc-riga > td.r-azioni-cell{ margin-left:auto; padding-bottom:4px; }
  .nv-doc-table.is-compatta tr.doc-riga.is-gruppo > td.r-descr-cell{ flex-basis:100%; }
  .nv-doc-table.is-compatta tr.doc-riga-child{ display:block; }
  .nv-doc-table.is-compatta tr.doc-riga-child > td{ display:block; border:0; padding:6px 4px 10px; }   /* 4 px: i gutter delle .row dentro */
}

/* Effort della riga (blocco 10): numero + unità nella stessa cella; la descrizione cede lo spazio. Le righe di
   prodotto (hanno un id del catalogo prodotti) non hanno effort. */
.nv-doc-table.is-compatta .nv-doc-col-eff{ width:164px; text-align:center; }   /* l'intestazione copre numero e unità */
.r-eff-box{ display:flex; gap:4px; }
.r-eff-box .r-effort{ flex:1 1 auto; min-width:0; padding-left:.5rem; padding-right:.5rem; }
/* le select della riga hanno il padding degli input del kit (.75rem): il testo non tocca il bordo */
.r-eff-box .r-effort-unita{ flex:0 0 82px; padding-left:.75rem; padding-right:.5rem; }
.nv-doc-table.is-compatta select.r-iva{ padding-left:.75rem; padding-right:.75rem; }
/* Titolo di gruppo: due campi a tutta larghezza, ciascuno con la sua etichetta piccola. */
.nv-doc-gruppo-et{ font-size:.75rem; color:var(--nv-text-muted); margin:0 0 .2rem .1rem; }
.doc-riga.is-gruppo .r-descr{ font-weight:600; }
.doc-riga.is-gruppo .r-descr-gruppo{ margin-bottom:.15rem; }
/* La natura dell'esenzione (30/09/2026): la scelta nella modal, con i radio interi (il pallino non si taglia contro il
   bordo dello scorrimento) e il padding del corpo delle altre modal del kit; la natura scelta sta nel tooltip dell'IVA. */
.nv-natura-scelta{ max-height:60vh; overflow:auto; padding:.25rem .5rem .25rem .25rem; }
.nv-natura-scelta .form-check{ padding-left:1.9em; margin:0; min-height:1.5rem; display:flex; align-items:center; }
.nv-natura-scelta .form-check-input{ margin:0 0 0 -1.9em; flex:0 0 auto; }
.nv-natura-scelta .form-check-label{ padding-left:.15rem; }
.nv-natura-gruppo + .nv-natura-gruppo{ margin-top:1rem; }
.nv-natura-aliquote{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.swal2-html-container .nv-natura-aliquote .btn{ width:auto; min-width:0; flex:0 0 auto; padding:.15rem .75rem; font-size:.8rem; }
/* SOTTORIGA DEL COSTO ESTERNO (revisione 2): sei celle in griglia, ognuna «etichetta su una riga + campo ad
   altezza di controllo». Etichette alla stessa altezza, campi sulla stessa linea di base, azioni centrate. */
/* colonne indipendenti dal contenuto (minmax(0,…) e azioni a larghezza fissa): le sottorighe di una stessa riga hanno
   le colonne nelle stesse posizioni anche quando un'etichetta porta il badge o una riga non ha l'allegato */
.r-costo{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) 96px 150px 96px 72px 56px; gap:.5rem .75rem; align-items:start; margin-bottom:.5rem; }
.r-costo .rc-et{ height:1.15rem; line-height:1.15rem; font-size:.75rem; color:var(--nv-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:.2rem; }
/* il badge «offerta fornitore» sta nella riga dell'etichetta, alla sua altezza: né sotto né dietro il campo */
.r-costo .rc-et{ display:flex; align-items:center; gap:.4rem; }
.r-costo .rc-et .mv-badge{ font-size:.62rem; line-height:1.1rem; height:1.1rem; padding:0 .35rem; flex:0 0 auto; }
.r-costo .is-num .rc-et{ justify-content:flex-end; }
.r-costo .is-centro .rc-et{ justify-content:center; }
/* ogni campo alla stessa altezza e sullo stesso bordo superiore, anche il Ricarico (un input-group-sm era più basso) */
.r-costo .rc-campo{ height:36px; display:flex; align-items:center; }
.r-costo .rc-campo > .form-control, .r-costo .rc-campo > .input-group{ width:100%; height:36px; }
.r-costo .rc-campo > .input-group > .form-control{ height:36px; font-size:.9rem; padding-top:.375rem; padding-bottom:.375rem; }
.r-costo .rc-campo > .input-group > select.form-control{ padding-left:.6rem; padding-right:.4rem; }
.r-costo .is-num .rc-et{ text-align:right; }
.r-costo .is-num .rc-campo{ justify-content:flex-end; font-variant-numeric:tabular-nums; }
.r-costo .is-centro .rc-et{ text-align:center; }
.r-costo .is-centro .rc-campo{ justify-content:center; }
.r-costo .is-azioni .rc-campo{ justify-content:flex-end; }
.r-costo .rc-ric-tipo{ flex:0 0 3.2rem; }
@media (max-width: 991.98px){ .r-costo{ grid-template-columns:1fr 1fr; } .r-costo .is-azioni{ grid-column:1 / -1; } }
/* Modal «Aggiungi un costo esterno»: righe dell'offerta del fornitore come elenco di scelta. */
.nv-costo-origine{ padding:.35rem .1rem 0; }
.nv-costo-righe-titolo{ font-size:.8rem; color:var(--nv-text-muted); margin:.25rem 0 .4rem; }
.nv-costo-riga{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.45rem 0; border-bottom:1px solid var(--nv-grid-border); }
.nv-costo-riga .form-check{ margin:0; }
/* Paragrafi personalizzati delle offerte (Impostazioni): la maniglia per trascinare e la riga in volo. */
/* GANTT DELL'OFFERTA (30/09/2026): il testo e lo switch «Includi» sulla stessa riga, centrati in verticale; l'etichetta
   del generatore del DSL sta accanto all'interruttore invece che sopra. */
.nv-gantt-includi{ display:flex; align-items:center; gap:.35rem; }
.nv-gantt-includi > label{ margin:0 !important; white-space:nowrap; }
.nv-gantt-includi .form-check{ margin:0; padding-top:0; padding-bottom:0; min-height:0; display:flex; align-items:center; flex-shrink:0; }
/* lo switch standard del kit, come «Incl.» delle righe e «In offerta» dei costi esterni: 52 × 28 */
.nv-gantt-includi .form-switch .form-check-input.nv-switch-campo{ width:3.25rem; max-width:none; height:1.75rem; margin:0; }
/* PIANO DEI PAGAMENTI (30/09/2026): la data si mostra solo per «a una data» e «mensile» (anche il campo del
   calendario, che flatpickr mette accanto a quello vero); il suffisso «giorni»/«mesi» ha i colori del campo. */
#tr-piano td.tr-senza-data .tr-data, #tr-piano td.tr-senza-data .nv-date-input{ display:none !important; }
#tr-piano .input-group-text{ background:var(--nv-campo-fondo); color:var(--nv-text-muted); border-color:var(--nv-campo-bordo); font-size:.8rem; }
#tr-piano .tr-giorni-wrap + .tr-mesi-wrap, #tr-piano .nv-date-input + .tr-giorni-wrap{ margin-top:0; }
/* OFFERTE ▸ IMPOSTAZIONI ▸ COVER DEL DOCUMENTO (30/09/2026): due card di scelta (lo stile delle card del kit: bordo
   sottile, raggio 8, accento sulla scelta), ognuna con l'anteprima vera della copertina — un A4 di 794 × 1123 px del
   template del documento, rimpicciolito a 0,2 in un iframe che non si tocca col mouse. */
.os-cover-scelte{ display:flex; flex-wrap:wrap; gap:16px; }
.os-cover-card{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:192px; padding:15px; text-align:left;
  background:var(--nv-campo-fondo); color:var(--nv-campo-testo); border:1px solid var(--nv-campo-bordo); border-radius:8px; cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease; }
.os-cover-card:hover{ border-color:var(--nv-text-muted); }
.os-cover-card:focus-visible{ outline:0; box-shadow:0 0 0 3px var(--nv-campo-anello, rgba(85,213,204,.25)); }
.os-cover-card.is-scelta{ border-color:var(--nv-accent); box-shadow:0 0 0 1px var(--nv-accent); }
.os-cover-card[disabled]{ cursor:default; opacity:.7; }
.os-cover-anteprima{ display:block; width:160px; height:225px; overflow:hidden; border-radius:3px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.35); }
.os-cover-iframe{ width:794px; height:1123px; border:0; transform:scale(.2015); transform-origin:0 0; pointer-events:none; }
.os-cover-nome{ font-weight:600; margin-top:4px; }
.os-cover-sotto{ font-size:.78rem; color:var(--nv-text-muted); line-height:1.3; }
.os-cover-card.is-scelta .os-cover-nome{ color:var(--nv-accent); }
/* La maniglia è .nv-maniglia (il componente nvOrdinabile, 30/09/2026): qui resta solo la riga in volo. */
.os-par-riga.is-trascinata{ opacity:.45; }
/* Nella nuova offerta: un paragrafo personalizzato, col suo titolo sopra l'editor. */
.off-paragrafo + .off-paragrafo{ margin-top:.25rem; }
/* COLONNA DESTRA DEL DOCUMENTO (revisione Offerte 2): Skill, Totali e Anteprima sugli stessi margini — il
   contenuto della skill card sta a 16 px dai bordi, e lì si allineano il blocco dei totali (senza la barra
   che lo faceva rientrare) e il gruppo dell'Anteprima, dove siede anche l'assistente ✦ di questa pagina. */
/* Il box Skill (.servizio-label) finisce a `30px + .4rem` dal bordo interno della card: Totali e Anteprima si
   fermano allo stesso bordo destro, e partono dallo stesso sinistro (16 px). Gli importi che non ci stanno accanto
   all'etichetta vanno a capo, sempre allineati a destra. L'assistente ✦ resta quello di tutte le pagine
   (#side-actions, a metà altezza sul bordo destro): qui non ha una posizione sua. */
.form-side-col.is-documento .matrix-card.nv-side-totali{ border-left:0; padding-left:16px; padding-right:calc(16px + 30px + .4rem); }
.form-side-col.is-documento .nv-side-totali .matrixTitle{ margin-bottom:.6rem; }
.form-side-col.is-documento .nv-side-totali .d-flex{ flex-direction:column; align-items:stretch !important; margin-bottom:.35rem; }
.form-side-col.is-documento .nv-side-totali .d-flex > span:last-child{ text-align:right; white-space:nowrap; }
.form-side-col.is-documento .nv-side-azioni{ margin:0 calc(16px + 30px + .4rem) 0 16px; }
.form-side-col.is-documento .nv-side-azioni .btn{ width:100%; white-space:nowrap; padding-left:.4rem; padding-right:.4rem; overflow:hidden; text-overflow:ellipsis; }
/* colonna destra stretta (fino a 1399 px): il bottone tiene la parola e lascia l'icona */
@media (max-width: 1399.98px){ .form-side-col.is-documento .nv-side-azioni .btn i{ display:none; } }

/* LE TENDINE NATIVE (revisione Offerte 2, 29/09/2026). Il menu di una <select> lo disegna il sistema: se
   nessuno gli dice il tema, lo apre BIANCO, e le option ereditano il testo chiaro del campo — bianco su
   bianco. Fino a qui era vestita solo `.form-select option`; le select `form-control` scritte a mano (righe
   dei documenti, costi esterni, prenotazioni, catalogo, crm…) no. Ora vale per ogni select: il tema del
   menu (`color-scheme`) e i colori delle option dai token del campo; nuvola_light.css rimette il chiaro. */
select{ color-scheme:dark; }
select option, select optgroup{ background-color:var(--nv-campo-fondo); color:var(--nv-campo-testo); }
select option:checked{ background-color:var(--nv-accent); color:#000; }
/* LA TENDINA APERTA SEGUE IL TEMA (30/09/2026). Con `color-scheme` il menu del sistema prende il fondo giusto, ma
   l'opzione sotto il mouse resta evidenziata con l'azzurro del sistema operativo. Dove il browser lo permette
   (select personalizzabili, `appearance: base-select`) il menu lo disegna la pagina: fondo e testo dai token del
   campo, l'opzione sotto il mouse o col fuoco nel tono dell'accento, la scelta in accento. Il campo chiuso resta
   com'era: stessa scatola, nessuna freccia in più (le .form-select hanno già la loro). Solo le select singole:
   quelle multiple e le liste (size) restano del sistema; le select2 non sono toccate (la select vera è nascosta). */
@supports (appearance: base-select){
  select.form-control:not([multiple]):not([size]), select.form-select:not([multiple]):not([size]),
  select.form-control:not([multiple]):not([size])::picker(select), select.form-select:not([multiple]):not([size])::picker(select){ appearance:base-select; }
  select.form-control:not([multiple]):not([size]), select.form-select:not([multiple]):not([size]){ display:block; }
  select.form-control::picker-icon, select.form-select::picker-icon{ display:none; }
  /* come la select di sistema: una riga sola, tagliata, anche in una cella stretta */
  select.form-control:not([multiple]):not([size]), select.form-select:not([multiple]):not([size]){ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  select.form-control::picker(select), select.form-select::picker(select){
    background:var(--nv-campo-fondo); color:var(--nv-campo-testo); border:1px solid var(--nv-grid-border);
    border-radius:var(--bs-border-radius); padding:4px 0; box-shadow:0 8px 24px rgba(0,0,0,.35); max-height:min(360px, 60vh); }
  select.form-control option, select.form-select option{ padding:.35rem .75rem; min-height:0; font-size:.9rem; background:transparent; color:inherit; }
  select.form-control option::checkmark, select.form-select option::checkmark{ display:none; }
  select.form-control option:hover, select.form-control option:focus-visible,
  select.form-select option:hover, select.form-select option:focus-visible{ background:color-mix(in srgb, var(--nv-accent) 22%, transparent); color:var(--nv-campo-testo); outline:0; }
  select.form-control option:checked, select.form-select option:checked{ background:var(--nv-accent); color:#000; }
  select.form-control option:disabled, select.form-select option:disabled{ opacity:.5; }
}
#doc-righe .doc-riga-child td{ background:#000; border-color:#1a1a1a; padding-top:2px; padding-bottom:8px; }
#doc-righe .r-descr-full{ background:#0c0c0c; color:#e8e8e8; border-color:#555; }

/* ── Accordion nuvolai (form documenti): fondo nero, testo/chevron teal in apertura ── */
.nv-accordion{
  --bs-accordion-bg:#000; --bs-accordion-color:#e8e8e8; --bs-accordion-border-color:#2a2a2a;
  --bs-accordion-btn-color:#ffffff; --bs-accordion-btn-bg:#000;
  --bs-accordion-active-bg:#000; --bs-accordion-active-color:#55d5cc;
  --bs-accordion-btn-focus-box-shadow:none;
  --bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2355d5cc'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2355d5cc'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}
.nv-accordion .accordion-item{ background:#000; border:0; border-bottom:1px solid #55d5cc; border-radius:0; margin-bottom:14px; }
.nv-accordion .accordion-button{ font-weight:600; padding-left:0; padding-right:0; }
.nv-accordion .accordion-button:not(.collapsed){ box-shadow:none; }
.nv-accordion .accordion-button:focus{ box-shadow:none; border-color:#2a2a2a; }
.nv-acc-count{ color:#55d5cc; font-weight:600; font-size:0.85rem; margin-left:auto; margin-right:12px; }
/* L'HEADER DELL'ACCORDION È UNA GRIGLIA A TRE COLONNE (29/09/2026): titolo a sinistra, contatore al centro,
   chevron a destra. Con due `margin-left:auto` (contatore e chevron di Bootstrap) il contatore stava a metà dello
   spazio LIBERO, quindi più a destra sotto un titolo lungo: «8 righe» e «3 tranche» non erano alla stessa x.
   Con 1fr auto 1fr la colonna centrale è centrata sull'header qualunque sia il titolo. */
.nv-accordion .accordion-button{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:12px; text-align:left; }
.nv-accordion .accordion-button::after{ grid-column:3; justify-self:end; margin-left:0; }
.nv-accordion .accordion-button > .nv-acc-count{ grid-column:2; margin:0; text-align:center; white-space:nowrap; }

/* Accordion a filo a sinistra + gutter a destra per la scrollbar custom (che non deve sovrapporsi al bordo). */
#nuvolai-body .card-body.nv-doc-form{ padding-left:0; padding-right:16px; }
.nv-accordion .accordion-body{ padding-left:0; padding-right:0; }
/* Intestazioni griglia righe: font piccolo come richiesto */
#doc-righe thead th{ font-size:0.8em; }
/* Switch "Incl." dentro la griglia: annulla il margine negativo globale del .form-check che lo
   spostava sopra la colonna IVA; centrato nella propria cella. */
#doc-righe .form-check{ padding-left:0 !important; margin:0 !important; display:inline-flex; align-items:center; justify-content:center; min-height:auto; }
#doc-righe .form-check .form-check-input{ float:none; margin:0; }

/* ── Drop area PDF (fattura di acquisto ricevuta): look dropzone nuvolai, solo PDF ── */
.nv-pdfdrop{ display:block; background:#000; border:1.5px dashed #55d5cc; border-radius:8px; padding:18px 14px; text-align:center; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.nv-pdfdrop:hover{ background:#0c0c0c; }
.nv-pdfdrop.is-dragover{ background:#0d1f1e; border-color:#7ee6df; }
.nv-pdfdrop-ico{ font-size:34px; color:#55d5cc; --fa-primary-color:#55d5cc; --fa-secondary-color:#2a6b67; display:block; margin-bottom:8px; }
.nv-pdfdrop-label{ display:block; color:#e8e8e8; font-size:0.85rem; }
.nv-pdfdrop-file{ display:block; color:#8a8a8a; font-size:0.78rem; margin-top:6px; }
.nv-pdfdrop-file.has-file{ color:#57d555; }

/* ── Dashboard KPI: card glowing con mini-grafico + pannelli grafici ── */
.nv-kpi{ position:relative; height:100%; background:linear-gradient(160deg,#000000 0%,#000 100%); border:1px solid #000000; border-radius:10px; padding:12px 14px 6px; overflow:hidden; }
.nv-kpi:hover{ border-color:#2a4a48; box-shadow:inset 0 0 34px rgba(85,213,204,.08), 0 0 14px rgba(85,213,204,.10); }
.nv-kpi-label{ color:#8a8a8a; font-size:0.72rem; text-transform:uppercase; letter-spacing:.5px; }
.nv-kpi-val{ font-size:1.3rem; font-weight:700; line-height:1.2; margin-top:2px; }
.nv-kpi-spark{ margin-top:2px; min-height:48px; }
.nv-panel{ background:linear-gradient(160deg,#000000 0%,#000 100%); border:1px solid #000000; border-radius:10px; padding:14px 16px; height:100%; }
.nv-panel h6{ color:#cfcfcf; }
.nv-dash-date{ max-width:170px; }

/* Dashboard: area contenuto con scroll interno + ombra sopra il footer (stesso meccanismo di .crm-detail).
   Altezza impostata via JS fino al footer fisso. */
.nv-dash-scroll-wrap{ position:relative; display:flex; flex-direction:column; margin-bottom:0; }
.nv-dash-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding-right:.5rem; padding-bottom:24px; }
/* FASE 2: l'ombra del box dashboard è la canonica .nv-fade-box (design-system, in fondo). */

/* ── Dashboard ▸ NL2STAT© (barra prompt + badge query salvate) ── */
/* Placeholder uniforme agli altri input del form New (#999999): il .form-control fuori da .card-body
   erediterebbe il grigio scuro di default di Bootstrap, illeggibile sul fondo nero del pannello. */
#nl-input::placeholder { color: #9a9a9a; opacity: 1; }
/* Badge query salvate: il testo è un <a> → erediterebbe body a (#5a5a5a scuro). Forza bianco + sottile. */
#nl-salvate .tag-chip,
#nl-salvate .tag-chip a { color: #ffffff !important; font-weight: 200; }

/* Progress bar generazione demo (Developer ▸ Demo): numero "bifronte" centrato — bianco sul fondo nero,
   nero sopra la fill verde. La % runtime arriva via --nv-prog (list.php) + width sulla .progress-bar. */
.nv-demo-prog .progress{ position:relative; background:#000; border:1px solid #57d555; border-radius:4px; overflow:hidden; }
.nv-demo-prog .progress-bar{ background-color:#57d555; }
.nv-demo-prog .nv-prog-num{ position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:600; line-height:1; white-space:nowrap; pointer-events:none; }
.nv-demo-prog .nv-prog-num--base{ color:#fff; }
.nv-demo-prog .nv-prog-num--over{ color:#000; clip-path:inset(0 calc(100% - var(--nv-prog, 0%)) 0 0); }

/* ── HR ▸ Occupazione: timeline mensile del carico + semaforo. Altezza/colore barra = valori
   runtime inline (deroga per valori calcolati); qui solo la struttura statica. ── */
.nv-occ-timeline{ display:flex; align-items:flex-end; gap:8px; height:150px; padding-top:6px; }
.nv-occ-col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.nv-occ-bar-track{ width:100%; flex:1 1 auto; display:flex; align-items:flex-end; justify-content:center; }
.nv-occ-bar{ width:62%; max-width:26px; min-height:3px; border-radius:4px 4px 0 0; }
.nv-occ-perc{ font-size:0.68rem; font-weight:600; color:#e8e8e8; margin-bottom:3px; }
.nv-occ-month{ font-size:0.62rem; color:#8a8f98; margin-top:5px; text-transform:uppercase; white-space:nowrap; }
.nv-occ-col.is-current .nv-occ-month{ color:#55d5cc; font-weight:700; }
.nv-occ-col.is-current .nv-occ-bar{ box-shadow:0 0 0 2px rgba(85,213,204,.35); }
.nv-occ-current{ display:flex; align-items:center; gap:16px; padding:12px 16px; border:1px solid #444; border-radius:6px; margin-bottom:18px; }
.nv-occ-current-perc{ font-size:1.7rem; font-weight:700; line-height:1; }
.nv-occ-current-meta{ display:flex; flex-direction:column; gap:2px; }
.nv-occ-dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }
/* Mini-barra orizzontale della panoramica aziendale (una per dipendente). */
.nv-occ-mini{ position:relative; height:14px; background:#141414; border:1px solid #2a2a2a; border-radius:7px; overflow:hidden; min-width:80px; }
.nv-occ-mini-bar{ position:absolute; left:0; top:0; bottom:0; }

/* ============================================================================
   DESIGN SYSTEM — FASE 1 (congelamento UI Nuvolai). Layer di TOKEN + classi
   canoniche. Vedi RECON-UI.md (8 elementi) e la skill .claude/skills/design-system.
   Regola: i valori QUI sono gli stessi già usati sparsi nel file (assorbimento):
   cambia la FONTE, non l'aspetto — salvo le tre scelte esplicite D1/D2/D3.
   ============================================================================ */
:root{
  /* --- testi (#7): scala grigi razionalizzata --- */
  --nv-text-title:#ffffff;
  --nv-text-value:#e8e8e8;
  --nv-text-label:#ababab;
  --nv-text-muted:#8a8a8a;
  --nv-text-total:#ffffff;   /* totali sempre leggibili su nero */
  --nv-text-link:#8a8a8a;   /* NOTTE-STILI-UX: era #5a5a5a (3,04:1) */
  /* --- semantici --- */
  --nv-accent:#55d5cc;
  --nv-danger:#db3131;
  --nv-success:#57d555;
  --nv-warning:#f5a623;
  /* STATO FERIE (06/10/2026, HR-TUNING-2): il badge «F» della Lista presenze e la sua voce di legenda. 10,2:1 sul nero. */
  --nv-stato-ferie:#eba837;
  /* il FONDO di un avviso pieno (badge .is-avviso) e il testo che ci sta sopra: uguali nei due
     temi, perché un giallo pieno si legge su qualunque pagina — 9,3:1 col testo #0E1116. */
  /* ACCENT-STRONG (24/09/2026): le tre serie dei grafici di Tesoreria — saldi, uscite, entrate —
     in versione satura e accesa, come nel riferimento. Solo per le LINEE dei grafici: per testi e
     badge restano --nv-cat-2, --nv-danger, --nv-success. */
  --nv-strong-blu:#2f8cff;
  --nv-strong-rosso:#ff3347;
  --nv-strong-verde:#1fe36b;
  --nv-avviso-fondo:#f5a623;
  --nv-avviso-testo:#0E1116;
  /* --- scrollbar (#6): default REALE = grigio, hover teal (D3) --- */
  --nv-sb-track:#000000;
  --nv-sb-thumb:#3c3c3c;
  --nv-sb-thumb-hover:#55d5cc;
  --nv-sb-w:4px;
  --nv-sb-h:8px;
  /* --- fade sopra il footer (#5) --- */
  --nv-fade-h:70px;
  --nv-fade-bottom:45px;
  /* --- matrix di dati (#2) --- */
  --nv-money-pos:#57d555;
  --nv-money-neg:#ef5350;   /* NOTTE-STILI-UX: un importo negativo è TESTO: #db3131 dava 4,19:1 su #0c0c0c */
  --nv-money-neutral:#e8e8e8;
  --nv-grid-border:#2a2a2a;
  --nv-grid-header:#0c0c0c;
  /* --- cursore manina (#8): glifo unico riusato da CSS e (via JS) whitelist --- */
  --nv-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' width='28' height='28'%3E%3Cpath fill='%2355d5cc' d='M118.5 392.9C123.5 399.8 151.1 437.8 201.3 507.2C225.4 540.4 263.9 560.1 304.9 560.1L439.9 560.1C488.5 560.1 527.9 520.7 527.9 472.1L527.9 312.1L455.9 312.1L455.9 280.1L375.9 280.1L375.9 256.1L295.9 256.1L295.9 80.1L223.9 80.1L223.9 393.7C221.7 395.9 211.1 406.5 208.9 408.7C204.3 402.4 178.2 366.3 170.2 355.4L118.5 392.9zM304 368L320 368L320 496L304 496L304 368zM368 368L384 368L384 496L368 496L368 368zM432 368L448 368L448 496L432 496L432 368z'/%3E%3Cpath fill='%2355d5cc' d='M216 64L208 64L208 380C207 378.6 197.2 365 178.6 339.4L173.9 332.9L167.4 337.6L102.6 384.6L96.1 389.3L100.8 395.8C109.7 408.1 138.9 448.3 188.3 516.5C215.4 553.9 258.7 576 304.9 576L439.9 576C497.3 576 543.9 529.4 543.9 472L543.9 296L471.9 296L471.9 264L391.9 264L391.9 240L311.9 240L311.9 64L215.9 64zM224 390.3L224 80L296 80L296 256L376 256L376 280L456 280L456 312L528 312L528 472C528 520.6 488.6 560 440 560L305 560C264 560 225.4 540.3 201.4 507.1C151.1 437.8 123.5 399.7 118.6 392.8L170.4 355.2C201.5 398.1 207.8 406.8 209.1 408.5C213.6 404 217.8 399.8 221.8 395.8L224.1 393.5L224.1 390.2zM320 376L320 368L304 368L304 496L320 496L320 376zM384 376L384 368L368 368L368 496L384 496L384 376zM448 376L448 368L432 368L432 496L448 496L448 376z'/%3E%3C/svg%3E") 6 2, pointer;
}

/* (#7) utility Bootstrap ricalibrate sul tema scuro: i default (#198754, #6c757d)
   erano a bassissimo contrasto su fondo nero → "totali illeggibili" (D2 base). */
.text-success{ color:var(--nv-success)!important; }
.text-secondary{ color:#9a9a9a!important; }
.text-muted{ color:var(--nv-text-muted)!important; }
.text-warning{ color:var(--nv-warning)!important; }

/* (#2) nv-matrix — componente UNICO per le GRIGLIE DI DATI (≠ strip faccette .matrixCell).
   Totali sempre leggibili via --nv-text-total; importi colorati con .is-pos/.is-neg/.is-neutral. */
.nv-matrix{ width:100%; border-collapse:collapse; }
.nv-matrix thead th{ color:var(--nv-text-label); font-weight:600; font-size:.82rem; text-align:left;
  padding:8px 10px; border-bottom:1px solid var(--nv-grid-border); background:var(--nv-grid-header);
  position:sticky; top:0; z-index:2; }
.nv-matrix tbody td{ color:var(--nv-text-value); padding:8px 10px; border-bottom:1px solid var(--nv-grid-border); }
.nv-matrix tbody tr:hover td{ background:#55d5cc14; }
.nv-matrix tbody tr.nv-kit-hover td{ background:#55d5cc14; }   /* il UI kit mostra la riga al passaggio ferma (NOTTE-STILI-UX) */
.nv-matrix tfoot td, .nv-matrix .nv-matrix-total{ color:var(--nv-text-total)!important; font-weight:700; border-top:2px solid #444; }
/* Il piede ha lo stesso padding del corpo (revisione Offerte 2): con 1 px al posto di 10 il totale del piano
   di fatturazione stava 9 px più a destra dei numeri che somma. Vale per ogni totale in fondo a una matrix. */
.nv-matrix tfoot td{ padding:8px 10px; }
.nv-matrix .nv-num{ text-align:right; font-variant-numeric:tabular-nums; }
.nv-matrix .is-pos{ color:var(--nv-money-pos)!important; }
.nv-matrix .is-neg{ color:var(--nv-money-neg)!important; }
.nv-matrix .is-neutral{ color:var(--nv-money-neutral)!important; }
/* (#2) nv-matrix LARGA, dentro .nv-dt-scroll (05/10/2026, Lista presenze mensile): la prima colonna e le colonne dei
   totali restano ferme mentre si scorre in orizzontale. `.nv-col-fissa-dx` porta la sua distanza dal bordo destro in
   --nv-dx (valore calcolato dalla pagina: la somma delle larghezze fisse alla sua destra) e tutte le colonne fisse a
   destra hanno la stessa larghezza --nv-col-fissa-w (76px). Sfondo pieno, sennò il contenuto che scorre si vede sotto. */
.nv-matrix .nv-col-fissa-sx{ position:sticky; left:0; z-index:3; background:var(--nv-page-bg); }
.nv-matrix .nv-col-fissa-dx{ background:var(--nv-page-bg); width:var(--nv-col-fissa-w,76px); min-width:var(--nv-col-fissa-w,76px); max-width:var(--nv-col-fissa-w,76px); padding-left:6px; padding-right:6px; }
/* ferme a destra solo dove resta spazio per i giorni: sotto i 1200 px nove totali fermi lascerebbero due giorni visibili */
@media (min-width:1200px){ .nv-matrix .nv-col-fissa-dx{ position:sticky; right:var(--nv-dx,0); z-index:3; } }
.nv-matrix .nv-col-fissa-dx.is-primo{ box-shadow:inset 1px 0 0 var(--nv-grid-border); }
.nv-matrix thead th.nv-col-fissa-sx, .nv-matrix thead th.nv-col-fissa-dx{ z-index:4; background:var(--nv-grid-header); white-space:normal; }
.nv-matrix tbody tr:hover td.nv-col-fissa-sx, .nv-matrix tbody tr:hover td.nv-col-fissa-dx{ background:linear-gradient(#55d5cc14,#55d5cc14) var(--nv-page-bg); }
/* LA LINEA SOTTO L'INTESTAZIONE E I BORDI DELLE RIGHE, CONTINUI CON LE COLONNE FERME (06/10/2026, HR-TUNING-2). Con
   border-collapse il bordo di una cella `sticky` resta dove la cella sarebbe senza scroll, e la linea teal sta sul <tr>
   (.card-body-table thead tr): le celle ferme, col loro fondo, la coprivano — scorrendo a destra la linea si interrompeva
   sotto Malattia, Festività, Assenze, Anomalie. Qui linea e bordi sono un'ombra INTERNA di ogni cella: si muovono con lei,
   nessuno la copre, e il <tr> non ne disegna una seconda. */
.nv-dt-scroll .nv-matrix thead, .nv-dt-scroll .nv-matrix thead tr{ border-bottom:0; }
.nv-dt-scroll .nv-matrix thead th{ border-bottom:0; box-shadow:inset 0 -2px 0 var(--nv-accent); }
.nv-dt-scroll .nv-matrix tbody td{ border-bottom:0; box-shadow:inset 0 -1px 0 var(--nv-grid-border); }
/* nell'angolo vince la linea teal: la prima ombra dell'elenco si dipinge sopra le altre */
.nv-dt-scroll .nv-matrix thead th.nv-col-fissa-dx.is-primo{ box-shadow:inset 0 -2px 0 var(--nv-accent), inset 1px 0 0 var(--nv-grid-border); }
.nv-dt-scroll .nv-matrix tbody td.nv-col-fissa-dx.is-primo{ box-shadow:inset 0 -1px 0 var(--nv-grid-border), inset 1px 0 0 var(--nv-grid-border); }
/* LE SFUMATURE AI LATI non servono dove ci sono colonne ferme (sono loro a segnare i bordi), e lì facevano danno: sono
   `position:absolute` nel contenitore che scorre, quindi scorrono con la tabella e scurivano 24 px di linea e di bordi
   dovunque si trovassero. Nelle altre tabelle restano come sono (stesso difetto, segnalato nel report HR-TUNING-2). */
.nv-dt-scroll:has(.nv-col-fissa-sx)::before, .nv-dt-scroll:has(.nv-col-fissa-sx)::after{ display:none; }
/* una colonna per giorno: stretta e uguale per tutti i giorni, il codice al centro */
.nv-matrix .nv-col-giorno{ min-width:34px; padding-left:4px; padding-right:4px; text-align:center; }
/* (#2) Delta per-tabella sopra la base .nv-matrix (DOPO la base: vincono per ordine di sorgente). */
/* Matrice notifiche CRM (impostazioni/crm): celle più ariose, header maiuscolo, colonne canale fisse. */
/* La tabella delle notifiche passa dal renderer delle tab di Impostazioni (.nv-settings-table), che
   le dà la veste delle pagine lista: padding, intestazione e tipografia arrivano da lì. Qui resta
   solo ciò che è suo: l'allineamento verticale e la larghezza delle tre colonne di spunte. */
.crm-notif-table th, .crm-notif-table td{ vertical-align:middle; }
.crm-notif-table thead th:not(:first-child){ width:90px; }
/* Tabella varianti catalogo (#var-scroll): compatta, header su una riga. */
.nv-var-table{ font-size:.85rem; }
.nv-var-table th, .nv-var-table td{ padding:6px 8px; }
.nv-var-table th{ white-space:nowrap; }

/* (#1) nv-dt-scroll — wrapper UNICO per lo scroll ORIZZONTALE delle tabelle dati
   (editor righe documento ecc.): scrollbar grigia sottile (mai la teal Bootstrap)
   + ombre laterali via ::before/::after, accese da JS (.has-shadow-left/right). */
.nv-dt-scroll{ position:relative; overflow-x:auto; scrollbar-gutter:stable; }
.nv-dt-scroll::-webkit-scrollbar{ width:var(--nv-sb-w); height:var(--nv-sb-h); }
.nv-dt-scroll::-webkit-scrollbar-track{ background:var(--nv-sb-track); }
.nv-dt-scroll::-webkit-scrollbar-thumb{ background:var(--nv-sb-thumb); border-radius:0; }
.nv-dt-scroll::-webkit-scrollbar-thumb:hover{ background:var(--nv-sb-thumb-hover); }
.nv-dt-scroll::before, .nv-dt-scroll::after{ content:""; position:absolute; top:0; bottom:0; width:24px; pointer-events:none; z-index:3; opacity:0; transition:opacity .15s ease; }
.nv-dt-scroll::before{ left:0; background:linear-gradient(to right,#000,transparent); }
.nv-dt-scroll::after{ right:0; background:linear-gradient(to left,#000,transparent); }
.nv-dt-scroll.has-shadow-left::before{ opacity:1; }
.nv-dt-scroll.has-shadow-right::after{ opacity:1; }

/* (#5) nv-fade — ombra (fade-to-black) UNICA sopra il footer fisso (FASE 2: ha sostituito
   .table-fade/.card-fade e le varianti per-gruppo). */
.nv-fade{ position:fixed; left:0; right:0; bottom:var(--nv-fade-bottom); height:var(--nv-fade-h);
  background:linear-gradient(to bottom, transparent, #000000); pointer-events:none; z-index:11; }
/* (#5) nv-fade-box — variante UNICA per i BOX SCROLLABILI interni (toggle via JS quando c'è
   altro da scrollare): assoluta dentro il box, 1px dentro il bordo, angoli bassi raccordati.
   FASE 2: ha sostituito .centro-fade/.crm-fade/.nv-dash-fade. */
.nv-fade-box{ position:absolute; left:1px; right:1px; bottom:1px; height:var(--nv-fade-h);
  background:linear-gradient(to bottom, transparent, #000000); pointer-events:none;
  border-radius:0 0 6px 6px; z-index:5; }
/* (#6) nv-scroll — scrollbar SOTTILE canonica (4px) dei contenitori interni: pannelli view,
   box impostazioni, colonne kanban, picker, dashboard. La regola elenca anche i contenitori
   legacy/vendor a cui non si può aggiungere la classe (DataTables, CKEditor). Il thumb hover
   resta teal dalla regola globale. */
.nv-scroll::-webkit-scrollbar, div.dt-scroll-body::-webkit-scrollbar, .view-panel::-webkit-scrollbar,
.centro-gruppi-scroll::-webkit-scrollbar, .pipeline-col-body::-webkit-scrollbar,
.crm-settings-content::-webkit-scrollbar, .notif-list::-webkit-scrollbar, #var-scroll::-webkit-scrollbar,
.nv-testi-descr .ck-content::-webkit-scrollbar, .cm-main-scroll::-webkit-scrollbar,
.nv-picker-results::-webkit-scrollbar, .nv-dash-scroll::-webkit-scrollbar{ width:var(--nv-sb-w); height:var(--nv-sb-h); }

/* (#1) Editor righe documento (#doc-righe): allineato al tema app. Neutralizza il grigio
   #212529 di Bootstrap .table-dark verso il nero dell'app (era "il punto più fuori tema").
   La scrollbar è quella grigia di .nv-dt-scroll (wrapper) — vedi documenti.lib.php. */
#doc-righe.table-dark{ --bs-table-bg:transparent; --bs-table-color:var(--nv-text-value); --bs-table-border-color:var(--nv-grid-border); }
#doc-righe.table-dark thead th{ color:var(--nv-text-label); border-bottom-color:var(--nv-grid-border); }

/* (QA NOTTE 07/09) .form-select — IL VESTITO SCURO È DEL TEMA, NON DEL CONTESTO.
   Fino a qui `.form-select` era vestita di nero solo dentro `.card-body-table`, `.nv-onb-campo` e
   `.matrix-card-row`: ovunque altro restava il bianco di Bootstrap. Il risultato si vedeva in
   Amministrazione ▸ Impostazioni, dove la STESSA domanda ha una select nera nel wizard
   (`.nv-onb-campo`) e una bianca nella pagina a tab (`.crm-inline`) — misurato: sfondo
   rgb(255,255,255), testo rgb(33,37,41).
   I valori sono quelli di `.form-control`, che è il campo di riferimento: nessun colore nuovo.
   La freccetta di Bootstrap è un SVG con lo stroke #343a40, invisibile sul nero: qui è grigio
   chiaro. `option` va vestito a parte perché il menu a tendina lo disegna il sistema operativo. */
.form-select {
  color: #f0f7ff;
  background-color: #000;
  border: var(--bs-border-width) solid var(--nv-campo-bordo);
  border-radius: var(--bs-border-radius);
  font-size: 0.9rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ababab' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option { background-color: #000; color: #f0f7ff; }
.form-select:disabled { background-color: #3d3e3e; color: #ababab; opacity: 1; }
.form-select:focus {
  color: #fff;
  background-color: #000;
  border-color: #55d5cc;
  outline: none !important;
  box-shadow: 0 0 0 0.35rem rgba(85, 213, 204, 0.25) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   TIMELINE DELLE PRENOTAZIONI (.nv-timeline) — notte 4, 19/09/2026

   Righe = prenotabili, colonne = giorni. Un blocco per sessione: ora, contatore, barra di
   riempimento. Il COLORE non dice mai da solo lo stato — accanto c'è sempre un'icona — perché la
   pagina si stampa, si proietta e si guarda con occhi diversi.

   I colori stanno nelle variabili qui sotto: il tema chiaro le ridefinisce in nuvola_light.css e
   non tocca una sola regola di questo blocco.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --nv-tl-bg:            #000000;
  --nv-tl-bordo:         #333333;
  --nv-tl-testa:         #0d0d0d;
  --nv-tl-oggi:          rgba(85,213,204,0.08);
  --nv-tl-testo:         #e6e6e6;
  --nv-tl-testo-dim:     #8a8a8a;
  --nv-tl-disponibile:   #25d366;
  --nv-tl-ultimi:        #e0a34a;
  --nv-tl-esaurito:      #db3131;
  --nv-tl-chiusa:        #5a5a5a;
  --nv-tl-dagestire:     #b555d5;
}

.nv-timeline { width: 100%; }
.nv-timeline-scroll { overflow-x: auto; overflow-y: visible; }
.nv-timeline-tab { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 900px; }
.nv-timeline-tab thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--nv-tl-testa); color: var(--nv-tl-testo-dim);
  font-family: 'Outfit', sans-serif; font-size: 0.76rem; font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 8px 6px; border-bottom: 1px solid var(--nv-tl-bordo); text-align: center;
}
/* La colonna dei nomi resta ferma mentre si scorre nel tempo: senza, dopo tre giorni di scroll non
   si sa più di quale prenotabile sia la riga. */
.nv-timeline-tab th.nv-tl-nome,
.nv-timeline-tab td.nv-tl-nome {
  position: sticky; left: 0; z-index: 2; background: var(--nv-tl-testa);
  min-width: 190px; max-width: 190px; text-align: left; padding: 8px 10px;
  border-right: 1px solid var(--nv-tl-bordo);
}
.nv-timeline-tab thead th.nv-tl-nome { z-index: 4; }
.nv-tl-titolo { display: block; color: var(--nv-tl-testo); font-size: 0.9rem; }
.nv-tl-sub    { display: block; color: var(--nv-tl-testo-dim); font-size: 0.72rem; }
.nv-tl-giorno.is-oggi, .nv-tl-cella.is-oggi { background: var(--nv-tl-oggi); }
.nv-tl-cella {
  vertical-align: top; min-width: 96px; padding: 6px 4px;
  border-bottom: 1px solid var(--nv-tl-bordo); border-right: 1px solid rgba(255,255,255,0.04);
}

.nv-tl-sessione {
  display: block; width: 100%; margin-bottom: 5px; padding: 6px 7px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--nv-tl-bordo); border-left-width: 3px;
  border-radius: 7px; color: var(--nv-tl-testo); font-family: 'Outfit', sans-serif;
  font-size: 0.78rem; text-align: left; transition: border-color .15s ease, background .15s ease;
}
.nv-tl-sessione:hover { background: rgba(255,255,255,0.07); }
.nv-tl-sessione.is-disponibile   { border-left-color: var(--nv-tl-disponibile); }
.nv-tl-sessione.is-ultimi_posti  { border-left-color: var(--nv-tl-ultimi); }
.nv-tl-sessione.is-esaurito      { border-left-color: var(--nv-tl-esaurito); opacity: .75; }
.nv-tl-sessione.is-non_prenotabile,
.nv-tl-sessione.is-chiusa        { border-left-color: var(--nv-tl-chiusa); opacity: .6; }
.nv-tl-ora   { display: block; font-weight: 500; }
.nv-tl-conta { display: block; color: var(--nv-tl-testo-dim); font-size: 0.72rem; }
.nv-tl-barra { display: block; height: 3px; margin-top: 4px; background: rgba(255,255,255,0.10); border-radius: 2px; }
.nv-tl-barra > span { display: block; height: 3px; border-radius: 2px; background: var(--nv-tl-disponibile); }
.nv-tl-sessione.is-ultimi_posti .nv-tl-barra > span { background: var(--nv-tl-ultimi); }
.nv-tl-sessione.is-esaurito .nv-tl-barra > span     { background: var(--nv-tl-esaurito); }

/* ── Il «+» di una cella: c'è SEMPRE, anche dove ci sono già sessioni (A4, 21/09/2026) ──────
   Discreto finché non serve — si accende al passaggio del mouse, così la griglia non sembra piena
   di pulsanti — ma presente ovunque, perché «aggiungi una prenotazione qui» è il gesto più
   frequente di chi risponde al telefono, e non c'è nessuna ragione per cui debba funzionare solo
   nelle celle vuote. */
.nv-tl-piu {
  width: 100%; height: 26px; border: 1px dashed transparent; border-radius: 7px;
  background: transparent; color: transparent; transition: all .15s ease;
}
.nv-tl-cella:hover .nv-tl-piu { border-color: var(--nv-tl-bordo); color: var(--nv-tl-testo-dim); }
.nv-tl-piu:focus-visible { border-color: var(--nv-tl-disponibile); color: var(--nv-tl-testo); outline: none; }

/* ── IL COLORE DI UNA SESSIONE ──────────────────────────────────────────────────────────────
   Il bordo sinistro dice la DISPONIBILITÀ (quanti posti restano: `is-*`), il bordo intero dice
   il LAVORO (c'è qualcosa da guardare: `col-*`). Sono due domande diverse e due persone diverse
   le fanno: chi vende guarda la prima, chi gestisce la seconda. */
.nv-tl-sessione.col-attesa { border-color: var(--nv-pren-attesa); }
.nv-tl-sessione.col-pieno  { border-color: rgba(219,49,49,0.55); }
.nv-tl-sessione.col-ok     { border-color: rgba(37,211,102,0.45); }
.nv-tl-sessione.is-aperta  { background: rgba(255,255,255,0.08); }
.nv-tl-attesa {
  display: block; margin-top: 3px; font-size: 0.7rem; color: var(--nv-pren-attesa);
}
.nv-tl-attesa i { margin-right: 3px; }

/* Durante un trascinamento: dove si può lasciare, e dove no. Si vede PRIMA di provarci. */
.nv-tl-sessione.is-bersaglio { border-color: var(--nv-tl-disponibile); border-style: dashed; }
.nv-tl-sessione.is-sopra     { background: rgba(37,211,102,0.18); }
.nv-tl-sessione.is-vietata   { opacity: .35; }

/* ── LE CARD DELLE PRENOTAZIONI, sotto la sessione aperta ───────────────────────────────────
   Una per riga, colorate per stato: verde confermata, ambra da confermare, grigia arrivata (è
   successo, non c'è più niente da decidere), rossa cancellata o no show. Il colore è quello dei
   token `--nv-pren-*`, gli stessi dei badge: uno stato ha un colore solo in tutta l'applicazione. */
.nv-tl-cards { display: flex; flex-direction: column; gap: 3px; margin: 0 0 6px 6px; }
.nv-tl-card {
  display: flex; align-items: stretch; gap: 2px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--nv-tl-bordo); border-left-width: 3px;
  border-radius: 6px; cursor: grab;
}
.nv-tl-card.is-confermata  { border-left-color: var(--nv-pren-confermata); }
.nv-tl-card.is-in_attesa   { border-left-color: var(--nv-pren-attesa); }
.nv-tl-card.is-arrivato,
.nv-tl-card.is-completata  { border-left-color: var(--nv-pren-fatto); opacity: .8; }
.nv-tl-card.is-cancellata,
.nv-tl-card.is-no_show     { border-left-color: var(--nv-pren-annullata); opacity: .6; cursor: default; }
.nv-tl-card.is-da-gestire  { box-shadow: inset 2px 0 0 var(--nv-tl-dagestire); }
.nv-tl-card.is-trascinata  { opacity: .45; }
.nv-tl-card-corpo {
  flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 4px 6px; background: transparent; border: 0; color: var(--nv-tl-testo);
  font-size: 0.72rem; text-align: left;
}
.nv-tl-card-nome   { flex: 1; }
.nv-tl-card-pax    { color: var(--nv-tl-testo-dim); font-variant-numeric: tabular-nums; }
.nv-tl-card-canale { color: var(--nv-tl-testo-dim); }
.nv-tl-card-sposta {
  padding: 0 6px; background: transparent; border: 0; border-left: 1px solid var(--nv-tl-bordo);
  color: var(--nv-tl-testo-dim); font-size: 0.7rem;
}
.nv-tl-card-sposta:hover { color: var(--nv-tl-testo); }
.nv-tl-card-vuota { padding: 4px 6px; font-size: 0.72rem; color: var(--nv-tl-testo-dim); }

/* ── LA SCHEDA DI UNA PRENOTAZIONE (dentro la modal) ────────────────────────────────────────
   Una colonna sola: si legge dall'alto in basso come si ragiona al telefono — chi è, cosa ha
   chiesto, quanti sono, quanto viene, cosa faccio adesso. */
.nv-tl-scheda { display: flex; flex-direction: column; gap: 10px; font-size: 0.85rem; }
.nv-tl-scheda-testa { font-size: 0.95rem; }
.nv-tl-scheda-cliente { color: var(--nv-tl-testo-dim); }
.nv-tl-scheda-cliente a { color: var(--nv-accent, #55d5cc); }
.nv-tl-scheda-richieste {
  padding: 6px 9px; border-left: 3px solid var(--nv-pren-attesa); border-radius: 4px;
  background: rgba(255,255,255,0.04);
}
.nv-tl-scheda-pax { display: flex; gap: 12px; }
.nv-tl-scheda-pax label { flex: 1; font-size: 0.78rem; color: var(--nv-tl-testo-dim); }
.nv-tl-scheda-tit { font-size: 0.78rem; color: var(--nv-tl-testo-dim); margin-bottom: 4px; }
.nv-tl-extra { display: block; font-size: 0.8rem; margin-bottom: 3px; }
.nv-tl-extra input { margin-right: 6px; }
.nv-tl-scheda-totale {
  padding-top: 8px; border-top: 1px solid var(--nv-tl-bordo); font-size: 0.9rem;
}
.nv-tl-scheda-azioni { display: flex; flex-wrap: wrap; }

.nv-timeline-barra { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 0 0 12px; }
.nv-timeline-nav { display: flex; gap: 6px; }
.nv-timeline-filtri { min-width: 220px; }
.nv-timeline-legenda { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; font-size: 0.76rem; color: var(--nv-tl-testo-dim); }
.nv-tl-leg i { margin-right: 4px; }
.nv-tl-leg.is-disponibile i  { color: var(--nv-tl-disponibile); }
.nv-tl-leg.is-ultimi_posti i { color: var(--nv-tl-ultimi); }
.nv-tl-leg.is-esaurito i     { color: var(--nv-tl-esaurito); }
.nv-tl-leg.is-chiusa i       { color: var(--nv-tl-chiusa); }


/* Pannello della sessione (dentro una modal del design system) */
.nv-tl-pannello-testa { font-size: 1rem; color: var(--nv-tl-testo); margin-bottom: 10px; }
.nv-tl-pren { padding: 8px 10px; border: 1px solid var(--nv-tl-bordo); border-radius: 8px; margin-bottom: 8px; }
.nv-tl-pren.is-da-gestire { border-color: var(--nv-tl-dagestire); }
.nv-tl-pren-testa { font-size: 0.9rem; color: var(--nv-tl-testo); }
.nv-tl-pren-azioni { margin-top: 6px; }
.nv-tl-canale { color: var(--nv-tl-testo-dim); margin-left: 6px; }
.nv-tl-badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.72rem;
  background: rgba(255,255,255,0.08); color: var(--nv-tl-testo);
}
.nv-tl-badge.is-da-gestire { background: var(--nv-tl-dagestire); color: #fff; }

/* Telefono: non una timeline schiacciata, l'agenda del giorno. */
.nv-tl-agenda { display: flex; flex-direction: column; gap: 8px; }
.nv-tl-agenda-giorno { color: var(--nv-tl-testo-dim); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.76rem; }
.nv-tl-riga {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--nv-tl-bordo); border-left-width: 3px;
  border-radius: 8px; color: var(--nv-tl-testo); text-align: left;
}
.nv-tl-riga.is-disponibile  { border-left-color: var(--nv-tl-disponibile); }
.nv-tl-riga.is-ultimi_posti { border-left-color: var(--nv-tl-ultimi); }
.nv-tl-riga.is-esaurito     { border-left-color: var(--nv-tl-esaurito); }
.nv-tl-riga .nv-tl-titolo { flex: 1; }

/* Le fasce orarie della pianificazione (scheda prenotabile) */
.nv-giorno { margin-right: 8px; font-size: 0.8rem; color: var(--nv-tl-testo-dim); }
.nv-giorno input { margin-right: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   STATO DI UNA PRENOTAZIONE — un colore, e SEMPRE un'icona accanto (21/09/2026)

   Il colore da solo non dice mai lo stato: si stampa in bianco e nero, e non tutti lo vedono
   uguale. Ogni badge porta la sua icona, e queste classi danno solo il colore.

   I sei stati, e perché questi colori:
     confermata  verde    — è a posto, non serve fare niente
     in_attesa   ambra    — qualcuno deve guardarla: è l'unico stato che chiede lavoro
     arrivato    grigio   — è successo, non c'è più niente da decidere
     completata  grigio   — idem, a cose fatte
     cancellata  rosso    — non c'è più
     no_show     rosso    — non c'è più, e ce lo ricordiamo
     da_programmare viola — pagata e senza giorno: è il voucher, e ha il suo colore da sempre
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --nv-pren-richiesta:   var(--nv-tl-testo-dim);
  --nv-pren-confermata:  var(--nv-tl-disponibile);
  --nv-pren-attesa:      var(--nv-tl-ultimi);
  --nv-pren-pagata:      #55d5cc;
  --nv-pren-svolta:      #5a8bff;
  --nv-pren-annullata:   var(--nv-tl-esaurito);
  --nv-pren-noshow:      var(--nv-tl-dagestire);
  /* Restano i due nomi vecchi: li usa ancora il calendario, che non è stato riscritto. */
  --nv-pren-fatto:       #6f6f6f;
  --nv-pren-voucher:     var(--nv-tl-dagestire);
}
.nv-pren-stato {
  display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 0.74rem;
  background: rgba(255,255,255,0.08); color: var(--nv-tl-testo); border: 1px solid transparent;
}
.nv-pren-stato i { margin-right: 4px; }
/* I SETTE STATI (22/09/2026), uguali per tutte e cinque le famiglie di prenotabili. Ogni colore
   esce dalla palette che c'era già — non ne è stato inventato nessuno:
     richiesta grigio · confermata verde · attesa_pagamento giallo · pagata teal (il brand: è il
     colore del «fatto bene») · svolta blu · annullata rosso · no_show viola.
   Il PHP non scrive mai un esadecimale: scrive `is-<stato>` e il colore sta qui. */
.nv-pren-stato.is-richiesta        { border-color: var(--nv-pren-richiesta);   color: var(--nv-pren-richiesta); }
.nv-pren-stato.is-confermata       { border-color: var(--nv-pren-confermata);  color: var(--nv-pren-confermata); }
.nv-pren-stato.is-attesa_pagamento { border-color: var(--nv-pren-attesa);      color: var(--nv-pren-attesa); }
.nv-pren-stato.is-pagata           { border-color: var(--nv-pren-pagata);      color: var(--nv-pren-pagata); }
.nv-pren-stato.is-svolta           { border-color: var(--nv-pren-svolta);      color: var(--nv-pren-svolta); }
.nv-pren-stato.is-annullata        { border-color: var(--nv-pren-annullata);   color: var(--nv-pren-annullata); }
.nv-pren-stato.is-no_show          { border-color: var(--nv-pren-noshow);      color: var(--nv-pren-noshow); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CALENDARIO DELLE PRENOTAZIONI — mese, settimana, giorno (21/09/2026)

   È l'altra faccia della timeline, non un suo doppione: la timeline mette i prenotabili in riga
   e i giorni in colonna (serve a chi programma), il calendario mette il TEMPO davanti a tutto
   (serve a chi risponde al telefono e deve dire «giovedì alle 11:30 c'è posto»).

   IL COLORE DI UNA SESSIONE è una regola sola, e vale identica nelle tre viste:
     verde   tutte le prenotazioni sono confermate — non c'è niente da fare
     ambra   almeno una aspetta conferma — e il numero di quante, scritto accanto
     rosso   posti esauriti
     grigio  chiusa (col lucchetto: il colore da solo non basta mai)
   Una sessione senza prenotazioni non è verde: è neutra. Verde vuol dire «controllato», e su una
   sessione vuota non c'è stato niente da controllare.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.nv-cal { background: var(--nv-tl-bg); border: 1px solid var(--nv-tl-bordo); border-radius: 8px; overflow: hidden; }
.nv-cal-barra {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 0 12px 0;
}
.nv-cal-nav { display: flex; gap: 6px; align-items: center; }
.nv-cal-periodo { font-size: 1.05rem; color: var(--nv-tl-testo); min-width: 210px; text-transform: capitalize; }
.nv-cal-filtri { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.nv-cal-filtri .form-control { min-width: 170px; }

/* ── vista MESE: sette colonne, le settimane una sotto l'altra ───────────────────────────── */
.nv-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--nv-tl-testa); }
.nv-cal-dow span {
  padding: 8px 6px; text-align: center; font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--nv-tl-testo-dim); border-bottom: 1px solid var(--nv-tl-bordo);
}
.nv-cal-mese { display: grid; grid-template-columns: repeat(7, 1fr); }
.nv-cal-giorno {
  min-height: 118px; padding: 6px; border-right: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--nv-tl-bordo); display: flex; flex-direction: column; gap: 4px;
}
.nv-cal-giorno:nth-child(7n) { border-right: 0; }
.nv-cal-giorno.is-oggi  { background: var(--nv-tl-oggi); }
/* I giorni dei mesi vicini restano visibili ma spenti: toglierli sposterebbe la griglia. */
.nv-cal-giorno.is-fuori { opacity: 0.38; }
.nv-cal-num { font-size: 0.8rem; color: var(--nv-tl-testo-dim); text-align: right; }
/* OGGI è una pastiglia piena, non un numero colorato: sopra la velatura dell'accento un testo
   dello stesso accento fa un contrasto che non regge (audit_stili lo segnalava a ragione), e un
   giorno che non si legge non è un'evidenziazione. */
.nv-cal-giorno.is-oggi .nv-cal-num {
  display: inline-block; align-self: flex-end; padding: 0 7px; border-radius: 10px;
  background: #55d5cc; color: #04211f; font-weight: 600;
}

/* ── il blocchetto di una sessione: è lo stesso nelle tre viste ──────────────────────────── */
.nv-cal-ses {
  display: block; width: 100%; text-align: left; padding: 3px 6px; border-radius: 5px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--nv-tl-bordo); border-left-width: 3px;
  color: var(--nv-tl-testo); font-size: 0.74rem; line-height: 1.35; cursor: pointer;
}
.nv-cal-ses:hover { background: rgba(255,255,255,0.07); }
.nv-cal-ses.is-ok      { border-left-color: var(--nv-pren-confermata); }
.nv-cal-ses.is-attesa  { border-left-color: var(--nv-pren-attesa); }
.nv-cal-ses.is-pieno   { border-left-color: var(--nv-tl-esaurito); }
.nv-cal-ses.is-chiusa  { border-left-color: var(--nv-tl-chiusa); opacity: 0.6; }
.nv-cal-ses.is-vuota   { border-left-color: var(--nv-tl-bordo); }
.nv-cal-ora   { color: var(--nv-tl-testo); font-variant-numeric: tabular-nums; margin-right: 4px; }
.nv-cal-nome  { color: var(--nv-tl-testo-dim); }
.nv-cal-posti { float: right; color: var(--nv-tl-testo-dim); font-variant-numeric: tabular-nums; }
.nv-cal-attesa-n { color: var(--nv-pren-attesa); margin-left: 4px; }
.nv-cal-piu { font-size: 0.7rem; color: var(--nv-tl-testo-dim); text-align: center; cursor: pointer; }

/* ── vista SETTIMANA: le stesse sette colonne, ma alte quanto serve ──────────────────────── */
.nv-cal-settimana { display: grid; grid-template-columns: repeat(7, 1fr); }
.nv-cal-settimana .nv-cal-giorno { min-height: 320px; }
.nv-cal-testa-giorno {
  font-size: 0.78rem; color: var(--nv-tl-testo); text-align: center; padding-bottom: 4px;
  border-bottom: 1px solid var(--nv-tl-bordo); margin-bottom: 4px; text-transform: capitalize;
}

/* ── vista GIORNO: una scheda per sessione, con dentro chi viene ─────────────────────────── */
.nv-cal-lista { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.nv-cal-sessione { border: 1px solid var(--nv-tl-bordo); border-left-width: 3px; border-radius: 8px; overflow: hidden; }
.nv-cal-sessione.is-ok     { border-left-color: var(--nv-pren-confermata); }
.nv-cal-sessione.is-attesa { border-left-color: var(--nv-pren-attesa); }
.nv-cal-sessione.is-pieno  { border-left-color: var(--nv-tl-esaurito); }
.nv-cal-sessione.is-chiusa { border-left-color: var(--nv-tl-chiusa); }
.nv-cal-sessione.is-vuota  { border-left-color: var(--nv-tl-bordo); }
.nv-cal-sessione-testa {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  background: var(--nv-tl-testa); color: var(--nv-tl-testo); font-size: 0.9rem;
}
.nv-cal-sessione-testa .nv-cal-posti { float: none; margin-left: auto; }
.nv-cal-parte {
  display: flex; align-items: center; gap: 12px; padding: 7px 12px; font-size: 0.82rem;
  color: var(--nv-tl-testo); border-top: 1px solid rgba(255,255,255,0.05);
}
.nv-cal-parte .nv-cal-pax { color: var(--nv-tl-testo-dim); font-variant-numeric: tabular-nums; }
.nv-cal-parte .nv-cal-canale { color: var(--nv-tl-testo-dim); margin-left: auto; }


.nv-cal-legenda { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 2px 0 2px; font-size: 0.74rem; color: var(--nv-tl-testo-dim); }
.nv-cal-leg i { margin-right: 4px; }
.nv-cal-leg.is-ok i     { color: var(--nv-pren-confermata); }
.nv-cal-leg.is-attesa i { color: var(--nv-pren-attesa); }
.nv-cal-leg.is-pieno i  { color: var(--nv-tl-esaurito); }
.nv-cal-leg.is-chiusa i { color: var(--nv-tl-chiusa); }

@media (max-width: 991px) {
  /* Sette colonne su un telefono sono sette strisce illeggibili: il mese diventa un elenco. */
  .nv-cal-dow { display: none; }
  .nv-cal-mese, .nv-cal-settimana { grid-template-columns: 1fr; }
  .nv-cal-giorno, .nv-cal-settimana .nv-cal-giorno { min-height: 0; }
  .nv-cal-giorno.is-fuori { display: none; }
  .nv-cal-num { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   INTEGRAZIONI — collegamento a un negozio online e dashboard del canale (notte 5, 19/09/2026)

   Tutti i colori passano dalle variabili tema: in light mode non si riscrive una regola, si
   ridefinisce una variabile (vedi nuvola_light.css). Le classi stanno tutte sotto `.nv-can-`,
   così si riconosce a colpo d'occhio a chi appartengono.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.nv-can-onb{ max-width:840px; }

/* I passi in testa: si vede dove si è e quanto manca. Non è cliccabile — si va avanti facendo,
   non saltando: il passo 4 senza il passo 3 non avrebbe nulla da mostrare. */
.nv-can-passi{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px; }
.nv-can-passo{ font-size:0.76rem; color:var(--nv-text-muted); border:1px solid var(--nv-grid-border);
               border-radius:20px; padding:3px 12px; white-space:nowrap; }
.nv-can-passo b{ color:var(--nv-text-muted); font-weight:600; margin-right:3px; }
.nv-can-passo.is-ora{ color:var(--nv-text-title); border-color:var(--nv-accent); }
.nv-can-passo.is-ora b{ color:var(--nv-accent); }
.nv-can-passo.is-fatto{ color:var(--nv-text-label); border-color:var(--nv-success); }
.nv-can-passo.is-fatto b{ color:var(--nv-success); }

.nv-can-istruzioni{ border:1px solid var(--nv-grid-border); border-radius:10px; padding:14px 16px 8px; }
.nv-can-istruzioni ol{ margin:0; padding-left:18px; }
.nv-can-istruzioni li{ margin-bottom:10px; color:var(--nv-text-value); font-size:0.88rem; }
.nv-can-istruzioni code{ color:var(--nv-accent); }

/* La checklist della verifica. Il colore NON è mai l'unica informazione: ogni riga ha la sua
   icona e la sua nota, perché un rosso senza spiegazione fa chiamare l'assistenza. */
.nv-can-check{ list-style:none; margin:0; padding:0; }
.nv-can-check li{ padding:7px 0; border-bottom:1px solid var(--nv-grid-border); font-size:0.88rem;
                  color:var(--nv-text-value); }
.nv-can-check li:last-child{ border-bottom:0; }
.nv-can-check li i{ width:18px; }
.nv-can-check li.is-ok i{ color:var(--nv-success); }
.nv-can-check li.is-ko i{ color:var(--nv-danger-testo); }
.nv-can-check li.nv-can-attesa{ color:var(--nv-text-muted); }
.nv-can-errore{ margin-top:12px; border:1px solid var(--nv-danger); border-radius:8px;
                padding:10px 12px; color:var(--nv-text-value); font-size:0.88rem; }
.nv-can-avviso{ border:1px solid var(--nv-warning); border-radius:8px; padding:8px 12px;
                color:var(--nv-text-label); font-size:0.82rem; }

.nv-can-stati label{ display:block; color:var(--nv-text-muted); margin-top:6px; }

/* L'importazione: una riga per entità, con la barra che si muove davvero. */
.nv-can-import{ display:flex; flex-direction:column; gap:10px; }
.nv-can-imp-riga{ display:flex; align-items:center; gap:12px; }
.nv-can-imp-nome{ min-width:130px; color:var(--nv-text-value); font-size:0.88rem; margin:0; }
.nv-can-imp-conta{ min-width:150px; text-align:right; }

/* Lo stato del collegamento, in cima alla dashboard. */
.nv-can-semaforo{ font-size:0.88rem; font-weight:600; color:var(--nv-text-value); }
.nv-can-semaforo i{ margin-right:4px; }
.nv-can-semaforo.is-ok i{ color:var(--nv-success); }
.nv-can-semaforo.is-ko i{ color:var(--nv-danger-testo); }
.nv-can-semaforo.is-off i{ color:var(--nv-text-muted); }

.nv-can-delta{ font-size:0.72rem; margin-top:2px; }
.nv-can-delta.is-su{ color:var(--nv-success); }
.nv-can-delta.is-giu{ color:var(--nv-danger-testo); }

.nv-can-coda{ display:flex; flex-direction:column; gap:4px; font-size:0.88rem; color:var(--nv-text-label); }
.nv-can-coda-n{ color:var(--nv-text-value); font-weight:700; margin-right:4px; }
.nv-can-coda-err .nv-can-coda-n{ color:var(--nv-danger-testo); }
.nv-can-errori{ list-style:none; margin:0; padding:0; max-height:170px; overflow:auto; }
.nv-can-errori li{ padding:6px 0; border-bottom:1px solid var(--nv-grid-border); font-size:0.8rem; }
.nv-can-errori li:last-child{ border-bottom:0; }
.nv-can-errori b{ display:block; color:var(--nv-text-value); }

/* Stato vuoto: mai una tabella vuota. Si dice cosa manca e, quando si può, cosa fare. */




@media (max-width: 767.98px){
  .nv-can-imp-riga{ flex-wrap:wrap; }
  .nv-can-imp-conta{ min-width:0; text-align:left; }
}

/* ── Timeline: la CORSIA DEI VOUCHER (20/09/2026) ─────────────────────────────────────────────
   Le prenotazioni pagate che non hanno ancora un giorno non stanno sull'asse del tempo: metterle
   «oggi» sarebbe una bugia. Hanno una corsia loro, sopra la griglia, che si svuota da sola man mano
   che i clienti scelgono la data — e quando è vuota non c'è. */
.nv-tl-corsia{ border:1px solid var(--nv-grid-border); border-radius:10px; padding:10px 12px; margin-bottom:12px; }
.nv-tl-corsia-testa{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
                     color:var(--nv-text-value); font-size:0.88rem; font-weight:600; margin-bottom:8px; }
.nv-tl-corsia-testa i{ color:var(--nv-warning); }
.nv-tl-corsia-nota{ font-weight:400; color:var(--nv-text-muted); font-size:0.76rem; }
.nv-tl-corsia-righe{ display:flex; flex-wrap:wrap; gap:8px; }
.nv-tl-voucher{ display:flex; flex-direction:column; align-items:flex-start; gap:2px;
                background:transparent; border:1px solid var(--nv-warning); border-radius:8px;
                padding:6px 10px; min-width:170px; text-align:left; color:var(--nv-text-value);
                font-size:0.8rem; cursor:pointer; position:relative; }
.nv-tl-voucher:hover{ background:rgba(245,166,35,.10); }
.nv-tl-voucher .nv-tl-titolo{ font-weight:600; padding-right:18px; }   /* spazio per l'icona del canale */
.nv-tl-voucher .nv-tl-sub{ color:var(--nv-text-muted); font-size:0.74rem; }
.nv-tl-voucher .nv-tl-canale{ position:absolute; top:6px; right:8px; color:var(--nv-text-muted); }
.nv-tl-badge.is-da-programmare{ background:var(--nv-warning); color:#000; }

@media (max-width: 767.98px){
  .nv-tl-corsia-righe{ flex-direction:column; }
  .nv-tl-voucher{ width:100%; }
}

/* ── CENTRI DI COSTO: il conto economico riclassificato (20/09/2026) ──────────────────────────
   Il prospetto NON è una lista di righe omogenee: è una cascata con blocchi, una corsia a
   sinistra che porta icona e nome del gruppo, e una riga-nastro di totale colorata col colore di
   quel gruppo. Sono cinque classi, tutte sotto `nv-cc-`, tutte costruite sui token del tema —
   così la light mode segue da sé e non esiste un secondo posto dove ricordarsi dei colori.
   Il colore del gruppo arriva a runtime in `--cc-colore`: è un valore del dato, non dello stile,
   ed è l'unica eccezione agli inline ammessa dalla regola (valore calcolato). */
th.nv-cc-th{ color:var(--nv-text-label); font-weight:600; font-size:.82rem; padding:12px 10px;
             border-bottom:1px solid var(--nv-grid-border); background:var(--nv-grid-header); }
tr.nv-cc-riga td, tr.nv-cc-totale td{ padding:12px 10px; }
tr.nv-cc-riga td{ border-bottom:1px solid var(--nv-grid-border); color:var(--nv-text-value); }
tr.nv-cc-riga:hover td{ background:#55d5cc0f; }
tr.nv-cc-riga-sotto td{ font-size:.86rem; color:var(--nv-text-muted)!important; }

/* La corsia di sinistra: icona grande e nome del gruppo, in verticale, col colore del gruppo. */
.nv-cc-gutter{ width:150px; vertical-align:middle; text-align:center; color:var(--cc-colore, var(--nv-accent));
               border-right:1px solid var(--nv-grid-border); }
.nv-cc-gutter-ico{ font-size:1.6rem; line-height:1; margin-bottom:6px; }
.nv-cc-gutter-txt{ font-size:.72rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.nv-cc-gutter-muto{ color:var(--nv-text-muted); border-right:1px solid var(--nv-grid-border); }

/* Il nastro del totale: fondo pieno col colore del gruppo, testo sempre leggibile sopra. */
/* Il testo sul nastro (E-11, 19/10/2026): `--cc-testo` lo calcola il server dalla luminanza del colore del gruppo
   (nvTestoSuColore: #0E1116 sopra i chiari, bianco sopra gli scuri); il bianco resta il ripiego. */
.nv-cc-totale td{ background:var(--cc-colore, #1f2a44); color:var(--cc-testo, #fff)!important; font-weight:600;
                  border-bottom:1px solid var(--nv-grid-border); }
.nv-cc-totale td.nv-cc-gutter, .nv-cc-totale td.nv-cc-totale-vuoto{ background:transparent; }
/* la corsia del gruppo nella riga di totale sta sul fondo pagina, non sul nastro: ha il colore del gruppo come le altre */
.nv-cc-totale td.nv-cc-gutter{ color:var(--cc-colore, var(--nv-accent))!important; }
.nv-cc-totale .nv-cc-imp{ color:var(--cc-testo, #fff)!important; }
.nv-cc-risultato td{ background:#1f2a44; }

.nv-cc-imp{ font-variant-numeric:tabular-nums; color:var(--nv-text-value); text-decoration:none; }
a.nv-cc-imp:hover{ color:var(--nv-accent); text-decoration:underline; }
.nv-cc-perc{ display:block; font-size:.74rem; color:var(--nv-text-muted); }
/* La stessa percentuale dentro una riga di TOTALE, che ha per fondo il colore del gruppo: il grigio
   di `--nv-text-muted` su un blu #3f78e0 da' contrasto 1,22 — cioe' non si legge, e l'audit degli
   stili lo misurava come «testo illeggibile». Il td porta gia' `color:#fff!important`, ma un figlio
   con un `color` suo non eredita: la regola va scritta per lui. Bianco attenuato, non bianco pieno,
   perche' resti la gerarchia fra l'importo e la sua percentuale. */
.nv-cc-totale .nv-cc-perc, .nv-cc-risultato .nv-cc-perc{ color:var(--cc-testo, #fff); opacity:.72; }
.nv-cc-fuori td{ color:var(--nv-text-muted)!important; font-style:italic; }

/* Il piano dei centri: la scheda di un gruppo, col bordo del suo colore. */
.nv-cc-gruppo{ border:1px solid var(--nv-grid-border); border-left:4px solid var(--cc-colore, var(--nv-accent));
               border-radius:10px; padding:12px 14px; margin-bottom:12px; }
.nv-cc-gruppo.is-spento{ opacity:.55; }
.nv-cc-gruppo-testa{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.nv-cc-gruppo-ico{ color:var(--cc-colore, var(--nv-accent)); font-size:1.15rem; }
.nv-cc-gruppo-nome{ font-weight:700; color:var(--nv-text-title); flex-grow:1; }
.nv-cc-voce{ display:flex; align-items:center; gap:8px; padding:6px 0;
             border-top:1px solid var(--nv-grid-border); color:var(--nv-text-value); font-size:.88rem; }
.nv-cc-voce.is-spenta{ opacity:.5; }
.nv-cc-voce-nome{ flex-grow:1; }
.nv-cc-voce-sez{ font-size:.72rem; color:var(--nv-text-muted); text-transform:uppercase; letter-spacing:.3px; }
.nv-cc-icona-scelta{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
                     border:1px solid var(--nv-grid-border); border-radius:8px; margin:0 6px 6px 0;
                     color:var(--nv-text-value); cursor:pointer; }
.nv-cc-icona-scelta.is-active{ border-color:var(--nv-accent); color:var(--nv-accent); }

/* Il badge «assegnato in automatico» e la stella del fornitore ricorrente. */
.nv-cc-auto{ font-size:.7rem; color:var(--nv-accent); border:1px solid var(--nv-accent);
             border-radius:20px; padding:1px 8px; white-space:nowrap; }
.nv-cc-stella{ color:var(--nv-warning); }

@media (max-width: 991.98px){
  .nv-cc-gutter{ width:70px; }
  .nv-cc-gutter-txt{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   AMMINISTRAZIONE ▸ TESORERIA — i tre grafici, il cursore, i riquadri del giorno.

   Il cursore è un elemento nostro sopra i grafici, non il crosshair di ApexCharts: quello vive
   sull'hover e sparisce quando il mouse esce, qui invece la posizione è uno STATO della pagina che
   si sposta col trascinamento, col dito e con le frecce. Per questo i tre grafici stanno dentro un
   contenitore `position:relative` e tutto quello che li attraversa è posizionato in assoluto.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.nv-tes-wrap{ padding:0 6px; }

.nv-tes-head{ display:flex; align-items:center; justify-content:space-between; margin:6px 0 10px; }
.nv-tes-title{ font-size:1.45rem; font-weight:300; color:var(--nv-text-title); letter-spacing:.2px; }
.nv-tes-sub{ font-size:1.45rem; font-weight:300; color:var(--nv-text-muted); }
.nv-tes-head-right{ display:flex; align-items:center; gap:18px; }

.nv-tes-menu{ color:var(--nv-text-label)!important; font-size:.95rem; text-decoration:none; }
.nv-tes-menu:hover{ color:var(--nv-accent)!important; }
.nv-tes-menu i{ font-size:.8rem; margin-left:4px; }
.nv-tes-dropdown{ background:#0b0b0b; border:1px solid var(--nv-grid-border); border-radius:8px; padding:6px; }
.nv-tes-dropdown .dropdown-item{ color:var(--nv-text-value); border-radius:6px; padding:6px 10px; white-space:normal; }
.nv-tes-dropdown .dropdown-item:hover{ background:#55d5cc14; color:var(--nv-text-title); }
.nv-tes-dropdown .dropdown-item.active{ background:#55d5cc22; color:var(--nv-accent); }
.nv-tes-dropdown .dropdown-header{ color:var(--nv-text-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; }
.nv-tes-dropdown-stime{ min-width:340px; }
.nv-tes-stime-nome{ display:block; font-weight:600; }
.nv-tes-stime-desc{ display:block; font-size:.78rem; color:var(--nv-text-muted); }
.nv-tes-stime-nota{ padding:8px 10px; font-size:.78rem; color:var(--nv-text-muted); border-top:1px solid var(--nv-grid-border); }
.nv-tes-mesi{ display:flex; flex-wrap:wrap; gap:4px; padding:4px 10px 8px; }
.nv-tes-mese{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
              border:1px solid var(--nv-grid-border); border-radius:6px; color:var(--nv-text-value);
              text-decoration:none; font-size:.8rem; }
.nv-tes-mese:hover{ border-color:var(--nv-accent); color:var(--nv-accent)!important; }
.nv-tes-mese.is-active{ background:#55d5cc22; border-color:var(--nv-accent); color:var(--nv-accent)!important; }

/* ── I grafici e quello che li attraversa ──────────────────────────────────────────────────── */
.nv-tes-charts{ position:relative; padding-top:64px; padding-bottom:62px; outline:none; cursor:crosshair; }
.nv-tes-charts.is-trascino{ cursor:ew-resize; }
.nv-tes-charts:focus-visible{ box-shadow:0 0 0 1px var(--nv-accent); border-radius:8px; }
.nv-tes-chart{ min-height:190px; }
.nv-tes-legend{ font-size:.9rem; color:var(--nv-text-value); margin:2px 0 -10px 10px; }
.nv-tes-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.nv-tes-dot.is-liq{ background:var(--nv-strong-blu); }
.nv-tes-dot.is-out{ background:var(--nv-strong-rosso); }
.nv-tes-dot.is-in{ background:var(--nv-strong-verde); }

/* La riga verticale. `pointer-events:none` perché il trascinamento lo raccoglie il contenitore:
   se la raccogliesse la riga, uscire di due pixel dal tratteggio interromperebbe il gesto. */
.nv-tes-cursor{ position:absolute; top:58px; bottom:56px; width:0; left:0;
                border-left:1px dashed var(--nv-text-title); opacity:.75; pointer-events:none; z-index:6; }
/* il punto sotto il cursore: pieno del colore della serie, bordo scuro, più grande dei puntini */
.nv-tes-marker{ position:absolute; width:12px; height:12px; border-radius:50%; background:var(--nv-page-bg);
                border:2px solid var(--nv-page-bg);
                transform:translate(-50%,-50%); pointer-events:none; z-index:7; display:none; }
.nv-tes-marker.is-liq{ background:var(--nv-strong-blu); }
.nv-tes-marker.is-out{ background:var(--nv-strong-rosso); }
.nv-tes-marker.is-in{ background:var(--nv-strong-verde); }

.nv-tes-badge-top,
.nv-tes-badge-bottom{ position:absolute; transform:translateX(-50%); z-index:8; pointer-events:none;
                      background:var(--nv-grid-header); border-radius:10px; text-align:center; }
.nv-tes-badge-top{ top:0; padding:8px 16px; min-width:132px; border:1px solid var(--nv-strong-blu);
                   box-shadow:0 0 18px rgba(62,168,245,.35); }
.nv-tes-badge-lbl{ font-size:.72rem; color:var(--nv-text-muted); }
.nv-tes-badge-val{ font-size:1.15rem; font-weight:600; color:var(--nv-strong-blu); }
.nv-tes-badge-bottom{ bottom:0; padding:6px 18px; min-width:92px; border:1px solid var(--nv-success);
                      box-shadow:0 0 18px rgba(87,213,85,.30); }
.nv-tes-badge-mese{ font-size:.72rem; color:var(--nv-text-muted); letter-spacing:1px; }
.nv-tes-badge-giorno{ font-size:1.35rem; font-weight:600; color:var(--nv-text-title); line-height:1.1; }

/* La freccetta che attacca i due badge alla riga, come nel riferimento visivo. */
.nv-tes-badge-top::after{ content:''; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid var(--nv-strong-blu); }
.nv-tes-badge-bottom::before{ content:''; position:absolute; left:50%; top:-7px; transform:translateX(-50%);
  border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:7px solid var(--nv-success); }

.nv-tes-zoom{ display:flex; align-items:center; gap:8px; margin-top:6px; padding-left:10px; }
.nv-tes-zoom-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:28px;
                  padding:0 8px; border:1px solid var(--nv-grid-border); border-radius:6px;
                  color:var(--nv-text-label); cursor:pointer; font-size:.82rem; }
.nv-tes-zoom-btn:hover{ border-color:var(--nv-accent); color:var(--nv-accent); }
.nv-tes-zoom-nota{ font-size:.76rem; color:var(--nv-text-muted); margin-left:6px; }

/* ── I tre riquadri di destra ──────────────────────────────────────────────────────────────── */
/* Il titolo del riquadro porta il colore della sua curva, come nel riferimento visivo: i tre
   riquadri stanno uno sotto l'altro e senza il colore si leggono come un elenco solo. */
.nv-tes-stima{ display:none; margin-left:8px; font-size:.66rem; text-transform:uppercase; letter-spacing:.5px;
               color:var(--nv-warning); border:1px solid var(--nv-warning); border-radius:20px; padding:0 7px; }
/* LA COLONNA DESTRA (24/09/2026, collaudo): è la colonna contatori delle liste — renderLayoutLista,
   celle .matrixCell con .matrixLabel e .matrixValue.is-money. La barra di ogni cella è il colore
   della sua curva. Sotto uscite ed entrate l'elenco dei movimenti del giorno: al massimo cinque. */
.nv-tes-cella.is-liq{ --matrix-color: var(--nv-strong-blu); }
.nv-tes-cella.is-out{ --matrix-color: var(--nv-strong-rosso); }
.nv-tes-cella.is-in { --matrix-color: var(--nv-strong-verde); }
.nv-tes-lista{ margin-top:10px; padding-left:15px; }
.nv-tes-voce-altri{ font-size:.8rem; color:var(--nv-text-muted); }
.nv-tes-voce{ font-size:.86rem; line-height:1.5; color:var(--nv-text-value);
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* una riga per movimento; il testo intero nel tooltip */
.nv-tes-voce-imp{ font-weight:600; }
.nv-tes-voce-imp.is-out{ color:var(--nv-danger-testo); }
.nv-tes-voce-imp.is-in{ color:var(--nv-success); }
.nv-tes-voce-dett{ color:var(--nv-text-muted); }
.nv-tes-scaduta{ font-size:.68rem; color:var(--nv-warning); border:1px solid var(--nv-warning);
                 border-radius:20px; padding:0 6px; }



/* La riga dei conti che quadrano: è la prova, a video, che il previsionale non è un disegno. */
.nv-tes-quadratura{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin:10px 4px 0;
                    padding:10px 14px; border-top:1px solid var(--nv-grid-border);
                    font-size:.84rem; color:var(--nv-text-label); }
.nv-tes-quad-nota{ color:var(--nv-warning); }

/* ── Liste, finestre, import ───────────────────────────────────────────────────────────────── */
.nv-tes-sotto{ font-size:.76rem; color:var(--nv-text-muted); }
.nv-tes-punteggio{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:22px;
                   border-radius:20px; font-size:.76rem; font-weight:600; }
.nv-tes-punteggio.is-alta{ background:#57d55522; color:var(--nv-success); border:1px solid var(--nv-success); }
.nv-tes-punteggio.is-media{ background:#f5a62322; color:var(--nv-warning); border:1px solid var(--nv-warning); }
.nv-tes-punteggio.is-bassa{ background:#9a9a9a22; color:#9a9a9a; border:1px solid #9a9a9a; }




.nv-tes-rec-testata{ padding:8px 0 12px; border-bottom:1px solid var(--nv-grid-border); margin-bottom:12px;
                     color:var(--nv-text-value); }
.nv-tes-rec-importo{ font-size:1.2rem; font-weight:600; margin-top:4px; color:var(--nv-text-title); }

.nv-tes-form-wrap{ padding:0 6px; }





.nv-tes-errori{ margin-top:10px; font-size:.78rem; color:#ef6b6b; }
.nv-tes-avviso{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px;
                border:1px solid var(--nv-grid-border); border-radius:8px; color:var(--nv-text-value); }
.nv-tes-avviso i{ font-size:1.2rem; color:var(--nv-warning); margin-top:2px; }

/* ── Primo ingresso ────────────────────────────────────────────────────────────────────────── */
.nv-tes-onb{ display:flex; justify-content:center; padding:40px 0; }
.nv-tes-onb-box{ max-width:720px; text-align:center; }
.nv-tes-onb-icona{ font-size:3rem; color:var(--nv-accent); margin-bottom:10px; }
.nv-tes-onb-titolo{ color:var(--nv-text-title); font-weight:300; }
.nv-tes-onb-testo{ color:var(--nv-text-label); font-size:.95rem; }
.nv-tes-onb-passi{ display:flex; flex-direction:column; gap:10px; margin-top:22px; text-align:left; }
.nv-tes-onb-passo{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px;
                   border:1px solid var(--nv-grid-border); border-radius:8px; color:var(--nv-text-value); }
.nv-tes-onb-passo.is-ora{ border-color:var(--nv-accent); }
.nv-tes-onb-num{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
                 border-radius:50%; border:1px solid var(--nv-grid-border); color:var(--nv-text-label);
                 flex:0 0 auto; font-size:.82rem; }
.nv-tes-onb-passo.is-ora .nv-tes-onb-num{ border-color:var(--nv-accent); color:var(--nv-accent); }

/* La vista aperta, nel selettore della toolbar. */
.toolbar-icon.is-active{ color:var(--nv-accent); }

@media (max-width: 991.98px){
  .nv-tes-head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .nv-tes-zoom-nota{ display:none; }
}

/* ── Tesoreria ▸ wizard del primo ingresso ─────────────────────────────────────────────────────
   Il wizard del modulo usa la veste dei wizard di gruppo (.nuvolai-home, .nuvolai-greeting-title,
   .nuvolai-chip) e i riquadri .nv-tes-onb-passo già definiti sopra: qui c'è solo quel poco che
   distingue un riquadro che si legge da uno che si SCEGLIE — il cursore e il bordo di chi è
   selezionato. Lo stato scelto riusa .is-ora, che è già "il passo di adesso". */
.nv-tes-onb-wiz .nv-tes-onb-icona{ margin-bottom:6px; }
.tes-onb-scenario{ cursor:pointer; transition:border-color .15s ease; }
.tes-onb-scenario:hover{ border-color:var(--nv-accent); }
.tes-onb-scenario .nv-tes-onb-num{ border:none; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   MAGAZZINO (BLOCCO 7 del TASK 1) — prefisso `nv-mgz-`.

   NON `nv-mag-`: quel prefisso è già del pane «Disponibilità» della scheda prodotto (.nv-mag-grid,
   .nv-mag-card, .nv-mag-val), e due componenti diversi che condividono il prefisso sono due
   componenti che prima o poi si rubano una regola a vicenda.

   Il modulo riusa tutto quello che c'è già — .nv-panel, .nv-kpi-label, .nv-kpi-val, .matrixCell,
   .card-body-table, .list-action-icon, .badge — e qui sotto c'è solo quel poco che non esisteva.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* La colonna del disponibile è quella che si guarda per prima: pesa di più delle altre. */
.nv-mgz-disp{ font-size:1.02rem; }

/* Il nome dell'articolo o il codice del documento, dentro un .nv-panel di riepilogo. */
.nv-mgz-titolo{ font-size:1.1rem; font-weight:700; line-height:1.3; margin-top:2px; }
.nv-mgz-su{ color:#8a8a8a; font-size:.9rem; font-weight:400; }
.nv-mgz-link{ color:var(--nv-accent); text-decoration:none; }
.nv-mgz-link:hover{ text-decoration:underline; }

/* Il campo di conteggio dentro il foglio di inventario: stretto, allineato a destra, il numero
   deve leggersi accanto a quello che il sistema dice. */
.nv-mgz-conta{ width:96px; display:inline-block; text-align:right; }

/* Le righe che si compongono dentro una finestra (le righe di un trasferimento, i documenti da
   caricare): una lista, non una tabella — non hanno intestazioni e non si ordinano. */
.nv-mgz-righe, .nv-mgz-doclist{ max-height:260px; overflow-y:auto; margin-bottom:12px; }
.nv-mgz-riga{ display:flex; align-items:center; gap:12px; padding:8px 10px; border:1px solid #3c3c3c;
              border-radius:6px; margin-bottom:6px; }
.nv-mgz-riga > span:first-child{ flex:1 1 auto; min-width:0; }
.nv-mgz-riga-q{ flex:0 0 auto; font-weight:700; }
.nv-mgz-nota{ color:#cfcfcf; margin:4px 0 12px; min-height:1.2em; }

/* Le finestre del magazzino: stessa veste di quelle della tesoreria. */
.nv-mgz-modal{ background:#0a0a0a; }

/* Nessun magazzino attivo: la pagina che dice cosa manca invece di una tabella vuota. */






/* ── Scheda prodotto ▸ «Disponibilità» quando il modulo Magazzino è licenziato ─────────────────
   Le card restano quelle di sempre (.nv-mag-*): qui c'è solo quello che il modulo aggiunge — il
   dettaglio per magazzino, la nota sulla soglia e le ultime righe di registro. */
.nv-mgz-scheda-mag{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }



.nv-mgz-scheda-nota{ color:#8a8a8a; font-size:.8rem; margin-top:12px; }
.nv-mgz-scheda-storico{ margin-top:12px; border-top:1px solid #2a2a2a; padding-top:8px; }
.nv-mgz-scheda-mov{ display:flex; align-items:center; gap:10px; font-size:.8rem; padding:3px 0; }
.nv-mgz-scheda-data{ flex:0 0 78px; color:#8a8a8a; }
.nv-mgz-scheda-causale{ flex:1 1 auto; color:#cfcfcf; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   PRODUZIONE (BLOCCO 8 del TASK 1) — prefisso `nv-prd-`.

   Sette regole, non una di più. Il modulo riusa tutto quello che c'è già — .nv-panel, .nv-kpi-label,
   .nv-kpi-val, .view-panel, .matrixCell, .badge, .table — e qui sta solo quello che quelle classi
   non sanno fare: la barra dell'avanzamento, l'avviso del materiale che manca, e la veste delle
   finestre.

   Tutti i colori sono TOKEN (`var(--nv-*)`): nel tema light il layer di override li ridefinisce
   già, quindi queste regole funzionano in tutti e due i temi senza una riga in nuvola_light.css.
   È la ragione per cui non c'è nessun #hex qui dentro.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* La barra dell'avanzamento nella lista degli ordini: dice a colpo d'occhio quanto manca. */
.nv-prd-avanz{ height:6px; border-radius:3px; background:var(--nv-grid-border); overflow:hidden; margin-bottom:3px; }
.nv-prd-avanz-barra{ height:100%; background:var(--nv-accent); border-radius:3px; }

/* «Non c'è abbastanza materiale»: si dice PRIMA di premere Avvia, non dopo. */
.nv-prd-avviso{ border:1px solid var(--nv-warning); border-left-width:4px; border-radius:6px;
                padding:12px 16px; color:var(--nv-text-value); }
.nv-prd-avviso b{ color:var(--nv-text-title); }

/* Le righe dei consumi dentro la finestra di completamento: si scorre, non si allunga la pagina. */
.nv-prd-righe{ max-height:320px; overflow-y:auto; margin-bottom:12px; }

/* La nota che spiega il numero accanto (ore previste, giacenza attuale). */
.nv-prd-nota{ color:var(--nv-text-value); margin:4px 0 12px; min-height:1.2em; }

/* Il collegamento a una scheda (la distinta dall'ordine, l'ordine dalla distinta). */
.nv-prd-link{ color:var(--nv-accent); text-decoration:none; }
.nv-prd-link:hover{ text-decoration:underline; }

/* La veste delle finestre del modulo, la stessa del Magazzino. */
.nv-prd-modal{ background:var(--nv-grid-header); }

/* ── CENTRI DI COSTO: conto economico ─────────────────────────────────────────────────────────
   (21/09/2026) Tre cose sole, e nessuna di queste è una geometria nuova: il prospetto scorre nel
   riquadro della dashboard (`.nv-dash-scroll-wrap` / `.nv-dash-scroll`, già definiti sopra),
   l'intestazione delle colonne resta ferma mentre si scorre, e a destra di ogni fascia c'è la
   cella che ospita il suo grafico.

   Perché la pagina non scorreva prima: `body { overflow:hidden }` è globale e voluto — in Nuvolai
   scorre il riquadro del contenuto, non la pagina. Il conto economico non aveva un riquadro, e
   tutto quello che finiva sotto il footer era tagliato via senza barra di scorrimento. Non era un
   `overflow` mancante su questa tabella: era un'ALTEZZA mancante sul contenitore. */

/* L'altezza vera la mette il JS a runtime (spazio fino al footer): qui solo la posizione, che serve
   all'ombra `.nv-fade-box` in fondo. La eredita già da .nv-dash-scroll-wrap; la si ripete per
   rendere esplicito che questo riquadro è il riferimento di quell'ombra. */
.nv-cc-wrap{ position:relative; }

/* L'INTESTAZIONE CHE NON SCAPPA. Senza, a metà prospetto non si sa più quale colonna sia il 2024 e
   quale il 2026 — e sono tre colonne di numeri che si somigliano. Lo sfondo opaco è obbligatorio:
   una riga sticky trasparente lascia passare sotto di sé le righe che scorrono. */
.nv-cc-prospetto thead th.nv-cc-th{ position:sticky; top:0; z-index:4;
                                    background:var(--nv-grid-header); }

/* La colonna dei grafici: una cella per fascia, in rowspan sulle righe di quella fascia. È la
   tabella ad allinearla al blocco — qui non c'è nessun offset in pixel da tenere aggiornato. */
.nv-cc-th-graf{ width:300px; }
.nv-cc-graf{ width:300px; vertical-align:middle; text-align:center;
             border-bottom:1px solid var(--nv-grid-border); border-left:1px solid var(--nv-grid-border); }
.nv-cc-graf-box{ width:100%; min-height:150px; }
/* Il menu ≡ di ApexCharts dentro una cella stretta: senza questo sta sopra la prima barra. */
.nv-cc-graf .apexcharts-toolbar{ z-index:2; }

/* Sotto il desktop la colonna del grafico si stringe invece di sparire: NON si può nasconderla con
   `display:none`, perché il nastro del totale attraversa anche quella colonna con un colspan — a
   cella nascosta la riga del totale resterebbe più larga di tutte le altre e il prospetto si
   sfalserebbe. Si stringe, e il grafico si stringe con lei. */
@media (max-width: 1399.98px){
  .nv-cc-th-graf, .nv-cc-graf{ width:220px; }
}

/* ── COLLEGAMENTO BANCARIO ────────────────────────────────────────────────────────────────────
   Azienda ▸ Banche (charter del 21/09/2026). Il grosso della pagina è Bootstrap più i componenti
   che c'erano già (.nv-panel, .nv-matrix): qui stanno solo le quattro cose che non esistevano —
   la pillola dello stato del consenso, il saldo letto dalla banca, le righe cliccabili delle due
   scelte (banca e conto) e il riquadro dell'informativa. */

/* La scheda di un conto corrente. `.nv-panel` nasce col bordo dello stesso nero del fondo, perché
   nelle pagine dove è nato sta da solo in una colonna e non ha niente accanto da cui distinguersi.
   Qui ce ne sono due o tre affiancate, e senza un bordo visibile si leggono come un elenco unico:
   il bordo è l'unica differenza, e vale solo per questa pagina. */
.nv-banca-conto{ border-color:#333; }

/* La pillola dello stato. Sei stati, tre colori: verde quello che funziona, ambra quello che
   chiede attenzione adesso, rosso quello che ha smesso. Il grigio è l'assenza, che non è un
   problema — un conto non collegato è la normalità, non un guasto. */
.nv-banca-stato{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.74rem;
                 font-weight:600; white-space:nowrap; border:1px solid transparent; }
.nv-banca-stato.is-non_collegato{ color:var(--nv-text-label); border-color:#444; }
.nv-banca-stato.is-attivo{ color:#57d555; border-color:#57d5554d; background:#57d5551a; }
.nv-banca-stato.is-in_attesa{ color:#e0a23c; border-color:#e0a23c4d; background:#e0a23c1a; }
.nv-banca-stato.is-scaduto,
.nv-banca-stato.is-errore{ color:var(--nv-danger-testo); border-color:#db31314d; background:#db31311a; }
.nv-banca-stato.is-revocato{ color:var(--nv-text-label); border-color:#444; background:#ffffff0a; }

/* Avviso e errore: due nastri dentro un .nv-panel, distinti dal bordo sinistro e nient'altro.
   Non un fondo pieno: la pagina ne può mostrare tre di fila (tre conti in scadenza) e tre
   rettangoli colorati uno sull'altro smettono di essere un avviso. */
.nv-banca-avviso{ border-left:3px solid #e0a23c; }
.nv-banca-errore{ border-left:3px solid #db3131; }
/* `.nv-panel` nasce con `height:100%`, perché nelle pagine dove è nato sta dentro una colonna di
   una riga di pannelli affiancati e deve pareggiarli. Un nastro che sta da solo sopra la pagina,
   invece, prende tutta l'altezza dello schermo: qui l'altezza torna a essere quella del testo. */
.nv-banca-avviso, .nv-banca-errore, .nv-banca-nastro{ height:auto; }
.nv-banca-errore-riga{ color:var(--nv-danger-testo); }

/* Il saldo letto dalla banca: il numero grande, e accanto — piccolo — QUALE saldo è e a che
   giorno. Il contabile e il disponibile non sono lo stesso numero, e un saldo senza data sembra
   di oggi anche quando è di tre giorni fa. */
.nv-banca-saldo{ margin-top:10px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.nv-banca-saldo-num{ font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; }
.nv-banca-saldo-num.is-pos{ color:var(--nv-money-pos); }
.nv-banca-saldo-num.is-neg{ color:var(--nv-money-neg); }

/* Un movimento che la banca non ha ancora contabilizzato. Si mostra — sparire e ricomparire
   sarebbe peggio — ma si dice che è provvisorio, perché su un PDNG non si riconcilia niente. */
.nv-banca-pdng{ margin-left:6px; padding:1px 6px; border-radius:4px; font-size:.68rem;
                color:#e0a23c; border:1px solid #e0a23c4d; }

/* Le due scelte — quale banca, quale conto — sono elenchi di righe cliccabili dentro una modal, non
   una <select>: le opzioni arrivano dal webservice a pagina aperta, e nessun generatore DSL sa
   costruire un campo da una lista che non è in database. Su ogni riga c'è il dato su cui la scelta
   si fa davvero: il nome della banca, l'IBAN del conto. */
.nv-banca-elenco{ max-height:340px; overflow-y:auto; text-align:left; margin-top:6px; }
.nv-banca-scelta{ display:block; padding:10px 12px; border:1px solid #333; border-radius:6px;
                  margin-bottom:6px; color:var(--nv-text-value)!important; text-decoration:none;
                  cursor:pointer; }
.nv-banca-scelta:hover{ border-color:#55d5cc; background:#55d5cc14; }
.nv-banca-scelta-sotto{ display:block; font-size:.78rem; color:var(--nv-text-label); }

/* L'informativa che si legge PRIMA di andare alla banca. Allineata a sinistra e giustificata,
   perché è un testo da leggere e non un titolo da guardare. */
.nv-banca-privacy{ text-align:justify; font-size:.86rem; color:var(--nv-text-label);
                   line-height:1.45; margin-bottom:6px; }

/* ── CENTRI DI COSTO: indice e dettaglio ──────────────────────────────────────────────────────
   Tre cose sole, tutte figlie di classi che esistono già (`nv-cc-*`, `nv-matrix`, `form-check`):
   il nome di gruppo modificabile nella proposta del wizard, la riga del totale in fondo al drawer
   del dettaglio, e l'allineamento della spunta dentro una voce del piano proposto.
   Niente colori nuovi: solo i token del tema. */
.nv-cc-prop-nome{ max-width:280px; font-weight:700; }
.nv-cc-prop .nv-cc-voce .form-check{ flex-grow:1; }
.nv-cc-prop .nv-cc-voce .form-check-label{ cursor:pointer; }

/* Il totale del drawer: stessa riga di sempre, ma staccata dall'elenco e in evidenza — è il numero
   che deve quadrare con l'importo su cui si è cliccato, quindi non può sembrare una riga come le
   altre. */
.nv-cc-drawer-tot td{ border-top:2px solid var(--nv-grid-border); padding-top:12px;
                      background:transparent; color:var(--nv-text-title); }
/* ── ICONE DI MARCHIO: Magento e Shopify ──────────────────────────────────────────────────────
   Le `fa-brands` sono PIENE e stonano in un footer fatto tutto di `fa-sharp-duotone fa-thin`.
   Le due icone giuste sono custom icon del kit FontAwesome (`fa-kit fa-magento-thin`,
   `fa-kit fa-shopify-thin`), outline, path unico.

   IL KIT NON È CARICATO A RUNTIME, e non lo sarà. Dal 21/07/2026 FA 7 Pro è self-hostato
   (`fa7/fa7.min.css` + `fa7/webfonts/`) e lo <script> del kit è stato tolto apposta: una
   dipendenza da un CDN esterno per tutte le icone di tutti i clienti è lo scenario del 20/07,
   quando si ruppero a catena. Il «self-host kit» di FontAwesome non si usa (decisione del
   22/09/2026): la famiglia `fa-kit` quindi non esiste nel set, e il glifo lo disegna una
   MASCHERA, col tracciato preso dal kit stesso. È la soluzione definitiva, non un ripiego.

   PERCHE' EREDITA TUTTO. Il colore non e' scritto qui: si legge da `--fa-primary-color`, lo stesso
   token che governa le icone duotone vicine. Quindi `.footer-icon` la fa grigia, `.footer-icon-sm`
   la fa del suo grigio, e `.footer-icon-selected` la fa teal — senza una riga in piu'. Lo zoom
   all'hover e' un `transform` sull'<i>, che vale identico; il tooltip sta sul wrap. La scatola e'
   1em x 1em, cosi' la maschera segue il `font-size` esattamente come farebbe un glifo.

   ⚠️ LE VIRGOLETTE DENTRO L'SVG SONO SINGOLE, e non e' uno stile: la `url()` sta fra virgolette
   doppie, e un `"` nell'SVG chiude la stringa a meta'. Il sintomo e' inconfondibile — la maschera
   non e' valida e il colore dipinge la SCATOLA PIENA invece del glifo.
   Procedimento per aggiungerne una: `.claude/rules/css-ux.md`, «Icone di marchi esterni».

   PERCHE' EREDITA TUTTO. Il colore non e' scritto qui: si legge da `--fa-primary-color`, lo stesso
   token che governa le icone duotone vicine. Quindi `.footer-icon` la fa grigia, `.footer-icon-sm`
   la fa del suo grigio, e `.footer-icon-selected` la fa teal — senza una riga in piu'. Lo zoom
   all'hover e' un `transform` sull'<i>, che vale identico; il tooltip sta sul wrap. La scatola e'
   1em x 1em, cosi' la maschera segue il `font-size` esattamente come farebbe un glifo. */
/* LA SCATOLA È QUELLA DI FA7 (24/09/2026, collaudo punto 6 — la terza volta): una icona fa7 è
   larga `var(--fa-width, 1.25em)` e alta 1em, col glifo centrato. Con 1em x 1em Magento e Shopify
   erano 4px più strette delle altre, e nel footer lo spazio fra le icone cambiava proprio lì.
   La maschera resta alta 1em e centrata dentro la scatola larga. Il VIEWBOX è ritagliato sul
   tracciato reale (getBBox): come un glifo fa7, il disegno riempie l'em in altezza — Shopify, con
   il viewBox 448x512 largo del kit, era alto 490/512 e risultava 1,5px più basso delle vicine.
   Misura in regressione: scenari_fix_24_09 F6, sul DISEGNO (pixel), non sulla scatola. */
.fa-kit.fa-magento-thin,
.fa-kit.fa-shopify-thin {
  display: inline-block;
  width: var(--fa-width, 1.25em);
  height: 1em;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-mask-size: auto 1em; mask-size: auto 1em;
  background-color: var(--fa-primary-color, currentColor);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
}
.fa-kit.fa-magento-thin { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='2%200%20444%20512'><path%20d='M224%200l222%20128%200%20256-63.5%2036.5%200-255.8-158.5-91.6-158.5%2091.6%200%20255.8-63.5-36.5%200-256zM18%20137.2l0%20237.5%2031.5%2018.1%200-237.3%20174.5-100.9%20174.5%20100.9%200%20237.3%2031.5-18.1%200-237.5-206-118.7zm237.7%2027.5l63.3%2036.6%200%20255.9-95%2054.8-95-54.8%200-255.9%2063.3-36.6%200%20255.8%2031.7%2018.3%2031.7-18.3zm16%20265l-47.7%2027.6-47.7-27.6%200-237.3-31.3%2018.1%200%20237.5%2079%2045.5%2079-45.5%200-237.5-31.3-18.1z'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='2%200%20444%20512'><path%20d='M224%200l222%20128%200%20256-63.5%2036.5%200-255.8-158.5-91.6-158.5%2091.6%200%20255.8-63.5-36.5%200-256zM18%20137.2l0%20237.5%2031.5%2018.1%200-237.3%20174.5-100.9%20174.5%20100.9%200%20237.3%2031.5-18.1%200-237.5-206-118.7zm237.7%2027.5l63.3%2036.6%200%20255.9-95%2054.8-95-54.8%200-255.9%2063.3-36.6%200%20255.8%2031.7%2018.3%2031.7-18.3zm16%20265l-47.7%2027.6-47.7-27.6%200-237.3-31.3%2018.1%200%20237.5%2079%2045.5%2079-45.5%200-237.5-31.3-18.1z'/></svg>"); }
.fa-kit.fa-shopify-thin { -webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='28%2017.9%20396%20490.1'><path%20d='M62%20150l55.2-10.4%20.2-1.4%201.3-7.2%201.4-7%201.6-6.8%201.8-6.6%201.9-6.3%202-6.1%202.2-5.9%202.3-5.6%202.3-5.4%202.5-5.2%202.6-5%202.7-4.7%202.8-4.6%202.8-4.3%202.9-4%203-3.9%203-3.6%203.1-3.4%203.1-3.2%203.2-3%203.2-2.7%203.2-2.6%203.2-2.3%203.2-2.1%203.3-1.9%203.2-1.7%203.2-1.4%203.3-1.2%203.2-1%203.2-.8%203.1-.5%203.2-.3%203.1%200%203%20.2%203%20.5%203%20.8%202.9%201.1%202.7%201.2%202.7%201.3%202.5%201.5%202.5%201.6%202.5%201.7%204.6%203.8%202.2%202.1%204.2%204.4%201.9%202.4%202%202.5%201.8%202.5%201.8%202.7%201.7%202.7%201.7%202.8%201.6%202.9%201.5%203%201.4%203%201.5%203.1%202.6%206.4%201.2%203.3%201.2%203.4%201.1%203.4%201%203.4%201%203.5%201%203.6%20.9%203.6%201.6%207.4%20.7%203.7%20.5%202.7%2027-5.1%2038-7%2048%2044%2038%20340-124%2026-272-68zM45.5%20427.9l246.5%2061.6%200-366.7-215.5%2040.7zM308%20490l98.5-20.7-35.7-319.6-37.7-34.5-25.1%204.6zM257.2%20113.1l-.5-2.8-.6-3.5-.7-3.4-.8-3.4-.8-3.3-1.8-6.6-3-9.3-1.2-2.9-1.1-2.9-1.2-2.9-1.2-2.7-1.3-2.7-1.4-2.6-1.3-2.5-1.5-2.4-1.4-2.3-1.5-2.2-1.5-2.1-3.2-4-1.7-1.8-1.6-1.7-1.7-1.6-1.8-1.5-1.7-1.4-1.8-1.3-1.9-1.1-1.8-1.1-1.9-1-1.9-.8-1.9-.7-1.3-.4-1.6-.2-1.6-.1-1.8%200-1.9%20.2-2.1%20.3-2.1%20.5-2.2%20.7-2.4%20.9-2.4%201.1-2.5%201.2-2.5%201.5-2.6%201.7-2.6%201.9-2.6%202.1-2.7%202.3-2.7%202.5-2.6%202.7-2.7%203-2.6%203.1-2.6%203.4-2.6%203.6-2.5%203.8-2.5%204.1-2.4%204.2-2.4%204.5-2.2%204.7-2.2%205-2.1%205.2-2%205.4-1.9%205.6-1.7%205.9-1.7%206.1-1.5%206.3-1.3%206.6-.4%202.4zm-50.1%20143l-1.1-1.9-1.1-1.6-1.4-1.5-1.5-1.5-1.7-1.5-1.9-1.5-2.1-1.3-2.3-1.3-2.4-1.3-2.5-1.1-2.6-1.1-5.6-1.8-2.8-.7-3-.6-2.9-.5-3-.4-3-.2-3-.1-2.9%200-2.9%20.2-2.9%20.3-5.4%201-2.6%20.7-2.4%20.9-2.3%201-2.2%201.1-2%201.2-1.9%201.3-1.7%201.5-1.6%201.6-1.4%201.7-1.2%201.9-1.1%202-.9%202.3-.8%202.4-.5%202.6-.4%202.9-.1%203.2%20.1%202.5%20.4%202.3%20.6%202.1%20.8%202%201%201.9%201.2%201.9%201.5%201.8%201.7%201.8%202%201.7%202.2%201.7%202.4%201.7%202.5%201.7%202.8%201.6%203%201.5%203.1%201.6%203.2%201.5%203.3%201.5%203.4%201.6%207%203%203.6%201.6%203.5%201.6%203.6%201.6%203.6%201.7%203.5%201.8%203.4%201.9%203.4%202%203.3%202.1%203.2%202.2%203.1%202.4%202.9%202.6%202.8%202.8%202.6%203%202.3%203.2%202%203.4%201.8%203.8%201.4%203.9%201%204.1%20.6%204.4%20.2%204.5-.2%204.4-.5%204.3-.8%204-1.2%203.9-1.5%203.6-1.8%203.5-2.1%203.1-2.4%203-2.6%202.7-2.7%202.4-3%202.2-3.1%201.9-3.3%201.7-3.3%201.5-3.5%201.2-3.5%201.1-3.6%20.8-3.7%20.7-3.7%20.4-3.8%20.3-3.8%20.2-3.8-.1-3.8-.2-3.8-.3-7.6-1.2-3.7-.8-3.6-1-3.7-1.1-3.5-1.2-3.4-1.4-3.4-1.5-3.3-1.7-3.1-1.8-3-1.9-2.9-2.1-2.7-2.3-2.5-2.3-2.4-2.6-2-2.4%2012.6-10%201.5%202%201.6%201.7%201.7%201.6%202%201.6%202.1%201.6%202.3%201.4%202.4%201.4%202.6%201.3%202.7%201.3%202.8%201.1%202.9%201%203%20.9%203.1%20.8%203%20.7%203.2%20.5%203.1%20.5%203.2%20.3%206.2%20.2%203.1-.1%206-.6%205.6-1.2%202.6-.8%202.6-.9%202.3-1%202.3-1.2%202-1.3%202-1.4%201.7-1.5%201.6-1.7%201.4-1.7%201.3-2%201.1-2%20.9-2.3%20.8-2.5%20.5-2.6%20.4-2.9%20.1-3.2-.1-3.1-.4-2.8-.7-2.6-.8-2.4-1.1-2.3-1.3-2.2-1.5-2.1-1.8-2-1.9-2-2.2-1.9-2.4-1.8-2.5-1.8-2.8-1.8-2.9-1.7-6.2-3.2-3.3-1.6-3.4-1.6-3.4-1.5-3.5-1.5-3.5-1.6-3.6-1.5-10.5-4.8-6.8-3.6-3.2-1.9-3.2-2-3.1-2.1-2.9-2.3-2.8-2.5-2.6-2.7-2.3-2.9-2.1-3.2-1.8-3.3-1.5-3.7-1-3.8-.7-4-.2-4.2%20.2-4.4%20.5-4.3%20.8-4%201.2-3.8%201.5-3.7%201.8-3.4%202.1-3.1%202.4-2.9%202.5-2.7%202.8-2.3%202.9-2.2%203.1-1.8%203.2-1.7%203.4-1.4%203.4-1.1%203.5-1%203.5-.8%203.6-.5%203.7-.4%203.6-.2%203.7-.1%203.7%20.1%203.7%20.3%203.6%20.5%203.7%20.6%203.6%20.7%203.5%20.9%203.5%201.1%203.4%201.1%203.3%201.4%203.2%201.4%203.1%201.6%203%201.8%202.9%201.9%202.7%202%202.5%202.2%202.4%202.4%202.2%202.5%202%202.7%201.5%202.5z'/></svg>"); mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='28%2017.9%20396%20490.1'><path%20d='M62%20150l55.2-10.4%20.2-1.4%201.3-7.2%201.4-7%201.6-6.8%201.8-6.6%201.9-6.3%202-6.1%202.2-5.9%202.3-5.6%202.3-5.4%202.5-5.2%202.6-5%202.7-4.7%202.8-4.6%202.8-4.3%202.9-4%203-3.9%203-3.6%203.1-3.4%203.1-3.2%203.2-3%203.2-2.7%203.2-2.6%203.2-2.3%203.2-2.1%203.3-1.9%203.2-1.7%203.2-1.4%203.3-1.2%203.2-1%203.2-.8%203.1-.5%203.2-.3%203.1%200%203%20.2%203%20.5%203%20.8%202.9%201.1%202.7%201.2%202.7%201.3%202.5%201.5%202.5%201.6%202.5%201.7%204.6%203.8%202.2%202.1%204.2%204.4%201.9%202.4%202%202.5%201.8%202.5%201.8%202.7%201.7%202.7%201.7%202.8%201.6%202.9%201.5%203%201.4%203%201.5%203.1%202.6%206.4%201.2%203.3%201.2%203.4%201.1%203.4%201%203.4%201%203.5%201%203.6%20.9%203.6%201.6%207.4%20.7%203.7%20.5%202.7%2027-5.1%2038-7%2048%2044%2038%20340-124%2026-272-68zM45.5%20427.9l246.5%2061.6%200-366.7-215.5%2040.7zM308%20490l98.5-20.7-35.7-319.6-37.7-34.5-25.1%204.6zM257.2%20113.1l-.5-2.8-.6-3.5-.7-3.4-.8-3.4-.8-3.3-1.8-6.6-3-9.3-1.2-2.9-1.1-2.9-1.2-2.9-1.2-2.7-1.3-2.7-1.4-2.6-1.3-2.5-1.5-2.4-1.4-2.3-1.5-2.2-1.5-2.1-3.2-4-1.7-1.8-1.6-1.7-1.7-1.6-1.8-1.5-1.7-1.4-1.8-1.3-1.9-1.1-1.8-1.1-1.9-1-1.9-.8-1.9-.7-1.3-.4-1.6-.2-1.6-.1-1.8%200-1.9%20.2-2.1%20.3-2.1%20.5-2.2%20.7-2.4%20.9-2.4%201.1-2.5%201.2-2.5%201.5-2.6%201.7-2.6%201.9-2.6%202.1-2.7%202.3-2.7%202.5-2.6%202.7-2.7%203-2.6%203.1-2.6%203.4-2.6%203.6-2.5%203.8-2.5%204.1-2.4%204.2-2.4%204.5-2.2%204.7-2.2%205-2.1%205.2-2%205.4-1.9%205.6-1.7%205.9-1.7%206.1-1.5%206.3-1.3%206.6-.4%202.4zm-50.1%20143l-1.1-1.9-1.1-1.6-1.4-1.5-1.5-1.5-1.7-1.5-1.9-1.5-2.1-1.3-2.3-1.3-2.4-1.3-2.5-1.1-2.6-1.1-5.6-1.8-2.8-.7-3-.6-2.9-.5-3-.4-3-.2-3-.1-2.9%200-2.9%20.2-2.9%20.3-5.4%201-2.6%20.7-2.4%20.9-2.3%201-2.2%201.1-2%201.2-1.9%201.3-1.7%201.5-1.6%201.6-1.4%201.7-1.2%201.9-1.1%202-.9%202.3-.8%202.4-.5%202.6-.4%202.9-.1%203.2%20.1%202.5%20.4%202.3%20.6%202.1%20.8%202%201%201.9%201.2%201.9%201.5%201.8%201.7%201.8%202%201.7%202.2%201.7%202.4%201.7%202.5%201.7%202.8%201.6%203%201.5%203.1%201.6%203.2%201.5%203.3%201.5%203.4%201.6%207%203%203.6%201.6%203.5%201.6%203.6%201.6%203.6%201.7%203.5%201.8%203.4%201.9%203.4%202%203.3%202.1%203.2%202.2%203.1%202.4%202.9%202.6%202.8%202.8%202.6%203%202.3%203.2%202%203.4%201.8%203.8%201.4%203.9%201%204.1%20.6%204.4%20.2%204.5-.2%204.4-.5%204.3-.8%204-1.2%203.9-1.5%203.6-1.8%203.5-2.1%203.1-2.4%203-2.6%202.7-2.7%202.4-3%202.2-3.1%201.9-3.3%201.7-3.3%201.5-3.5%201.2-3.5%201.1-3.6%20.8-3.7%20.7-3.7%20.4-3.8%20.3-3.8%20.2-3.8-.1-3.8-.2-3.8-.3-7.6-1.2-3.7-.8-3.6-1-3.7-1.1-3.5-1.2-3.4-1.4-3.4-1.5-3.3-1.7-3.1-1.8-3-1.9-2.9-2.1-2.7-2.3-2.5-2.3-2.4-2.6-2-2.4%2012.6-10%201.5%202%201.6%201.7%201.7%201.6%202%201.6%202.1%201.6%202.3%201.4%202.4%201.4%202.6%201.3%202.7%201.3%202.8%201.1%202.9%201%203%20.9%203.1%20.8%203%20.7%203.2%20.5%203.1%20.5%203.2%20.3%206.2%20.2%203.1-.1%206-.6%205.6-1.2%202.6-.8%202.6-.9%202.3-1%202.3-1.2%202-1.3%202-1.4%201.7-1.5%201.6-1.7%201.4-1.7%201.3-2%201.1-2%20.9-2.3%20.8-2.5%20.5-2.6%20.4-2.9%20.1-3.2-.1-3.1-.4-2.8-.7-2.6-.8-2.4-1.1-2.3-1.3-2.2-1.5-2.1-1.8-2-1.9-2-2.2-1.9-2.4-1.8-2.5-1.8-2.8-1.8-2.9-1.7-6.2-3.2-3.3-1.6-3.4-1.6-3.4-1.5-3.5-1.5-3.5-1.6-3.6-1.5-10.5-4.8-6.8-3.6-3.2-1.9-3.2-2-3.1-2.1-2.9-2.3-2.8-2.5-2.6-2.7-2.3-2.9-2.1-3.2-1.8-3.3-1.5-3.7-1-3.8-.7-4-.2-4.2%20.2-4.4%20.5-4.3%20.8-4%201.2-3.8%201.5-3.7%201.8-3.4%202.1-3.1%202.4-2.9%202.5-2.7%202.8-2.3%202.9-2.2%203.1-1.8%203.2-1.7%203.4-1.4%203.4-1.1%203.5-1%203.5-.8%203.6-.5%203.7-.4%203.6-.2%203.7-.1%203.7%20.1%203.7%20.3%203.6%20.5%203.7%20.6%203.6%20.7%203.5%20.9%203.5%201.1%203.4%201.1%203.3%201.4%203.2%201.4%203.1%201.6%203%201.8%202.9%201.9%202.7%202%202.5%202.2%202.4%202.4%202.2%202.5%202%202.7%201.5%202.5z'/></svg>"); }
/* NEL FOOTER la scatola è quella delle fa7 anche in altezza (24/09/2026): 1em di glifo più il
   padding verticale di .footer-icon — 48px, non 34. Stesso box per tutte le icone, quindi stesso
   ancoraggio per il tooltip. La maschera resta centrata. */
.footer-icon.fa-kit { height: calc(1em + 16px); }
/* un blocco dentro il suo link: niente linea di testo intorno (vertical-align, interlinea) che dia
   alle maschere 2px in più delle fa7 */
.footer-icon-wrap a > .footer-icon { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   BOARD DELLE PRENOTAZIONI — un componente solo per cinque famiglie (22/09/2026)

   Sostituisce la timeline, che metteva i prenotabili in riga e i giorni in colonna: una griglia
   fitta, buona per programmare e illeggibile per lavorare. Qui le COLONNE sono l'unità di tempo
   della famiglia — giorni per una experience, edizioni per un corso, mesi per un evento — e ogni
   carta è una PRENOTAZIONE, grande abbastanza da leggersi: nome, posti, ora, prezzo, stato.

   Il componente è UNO e non cinque. La famiglia decide solo che cosa c'è scritto sulla testa di
   una colonna e come si chiamano le cose: cinque board copiate sarebbero cinque posti in cui
   correggere lo stesso difetto di drag & drop, e dopo un mese sarebbero diverse.

   MOBILE: le colonne scorrono in orizzontale con lo scroll-snap e restano larghe 230px — una
   carta stretta a 120px non si legge, e una board che non si legge non serve a niente. La barra
   dei filtri va a capo.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
/* Niente bordo esterno (collaudo del 22/09/2026): la board è già un blocco pieno che stacca dal
   fondo, e la cornice le dava l'aria di un riquadro incollato sopra la pagina invece che della
   pagina stessa. Restano il fondo, l'angolo e il taglio del contenuto. */
.nv-board {
  background: var(--nv-tl-bg); border-radius: 8px;
  overflow: hidden; color: var(--nv-tl-testo);
}
/* Senza fondo e senza riga sotto (collaudo del 22/09/2026): erano due segni che dividevano la
   barra dalle colonne, e la board è una cosa sola. */
.nv-board-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px;
}
.nv-board-barra-sp { flex: 1 1 auto; }
/* TUTTI I CONTROLLI DELLA BARRA HANNO UNA SOLA ALTEZZA, un solo raggio e un solo spessore di
   bordo (collaudo del 22/09/2026): prima le frecce erano 30px, i bottoni della vista 4px+testo e
   le select un'altra cosa ancora, e in fila si vedeva. Le tre misure stanno in tre variabili
   perché il giorno in cui una cambia non si debba cercarla in otto regole. */
.nv-board-barra {
  --nv-ctl-h: 30px;
  --nv-ctl-r: 6px;
  --nv-ctl-b: 1px solid var(--nv-tl-bordo);
}
.nv-board-filtro {
  height: var(--nv-ctl-h); border: var(--nv-ctl-b); border-radius: var(--nv-ctl-r);
  font-size: 0.78rem; line-height: 1; padding: 0 10px; cursor: pointer;
  background: transparent; color: var(--nv-tl-testo);
  /* ANCHE SU UN LINK (23/09/2026). La board cambia vista senza cambiare pagina e usa `<button>`;
     l'agenda, il calendario e il tape chart cambiano indirizzo — «guarda giovedì» si manda a
     qualcuno — e usano `<a>`. Un `<a>` è `inline`, e su un inline `height` non si applica: senza
     queste tre righe gli stessi controlli erano alti 30px in una vista e quanto il testo nelle
     altre tre. */
  display: inline-flex; align-items: center; justify-content: center;
}
/* ── SEGMENTED CONTROL (22/09/2026) ───────────────────────────────────────────────────────────
   Un contenitore con UN bordo, e dentro i segmenti che non ne hanno: separati da un divisore, e
   l'attivo che cambia solo fondo e testo. Prima erano tre bottoni con bordo proprio, e l'attivo,
   cambiando colore al SUO bordo, si sovrapponeva ai vicini — due bordi adiacenti, uno teal e uno
   grigio, che sembrano un pezzo storto.
   Non c'era in casa: il selettore di vista delle Commesse era un `btn-group` di Bootstrap con una
   larghezza minima, non un componente. Questo è generico apposta — `.nv-segmented` + `button` —
   e il prossimo che ha tre viste da scambiare lo usa senza riscriverlo. */
.nv-segmented {
  display: inline-flex; align-items: stretch; overflow: hidden;
  height: var(--nv-ctl-h, 30px); border: var(--nv-ctl-b, 1px solid var(--nv-tl-bordo));
  border-radius: var(--nv-ctl-r, 6px);
}
.nv-segmented button, .nv-segmented a {
  border: none; border-radius: 0; background: transparent; cursor: pointer;
  padding: 0 12px; font-size: 0.78rem; line-height: 1; color: var(--nv-tl-testo-dim);
  display: inline-flex; align-items: center;
}
/* IL COLORE DI UN SEGMENTO-LINK sta sul suo `<span>` e non sull'`<a>`: `body a` colora ogni link
   con `!important` (riga 138), e batterlo vorrebbe dire aggiungerne un secondo. Lo stesso
   espediente del selettore delle famiglie — il colore su un figlio, dove nessuno lo forza. */
.nv-segmented a > span { color: var(--nv-tl-testo-dim); }
/* Il divisore è il bordo SINISTRO dei segmenti dal secondo in poi: una riga sola fra due
   segmenti, non due che si toccano. */
.nv-segmented button + button,
.nv-segmented a + a { border-left: var(--nv-ctl-b, 1px solid var(--nv-tl-bordo)); }
.nv-segmented button:hover { color: var(--nv-accent); }
.nv-segmented a:hover > span { color: var(--nv-accent); }
/* L'attivo NON tocca il bordo e non cambia dimensione: fondo tenue e testo. Il divisore alla sua
   sinistra resta dov'era, così i segmenti non si spostano di un pixel quando si cambia vista. */
.nv-segmented button.is-attiva,
.nv-segmented a.is-attiva {
  background: rgba(85, 213, 204, 0.08); color: var(--nv-accent);
}
.nv-segmented a.is-attiva > span { color: var(--nv-accent); }
.nv-segmented button.is-attiva:hover { color: var(--nv-accent); }
/* La select ha un fondo suo: trasparente, su una tendina aperta, mostrerebbe la pagina sotto. */
.nv-board-filtro { background: var(--nv-tl-bg); max-width: 220px; cursor: default; }

/* La griglia delle colonne. `overflow-x:auto` + scroll-snap: su telefono si scorre una colonna
   alla volta e ci si ferma allineati, invece di restare a metà fra due giorni. */
.nv-board-colonne {
  display: flex; gap: 8px; padding: 10px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; align-items: flex-start;
}
/* Senza bordo (collaudo del 22/09/2026): a dividere le colonne basta lo spazio fra loro, e su
   fondo nero il grigio del contorno era il segno più forte della griglia — si vedeva la struttura
   prima di quello che c'è dentro. In light il fondo della colonna (`#F5F7FB`, rimappato nel layer
   chiaro) continua a staccare dal fondale della pagina. */
.nv-board-col {
  flex: 0 0 230px; min-width: 230px; scroll-snap-align: start;
  /* Il fondo è OPACO — colore del fondale più uno strato — e non una velatura trasparente. La
     differenza si vede solo in un punto, ma è quello che conta: la testata sticky eredita questo
     fondo con `background: inherit`, e una velatura ereditata si sommerebbe a sé stessa lasciando
     trasparire le carte che le scorrono sotto. Sono gli stessi due valori di prima, messi in modo
     che si possano ereditare. */
  background-color: var(--nv-tl-bg);
  background-image: linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.02));
  border-radius: 8px;
  display: flex; flex-direction: column; max-height: 62vh;
}
.nv-board-col.is-oggi { background-image: linear-gradient(var(--nv-tl-oggi), var(--nv-tl-oggi)); }
.nv-board-col.is-passata { opacity: .72; }
/* Niente fondo proprio (collaudo del 22/09/2026): quello la staccava dalla colonna come una barra
   incollata sopra. La testata è `sticky`, ma il CORPO della colonna ha il suo `overflow-y`: le
   carte scorrono dentro il corpo e non le passano mai sotto, quindi non c'è niente da coprire —
   verificato scorrendo una colonna piena.
   La riga sotto è teal, dal token del design system (`--nv-accent`), non da un esadecimale
   scritto a mano: separa la testa dal corpo e dice dove comincia il giorno. */
.nv-board-col-testa {
  padding: 8px 10px;
  /* LA LINEA TEAL è spessa come la barra dei contatori (3px, `.matrixValue` border-left) e parte
     dove parte il testo, non dal bordo della colonna: è la stessa linea, nello stesso linguaggio.
     Un `border-bottom` non può rientrare dai lati, quindi la disegna un `::after` — che per giunta
     scorre insieme alla testata sticky senza bisogno di altro (tuning 7, 22/09/2026).
     Non serve `position: relative`: lo `sticky` qui sotto è già un contesto di posizionamento. */
  /* `inherit`: esattamente il fondo della colonna, quale che sia — anche quello teal del giorno
     di oggi. Non un colore suo, che è quello che la staccava come una barra incollata sopra, e
     non trasparente, perché scorrendo la pagina le carte le passerebbero sotto. */
  position: sticky; top: 0; background: inherit; border-radius: 8px 8px 0 0; z-index: 1;
}
.nv-board-col-testa::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px;
  background: var(--nv-accent);
}
.nv-board-col-titolo { display: block; font-size: 0.86rem; color: var(--nv-tl-testo); }
.nv-board-col-sub    { display: block; font-size: 0.72rem; color: var(--nv-tl-testo-dim); }
/* L'OVERFLOW SI DICHIARA SU TUTTI E DUE GLI ASSI. Qui c'era solo `overflow-y: auto`, e in CSS
   basta che un asse sia diverso da `visible` perché l'altro smetta di esserlo e diventi `auto`:
   nessuno aveva scritto `overflow-x`, e una barra di scorrimento orizzontale è comparsa lo stesso
   il giorno in cui una carta ha sforato. Scritto per esteso, non succede più — e se una carta
   sfora si vede, invece di nascondersi dietro uno scroll che nessuno voleva. */
.nv-board-col-corpo  { padding: 8px; display: flex; flex-direction: column; gap: 8px;
                       overflow-x: hidden; overflow-y: auto; min-height: 70px; }
/* Dove si può lasciar cadere una carta. Il bordo tratteggiato compare solo mentre si trascina:
   un contorno sempre acceso farebbe sembrare la board un modulo da compilare. */
.nv-board-col.is-bersaglio .nv-board-col-corpo { outline: 2px dashed #55d5cc; outline-offset: -4px; }
.nv-board-col.is-vietata   .nv-board-col-corpo { outline: 2px dashed var(--nv-tl-esaurito); outline-offset: -4px; }
.nv-board-vuota { font-size: 0.74rem; color: var(--nv-tl-testo-dim); padding: 6px 2px; }

/* LA CARTA. Grande: tre righe e un badge. Il bordo sinistro porta il colore dello stato, che è
   l'informazione che si cerca per prima guardando una board da lontano. */
/* Senza fondo proprio (collaudo del 22/09/2026): sopra quello della colonna era un terzo livello
   di grigio, e tre livelli su nero sono uno di troppo. Restano il contorno e il bordo sinistro
   colorato, che è l'informazione che si cerca guardando da lontano. */
.nv-board-card {
  border: 1px solid var(--nv-tl-bordo);
  border-left: 3px solid var(--nv-tl-chiusa); border-radius: 6px; padding: 8px 10px;
  cursor: pointer; transition: border-color .12s ease, transform .12s ease;
}
.nv-board-card:hover { border-color: #55d5cc; transform: translateY(-1px); }
.nv-board-card.is-trascinata { opacity: .4; }
.nv-board-card.is-richiesta        { border-left-color: var(--nv-pren-richiesta); }
.nv-board-card.is-confermata       { border-left-color: var(--nv-pren-confermata); }
.nv-board-card.is-attesa_pagamento { border-left-color: var(--nv-pren-attesa); }
.nv-board-card.is-pagata           { border-left-color: var(--nv-pren-pagata); }
.nv-board-card.is-svolta           { border-left-color: var(--nv-pren-svolta); opacity: .85; }
.nv-board-card.is-annullata        { border-left-color: var(--nv-pren-annullata); opacity: .6; }
.nv-board-card.is-no_show          { border-left-color: var(--nv-pren-noshow); opacity: .6; }
/* La carta è il riferimento dell'icona di stato, che sta in assoluto: vedi sotto. */
.nv-board-card { position: relative; }
/* Nessun margine sotto la testa: la distanza la dà il `gap` del contenitore, una volta per
   tutte e tre le righe. Il 4px che c'era qui si sommava al gap e faceva la prima distanza più
   larga della seconda — è il difetto che il collaudo ha visto come «la terza riga schiacciata». */
.nv-board-card-testa { margin-bottom: 0; }
/* IL TITOLO LASCIA LIBERO IL POSTO DELL'ICONA, e il conto torna per costruzione invece che per
   coincidenza. Prima il padding era `1.6em` — em del TITOLO, 0.88rem — mentre l'icona era larga
   `1.25em` di 0.95rem: due unità diverse che si inseguivano, e sarebbe bastato cambiare uno dei
   due font-size perché il titolo finisse sotto l'icona. Adesso la misura è UNA, dichiarata qui:
   la usa il box dell'icona per la propria larghezza e il titolo per il proprio padding, più il
   respiro fra le due cose. */
.nv-board-card { --nv-card-icona: 1.2rem; --nv-card-icona-gap: 6px; }
.nv-board-card-nome { padding-right: calc(var(--nv-card-icona) + var(--nv-card-icona-gap)); }
/* LO STATO SULLA CARTA È UN'ICONA, non un'etichetta (collaudo del 22/09/2026). «In attesa di
   pagamento» scritto per esteso occupava più spazio del nome del cliente, e su una board fitta la
   carta diventava un blocco di testo. Il nome dello stato resta nel tooltip e nella legenda in
   fondo, che è il posto dove si impara il codice dei colori. Il bordo sinistro colorato resta. */
/* IN ASSOLUTO, allo stesso posto su OGNI carta (collaudo del 22/09/2026). Prima era un elemento
   in fila dentro un flex: la sua distanza dal bordo dipendeva dall'altezza del nome accanto, e
   bastava un nome che andasse a capo perché l'icona scendesse. Qui l'offset è quello del padding
   della carta (10px) e il box ha una misura fissa, con l'icona centrata dentro: sette icone di
   sette forme diverse restano sulla stessa riga e alla stessa distanza dal bordo. */
.nv-board-card-stato {
  position: absolute; top: 10px; right: 10px;
  width: var(--nv-card-icona); height: var(--nv-card-icona);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.95rem; line-height: 1;
}
.nv-board-card-stato.is-richiesta        { color: var(--nv-pren-richiesta); }
.nv-board-card-stato.is-confermata       { color: var(--nv-pren-confermata); }
.nv-board-card-stato.is-attesa_pagamento { color: var(--nv-pren-attesa); }
.nv-board-card-stato.is-pagata           { color: var(--nv-pren-pagata); }
.nv-board-card-stato.is-svolta           { color: var(--nv-pren-svolta); }
.nv-board-card-stato.is-annullata        { color: var(--nv-pren-annullata); }
.nv-board-card-stato.is-no_show          { color: var(--nv-pren-noshow); }
.nv-board-card-nome { font-size: 0.88rem; color: var(--nv-tl-testo); }

/* ══ IL TITOLO DI UNA CARTA — una regola sola, per tutte e cinque le viste (23/09/2026) ══════
   Il nome del cliente sulla board e sulla timeline, quello del corso su una lezione, quello
   dell'ospite sul tape chart, quello di chi ha prenotato in agenda e sul calendario: sono la
   stessa cosa — la riga che dice DI CHI è questa carta — e adesso hanno una regola sola.

   `display: block` è quella che mancava, ed è il motivo per cui il difetto si vedeva **solo sulla
   board**: là il titolo è uno `<span>` dentro un `<div>` normale, cioè un elemento INLINE, e un
   inline ignora `overflow`, `text-overflow` e ogni larghezza — `scrollWidth` e `clientWidth`
   misuravano 0 e l'ellissi non poteva scattare. Nelle altre quattro viste lo stesso `<span>` è
   figlio di un flex, quindi il browser lo rende block-level da sé e l'ellissi funzionava per
   fortuna, non per scelta.
   `min-width: 0` serve dove il titolo È un flex item: lì il minimo è il contenuto, e senza questa
   riga il testo spinge invece di troncarsi. `max-width: 100%` lo tiene dentro il suo contenitore
   anche quando non lo è.

   Il 23/09 un corso intitolato «Panificazione naturale: dal grano alla tavola…» rendeva la carta
   larga 235px dentro una colonna da 214, faceva comparire una barra di scorrimento nella colonna
   e finiva sotto l'icona di stato per 64px. Tutti e tre i sintomi, una causa sola. */
.nv-board-card-nome,
.nv-tl-card-nome,
.nv-ag-app-cliente,
.nv-cal-ev-nome,
.nv-tape-nome {
  display: block; min-width: 0; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* LE TRE RIGHE DELLA CARTA RESPIRANO UGUALE (collaudo del 22/09/2026): la terza stava schiacciata
   sotto la seconda, perché aveva un `margin-top` di 3px mentre fra prima e seconda ce n'erano 4.
   Adesso la distanza è una sola, dichiarata una volta sul contenitore, e vale anche fra il bordo
   della carta e la prima e l'ultima riga — il padding della carta. */
/* Il `gap` è lo stesso numero del padding verticale della carta: così la distanza fra due righe
   e quella fra una riga e il bordo sono la stessa cosa, e non si vede una riga «attaccata» né una
   che galleggia. */
.nv-board-card { display: flex; flex-direction: column; gap: 8px; }
.nv-board-card-riga {
  display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.76rem; color: var(--nv-tl-testo);
  font-variant-numeric: tabular-nums;
}
.nv-board-card-sotto {
  font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* Il nome dell'experience è quello che distingue due carte identiche per ora e persone: col
     grigio spento spariva. Teal come il resto di ciò che è «nostro» nell'interfaccia. */
  color: var(--nv-accent);
}
/* Il prezzo è un dato come l'ora e le persone, non un'evidenza: stesso colore, e un'icona
   davanti come gli altri due — prima era l'unico numero senza. */
.nv-board-card-prezzo { color: inherit; }
.nv-board-card.is-da-gestire { box-shadow: inset 2px 0 0 var(--nv-tl-dagestire); }

/* IL CASSETTO DEI VOUCHER (22/09/2026, terza forma e questa volta è quella giusta).
   Prenotazioni pagate che un giorno non ce l'hanno: sull'asse del tempo non hanno un posto —
   metterle «oggi» sarebbe una bugia — e non mostrarle vorrebbe dire perderle.
   Prima era una riga sempre aperta sopra i giorni, che occupava spazio anche a chi di voucher non
   ne ha; poi una lista nella colonna di destra, che rubava il posto ai contatori. Adesso è un
   cassetto che il contatore «Voucher» apre e chiude.
   L'altezza si anima con `grid-template-rows`, che è il modo di aprire una cosa di altezza
   sconosciuta senza scriverla a mano: `0fr → 1fr`. Con `max-height` si sarebbe dovuto indovinare
   un numero, e con dieci voucher il numero sarebbe stato sbagliato. */
.nv-board-voucher-riga {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .18s ease;
}
.nv-board-voucher-riga.is-aperta { grid-template-rows: 1fr; }
.nv-board-voucher-scorri {
  overflow: hidden; display: flex; gap: 8px; align-items: flex-start;
  overflow-x: auto; scroll-snap-type: x proximity;
}
/* Il padding sta DENTRO la parte che scorre e non sul contenitore: sul contenitore resterebbe
   anche da chiuso, e il cassetto chiuso lascerebbe una riga di aria sotto la barra. */
.nv-board-voucher-riga.is-aperta .nv-board-voucher-scorri { padding: 4px 10px 10px; }
.nv-board-voucher-scorri .nv-board-card { flex: 0 0 210px; scroll-snap-align: start; }

@media (max-width: 575.98px) {
  .nv-board-col { flex-basis: 200px; min-width: 200px; max-height: 58vh; }
  .nv-board-filtro { max-width: 100%; flex: 1 1 100%; }
}

/* LA SCHEDA DI UNA PRENOTAZIONE, rifatta il 22/09/2026 sul guscio delle modal di Impostazioni.
   I campi usano le classi di Bootstrap che quelle modal usano già (`form-label`, `form-control`,
   `form-check`); qui restano solo le poche regole che dividono i blocchi e allineano la testata.
   I pulsanti di stato sono `btn btn-outline-primary btn-sm`: prima erano `toolbar-button`, cioè
   quadrati pensati per un'icona sola, e con dentro una parola il testo andava a capo lettera per
   lettera finendo sopra i campi. */
.nv-sch { font-size: 0.86rem; }
.nv-sch-sez { padding: 10px 0; border-top: 1px solid var(--nv-tl-bordo); }
.nv-sch-sez-tit {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--nv-tl-testo-dim); margin-bottom: 6px;
}
.nv-sch-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 10px; }
.nv-sch-exp { color: var(--nv-accent); }
.nv-sch-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.nv-sch-totale { font-size: 1.05rem; font-variant-numeric: tabular-nums; padding-top: 6px; }
.nv-sch-extra-lista { display: flex; flex-direction: column; gap: 4px; }
.nv-sch-extra { margin: 0; }
/* I pulsanti di stato vanno a capo da soli e ognuno è largo quanto la sua parola. */
/* ── TAPE CHART DEI SOGGIORNI (22/09/2026, task 5) ────────────────────────────────────────────
   Camere in riga, NOTTI in colonna. Un soggiorno occupa una camera per più notti di fila, e la
   cosa che si guarda è dove restano i buchi: una lista non lo mostra, un calendario a giorni
   nemmeno — servirebbe leggere venti celle per sapere se la 203 è libera da giovedì a domenica.
   Le carte si estendono con `colspan`, che è il modo in cui una tabella dice «da qui a lì». */
/* LO SCROLL STA DENTRO, non nella pagina (23/09/2026). Con la vista «Mese» le colonne sono
   trenta: non ci stanno, e non devono starci — si scorre. Prima la tabella aveva `width: 100%` e
   `table-layout: fixed`, cioè si COMPRIMEVA per entrare: trenta colonne da 40px, illeggibili, e
   `scrollWidth == clientWidth` perché non c'era niente da scorrere. Adesso ogni notte ha la sua
   larghezza e la tabella è larga quanto serve; a scorrere è questo contenitore, e la pagina non si
   muove di lato.
   `scroll-snap` sui giorni: lo scorrimento si ferma su una notte intera, come le colonne della
   board — mezza colonna visibile è mezza informazione. */
.nv-tape-wrap {
  overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x proximity;
  max-width: 100%;
}
.nv-tape {
  border-collapse: separate; border-spacing: 0;
  /* LE COLONNE DEVONO ESSERE UGUALI FRA LORO, e nessuno dei due algoritmi del browser lo fa da
     sé: `fixed` distribuisce lo spazio in più in PROPORZIONE alle larghezze dichiarate (e la
     colonna delle camere, larga 150, se ne prendeva tre volte una notte), `auto` lo distribuisce
     in base al CONTENUTO (e una notte con dentro un nome lungo diventava più larga delle altre).
     In tutti e due i casi le barre dei soggiorni non tornavano con la testata.
     Si calcola: la colonna delle camere è fissa, e ogni notte è un ennesimo di quello che resta.
     `--nv-tape-n` — quante notti — arriva come stile inline perché è un valore che esiste solo a
     runtime: è l'eccezione 1 della regola sugli inline (→ .claude/rules/css-ux.md).
     `min-width` è la soglia oltre la quale si scorre invece di comprimere. */
  table-layout: fixed;
  width: 100%;
  min-width: calc(var(--nv-tape-unita-w) + var(--nv-tape-n, 14) * var(--nv-tape-notte-w));
}
.nv-tape { --nv-tape-unita-w: 150px; --nv-tape-notte-w: 46px; }
.nv-tape th:not(.nv-tape-unita) {
  width: calc((100% - var(--nv-tape-unita-w)) / var(--nv-tape-n, 14));
}
.nv-tape th {
  background: var(--nv-tl-testa); color: var(--nv-tl-testo-dim);
  font-size: 0.7rem; font-weight: 600; text-align: center; padding: 4px 2px;
  border-bottom: 1px solid var(--nv-tl-bordo);
  /* La larghezza la decide il calcolo qui sopra: sotto i 46px il numero del giorno non si legge,
     ed è la soglia che fa scattare lo scroll quando le notti sono trenta. */
  /* La testata resta in alto mentre si scorre l'elenco delle camere. */
  position: sticky; top: 0; z-index: 2;
  scroll-snap-align: start;
}
.nv-tape th.is-oggi { color: var(--nv-accent); }
.nv-tape th.is-weekend { background: rgba(255,255,255,0.03); }
.nv-tape-dow { display: block; text-transform: uppercase; font-size: 0.62rem; opacity: .8; }
.nv-tape-num { display: block; font-variant-numeric: tabular-nums; }
/* LA COLONNA DELLE CAMERE RESTA FERMA mentre le notti scorrono: scorrendo a destra senza di lei
   si vedrebbero delle barre colorate senza sapere di chi sono. È l'unico `sticky` orizzontale del
   modulo, ed è il motivo per cui la tabella ha `border-collapse: separate` — con `collapse` i
   bordi di una cella sticky restano indietro rispetto alla cella. */
.card-body-table table.nv-tape .nv-tape-unita,
.nv-tape-unita {
  width: var(--nv-tape-unita-w); min-width: var(--nv-tape-unita-w);
  max-width: var(--nv-tape-unita-w); text-align: left; padding: 4px 10px;
  font-size: 0.78rem; color: var(--nv-tl-testo); background: var(--nv-tl-testa);
  position: sticky; left: 0; z-index: 3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* L'angolo in alto a sinistra è fermo in tutte e due le direzioni: sta sopra a entrambe. */
.nv-tape thead .nv-tape-unita { z-index: 4; }
/* La riga del gruppo — la tipologia — perché un albergo con venti camere si legge se sono
   ordinate per tipo, non per numero. */
.card-body-table table.nv-tape .nv-tape-gruppo td,
.nv-tape-gruppo td {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--nv-tl-testo-dim); padding: 8px 10px 3px; border: 0; height: auto;
}
/* Con `border-collapse: separate` i bordi non si fondono: si disegnano su due lati soli, o ogni
   cella ne mostrerebbe due. Altezza uguale per tutte le righe — una riga più alta delle altre fa
   sembrare che ci sia dell'altro dentro. */
/* La specificità pareggia quella del contesto: `.card-body-table table td` dà a ogni cella
   `padding: 8px 10px`, e con quel padding la riga di un soggiorno diventava 3px più alta delle
   altre — abbastanza da vedersi in una griglia di sette camere. */
.card-body-table table.nv-tape td {
  border-right: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  height: 34px; padding: 2px;
}
/* LA COLONNA DI OGGI, come nella board: una riga verticale che si vede scorrendo. */
.nv-tape .is-oggi { background: var(--nv-tl-oggi); }
.nv-tape-cella.is-weekend { background: rgba(255,255,255,0.02); }
.nv-tape-cella.is-libera { cursor: pointer; }
.nv-tape-cella.is-libera:hover { background: rgba(85,213,204,.12); }
.nv-tape-cella.is-chiusa {
  background: repeating-linear-gradient(45deg, transparent, transparent 4px,
              rgba(127,127,127,.12) 4px, rgba(127,127,127,.12) 8px);
}
.nv-tape-sogg {
  height: 100%; border-radius: 4px; padding: 2px 8px; cursor: pointer;
  background: rgba(255,255,255,0.05); color: var(--nv-tl-testo);
  border-left: 3px solid var(--nv-pren-colore, var(--nv-accent));
  display: flex; align-items: center; overflow: hidden;
}
.nv-tape-sogg:hover { background: rgba(255,255,255,0.09); }
.nv-tape-nome { font-size: 0.74rem; }
.nv-tape-sogg.is-richiesta        { --nv-pren-colore: var(--nv-pren-richiesta); }
.nv-tape-sogg.is-confermata       { --nv-pren-colore: var(--nv-pren-confermata); }
.nv-tape-sogg.is-attesa_pagamento { --nv-pren-colore: var(--nv-pren-attesa); }
.nv-tape-sogg.is-pagata           { --nv-pren-colore: var(--nv-pren-pagata); }
.nv-tape-sogg.is-svolta           { --nv-pren-colore: var(--nv-pren-svolta); }
.nv-tape-sogg.is-annullata        { --nv-pren-colore: var(--nv-pren-annullata); }
.nv-tape-sogg.is-no_show          { --nv-pren-colore: var(--nv-pren-noshow); }

/* ── CALENDARIO MENSILE DEGLI EVENTI (22/09/2026, task 4) ─────────────────────────────────────
   Un matrimonio si prenota un anno prima: la domanda non è «che cosa succede questa settimana»
   ma «il 12 giugno è libero?», e un mese è l'unità in cui quella domanda ha una risposta a colpo
   d'occhio. Griglia di sette colonne, celle di altezza uguale, e dentro le carte degli eventi.
   I colori degli stati sono i soliti `--nv-pren-*`: sono gli stessi stati del resto del modulo. */
.nv-evcal { --nv-cal-cella-h: 104px; }
.nv-cal-testa {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  font-size: 0.74rem; color: var(--nv-tl-testo-dim); text-transform: uppercase;
  letter-spacing: 0.06em; padding: 0 2px 6px;
}
.nv-cal-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.nv-cal-cella {
  min-height: var(--nv-cal-cella-h); border-radius: 8px; padding: 6px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--nv-tl-bordo);
  display: flex; flex-direction: column; gap: 4px; overflow: hidden; cursor: pointer;
}
.nv-cal-cella:hover { background: rgba(85,213,204,.06); }
/* I giorni dei mesi vicini restano, spenti: un mese che comincia di giovedì senza i tre giorni
   prima sembra tagliato a metà. Non si cliccano — non appartengono a questo mese. */
.nv-cal-cella.is-fuori { opacity: .45; cursor: default; }
.nv-cal-cella.is-fuori:hover { background: rgba(255,255,255,0.02); }
.nv-cal-cella.is-oggi { border-color: var(--nv-accent); background: var(--nv-tl-oggi); }
.nv-cal-cella-num { font-size: 0.78rem; color: var(--nv-tl-testo-dim); font-variant-numeric: tabular-nums; }
.nv-cal-cella.is-oggi .nv-cal-cella-num { color: var(--nv-accent); font-weight: 600; }
.nv-cal-ev {
  font-size: 0.74rem; border-radius: 4px; padding: 2px 6px; cursor: pointer;
  border-left: 3px solid var(--nv-pren-colore, var(--nv-accent));
  background: rgba(255,255,255,0.04); color: var(--nv-tl-testo);
  display: flex; align-items: center; gap: 4px;
}
.nv-cal-ev:hover { background: rgba(255,255,255,0.08); }
/* Un'opzione scaduta non tiene più la sala: si vede barrata, perché è ancora lì — nessuno l'ha
   annullata — ma non occupa più niente. */
.nv-cal-ev.is-scaduta .nv-cal-ev-nome { text-decoration: line-through; opacity: .7; }
.nv-cal-ev.is-richiesta        { --nv-pren-colore: var(--nv-pren-richiesta); }
.nv-cal-ev.is-confermata       { --nv-pren-colore: var(--nv-pren-confermata); }
.nv-cal-ev.is-attesa_pagamento { --nv-pren-colore: var(--nv-pren-attesa); }
.nv-cal-ev.is-pagata           { --nv-pren-colore: var(--nv-pren-pagata); }
.nv-cal-ev.is-svolta           { --nv-pren-colore: var(--nv-pren-svolta); }
.nv-cal-ev.is-annullata        { --nv-pren-colore: var(--nv-pren-annullata); }
.nv-cal-ev.is-no_show          { --nv-pren-colore: var(--nv-pren-noshow); }

@media (max-width: 767.98px) {
  /* Su telefono sette colonne da 40px non si leggono: le celle diventano più basse e le carte
     mostrano solo il colore e il nome accorciato. */
  .nv-evcal { --nv-cal-cella-h: 68px; }
  .nv-cal-ev { font-size: 0.68rem; }
}

/* ── AGENDA DEGLI APPUNTAMENTI (22/09/2026, task 3) ───────────────────────────────────────────
   Una tabella, non una griglia flex: le ore sono righe e le persone colonne, ed è esattamente
   quello che una `<table>` sa fare da sé — comprese le carte che durano un'ora e mezza, che si
   estendono con `rowspan` senza che nessuno calcoli un'altezza in pixel.
   I colori sono quelli della board (`--nv-tl-*`): è la stessa applicazione vista in un altro
   modo, e due palette per due viste dello stesso dato sono due cose da ricordare. */
.nv-ag-wrap { overflow-x: auto; scroll-snap-type: x proximity; max-width: 100%; }
.nv-ag {
  border-collapse: collapse;
  /* Stessa regola del tape chart (23/09/2026): con `width: 100%` e `table-layout: fixed` una
     tabella si COMPRIME per entrare invece di scorrere, e con otto operatori le colonne
     diventavano illeggibili senza che comparisse una barra di scorrimento. La colonna delle ore è
     fissa, ogni operatore è un ennesimo di quello che resta, e sotto la soglia si scorre.
     `--nv-ag-n` — quanti operatori — arriva come stile inline: è un valore che esiste solo a
     runtime (eccezione 1 di `.claude/rules/css-ux.md`). */
  table-layout: fixed;
  width: 100%;
  --nv-ag-ora-w: 58px; --nv-ag-op-w: 150px;
  min-width: calc(var(--nv-ag-ora-w) + var(--nv-ag-n, 3) * var(--nv-ag-op-w));
}
.nv-ag th:not(.nv-ag-ora) { width: calc((100% - var(--nv-ag-ora-w)) / var(--nv-ag-n, 3)); }
.nv-ag th {
  position: sticky; top: 0; z-index: 1;
  background: var(--nv-tl-testa); color: var(--nv-tl-testo);
  font-size: 0.86rem; font-weight: 600; text-align: left;
  padding: 8px 10px; border-bottom: 3px solid var(--nv-ag-op, var(--nv-accent));
  scroll-snap-align: start;
}
.nv-ag-ruolo { display: block; font-size: 0.72rem; font-weight: 400; color: var(--nv-tl-testo-dim); }
/* La colonna delle ore resta ferma mentre gli operatori scorrono: senza di lei si vedrebbero
   delle carte senza sapere a che ora sono. */
.nv-ag-ora {
  width: var(--nv-ag-ora-w); min-width: var(--nv-ag-ora-w); text-align: right; padding-right: 10px;
  position: sticky; left: 0; z-index: 2; background: var(--nv-tl-bg);
  font-size: 0.76rem; color: var(--nv-tl-testo-dim); vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.nv-ag td { border-top: 1px solid rgba(255,255,255,0.05); height: 22px; }
/* L'ora piena si distingue dal quarto d'ora: senza, una griglia di quarti d'ora è un reticolo in
   cui non si trova più mezzogiorno. */
.nv-ag tr.is-ora td { border-top-color: var(--nv-tl-bordo); }
.nv-ag-cella.is-fuori   { background: repeating-linear-gradient(45deg, transparent, transparent 5px,
                          rgba(127,127,127,.07) 5px, rgba(127,127,127,.07) 10px); }
.nv-ag-cella.is-assente { background: repeating-linear-gradient(45deg, transparent, transparent 4px,
                          rgba(219,49,49,.10) 4px, rgba(219,49,49,.10) 8px); }
.nv-ag-cella.is-libera  { cursor: pointer; }
.nv-ag-cella.is-libera:hover { background: rgba(85,213,204,.10); }
.nv-ag-app {
  height: 100%; border-radius: 6px; padding: 4px 8px; cursor: pointer;
  border-left: 3px solid var(--nv-pren-colore, var(--nv-accent));
  background: rgba(255,255,255,0.03); color: var(--nv-tl-testo);
  display: flex; flex-direction: column; gap: 2px; overflow: hidden;
}
.nv-ag-app:hover { background: rgba(255,255,255,0.06); }
.nv-ag-app-cliente { font-size: 0.82rem; font-weight: 600; }
.nv-ag-app-serv    { font-size: 0.74rem; color: var(--nv-tl-testo-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-ag-app-sotto   { font-size: 0.72rem; color: var(--nv-tl-testo-dim); margin-top: auto; }
/* Il colore del bordo sinistro è quello dello STATO: gli stessi sette della board, perché sono
   gli stessi stati. Si riusano i token, non i valori. */
.nv-ag-app.is-richiesta        { --nv-pren-colore: var(--nv-pren-richiesta); }
.nv-ag-app.is-confermata       { --nv-pren-colore: var(--nv-pren-confermata); }
.nv-ag-app.is-attesa_pagamento { --nv-pren-colore: var(--nv-pren-attesa); }
.nv-ag-app.is-pagata           { --nv-pren-colore: var(--nv-pren-pagata); }
.nv-ag-app.is-svolta           { --nv-pren-colore: var(--nv-pren-svolta); }
.nv-ag-app.is-annullata        { --nv-pren-colore: var(--nv-pren-annullata); }
.nv-ag-app.is-no_show          { --nv-pren-colore: var(--nv-pren-noshow); }
.nv-ag-giorno { font-size: 0.9rem; color: var(--nv-tl-testo); font-weight: 600; }

.nv-sch-azioni { display: flex; flex-wrap: wrap; gap: 6px; }
/* La select degli spostamenti incolonna tre dati — giorno, ora, posti liberi — e ci riesce solo
   se le cifre hanno tutte la stessa larghezza: `tabular-nums` è esattamente questo. Il resto
   dell'allineamento lo fa il testo, costruito a larghezza fissa lato server. */
.nv-sch-sposta { font-variant-numeric: tabular-nums; }
/* Stessa lezione del corpo della colonna: l'asse orizzontale si dichiara, se no diventa `auto`
   da sé e una riga lunga dello storico si porta dietro una barra di scorrimento. */
.nv-sch-storico { max-height: 150px; overflow-x: hidden; overflow-y: auto; }
.nv-sch-storico-r { font-size: 0.78rem; color: var(--nv-tl-testo-dim); padding: 2px 0; }
.nv-sch-storico-r b { color: var(--nv-tl-testo); font-weight: 400; }
/* Su telefono la modal prende l'altezza che le serve e i blocchi restano in colonna, che è già
   come sono: qui si toglie solo il tetto della finestra. */
@media (max-width: 575.98px) {
  .nv-sch-storico { max-height: 32vh; }
}
/* Le famiglie attive, AL CENTRO della riga della toolbar: si passa da una all'altra senza tornare
   all'indice. Prima erano bottoni quadrati impilati in alto a sinistra, che con tre famiglie si
   sovrapponevano al titolo — `toolbar-button` è pensato per un'icona sola, non per una parola.
   Qui sono bottoni di testo, tutti della STESSA larghezza (`flex: 0 1 140px` + `justify-content`),
   perché tre bottoni di larghezza diversa in fila sembrano tre cose diverse. */
.nv-board-famiglie {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
}
/* Stesse misure dei bottoni della barra filtri: altezza 30px, raggio 6px, bordo da 1px, 0.78rem.
   Erano più alti e più grandi, e due file di bottoni che dovrebbero somigliarsi e non si
   somigliano si notano subito. `flex: 0 0 auto` con `min-width` uguale per tutti: stessa
   larghezza, e nessuno va a capo finché c'è spazio — «Appuntamenti» cadeva sotto perché
   `flex: 0 1 140px` lo lasciava restringere e poi avvolgere. */
.nv-board-fam {
  flex: 0 0 auto; min-width: 120px;
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 10px; border: 1px solid var(--nv-tl-bordo); border-radius: 6px;
  background: transparent; font-size: 0.78rem; line-height: 1;
  text-decoration: none; white-space: nowrap; overflow: hidden;
}
/* IL COLORE STA SUL <span> DENTRO, e non sull'<a>. Non è un vezzo: `body a { color:#5a5a5a
   !important }` è una regola globale di questo file, e un link colorato altrimenti ha sempre avuto
   bisogno di un `!important` suo (`a.skill-module-badge`, i badge di nl2stat). Un `!important` in
   più è un debito che il prossimo eredita; una dichiarazione su un FIGLIO invece vince senza
   alzare la voce, perché l'ereditarietà non ha specificità e qualunque regola diretta la batte. */
.nv-board-fam span { color: var(--nv-tl-testo-dim); }
.nv-board-fam:hover { border-color: #55d5cc; }
.nv-board-fam:hover span { color: #55d5cc; }
.nv-board-fam.is-attivo { border-color: #55d5cc; background: rgba(85,213,204,0.08); }
.nv-board-fam.is-attivo span { color: #55d5cc; }
@media (max-width: 575.98px) { .nv-board-fam { flex: 1 1 auto; min-width: 0; } }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   IL LAYOUT COMUNE SU TELEFONO (23/09/2026) — sotto i 768px, dove le colonne si impilano.
   Sopra questa soglia non cambia UNA VIRGOLA: il design congelato resta quello che è.

   ── I SEI PIXEL ──────────────────────────────────────────────────────────────────────────────
   A 390px OGNI pagina dell'applicazione scorreva di lato di 6px. Non una lista, non un modulo:
   tutte, comprese le cinque viste di Prenotazioni — misurato su /amministrazione/acquisti,
   /offerte/gestione, /prenotazioni/board e /prenotazioni/soggiorni, sempre lo stesso numero.

   La causa è la stessa ovunque, e sta nel guscio: una `.row` di Bootstrap ha margini orizzontali
   NEGATIVI (metà gutter per lato) perché si aspetta di stare dentro un contenitore che glieli
   restituisce come padding — un `.container`. Qui le due row di primo livello (`#toolbar` e
   `#nuvolai-body`) sono figlie del `body`, che ha `padding: 50px 0`: orizzontalmente zero. Così
   ogni riga è larga 402px dentro una finestra da 390, e i 12px di troppo diventano lo scroll.
   Su un monitor non si vedeva perché l'eccedenza cade fuori da `body { overflow: hidden }`; su un
   telefono si vede eccome, ed è l'unica cosa che l'utente nota — la pagina che si sposta mentre
   legge.

   Qui i margini negativi si azzerano e il padding lo tengono le colonne, che ce l'hanno già.
   Vale anche per la `row` del partial delle liste (`.nv-lista-wrap`), che vive dentro l'altra e
   ne aggiunge un secondo giro.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  #toolbar.row,
  #nuvolai-body.row,
  .nv-lista-wrap.row { margin-left: 0; margin-right: 0; }

  /* Le colonne di quelle righe tornano a un padding normale: senza i gutter negativi del
     genitore, i 12px di Bootstrap sarebbero il doppio del necessario ai bordi dello schermo. */
  #toolbar.row > [class*="col-"],
  #nuvolai-body.row > [class*="col-"],
  .nv-lista-wrap.row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }

  /* ── LA TOOLBAR VA A CAPO PULITA ──────────────────────────────────────────────────────────
     Le sue tre colonne (titolo · centro · comandi) si impilano già da sole, ma restavano
     allineate come se fossero ancora in riga: i comandi a destra e il selettore centrato, cioè
     due blocchi larghi tutto lo schermo con il contenuto appiccicato a un bordo. Impilati si
     legge da sinistra, come ogni altra cosa, e le tre file respirano. */
  #toolbar.row { row-gap: 8px; }
  /* OGNI colonna della toolbar prende tutta la riga. Alcune toolbar usano `col-md-*` e si
     impilano da sole; altre — le liste documentali — usano `col-8` e `col-4`, che valgono a ogni
     larghezza: su 390px il titolo restava schiacciato in due terzi di schermo e andava a capo tre
     volte, con le icone appese accanto. Impilati, il titolo ha la riga intera e i comandi la
     loro. */
  #toolbar.row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  #toolbar.row > .toolbar,
  #toolbar.row > [class*="col-"].justify-content-end,
  #toolbar.row > [class*="col-"].justify-content-center { justify-content: flex-start !important; }
  #toolbar .toolbar,
  .nv-board-famiglie { flex-wrap: wrap; row-gap: 6px; }

  /* ── I CONTATORI SOTTO IL CONTENUTO, SENZA IL BUCO ────────────────────────────────────────
     `margin-top: 72px` allinea la prima faccetta con la testata della tabella quando le due
     colonne stanno FIANCO A FIANCO. Impilate, quel numero non allinea più niente: è un buco di
     settantadue pixel fra la fine della lista e il primo contatore, e chi scorre crede che la
     pagina sia finita. Restano due per riga — le celle sono `col-6` — che su 390px è la densità
     giusta: quattro sarebbero numeri da tre cifre in una colonna larga un pollice. */
  .nv-lista-faccette-inner { margin-top: 16px; }
  .nv-lista-faccette-inner.pb-5 { padding-bottom: 1rem !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   I COMANDI DI UN PANNELLO (23/09/2026) — partial `include/lib/nuvola/pannelli.php`
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* La riga «Aggiungi» sta sotto la tabella, allineata a sinistra come la prima colonna. */
.nv-pane-aggiungi { margin-top: 10px; }

/* IL SALVA È UN BOTTONE, non un'icona nuda. Prima era un glifo grigio che diventava teal solo
   passandoci sopra: non si capiva che fosse un comando finché non lo si sfiorava. Adesso è il
   bottone quadrato a sola icona che l'applicazione usa dappertutto (`.toolbar-button`), e quel
   che serve aggiungere è soltanto il suo stato SPENTO — che è lo stesso spento di ogni altro
   bottone: l'opacità di Bootstrap e il cursore che dice «no». */
.nv-pane-salva { background: transparent; padding: 0; }
.nv-pane-salva.is-spento {
  opacity: .65;
  /* Nessun `pointer-events: none`: senza eventi non arriverebbe nemmeno il passaggio del mouse, e
     il tooltip che dice a che serve quel comando non comparirebbe proprio quando serve di più —
     cioè a chi non ha ancora capito perché è spento. A non farlo premere basta `disabled`. */
}

/* ── UN PANNELLO CON UNA TABELLA HA BISOGNO DI PIÙ SPAZIO ────────────────────────────────────
   I campi tagliavano il testo: «Bamb» al posto di «Bambini 6-12 anni», «12,0» al posto di
   «12,00» — misurato, l'etichetta aveva 115px per i 136 che ne servivano. Un campo che taglia il
   proprio valore è peggio di un campo vuoto: chi rilegge crede di aver scritto quello che vede.
   Il cassetto standard (`is-wide`, 640px) va bene per un elenco di testi o una galleria; con sei
   colonne di campi dentro, no. `is-tabella` gli dà la larghezza che serve, e resta comunque
   dentro il 96% della finestra come tutti gli altri. */
.crm-drawer.is-wide.is-tabella { width: 780px; }
.nv-tabella-campi .form-control { min-width: 0; }
/* Un numerico intero («12») e un importo («€ 1.250,00») hanno due misure diverse e fisse: sono i
   due valori più lunghi che ci si aspetta di leggere lì dentro. */
/* `fixed`: senza, il browser ridistribuisce a modo suo e le larghezze dichiarate restano un
   suggerimento — l'etichetta finiva a 52px con sei colonne accanto. Con `fixed` le misure fisse
   valgono e `auto` prende quello che resta. */
.nv-tabella-campi { table-layout: fixed; }
/* Le misure sono quelle del VALORE PIÙ LUNGO che ciascuna colonna deve mostrare per intero —
   «€ 1.250,00» per un importo, «120» per un'età — più il respiro del campo. Non una di più: ogni
   pixel tolto qui è un pixel che va all'etichetta, che è l'unica colonna con dentro un testo e
   l'unica che non ha una misura naturale. */
.nv-tabella-campi .nv-col-num    { width: 88px; }
.nv-tabella-campi .nv-col-cond   { width: 130px; }
.nv-tabella-campi .nv-col-prezzo { width: 110px; }
.nv-tabella-campi .nv-col-si-no  { width: 72px; }
.nv-tabella-campi .nv-col-azioni { width: 52px; }

/* Un INTERVALLO è una cosa sola: due campi e un trattino, dentro una cella. */
.nv-intervallo { display: flex; align-items: center; gap: 4px; }
.nv-intervallo .form-control { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; }
.nv-intervallo i { color: var(--nv-tl-testo-dim); font-style: normal; }
/* L'etichetta prende quello che resta: è l'unica colonna che non ha una misura naturale, ed è
   anche quella che chi legge cerca per prima. */
.nv-tabella-campi .nv-col-libera { width: auto; }
.nv-tabella-campi .nv-col-drag   { width: 28px; }

/* La maniglia dice che la riga si può prendere; l'ordine è quello in cui il cliente leggerà le
   tariffe sul form, quindi si vede e si cambia dove lo si decide. */
.nv-drag-maniglia { cursor: grab; color: var(--nv-tl-testo-dim); }
.nv-drag-maniglia:hover { color: var(--nv-accent); }
.nv-tabella-ordinabile tbody tr.is-trascinata { opacity: .4; }

/* ── SOTTO I 768px UNA RIGA DIVENTA UNA SCHEDA ───────────────────────────────────────────────
   Sei colonne in un cassetto largo un telefono darebbero campi da un centimetro. Le celle si
   impilano, ognuna con la sua etichetta davanti (presa dalla testata con `data-th`), e la riga
   diventa un blocco con un filo di bordo sotto. */
@media (max-width: 767.98px) {
  .nv-tabella-campi thead { display: none; }
  .nv-tabella-campi tbody tr {
    display: block; padding: 8px 0; border-bottom: 1px solid var(--nv-tl-bordo);
  }
  .nv-tabella-campi tbody td {
    display: flex; align-items: center; gap: 10px;
    width: auto !important; padding: 4px 0; text-align: left !important;
  }
  .nv-tabella-campi tbody td::before {
    content: attr(data-th); flex: 0 0 38%; max-width: 38%;
    font-size: 0.74rem; color: var(--nv-tl-testo-dim);
  }
  .nv-tabella-campi tbody td > * { flex: 1 1 auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   NL2STAT — LA RISPOSTA (23/09/2026)

   Due cose sole vivono qui: la PALETTE CATEGORIALE, che serve ai grafici di tutta l'applicazione e
   non solo a questa pagina, e i quattro pezzi della risposta che non esistevano già (chip,
   card, insight, passi dell'attesa). Tutto il resto — pannelli, etichette, tabelle, bottoni —
   riusa le classi che c'erano.

   LA PALETTE CATEGORIALE si dichiara UNA VOLTA, qui, come variabili, e la legge il JavaScript con
   getComputedStyle: così il grafico cambia colori col tema senza che nessuna pagina scriva un
   colore a mano. L'ordine non è casuale — è quello in cui i colori si distinguono meglio quando
   sono pochi: teal, blu, arancio, viola, verde, rosa, azzurro, oro.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --nv-cat-1:#55d5cc;
  --nv-cat-2:#5a8bff;
  --nv-cat-3:#f5a623;
  --nv-cat-4:#a97bff;
  --nv-cat-5:#57d555;
  --nv-cat-6:#ff6b8a;
  --nv-cat-7:#4fd1e0;
  --nv-cat-8:#d4c15a;
  --nv-nl-card-bg:#0a0a0a;
  --nv-nl-axis:#8a8a8a;
  --nv-nl-grid:#2a2a2a;
}

/* L'interpretazione: la frase che dice cosa ha capito il sistema. Sta sopra tutto e si legge
   prima del numero — è il pezzo che rende onesta la pagina. */
.nv-nl-interp{ font-size:0.98rem; color:var(--nv-text-value); line-height:1.5; }
.nv-nl-interp i{ color:var(--nv-accent); margin-right:6px; }

/* I CHIP del piano. Quelli con una scelta dentro si premono; quelli che descrivono il calcolo
   («conto: fatture confermate») no, e si vede dal cursore e dal bordo tratteggiato. */








/* LE CARD dei numeri in cima. Colorate come i contatori delle liste: il bordo sinistro dà il
   tono, il fondo resta nero perché il numero deve essere la cosa più chiara della card. */










/* GLI INSIGHT: una riga per frase, icona a sinistra, il numero in grassetto dentro il testo. */
.nv-nl-insight{ display:flex; gap:10px; align-items:flex-start; padding:6px 0; font-size:0.88rem;
  color:var(--nv-text-value); line-height:1.45; }
.nv-nl-insight > i{ color:var(--nv-accent); margin-top:3px; width:16px; text-align:center; flex:0 0 16px; }
.nv-nl-insight b{ color:var(--nv-text-title); font-weight:500; }
.nv-nl-insight.is-anomalia > i{ color:var(--nv-warning); }
.nv-nl-insight.is-variazione > i{ color:var(--nv-cat-2); }

/* L'ATTESA RACCONTATA. Quattro passi che si accendono uno dopo l'altro: dice cosa sta succedendo
   invece di far girare un cerchio. Il passo attivo è teal, quelli fatti restano grigi chiari. */
.nv-nl-passo{ display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--nv-text-muted);
  padding:3px 0; transition:color .2s ease; }
.nv-nl-passo i{ width:16px; text-align:center; }
.nv-nl-passo.is-fatto{ color:var(--nv-text-label); }
.nv-nl-passo.is-fatto i{ color:var(--nv-success); }
.nv-nl-passo.is-corso{ color:var(--nv-accent); }

/* Una riga di tabella che porta al record: si comporta come un link senza esserlo (un <a> qui
   prenderebbe il grigio dei link globali, e per vincerlo servirebbe un !important). */
.nv-nl-riga-link{ cursor:pointer; }
.nv-nl-riga-link:hover td{ color:var(--nv-accent); }
/* I numeri di una tabella si leggono incolonnati a destra, i totali in fondo hanno la riga sopra. */
.nv-nl-num{ text-align:right; font-variant-numeric:tabular-nums; }
.nv-nl-tot td{ border-top:1px solid var(--nv-grid-border); color:var(--nv-text-total); font-weight:500; }

/* ── IL GUSCIO: PANNELLI A COMPARSA (23/09/2026) ─────────────────────────────────────────────────
   Un pannello a comparsa scorre DENTRO sé stesso (è un componente, non la pagina), ma il suo piede —
   l'esito a sinistra, «Salva» a destra, scritto da nvPanePiede() in include/lib/nuvola/pannelli.php —
   resta sempre visibile in fondo: con un elenco lungo di tariffe o di sessioni il floppy finiva sotto
   il bordo dello schermo, e chi aveva appena cambiato un prezzo doveva scorrere per trovarlo.
   `dvh` per l'altezza: sul telefono `100vh` conta anche la barra dell'indirizzo, e il fondo del
   pannello — cioè proprio il Salva — restava sotto. */
:root { --nv-drawer-bg: #000000; }
.crm-drawer { height: 100dvh; }
.crm-drawer .nv-pane-tools, .crm-drawer .nv-testi-tools {
  position: sticky; bottom: 0; z-index: 6;
  background: var(--nv-drawer-bg);
  padding: 12px 0;
  border-top: 1px solid var(--nv-grid-border);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   UI KIT — IL CANONE (23/09/2026)
   Per ogni tipo di componente UNA variante ufficiale. Non sono classi nuove dove ce n'era già una
   buona: sono le migliori esistenti, completate con gli stati che mancavano, così che i moduli che
   si erano fatti la propria copia possano tornare a quella comune. La fonte di verità visiva è la
   pagina /ui-kit (solo amministratori): ciò che non è lì non esiste. Regole → css-ux.md, «UI kit».

     KPI / contatore  .nv-kpi (+ .is-positivo .is-negativo .is-avviso .is-principale)   ← dashboard
     chip             .tag-chip (+ .tag-chip-et  .is-on  .is-nota; <button> se si preme) ← liste/CRM
     badge di stato   .mv-badge (+ .is-ok .is-ko .is-attesa .is-info .is-neutro)          ← liste
     empty state      .nv-vuoto (+ -icona -titolo -testo -azione, .nv-vuoto-sm)
     segmented        .nv-segmented                                                      ← board
     griglia di dati  .nv-matrix                                                          ← (#2)
     riquadro         .nv-panel (grafici, blocchi della dashboard)                        ← dashboard
     avviso breve     .nv-avviso (SweetAlert2 toast, nvAvviso() in nv-kit.js)
   I colori sono SEMPRE token: nessun esadecimale in questo blocco.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── KPI / contatore: la card della dashboard, con il tono del numero dato da uno stato ────────
   Prima il tono lo davano .text-success/.text-danger sul numero (dashboard), un bordo sinistro
   colorato (la card di NL2STAT) o un teal fisso (la card del Forecast): tre card per una cosa. */
.nv-kpi.is-positivo .nv-kpi-val { color: var(--nv-success); }
.nv-kpi.is-negativo .nv-kpi-val { color: var(--nv-danger-testo); }
.nv-kpi.is-avviso .nv-kpi-val { color: var(--nv-warning); }
.nv-kpi.is-principale .nv-kpi-val { color: var(--nv-accent); }
.nv-kpi .nv-kpi-val { color: var(--nv-text-title); }
.nv-kpi-sotto { color: var(--nv-text-muted); font-size: 0.74rem; margin-top: 2px; line-height: 1.3; }
.nv-kpi-delta { font-size: 0.74rem; font-weight: 600; margin-left: 6px; white-space: nowrap; }
.nv-kpi-delta.is-su { color: var(--nv-success); }
.nv-kpi-delta.is-giu { color: var(--nv-danger-testo); }
.nv-kpi-delta.is-pari, .nv-kpi-delta.is-incompleto { color: var(--nv-text-muted); font-weight: 400; }
.nv-kpi-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }

/* ── Chip: pillola a bordo colorato, fondo della pagina. Il colore del bordo, quando dice qualcosa
   (il colore di un tag), arriva da `--chip` impostato inline: è un valore di runtime. ───────── */
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 14px;
  font-size: 0.78rem; font-weight: 300; line-height: 1.3; white-space: nowrap;
  background-color: var(--nv-page-bg);
  color: var(--nv-text-value);
  border: 1px solid var(--chip, var(--nv-accent));
}
.tag-chip .tag-chip-et { color: var(--nv-text-muted); }
.tag-chip.is-on { border-color: var(--chip, var(--nv-accent)); color: var(--chip, var(--nv-accent)); font-weight: 500; }
.tag-chip.is-nota { border-style: dashed; border-color: var(--nv-grid-border); color: var(--nv-text-muted); }
button.tag-chip { cursor: pointer; transition: border-color .15s ease, color .15s ease; }
button.tag-chip:hover { border-color: var(--nv-accent); color: var(--nv-accent); }
button.tag-chip:hover .tag-chip-et, button.tag-chip:hover i { color: var(--nv-accent); }
.tag-chip-riga { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ── Badge di stato: .mv-badge ovunque (liste, view, card, drawer). Il tono è una classe; un
   colore scelto dall'utente (lo stato di una pipeline) resta `--matrix-color` inline. ───────── */
.mv-badge.is-ok { --matrix-color: var(--nv-success); }
.mv-badge.is-ko { --matrix-color: var(--nv-danger); }
.mv-badge.is-attesa { --matrix-color: var(--nv-warning); }
.mv-badge.is-info { --matrix-color: var(--nv-accent); }
.mv-badge.is-neutro { --matrix-color: var(--nv-text-muted); }
.mv-badge.is-ferie { --matrix-color: var(--nv-stato-ferie); }   /* le ferie, in Lista presenze (bordo e testo) */
/* AVVISO (24/09/2026, collaudo punto 7): una cosa da fare — «3 da smistare», «1 da gestire».
   Fondo giallo pieno e testo nero, icona compresa: col solo contorno giallo su fondo scuro, e con
   il grigio di `body a` sopra (il badge era un <a>), non si leggeva. Un badge-link è
   <a class="mv-badge-link"><span class="mv-badge …"></span></a>: il colore sta sullo span. */
.mv-badge.is-avviso { --matrix-color: var(--nv-avviso-fondo); background: var(--nv-avviso-fondo);
                      color: var(--nv-avviso-testo); font-weight: 600; }
.mv-badge.is-avviso i { color: inherit; }
.mv-badge-link { display: inline-block; text-decoration: none; }
.mv-badge-link:hover .mv-badge { filter: brightness(1.08); }
button.mv-badge, .mv-badge.is-cliccabile { background: transparent; cursor: pointer; }
button.mv-badge:hover, .mv-badge.is-cliccabile:hover { background: var(--nv-grid-header); }

/* ── Empty state: icona, una riga che dice cosa manca, una che dice cosa fare, e l'azione. ─── */
.nv-vuoto { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px; padding: 40px 16px; }
.nv-vuoto-icona { font-size: 2.2rem; color: var(--nv-accent); margin-bottom: 6px; }
.nv-vuoto-titolo { color: var(--nv-text-title); font-weight: 600; font-size: 0.98rem; }
.nv-vuoto-testo { color: var(--nv-text-muted); font-size: 0.86rem; max-width: 520px; line-height: 1.45; }
.nv-vuoto-azione { margin-top: 10px; }
.nv-vuoto.nv-vuoto-sm { padding: 18px 12px; gap: 4px; }
.nv-vuoto.nv-vuoto-sm .nv-vuoto-icona { font-size: 1.4rem; margin-bottom: 2px; }

/* ── Riquadro di un grafico: il titolo e il posto per nvGrafico(). ─────────────────────────── */
.nv-panel .nv-panel-titolo { color: var(--nv-text-label); font-size: 0.86rem; font-weight: 500; margin-bottom: 8px; }
.nv-grafico { min-height: 120px; }

/* ── Avviso breve (toast) ──────────────────────────────────────────────────────────────────── */
.swal2-popup.swal2-toast.nv-avviso { background: var(--nv-grid-header); border: 1px solid var(--nv-grid-border);
  color: var(--nv-text-value); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.swal2-popup.swal2-toast.nv-avviso .swal2-title { color: var(--nv-text-value); font-size: 0.88rem; font-weight: 400; }

/* ── /ui-kit: la pagina che mostra il canone (solo amministratori) ─────────────────────────── */
.nv-kit-sez { border-top: 1px solid var(--nv-grid-border); padding: 22px 0 8px; }
.nv-kit-sez > h2 { color: var(--nv-text-title); font-size: 1.1rem; font-weight: 500; margin-bottom: 4px; }
.nv-kit-sez > p { color: var(--nv-text-muted); font-size: 0.84rem; margin-bottom: 14px; max-width: 900px; }
.nv-kit-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.nv-kit-stato { color: var(--nv-text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: .5px; min-width: 90px; }
.nv-kit-codice { background: var(--nv-grid-header); border: 1px solid var(--nv-grid-border); border-radius: 6px;
  color: var(--nv-text-label); font-size: 0.74rem; padding: 10px 12px; margin: 6px 0 0; white-space: pre-wrap;
  word-break: break-word; max-height: 220px; overflow-x: hidden; overflow-y: auto; }
.nv-kit-codice-wrap { position: relative; }
.nv-kit-copia { position: absolute; top: 6px; right: 6px; }
/* /ui-kit?anteprima=…: la pagina dentro un iframe, senza header e footer — il guscio prende tutta
   l'altezza. Il body ha 50px di padding in cima (con !important, in testa al file): il guscio ci
   risale sopra con un margine negativo invece di battere quel padding con un secondo !important. */
body.nv-anteprima .main-content { margin-top: -50px; height: 100vh; height: 100dvh; }
.nv-kit-anteprime { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nv-kit-anteprime iframe { width: 100%; height: calc(100dvh - 230px); min-height: 420px;
  border: 1px solid var(--nv-grid-border); border-radius: 8px; background: var(--nv-page-bg); }
.nv-kit-anteprime.is-una { grid-template-columns: 1fr; }
@media (max-width: 991.98px) { .nv-kit-anteprime { grid-template-columns: 1fr; } }
/* Le due icone-comando del canone possono essere un <button> (lo sono, quando non portano a
   un'altra pagina): senza questa riga il browser gli dà il suo fondo grigio chiaro e il bordo. */
button.toolbar-icon, button.toolbar-button { background: transparent; padding: 0; }
button.toolbar-icon { border: 0; }
body.nv-anteprima #side-actions { display: none; }

/* ── IL FOOTER CHE NON ESCE DALLO SCHERMO (23/09/2026) ──────────────────────────────────────────
   Con diciotto gruppi le icone del menu erano più larghe dello spazio fra orologio e comandi: a
   1280px l'ultima era tagliata a metà, a 390px se ne vedevano quattro e le altre non esistevano.
   Le due ali si stringono, lo spazio fra le icone si adatta alla larghezza, e se non basta ancora
   il menu scorre di lato (senza barra: il gesto è lo stesso delle schede di un browser sul
   telefono). `safe center`: centrato quando ci sta, allineato a sinistra quando scorre — senza,
   la prima icona finirebbe fuori dal bordo sinistro, irraggiungibile.
   Sul telefono l'orologio lascia il posto al menu. La barra inferiore vera arriva con D-27. */
.footer-left, .footer-right { flex: 0 1 280px; min-width: 0; }
.footer-center { flex: 1 1 auto; min-width: 0; justify-content: safe center;
  gap: clamp(10px, 1.7vw, 28px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.footer-center::-webkit-scrollbar { display: none; }
@media (max-width: 767.98px) {
  .footer-left { display: none; }
  .footer-right { flex: 0 0 auto; gap: 10px; }
}
/* Sul telefono il logo va a sinistra: centrato, largo 180px, finiva sotto le quattro icone di
   destra (misurato a 390px: logo fino a 285px, icone da 204px). */
@media (max-width: 575.98px) {
  .header { justify-content: flex-start; padding-left: 16px; }
  .header-center { width: auto; }
  .header-right { gap: 16px; }
}
/* Lo switch del DSL (newSwitch): la larghezza era `width:100%` scritta inline dall'API, e su un
   telefono la colonna è larga quanto lo schermo — ne usciva un ovale di 350px. Adesso riempie la
   colonna fino a 72px, come si vede su desktop dove la colonna è stretta. */
.form-switch .form-check-input.nv-switch-campo { width: 100%; max-width: 72px; height: 38px; margin-left: 0; }
/* …ma mai più stretto dello switch del kit (30/09/2026): dentro un contenitore che si stringe al contenuto (un
   elemento flex, una cella) il 100% si risolveva sul nulla e ne usciva una pillola verticale di 26 × 38 px. */
.form-switch .form-check-input.nv-switch-campo { min-width: 3.25rem; flex-shrink: 0; }

/* ── LE MODAL DI BOOTSTRAP RIMASTE: la veste delle SweetAlert (23/09/2026) ──────────────────────
   Il canone delle finestre è SweetAlert2 (nvModal). Le poche modal di Bootstrap ancora in piedi —
   form lunghi di produzione, magazzino e tesoreria, da riscrivere con calma — prendono almeno lo
   stesso aspetto: stesso fondo, bordo, titolo, × che ruota e i due bottoni del canone nel piede.
   Chi le guarda non deve capire che sono due librerie. */
.nv-modal .modal-content { background: var(--nv-page-bg); color: var(--nv-text-value);
  border: 1px solid var(--nv-grid-border); border-radius: 6px; }
.nv-modal .modal-header, .nv-modal .modal-footer { border-color: var(--nv-grid-border); }
.nv-modal .modal-title { color: var(--nv-text-title); font-weight: 400; }
.nv-modal .modal-footer { justify-content: center; gap: 10px; }
.nv-modal .modal-footer .btn { min-width: 170px; }
.nv-modal .btn-close { filter: invert(1) grayscale(1); opacity: .55; transition: transform .2s ease, opacity .15s ease; }
.nv-modal .btn-close:hover { opacity: 1; transform: rotate(90deg); }

/* Le «mie attività» sul telefono: la riga va a capo (titolo intero sulla prima, lead e scadenza
   sotto) invece di stringere il titolo a una parola per riga e mandare il lead oltre il bordo. */
@media (max-width: 575.98px) {
  .mieatt-row { flex-wrap: wrap; }
  .mieatt-titolo { flex: 1 1 calc(100% - 90px); }
  .mieatt-ent, .mieatt-scad { flex: 1 1 100%; text-align: left; padding-left: 64px; }
}

/* SUL TELEFONO I PANNELLI NON SCORRONO DA SOLI. (In CODA al file apposta: le regole base di
   .nv-dash-scroll e .view-panel stanno più in basso della sezione del guscio, e a parità di
   specificità vince l'ultima — in cima questo blocco non valeva niente.) Su desktop il riquadro della dashboard, il
   dettaglio delle impostazioni e le colonne di una view sono pannelli alti fino al footer, e ognuno
   scorre per conto suo (l'altezza la dà nvAltezzaPannello() in nuvolai.js). Sotto i 768px le colonne
   vanno una sotto l'altra: un pannello alto quanto lo schermo, dentro un guscio che scorre, è uno
   scroll dentro uno scroll — il dito prende quello sbagliato e il fondo non si raggiunge. Qui
   diventano alti quanto il loro contenuto, e scorre il guscio. L'altezza inline la toglie l'helper. */
@media (max-width: 767.98px) {
  .view-panel, .nv-dash-scroll-wrap, .crm-detail, .centro-box { height: auto; min-height: 0; }
  /* Alti quanto il contenuto, ma LARGHI quanto il telefono: una tabella più larga (il conto
     economico, il forecast) scorre di lato dentro il suo pannello invece di essere tagliata dal
     guscio. `hidden` in verticale non taglia niente — l'altezza è quella del contenuto — e
     impedisce che l'asse y diventi `auto` (con x a `auto`, y visible diventerebbe auto: regola CSS). */
  .view-panel, .nv-dash-scroll, .crm-settings-content, .centro-gruppi-scroll, .cm-main-scroll {
    overflow-x: auto; overflow-y: hidden;
  }
}

/* La mia bolla nella chat: l'accento del tema. Prima era il riempimento «primary» di Bootstrap, cioè il blu di
   Bootstrap (#0d6efd), l'unico blu dell'applicazione. */
.nv-chat-mia { background: rgba(85, 213, 204, 0.14); border: 1px solid var(--nv-accent); color: var(--nv-text-value); }

/* ── IL FOCUS DEL CANONE (24/09/2026, collaudo punto 2) ──────────────────────────────────────────
   I bottoni a sola icona (.toolbar-icon, .toolbar-button, il floppy dei pannelli) non avevano uno
   stile di focus: il browser disegnava il suo anello (`outline: auto`, blu). Qui una regola sola
   per tutti i comandi: al clic niente anello, da tastiera un filo teal del tema — lo stesso in dark
   e in light, perché --nv-accent lo ridefinisce il foglio chiaro. Misura: scenari_fix_24_09 F2. */
.toolbar-icon:focus, .toolbar-button:focus, .btn:focus, .swal2-styled:focus, .nv-close-x:focus { outline: none; }
.toolbar-icon:focus-visible, .toolbar-button:focus-visible, .btn:focus-visible,
.swal2-styled:focus-visible, .nv-close-x:focus-visible {
  outline: 2px solid var(--nv-accent); outline-offset: 2px; box-shadow: none;
}

/* ── AZIONI DI RIGA E «PREDEFINITO» (24/09/2026, collaudo punto 5) ──────────────────────────────
   .nv-azioni: le icone d'azione di una riga, tutte della stessa misura e in fila, centrate in
   verticale. .is-azione è il comando generico (hover teal); .is-delete resta il rosso. Senza
   .is-select, che vale 1.5em !important ed è l'icona «apri» delle liste, non un'azione fra le altre.
   .nv-predefinito: il segno del predefinito accanto al nome — stella piena teal, stessa misura. */
.nv-azioni { display: inline-flex; align-items: center; justify-content: center; gap: 14px; }
.nv-azioni .list-action-icon { font-size: 1.1rem; line-height: 1; }
.list-action-icon.is-azione:hover { color: var(--nv-accent); }
.nv-predefinito { color: var(--nv-accent); font-size: 1.1rem; line-height: 1; margin-left: 6px; }

/* Una card KPI che porta da qualche parte (24/09/2026): il link avvolge la card e non ha colore
   suo — i colori stanno su etichetta, valore e sotto-riga, perché `body a` impone il grigio. */
.nv-kpi-link { display: block; height: 100%; text-decoration: none; }
.nv-kpi-link:hover .nv-kpi { border-color: var(--nv-accent); }

/* ── LA BARRA PERIODO (`nv-barra-periodo`: renderBarraPeriodo + nvBarraPeriodo, HR-FIX-3 01/10/2026) ─────────────────────
   Tre parti coi nomi fissi: Intervallo date (.nv-bp-intervallo) al CENTRO ESATTO di #toolbar, Preset periodo (.nv-bp-preset)
   col bordo destro a filo di #toolbar (dal 07/10/2026), Filtri di contesto (.nv-bp-filtri) a sinistra dei Preset, tutti sulla
   stessa linea mediana. Le posizioni sono assolute rispetto a #toolbar (.nv-bp-host): il centro delle date è il centro della toolbar
   (±1 px, misurato da tests/barra_periodo_test.py), e i preset non partecipano al centraggio — `--nv-bp-meta` è metà della
   larghezza dell'Intervallo, la scrive nvBarraPeriodo. Le collisioni le decide nvBarraPeriodo e le applica con le righe
   .nv-bp-riga (fuori da #toolbar, subito dopo: la toolbar non cambia altezza). Controlli alti --nv-bp-h, distanze --nv-bp-gap. */
:root { --nv-bp-h: 30px; --nv-bp-gap: 12px; }
.nv-bp-host { position: relative; }   /* #toolbar (o la toolbar d'esempio del kit) */
/* montata: i pezzi vivono nella toolbar e nelle righe; senza JS resta una fila centrata sotto la toolbar */
.nv-barra-periodo.is-montata { display: none; }
.nv-barra-periodo:not(.is-montata) { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--nv-bp-gap); padding: 0 0 12px; }
.nv-barra-periodo:not(.is-montata) .nv-bp-blocco { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--nv-bp-gap); }
.nv-bp-host > .nv-bp-blocco,
.nv-bp-riga > .nv-bp-blocco { position: absolute; inset: 0; pointer-events: none; }
.nv-bp-host > .nv-bp-blocco > .nv-bp-intervallo,
.nv-bp-riga > .nv-bp-blocco > .nv-bp-intervallo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
/* Preset all'estremità destra (regola definitiva dal 07/10/2026, NOTTE-HR-COMMESSE): bordo destro a filo di #toolbar (o della
   riga), meno lo spazio delle icone della toolbar se ce ne sono (--nv-bp-dx, lo misura il JS). I Filtri subito a sinistra
   dei Preset (--nv-bp-pw = larghezza dei Preset), sulla stessa linea mediana. */
.nv-bp-host > .nv-bp-blocco > .nv-bp-preset,
.nv-bp-riga > .nv-bp-blocco > .nv-bp-preset { position: absolute; top: 50%; right: var(--nv-bp-dx, 0px); transform: translateY(-50%); z-index: 1; }
.nv-bp-host > .nv-bp-blocco > .nv-bp-filtri,
.nv-bp-riga > .nv-bp-blocco > .nv-bp-filtri { position: absolute; top: 50%; right: calc(var(--nv-bp-dx, 0px) + var(--nv-bp-pw, 0px) + var(--nv-bp-gap)); transform: translateY(-50%); z-index: 1; pointer-events: auto; }
.nv-bp-intervallo { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.nv-bp-intervallo .form-control { flex: 0 0 150px; width: 150px; height: var(--nv-bp-h); min-height: var(--nv-bp-h); padding-top: 0; padding-bottom: 0; }
.nv-bp-preset { display: flex; flex-wrap: nowrap; gap: 4px; white-space: nowrap; pointer-events: auto; }
.nv-bp-preset .btn { height: var(--nv-bp-h); display: inline-flex; align-items: center; }
/* i filtri: i campi del DSL senza la loro etichetta sopra (resta per i lettori di schermo), alti come le date */
.nv-bp-filtri { display: flex; align-items: center; gap: 8px; }
/* fra i filtri e #ajaxresult lo spazio c'è solo quando #ajaxresult ha qualcosa da dire */
.nv-bp-filtri + #ajaxresult:not(:empty) { margin-left: var(--nv-bp-gap); }
.nv-bp-filtri .form-group { margin: 0; }
.nv-bp-filtri label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nv-bp-filtri select, .nv-bp-filtri .select2-container { max-width: 220px; min-width: 160px; }
.nv-bp-filtri .form-control, .nv-bp-filtri .form-select { height: var(--nv-bp-h); min-height: var(--nv-bp-h); }
.nv-bp-filtri .select2-container .select2-selection--single { height: var(--nv-bp-h) !important; min-height: var(--nv-bp-h) !important; display: flex; align-items: center; }
/* un cambio di vista fra i Filtri (HR › Occupazione, NOTTE-HR-COMMESSE): l'icona della toolbar, alta come le date */
.nv-bp-filtri .toolbar-icon { height: var(--nv-bp-h); display: inline-flex; align-items: center; margin: 0; }
.nv-bp-filtri .select2-container .select2-selection--single .select2-selection__rendered { line-height: calc(var(--nv-bp-h) - 2px); }
.nv-bp-filtri .select2-container .select2-selection--single .select2-selection__arrow { height: calc(var(--nv-bp-h) - 2px); }
/* le righe sotto la toolbar, solo quando servono */
.nv-bp-riga { display: none; position: relative; min-height: calc(var(--nv-bp-h) + 12px); }
.nv-bp-riga.is-attiva { display: block; }
.nv-bp-riga-filtri.is-attiva { display: flex; justify-content: flex-end; align-items: center; }
/* più filtri di quanti ne stiano in una riga (il Forecast coi tag, a 390 px): vanno a capo, sempre allineati a destra */
.nv-bp-riga-filtri > .nv-bp-filtri { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; flex: 1 1 auto; max-width: 100%; }
.nv-bp-riga-filtri > .nv-bp-filtri select, .nv-bp-riga-filtri > .nv-bp-filtri .select2-container { min-width: 0; max-width: 220px; flex: 1 1 150px; }
.nv-bp-riga-filtri > .nv-bp-filtri { position: static; transform: none; }
/* sotto i 600 px: una riga per parte, i preset scorrono in orizzontale */
.nv-bp-riga.is-stretta { min-height: 0; padding-bottom: 8px; }
.nv-bp-riga > .nv-bp-blocco.is-stretta { position: static; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: auto; }
.nv-bp-riga > .nv-bp-blocco.is-stretta > .nv-bp-intervallo,
.nv-bp-riga > .nv-bp-blocco.is-stretta > .nv-bp-preset { position: static; transform: none; }
.nv-bp-blocco.is-stretta .nv-bp-intervallo { width: 100%; justify-content: center; }
.nv-bp-blocco.is-stretta .nv-bp-intervallo .form-control { flex: 1 1 0; width: auto; min-width: 0; }
/* impilata perché i preset non stanno a destra (fra 600 e ~1100 px): le date restano larghe come nella toolbar */
@media (min-width: 600px) { .nv-bp-blocco.is-stretta .nv-bp-intervallo .form-control { flex: 0 0 150px; width: 150px; } }
.nv-bp-blocco.is-stretta .nv-bp-preset { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nv-bp-blocco.is-stretta .nv-bp-preset::-webkit-scrollbar { display: none; }
@media (max-width: 767.98px) {
  .nv-bp-riga { padding-left: 8px; padding-right: 8px; }
}
/* nel kit (/ui-kit, «Barra periodo»): la toolbar d'esempio ha un bordo e ogni zona porta il suo nome */
.nv-kit-bp-toolbar { border: 1px dashed var(--nv-grid-border); border-radius: 8px; margin: 18px 0 0; min-height: 64px; }
.nv-kit-bp .nv-bp-intervallo, .nv-kit-bp .nv-bp-preset, .nv-kit-bp .nv-bp-filtri { outline: 1px dashed var(--nv-accent); outline-offset: 3px; }
.nv-kit-bp .nv-bp-filtri { position: relative; }
.nv-kit-bp .nv-bp-intervallo::after, .nv-kit-bp .nv-bp-preset::after, .nv-kit-bp .nv-bp-filtri::after {
  position: absolute; left: 0; top: -22px; font-size: 0.65rem; letter-spacing: .4px; text-transform: uppercase; color: var(--nv-accent); white-space: nowrap; }
.nv-kit-bp .nv-bp-intervallo::after { content: 'Intervallo date'; }
.nv-kit-bp .nv-bp-preset::after { content: 'Preset periodo'; }
.nv-kit-bp .nv-bp-filtri::after { content: 'Filtri di contesto'; }

/* UNA TOOLBAR È ALTA QUANTO UNA TOOLBAR, con o senza icone (24/09/2026): 64px in lista, 53 dove
   c'era solo il breadcrumb — e tutto quello che sta sotto scendeva o saliva di 11px da una pagina
   all'altra (la barra del periodo di Dashboard KPI e della Marginalità non coincideva). Ogni
   colonna alta almeno quanto un'icona della toolbar. */
#toolbar > [class*="col"] { min-height: 40px; }

/* LA CARD KPI GRANDE (24/09/2026): il totale di una risposta di NL2STAT, come la card della
   Dashboard KPI ma alta quanto i grafici accanto — valore grande, variazione, sparkline mensile. */
.nv-kpi.nv-kpi-grande { display: flex; flex-direction: column; padding: 16px 18px 8px; }
.nv-kpi.nv-kpi-grande .nv-kpi-val { font-size: 2rem; margin-top: 6px; }
.nv-kpi.nv-kpi-grande .nv-kpi-delta { display: block; margin: 4px 0 0; }
.nv-kpi.nv-kpi-grande .nv-kpi-spark { margin-top: auto; min-height: 70px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   CICLO MERCE (24/09/2026) — i componenti che Ordini di vendita, Magazzino, Spedizioni e MRP
   condividono. Sono nel kit (/ui-kit, sezioni «Campo di sparo», «Blocco», «Card dell'ordine»).
     sparo            .nv-sparo (+ -campo -contatore), righe .nv-sparo-riga (.is-parziale gialla in
                      cima, .is-completa verde in fondo, .is-eccedenza/.is-estranea arancio),
                      lampeggi .is-ok .is-errore .is-arancio sul campo              ← nv-sparo.js
     blocco           .nv-blocco-spento (pagina di un altro: si guarda, non si tocca) ← nv-blocco.js
     card dell'ordine .nv-ordine-cards / .nv-ordine-card (le sei card della riga espandibile)
     riga da guardare .nv-riga-verifica (prezzo sotto il ricarico minimo: si evidenzia, non si blocca)
   I colori sono token: il tema chiaro ridefinisce solo quelli.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --nv-sparo-parziale-fondo: rgba(245, 196, 35, 0.16);
  --nv-sparo-parziale-bordo: #f5c423;
  --nv-sparo-completa-fondo: rgba(87, 213, 85, 0.13);
  --nv-sparo-completa-bordo: var(--nv-success);
  --nv-sparo-arancio-fondo:  rgba(245, 166, 35, 0.20);
  --nv-sparo-campo-h: 64px;
}

/* il campo di sparo: grande, sempre a fuoco, lampeggia del colore dell'esito */
.nv-sparo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.nv-sparo-campo { flex: 1 1 320px; min-width: 0; height: var(--nv-sparo-campo-h); font-size: 1.5rem; letter-spacing: .04em;
                  text-align: center; background: var(--nv-page-bg); color: var(--nv-text-title);
                  border: 2px solid var(--nv-accent); border-radius: 8px; outline: none;
                  transition: background-color .25s ease, border-color .25s ease; }
.nv-sparo-campo::placeholder { color: var(--nv-text-muted); font-size: 1rem; letter-spacing: 0; }
.nv-sparo-campo.is-ok { background: var(--nv-sparo-completa-fondo); border-color: var(--nv-success); }
.nv-sparo-campo.is-errore { background: rgba(219, 49, 49, 0.22); border-color: var(--nv-danger); }
.nv-sparo-campo.is-arancio { animation: nvSparoLampeggio .35s ease-in-out 3; border-color: var(--nv-warning); }
.nv-sparo-campo:disabled { opacity: .55; cursor: not-allowed; }
@keyframes nvSparoLampeggio { 0%, 100% { background: var(--nv-page-bg); } 50% { background: var(--nv-sparo-arancio-fondo); } }
.nv-sparo-contatore { font-size: 1rem; color: var(--nv-text-label); white-space: nowrap; }
.nv-sparo-contatore b { color: var(--nv-text-title); font-size: 1.35rem; }

/* le righe della spunta: la gialla sale, la verde scende; il colore sta sulle celle perché DataTables
   e .nv-matrix colorano le celle e un fondo sul <tr> non si vedrebbe */
.nv-sparo-riga > td { transition: background-color .3s ease; }
.nv-sparo-riga.is-parziale > td { background: var(--nv-sparo-parziale-fondo); }
.nv-sparo-riga.is-parziale > td:first-child { box-shadow: inset 3px 0 0 var(--nv-sparo-parziale-bordo); }
.nv-sparo-riga.is-completa > td { background: var(--nv-sparo-completa-fondo); }
.nv-sparo-riga.is-completa > td:first-child { box-shadow: inset 3px 0 0 var(--nv-sparo-completa-bordo); }
.nv-sparo-riga.is-eccedenza > td, .nv-sparo-riga.is-estranea > td { background: var(--nv-sparo-arancio-fondo); }
.nv-sparo-riga.is-eccedenza > td:first-child, .nv-sparo-riga.is-estranea > td:first-child { box-shadow: inset 3px 0 0 var(--nv-warning); }
.nv-sparo-riga.is-appena > td { animation: nvSparoAppena .6s ease-out 1; }
@keyframes nvSparoAppena { from { filter: brightness(1.6); } to { filter: none; } }
.nv-sparo-foto { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid var(--nv-grid-border); }
.nv-sparo-foto-vuota { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
                       border: 1px dashed var(--nv-grid-border); border-radius: 4px; color: var(--nv-text-muted); }
.nv-sparo-qta { font-size: 1.05rem; font-weight: 600; text-align: center; white-space: nowrap; }
.nv-sparo-qta.is-fatte { color: var(--nv-success); }
.nv-sparo-qta.is-mancano { color: var(--nv-danger-testo); }
.nv-sparo-lotti { display: block; font-size: .72rem; color: var(--nv-text-muted); }

/* il blocco: la pagina di un altro si guarda e basta */
.nv-blocco-spento { opacity: .45; pointer-events: none; user-select: none; }

/* le sei card della riga espandibile dell'ordine (cliente, note interne, note corriere, spedizione,
   documenti, lavorazione): stessa altezza, colore del bordo sinistro per tipo, a capo sul telefono */
.nv-ordine-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 10px 4px; }
@media (max-width: 1399.98px) { .nv-ordine-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px)  { .nv-ordine-cards { grid-template-columns: 1fr; } }
.nv-ordine-card { background: var(--nv-page-bg); border: 1px solid var(--nv-grid-border); border-left: 3px solid var(--card, var(--nv-accent));
                  border-radius: 6px; padding: 10px 12px; min-height: 150px; font-size: .8rem; color: var(--nv-text-value); overflow-wrap: anywhere; }
.nv-ordine-card-titolo { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .74rem; letter-spacing: .06em;
                         text-transform: uppercase; color: var(--card, var(--nv-accent)); margin-bottom: 8px; }
.nv-ordine-card-titolo i { font-size: 1.1rem; }
.nv-ordine-card-vuota { color: var(--nv-text-muted); font-style: italic; }
.nv-ordine-card dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 0; }
.nv-ordine-card dt { color: var(--nv-text-label); font-weight: 400; }
.nv-ordine-card dd { margin: 0; }

/* la riga con il prezzo sotto il ricarico minimo: evidenziata, mai bloccata (promo o errore) */
.nv-riga-verifica > td { background: var(--nv-sparo-arancio-fondo); }
.nv-riga-verifica > td:first-child { box-shadow: inset 3px 0 0 var(--nv-warning); }

/* il logo del corriere nella card della spedizione */
.nv-corriere-logo { display: block; max-height: 42px; max-width: 150px; margin: 4px 0 10px; }

/* il valore della proposta MRP che segue lo scorrimento (in alto a destra, sopra il contenuto) */
.nv-mrp-flottante { position: sticky; top: 64px; z-index: 5; float: right; margin: 0 0 8px 12px; }
/* le sei card dell'ordine, colore per tipo (vendCarteHtml le crea con la classe del tipo) */
.nv-ordine-card.is-cliente        { --card: var(--nv-cat-1); }
.nv-ordine-card.is-note-interne   { --card: var(--nv-cat-3); }
.nv-ordine-card.is-note-corriere  { --card: var(--nv-cat-5); }
.nv-ordine-card.is-spedizione     { --card: var(--nv-cat-2); }
.nv-ordine-card.is-documenti      { --card: var(--nv-cat-4); }
.nv-ordine-card.is-lavorazione    { --card: var(--nv-cat-6); }
/* la matrice canale × stato degli ordini: ogni numero è un filtro, quello in uso è teal */
.nv-matrix a.nv-ov-cella { color: var(--nv-text-value); }
.nv-matrix a.nv-ov-cella:hover { color: var(--nv-accent); }
.nv-matrix a.nv-ov-cella.is-on { color: var(--nv-accent); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   L'AUTOFILL DEL BROWSER (25/09/2026) — kit, sezione «Campo compilato dal browser».
   Chrome ed Edge dipingono di azzurro (o giallo) il fondo di un campo che hanno riempito da soli
   (:-webkit-autofill), e quel fondo non lo batte nessun background: al login la password diventava
   un rettangolo chiaro su una pagina nera. Si copre con un'OMBRA INTERNA del colore del campo, il
   testo si forza col fill (il `color` lo ignorano), e la transizione lunghissima impedisce il lampo
   azzurro al caricamento. Non si spegne niente: dove l'autofill è voluto (login, registrazione,
   form pubblici) continua a riempire, solo col vestito del canone.
   Tre blocchi e non uno: un selettore che un browser non conosce (:autofill su un Chrome vecchio,
   :-webkit-autofill su Firefox) butta via tutta la regola in cui sta. Il terzo è l'anteprima del kit.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --nv-campo-fondo: #000000;
  --nv-campo-testo: #f0f7ff;
  --nv-campo-bordo: #6b6b6b;   /* NOTTE-STILI-UX: il contorno di un CONTROLLO ≥ 3:1 (era #3c3c3c, 1,9:1) */
  --nv-campo-bordo-focus: #55d5cc;
  --nv-campo-anello: rgba(85, 213, 204, 0.25);
}
input:-webkit-autofill, input:-webkit-autofill:hover,
textarea:-webkit-autofill, textarea:-webkit-autofill:hover,
select:-webkit-autofill, select:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px var(--nv-campo-fondo) inset !important;
  box-shadow: 0 0 0 1000px var(--nv-campo-fondo) inset !important;
  -webkit-text-fill-color: var(--nv-campo-testo) !important;
  caret-color: var(--nv-campo-testo);
  border-color: var(--nv-campo-bordo) !important;
  transition: background-color 600000s 0s, color 600000s 0s !important;
}
input:-webkit-autofill:focus, textarea:-webkit-autofill:focus, select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--nv-campo-fondo) inset, 0 0 0 0.35rem var(--nv-campo-anello) !important;
  box-shadow: 0 0 0 1000px var(--nv-campo-fondo) inset, 0 0 0 0.35rem var(--nv-campo-anello) !important;
  -webkit-text-fill-color: var(--nv-campo-testo) !important;
  border-color: var(--nv-campo-bordo-focus) !important;
}
input:autofill, input:autofill:hover, textarea:autofill, textarea:autofill:hover, select:autofill, select:autofill:hover {
  box-shadow: 0 0 0 1000px var(--nv-campo-fondo) inset !important;
  -webkit-text-fill-color: var(--nv-campo-testo) !important;
  caret-color: var(--nv-campo-testo);
  border-color: var(--nv-campo-bordo) !important;
  transition: background-color 600000s 0s, color 600000s 0s !important;
}
input:autofill:focus, textarea:autofill:focus, select:autofill:focus {
  box-shadow: 0 0 0 1000px var(--nv-campo-fondo) inset, 0 0 0 0.35rem var(--nv-campo-anello) !important;
  -webkit-text-fill-color: var(--nv-campo-testo) !important;
  border-color: var(--nv-campo-bordo-focus) !important;
}
/* l'anteprima di /ui-kit: lo stato autofill non si può provocare da CSS, lo si simula con la classe */
.nv-autofill-anteprima {
  -webkit-box-shadow: 0 0 0 1000px var(--nv-campo-fondo) inset !important;
  box-shadow: 0 0 0 1000px var(--nv-campo-fondo) inset !important;
  -webkit-text-fill-color: var(--nv-campo-testo) !important;
  caret-color: var(--nv-campo-testo);
  border-color: var(--nv-campo-bordo) !important;
}
.nv-autofill-anteprima:focus {
  box-shadow: 0 0 0 1000px var(--nv-campo-fondo) inset, 0 0 0 0.35rem var(--nv-campo-anello) !important;
  border-color: var(--nv-campo-bordo-focus) !important;
}

/* ── CAMPO PASSWORD CON OCCHIOLINO (26/09/2026) ──────────────────────────────────────────────────
   Le password DELL'UTENTE NUVOLAI (login, recupero, registrazione, primo accesso, cambio): il campo
   e, dentro a destra, il bottone mostra/nascondi (occhio / occhio barrato, aria-label «Mostra
   password» / «Nascondi password»). Si genera con nvCampoPassword() (kit.php) o, da JS,
   nvCampoPasswordHtml() (nv-kit.js), che fa anche il comportamento. Le credenziali di terzi NON lo
   usano: hanno newCredenziale. Il tono dell'icona: testo attenuato a riposo, accento a fuoco.
   --nv-campi-distanza è la distanza verticale fra i campi di un form a una colonna, quella del
   login: la usano le pagine di autenticazione (auth.css) e .nv-campi-colonna qui sotto. */
:root { --nv-campi-distanza: 12px; }
.nv-campi-colonna { display: flex; flex-direction: column; align-items: stretch; gap: var(--nv-campi-distanza); }
.nv-pw { position: relative; width: 100%; }
.nv-pw > input { padding-right: 46px !important; }
.nv-pw-occhio {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: var(--nv-text-muted); font-size: 1rem; line-height: 1; cursor: pointer; transition: color .15s ease;
}
.nv-pw-occhio:hover, .nv-pw-occhio:focus-visible { color: var(--nv-accent); }
.nv-pw-occhio:focus-visible { outline: 1px solid var(--nv-accent); outline-offset: 1px; }
.nv-pw-occhio .nv-pw-nascondi, .nv-pw.is-visibile .nv-pw-occhio .nv-pw-mostra { display: none; }
.nv-pw.is-visibile .nv-pw-occhio .nv-pw-nascondi { display: inline; }
.nv-pw.is-visibile .nv-pw-occhio { color: var(--nv-accent); }

/* ── PAGINAZIONE DELLE LISTE PAGINATE DAL SERVER (Offerte, 28/09/2026) ──────────────────────────
   Fino a qui nessuna lista usava i bottoni di pagina di DataTables (paging:false ovunque), e quelli
   spenti restavano col grigio scuro di Bootstrap su fondo nero: contrasto 1,36, illeggibili. Colori
   dai token, quindi valgono identici in chiaro. */
.card-body-table .page-link { color: var(--nv-text-value); background: transparent; border-color: var(--nv-grid-border); }
.card-body-table .disabled > .page-link, .card-body-table .page-link.disabled {
  color: var(--nv-text-muted); background: transparent; border-color: var(--nv-grid-border);
}

/* ── LINK UNICO DEI DOCUMENTI: la zona «azioni del destinatario» dello sfogliatore (28/09/2026) ──
   Nasce vuota: servirà alla skill Firma digitale («Accetta e firma»). Vuota non occupa spazio. */
.tracc-azioni { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }
.tracc-azioni:empty { display: none; }

/* ── COSTI ESTERNI: la riga che vale meno dei suoi costi (Offerte, 28/09/2026) ───────────────────
   Nessun blocco: l'imponibile della riga prende il colore dei numeri negativi, e sotto la riga c'è
   l'avviso col confronto. */
.doc-riga.is-sottocosto .r-imp { color: var(--nv-money-neg); font-weight: 600; }

/* ── ANTEPRIMA MODIFICABILE DELL'OFFERTA (28/09/2026) ──────────────────────────────────────────
   Il pannello largo che copre il form: un documento A4 ha bisogno di più dei 640px del cassetto
   standard. L'iframe arriva al fondo del pannello, sopra il piede con il Salva. */
.crm-drawer.is-wide.is-documento { width: 920px; }
.nv-anteprima-frame { height: calc(100vh - 170px); background: transparent; }   /* il foglio bianco lo dà il documento */

/* ── PANNELLI DELL'HEADER SUL TELEFONO (29/09/2026, notte go-live) ─────────────────────────────
   Campanella e timbratura aprono un pannello largo 340px ancorato alla propria icona: a 390px
   l'icona della timbratura non è l'ultima a destra e il pannello usciva dal bordo sinistro dello
   schermo. Sotto i 576px il pannello si aggancia allo schermo, non all'icona: 16px di margine. */
@media (max-width: 575.98px) {
  .notif-dropdown { position: fixed; top: calc(var(--nv-shell-top, 64px) + 4px); left: 16px; right: 16px; width: auto; }
}

/* ── SELECT CON RICERCA: la riga di un risultato (30/09/2026) ──────────────────────────────────
   nvSelectCerca() del kit (Cliente / Fornitore / Lead dei documenti): ragione sociale in grassetto,
   sotto P.IVA e città più piccole. Il colore lo eredita dalla tendina di select2 (scura e chiara, con
   la riga evidenziata del kit): qui solo peso e dimensione, niente colori nuovi. */
.nv-sc-riga { line-height: 1.25; }
.nv-sc-rag { font-weight: 600; }
.nv-sc-sotto { font-size: .78rem; opacity: .72; margin-top: 2px; }

/* IL BOTTONE «REGISTRA PRESENZA» DEL FOOTER (NOTTE-OFFERTE-HR, 06/10/2026; prima un'icona nell'header): accanto a data e
   ora, piccolo. «Registra presenza» è il secondario a contorno di Bootstrap; «Presenza registrata» è verde col token success,
   in tutti e due i temi. Sul telefono l'orologio lascia il posto al menu, il bottone no: resta, e il menu scorre accanto. */
/* con il bottone l'ala sinistra non si stringe (data e ora restano intere): è il menu al centro che scorre, come sempre */
.footer-left.has-presenza{ display:flex; align-items:center; gap:12px; flex:0 0 auto; width:auto; }
.footer-left.has-presenza .clock{ flex:0 0 auto; white-space:nowrap; }
/* (NOTTE-HR-COMMESSE, 3.4) i due stati, senza riempimento: «Registra presenza» bordo e testo nel colore del testo (bianco sul
   tema scuro), «Presenza registrata» bordo verde e testo bianco. Nel tema chiaro gli stessi ruoli coi token del tema
   (--nv-text-title è il testo scuro, --nv-success il verde scuro). Non è più un btn-outline-secondary / btn-success. */
.nv-presenza-btn{ font-size:11px; line-height:1.2; padding:4px 10px; border-radius:999px; white-space:nowrap; flex:0 0 auto;
  background:transparent; border:1px solid var(--nv-text-title); color:var(--nv-text-title); }
.nv-presenza-btn:hover, .nv-presenza-btn:focus{ background:transparent; border-color:var(--nv-accent); color:var(--nv-text-title); }
.nv-presenza-btn.is-registrata,
.nv-presenza-btn.is-registrata:hover,
.nv-presenza-btn.is-registrata:focus{ background:transparent; border-color:var(--nv-success); color:var(--nv-text-title); }
#hr-timbra.is-occupato{ pointer-events:none; opacity:.6; }
.nv-presenza-btn .nv-presenza-breve{ display:none; }
@media (max-width: 767.98px){
  .footer-left.has-presenza{ display:flex; flex:0 0 auto; width:auto; }
  .footer-left.has-presenza .clock{ display:none; }
  /* sul telefono il bottone dice «Presenza» (lo stato è il colore; il testo intero resta nel tooltip e per i lettori di
     schermo) e l'ala destra prende la sua larghezza vera, non 280px: il menu al centro mantiene il suo spazio */
  .nv-presenza-btn .nv-presenza-testo{ display:none; }
  .nv-presenza-btn .nv-presenza-breve{ display:inline; }
  .footer:has(.footer-left.has-presenza) .footer-right{ width:auto; }
}
/* La modal di blocco della georeferenziazione obbligatoria: istruzioni per browser e, sotto «Riprova», il riferimento HR. */
.nv-geo-blocco .nv-geo-istruzioni{ font-size:.86rem; margin-top:6px; }
.nv-geo-blocco .nv-geo-istruzioni ul{ padding-left:18px; margin:0 0 6px; }
.nv-geo-blocco .nv-geo-istruzioni li{ margin-bottom:4px; }
.nv-geo-blocco .nv-geo-riferimento{ font-size:.86rem; text-align:center; }
.nv-informativa{ max-height:55vh; overflow:auto; font-size:.88rem; }
.nv-informativa h3{ font-size:1.05rem; } .nv-informativa h4{ font-size:.95rem; margin-top:12px; }
.nv-hr-uscita{ text-align:center; }
.nv-hr-uscita .nv-hr-uscita-ore{ font-size:1.05rem; }
.nv-hr-uscita .nv-hr-uscita-avviso{ margin-top:14px; padding:10px 12px; border-radius:8px; border:1px solid var(--nv-warning); text-align:left; }
.nv-hr-uscita .nv-hr-uscita-permesso{ margin-top:12px; color:var(--nv-success); }

/* ── NUOVI MODULI (27/09/2026, sprint-nuovi-moduli) ─────────────────────────────────────────────
   DETTATURA VOCALE (kit: nvDettatura in nv-kit.js). Il microfono sta nell'angolo in alto a destra
   del .form-group del campo, alla stessa altezza dell'etichetta; mentre ascolta è teal e pulsa. */
.nv-dettatura-box { position: relative; }
.nv-dettatura-mic { position: absolute; top: 0; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: transparent; color: var(--nv-text-muted); display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 1rem; }
.nv-dettatura-mic:hover, .nv-dettatura-mic:focus-visible { color: var(--nv-accent); }
.nv-dettatura-mic.is-ascolto { color: #000; background: var(--nv-accent); animation: nv-dettatura-pulsa 1.4s ease-in-out infinite; }
@keyframes nv-dettatura-pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(85,213,204,.55); } 50% { box-shadow: 0 0 0 7px rgba(85,213,204,0); } }
/* La foto principale di un bene in cima alla sua vista (motore dei beni). */
.nv-view-foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid #3a3a3a; }
/* LA PAGINAZIONE DELLE LISTE LATO SERVER (kit: nvListaServer). Fino a ieri nessuna lista paginava e i
   bottoni di DataTables tenevano il testo scuro di Bootstrap su fondo nero (contrasto 1,4): qui prendono
   i colori del guscio — grigio a riposo, teal al passaggio, bianco la pagina corrente. */
.card-body-table .page-link { color: var(--nv-text-muted); background: transparent; border-color: transparent; }
.card-body-table .page-item.disabled .page-link, .card-body-table .page-link.disabled { color: var(--nv-text-muted); opacity: .45; background: transparent; }
/* ── NUVOLAI WEBSITE (27/09/2026) ─────────────────────────────────────────────────────────────────
   L'EDITOR delle pagine (GrapesJS, in locale): occupa l'altezza della finestra sotto la toolbar e
   scorre solo dentro (tela e pannelli). I pannelli prendono i colori del guscio: fondo della pagina,
   testo grigio, teal per ciò che è attivo. La tela resta il sito vero, coi suoi colori. */
.nv-web-editor-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.nv-web-editor { height: calc(100vh - 190px); min-height: 480px; border: 1px solid var(--nv-grid-border); border-radius: 6px; overflow: hidden; }
.nv-web-editor .gjs-one-bg { background-color: var(--nv-page-bg); }
.nv-web-editor .gjs-two-color { color: var(--nv-text-muted); }
.nv-web-editor .gjs-three-bg { background-color: var(--nv-accent); color: #000; }
.nv-web-editor .gjs-four-color, .nv-web-editor .gjs-four-color-h:hover { color: var(--nv-accent); }
.nv-web-editor .gjs-pn-panel, .nv-web-editor .gjs-block, .nv-web-editor .gjs-category-title, .nv-web-editor .gjs-layer-title,
.nv-web-editor .gjs-sm-sector-title, .nv-web-editor .gjs-field { border-color: var(--nv-grid-border); }
.nv-web-editor .gjs-block { min-height: 78px; width: calc(50% - 10px); border-radius: 6px; }
.nv-web-editor .gjs-block:hover { color: var(--nv-accent); box-shadow: 0 0 0 1px var(--nv-accent); }
.nv-web-editor .gjs-field { background-color: var(--nv-campo-fondo); color: var(--nv-campo-testo); }
.nv-web-blocco-icona { display: block; font-size: 1.6rem; margin-bottom: 6px; }
/* Il dispositivo (computer, tablet, telefono) si sceglie dai bottoni della toolbar di Nuvolai: la tendina di GrapesJS non c'è. */
.nv-web-editor .gjs-devices-c { display: none; }
/* L'ANTEPRIMA di una pagina nella sua vista: il sito in un riquadro alto quanto la finestra, che scorre dentro. */
.nv-web-anteprima { height: calc(100vh - 190px); min-height: 420px; border: 1px solid var(--nv-grid-border); border-radius: 6px; overflow: hidden; background: var(--nv-page-bg); }
.nv-web-anteprima iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 575.98px) { .nv-web-editor, .nv-web-anteprima { height: calc(100vh - 230px); } }
/* FOTO E VIDEO di una scheda (27/09/2026) — il componente media del kit (media.lib.php, nvMedia* in nv-kit.js).
   I video stanno nella stessa griglia delle foto (.nv-foto-grid) e si riordinano insieme. */
.nv-media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.nv-media-grid .nv-foto-item { width: auto; height: auto; aspect-ratio: 1 / 1; }
.nv-media-item.is-video img { cursor: pointer; }
.nv-media-senza { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 2rem; color: var(--nv-text-dim, #8a8a8a); }
.nv-media-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .95rem; padding-left: 3px; transition: background .15s ease, color .15s ease; }
.nv-media-play:hover { background: var(--nv-accent, #55d5cc); color: #000; }
.nv-media-tipo { position: absolute; left: 4px; top: 4px; padding: 1px 7px; border-radius: 8px; background: rgba(0,0,0,.62); color: #fff; font-size: .68rem; max-width: calc(100% - 38px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-media-azioni { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 10px; }
/* La galleria della vista (sola lettura): miniature a griglia, i video si aprono nel lettore. */
.nv-media-vista { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.nv-media-vista-item { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; border: 1px solid var(--nv-grid-border, #3a3a3a); background: #0a0a0a; }
.nv-media-vista-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nv-media-vista-item .nv-media-tipo { top: auto; bottom: 4px; max-width: calc(100% - 8px); }
/* Il lettore (modale) e la finestra «Aggiungi un video». */
.nv-media-popup { padding: 12px !important; }
.nv-media-lettore { display: block; width: 100%; max-height: 72vh; background: #000; border: 0; border-radius: 6px; }
.nv-media-lettore-box { position: relative; aspect-ratio: 16 / 9; }
.nv-media-lettore-box .nv-media-lettore { position: absolute; inset: 0; height: 100%; max-height: none; }
.nv-media-add-anteprima img { max-width: 100%; max-height: 180px; border-radius: 6px; display: block; }
.nv-media-progresso .progress { height: 6px; }
@media (max-width: 575.98px) { .nv-media-grid { grid-template-columns: repeat(3, 1fr); } }

/* ══ VALIDAZIONE DEI FORM (nvValida / nvErroriCampi di nv-kit.js, 30/09/2026 — HR giro 2) ════════════════════════
   Un campo in errore ha il bordo rosso pieno e, SOTTO, il messaggio che dice cosa manca; il fuoco va sul primo. Il bordo
   sta sull'elemento che si VEDE: l'altInput del date picker, la .select2-selection, l'editor — non sull'input nascosto
   (il bordo tratteggiato di checkInput() finiva lì, e chi compilava non vedeva niente: bug 2.1 del giro 2). */
.nv-campo-errore,
.form-control.nv-campo-errore,
.form-select.nv-campo-errore,
.select2-container .select2-selection.nv-campo-errore{ border-color:var(--nv-danger) !important; box-shadow:0 0 0 1px var(--nv-danger) !important; }
.nv-campo-msg{ display:block; margin:5px 0 0 4px; font-size:12px; line-height:1.35; font-weight:500; color:var(--nv-danger-testo); }

/* ══ BOTTONI DI DECISIONE (30/09/2026 — HR giro 2) ═══════════════════════════════════════════════════════════════
   L'UNICA eccezione al canone dei due bottoni teal: APPROVA (success) e RIFIUTA (danger), grandi, a tutta larghezza del
   box, uno sotto l'altro. Solo dove una persona DECIDE su una richiesta di un'altra. Anche nella conferma della modal
   (customClass.confirmButton). Il testo segue --nv-su-success / --nv-su-danger: il verde del tema scuro è chiaro e
   vuole il testo scuro, quello del chiaro è scuro e vuole il bianco. */
:root{ --nv-su-success:#0E1116; --nv-su-danger:#ffffff; }
.btn-nv-approva, .btn-nv-rifiuta{
  display:block; width:100%; padding:12px 16px; border:1px solid transparent; border-radius:8px;
  font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.2; cursor:pointer;
  transition:filter .15s ease, box-shadow .15s ease;
}
.btn-nv-approva{ background:var(--nv-success); border-color:var(--nv-success); color:var(--nv-su-success); }
.btn-nv-rifiuta{ background:var(--nv-danger); border-color:var(--nv-danger); color:var(--nv-su-danger); }
.btn-nv-approva:hover, .btn-nv-rifiuta:hover{ filter:brightness(1.08); }
.btn-nv-approva:focus-visible, .btn-nv-rifiuta:focus-visible{ outline:2px solid var(--nv-accent); outline-offset:2px; }
.btn-nv-approva + .btn-nv-rifiuta, .btn-nv-rifiuta + .btn-nv-approva{ margin-top:10px; }
/* nella modal la conferma non è a tutta larghezza: è il bottone della finestra */
.swal2-actions .btn-nv-approva, .swal2-actions .btn-nv-rifiuta{ display:inline-block; width:auto; margin:0 6px 8px; }

/* ══ CARD KPI CLICCABILE (nvKpi con 'href', 30/09/2026 — Dashboard HR) ══════════════════════════════════════════
   Il valore apre l'elenco filtrato di competenza: la card è un link, senza sottolineature, e al passaggio prende il
   bordo teal del kit. */
.nv-kpi-link{ display:block; color:inherit; text-decoration:none; height:100%; }
.nv-kpi-link > .nv-kpi{ height:100%; transition:border-color .15s ease; }
.nv-kpi-link:hover > .nv-kpi{ border-color:var(--nv-accent); }
.nv-kpi-link:focus-visible{ outline:2px solid var(--nv-accent); outline-offset:2px; border-radius:10px; }

/* ── LA RIGA D'OFFERTA (OFFERTE-REVISIONE-3, 06/10/2026): l'icona Descrizione è accesa (teal) quando la riga ha un testo
   visibile nel documento, e resta accesa mentre il suo pannello è aperto; il pannello dei testi sotto la riga ha il respiro
   delle sottorighe dei costi. ── */
.list-action-icon.r-descr-btn.is-segnata, .list-action-icon.r-descr-btn.is-aperta { color: var(--nv-accent); }
.doc-riga-child .r-pannello { padding: 10px 0 2px; }

/* ══ IMPOSTAZIONE — il blocco standard (NOTTE-HR-COMMESSE, 07/10/2026) ════════════════════════════════════════════
   Ogni impostazione della piattaforma è un blocco: titolo, descrizione e SOTTO il controllo, a sinistra, senza
   etichetta (switch, campo o select). Un'impostazione che dipende da un'altra sta DENTRO il blocco della principale, sotto,
   e compare solo quando la principale è attiva. Fra due blocchi, e fra due figlie, sempre la stessa distanza
   (--nv-imp-gap). Componente: nvImpostazione() in kit.php; il motore delle impostazioni lo usa per ogni voce. */
:root{ --nv-imp-gap:16px; --nv-imp-bordo:#444444; }
.nv-imp-lista{ display:flex; flex-direction:column; gap:var(--nv-imp-gap); margin-bottom:var(--nv-imp-gap); }
.nv-imp-lista:empty{ display:none; }
.crm-block.nv-imp{ margin:0; height:auto; }
.nv-imp-ctrl{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px; text-align:left; }
.nv-imp-ctrl > .crm-switch-inline, .nv-imp-ctrl > .crm-inline{ margin:0; }
.nv-imp-ctrl .form-check.form-switch{ margin:0; }
.nv-imp-ctrl > label, .nv-imp-ctrl .crm-switch-inline > label{ display:none; }   /* l'etichetta del newSwitch: il titolo è già quello del blocco */
.nv-imp-ctrl .crm-save-hint{ margin-left:0; }
.nv-imp-ctrl.nv-imp-corpo{ display:block; }
.nv-imp-ctrl + .nv-imp-corpo{ margin-top:12px; }
.nv-imp-nota{ margin-top:8px; }
.nv-imp-nota:empty, .nv-imp-nota > :empty{ display:none; }
.nv-imp-figlie{ display:flex; flex-direction:column; gap:var(--nv-imp-gap); margin-top:var(--nv-imp-gap);
  padding-top:var(--nv-imp-gap); border-top:1px solid var(--nv-imp-bordo); }
.nv-imp-figlie > .nv-imp{ border:0; border-radius:0; padding:0; background:transparent; }
.nv-imp-figlie > .nv-imp + .nv-imp{ border-top:1px solid var(--nv-imp-bordo); padding-top:var(--nv-imp-gap); }
.nv-imp-figlie .nv-imp-figlie{ border-top:0; padding-top:0; padding-left:var(--nv-imp-gap); border-left:2px solid var(--nv-imp-bordo); }
/* l'etichetta VUOTA del DSL (`;id;…` → <label>&nbsp;&nbsp;<b></b></label>) dentro un blocco non occupa una riga: il titolo
   del campo è quello del blocco */
.nv-imp label:has(> b:empty){ display:none; }
/* le select del DSL nel controllo di un blocco sono larghe quanto quelle del motore (.crm-inline) */
.nv-imp-ctrl > .select2-container, .nv-imp-ctrl > .form-group > .select2-container, .nv-imp-ctrl > .form-group > select{ max-width:340px; }
/* le righe di un elenco dentro un blocco hanno il filo dei blocchi, non quello di Bootstrap */
.nv-imp-corpo .border{ border-color:var(--nv-imp-bordo) !important; }

/* ══ BADGE TRATTEGGIATO (NOTTE-HR-COMMESSE, 07/10/2026): una cosa in attesa di una decisione — «PE in attesa», il permesso
   chiesto con «Esco per un permesso» che il responsabile non ha ancora deciso. Non è un'anomalia: niente rosso, bordo a
   tratti nel colore del testo secondario. nvBadge($t, 'tratteggiato'). */
.mv-badge.is-tratteggiato { --matrix-color: var(--nv-text-label); border-style: dashed; }

/* ══ I NOMINATIVI DELLA LISTA PRESENZE (NOTTE-HR-COMMESSE, 3.3): nel colore del testo primario, non nel grigio delle celle
   né in quello dei link (`body a` è !important, quindi serve la stessa forza). Bianco sul nero (21:1), #0E1116 sul chiaro
   (--nv-text-title del tema chiaro): misurato da tests/scenari_presenze_coerenza.py. */
.pr-nome, body .pr-nome a { color: var(--nv-text-title) !important; }
body .pr-nome a:hover { color: var(--nv-accent) !important; }

/* ══ IL SELETTORE DI DATA E ORA AGGANCIATO AL CAMPO (NOTTE-HR-COMMESSE, 3.1): dentro una modal o un pannello laterale il
   calendario di flatpickr sta in posizione fissa sulle coordinate del suo campo (nv-datepicker.js, riposiziona), sopra il
   contenuto della modal. */
.flatpickr-calendar.nv-dp-ancorato { z-index: 2100; }

/* ══ IL CALENDARIO DEL FOOTER (NOTTE-HR-COMMESSE, 3.6): sopra il footer, all'altezza dell'orologio; i colori del selettore
   di date (--nv-dp-*), oggi in teal pieno, i giorni fuori mese attenuati. Solo consultazione: i giorni non hanno cursore. */
.nv-clock-cal { cursor: var(--nv-hand); }
.nv-clock-cal:focus-visible { outline: 2px solid var(--nv-accent); outline-offset: 2px; border-radius: 6px; }
.nv-cal-footer { position: fixed; z-index: 1900; width: 280px; padding: 14px; background: var(--nv-dp-bg); color: var(--nv-dp-text);
  border: 1px solid var(--nv-dp-border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.45); font-family: var(--nv-dp-font); }
.nv-cal-f-oggi { font-size: 1rem; font-weight: 500; margin-bottom: 10px; color: var(--nv-dp-text); }
.nv-cal-f-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.nv-cal-f-mese { font-size: .9rem; color: var(--nv-dp-text); }
.nv-cal-f-freccia { background: transparent; border: 0; color: var(--nv-dp-text-dim); width: 28px; height: 28px; border-radius: 6px; }
.nv-cal-f-freccia:hover, .nv-cal-f-freccia:focus-visible { color: var(--nv-dp-accent); background: var(--nv-dp-hover); outline: none; }
.nv-cal-f-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.nv-cal-f-dow { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--nv-dp-text-dim); padding: 4px 0; }
.nv-cal-f-g { font-size: .82rem; line-height: 32px; height: 32px; border-radius: var(--nv-dp-radius); color: var(--nv-dp-text); cursor: default; }
.nv-cal-f-g.is-fuori { color: var(--nv-dp-text-dim); opacity: .55; }
.nv-cal-f-g.is-oggi { background: var(--nv-dp-accent); color: var(--nv-dp-on-accent); font-weight: 600; }

/* ══ HR › OCCUPAZIONE (NOTTE-HR-COMMESSE, 4.2 e 4.6.6): la saturazione a colori senza esadecimali nel modulo — la barretta
   della vista elenco e le celle della vista mensile (pianificate su disponibili: verde < 70%, giallo fino a 100%, rosso oltre).
   I giorni di assenza o festività hanno la sigla (F, PE, M, FS) e il fondo neutro. */
.nv-occ-mini { display:inline-block; vertical-align:middle; width:90px; }
.nv-occ-mini-bar.is-verde, .nv-occ-cella.is-verde { background: color-mix(in srgb, var(--nv-success) 55%, transparent); }
.nv-occ-mini-bar.is-giallo, .nv-occ-cella.is-giallo { background: color-mix(in srgb, var(--nv-warning) 60%, transparent); }
.nv-occ-mini-bar.is-rosso, .nv-occ-cella.is-rosso { background: color-mix(in srgb, var(--nv-danger) 65%, transparent); }
.nv-occ-cella { text-align:center; font-size:.72rem; cursor: var(--nv-hand); color: var(--nv-text-title); }
.nv-occ-cella.is-vuoto { background: transparent; }
.nv-occ-cella.is-assente { background: var(--nv-grid-header); color: var(--nv-text-muted); }
.nv-occ-cella .nv-occ-motivo { font-weight:600; letter-spacing:.02em; }
.nv-occ-cella:hover { outline: 1px solid var(--nv-accent); outline-offset:-1px; }

/* ══ ORE SU COMMESSA ALL'USCITA (NOTTE-HR-COMMESSE, 4.1): la modal «Su cosa hai lavorato oggi?», i tipi di attività ══ */

/* La modal «Su cosa hai lavorato oggi?» (SweetAlert2, popup .nv-ore-modal; markup: nvOreCommessaApri in nuvolai.js) */
.nv-ore { text-align: left; }
.nv-ore-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.nv-ore-sotto { color: var(--nv-text-muted); font-size: .85rem; }
.nv-ore-contatore { color: var(--nv-text-title); font-weight: 600; font-size: 1.05rem; white-space: nowrap; margin-left: auto; }
.nv-ore-contatore.is-completo { color: var(--nv-accent); }
.nv-ore-righe { display: flex; flex-direction: column; }
.nv-ore-riga { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--nv-grid-border); }
.nv-ore-riga:first-child { border-top: 0; }
.nv-ore-nome { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.nv-ore-titolo { color: var(--nv-text-value); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-ore-cliente { color: var(--nv-text-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-ore-riga.is-attivita .nv-ore-nome .form-group { margin-bottom: 0; }
.nv-ore-riga.is-attivita .nv-ore-nome label { display: none; }   /* la select senza etichetta: il segnaposto dice «Attività interna» */
.nv-ore-quadri { display: flex; flex-wrap: wrap; gap: 4px; touch-action: manipulation; }

/* il quadratino: un'ora. Spento a contorno, acceso pieno d'accento; oltre il limite delle ore lavorate si spegne e non si preme */
.nv-ore-q {
  width: 22px; height: 22px; padding: 0; border-radius: 4px; cursor: pointer;
  background: transparent; border: 1px solid var(--nv-imp-bordo);
  transition: background-color .08s ease, border-color .08s ease, opacity .08s ease;
}
.nv-ore-q:hover { border-color: var(--nv-accent); }
.nv-ore-q:focus { outline: none; }
.nv-ore-q:focus-visible { outline: 2px solid var(--nv-accent); outline-offset: 1px; }
.nv-ore-q.is-acceso { background: var(--nv-accent); border-color: var(--nv-accent); }
.nv-ore-riga.is-anteprima .nv-ore-q.is-acceso { opacity: .7; }                 /* il mouse sta indicando: non è ancora fissato */
.nv-ore-q.is-bloccato, .nv-ore-q:disabled { opacity: .3; cursor: not-allowed; border-color: var(--nv-grid-border); }
.nv-ore.is-sola-lettura .nv-ore-q.is-acceso:disabled { opacity: 1; cursor: default; }   /* mese chiuso: si legge, non si cambia */
.nv-ore-nota { color: var(--nv-text-muted); font-size: .8rem; margin-top: 10px; }

@media (max-width: 575px) {
  .nv-ore-q { width: 28px; height: 28px; }        /* col dito */
  .nv-ore-nome { flex-basis: 100%; }
}

/* Impostazioni Commesse ▸ Ore su commessa: i tipi di attività interne (righe ordinabili con nvOrdinabile) */
.nv-ore-tipi { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-width: 520px; }
.nv-ore-tipo { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--nv-grid-border); border-radius: 6px; }
.nv-ore-tipo-nome { color: var(--nv-text-value); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-ore-tipo.is-spento .nv-ore-tipo-nome { color: var(--nv-text-muted); }
.nv-ore-tipo-usi { color: var(--nv-text-muted); font-size: .78rem; white-space: nowrap; }
.nv-ore-tipo .nv-azioni { margin-left: auto; }
.nv-ore-tipo.is-trascinata { opacity: .45; }

/* Lista presenze ▸ dettaglio della giornata: la sezione «Ore su commessa» */
.pr-ore-commessa { border-top: 1px solid var(--nv-grid-border); padding-top: 10px; }

/* ══ COMMESSE: SCHEDA RIVISTA (NOTTE-HR-COMMESSE, 4.3–4.7): pannello economico, Gantt con le fasi, griglia a periodi ══ */

/* COMMESSE ▸ PANNELLO ECONOMICO (4.6): le nvKpi impilate nella colonna destra; in Kanban/Gantt/Griglia (#cm-kpi
   orizzontale in alto) vanno in fila e vanno a capo. */
.cm-eco { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.cm-eco .nv-kpi { height:auto; }
.cm-eco .nv-kpi-val { font-size:1.05rem; }
#cm-kpi.cm-kpi-horizontal .cm-eco { flex-direction:row; flex-wrap:wrap; margin-top:0; }
#cm-kpi.cm-kpi-horizontal .cm-eco .nv-kpi { flex:1 1 170px; min-width:170px; }

/* COMMESSE ▸ GANTT PER FASI (4.4.7): la riga della fase (barra dal primo inizio all'ultima fine dei suoi task) e i task
   rientrati sotto; le risorse nella barra, attenuate. */
.nv-gantt-row.is-fase .nv-gantt-label { font-weight:600; color:var(--nv-text-title); }
.nv-gantt-bar.is-fase { top:13px; height:12px; border-radius:3px; background:var(--nv-text-muted); opacity:.55; cursor:default; box-shadow:none; padding:0; }
.nv-gantt-label.is-figlio { padding-left:26px; }
.nv-gantt-ris { margin-left:6px; font-weight:400; opacity:.75; }

/* COMMESSE ▸ GRIGLIA A PERIODI (4.4.7): colonne strette e centrate, il periodo corrente segnato in accento. */
.cm-griglia th, .cm-griglia td { white-space:nowrap; }
.cm-griglia th.is-corrente { color:var(--nv-accent); border-bottom:2px solid var(--nv-accent); }
.cm-griglia .cm-griglia-tot td { border-top:1px solid var(--nv-grid-border); font-size:0.8rem; }
.cm-griglia .mv-badge { cursor:pointer; }

/* COMMESSE ▸ CONSUNTIVO DELLE ORE (4.2.5): il dettaglio per giorno sotto la persona, più basso. */
.cm-ore-giorno td { padding-top:4px !important; padding-bottom:4px !important; border-top:0 !important; }

/* DIURNO-CRM-UI (08/10/2026) — LA TENDINA DI UNA SELECT STA SOPRA I PANNELLI LATERALI. select2 aggiunge la tendina al
   body con lo z-index suo (1051); un pannello (.crm-drawer, 10001) e il suo sfondo (10000) la coprivano tutta: nel
   profilo orario le select sembravano vuote. Sotto le modal SweetAlert (che le tendine le ospitano dentro di sé). */
.select2-container--open { z-index: 10050; }
/* /ui-kit: la tendina dell'header mostrata ferma, nel flusso della pagina */
.nv-kit-tendina-demo { position: relative; min-height: 250px; }
.nv-kit-tendina-demo .nv-tendina { top: 0; left: 0; right: auto; }

/* (NOTTE-STILI-UX, Parte 5) Le pagine di creazione non hanno «Abilita»: i campi sono subito attivi (nvNewAttiva, nv-kit.js).
   Il bottone resta nel markup del modulo — è lo stesso toolbar.php della upd — ma nella new non si vede mai, neanche per un
   istante prima del JavaScript. */
body.az-new #btn-abilita { display: none !important; }

/* (CRM-RITOCCHI T14, 13/10/2026) la domanda «Vuoi uscire senza salvare?» dentro le modal non c'è più: le modal non la fanno
   mai scattare (nvUscitaSicura, rules/css-ux.md). Tolte le regole .nv-uscita-dentro. */

/* ═══ IL TESTO DI STATO — .nv-stato (NOTTE-STILI-UX, Parte 7, 08/10/2026) ═══════════════════════════════════════════════
   Un componente solo per i testi di avanzamento e di stato temporanei: «Caricamento…», «Composizione…», «Generazione…»,
   «Salvataggio…», «Invio…», «Calcolo della disponibilità…». Prima erano verdi, grigi o in corsivo, ognuno della sua misura e
   nel suo posto. Ora: colore BLU NUVOLAI (l'accento; nel chiaro #2E9C94, il tono testo dell'accento), dimensione e peso dai
   token, l'indicatore animato standard con .is-attesa. La POSIZIONE la decide chi lo ospita (il piede di un pannello, la
   cella, il corpo del drawer): il componente è inline e non galleggia mai. In JS: nvStato(el, 'Composizione…', true).
   Il VERDE resta solo agli esiti positivi standard: l'avviso di successo (nvAvviso) e i badge. */
:root{ --nv-stato-colore: var(--nv-accent); --nv-stato-size: .85rem; --nv-stato-peso: 500; }
.nv-stato{ display:inline-flex; align-items:center; gap:.5em; color:var(--nv-stato-colore); font-size:var(--nv-stato-size); font-weight:var(--nv-stato-peso); line-height:1.3; }
.nv-stato.is-attesa::before{ content:''; flex:0 0 auto; width:.9em; height:.9em; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent; animation:nvStatoGira .8s linear infinite; }
@keyframes nvStatoGira{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .nv-stato.is-attesa::before{ animation:none; border-right-color:currentColor; opacity:.6; } }

/* ═══ AUDIT DEGLI STILI — le correzioni nei componenti (NOTTE-STILI-UX, Parte 8, 08/10/2026) ═══════════════════════════
   Ogni regola qui sotto chiude una famiglia di deviazioni trovata da .claude/tools/audit_stili_completo.py (suite audit-stili):
   il «prima» è in reports/NOTTE-STILI-UX/audit-prima.md. Token, mai valori di pagina. */
/* Il rosso come TESTO: --nv-danger (#db3131) resta il riempimento di badge e bottoni; il testo rosso è più chiaro. */
:root{ --nv-danger-testo: #ef5350; }
.text-danger{ color: var(--nv-danger-testo) !important; }
/* Un bottone scritto come <a>: il colore è quello del bottone, non quello dei link (body a vince con !important). */
body a.btn-outline-primary{ color: var(--bs-btn-color, var(--nv-accent)) !important; }
body a.btn-outline-primary:hover, body a.btn-outline-primary:focus{ color: var(--bs-btn-hover-color, #000) !important; }
/* Il codice in linea (codici, chiavi): non il rosa di Bootstrap, ma un'etichetta sul fondo delle intestazioni. */
code{ color: var(--nv-text-value); background: var(--nv-grid-header); border-radius: 4px; padding: 0 .3em; }
/* Il fuoco delle select delle modal: il filo del kit, non l'anello del browser. */
body .swal2-popup .swal2-select:focus, body .swal2-popup .swal2-input:focus, body .swal2-popup .swal2-textarea:focus{
  outline: none; border-color: #55d5cc; box-shadow: 0 0 0 .2rem rgba(85,213,204,.25); }   /* #55d5cc: il bordo di fuoco del kit nei due temi (palette-light: i BORDI restano #55d5cc) */
/* Un <input list> (datalist): la tendina del sistema nel colore del tema. */
input[list]{ color-scheme: dark; }
/* Il placeholder di una select2 spenta: leggibile sul fondo spento (era #8a8a8a su #3d3e3e, 3,11:1). */
.select2disabled .select2-selection__placeholder, .select2-container--disabled .select2-selection__placeholder{ color: #c4c4c4 !important; }
/* La voce scelta delle tendine delle card «entità» e delle select dentro le righe: non il teal pieno (3,99:1). */
select option:checked{ background-color: var(--nv-grid-header); color: var(--nv-text-title); }
/* IL RIQUADRO D'AVVISO — .nv-riquadro (NOTTE-STILI-UX, Parte 8): un avviso DENTRO la pagina (la fiera chiusa, la fattura
   scartata dallo SDI, il lead da qualificare). Prima erano .alert di Bootstrap: fondi chiari pieni (#fff3cd, #cff4fc) sul
   nero, fuori da ogni token. Ora il fondo dei campi, il testo del tema e un filo a sinistra nel colore del tono.
   is-info (accento) · is-avviso (giallo) · is-errore (rosso) · is-ok (verde). Per un esito che passa: nvAvviso; per un
   errore che blocca: sweetError. */
.nv-riquadro { position: relative; padding: 10px 14px; margin-bottom: 12px; border-radius: 8px;
  background: var(--nv-campo-fondo); color: var(--nv-text-value); border: 1px solid var(--nv-grid-border);
  border-left: 3px solid var(--nv-riquadro-tono, var(--nv-accent)); }
.nv-riquadro.is-info   { --nv-riquadro-tono: var(--nv-accent); }
.nv-riquadro.is-avviso { --nv-riquadro-tono: var(--nv-warning); }
.nv-riquadro.is-errore { --nv-riquadro-tono: var(--nv-danger); }
.nv-riquadro.is-ok     { --nv-riquadro-tono: var(--nv-success); }
.nv-riquadro b, .nv-riquadro strong { color: var(--nv-text-title); }
/* gli stati e le scadenze in rosso sono TESTO: il tono da testo del rosso (#db3131 dava 3,93:1 su #141414) */
.nv-pren-stato.is-annullata { color: var(--nv-danger-testo); }
/* l'etichetta di una casella SPENTA: Bootstrap la sbiadisce a .5 di opacità (#adb5bd nel chiaro, 1,85:1); qui il muted del tema */
.form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label { opacity: 1; color: var(--nv-text-muted); }
/* la riga della spunta (inventario, ricezione) cambia fondo con l'esito: dentro, il contorno della select e il fuoco seguono */
.nv-sparo-riga .form-select { border-color: #9a9a9a; }
.nv-sparo-riga .form-select:focus { border-color: #55d5cc; }

/* ── GLI ESITI VINTA / PERSA (NOTTE-OPENAPI-PIPELINE-TICKET-SVUOTA, 09/10/2026) ─────────────────────────────────────────────
   Due token, le stesse icone ovunque compaia un esito (contatori della pipeline, badge della fase, pannello, scheda, vista
   elenco, azioni in testata): pollice su / pollice giù a due toni, la MANICA (livello secondario) del colore dell'esito e il
   pollice del colore del testo. In chiaro il teal è più scuro (#25958d, 3,25:1 sul fondo pagina): nuvola_light.css. */
:root { --nv-esito-vinta: #55d5cc; --nv-esito-persa: #db3131; }
.nv-esito-ico { color: var(--nv-text, #e8e8e8); --fa-primary-color: var(--nv-text, #e8e8e8); --fa-secondary-opacity: 1; }
/* (CRM-RITOCCHI T4, 13/10/2026) la manica delle ICONE più tenue: teal e rosso con trasparenza; i numeri restano dei token */
.nv-esito-ico.is-vinta, .is-vinta > .nv-esito-ico { --fa-secondary-color: #55d5cc96; }
.nv-esito-ico.is-persa, .is-persa > .nv-esito-ico { --fa-secondary-color: #db3131a6; }
/* I contatori in toolbar: nella colonna centrale (.nv-tb-centro-stato), sulla mediana di titolo e icone, nessun margine verticale che
   sposti il centro. Dal 13/10/2026 (CRM-RITOCCHI T4) solo icona e numero, 40px di altezza e 94px di larghezza minima: «questo mese»
   sta nel tooltip. */
.pl-esiti { gap: 14px; }
.pl-esiti .pipeline-close-drop {
  display: inline-flex; align-items: center; gap: 14px; box-sizing: border-box; height: 36px; min-width: 176px;
  margin: 0; padding: 0 18px; text-align: left; color: var(--nv-text, #e8e8e8);
}
.pl-esiti .pipeline-close-ico { font-size: 1.3rem; line-height: 1; }
.pl-esiti .pipeline-close-meta { flex-direction: row; align-items: baseline; gap: 10px; }
.pl-esiti .pipeline-close-num { font-size: 1.15rem; line-height: 1; }
.pl-esiti .is-vinta .pipeline-close-num { color: var(--nv-esito-vinta); }
.pl-esiti .is-persa .pipeline-close-num { color: var(--nv-esito-persa); }
.pl-esiti .is-vinta.drag-over { outline-color: var(--nv-esito-vinta); }
.pl-esiti .is-persa.drag-over { outline-color: var(--nv-esito-persa); }
.pipeline-close-drop.is-vinta, .pipeline-close-drop.is-persa { height: 40px; min-width: 94px; justify-content: center; }
/* sul telefono i due box scendono su una riga loro (nvToolbarStato), ma sulla STESSA riga: più stretti, mai uno sotto l'altro */
@media (max-width: 575.98px) {
  #toolbar .pl-esiti { flex-wrap: nowrap; gap: 8px; }
  .pl-esiti .pipeline-close-drop { min-width: 0; flex: 1 1 0; padding: 0 10px; gap: 8px; justify-content: center; }
  .pl-esiti .pipeline-close-meta { gap: 6px; }
}

/* ── CRM: la card «Crea nuovo lead» in testa allo step Nuovo della pipeline (REVISIONE CRM, 12/10/2026) ──
   Più bassa di una card, bordo tratteggiato, senza contatori; non è una .kanban-card (non si trascina). Colori dai token del
   tema, quindi vale anche nel chiaro senza regole in più. */
.pipeline-card-crea {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; padding: 8px 12px;
  background: transparent; border: 1px dashed var(--nv-grid-border); border-radius: 6px;
  color: var(--nv-text-muted); font-size: 0.85rem; cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.pipeline-card-crea:hover, .pipeline-card-crea:focus-visible { color: var(--nv-accent); border-color: var(--nv-accent); }

/* (CRM-RITOCCHI T13) i tag del lead sotto il titolo della card: i chip del canone, più piccoli; al più tre e «+N» (il server), e
   comunque al più due righe, così la card non si allunga */
.kanban-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; max-height: 46px; overflow: hidden; }
.kanban-card-tags .tag-chip { padding: 1px 8px; font-size: 0.68rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ── IL FASCICOLO DELL'AZIENDA (NOTTE-CRM-REVISIONE, task 13): il box della colonna destra di trattativa e cliente ── */
.box-fascicolo .fasc-elenco { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-x: hidden; overflow-y: auto; }
.box-fascicolo .fasc-vuoto { color: var(--nv-text-muted); font-size: .85em; }
.box-fascicolo .fasc-voce { border-top: 1px solid var(--nv-grid-border); padding-top: 8px; font-size: .85em; min-width: 0; }
.box-fascicolo .fasc-voce:first-child { border-top: 0; padding-top: 0; }
.box-fascicolo .fasc-tit { display: block; min-width: 0; font-weight: 600; }
.box-fascicolo .fasc-meta { color: var(--nv-text-muted); font-size: .9em; }
.box-fascicolo .fasc-testo { color: var(--nv-text-muted); font-size: .9em; margin-top: 2px; overflow-wrap: anywhere; }
.box-fascicolo .fasc-togli { cursor: pointer; color: var(--nv-text-muted); flex: 0 0 auto; }
.box-fascicolo .fasc-togli:hover { color: var(--nv-danger-testo); }

/* ── IL SALES KIT (SALES-KIT, 15/10/2026; spec. 26 di rules/crm.md): la finestra a due schermate e l'anteprima del documento ──
   Prima schermata: tre bottoni quadrati (Galileo, Marconi, Leonardo), uno solo scelto, con lo stato dell'ultima analisi sotto.
   Le icone sono SVG a due toni (nvIconaSvg): il tratto prende `color`, il riempimento --fa-secondary-color come le duotone.
   Colori dai token del tema, quindi valgono anche nel chiaro. */
.sk-scelte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
.sk-scelta-box { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.sk-scelta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 1 / 1; width: 100%;
  padding: 12px; background: transparent; border: 1px solid var(--nv-grid-border); border-radius: 10px; color: var(--nv-text-muted);
  cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease;
  --fa-secondary-color: var(--nv-accent); --fa-secondary-opacity: .35;
}
.sk-scelta:hover:not([disabled]), .sk-scelta:focus-visible { color: var(--nv-accent); border-color: var(--nv-accent); }
.sk-scelta.is-scelta { color: var(--nv-accent); border: 2px solid var(--nv-accent); background: rgba(85, 213, 204, .08); --fa-secondary-opacity: .6; }
.sk-scelta[disabled] { opacity: .55; cursor: not-allowed; }
.sk-scelta .sk-icona { width: 52px; height: 52px; }
.sk-scelta-nome { font-weight: 600; font-size: 1rem; }
.sk-scelta-sotto { font-size: .78rem; line-height: 1.25; text-align: center; }
.sk-stato { margin-top: 8px; font-size: .78rem; line-height: 1.4; color: var(--nv-text-muted); text-align: center; overflow-wrap: anywhere; }
.sk-stato.is-pronta { color: var(--nv-accent); }
.sk-stato.is-errore { color: var(--nv-danger-testo); }
.sk-stato.is-in-corso { color: var(--nv-warning); }
.sk-stato a { color: inherit; text-decoration: underline; }
.sk-avviso { border: 1px solid var(--nv-warning); border-radius: 8px; padding: 8px 12px; font-size: .85rem; text-align: left; }
/* seconda schermata: i dati della scheda (mancanti evidenziati), il testo, il file, le fonti */
.sk-passo2 .sk-sezione { margin: 16px 0 6px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--nv-text-muted); }
.sk-passo2 .sk-passo2-prima { margin-top: 0; }
.sk-passo2 .form-control.sk-manca { border-color: var(--nv-warning); }
.sk-passo2 .sk-manca-et { color: var(--nv-warning); font-size: .75em; margin-left: 4px; }
/* l'anteprima del documento (crmSalesKitDocumentoApri): il foglio A4 del motore in un iframe, le azioni sotto */
.sk-doc-meta { font-size: .8rem; color: var(--nv-text-muted); margin-bottom: 8px; text-align: left; }
.sk-doc-frame { display: block; width: 100%; height: 70vh; border: 1px solid var(--nv-grid-border); border-radius: 6px; background: #e9e9e9; }
.sk-doc-azioni { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 575.98px) {
  .sk-scelte { grid-template-columns: 1fr; }
  .sk-scelta { aspect-ratio: auto; flex-direction: row; justify-content: flex-start; }
  .sk-scelta-sotto { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   LA GUIDA E I TOUR (GUIDA-TOUR, 15/10/2026)
   Fedeli alle schermate approvate per il board (upload/guida-tour-riferimento: nuvolai-guida.png, nuvolai-tour-benvenuto.png,
   1600 px). Misure e colori presi dalle schermate: colonne 300 · centro · 340, card col bordo sottile e raggio 16, accento
   #55d5cc, Outfit. I colori sono token (--nvg-*): il tema chiaro li ridefinisce in nuvola_light.css.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --nvg-fondo: #000000;
  --nvg-superficie: #000000;
  --nvg-testo: #ffffff;
  --nvg-testo-voce: #d6dce3;
  --nvg-testo-valore: #c9d1da;
  --nvg-testo-card: #b3bcc6;
  --nvg-muted: #8a949f;
  --nvg-segnaposto: #757575;
  --nvg-divisore: #20262e;
  --nvg-bordo: #2a313b;
  --nvg-bordo-pastiglia: #3a424c;
  --nvg-teal: #55d5cc;
  --nvg-teal-testo: #55d5cc;
  --nvg-su-teal: #000000;
  --nvg-voce-attiva: #0f2222;
  --nvg-ombra-risultati: 0 18px 48px rgba(0, 0, 0, .6);
}

/* la pagina occupa la riga del modulo tutta, senza i margini del .row */
#nuvolai-body > .nv-guida { flex: 0 0 100%; max-width: 100%; padding: 0; }
.nv-guida {
  --nvg-sinistra: 300px;
  --nvg-destra: 340px;
  font-family: 'Outfit', sans-serif;
  color: var(--nvg-testo);
  background: var(--nvg-fondo);
  margin: 0 calc(var(--bs-gutter-x, 1.5rem) * .5 - 1.5vw);   /* fino ai bordi della pagina, come nel riferimento */
  min-height: calc(100dvh - var(--nv-shell-top) - var(--nv-shell-bottom));
  display: flex;
  flex-direction: column;
}

/* la riga sotto il logo: breadcrumb · Cerca o chiedi · Rivedi il tour */
.nv-guida-barra {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 640px) 1fr;
  align-items: center;
  gap: 24px;
  padding: 10px 40px 32px;
  border-bottom: 1px solid var(--nvg-divisore);
}
.nv-guida-briciola { font-size: 22px; font-weight: 400; color: var(--nvg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-guida-briciola a.nv-guida-briciola-radice { color: var(--nvg-muted); text-decoration: none; }
.nv-guida-briciola a.nv-guida-briciola-radice:hover { color: var(--nvg-teal-testo); }
.nv-guida-briciola-sep { color: var(--nvg-testo); }
.nv-guida-briciola-qui { color: var(--nvg-testo); }
.nv-guida-barra-destra { display: flex; justify-content: flex-end; }

.nv-guida-cerca { position: relative; }
.nv-guida-cerca-input {
  width: 100%;
  height: 47px;
  border: 1px solid var(--nvg-teal);
  border-radius: 8px;
  background: var(--nvg-fondo);
  color: var(--nvg-testo);
  font: 400 17px/1 'Outfit', sans-serif;
  padding: 0 46px 0 18px;
  outline: none;
  -webkit-appearance: none;
}
.nv-guida-cerca-input::placeholder { color: var(--nvg-segnaposto); opacity: 1; }
.nv-guida-cerca-input::-webkit-search-cancel-button { display: none; }
.nv-guida-cerca-input:focus-visible { box-shadow: 0 0 0 3px rgba(85, 213, 204, .25); }
.nv-guida-cerca-ico { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--nvg-testo); font-size: 15px; pointer-events: none; }

.nv-guida-risultati {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60;
  background: var(--nvg-superficie); border: 1px solid var(--nvg-bordo); border-radius: 16px;
  box-shadow: var(--nvg-ombra-risultati); padding: 8px; max-height: min(60vh, 520px); overflow-y: auto;
}
.nv-guida-risultato { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--nvg-testo); }
.nv-guida-risultato:hover, .nv-guida-risultato.is-sel { background: var(--nvg-voce-attiva); }
.nv-guida-risultato-sopra { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--nvg-muted); }
.nv-guida-risultato-titolo { display: block; font-size: 16px; font-weight: 600; color: var(--nvg-testo); margin: 2px 0; }
.nv-guida-risultato-testo { display: block; font-size: 14px; line-height: 1.5; color: var(--nvg-testo-card); }
.nv-guida-risultato-vuoto, .nv-guida-risultato-piede { padding: 10px 12px; font-size: 13px; color: var(--nvg-muted); }
.nv-guida-risultato-piede { border-top: 1px solid var(--nvg-divisore); margin-top: 4px; }
.nv-guida-risultati kbd, .nv-guida-risultato-piede kbd {
  font: 600 11px 'Outfit', sans-serif; color: var(--nvg-testo); background: transparent;
  border: 1px solid var(--nvg-bordo-pastiglia); border-radius: 4px; padding: 1px 5px;
}

/* i bottoni: pieno teal col testo nero, a contorno teal, a contorno neutro */
.nv-guida-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 43px; padding: 0 20px; border-radius: 8px;
  font: 400 17px/1 'Outfit', sans-serif; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; background: transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.nv-guida-btn:focus-visible { outline: 2px solid var(--nvg-teal); outline-offset: 3px; }
.nv-guida-btn-pieno { background: var(--nvg-teal); border-color: var(--nvg-teal); color: var(--nvg-su-teal); }
.nv-guida-btn-pieno:hover { background: #6fe0d8; border-color: #6fe0d8; color: var(--nvg-su-teal); }
.nv-guida-btn-contorno { border-color: var(--nvg-teal); color: var(--nvg-teal-testo); }
.nv-guida-btn-contorno:hover { background: rgba(85, 213, 204, .1); color: var(--nvg-teal-testo); }
.nv-guida-btn-neutro { border-color: var(--nvg-bordo); color: var(--nvg-testo); }
.nv-guida-btn-neutro:hover { border-color: var(--nvg-muted); background: transparent; color: var(--nvg-testo); }
.nv-guida-btn-blocco { width: 100%; }
.nv-guida-btn.is-fatto, .nv-guida-btn:disabled { opacity: .7; cursor: default; }

/* le tre colonne, coi divisori sottili */
.nv-guida-corpo {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: var(--nvg-sinistra) minmax(0, 1fr) var(--nvg-destra);
}
.nv-guida.is-senza-destra .nv-guida-corpo { grid-template-columns: var(--nvg-sinistra) minmax(0, 1fr); }
.nv-guida.is-senza-indice .nv-guida-corpo { grid-template-columns: minmax(0, 1fr); }

.nv-guida-etichetta {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--nvg-muted); line-height: 1.2;
}
.nv-guida-etichetta.is-teal { color: var(--nvg-teal-testo); }

.nv-guida-indice { padding: 36px 24px 40px; border-right: 1px solid var(--nvg-divisore); }
.nv-guida-indice > .nv-guida-etichetta { margin: 0 0 12px; }
.nv-guida-indice > .nv-guida-etichetta ~ .nv-guida-etichetta { margin-top: 30px; }
.nv-guida-voci { list-style: none; margin: 0; padding: 0; }
.nv-guida-voci + .nv-guida-etichetta { margin-top: 30px !important; }
.nv-guida-voce {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 40px; padding: 0 12px; margin-bottom: 7px; border-radius: 8px;
  color: var(--nvg-testo-voce); text-decoration: none; font-size: 17px; font-weight: 400;
}
.nv-guida-voce:hover { color: var(--nvg-testo); background: rgba(85, 213, 204, .06); }
.nv-guida-voce.is-attiva { background: var(--nvg-voce-attiva); color: var(--nvg-teal-testo); }
.nv-guida-voce-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-guida-voce-ver { flex: 0 0 auto; font-size: 13px; color: var(--nvg-muted); }
.nv-guida-voce.is-attiva .nv-guida-voce-ver { color: var(--nvg-teal-testo); }
.nv-guida-punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--nvg-teal); vertical-align: middle; margin-left: 6px; }
.nv-guida-conta {
  min-width: 26px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--nvg-teal); color: var(--nvg-su-teal);
  font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center;
}
.nv-guida-interruttore { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--nvg-divisore); }
.nv-guida-interruttore .form-check-label { color: var(--nvg-testo-voce); font-size: 14px; }
.nv-guida-nota { font-size: 13px; line-height: 1.5; color: var(--nvg-muted); margin: 8px 0 0; }
.nv-guida-nota a { color: var(--nvg-teal-testo); }

.nv-guida-centro { padding: 36px 40px 48px; min-width: 0; }
.nv-guida-centro-stretto { max-width: 1000px; margin: 0 auto; width: 100%; }
.nv-guida-destra { padding: 40px 29px 40px 30px; border-left: 1px solid var(--nvg-divisore); }
.nv-guida-destra > .nv-guida-etichetta { margin-bottom: 20px; }

/* la testata del modulo: titolo grande, versione a contorno, «Novità» teal piena, la frase di valore su due righe */
.nv-guida-testata { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.nv-guida-titolo-pagina { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.01em; margin: 0 6px 0 0; color: var(--nvg-testo); }
.nv-guida-ver {
  display: inline-flex; align-items: center; height: 27px; padding: 0 12px; border-radius: 14px;
  border: 1px solid var(--nvg-bordo-pastiglia); color: var(--nvg-testo-voce); font-size: 15px; font-weight: 400;
}
.nv-guida-tipo {
  display: inline-flex; align-items: center; height: 19px; padding: 0 8px; border-radius: 10px;
  font-size: 11.5px; font-weight: 400; white-space: nowrap; border: 1px solid var(--nvg-bordo-pastiglia); color: var(--nvg-testo-voce);
}
.nv-guida-tipo.is-novita { background: var(--nvg-teal); border-color: var(--nvg-teal); color: var(--nvg-su-teal); }
.nv-guida-tipo.is-rifacimento { border-color: var(--nvg-teal); color: var(--nvg-teal-testo); }
.nv-guida-tipo.is-grande { height: 27px; padding: 0 12px; border-radius: 14px; font-size: 15px; }
.nv-guida-valore { font-size: 22px; line-height: 32px; font-weight: 300; color: var(--nvg-testo-valore); max-width: 720px; margin: 30px 0 0; }
.nv-guida-bottoni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.nv-guida-bottoni .nv-guida-btn { height: 48px; padding: 0 24px; }

/* le card: bordo sottile, raggio 16 */
.nv-guida-card {
  display: block; position: relative; background: var(--nvg-superficie); border: 1px solid var(--nvg-bordo); border-radius: 16px;
  padding: 22px 22px 24px; color: var(--nvg-testo); text-decoration: none;
}
a.nv-guida-card:hover { border-color: rgba(85, 213, 204, .55); color: var(--nvg-testo); }
a.nv-guida-card:focus-visible { outline: 2px solid var(--nvg-teal); outline-offset: 3px; }
.nv-guida-card-titolo { display: block; font-size: 20px; font-weight: 600; line-height: 1.25; margin: 0 0 12px; color: var(--nvg-testo); }
.nv-guida-card-testo { display: block; font-size: 15px; line-height: 24px; font-weight: 300; color: var(--nvg-testo-card); margin: 0; }
.nv-guida-card-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.nv-guida-card-fila .nv-guida-card { min-height: 176px; }

.nv-guida-consigliata { display: flex; align-items: center; gap: 18px; margin: -8px 0 30px; padding: 13px 20px; border-radius: 16px; }
.nv-guida-consigliata .nv-guida-etichetta { flex: 0 0 auto; }
.nv-guida-consigliata-titolo { flex: 0 0 auto; font-size: 16px; font-weight: 600; color: var(--nvg-testo); }
.nv-guida-consigliata-testo { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 300; color: var(--nvg-testo-card); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-guida-consigliata-passi { flex: 0 0 auto; color: var(--nvg-teal-testo); font-size: 14px; }
body .nv-guida a.nv-guida-consigliata .nv-guida-consigliata-titolo { color: var(--nvg-testo) !important; }
body .nv-guida a.nv-guida-consigliata .nv-guida-consigliata-testo { color: var(--nvg-testo-card) !important; }
body .nv-guida a.nv-guida-consigliata .nv-guida-consigliata-passi { color: var(--nvg-teal-testo) !important; }
@media (max-width: 767.98px) { .nv-guida-consigliata { flex-wrap: wrap; gap: 6px 12px; } .nv-guida-consigliata-testo { flex-basis: 100%; white-space: normal; } }

/* i due riquadri sotto: «Skill disponibile qui» (bordo teal) e «Novità del modulo» */
.nv-guida-box-fila { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 19px; margin-top: 27px; align-items: stretch; }
.nv-guida-box-fila.is-una { grid-template-columns: minmax(0, 1fr); }
.nv-guida-box-fila > :only-child { grid-column: 1 / -1; }
.nv-guida-box { border: 1px solid var(--nvg-bordo); border-radius: 16px; padding: 24px 22px 26px; background: var(--nvg-superficie); min-height: 217px; }
.nv-guida-box-largo { min-height: 0; margin-top: 28px; }
.nv-guida-box-skill { border-color: var(--nvg-teal); }
.nv-guida-box-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.nv-guida-skill + .nv-guida-skill { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--nvg-divisore); }
.nv-guida-skill-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nv-guida-skill-nome { font-size: 22px; font-weight: 600; color: var(--nvg-testo); text-decoration: none; }
a.nv-guida-skill-nome:hover { color: var(--nvg-teal-testo); }
.nv-guida-skill-stato { font-size: 13px; color: var(--nvg-muted); white-space: nowrap; }
.nv-guida-skill-stato.is-attiva { color: var(--nvg-teal-testo); }
.nv-guida-box-skill .nv-guida-skill:first-of-type .nv-guida-skill-riga { margin-top: -2px; }
.nv-guida-skill-icone { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 22px; }
.nv-guida-skill-icona { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--nvg-testo-voce); }
.nv-guida-skill-icona img { width: 24px; height: 24px; object-fit: contain; }
.nv-guida-skill-dove { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 15px; }
.nv-guida-skill-dove a { color: var(--nvg-teal-testo); }
.nv-guida-novita { list-style: none; margin: 0; padding: 0; }
.nv-guida-novita li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; column-gap: 14px; margin-bottom: 16px; }
.nv-guida-novita li:last-child { margin-bottom: 0; }
.nv-guida-novita-ver { font-size: 15px; color: var(--nvg-muted); line-height: 20px; }
.nv-guida-novita .nv-guida-tipo { margin-top: 0; }
.nv-guida-novita-testo { font-size: 16px; line-height: 20px; color: var(--nvg-testo-voce); }
.nv-guida-cl-rilascio .nv-guida-novita li { grid-template-columns: 104px minmax(0, 1fr); column-gap: 10px; }
.nv-guida-cl-rilascio .nv-guida-tipo { justify-self: start; }
/* il badge «Novità» sulle icone del footer: un modulo cambiato dall'ultima visita dell'utente */
.footer-icon-wrap.nv-ha-novita { position: relative; }
.footer-icon-wrap.nv-ha-novita::after {
  content: ''; position: absolute; top: 2px; right: -1px; width: 8px; height: 8px; border-radius: 50%;
  background: #55d5cc; box-shadow: 0 0 0 2px var(--nv-page-bg, #000); pointer-events: none;
}

/* le pagine lunghe (funzioni, skill, ricette, FAQ): il Markdown della guida */
.nv-guida-testo { margin-top: 32px; max-width: 820px; font-size: 16px; line-height: 1.7; font-weight: 300; color: var(--nvg-testo-valore); }
.nv-guida-testo h2 { font-size: 26px; font-weight: 600; color: var(--nvg-testo); margin: 40px 0 14px; line-height: 1.25; }
.nv-guida-testo h3 { font-size: 20px; font-weight: 600; color: var(--nvg-testo); margin: 30px 0 10px; }
.nv-guida-testo h4 { font-size: 17px; font-weight: 600; color: var(--nvg-testo); margin: 24px 0 8px; }
/* Le sezioni «##» sono h2 e le sottosezioni «###» h3 (la gerarchia vera sotto l'h1 della pagina, 19/10/2026): la misura
   resta quella di prima, ed è della classe, non del tag. */
.nv-guida-testo .nv-guida-sez     { font-size: 20px; line-height: 1.2; margin: 30px 0 10px; }
.nv-guida-testo .nv-guida-sottosez { font-size: 17px; margin: 24px 0 8px; }
.nv-guida-testo strong { color: var(--nvg-testo); font-weight: 600; }
.nv-guida-testo a, .nv-guida-link { color: var(--nvg-teal-testo); text-decoration: none; }
.nv-guida-testo a:hover, .nv-guida-link:hover { text-decoration: underline; color: var(--nvg-teal-testo); }
.nv-guida-testo ul, .nv-guida-testo ol { padding-left: 22px; }
.nv-guida-testo li { margin-bottom: 6px; }
.nv-guida-testo hr { border: 0; border-top: 1px solid var(--nvg-divisore); margin: 36px 0; opacity: 1; }
.nv-guida-testo blockquote { border-left: 3px solid var(--nvg-teal); margin: 20px 0; padding: 4px 0 4px 18px; color: var(--nvg-testo-voce); }
.nv-guida-testo code { font-size: .9em; color: var(--nvg-testo); background: var(--nvg-voce-attiva); padding: 1px 5px; border-radius: 4px; }
.nv-guida-img { display: block; max-width: 100%; height: auto; border: 1px solid var(--nvg-bordo); border-radius: 16px; margin: 18px 0; }
.nv-guida-tab { overflow-x: auto; margin: 18px 0; }
.nv-guida-tab table { border-collapse: collapse; width: 100%; font-size: 15px; }
.nv-guida-tab th, .nv-guida-tab td { border-bottom: 1px solid var(--nvg-divisore); padding: 10px 12px; text-align: left; vertical-align: top; }
.nv-guida-tab th { color: var(--nvg-muted); font-weight: 500; }
.nv-guida-altre { margin-top: 30px; }
.nv-guida-altre ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.nv-guida-altre a { color: var(--nvg-testo-voce); text-decoration: none; font-size: 16px; }
.nv-guida-altre a:hover { color: var(--nvg-teal-testo); }

.nv-guida-passi { list-style: none; padding: 0; margin: 32px 0 0; counter-reset: passo; max-width: 880px; }
.nv-guida-passo { display: flex; gap: 18px; padding: 0 0 22px; position: relative; }
.nv-guida-passo:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 40px; bottom: 4px; border-left: 1px dashed var(--nvg-bordo-pastiglia); }
.nv-guida-passo-n {
  flex: 0 0 36px; height: 36px; border-radius: 50%; border: 1px solid var(--nvg-teal); color: var(--nvg-teal-testo);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600;
}
.nv-guida-passo-corpo { flex: 1 1 auto; border: 1px solid var(--nvg-bordo); border-radius: 16px; padding: 16px 20px 18px; }
.nv-guida-passo-corpo .nv-guida-etichetta { margin-bottom: 8px; }
.nv-guida-passo-corpo .nv-guida-card-titolo { margin-bottom: 6px; }
.nv-guida-passo-corpo .nv-guida-link { display: inline-block; margin-top: 10px; font-size: 15px; }

.nv-guida-faq { margin-top: 30px; display: grid; gap: 12px; max-width: 880px; }
.nv-guida-faq-voce { padding: 0; }
.nv-guida-faq-voce > summary { list-style: none; cursor: pointer; padding: 18px 22px; margin: 0; display: flex; justify-content: space-between; gap: 16px; font-size: 18px; }
.nv-guida-faq-voce > summary::-webkit-details-marker { display: none; }
.nv-guida-faq-voce > summary::after { content: '+'; color: var(--nvg-teal-testo); font-weight: 400; font-size: 22px; line-height: 1; }
.nv-guida-faq-voce[open] > summary::after { content: '−'; }
.nv-guida-faq-voce .nv-guida-testo { margin: 0; padding: 0 22px 18px; }

/* l'assistente: la risposta è una card segnata come generata dall'assistente */
.nv-guida-risposta { margin-bottom: 30px; }
.nv-guida-risposta-card { border-color: var(--nvg-teal); }
.nv-guida-risposta-testa { display: flex; justify-content: space-between; align-items: center; }
.nv-guida-risposta-domanda { font-size: 20px; font-weight: 600; margin: 12px 0 10px; color: var(--nvg-testo); }
.nv-guida-risposta-corpo { font-size: 16px; line-height: 1.65; font-weight: 300; color: var(--nvg-testo-valore); }
.nv-guida-risposta-corpo a { color: var(--nvg-teal-testo); }
.nv-guida-risposta-corpo p:last-child { margin-bottom: 0; }
.nv-guida-risposta-piede { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--nvg-divisore); }
.nv-guida-risposta-fonti-et { color: var(--nvg-muted); font-size: 14px; }
.nv-guida-risposta-nota { margin-top: 14px; font-size: 12.5px; color: var(--nvg-muted); }
.nv-guida-attesa { color: var(--nvg-muted); }
.nv-guida-risposta-card.is-attesa .nv-guida-attesa::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: nvg-puntini 1.2s steps(4) infinite; }
@keyframes nvg-puntini { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* il changelog (Novità della Guida e /changelog) */
.nv-guida-filtri { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 30px 0 8px; }
.nv-guida-filtro { display: inline-flex; align-items: center; gap: 10px; color: var(--nvg-muted); font-size: 14px; margin: 0; }
.nv-guida-select {
  height: 38px; border-radius: 8px; border: 1px solid var(--nvg-bordo); background: var(--nvg-fondo); color: var(--nvg-testo);
  font: 400 15px 'Outfit', sans-serif; padding: 0 34px 0 12px;
}
.nv-guida-segmenti { display: inline-flex; border: 1px solid var(--nvg-bordo); border-radius: 8px; overflow: hidden; }
.nv-guida-segmento { background: transparent; border: 0; color: var(--nvg-testo-voce); font: 400 14px 'Outfit', sans-serif; padding: 0 14px; height: 36px; cursor: pointer; }
.nv-guida-segmento + .nv-guida-segmento { border-left: 1px solid var(--nvg-bordo); }
.nv-guida-segmento.is-attivo { background: var(--nvg-voce-attiva); color: var(--nvg-teal-testo); }
.nv-guida-segmento:focus-visible { outline: 2px solid var(--nvg-teal); outline-offset: -2px; }
.nv-guida-filtri-conta { color: var(--nvg-muted); font-size: 13px; }
.nv-guida-changelog { margin-top: 10px; }
.nv-guida-cl-giorno { padding: 22px 0; border-top: 1px solid var(--nvg-divisore); display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 24px; }
.nv-guida-cl-giorno:first-child { border-top: 0; }
.nv-guida-cl-data { font-size: 15px; font-weight: 500; color: var(--nvg-muted); margin: 4px 0 0; }
.nv-guida-cl-rilasci { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nv-guida-cl-rilascio { padding: 18px 22px 20px; }
.nv-guida-cl-testa { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.nv-guida-cl-testa .nv-guida-card-titolo { margin: 0; }

/* `body a` colora tutti i link (--nv-text-link, !important) e li fa teal al passaggio: nella Guida i link hanno i colori loro */
body .nv-guida a.nv-guida-voce { color: var(--nvg-testo-voce) !important; }
body .nv-guida a.nv-guida-voce.is-attiva, body .nv-guida a.nv-guida-voce.is-attiva .nv-guida-voce-ver { color: var(--nvg-teal-testo) !important; }
body .nv-guida a.nv-guida-briciola-radice { color: var(--nvg-muted) !important; }
body .nv-guida a.nv-guida-btn-pieno, body .nv-guida a.nv-guida-btn-pieno:hover { color: var(--nvg-su-teal) !important; }
body .nv-guida a.nv-guida-btn-contorno { color: var(--nvg-teal-testo) !important; }
body .nv-guida a.nv-guida-btn-neutro { color: var(--nvg-testo) !important; }
body .nv-guida a.nv-guida-card, body .nv-guida a.nv-guida-card .nv-guida-card-titolo { color: var(--nvg-testo) !important; }
body .nv-guida a.nv-guida-card .nv-guida-card-testo { color: var(--nvg-testo-card) !important; }
body .nv-guida a.nv-guida-card .nv-guida-consigliata-passi, body .nv-guida a.nv-guida-card .nv-guida-etichetta.is-teal { color: var(--nvg-teal-testo) !important; }
body .nv-guida a.nv-guida-skill-nome { color: var(--nvg-testo) !important; }
body .nv-guida .nv-guida-testo a, body .nv-guida a.nv-guida-link, body .nv-guida .nv-guida-skill-dove a,
body .nv-guida .nv-guida-risposta-corpo a, body .nv-guida .nv-guida-nota a { color: var(--nvg-teal-testo) !important; }
body .nv-guida a.nv-guida-risultato, body .nv-guida a.nv-guida-risultato .nv-guida-risultato-titolo { color: var(--nvg-testo) !important; }
body .nv-guida a.nv-guida-risultato .nv-guida-risultato-testo { color: var(--nvg-testo-card) !important; }
body .nv-guida .nv-guida-altre a { color: var(--nvg-testo-voce) !important; }
body .nv-guida a.nv-guida-btn-pieno:hover { color: var(--nvg-su-teal) !important; }
body .nv-guida a.nv-guida-card:hover .nv-guida-card-titolo { color: var(--nvg-testo) !important; }
body .nv-guida a.nv-guida-voce:hover { color: var(--nvg-testo) !important; }
body .nv-guida a.nv-guida-voce.is-attiva:hover { color: var(--nvg-teal-testo) !important; }
body .nv-guida a.nv-guida-briciola-radice:hover, body .nv-guida a.nv-guida-btn-contorno:hover { color: var(--nvg-teal-testo) !important; }

/* nelle impostazioni di gruppo (tab «Guida»): la stessa pagina del modulo, senza i margini della sezione Guida */
.nv-guida.nv-guida-in-impostazioni { margin: 0; min-height: 0; background: transparent; display: block; padding: 6px 4px 24px; }
.nv-guida-in-impostazioni .nv-guida-titolo-pagina { font-size: 40px; }
.nv-guida-in-impostazioni > .nv-guida-link { display: inline-block; margin-top: 24px; }

/* il menu utente: «Mostra i suggerimenti» */
.nv-menu-interruttore { display: flex; align-items: center; gap: 0; cursor: pointer; margin: 0; }
.nv-menu-interruttore .form-switch { padding-left: 2.5em; }

/* telefono e schermi stretti: l'indice va sopra e scorre di lato, la colonna di destra sotto */
@media (max-width: 1199.98px) {
  .nv-guida { --nvg-destra: 300px; }
  .nv-guida-card-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .nv-guida-corpo, .nv-guida.is-senza-destra .nv-guida-corpo { grid-template-columns: minmax(0, 1fr); }
  .nv-guida-indice { border-right: 0; border-bottom: 1px solid var(--nvg-divisore); padding: 16px 16px 8px; overflow-x: auto; white-space: nowrap; }
  .nv-guida-indice > .nv-guida-etichetta, .nv-guida-interruttore { display: none; }
  .nv-guida-voci { display: inline-flex; gap: 6px; margin-right: 6px; }
  .nv-guida-voce { height: 36px; margin: 0; font-size: 15px; }
  .nv-guida-destra { border-left: 0; border-top: 1px solid var(--nvg-divisore); padding: 28px 16px; }
  .nv-guida-box-fila { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .nv-guida-barra { grid-template-columns: 1fr auto; padding: 4px 16px 18px; gap: 12px; }
  .nv-guida-cerca { grid-column: 1 / -1; grid-row: 2; }
  .nv-guida-briciola { font-size: 18px; }
  .nv-guida-barra .nv-guida-btn { height: 38px; padding: 0 14px; font-size: 15px; }
  .nv-guida-centro { padding: 24px 16px 36px; }
  .nv-guida-titolo-pagina { font-size: 40px; }
  .nv-guida-valore { font-size: 18px; line-height: 27px; margin-top: 18px; }
  .nv-guida-card-fila { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nv-guida-card-fila .nv-guida-card { min-height: 0; }
  .nv-guida-cl-giorno { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
}

/* ── IL TOUR: schermo al 70%, la zona accesa col bordo teal e l'alone che pulsa, la freccia, il fumetto ───────────── */
.nv-tour { position: fixed; inset: 0; z-index: 10050; pointer-events: auto; font-family: 'Outfit', sans-serif; }
.nv-tour.is-chiude { opacity: 0; transition: opacity .18s ease; }
.nv-tour-velo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nv-tour-scuro { fill: rgba(0, 0, 0, .7); }
.nv-tour-anello, .nv-tour-alone { position: absolute; pointer-events: none; box-sizing: border-box; transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease; }
.nv-tour-anello { border: 3px solid #55d5cc; }
.nv-tour-alone { border: 3px solid rgba(85, 213, 204, .3); animation: nvTourPulsa 2.2s ease-in-out infinite; }
@keyframes nvTourPulsa {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.025); opacity: .35; }
}
.nv-tour-freccia { stroke: #55d5cc; stroke-width: 2.5; stroke-dasharray: 9 8; stroke-linecap: round; }
.nv-tour-punta { stroke: #55d5cc; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.nv-tour.is-scorre .nv-tour-freccia { animation: nvTourScorre .9s linear infinite; }
@keyframes nvTourScorre { to { stroke-dashoffset: -17; } }
.nv-tour-fumetto {
  position: absolute; width: 480px; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: #000; border: 1px solid #55d5cc; border-radius: 20px; padding: 30px 32px 30px; color: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  animation: nvTourOndeggia 4.8s ease-in-out infinite;
  outline: none;
}
@keyframes nvTourOndeggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.nv-tour-etichetta { font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #55d5cc; }
.nv-tour-titolo { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 18px 0 14px; color: #fff; }
.nv-tour-testo { font-size: 18px; line-height: 30px; font-weight: 300; color: #c9d1da; margin: 0; }
.nv-tour-piede { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; }
.nv-tour-puntini { display: flex; gap: 7px; }
.nv-tour-punto { width: 8px; height: 8px; border-radius: 50%; background: #3a424c; }
.nv-tour-punto.is-attivo { background: #55d5cc; }
.nv-tour-tasti { display: flex; align-items: center; gap: 22px; }
.nv-tour-salta, .nv-tour-indietro { background: none; border: 0; padding: 4px 2px; color: #a9b2be; font: 400 17px 'Outfit', sans-serif; cursor: pointer; }
.nv-tour-salta:hover, .nv-tour-indietro:hover { color: #fff; }
.nv-tour-avanti {
  height: 43px; min-width: 97px; padding: 0 22px; border-radius: 8px; border: 0; background: #55d5cc; color: #000;
  font: 400 17px 'Outfit', sans-serif; cursor: pointer;
}
.nv-tour-avanti:hover { background: #6fe0d8; }
.nv-tour button:focus-visible { outline: 2px solid #55d5cc; outline-offset: 3px; }
/* «riduci movimento»: tutto fermo */
.nv-tour.is-fermo .nv-tour-fumetto, .nv-tour.is-fermo .nv-tour-alone, .nv-tour.is-fermo .nv-tour-freccia { animation: none !important; }
.nv-tour.is-fermo .nv-tour-anello, .nv-tour.is-fermo .nv-tour-alone { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .nv-tour-fumetto, .nv-tour-alone, .nv-tour-freccia { animation: none !important; }
  .nv-tour-anello, .nv-tour-alone { transition: none; }
}
@media (max-width: 767.98px) {
  .nv-tour-fumetto { padding: 22px 20px; border-radius: 18px; }
  .nv-tour-titolo { font-size: 22px; margin: 12px 0 10px; }
  .nv-tour-testo { font-size: 16px; line-height: 25px; }
  .nv-tour-piede { margin-top: 20px; }
  .nv-tour-tasti { gap: 14px; }
}
/* il «?» della pagina, in fondo alle azioni della toolbar */
.nv-tour-aiuto {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid #55d5cc; background: transparent; color: #55d5cc;
  font: 500 15px/1 'Outfit', sans-serif; display: inline-flex; align-items: center; justify-content: center; margin-left: 12px; cursor: pointer;
  flex: 0 0 auto; align-self: center;
}
.nv-tour-aiuto:hover { background: rgba(85, 213, 204, .12); }
/* il menu utente si apre al passaggio del mouse: durante la tappa «Guida» lo tiene aperto il tour */
#user-menu-trigger.nv-tour-aperto .user-dropdown { display: block; opacity: 1; visibility: visible; }

/* ── GRUPPI DA COMPRARE (PROVA-SELF-REALE, 20/10/2026) ──
   In «Gruppi visibili nel menu» un opzionale del pacchetto non ancora acquistato si vede, ma spento: icona smorzata, bordo
   tratteggiato, nessuno zoom. Il clic non lo accende: apre la modal che rimanda all'acquisto. */
.crm-att-tipo.is-da-comprare { opacity: .4; border-style: dashed; cursor: pointer; }
.crm-att-tipo.is-da-comprare:hover { transform: none; opacity: .65; }