/* ============================================================================
   COMPONENTI — i mattoni dell'interfaccia.
   Regola di manutenzione: qui dentro non compaiono mai colori scritti a mano,
   solo i ruoli definiti in tema.css. Se serve un colore nuovo, si aggiunge
   prima un ruolo nel tema.
   ============================================================================ */

/* ─────────────── Riquadri ─────────────── */

.riquadro {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
}
.riquadro__intestazione {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bordo);
}
.riquadro__intestazione h2, .riquadro__intestazione h3 { margin: 0; }
/* Larghezze di lettura: un modulo largo quanto lo schermo non si compila bene. */
.riquadro--stretto { max-width: 820px; }
.riquadro--strettissimo { max-width: 560px; }

/* Un filo di colore sul bordo sinistro per dire «guarda qui». */
.riquadro--marcato { border-left: 3px solid var(--primario); }
.riquadro--marcato-errore { border-left: 3px solid var(--errore); }

.riquadro__corpo { padding: 16px; }
.riquadro__corpo--compatto { padding: 10px 16px; }
.riquadro__corpo--separato { border-top: 1px solid var(--bordo); }
.riquadro__corpo--evidenziato { background: var(--superficie-2); }

/* ─────────────── Indicatori di sintesi ─────────────── */

.indicatori {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.indicatore {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--primario);
    border-radius: var(--raggio);
    padding: 12px 14px;
    box-shadow: var(--ombra);
}
.indicatore--ok { border-left-color: var(--ok); }
.indicatore--attesa { border-left-color: var(--attesa); }
.indicatore--errore { border-left-color: var(--errore); }
.indicatore--allerta { border-left-color: var(--allerta); }
.indicatore--info { border-left-color: var(--info); }
.indicatore--neutro { border-left-color: var(--neutro); }
.indicatore__etichetta { font-size: var(--testo-minuto); text-transform: uppercase; letter-spacing: .05em; color: var(--testo-tenue); }
.indicatore__valore { font-size: 1.5rem; font-weight: 650; margin-top: 3px; font-variant-numeric: tabular-nums; }
.indicatore__nota { font-size: .78rem; color: var(--testo-tenue); margin-top: 2px; }
.indicatore a { color: inherit; }

/* ─────────────── Tabelle ─────────────── */

.tabella-contenitore { overflow-x: auto; }
/* Elenchi lunghi che restano dentro il riquadro: l'intestazione resta appiccicata. */
.tabella-contenitore--scorrevole { max-height: 480px; overflow-y: auto; }

table.tabella { width: 100%; border-collapse: collapse; font-size: .86rem; }

.tabella thead th {
    text-align: left;
    font-weight: 600;
    font-size: var(--testo-minuto);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--testo-tenue);
    padding: 9px 12px;
    border-bottom: 1px solid var(--bordo);
    background: var(--superficie-2);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.tabella tbody td { padding: 9px 12px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.tabella tbody tr:hover { background: var(--superficie-2); }
.tabella .numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabella .compatta { white-space: nowrap; }
.tabella tfoot td { padding: 10px 12px; font-weight: 600; border-top: 2px solid var(--bordo); }
.tabella--righe-cliccabili tbody tr { cursor: pointer; }
/* La riga che stai guardando, o che parla di te (classifica commerciale). */
.tabella tbody tr.riga-scelta, .tabella tbody tr.riga-scelta:hover { background: var(--primario-tenue); }
.tabella .posizione { width: 34px; }

.vuoto { padding: 34px 18px; text-align: center; color: var(--testo-tenue); }
.vuoto strong { display: block; color: var(--testo); margin-bottom: 4px; }

/* ─────────────── Etichette di stato ─────────────── */

.stato {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: var(--testo-minuto);
    font-weight: 600;
    white-space: nowrap;
    background: var(--neutro-tenue);
    color: var(--neutro);
}
.stato--ok { background: var(--ok-tenue); color: var(--ok); }
.stato--attesa { background: var(--attesa-tenue); color: var(--attesa); }
.stato--errore { background: var(--errore-tenue); color: var(--errore); }
.stato--allerta { background: var(--allerta-tenue); color: var(--allerta); }
.stato--info { background: var(--info-tenue); color: var(--info); }

/* Stessa tavolozza degli stati, ridotta a un punto: serve nelle intestazioni
   delle colonne kanban, dove il testo lo dà già il titolo. */
.pallino-stato { width: 8px; height: 8px; padding: 0; border-radius: 50%; }

/* ─────────────── Pulsanti ─────────────── */

.pulsante {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    min-height: 38px;
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio-piccolo);
    background: var(--superficie);
    color: var(--testo);
    font-size: .86rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}
.pulsante:hover { background: var(--superficie-2); text-decoration: none; }
.pulsante:disabled, .pulsante[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.pulsante--principale { background: var(--primario-pieno); border-color: var(--primario-pieno); color: var(--su-tinta); }
.pulsante--principale:hover { background: var(--primario-premuto); border-color: var(--primario-premuto); }
.pulsante--pericolo { color: var(--errore); border-color: var(--errore-bordo); }
.pulsante--pericolo:hover { background: var(--errore-tenue); }
.pulsante--piccolo { min-height: 30px; padding: 4px 10px; font-size: var(--testo-piccolo); }
.pulsante--piatto { border-color: transparent; background: transparent; }
.pulsante--piatto:hover { background: var(--neutro-tenue); }

.azioni-riga { display: flex; gap: 6px; flex-wrap: wrap; }

/* Un <summary> che ha l'aspetto di un pulsante: niente triangolino di sistema. */
.pulsante--riepilogo { list-style: none; }
.pulsante--riepilogo::-webkit-details-marker { display: none; }

/* Il pannello che si apre sotto quel pulsante, senza spostare la pagina. */
.pannello-flottante {
    position: absolute;
    z-index: 30;
    min-width: 260px;
    margin-top: 6px;
}

/* ─────────────── Moduli ─────────────── */

.modulo { display: grid; gap: 14px; }
.campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.campi--strette { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo--largo { grid-column: 1 / -1; }
.campo > label { font-size: var(--testo-piccolo); font-weight: 600; color: var(--testo); }
.campo__aiuto { font-size: .76rem; color: var(--testo-tenue); }

/* Campi mostrati ma non modificabili: si distinguono a colpo d'occhio dagli editabili. */
.campo--sola-lettura,
input[readonly] { background: var(--superficie-2); color: var(--testo-tenue); cursor: default; }

/* Un campo obbligatorio lasciato vuoto: bordo d'errore che sparisce appena si
   compila. Sostituisce il fumetto del browser, che non si puo' disegnare. */
.campo-errato { border-color: var(--errore) !important; background: var(--errore-tenue); }
.campo__errore { font-size: .76rem; color: var(--errore); }

/* Conferma visiva sui campi appena compilati da una ricerca assistita.
   Il colore non è l'unico segnale: accanto all'etichetta compare un segno di spunta,
   perche' chi non distingue i colori deve poter vedere la stessa cosa. */
.campo--confermato > label::after {
    content: " \2713";
    color: var(--ok);
    font-weight: 700;
}

.campo--confermato input,
.campo--confermato select {
    border-color: var(--ok);
    background: var(--ok-tenue);
    transition: background .25s ease, border-color .25s ease;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="search"],
input[type="tel"], input[type="url"], select, textarea {
    width: 100%;
    padding: 8px 10px;
    min-height: 38px;
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio-piccolo);
    font: inherit;
    font-size: .875rem;
    color: var(--testo);
    background: var(--superficie);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primario);
    box-shadow: 0 0 0 3px var(--primario-tenue);
}
textarea { min-height: 90px; resize: vertical; }
input[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--neutro-tenue); color: var(--testo-tenue); }
.campo--errore input, .campo--errore select, .campo--errore textarea { border-color: var(--errore); }

/* Campo per un codice da leggere ad alta voce: cifre larghe e distanziate. */
.campo-codice { font-size: 1.3rem; letter-spacing: .4em; text-align: center; }

.interruttore { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.interruttore input { width: 18px; height: 18px; accent-color: var(--primario); }

/* ─────────────── Filtri e paginazione ─────────────── */

.filtri {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bordo);
    background: var(--superficie-2);
    border-radius: var(--raggio) var(--raggio) 0 0;
}
.filtri .campo { flex: 1 1 170px; }
.filtri .campo--ricerca { flex: 2 1 260px; }
.filtri .campo--auto { flex: 0 0 auto; }
/* Quando i filtri sono l'unico contenuto del riquadro, gli angoli sono tutti tondi. */
.filtri--isolato { border-radius: var(--raggio); }

.paginazione {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--bordo);
    font-size: .82rem;
    color: var(--testo-tenue);
}
.paginazione__pagine { margin-left: auto; display: flex; gap: 4px; align-items: center; }

/* ─────────────── Messaggi ─────────────── */

.avviso {
    display: flex;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--raggio-piccolo);
    border: 1px solid var(--bordo);
    background: var(--superficie-2);
    margin-bottom: 14px;
    font-size: .875rem;
}
.avviso--ok { background: var(--ok-tenue); border-color: var(--ok-bordo); color: var(--ok); }
.avviso--errore { background: var(--errore-tenue); border-color: var(--errore-bordo); color: var(--errore); }
.avviso--attesa { background: var(--attesa-tenue); border-color: var(--attesa-bordo); color: var(--attesa); }
.avviso--info { background: var(--info-tenue); border-color: var(--info-bordo); color: var(--info); }

.notifiche {
    position: fixed;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 200;
    max-width: min(380px, calc(100vw - 32px));
}
.notifica {
    background: var(--scuro);
    color: var(--su-tinta);
    padding: 11px 14px;
    border-radius: var(--raggio-piccolo);
    box-shadow: var(--ombra-media);
    font-size: .86rem;
    animation: entra .18s ease-out;
}
.notifica--ok { background: var(--ok); }
.notifica--errore { background: var(--errore); }

.notifica { display: flex; align-items: flex-start; gap: 10px; transition: opacity .3s ease; }
.notifica__chiudi {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
    padding: 0 2px;
}
.notifica__chiudi:hover { opacity: 1; }

@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.avanzamento {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    background: var(--primario);
    z-index: 300;
    transition: width .2s ease, opacity .3s ease;
}

/* ─────────────── Bacheche kanban ─────────────── */

.kanban {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px;
    align-items: flex-start;
}
.kanban__colonna {
    flex: 0 0 268px;
    background: var(--neutro-tenue);
    border-radius: var(--raggio);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
}
.kanban__intestazione {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-weight: 600;
    font-size: .82rem;
    border-bottom: 1px solid var(--bordo);
    position: sticky;
    top: 0;
    background: var(--neutro-tenue);
    border-radius: var(--raggio) var(--raggio) 0 0;
}
.kanban__conteggio {
    margin-left: auto;
    background: var(--superficie);
    border-radius: 10px;
    padding: 0 7px;
    font-size: var(--testo-minuto);
    color: var(--testo-tenue);
}
.kanban__elenco { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; }
.kanban__elenco.trascinamento-sopra { background: var(--primario-tenue); border-radius: var(--raggio-piccolo); }

.scheda {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-piccolo);
    padding: 10px;
    box-shadow: var(--ombra);
    cursor: grab;
    font-size: .82rem;
}
.scheda:active { cursor: grabbing; }
.scheda.in-trascinamento { opacity: .45; }
/* Lead ferma da troppo tempo: si vede a colpo d'occhio sulla bacheca. */
.scheda--bloccata { border-left: 3px solid var(--errore); }
.scheda__titolo { font-weight: 600; margin-bottom: 3px; }
.scheda__riga { display: flex; justify-content: space-between; gap: 8px; color: var(--testo-tenue); font-size: .78rem; }
.scheda__piede { display: flex; gap: 6px; align-items: center; margin-top: 7px; flex-wrap: wrap; }

/* ─────────────── Grafici essenziali, senza librerie ─────────────── */

.grafico-barre { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 10px; }
.grafico-barre__voce { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.grafico-barre__colonna { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 2px; }
.grafico-barre__barra { background: var(--primario); border-radius: 3px 3px 0 0; min-height: 2px; }
.grafico-barre__barra--costi { background: var(--bordo-forte); }
.grafico-barre__etichetta { font-size: .7rem; color: var(--testo-tenue); }

.legenda { display: flex; gap: 14px; font-size: .76rem; color: var(--testo-tenue); flex-wrap: wrap; }
.legenda__voce { display: flex; align-items: center; gap: 5px; }
.legenda__campione { width: 10px; height: 10px; border-radius: 2px; background: var(--primario); }
.legenda__campione--costi { background: var(--bordo-forte); }

.barra-avanzamento { height: 7px; background: var(--neutro-tenue); border-radius: 4px; overflow: hidden; }
.barra-avanzamento__valore { height: 100%; background: var(--primario); border-radius: 4px; }
.barra-avanzamento__valore--ok { background: var(--ok); }
.barra-avanzamento__valore--allerta { background: var(--allerta); }

/* ─────────────── Dettagli, cronologia, ricerca assistita ─────────────── */

.dettagli { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; }
.dettaglio__etichetta { font-size: var(--testo-minuto); text-transform: uppercase; letter-spacing: .04em; color: var(--testo-tenue); }
.dettaglio__valore { font-size: .9rem; }

.cronologia { list-style: none; margin: 0; padding: 0; }
.cronologia li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bordo); font-size: .84rem; }
.cronologia li:last-child { border-bottom: none; }
.cronologia__quando { flex: 0 0 128px; color: var(--testo-tenue); font-size: .78rem; }

.campo-ricerca { position: relative; }
.suggerimenti {
    position: absolute;
    z-index: 40;
    background: var(--superficie);
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio-piccolo);
    box-shadow: var(--ombra-media);
    max-height: 260px;
    overflow-y: auto;
    width: 100%;
}
.suggerimenti__voce { padding: 8px 10px; cursor: pointer; font-size: .85rem; }
.suggerimenti__voce:hover, .suggerimenti__voce[aria-selected="true"] { background: var(--primario-tenue); }
.suggerimenti__voce small { display: block; color: var(--testo-tenue); font-size: .75rem; }

.finestra {
    border: none;
    border-radius: var(--raggio);
    padding: 0;
    box-shadow: var(--ombra-media);
    max-width: min(620px, calc(100vw - 32px));
    width: 100%;
}
.finestra::backdrop { background: var(--velo); }
.finestra__intestazione { padding: 14px 16px; border-bottom: 1px solid var(--bordo); display: flex; align-items: center; gap: 10px; }
.finestra__corpo { padding: 16px; max-height: 70vh; overflow-y: auto; }
.finestra__piede { padding: 12px 16px; border-top: 1px solid var(--bordo); display: flex; gap: 8px; justify-content: flex-end; }

/* ─────────────── Piede di un riquadro (totali, azioni di salvataggio) ─────────────── */

.riquadro__piede {
    padding: 12px 16px;
    border-top: 1px solid var(--bordo);
    background: var(--superficie-2);
    border-radius: 0 0 var(--raggio) var(--raggio);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ─────────────── Pagine autonome (fuori dall'impalcatura principale) ─────────────── */

.pagina-accesso {
    background: var(--scuro);
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 20px;
}
.pagina-accesso__riquadro { max-width: 410px; width: 100%; }
.pagina-accesso__marchio { text-align: center; margin-bottom: 20px; }
.pagina-accesso .marchio__nome { font-size: 1.5rem; font-weight: 700; letter-spacing: .5px; }
.pagina-accesso .marchio__punto { color: var(--primario); }
.pagina-accesso .marchio__nome .marchio__qualifica { font-weight: 500; font-size: 1rem; color: var(--testo-tenue); }
/* Con il logo: l'immagine al centro e la qualifica «gestionale» sotto, piccola. */
.pagina-accesso .marchio__logo { display: block; width: 230px; max-width: 80%; margin: 4px auto 8px; }
.pagina-accesso .marchio__logo img { display: block; width: 100%; height: auto; }
.pagina-accesso .marchio__logo + .marchio__qualifica {
    display: block;
    margin-bottom: 6px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--testo-tenue);
}

/* ─────────────────────────── finestra modale ─────────────────────────── */

dialog.finestra {
    border: 1px solid var(--bordo);
    border-radius: 10px;
    box-shadow: var(--ombra-media);
    padding: 0;
    width: min(480px, calc(100vw - 32px));
    color: var(--testo);
}

dialog.finestra::backdrop { background: rgba(16, 24, 40, .35); }

.finestra__testata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bordo);
}

.finestra__testata h2 { margin: 0; font-size: 15px; }

.finestra__corpo { padding: 12px 16px; max-height: 60vh; overflow-y: auto; }

.finestra__piede {
    padding: 10px 16px;
    border-top: 1px solid var(--bordo);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.finestra__riga { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.finestra__riga input[type="text"] { flex: 1; }
.finestra__riga .testo-tenue { min-width: 26px; text-align: right; }

/* ─────────────────────────── calendario ─────────────────────────── */

.calendario { border: 1px solid var(--bordo); border-radius: 10px; overflow: hidden; background: var(--superficie); }
.calendario__intestazioni, .calendario__settimana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendario__intestazione {
    padding: 8px 10px; font-size: var(--testo-piccolo); font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--testo-tenue); border-bottom: 1px solid var(--bordo);
    display: flex; gap: 6px; align-items: baseline;
}
.calendario__giorno {
    min-height: 112px; padding: 6px; border-right: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo);
    display: flex; flex-direction: column; gap: 4px; transition: background .15s;
}
.calendario__giorno:nth-child(7n) { border-right: 0; }
.calendario--settimana .calendario__giorno { min-height: 360px; }
.calendario__giorno--fuori { background: var(--sfondo); color: var(--testo-tenue); }
.calendario__giorno--oggi .calendario__numero { background: var(--primario-pieno); color: var(--su-tinta); }
.calendario__giorno.trascinamento-sopra { background: var(--primario-tenue); outline: 2px dashed var(--primario); outline-offset: -3px; }
.calendario__testata { display: flex; justify-content: space-between; align-items: center; }
.calendario__numero {
    display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center;
    font-weight: 600; font-size: var(--testo-piccolo);
}
.calendario__aggiungi {
    border: 0; background: transparent; color: var(--testo-tenue); font-size: 18px; line-height: 1; cursor: pointer;
    width: 26px; height: 26px; border-radius: 50%; opacity: 0; transition: opacity .15s, background .15s;
}
.calendario__giorno:hover .calendario__aggiungi, .calendario__aggiungi:focus-visible { opacity: 1; }
.calendario__aggiungi:hover { background: var(--primario-tenue); color: var(--primario); }
.calendario__evento {
    display: flex; gap: 5px; align-items: baseline; padding: 3px 7px; border-radius: 6px; font-size: 12px;
    text-decoration: none; color: inherit; border-left: 3px solid var(--bordo-forte); background: var(--neutro-tenue);
    overflow: hidden; white-space: nowrap; cursor: pointer;
}
.calendario__evento[draggable="true"] { cursor: grab; }
.calendario__evento:hover { filter: brightness(.96); text-decoration: none; }
.calendario__ora { font-weight: 600; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.calendario__titolo { overflow: hidden; text-overflow: ellipsis; }
.calendario__sottotitolo { display: block; width: 100%; color: var(--testo-tenue); white-space: normal; }
.calendario--settimana .calendario__evento { white-space: normal; flex-wrap: wrap; }
.calendario__evento--ok      { border-left-color: var(--ok); background: var(--ok-tenue); }
.calendario__evento--info    { border-left-color: var(--info); background: var(--info-tenue); }
.calendario__evento--attesa  { border-left-color: var(--attesa); background: var(--attesa-tenue); }
.calendario__evento--allerta { border-left-color: var(--allerta); background: var(--allerta-tenue); }
.calendario__evento--errore  { border-left-color: var(--errore); background: var(--errore-tenue); }
.calendario__evento--neutro  { border-left-color: var(--bordo-forte); }
.calendario__legenda { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; }
.calendario__legenda::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--bordo-forte); }
.calendario__legenda--ok::before { background: var(--ok); }
.calendario__legenda--info::before { background: var(--info); }
.calendario__legenda--attesa::before { background: var(--attesa); }
.calendario__legenda--errore::before { background: var(--errore); }

@media (max-width: 720px) {
    .calendario__intestazioni { display: none; }
    .calendario__settimana { grid-template-columns: 1fr; }
    .calendario__giorno { min-height: 0; border-right: 0; }
    .calendario--mese .calendario__giorno--fuori { display: none; }
    .calendario__numero::after { content: attr(data-nome); }
    .calendario__aggiungi { opacity: 1; }
}

/* ─────────────────────────── gantt ─────────────────────────── */

.gantt { min-width: 860px; }
.gantt__riga { display: grid; grid-template-columns: 240px minmax(0, 1fr) 210px; align-items: center; border-bottom: 1px solid var(--bordo); }
.gantt__riga--intestazione { font-size: var(--testo-piccolo); color: var(--testo-tenue); position: sticky; top: 0; background: var(--superficie); z-index: 1; }
.gantt__etichetta { padding: 10px 12px; min-width: 0; }
.gantt__numeri { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; font-size: var(--testo-piccolo); }
.gantt__traccia {
    position: relative; height: 44px;
    background-image: repeating-linear-gradient(90deg, var(--bordo) 0 1px, transparent 1px calc(100% / var(--settimane)));
}
.gantt__riga--intestazione .gantt__traccia { height: 30px; background-image: none; }
.gantt__settimana { position: absolute; top: 8px; transform: translateX(2px); font-variant-numeric: tabular-nums; }
.gantt__oggi { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--primario); opacity: .7; }
.gantt__barra {
    position: absolute; top: 12px; height: 20px; border-radius: 6px; background: var(--bordo-forte); opacity: .85;
    box-shadow: var(--ombra);
}
.gantt__barra--ok { background: var(--ok); }
.gantt__barra--allerta { background: var(--allerta); }
.gantt__barra--errore { background: var(--errore); }
.gantt__barra--ritardo { background: repeating-linear-gradient(45deg, var(--errore) 0 6px, var(--superficie) 6px 10px); opacity: 1; }
.gantt__tappa {
    position: absolute; top: 16px; width: 12px; height: 12px; border-radius: 50%; transform: translateX(-6px);
    background: var(--superficie); border: 2px solid var(--testo); z-index: 1;
}
.gantt__tappa--fatta { background: var(--testo); }

/* ─────────────── Cabina di regia ─────────────── */

/* Il ciclo del documento, un passo per riquadro: ascolto → … → apprendimento. */
.ciclo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 16px; }
.ciclo__passo {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--primario);
    border-radius: var(--raggio);
    padding: 10px 12px;
    box-shadow: var(--ombra);
}
.ciclo__passo--attenzione { border-left-color: var(--allerta); }
.ciclo__nome { font-size: var(--testo-minuto); text-transform: uppercase; letter-spacing: .05em; color: var(--testo-tenue); }
.ciclo__valore { font-size: 1.25rem; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; }
.ciclo__nota { font-size: .78rem; color: var(--testo-tenue); }

/* Le missioni, una sotto l'altra, con l'ultimo esito in chiaro. */
.missione { padding: 12px 0; border-top: 1px solid var(--bordo); }
.missione:first-child { border-top: 0; padding-top: 0; }
.missione--ferma { opacity: .6; }
.missione__testata { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.missione__esito { font-size: .8rem; color: var(--testo-tenue); margin-top: 4px; }

/* La coda di decisione: priorità del Sales Manager in evidenza. */
.proposta__testata { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.priorita {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; border-radius: 50%; flex: none;
    font-size: .78rem; font-weight: 700;
    border: 2px solid var(--bordo-forte); color: var(--testo-tenue);
}
.priorita--5 { border-color: var(--errore); color: var(--errore); background: var(--errore-tenue); }
.priorita--4 { border-color: var(--allerta); color: var(--allerta); background: var(--allerta-tenue); }
.priorita--3 { border-color: var(--info); color: var(--info); background: var(--info-tenue); }

/* La nota di direzione: sei domande, sei risposte. */
.nota-direzione { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: .86rem; margin: 8px 0; }
.nota-direzione dt { color: var(--testo-tenue); font-size: var(--testo-minuto); text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
.nota-direzione dd { margin: 0; }

/* ─────────────── Importazione offerte fornitori ─────────────── */
/* Una posizione letta con dubbio: la riga lo dice, la persona controlla. */
.riga-incerta td { background: var(--allerta-tenue); }