/* HQH Firma Offerte - Stile ispirato a hqcloud.it */

:root {
    --bg-dark: #253A2E;
    --bg-darker: #1a2b21;
    --bg-card: #2d4a38;
    --accent: #c6dbac;
    --accent-hover: #d4e8bc;
    --text-light: #E5E5E5;
    --text-muted: #a0a0a0;
    --text-dark: #253A2E;
    --border: #3a5a44;
    --danger: #e74c3c;
    --success: #27ae60;
    --warning: #f39c12;
    --white: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-light);
    line-height: 1.6;
    min-height: 100vh;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--accent-hover);
}

/* NAVBAR */
.navbar {
    background: var(--bg-darker);
    padding: 15px 0;
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-logo {
    height: 28px;
    filter: brightness(0) saturate(100%) invert(88%) sepia(15%) saturate(400%) hue-rotate(80deg) brightness(95%);
}

.navbar-brand span {
    font-weight: 300;
    font-size: 14px;
    color: var(--text-muted);
    display: block;
    letter-spacing: 0;
}

.navbar-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.navbar-links a {
    color: var(--text-light);
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.3s;
}

.navbar-links a:hover,
.navbar-links a.active {
    background: var(--bg-card);
    color: var(--accent);
}

/* CONTAINER */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-narrow {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

/* HERO */
.hero {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 50%, var(--bg-card) 100%);
}

.hero h1 {
    font-size: 48px;
    color: var(--accent);
    margin-bottom: 20px;
    font-weight: 700;
}

.hero p {
    font-size: 20px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 30px;
}

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 28px;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    font-family: inherit;
}

.btn-primary {
    background: var(--accent);
    color: var(--text-dark);
    border-color: var(--accent);
}

.btn-primary:hover {
    background: var(--accent-hover);
    color: var(--text-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(198, 219, 172, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
}

.btn-secondary:hover {
    background: var(--accent);
    color: var(--text-dark);
}

.btn-danger {
    background: var(--danger);
    color: var(--white);
    border-color: var(--danger);
}

.btn-danger:hover {
    background: #c0392b;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

.btn-lg {
    padding: 16px 40px;
    font-size: 18px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* CARDS */
.card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

.card-header h2 {
    color: var(--accent);
    font-size: 22px;
}

/* FORMS */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--accent);
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 15px;
    transition: border-color 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(198, 219, 172, 0.15);
}

.form-control::placeholder {
    color: var(--text-muted);
}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c6dbac' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* FILE INPUT */
.file-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    border: 2px dashed var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.file-upload:hover {
    border-color: var(--accent);
    background: rgba(198, 219, 172, 0.05);
}

.file-upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-upload .file-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.file-upload .file-text {
    color: var(--text-muted);
    font-size: 14px;
}

.file-upload .file-name {
    color: var(--accent);
    font-weight: 600;
    margin-top: 8px;
}

/* TABLE */
.table-wrapper {
    overflow-x: auto;
}

/* Le due colonne della scheda dell'offerta: dati del cliente e documento. Sotto i
   900px diventano una, altrimenti a finestra stretta ogni riga va a capo. */
.scheda-due-colonne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

@media (max-width: 900px) {
    .scheda-due-colonne { grid-template-columns: 1fr; gap: 24px; }
}

/* ===== La pagina di firma del cliente =====
 *
 * Documento a sinistra, tutto il resto a destra. Prima era una colonna sola, e per
 * arrivare al pulsante bisognava scorrere tutte le pagine del PDF piu' quattro
 * riquadri: chi firma non vedeva mai insieme il documento e le spunte che lo
 * riguardano.
 *
 * `minmax(0, ...)` e non `1.4fr` secco: senza il minimo a zero, un'immagine larga
 * impedisce alla colonna di restringersi e la griglia sfonda la finestra invece di
 * adattarsi. E' il modo in cui questo tipo di layout si rompe.
 */
.firma-due-colonne {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/*
 * ─── Nessuno scorrimento DENTRO la pagina (13/08/2026) ───────────────────────
 * Il primo tentativo dava a ogni colonna il suo `overflow: auto`: il documento
 * scorreva nel suo riquadro, i campi nel loro, e la pagina stava in uno schermo.
 * Sulla carta era piu' corta; guardandola era peggio.
 *
 * Due barre di scorrimento in mezzo al contenuto, una accanto all'altra, e il testo
 * del consenso marketing TAGLIATO a meta' frase dal bordo del riquadro: un testo
 * legale che chi firma deve leggere, e che sembrava finito quando non lo era.
 *
 * Adesso le colonne sono alte quanto il loro contenuto e scorre la PAGINA: una barra
 * sola, quella del browser. Resta comunque molto piu' corta di com'era prima delle
 * due colonne, perche' i campi stanno ACCANTO al documento invece che dopo — e non
 * c'e' niente di nascosto dentro un riquadro.
 *
 * Niente `position: sticky` sui campi, e vale la pena scriverlo perche' sembra una
 * buona idea: con una colonna piu' alta della finestra, un pannello agganciato si
 * incolla in cima e il pulsante in fondo resta per sempre sotto il bordo dello
 * schermo. Provato, misurato, buttato.
 */

/* Su questa pagina i 60px di respiro sopra e sotto sono 120px in meno per il
   documento: qui contano piu' i pixel che l'aria. */
.section-firma {
    padding: 24px 0;
}

/*
 * ─── La lettura a schermo intero ─────────────────────────────────────────────
 * Nella colonna il documento sta ADATTATO alla larghezza e basta: nessuno zoom,
 * nessuna barra. Il primo tentativo metteva i comandi dello zoom nella colonna, e
 * ingrandire dentro una colonna larga 600px produce una barra di scorrimento
 * orizzontale sotto un francobollo: «fa un po' cagare adesso con lo zoom cosi' e
 * con la barra di scorrimento sotto». Vero.
 *
 * Lo spazio per leggere un contratto e' lo schermo intero, e la' zoom e scorrimento
 * sono naturali: nessuno si stupisce di trovarli in un lettore aperto a tutto
 * schermo. Il documento non viene duplicato — lo stesso contenitore di pagine si
 * SPOSTA dentro il lettore e torna al suo posto alla chiusura — quindi i rettangoli
 * «Firma qui» e la loro sincronia con le spunte restano gli stessi oggetti.
 *
 * La larghezza delle pagine dipende da una variabile: `--zoom`, scritta da
 * `public/js/firma-lettura.js`. I rettangoli sono posizionati in percentuale dentro
 * la pagina, quindi seguono l'ingrandimento senza che nessuno ricalcoli coordinate.
 */
#pagineDocumento {
    --zoom: 1;
}

.firma-pagina {
    position: relative;
    display: inline-block;
    width: calc(100% * var(--zoom));
    /* `max-width` no: sarebbe proprio il limite che lo zoom deve superare. */
    max-width: none;
}

/* Nella colonna il documento invita ad aprirsi. */
.firma-documento .card { cursor: zoom-in; }

.firma-lettura {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(10, 20, 15, .94);
    display: flex;
    flex-direction: column;
}

.firma-lettura[hidden] { display: none; }

.firma-lettura-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

/*
 * Qui il contenuto scorre, e va bene: e' un lettore aperto a tutto schermo, non una
 * colonna dentro una pagina. La barra verticale e' quella che ci si aspetta, e
 * quella orizzontale compare solo ingrandendo oltre la larghezza dello schermo.
 */
.firma-lettura-contenuto {
    flex: 1;
    overflow: auto;
    padding: 16px;
    text-align: center;
}

/* Dentro il lettore le pagine non sono piu' cliccabili per aprire: sono aperte. */
.firma-lettura-contenuto .card { cursor: default; }

/*
 * Sotto i 1000px una colonna sola, e il documento sopra i campi: su un telefono —
 * dove i clienti aprono questi link piu' che altrove — due colonne renderebbero il
 * documento illeggibile.
 */
@media (max-width: 1000px) {
    .firma-due-colonne { grid-template-columns: 1fr; gap: 16px; }
}

/* ===== Tabelle =====
 *
 * Cinque cose che si vedevano guardandole:
 *
 *  1. `table tr:hover` prendeva ANCHE la riga di intestazione: passando il mouse
 *     sui titoli delle colonne si illuminava una riga su cui non si puo' fare niente.
 *  2. l'intestazione si distingueva solo per il colore del testo. Nessun fondo,
 *     e il bordo sotto i titoli era identico a quello fra due righe qualsiasi:
 *     scorrendo un elenco lungo non si capiva dove finiva la testata.
 *  3. `letter-spacing: 1px` su testo maiuscolo di 13px e' molto: i titoli
 *     occupavano piu' spazio delle parole che contenevano.
 *  4. 12px di imbottitura per cella, su una cella che contiene due righe (nome e
 *     azienda), fanno righe alte tre volte il testo. Le tabelle di questo pannello
 *     si leggono, non si sfogliano.
 *  5. i numeri erano allineati a sinistra e con cifre di larghezza diversa: due
 *     importi uno sotto l'altro non si potevano confrontare a occhio.
 */
table {
    width: 100%;
    border-collapse: collapse;
    /* Cifre di larghezza fissa: le colonne di numeri e le date si incolonnano. */
    font-variant-numeric: tabular-nums;
}

table th,
table td {
    padding: 9px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

table thead th {
    background: rgba(0, 0, 0, .16);
    color: var(--accent);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    white-space: nowrap;
    border-bottom-width: 2px;
    padding-top: 7px;
    padding-bottom: 7px;
}

table thead th:first-child { border-top-left-radius: 6px; }
table thead th:last-child  { border-top-right-radius: 6px; }

/* Solo le righe dei dati reagiscono al passaggio del mouse. */
table tbody tr:hover { background: rgba(198, 219, 172, .06); }
table tbody tr:last-child td { border-bottom: 0; }

/* Le annotazioni dentro una cella. In linea per default: sulla scheda dell'offerta
   i <small> sono cose come «da paolo» in fondo a una data, e mandarli a capo
   aggiunge una riga che nessuno ha chiesto. Il capoverso si chiede con .secondaria
   - l'azienda sotto il nome del cliente, l'ora sotto la data. */
table td small { color: var(--text-muted); font-size: .78rem; }

table td .secondaria,
table td small.secondaria {
    display: block;
    color: var(--text-muted);
    font-size: .74rem;
    line-height: 1.35;
    margin-top: 1px;
}

/* Colonne di numeri e di importi. */
table th.num,
table td.num { text-align: right; }

/* Colonna dei pulsanti: a destra e senza andare a capo. */
table th.azioni,
table td.azioni { text-align: right; white-space: nowrap; }

table td.compatta { white-space: nowrap; }

/* Colonne che si possono perdere quando lo spazio non basta.
 *
 * A 800px di larghezza la tabella delle offerte sbordava: la data usciva tagliata e
 * la colonna dei pulsanti finiva fuori schermo - cioe' sparivano le due cose che
 * servono per lavorare. L avanzamento e una comodita: si nasconde per primo, e resta
 * la colonna con il pulsante. */
@media (max-width: 1100px) {
    .solo-larghi { display: none; }
}

/* ===== Pallini di avanzamento =====
 * Erano nove pixel di grigio al 30%: su fondo scuro il passo «non fatto» era
 * quasi invisibile, quindi non si distingueva un'offerta a metà da una all'inizio.
 * Ora il passo mancante e' un cerchio vuoto: si vede che c'e' e che manca.
 */
.avanzamento { display: inline-flex; gap: 5px; align-items: center; }

.passo {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid #5c7a68;
    background: transparent;
}

.passo.fatto { background: var(--accent); border-color: var(--accent); }

/* STATUS BADGES */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-draft {
    background: rgba(149, 165, 166, 0.2);
    color: #95a5a6;
}

.badge-pending {
    background: rgba(243, 156, 18, 0.2);
    color: var(--warning);
}

.badge-sent {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
}

.badge-signed {
    background: rgba(39, 174, 96, 0.2);
    color: var(--success);
}

/* Lo stato «controfirmata» esisteva nello schema ma non aveva un colore: l'etichetta
   compariva senza sfondo in elenco, dashboard e scheda. */
.badge-countersigned {
    background: rgba(22, 163, 74, .18);
    color: #4ade80;
    border: 1px solid rgba(22, 163, 74, .35);
}

.badge-expired {
    background: rgba(231, 76, 60, 0.2);
    color: var(--danger);
}

/* ALERTS */
.alert {
    padding: 14px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

/*
 * Il testo degli avvisi e' CHIARO, non del colore dell'avviso.
 *
 * Prima ogni avviso scriveva col proprio colore su un fondo dello stesso colore al
 * 15%: azzurro su azzurro, verde su verde. Su una pagina scura il contrasto era
 * appena sufficiente per un titolo e insufficiente per due righe di spiegazione —
 * e le spiegazioni sono quasi tutto quello che questi avvisi contengono.
 *
 * Il colore resta, ma dove si legge: nel bordo sinistro e nell'eventuale grassetto.
 */
.alert-success,
.alert-error,
.alert-info {
    color: var(--text-light);
    border: 1px solid;
    border-left-width: 3px;
}

.alert-success { background: rgba(39, 174, 96, .12);  border-color: rgba(39, 174, 96, .3);  border-left-color: var(--success); }
.alert-error   { background: rgba(231, 76, 60, .12);  border-color: rgba(231, 76, 60, .35); border-left-color: var(--danger); }
/* L'azzurro non esiste in nessun altro punto del pannello: l'informazione usa il
   verde d'accento, come tutto il resto. */
.alert-info    { background: rgba(198, 219, 172, .07); border-color: rgba(198, 219, 172, .2); border-left-color: var(--accent); }

.alert-success strong { color: var(--success); }
.alert-error strong   { color: #f0a0a0; }
.alert-info strong    { color: var(--accent); }
.alert a { color: var(--accent); }

/* OTP INPUT */
.otp-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 30px 0;
}

.otp-input {
    width: 55px;
    height: 65px;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    background: var(--bg-darker);
    border: 2px solid var(--border);
    border-radius: 10px;
    color: var(--accent);
    transition: border-color 0.3s;
}

.otp-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(198, 219, 172, 0.2);
}

/* PDF VIEWER */
/* SIGNING LAYOUT */
.signing-layout {
    display: flex;
    gap: 0;
    height: calc(100vh - 58px);
}

.signing-pdf-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: calc(100% - 380px);
}

.pdf-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: var(--bg-darker);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 5;
}

.pdf-toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdf-scroll-area {
    flex: 1;
    overflow: auto;
    background: #1a1a1a;
    display: flex;
    justify-content: center;
    padding: 30px 40px;
}

.pdf-scroll-area canvas {
    display: block;
}

.signing-panel {
    width: 380px;
    flex-shrink: 0;
    background: var(--bg-darker);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.signing-panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.signing-panel-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.sig-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
    background: var(--bg-card);
    cursor: pointer;
    transition: background 0.2s;
}

.sig-list-item:hover {
    background: var(--border);
}

.sig-list-item.active {
    outline: 2px solid var(--accent);
}

.sig-list-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.sig-list-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.sig-list-label {
    font-size: 13px;
    line-height: 1.3;
}

.sig-list-label small {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
}

.sig-required-badge {
    font-size: 10px;
    color: var(--warning);
    background: rgba(243,156,18,0.15);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.sig-optional-badge {
    font-size: 10px;
    color: var(--text-muted);
    background: rgba(160,160,160,0.15);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.pdf-viewer {
    background: var(--bg-darker);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid var(--border);
    position: relative;
}

.pdf-viewer canvas {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.pdf-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-top: 1px solid var(--border);
    margin-top: 15px;
}

.pdf-page-info {
    color: var(--text-muted);
    font-size: 14px;
}

/* SIGNATURE OVERLAY */
.signature-placeholder {
    position: absolute;
    border: 2px dashed var(--accent);
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    font-size: 13px;
    color: var(--accent);
    z-index: 2;
}

.signature-placeholder:hover {
    background: #f5f9f0;
    border-color: var(--accent-hover);
}

.signature-placeholder.signed {
    border-style: solid;
    border-color: var(--success);
    background: #ffffff;
    cursor: default;
}

.signature-placeholder.signed .sig-content {
    color: var(--success);
    font-size: 12px;
    text-align: center;
    line-height: 1.3;
}

.signature-placeholder.unchecked {
    border-color: #ccc;
    border-style: dotted;
    background: #ffffff;
}

.signature-placeholder .sig-label {
    font-weight: 600;
}

/* CONSENT */
.consent-item {
    font-size: 13px;
}
.consent-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    line-height: 1.5;
    color: var(--text-light);
}
.consent-check input { margin-top: 3px; flex-shrink: 0; }
.consent-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--accent);
    text-decoration: underline;
}
.consent-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-light);
    margin-bottom: 4px;
    font-size: 13px;
}

/* SECTIONS */
.section {
    padding: 60px 0;
}

.section-title {
    color: var(--accent);
    font-size: 28px;
    margin-bottom: 30px;
    text-align: center;
}

/* FEATURES */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 40px 0;
}

.feature {
    text-align: center;
    padding: 30px;
}

.feature .feature-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.feature h3 {
    color: var(--accent);
    margin-bottom: 10px;
    font-size: 18px;
}

.feature p {
    color: var(--text-muted);
    font-size: 14px;
}

/* FOOTER */
.footer {
    background: var(--bg-darker);
    padding: 30px 0;
    text-align: center;
    border-top: 1px solid var(--border);
    margin-top: 60px;
}

.footer p {
    color: var(--text-muted);
    font-size: 13px;
}

/* LOGIN PAGE */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.login-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 420px;
}

/* Il segno in cima: un documento con una firma, disegnato qui dentro. I loghi veri
   sono per business unit, e al momento dell'accesso non si sa ancora quale sia. */
.login-marchio {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
    color: var(--accent);
}

.login-marchio svg { width: 42px; height: 42px; opacity: .9; }

.login-box h1 {
    text-align: center;
    color: var(--accent);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 4px;
    line-height: 1.2;
}

.login-nota {
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
    margin-bottom: 16px;
}

/* Il codice a sei cifre: spaziato, grande, centrato. Prima erano tre stili scritti
   dentro l'attributo style del campo. */
.campo-codice {
    letter-spacing: 6px;
    font-size: 22px;
    text-align: center;
    font-family: var(--font-mono, ui-monospace, monospace);
}

.login-torna {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    color: var(--text-muted);
}

.login-torna:hover { color: var(--accent); }

.login-piede {
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}

.login-box .subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 30px;
    font-size: 14px;
}

/* SIGNING PAGE */
.notes-section {
    margin-top: 20px;
}

@media (max-width: 768px) {
    .signing-layout {
        flex-direction: column;
        height: auto;
    }
    .signing-pdf-area {
        max-width: 100%;
    }
    .signing-panel {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border);
    }
    .pdf-scroll-area {
        min-height: 400px;
    }
}

/* MODAL */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px;
    max-width: 480px;
    width: 90%;
    text-align: center;
}

.modal h3 {
    color: var(--accent);
    margin-bottom: 15px;
    font-size: 22px;
}

.modal p {
    color: var(--text-muted);
    margin-bottom: 20px;
    font-size: 14px;
}

/* TIMER */
.timer {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
    margin: 15px 0;
}

.timer.expired {
    color: var(--danger);
}

/* UTILITIES */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-10 { margin-top: 10px; }
/* Nella colonna dei campi della pagina di firma i riquadri stanno piu' stretti:
   con 20px, quattro riquadri in una colonna alta meta' schermo sprecano un quinto
   dello spazio in aria. */
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.gap-10 { gap: 10px; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.inline-flex { display: inline-flex; align-items: center; gap: 8px; }

/* ===== Scelta della business unit =====
 *
 * Il radio era `display:none` e nessuna regola cambiava l'aspetto dell'opzione
 * scelta: si cliccava, non cambiava niente, e si premeva «Entra» sperando di aver
 * preso quella giusta. Su un sistema dove la business unit decide di chi sono i dati
 * che vedi e quale intestazione va sul contratto, «sperando» non va bene.
 *
 * Un radio nascosto con `display:none` esce anche dall'ordine di tabulazione: da
 * tastiera quella pagina non si poteva usare.
 *
 * Il segno che l'opzione e' scelta e' TRIPLO - pallino, bordo, fondo - perche' il
 * pallino funziona anche dove `:has()` non arriva.
 */
.scelta-bu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
}

.opzione-bu {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.opzione-bu:hover { border-color: #4a6b58; background: rgba(198, 219, 172, .05); }

/* Il pallino: disegnato dal radio vero, che resta nel documento e prende il fuoco. */
.opzione-bu input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    border: 2px solid #5c7a68;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    transition: border-color .15s;
}

.opzione-bu input[type="radio"]:checked { border-color: var(--accent); }

.opzione-bu input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--accent);
}

.opzione-bu input[type="radio"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* L'intera riga si accende, non solo il pallino: e' quello che si guarda. */
.opzione-bu:has(input[type="radio"]:checked) {
    border-color: var(--accent);
    background: rgba(198, 219, 172, .1);
}

.opzione-bu-nome { display: block; font-weight: 600; font-size: 15px; line-height: 1.25; }
.opzione-bu-ragione { display: block; font-size: 12px; color: var(--text-muted); }

/* Etichetta per i soli lettori di schermo. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Etichetta di un campo in sola lettura, tipo «Link per il cliente». Prima erano
   scritte a mano in MAIUSCOLO dentro l'HTML, con tre stili inline ciascuna. */
.etichetta-campo {
    color: var(--text-muted);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .35rem;
}

/* Il link di firma: si seleziona con un doppio clic e non si va a capo a meta'. */
.campo-link {
    width: 100%;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 9px 12px;
    color: var(--text-light);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .78rem;
    margin-bottom: 18px;
}

.campo-link:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Una fila di pulsanti che va a capo in modo regolare, invece di allinearsi a
   sinistra lasciando righe di lunghezza diversa. */
.riga-pulsanti {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.riga-pulsanti form { margin: 0; }

/* Stato o azioni accanto al titolo della pagina. */
.adm-topbar-azioni { display: flex; align-items: center; gap: 10px; }

/* ===== Intestazione e piede della pagina di firma (lato cliente) =====
 *
 * Qui il cliente firma un contratto, e prima l'intestazione era una striscia con la
 * sigla della business unit in caratteri piccoli e grigi.
 *
 * Il nome era piccolo per un difetto, non per scelta: `.navbar-brand` e' 28px in
 * grassetto, ma il nome stava dentro uno `span` annidato, e `.navbar-brand span` e'
 * la riga SECONDARIA - 14px, grigia, sottile. Lo stile grande si applicava a niente.
 *
 * Chi arriva su questa pagina ha in mano un'email e sta per firmare: deve
 * riconoscere con chi sta contrattando prima di leggere il documento. Ed e' anche
 * l'unica difesa che ha contro una pagina di firma falsa: sapere che aspetto ha
 * quella vera.
 */
.intestazione-cliente {
    background: var(--bg-darker);
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.intestazione-cliente .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.identita {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Il logo si mostra com'e': e' il marchio di un'azienda, non un'icona da colorare.
   `.brand-logo` gli applicava un filtro per tingerlo di verde. */
.identita-logo {
    height: 34px;
    max-width: 160px;
    object-fit: contain;
    display: block;
}

.identita-nome {
    display: block;
    color: var(--accent);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
}

.identita div small {
    color: var(--text-muted);
    font-size: .72rem;
    letter-spacing: .02em;
}

.identita-cosa {
    color: var(--text-muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.piede-cliente {
    text-align: center;
    padding: 28px 20px 40px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    margin-top: 30px;
}

@media (max-width: 560px) {
    .intestazione-cliente .container { gap: 6px; }
    .identita-cosa { font-size: .68rem; }
    .identita-nome { font-size: .95rem; }
}

/* ===== Documenti e azioni sulla scheda dell'offerta =====
 *
 * Erano nove pulsanti identici in fila, nell'ordine in cui erano stati scritti:
 * aprire un PDF e riemettere un'attestazione - leggere una cosa e rifarne una -
 * avevano lo stesso aspetto e stavano accanto. Per trovare il contratto firmato si
 * dovevano leggere tutti.
 *
 * I documenti sono diventati link con l'icona del foglio; le azioni sono rimaste
 * pulsanti. Due gruppi con la loro etichetta: cosa si puo' aprire, cosa si puo' fare.
 */
.gruppo-azioni { margin-bottom: 16px; }

.chip-doc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-darker);
    color: var(--text-light);
    font-size: .8rem;
    text-decoration: none;
    transition: border-color .15s, background-color .15s, color .15s;
}

.chip-doc:hover { border-color: var(--accent); color: var(--accent); background: #1f3327; }
.chip-doc .adm-icona { width: 15px; height: 15px; opacity: .75; }
.chip-doc:hover .adm-icona { opacity: 1; }

/* I due documenti che contano - quello firmato dal cliente e il contratto
   controfirmato - si distinguono: sono quelli che si cercano davvero. */
.chip-doc.importante {
    border-color: rgba(198, 219, 172, .45);
    color: var(--accent);
}

.chip-doc.importante .adm-icona { opacity: 1; }
.chip-doc.importante:hover { background: #22362b; }

/* Riga di azioni in cima a un riquadro, quando non serve ripetere il titolo. */
.card-azioni {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 18px;
}

/* ===== Caselle dei totali (dashboard) =====
 *
 * Sei stati, quindi sei colonne: con `auto-fit` ne entravano cinque e la sesta
 * andava a capo da sola, lasciando un buco larghissimo alla sua destra. Un numero
 * fisso di caselle si dispone a mano, non si affida al calcolo automatico.
 */
.stat-griglia {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 1150px) { .stat-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .stat-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}

.stat-tile:hover { border-color: var(--accent); background: #33553f; }

.stat-numero {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--accent);
}

.stat-etichetta {
    font-size: .68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* Una casella a zero non deve tirare l'occhio: si vedono prima quelle che hanno
   qualcosa dentro. */
.stat-tile.vuoto .stat-numero { color: #5c7a68; }
.stat-tile.vuoto { background: rgba(45, 74, 56, .45); }

/* ===== Cose da fare (dashboard) =====
 *
 * Erano due `alert-info`: due rettangoli AZZURRI alti quaranta pixel, con un colore
 * che in tutto il resto del pannello non esiste. Erano la cosa piu' vistosa della
 * pagina, e dicevano una riga di testo ciascuno.
 */
.da-fare { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.da-fare a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 8px;
    background: rgba(198, 219, 172, .07);
    border: 1px solid rgba(198, 219, 172, .18);
    color: var(--text-light);
    font-size: .875rem;
    text-decoration: none;
    transition: background-color .15s, border-color .15s;
}

.da-fare a:hover { background: rgba(198, 219, 172, .13); border-color: var(--accent); }
.da-fare a strong { color: var(--accent); }
.da-fare .adm-icona { width: 18px; height: 18px; color: var(--accent); opacity: .9; }

/* ===== Menu laterale del pannello =====
 *
 * Rifatto il 12/08/2026. Tre difetti che si vedevano a occhio nudo:
 *
 *  1. `.adm-nav-section` non esisteva nel foglio di stile. Le intestazioni delle
 *     sezioni («Configurazione», «Connettori», «Sistema») uscivano quindi col testo
 *     del corpo: bianche, grosse come le voci del menu, senza spazio intorno. Erano
 *     piu' forti delle voci che dovevano introdurre.
 *  2. Le icone mancavano. Il sistema precedente usava un font di icone da un CDN, e
 *     la CSP di questo non permette risorse esterne: restava lo spazio vuoto e un
 *     elenco di sole scritte, tutte uguali. Ora sono SVG disegnati nel progetto.
 *  3. Il menu non scorreva: su una finestra bassa le ultime voci — «Esci» compresa —
 *     erano irraggiungibili, perche' l'altezza era `min-height:100vh` senza scorrimento.
 */

.adm-sidebar {
    background: #16221b;
    height: 100vh;
    width: 248px;
    position: fixed;
    top: 0; left: 0;
    padding: 1.1rem 0 0;
    border-right: 1px solid #2b3f33;
    display: flex;
    flex-direction: column;
    z-index: 200;
    transition: width .25s ease;
}

/* ── Intestazione ─────────────────────────────────────────────────────────── */

.adm-brand {
    padding: 0 1.15rem 1rem;
    overflow: hidden;
    white-space: nowrap;
}

.adm-brand-logo { height: 24px; object-fit: contain; display: block; margin-bottom: .5rem; }

.adm-brand-name {
    display: block;
    color: var(--accent);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2;
}

.adm-brand small {
    color: #6d8c79;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .09em;
}

/* ── Scelta della business unit ───────────────────────────────────────────── */

.adm-bu-switch { padding: 0 1.15rem 1rem; }

.adm-bu-label {
    display: block;
    color: #6d8c79;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .3rem;
}

.adm-bu-switch select {
    width: 100%;
    padding: .45rem 1.9rem .45rem .6rem;
    border-radius: 7px;
    border: 1px solid #334a3c;
    background-color: #1e3028;
    color: var(--text-light);
    font-size: .82rem;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    /* La freccetta e' un SVG scritto qui dentro: nessuna richiesta di rete, quindi
       nessun problema con la CSP, e prende il colore giusto anche sul fondo scuro. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6dbac' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .5rem center;
    background-size: 15px;
    transition: border-color .15s, background-color .15s;
}

.adm-bu-switch select:hover { border-color: #4a6b58; background-color: #24382d; }
.adm-bu-switch select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Voci ─────────────────────────────────────────────────────────────────── */

.adm-sidebar nav {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Scorre: su una finestra bassa le ultime voci devono restare raggiungibili. */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: .5rem;
}

.adm-sidebar nav a,
.adm-sidebar .adm-esci {
    display: flex;
    align-items: center;
    gap: .65rem;
    /* Il bordo sinistro trasparente tiene il posto della barra dello stato attivo:
       senza, la voce attiva si spostava di tre pixel rispetto alle altre. */
    border-left: 3px solid transparent;
    padding: .5rem 1.15rem .5rem calc(1.15rem - 3px);
    color: #8fae9c;
    text-decoration: none;
    font-size: .845rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    transition: color .15s, background-color .15s, border-color .15s;
}

.adm-sidebar nav a:hover,
.adm-sidebar .adm-esci:hover { background: #1d2e24; color: var(--accent-hover); }

.adm-sidebar nav a.active {
    background: #22362b;
    border-left-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.adm-icona { width: 17px; height: 17px; flex-shrink: 0; opacity: .8; }
.adm-sidebar nav a.active .adm-icona { opacity: 1; }

/* ── Intestazioni di sezione ──────────────────────────────────────────────── */

.adm-nav-section {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 1.1rem 1.15rem .35rem;
    color: #6d8c79;
    font-size: .63rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .11em;
    white-space: nowrap;
}

/* La riga che continua dopo il titolo: separa i gruppi senza aggiungere un bordo
   che taglierebbe il menu in blocchi rigidi. */
.adm-nav-section::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #2b3f33;
}

/* ── Blocco in fondo ─────────────────────────────────────────────────────── */

.adm-nav-bottom {
    margin-top: auto;
    padding-top: .5rem;
    border-top: 1px solid #2b3f33;
}

.adm-nav-utente {
    padding: .1rem 1.15rem .55rem;
    overflow: hidden;
    white-space: nowrap;
}

.adm-nav-utente-nome {
    display: block;
    color: var(--text-light);
    font-size: .8rem;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
}

.adm-nav-utente small {
    color: #6d8c79;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.adm-esci {
    width: 100%;
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    font: inherit;
    font-size: .845rem;
    color: #7d9a89;
    cursor: pointer;
    text-align: left;
}

.adm-sidebar .adm-esci:hover { color: #e88b8b; background: rgba(224, 92, 92, .1); }

/* ── Contenuto accanto al menu ───────────────────────────────────────────── */

.adm-main { margin-left: 248px; padding: 2rem; min-height: 100vh; transition: margin-left .25s ease; }

.adm-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.adm-topbar h4 { color: var(--text-light); margin: 0; font-size: 1.3rem; }

/* ── Menu ridotto alle icone ──────────────────────────────────────────────
 * Sotto i 900px di larghezza resta la colonna delle icone: le voci senza testo
 * hanno il titolo nell'attributo `title`, e le sezioni diventano una riga.
 */
@media (max-width: 900px) {
    .adm-sidebar { width: 58px; }
    .adm-sidebar .adm-brand-name,
    .adm-sidebar .adm-brand small,
    .adm-sidebar .adm-bu-switch,
    .adm-sidebar .adm-nav-utente,
    .adm-sidebar .adm-link-text { display: none; }
    .adm-sidebar .adm-brand { padding: 0 .5rem .75rem; text-align: center; }
    .adm-sidebar .adm-brand-logo { margin: 0 auto; }
    .adm-sidebar nav a,
    .adm-sidebar .adm-esci { justify-content: center; padding: .6rem 0; gap: 0; border-left-width: 2px; }
    .adm-nav-section { margin: .8rem .5rem .3rem; gap: 0; }
    .adm-nav-section span { display: none; }
    .adm-main { margin-left: 58px; padding: 1.25rem; }
}

/* ===== Scrollbar globale (admin) ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f1f16; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #3a5244; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #5c7a68; }
::-webkit-scrollbar-corner { background: #0f1f16; }

/* ===== Testo scritto con l'editor visuale =====

   Cinque campi del sistema si scrivono a mano e finiscono in una pagina, in un
   PDF o in un'email. `.testo-ricco` e' l'aspetto del risultato.

   `.testo-condizioni` e' a parte e NON usa .testo-ricco: sono le regole che prima
   stavano scritte negli attributi style= dentro il testo delle condizioni
   generali, ripetute a mano su ognuno dei diciannove titoli. I valori restano in
   pixel, identici a quelli di prima: convertirli in punti aveva spostato il testo
   del PDF di un terzo di millimetro. */
.testo-ricco > *:first-child { margin-top: 0; }
.testo-ricco > *:last-child { margin-bottom: 0; }
.testo-ricco p { margin: 0 0 10px; }
.testo-ricco ul, .testo-ricco ol { margin: 0 0 10px; padding-left: 22px; }
.testo-ricco li { margin-bottom: 4px; }
.testo-ricco h1 { font-size: 20px; margin: 0 0 10px; }
.testo-ricco h2 { font-size: 17px; margin: 16px 0 8px; }
.testo-ricco h3 { font-size: 15px; margin: 14px 0 6px; }
.testo-ricco blockquote { margin: 0 0 10px; padding-left: 12px;
                          border-left: 3px solid var(--border); color: var(--text-muted); }
.testo-ricco a { color: var(--accent); }

.testo-condizioni h1 { font-size: 16px; text-align: center; margin-bottom: 24px; }
.testo-condizioni h2 { font-size: 12px; text-transform: uppercase; }
.testo-condizioni h3 { font-size: 12px; }

/* ===== Editor visuale =====

   L'editor e' TinyMCE 6.8.6 self-hosted (public/tinymce/, vedi
   tools/installa-tinymce.sh) e porta la sua pelle: la variante `oxide-dark`, che
   sta bene col pannello scuro. Qui non serve niente.

   L'aspetto del testo DENTRO l'editor sta in public/js/editor-tinymce.js, nella
   voce `content_style`: TinyMCE mette il contenuto in un iframe, che non vede
   questo foglio di stile. Le due cose vanno tenute allineate a mano — chi scrive
   deve vedere le proporzioni che avra' il documento. */

/* La pelle di TinyMCE portata sui colori del pannello.

   `oxide-dark` e' scura ma di un blu-grigio suo (#222f3e): dentro un pannello verde
   si vede per quello che e', il tema di un altro programma. Qui si toccano soltanto
   i colori — non le misure, non le posizioni — perche' ogni regola scritta contro il
   CSS di una libreria e' una regola che il prossimo aggiornamento puo' scollare.

   Il fondo dell'AREA DI SCRITTURA non si tocca da qui: sta in un iframe, che non
   vede questo foglio. Sta in `content_style`, in public/js/editor-tinymce.js.

   Perche' `!important`. Il CSS della pelle viene iniettato da TinyMCE nel `<head>`
   DOPO questo foglio, e usa selettori da tre classi come
   `.tox:not(.tox-tinymce-inline) .tox-editor-header`: a parita' di peso vince lui.
   Rincorrere la specificita' selettore per selettore funziona finche' il prossimo
   aggiornamento non cambia un selettore, e allora si scolla un pezzo alla volta
   senza che nessuno se ne accorga. Misurato: con `.tox .tox-editor-header` e poi con
   `.tox.tox-tinymce .tox-editor-header` il fondo restava #222f3e.

   Qui si toccano SOLO I COLORI — non le misure, non le posizioni, non i bordi
   interni — perche' un colore sbagliato si vede, mentre una misura forzata rompe la
   disposizione di una barra che si adatta allo spazio. */
.tox.tox-tinymce { border-color: var(--border) !important; border-radius: 8px; }
.tox .tox-editor-header,
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar-overlord { background: var(--bg-darker) !important; }
.tox .tox-tbtn { color: var(--text-light) !important; }
.tox .tox-tbtn svg { fill: var(--text-light) !important; }
.tox .tox-tbtn:hover:not(:disabled) { background: rgba(198, 219, 172, 0.14) !important; }
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover { background: rgba(198, 219, 172, 0.22) !important; }
.tox .tox-tbtn--enabled svg { fill: var(--accent) !important; }

/* L'avviso «salvando, l'editor toglierà…».

   Sta nel flusso, sopra l'editor, e non nella notifica di TinyMCE: quella galleggia
   SOPRA l'area di scrittura e copre le prime righe del testo.

   E' una RIGA, non un riquadro colorato. La prima versione era un blocco giallo, e
   con tre editor sulla stessa pagina — i template email — diventava una parete di
   avvisi che copriva il contenuto vero. Compare solo quando si tocca il testo
   (evento `dirty`), cioe' quando la semplificazione sta davvero per succedere. */
.ev-avviso {
    padding: 6px 0 6px 10px;
    margin-bottom: 6px;
    border-left: 2px solid #e6be5a;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .hero h1 { font-size: 32px; }
    .hero p { font-size: 16px; }
    .hero { padding: 60px 20px; }
    .card { padding: 20px; }
    .navbar .container { flex-direction: column; gap: 10px; }
    .otp-input { width: 45px; height: 55px; font-size: 22px; }
    .features { grid-template-columns: 1fr; }
    table { font-size: 13px; }
    table th, table td { padding: 8px 10px; }

}