:root {
	--testo: #0f172a;
	--tenue: #64748b;
	--debole: #94a3b8;
	--bordo: #e2e8f0;
	--sfondo: #ffffff;
	--fondale: #f1f5f9;
	--blu: #2563eb;
	--blu-chiaro: #dbeafe;
	--verde: #15803d;
	--verde-chiaro: #dcfce7;
	--rosso: #dc2626;
	--rosso-chiaro: #fee2e2;
	--giallo: #a16207;
	--giallo-chiaro: #fef3c7;
	--ombra: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
	--raggio: 12px;
	--larghezza-barra: 260px;
}

* { box-sizing: border-box; }

/* L'attributo hidden deve avere sempre la precedenza.
   Il browser lo applica con [hidden]{display:none}, ma qualunque regola scritta
   qui dentro la batte, perche' gli stili d'autore vincono su quelli predefiniti:
   il pannello del listino aveva display:flex e restava percio' sempre a schermo,
   con il pulsante di chiusura inerte. Dichiararlo qui evita che succeda ancora. */
[hidden] { display: none !important; }

body {
	margin: 0;
	display: flex;
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--testo);
	background: var(--fondale);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

/* ============ barra laterale ============ */
.interruttore-menu { display: none; }
.velo { display: none; }

.barra {
	width: var(--larghezza-barra);
	flex-shrink: 0;
	background: #0f172a;
	color: #cbd5e1;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
}
/* Il marchio e' l'immagine chiara: le proporzioni sono fissate con width e
   height sul tag, cosi' la barra non sussulta mentre l'immagine si carica. */
.marchio {
	display: flex; align-items: center;
	padding: 18px 20px;
	border-bottom: 1px solid rgba(255,255,255,.07);
}
.marchio a { display: block; line-height: 0; }
.marchio img { width: 100%; max-width: 215px; height: auto; }

.barra nav { padding: 10px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.barra .gruppo {
	font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
	color: #475569; font-weight: 600; padding: 15px 10px 6px;
}
.barra nav a {
	display: flex; align-items: center; gap: 10px;
	padding: 10px; margin-bottom: 1px; border-radius: 8px;
	color: #cbd5e1; text-decoration: none; font-size: 13.5px;
	transition: background .12s, color .12s;
}
.barra nav a svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .75; }
.barra nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.barra nav a.attivo { background: var(--blu); color: #fff; font-weight: 500; }
.barra nav a.attivo svg { opacity: 1; }
.piede-barra {
	padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.07);
	font-size: 11.5px; color: #475569; line-height: 1.4;
}
.piede-barra a { color: inherit; text-decoration: none; }
.piede-barra a:hover { color: #94a3b8; text-decoration: underline; }

/* ============ corpo e testata ============ */
.corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.intestazione {
	background: var(--sfondo);
	border-bottom: 1px solid var(--bordo);
	padding: 12px 24px;
	display: flex; align-items: center; gap: 14px;
	position: sticky; top: 0; z-index: 10;
}
.intestazione h1 {
	font-size: 18px; font-weight: 600; margin: 0;
	letter-spacing: -.01em; flex: 1;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.apri-barra {
	display: none;
	width: 38px; height: 38px; border-radius: 9px;
	align-items: center; justify-content: center;
	color: var(--tenue); cursor: pointer; flex-shrink: 0;
}
.apri-barra:active { background: var(--fondale); }
.apri-barra svg { width: 21px; height: 21px; }

.area-utente { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.icona-testata {
	position: relative;
	width: 38px; height: 38px; border-radius: 9px;
	display: grid; place-items: center;
	color: var(--tenue); text-decoration: none;
	transition: background .12s, color .12s;
}
.icona-testata:hover { background: var(--fondale); color: var(--testo); }
.icona-testata svg { width: 19px; height: 19px; }
.contatore {
	position: absolute; top: 3px; right: 2px;
	min-width: 17px; height: 17px; padding: 0 4px;
	border-radius: 9px; background: var(--rosso); color: #fff;
	font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
	border: 2px solid var(--sfondo); box-sizing: content-box;
}

.utente {
	display: flex; align-items: center; gap: 9px;
	padding: 4px 10px 4px 4px; margin-left: 6px;
	border-radius: 21px; text-decoration: none; color: var(--testo);
	transition: background .12s;
}
.utente:hover { background: var(--fondale); }
.utente .iniziali {
	width: 31px; height: 31px; border-radius: 50%;
	background: linear-gradient(135deg, #3b82f6, #2563eb);
	color: #fff; display: grid; place-items: center;
	font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.utente .nome { font-size: 13.5px; font-weight: 500; white-space: nowrap; }

main { padding: 20px 24px 40px; }

/* ============ indicatori ============ */
.indicatori {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px; margin-bottom: 18px;
}
.scheda {
	background: var(--sfondo); border: 1px solid var(--bordo);
	border-radius: var(--raggio); padding: 15px 16px; box-shadow: var(--ombra);
}
.scheda.allerta { border-color: #fca5a5; background: linear-gradient(180deg,#fffbfb,#fff); }
.riga-alta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.etichetta { font-size: 12.5px; color: var(--tenue); font-weight: 500; }
.valore {
	font-size: 24px; font-weight: 650; letter-spacing: -.02em;
	margin: 6px 0 2px; font-variant-numeric: tabular-nums;
}
.valore.rosso { color: var(--rosso); }
.nota { font-size: 12px; color: var(--debole); }
.variazione { font-size: 12px; font-weight: 600; }
.variazione.su { color: var(--verde); }
.variazione.giu { color: var(--rosso); }

/* ============ riquadri ============ */
.griglia-due {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 16px; margin-bottom: 16px;
}
.riquadro {
	background: var(--sfondo); border: 1px solid var(--bordo);
	border-radius: var(--raggio); box-shadow: var(--ombra);
	overflow: hidden; display: flex; flex-direction: column;
	min-width: 0;
}
.riquadro > header {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 13px 16px; border-bottom: 1px solid var(--bordo);
}
.riquadro h2 { font-size: 14px; font-weight: 600; margin: 0; }
.riquadro h2 .anno { color: var(--debole); font-weight: 400; }
.legenda { font-size: 11.5px; color: var(--debole); display: flex; align-items: center; gap: 9px; }
.legenda .q { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 4px; }
.legenda .q.corrente { background: var(--blu); }
.legenda .q.precedente { background: #cbd5e1; }
.collegamento { font-size: 12.5px; color: var(--blu); text-decoration: none; white-space: nowrap; }
.collegamento:hover { text-decoration: underline; }
.vuoto { color: var(--debole); padding: 22px 16px; margin: 0; font-size: 13px; }

/* ============ grafico a barre ============ */
.grafico { display: flex; align-items: flex-end; gap: 6px; padding: 18px 16px 12px; height: 200px; }
.colonna { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.barre { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
/* nome distinto da .barra (la barra laterale), altrimenti collidono */
.asta { width: 45%; max-width: 13px; border-radius: 3px 3px 0 0; min-height: 2px; transition: opacity .12s; }
.asta.corrente { background: linear-gradient(180deg, #3b82f6, #2563eb); }
.asta.precedente { background: #cbd5e1; }
.colonna:hover .asta { opacity: .78; }
.mese { font-size: 10.5px; color: var(--debole); padding-top: 7px; }

/* ============ ripartizione per mandante ============ */
.ripartizione { list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.ripartizione .nome { font-size: 13px; font-weight: 500; }
.ripartizione .importo { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barretta { height: 6px; background: var(--fondale); border-radius: 4px; margin: 6px 0 3px; overflow: hidden; }
.barretta span { display: block; height: 100%; border-radius: 4px; }

/* ============ tabelle ============ */
.scorrevole { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
th {
	font-size: 11px; font-weight: 600; color: var(--tenue);
	text-transform: uppercase; letter-spacing: .04em; background: #f8fafc; white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f8fafc; }
.destra { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.forte { font-weight: 600; }
.mono { font-variant-numeric: tabular-nums; color: var(--tenue); font-size: 13px; }
.principale { display: block; font-weight: 500; font-size: 13px; }
.secondario { display: block; font-size: 11.5px; color: var(--debole); }

/* ============ pastiglie di stato ============ */
.pastiglia { display: inline-block; padding: 2.5px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pastiglia.rossa  { background: var(--rosso-chiaro); color: var(--rosso); }
.pastiglia.gialla { background: var(--giallo-chiaro); color: var(--giallo); }
.pastiglia.verde  { background: var(--verde-chiaro); color: var(--verde); }
.pastiglia.grigia { background: var(--fondale); color: var(--tenue); }
.pastiglia.blu    { background: var(--blu-chiaro); color: var(--blu); }

.avviso {
	background: var(--sfondo); border: 1px solid var(--bordo);
	border-radius: var(--raggio); padding: 28px; color: var(--tenue); box-shadow: var(--ombra);
}

/* ==========================================================================
   SCHERMI STRETTI - iPad in verticale e telefoni
   La barra laterale diventa un pannello che entra da sinistra, comandato da
   una casella di spunta nascosta: nessun JavaScript, quindi funziona sempre.
   ========================================================================== */
@media (max-width: 1023px) {
	.barra {
		position: fixed; top: 0; left: 0; bottom: 0;
		z-index: 30; height: 100%;
		transform: translateX(-100%);
		transition: transform .22s ease;
		box-shadow: 0 0 40px rgba(0,0,0,.3);
	}
	.interruttore-menu:checked ~ .barra { transform: translateX(0); }

	.velo {
		display: block; position: fixed; inset: 0;
		background: rgba(15,23,42,.45); z-index: 20;
		opacity: 0; pointer-events: none; transition: opacity .22s;
	}
	.interruttore-menu:checked ~ .velo { opacity: 1; pointer-events: auto; }

	.apri-barra { display: flex; }
	.intestazione { padding: 10px 14px; }
	main { padding: 16px 14px 32px; }
	.griglia-due { grid-template-columns: 1fr; }
}

/* telefoni */
@media (max-width: 560px) {
	.intestazione h1 { font-size: 16px; }
	.utente .nome { display: none; }
	.utente { padding: 4px; margin-left: 2px; }
	.indicatori { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.scheda { padding: 12px; }
	.valore { font-size: 19px; }
	.etichetta { font-size: 11.5px; }
	.nota { font-size: 11px; }
	th, td { padding: 9px 12px; }
	.grafico { height: 160px; padding: 14px 10px 8px; }
	.mese { font-size: 9.5px; }
	main { padding: 12px 10px 28px; }
	.griglia-due { gap: 12px; }
}

/* solo sui telefoni piu' stretti gli indicatori vanno in colonna singola:
   sui formati comuni (375-430px) restano due per riga, cosi' si vedono tutti
   e quattro senza scorrere */
@media (max-width: 340px) {
	.indicatori { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ELENCO CLIENTI: barra di ricerca, tabella ordinabile, schede su telefono
   ========================================================================== */

.barra-strumenti {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.ricerca {
	position: relative; flex: 1; min-width: 240px; max-width: 460px;
}
.ricerca svg {
	position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
	width: 17px; height: 17px; color: var(--debole); pointer-events: none;
}
.ricerca input {
	width: 100%; padding: 10px 14px 10px 37px;
	border: 1px solid var(--bordo); border-radius: 9px;
	background: var(--sfondo); color: var(--testo);
	font-size: 14px; font-family: inherit;
	box-shadow: var(--ombra);
	-webkit-appearance: none;
}
.ricerca input:focus {
	outline: none; border-color: var(--blu);
	box-shadow: 0 0 0 3px rgba(37,99,235,.13);
}
.conteggi { font-size: 12.5px; color: var(--tenue); }
.conteggi #mostrati { font-weight: 700; color: var(--testo); }
.conteggi .separatore { color: var(--bordo); margin: 0 3px; }
.conteggi .fermi { color: var(--rosso); }

/* intestazioni ordinabili */
.elenco th.ordinabile { cursor: pointer; user-select: none; position: relative; padding-right: 22px; }
.elenco th.ordinabile:hover { color: var(--testo); background: #f1f5f9; }
.elenco th.ordinabile::after {
	content: '↕'; position: absolute; right: 8px; opacity: .3; font-size: 11px;
}
.elenco th.ordine-su::after  { content: '↑'; opacity: 1; color: var(--blu); }
.elenco th.ordine-giu::after { content: '↓'; opacity: 1; color: var(--blu); }
.elenco th.destra.ordinabile { padding-right: 22px; }

.elenco .cella-principale { max-width: 320px; }
.elenco .pastiglia { margin-left: 6px; }

.contatti { white-space: nowrap; }
.contatto {
	display: inline-flex; align-items: center; gap: 5px;
	color: var(--testo); text-decoration: none; font-size: 13px;
}
.contatto svg { width: 13px; height: 13px; color: var(--debole); }
.contatto:hover { color: var(--blu); }
.contatto.secondario { display: block; font-size: 11.5px; color: var(--debole); margin-top: 2px; }
.assente { color: var(--debole); font-size: 12px; font-style: italic; }

/* ---- schermi stretti: si tolgono colonne, non si gonfiano le righe ----
   La tabella resta una tabella a ogni dimensione. Sparisce prima cio' che si
   puo' ricavare altrove (numero ordini), poi i recapiti, infine la citta':
   nome, ultimo ordine e fatturato restano sempre, perche' sono le tre cose
   che servono per capire a colpo d'occhio come sta un cliente. ---- */
@media (max-width: 1024px) { .nascondi-1024 { display: none; } }
@media (max-width: 820px)  { .nascondi-820  { display: none; } }
@media (max-width: 560px)  { .nascondi-560  { display: none; } }

/* sotto gli 820px si tolgono anche le righe secondarie, per tenere
   ogni cliente su una riga sola */
@media (max-width: 820px) {
	.elenco .cella-principale { max-width: none; }
	.elenco .indirizzo { display: none; }
	.elenco th, .elenco td { padding: 9px 10px; }
}

@media (max-width: 560px) {
	.barra-strumenti { gap: 10px; }
	.ricerca { max-width: none; }
}

/* sui telefoni il nome si ferma a due righe: le ragioni sociali lunghe
   altrimenti fanno righe alte il triplo e si perde la scansione a colpo d'occhio */
@media (max-width: 560px) {
	.elenco .cella-principale .principale {
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
		overflow: hidden;
	}
	.elenco th, .elenco td { padding: 8px 9px; }
}

/* ==========================================================================
   PULSANTI, MESSAGGI, SCHEDA CLIENTE E MODULI
   ========================================================================== */

.pulsante {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	padding: 9px 15px; border-radius: 9px;
	border: 1px solid var(--bordo); background: var(--sfondo); color: var(--testo);
	font-size: 13.5px; font-weight: 500; font-family: inherit;
	text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: background .12s, border-color .12s;
}
.pulsante:hover { background: var(--fondale); }
.pulsante svg { width: 16px; height: 16px; }
.pulsante.primario { background: var(--blu); border-color: var(--blu); color: #fff; box-shadow: var(--ombra); }
.pulsante.primario:hover { background: #1d4ed8; }

.avviso-riga {
	padding: 11px 15px; border-radius: 9px; margin-bottom: 16px;
	font-size: 13.5px; border: 1px solid;
}
.avviso-riga.riuscito { background: var(--verde-chiaro); border-color: #86efac; color: #14532d; }
.avviso-riga.errore   { background: var(--rosso-chiaro); border-color: #fca5a5; color: #7f1d1d; }

.avviso-con-azione { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.avviso-con-azione .pulsante { flex-shrink: 0; }

/* ---- testa della scheda cliente ---- */
.testa-scheda {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.testa-scheda .indietro {
	display: inline-block; font-size: 12.5px; color: var(--tenue);
	text-decoration: none; margin-bottom: 6px;
}
.testa-scheda .indietro:hover { color: var(--blu); }
.testa-scheda h2 { font-size: 21px; font-weight: 650; margin: 0; letter-spacing: -.02em; }
.testa-scheda .sottotitolo { font-size: 12.5px; color: var(--tenue); margin-top: 5px; }
.testa-scheda .azioni { display: flex; gap: 8px; flex-shrink: 0; }

.valore.piccolo { font-size: 19px; }

/* ---- elenco di dati (anagrafica) ---- */
.dati { margin: 0; padding: 14px 16px; display: grid; grid-template-columns: 130px 1fr; gap: 9px 14px; }
.dati dt { font-size: 12.5px; color: var(--tenue); }
.dati dd { margin: 0; font-size: 13.5px; }
.dati dd a { color: var(--blu); text-decoration: none; }
.dati dd a:hover { text-decoration: underline; }

.indirizzi { list-style: none; margin: 0; padding: 8px 16px 14px; }
.indirizzi li { padding: 8px 0; border-bottom: 1px solid var(--bordo); }
.indirizzi li:last-child { border-bottom: none; }

/* ---- righe cliccabili ---- */
/* La riga intera si apre al click, ma gestita da JavaScript: la tecnica CSS
   della sovrapposizione assoluta non e' affidabile su <tr>, dove position
   relative non crea un blocco contenitore in tutti i browser. In Safari la
   sovrapposizione usciva dalla riga e copriva la pagina, cosi' ogni click
   apriva sempre l'ultimo cliente dell'elenco. */
.riga-cliccabile { cursor: pointer; }
.collegamento-riga { color: inherit; text-decoration: none; }
.riga-cliccabile:hover .collegamento-riga { color: var(--blu); }
/* sfondo un po' piu' marcato del grigio generale: sulle righe cliccabili
   il passaggio del mouse deve vedersi senza dover sottolineare */
.elenco tbody tr.riga-cliccabile:hover { background: #eff6ff; }

/* ---- moduli ---- */
.modulo .riquadro { margin-bottom: 16px; }
.griglia-campi {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px 16px; padding: 16px;
}
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo.largo { grid-column: 1 / -1; }
.campo label { font-size: 12.5px; color: var(--tenue); font-weight: 500; }
.campo .obbligatorio { color: var(--rosso); }
/* La casella di spunta e il selettore di file non sono campi di testo: senza
   escluderli si prendono width:100% e appearance:none, e la spunta diventa un
   ovale bianco largo quanto il modulo. */
.campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.campo textarea {
	padding: 9px 11px; border: 1px solid var(--bordo); border-radius: 8px;
	background: var(--sfondo); color: var(--testo);
	font-size: 14px; font-family: inherit; width: 100%;
	-webkit-appearance: none;
}
.campo textarea { resize: vertical; }
.campo input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--blu); }
.campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.campo textarea:focus {
	outline: none; border-color: var(--blu);
	box-shadow: 0 0 0 3px rgba(37,99,235,.13);
}
.campo input[readonly] { background: var(--fondale); color: var(--tenue); }
.campo.in-errore input { border-color: var(--rosso); }
.campo.in-errore input:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.13); }
.messaggio-errore { font-size: 12px; color: var(--rosso); }
.aiuto { font-size: 11.5px; color: var(--debole); }

.azioni-modulo {
	display: flex; justify-content: flex-end; gap: 10px;
	padding-bottom: 10px; flex-wrap: wrap;
}

.modulo-incasso {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
	padding: 14px 16px; border-top: 1px solid var(--bordo);
}
.modulo-incasso .campo { flex: 1 1 130px; }
.modulo-incasso .pulsante { flex-shrink: 0; }

@media (max-width: 560px) {
	.modulo-incasso .campo { flex: 1 1 100%; }
	.modulo-incasso .pulsante { width: 100%; }
}

/* ============ elenco ordini: modifica rapida in linea ============ */

.riga-modifica-rapida td { padding: 0; background: var(--fondale); }
.modulo-modifica-rapida {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
	padding: 12px 16px;
}
.modulo-modifica-rapida .campo { flex: 1 1 120px; }
.modulo-modifica-rapida .pulsante { flex-shrink: 0; }

@media (max-width: 560px) {
	.modulo-modifica-rapida .campo { flex: 1 1 100%; }
	.modulo-modifica-rapida .pulsante { width: 100%; }
}

/* ============ incasso multiplo: piu' fatture in un colpo solo ============ */

.piede-incasso-multiplo {
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
	gap: 12px; padding: 14px 16px; border-top: 1px solid var(--bordo);
}
.piede-incasso-multiplo .totale-selezionato { font-size: 14px; color: var(--tenue); }
.piede-incasso-multiplo .totale-selezionato strong { color: var(--testo); font-size: 16px; }

.elenco input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--blu); }
.elenco input[type="number"] {
	width: 110px; padding: 6px 8px; border: 1px solid var(--bordo); border-radius: 6px;
	background: var(--sfondo); color: var(--testo); font-size: 13.5px; text-align: right;
	font-family: inherit; -webkit-appearance: none;
}
.elenco input[type="number"]:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(37,99,235,.13); }
.elenco input[type="number"]:disabled { background: var(--fondale); color: var(--debole); border-color: transparent; }

@media (max-width: 560px) {
	.piede-incasso-multiplo { flex-direction: column; align-items: stretch; }
	.piede-incasso-multiplo .pulsante { width: 100%; }
}

/* ============ guida Gmail: piccolo pulsante e finestra ============ */

.icona-aiuto {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; padding: 0; margin: 0; border: none; border-radius: 50%;
	background: transparent; color: #ea4335; cursor: pointer; flex-shrink: 0;
}
.icona-aiuto:hover { background: var(--fondale); }
.icona-aiuto svg { width: 14px; height: 14px; }

dialog.finestra-guida {
	max-width: 560px; width: calc(100% - 32px); margin: auto; padding: 0;
	border: none; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.25);
	background: var(--sfondo); color: var(--testo);
}
dialog.finestra-guida::backdrop { background: rgba(15,23,42,.55); }
.testa-finestra {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 15px 20px; border-bottom: 1px solid var(--bordo);
}
.testa-finestra h2 { font-size: 15px; margin: 0; }
.chiudi-finestra {
	border: none; background: transparent; font-size: 22px; line-height: 1;
	color: var(--debole); cursor: pointer; padding: 2px 7px; border-radius: 6px; flex-shrink: 0;
}
.chiudi-finestra:hover { background: var(--fondale); color: var(--testo); }
.corpo-finestra { padding: 18px 20px; max-height: 70vh; overflow-y: auto; font-size: 13.5px; line-height: 1.6; }
.corpo-finestra p { margin: 0 0 10px; }
.corpo-finestra h3 { font-size: 13.5px; margin: 18px 0 6px; }
.corpo-finestra h3:first-child { margin-top: 0; }
.corpo-finestra ul { margin: 6px 0 12px; padding-left: 20px; }
.corpo-finestra li { margin-bottom: 4px; }
.corpo-finestra code {
	background: var(--fondale); padding: 1px 5px; border-radius: 4px; font-size: 12.5px;
}
.corpo-finestra .avviso-riga { margin: 10px 0; }
.corpo-finestra .pulsante { display: inline-block; }

/* ============ giro visita: modulo di aggiunta e ricerca cliente ============ */

.modulo-giro {
	display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px;
	padding: 14px 16px; border-top: 1px solid var(--bordo);
}
.modulo-giro input[type="text"] {
	padding: 9px 11px; border: 1px solid var(--bordo); border-radius: 8px;
	font: inherit; background: var(--sfondo); color: var(--testo);
}

/*
 * L'elenco dei risultati NON e' sovrapposto (position: absolute): il
 * riquadro che lo contiene ha overflow:hidden per gli angoli arrotondati
 * della tabella, e un menu sovrapposto verrebbe tagliato via silenziosamente
 * proprio li'. Scorre invece nel flusso normale, sotto al campo di ricerca.
 */
.selettore-cliente { flex: 1 1 220px; min-width: 200px; }
/*
 * Dentro un .modulo-giro (riga flessibile) "220px" e' la larghezza voluta.
 * Ma .campo e' una colonna flessibile: lo stesso flex-basis lungo l'asse
 * verticale diventerebbe un'altezza di 220px, non una larghezza - qui va
 * annullato.
 */
.campo > .selettore-cliente { flex: none; width: 100%; }
.selettore-cliente .cliente-ricerca { width: 100%; box-sizing: border-box; }
.cliente-risultati {
	margin-top: 4px;
	background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 8px;
	max-height: 260px; overflow-y: auto;
}
.cliente-opzione {
	display: block; width: 100%; text-align: left; padding: 9px 12px;
	border: none; background: none; font: inherit; color: var(--testo); cursor: pointer;
}
.cliente-opzione:hover, .cliente-opzione:focus { background: var(--fondale); }
.cliente-opzione span { color: var(--debole); font-size: 12px; margin-left: 6px; }
.cliente-nessuno { padding: 9px 12px; color: var(--debole); font-size: 13px; }

/* ============ gestione appuntamenti ============ */

.agenda.griglia-due { align-items: start; }

.agenda-testata {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 13px 16px; border-bottom: 1px solid var(--bordo);
}
.agenda-testata h2 { font-size: 14px; font-weight: 600; margin: 0; }

.griglia-mese {
	display: grid; grid-template-columns: repeat(7, 1fr);
	padding: 8px;
}
.cella-intestazione {
	text-align: center; font-size: 11px; font-weight: 600; color: var(--debole);
	padding: 6px 0; text-transform: uppercase; letter-spacing: .03em;
}
.cella-giorno {
	position: relative; aspect-ratio: 1; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 3px;
	border-radius: 8px; color: var(--testo); text-decoration: none; font-size: 13px;
}
.cella-giorno.vuota { visibility: hidden; }
.cella-giorno:not(.vuota):hover { background: var(--fondale); }
.cella-giorno.oggi .numero-giorno {
	background: var(--blu); color: #fff; border-radius: 50%;
	width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
}
.cella-giorno.scelto { background: var(--blu-chiaro); }
.pallini-eventi { display: flex; gap: 2px; height: 4px; }
.pallino { width: 4px; height: 4px; border-radius: 50%; background: var(--blu); }

.agenda-giorno header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agenda-giorno h2 { display: flex; align-items: center; gap: 8px; }

.elenco-appuntamenti { list-style: none; margin: 0; padding: 0; }
.elenco-appuntamenti li {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 12px 16px; border-top: 1px solid var(--bordo);
}
.elenco-appuntamenti li:first-child { border-top: none; }
.ora-appuntamento {
	flex-shrink: 0; width: 76px; font-size: 12.5px; font-weight: 600; color: var(--tenue);
	font-variant-numeric: tabular-nums; padding-top: 1px;
}
.dettaglio-appuntamento { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dettaglio-appuntamento .principale { font-weight: 500; }
.dettaglio-appuntamento .secondario { font-size: 12.5px; color: var(--tenue); }
.dettaglio-appuntamento .secondario a { color: inherit; }

@media (max-width: 560px) {
	.griglia-mese { padding: 4px; }
	.cella-giorno { font-size: 12px; }
}

/* ============ tutorial guidato ============ */

.tutorial-evidenza {
	outline: 3px solid var(--blu); outline-offset: 2px; border-radius: 8px;
}

/*
 * Il "fantasma" che scurisce tutto intorno all'elemento indicato: appeso al
 * body, mai dentro un riquadro - cosi' l'ombra enorme che scurisce il resto
 * della pagina non viene mai tagliata via da un overflow:hidden altrui (vedi
 * selettore-cliente.js per lo stesso problema incontrato la' e risolto in
 * modo diverso). Il centro del fantasma resta trasparente: si vede
 * l'elemento vero sotto, con il suo contorno blu.
 */
.tutorial-velo {
	position: fixed; z-index: 10000; pointer-events: none;
	box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55);
	border-radius: 8px;
	transition: top .15s ease, left .15s ease, width .15s ease, height .15s ease;
}
/* il passo "al centro" (il saluto) non indica nessun elemento: scurisce tutta la pagina, senza ritaglio */
.tutorial-velo.tutorial-velo-pieno {
	inset: 0; width: auto; height: auto; box-shadow: none; background: rgba(15, 23, 42, .55);
}
/*
 * Verde chiaro invece del solito sfondo bianco: e' quello che parla il
 * cagnolino, deve staccarsi a colpo d'occhio dal resto della pagina, non
 * confondersi con un riquadro qualunque del gestionale.
 */
.tutorial-popover {
	position: absolute; z-index: 10001; width: 280px; max-width: calc(100vw - 24px);
	background: var(--verde-chiaro); border: 2px solid #86efac; border-radius: var(--raggio);
	box-shadow: var(--ombra); padding: 14px 16px 14px 20px; margin-top: 6px;
}
.tutorial-popover.tutorial-centrato {
	position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 320px;
}

/* il cagnolino che accompagna il giro guidato, un saluto alla volta */
.tutorial-mascotte {
	position: absolute; top: -18px; left: -14px; z-index: 1;
	width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
	background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 50%;
	box-shadow: var(--ombra); font-size: 18px; line-height: 1;
	animation: tutorial-saluto 2.2s ease-in-out infinite;
}
/* nel passo di saluto (al centro, senza un elemento da indicare) e' piu'
   grande e sopra il testo, con una piccola coda: sembra che stia parlando */
.tutorial-centrato .tutorial-mascotte {
	/* il centraggio usa margin-left, non transform: la stessa proprieta' la
	   muove gia' l'animazione del saluto, e vincerebbe lei sovrascrivendolo */
	top: -32px; left: 50%; right: auto; margin-left: -26px;
	width: 52px; height: 52px; font-size: 28px;
}
.tutorial-centrato .tutorial-mascotte::after {
	content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
	width: 0; height: 0;
	border-left: 7px solid transparent; border-right: 7px solid transparent;
	border-top: 7px solid var(--bordo);
}
@keyframes tutorial-saluto {
	0%, 100% { transform: rotate(0deg) translateY(0); }
	20%      { transform: rotate(-12deg) translateY(-2px); }
	40%      { transform: rotate(4deg) translateY(0); }
	60%      { transform: rotate(-4deg) translateY(-1px); }
	80%      { transform: rotate(0deg) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.tutorial-mascotte { animation: none; }
}

.tutorial-titolo { font-weight: 700; margin-bottom: 6px; }
.tutorial-testo { font-size: 13.5px; color: var(--tenue); margin-bottom: 12px; line-height: 1.5; }
.tutorial-piede { display: flex; align-items: center; gap: 10px; }
.tutorial-conteggio { font-size: 12px; color: var(--debole); flex: 1; }
.tutorial-salta {
	background: none; border: none; color: var(--debole); font: inherit;
	cursor: pointer; padding: 6px 4px;
}
.tutorial-salta:hover { color: var(--testo); }
.tutorial-avanti {
	background: var(--blu); color: #fff; border: none; border-radius: 8px;
	padding: 7px 14px; font: inherit; font-weight: 600; cursor: pointer;
}

@media (max-width: 560px) {
	.testa-scheda .azioni { width: 100%; }
	.testa-scheda .azioni .pulsante { flex: 1; }
	.dati { grid-template-columns: 1fr; gap: 2px 0; }
	.dati dt { margin-top: 8px; }
	.dati dt:first-child { margin-top: 0; }
	.azioni-modulo .pulsante { flex: 1; }
	.griglia-campi { grid-template-columns: 1fr; padding: 14px; }
}

/* ---- azioni sugli indirizzi di spedizione ---- */
.pulsante.piccolo { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
.pulsante.pericolo { color: var(--rosso); border-color: #fca5a5; }
.pulsante.pericolo:hover { background: var(--rosso-chiaro); }
.pulsante.disabilitato { color: var(--debole); background: var(--fondale); cursor: not-allowed; }
.in-linea { display: inline; }

.indirizzi li {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
}
.dettaglio-indirizzo { min-width: 0; flex: 1; }
.azioni-riga { display: flex; gap: 6px; flex-shrink: 0; }

.spiegazione {
	margin: 0; padding: 12px 16px 0;
	font-size: 12.5px; color: var(--tenue);
}

@media (max-width: 560px) {
	.indirizzi li { align-items: stretch; }
	.azioni-riga { width: 100%; }
	.azioni-riga .pulsante, .azioni-riga form { flex: 1; }
	.azioni-riga .pulsante { width: 100%; }
}

/* ---- compilazione righe d'ordine ---- */
.righe-ordine td { padding: 6px 8px; }
.cella-input {
	width: 100%; padding: 7px 9px;
	border: 1px solid var(--bordo); border-radius: 7px;
	font-size: 13.5px; font-family: inherit; background: var(--sfondo);
	-webkit-appearance: none;
}
.cella-input:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 2px rgba(37,99,235,.14); }
.cella-input.destra { text-align: right; font-variant-numeric: tabular-nums; }
.riga-incerta .cella-input.codice { border-color: var(--rosso); }
.togli-riga {
	border: none; background: none; cursor: pointer;
	color: var(--debole); font-size: 18px; line-height: 1; padding: 4px 6px;
}
.togli-riga:hover { color: var(--rosso); }

.piede-righe {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 16px; padding: 14px 16px; border-top: 1px solid var(--bordo);
	background: #fbfcfd; flex-wrap: wrap;
}
.totali { display: flex; flex-direction: column; gap: 3px; min-width: 210px; margin-left: auto; }
.totali div { display: flex; justify-content: space-between; gap: 24px; font-size: 13px; }
.totali span { color: var(--tenue); }
.totali b { font-variant-numeric: tabular-nums; }
.totali .grande {
	font-size: 16px; font-weight: 650;
	border-top: 1px solid var(--bordo); margin-top: 5px; padding-top: 6px;
}

.campo select {
	padding: 9px 11px; border: 1px solid var(--bordo); border-radius: 8px;
	background: var(--sfondo); color: var(--testo);
	font-size: 14px; font-family: inherit; width: 100%;
}
.campo select:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(37,99,235,.13); }

.avviso-riga.informativo { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.avviso-riga.attenzione  { background: #fffbeb; border-color: #fcd34d; color: #92400e; }

/* nota sotto un campo del modulo: spiega a cosa serve senza allungare l'etichetta */
.aiuto-campo { font-size: 12px; color: var(--tenue); line-height: 1.45; }

@media (max-width: 560px) {
	.piede-righe { flex-direction: column; align-items: stretch; }
	.totali { min-width: 0; margin-left: 0; }
	.righe-ordine td { padding: 5px 4px; }
}

/* ---- tendina con ricerca ---- */
.cerca-select { position: relative; }
.select-nascosta { display: none; }
.cella-cerca {
	width: 100%; padding: 9px 11px;
	border: 1px solid var(--bordo); border-radius: 8px;
	background: var(--sfondo); color: var(--testo);
	font-size: 14px; font-family: inherit;
	-webkit-appearance: none;
}
.cella-cerca:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(37,99,235,.13); }
.risultati {
	position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
	margin: 0; padding: 4px; list-style: none;
	max-height: 280px; overflow-y: auto; -webkit-overflow-scrolling: touch;
	background: var(--sfondo); border: 1px solid var(--bordo);
	border-radius: 9px; box-shadow: 0 8px 24px rgba(15,23,42,.12);
}
.risultati li {
	padding: 8px 10px; border-radius: 6px; cursor: pointer;
	font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.risultati li:hover, .risultati li.evidenziato { background: #eff6ff; color: var(--blu); }
.risultati li.nessuno { color: var(--debole); cursor: default; font-style: italic; }
.risultati li.nessuno:hover { background: none; color: var(--debole); }

/* ---- carrello nell'elenco clienti ---- */
.cella-azione { width: 44px; padding-left: 4px; padding-right: 10px; }
.carrello {
	display: grid; place-items: center;
	width: 32px; height: 32px; border-radius: 8px;
	color: var(--tenue); position: relative; z-index: 1;
	transition: background .12s, color .12s;
}
.carrello:hover { background: var(--blu); color: #fff; }
.carrello svg { width: 17px; height: 17px; }

/* ---- scorciatoie ai clienti piu' frequenti ---- */
.pastiglie-scelta { display: flex; flex-wrap: wrap; gap: 7px; }
.scorciatoia {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 12px; border-radius: 20px;
	border: 1px solid var(--bordo); background: var(--sfondo); color: var(--testo);
	font-size: 13px; font-family: inherit; cursor: pointer; text-align: left;
	transition: border-color .12s, background .12s;
}
.scorciatoia:hover { border-color: var(--blu); background: #eff6ff; color: var(--blu); }
.scorciatoia .conteggio {
	background: var(--fondale); color: var(--tenue);
	border-radius: 10px; padding: 1px 7px; font-size: 11.5px; font-weight: 600;
}
.scorciatoia:hover .conteggio { background: #dbeafe; color: var(--blu); }
.scorciatoie label { margin-bottom: 2px; }

/* un riquadro che contiene una tendina di ricerca non deve ritagliarla */
.riquadro.con-tendina { overflow: visible; }

/* La descrizione prodotto deve restare leggibile: e' l'unica colonna senza
   larghezza fissa, quindi quando la finestra si stringe veniva schiacciata a
   170px (poco piu' della casella del codice) e il nome andava a capo tre
   volte. Con una larghezza minima la tabella deborda e scorre dentro il suo
   contenitore, invece di comprimersi. Sui telefoni si lascia andare a capo:
   li' uno scorrimento orizzontale sarebbe peggio. */
@media (min-width: 561px) {
	.righe-ordine .descrizione { min-width: 250px; }
}

/* ---- suggerimenti prodotto sul campo codice ----
   posizionati rispetto alla finestra, non dentro la tabella: quella sta in un
   contenitore che scorre e ritaglierebbe la tendina */
.suggerimenti {
	position: fixed; z-index: 60; margin: 0; padding: 4px; list-style: none;
	max-height: 300px; overflow-y: auto;
	background: var(--sfondo); border: 1px solid var(--bordo);
	border-radius: 9px; box-shadow: 0 8px 24px rgba(15,23,42,.15);
	font-size: 13.5px;
}
.suggerimenti li {
	padding: 7px 10px; border-radius: 6px; cursor: pointer;
	display: flex; align-items: baseline; gap: 8px;
}
.suggerimenti li b { font-variant-numeric: tabular-nums; color: var(--tenue); min-width: 34px; }
.suggerimenti li .categoria { margin-left: auto; font-size: 11.5px; color: var(--debole); white-space: nowrap; }
.suggerimenti li:hover, .suggerimenti li.evidenziato { background: #eff6ff; }

/* ---- listino a tendina, diviso per categoria ---- */
.velo-listino {
	position: fixed; inset: 0; z-index: 70;
	background: rgba(15,23,42,.45);
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.pannello-listino {
	background: var(--sfondo); border-radius: 14px;
	width: 100%; max-width: 620px; max-height: 85vh;
	display: flex; flex-direction: column; overflow: hidden;
	box-shadow: 0 20px 60px rgba(15,23,42,.3);
}
.pannello-listino > header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 18px; border-bottom: 1px solid var(--bordo);
}
.pannello-listino h2 { margin: 0; font-size: 15px; font-weight: 600; }
.chiudi-listino {
	border: none; background: none; font-size: 24px; line-height: 1;
	color: var(--tenue); cursor: pointer; padding: 0 4px;
}
.chiudi-listino:hover { color: var(--testo); }
.cerca-listino { padding: 12px 18px; border-bottom: 1px solid var(--bordo); }
.cerca-listino input {
	width: 100%; padding: 9px 12px; border: 1px solid var(--bordo);
	border-radius: 8px; font-size: 14px; font-family: inherit; -webkit-appearance: none;
}
.cerca-listino input:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(37,99,235,.13); }
.elenco-listino { overflow-y: auto; padding: 6px 0 12px; -webkit-overflow-scrolling: touch; }
.categoria-listino h3 {
	margin: 0; padding: 10px 18px 6px;
	font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
	color: var(--tenue); background: var(--fondale);
	position: sticky; top: 0;
}
.categoria-listino ul { list-style: none; margin: 0; padding: 0; }
.categoria-listino li {
	display: flex; align-items: baseline; gap: 10px;
	padding: 9px 18px; cursor: pointer; font-size: 13.5px;
}
.categoria-listino li:hover { background: #eff6ff; }
.categoria-listino li.aggiunto { background: var(--verde-chiaro); }
.categoria-listino .cod { font-variant-numeric: tabular-nums; color: var(--tenue); min-width: 34px; }
.categoria-listino .nome { flex: 1; min-width: 0; }
.categoria-listino .prezzo { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
	.velo-listino { padding: 0; align-items: stretch; }
	.pannello-listino { max-width: none; max-height: 100vh; border-radius: 0; }
}


/* ==========================================================================
   ELENCO ORDINI: filtri lato server, azioni di riga, paginazione
   ========================================================================== */

/* Gli ordini sono migliaia: si filtrano sul server e non nel browser come i
   clienti, quindi qui la barra e' un modulo vero che ricarica la pagina. */
.filtri-ordini { align-items: stretch; }
.filtri-ordini .filtro {
	padding: 10px 12px; border: 1px solid var(--bordo); border-radius: 9px;
	background: var(--sfondo); color: var(--testo);
	font-size: 13.5px; font-family: inherit; max-width: 190px;
	box-shadow: var(--ombra); -webkit-appearance: none;
}
.filtri-ordini .filtro:focus {
	outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(37,99,235,.13);
}
.filtri-ordini .conteggi { width: 100%; }
.filtri-ordini .conteggi strong { color: var(--testo); }

.icona-azione {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 8px;
	border: 1px solid var(--bordo); background: var(--sfondo);
	color: var(--tenue); text-decoration: none;
	font: inherit; cursor: pointer;
}
.icona-azione:hover { background: var(--blu); border-color: var(--blu); color: #fff; }
.icona-azione svg { width: 15px; height: 15px; }
.icona-azione.pericolo:hover { background: var(--rosso); border-color: var(--rosso); }
.icona-azione.successo:hover { background: var(--verde); border-color: var(--verde); }
.cella-azione .azioni-riga { justify-content: flex-end; }

.paginazione {
	display: flex; align-items: center; justify-content: center;
	gap: 14px; margin-top: 16px;
}
.paginazione .posizione { font-size: 12.5px; color: var(--tenue); }

/* Sotto le soglie in cui la colonna sparisce, il dato ricompare nella riga
   secondaria che c'e' comunque: si tolgono colonne senza perdere nulla e
   senza far crescere l'altezza della riga. */
.mostra-820, .mostra-560 { display: none; }
@media (max-width: 820px) { .mostra-820 { display: inline; } }
@media (max-width: 560px) { .mostra-560 { display: inline; } }

@media (max-width: 820px) {
	.filtri-ordini .filtro { max-width: none; flex: 1; min-width: 140px; }
}

/* Sul telefono la riga secondaria resta UNA riga: il mandante sparisce del
   tutto (si legge aprendo l'ordine) e cio' che avanza viene troncato invece di
   andare a capo. Righe alte il triplo farebbero perdere la scansione a colpo
   d'occhio, che e' l'unica cosa che rende utile un elenco di 2131 ordini. */
/* sotto i 450px restano solo cliente e totale: lo stato si legge nella riga
   secondaria, e il totale non deve mai finire fuori dallo schermo */
@media (max-width: 450px) { .nascondi-450 { display: none; } }

/* Da qui in giu' la riga secondaria porta i dati delle colonne sparite, e
   deve restare UNA riga: si tronca con i puntini invece di andare a capo,
   altrimenti la riga cresce in altezza proprio mentre si toglievano colonne
   per evitarlo. */
@media (max-width: 820px) {
	.elenco .cella-principale .secondario {
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
}

@media (max-width: 560px) {
	.elenco .mostra-820 { display: none; }
	/* Le azioni di riga stanno nella scheda dell'ordine: qui toglierebbero
	   spazio alle colonne che servono davvero. Si prende la colonna per la sua
	   classe e non con th:last-child, che nello scadenzario colpiva l'importo
	   da incassare riducendolo a zero pixel. */
	.elenco .cella-azione, .elenco th.colonna-azioni { display: none; }
}

/* anteprima del logo caricato, nelle impostazioni */
.anteprima-logo {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	padding: 10px 12px; margin-bottom: 8px;
	border: 1px solid var(--bordo); border-radius: 9px; background: var(--fondale);
}
.anteprima-logo img { max-height: 56px; max-width: 200px; }
.togli-logo { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tenue); }
.campo input[type="file"] { font-size: 13px; padding: 6px 0; }

/* etichetta con la spunta accanto, invece che sopra come nei campi di testo */
.riga-spunta { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.campo code {
	font-size: 12px; background: var(--fondale); padding: 1px 5px; border-radius: 4px;
}

/* ==========================================================================
   SCADENZARIO: scelta dei mandanti, interruttori, esportazione
   ========================================================================== */

.filtri-scadenzario { margin-bottom: 18px; }
.titolo-filtro {
	display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
	color: var(--debole); font-weight: 600; margin-bottom: 7px;
}

/* I mandanti sono pochi: stanno tutti a schermo come pastiglie da toccare,
   che su telefono si premono meglio di una select a selezione multipla. */
.pastiglie-scelta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.scelta {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 13px; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--bordo); background: var(--sfondo);
	font-size: 13px; color: var(--tenue); box-shadow: var(--ombra);
	user-select: none;
}
.scelta:hover { border-color: var(--debole); color: var(--testo); }
.scelta input { position: absolute; opacity: 0; width: 0; height: 0; }
.scelta.attiva {
	background: var(--blu); border-color: var(--blu); color: #fff; font-weight: 500;
}
.scelta .quante {
	font-size: 11px; padding: 1px 6px; border-radius: 999px;
	background: var(--fondale); color: var(--tenue);
}
.scelta.attiva .quante { background: rgba(255,255,255,.22); color: #fff; }

.riga-filtri { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* interruttore a levetta: si vede acceso o spento senza doverlo leggere */
.interruttore {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 13px; color: var(--tenue); cursor: pointer; user-select: none;
}
.interruttore input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruttore .levetta {
	width: 36px; height: 20px; border-radius: 999px; flex-shrink: 0;
	background: #cbd5e1; position: relative; transition: background .15s;
}
.interruttore .levetta::after {
	content: ''; position: absolute; top: 2px; left: 2px;
	width: 16px; height: 16px; border-radius: 50%; background: #fff;
	box-shadow: 0 1px 2px rgba(15,23,42,.25); transition: transform .15s;
}
.interruttore.acceso { color: var(--testo); font-weight: 500; }
.interruttore.acceso .levetta { background: var(--blu); }
.interruttore.acceso .levetta::after { transform: translateX(16px); }
.interruttore input:focus-visible + .levetta {
	box-shadow: 0 0 0 3px rgba(37,99,235,.25);
}

@media (max-width: 560px) {
	.riga-filtri .ricerca { min-width: 100%; }
	.riga-filtri .interruttore { width: 100%; }
	.filtri-scadenzario .pulsante { flex: 1; justify-content: center; }
}

/* ==========================================================================
   MESSAGGI: elenco della casella e lettura di un messaggio
   ========================================================================== */

.posta { list-style: none; margin: 0; padding: 0; }
.posta li { display: flex; align-items: center; }
.posta li + li { border-top: 1px solid var(--bordo); }
.posta li > a {
	flex: 1; min-width: 0;
	display: grid; align-items: baseline; gap: 10px;
	grid-template-columns: 10px minmax(120px, 200px) 1fr auto;
	padding: 12px 16px; text-decoration: none; color: var(--testo);
}
.posta .elimina-messaggio { flex: none; padding-right: 12px; }
.posta a:hover { background: var(--fondale); }
.posta .pallino {
	width: 7px; height: 7px; border-radius: 50%;
	background: transparent; align-self: center;
}
.posta .non-letto .pallino, .posta li.non-letto .pallino { background: var(--blu); }
.posta .mittente {
	font-size: 13.5px; color: var(--tenue);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.posta .oggetto {
	font-size: 13.5px; min-width: 0;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.posta .quando { font-size: 12px; color: var(--debole); white-space: nowrap; }
.posta li.non-letto .mittente,
.posta li.non-letto .oggetto { color: var(--testo); font-weight: 600; }

/* Su telefono il mittente va sopra l'oggetto: sono le due cose che si leggono,
   e affiancate a 375px resterebbero due monconi di tre parole ciascuno. */
@media (max-width: 560px) {
	.posta a {
		grid-template-columns: 10px 1fr auto;
		grid-template-areas: "pallino mittente quando" ". oggetto oggetto";
		row-gap: 3px;
	}
	.posta .pallino  { grid-area: pallino; }
	.posta .mittente { grid-area: mittente; }
	.posta .quando   { grid-area: quando; }
	.posta .oggetto  { grid-area: oggetto; }
}

/* ==========================================================================
   NOTIFICHE: elenco di messaggi, letti e non letti, piu' recenti prima
   ========================================================================== */

.notifiche-feed { list-style: none; margin: 0; padding: 0; }
.notifiche-feed li + li { border-top: 1px solid var(--bordo); }
.notifiche-feed a {
	display: grid; align-items: baseline; gap: 10px;
	grid-template-columns: 10px 1fr auto;
	padding: 12px 16px; text-decoration: none; color: var(--testo);
}
.notifiche-feed a:hover { background: var(--fondale); }
.notifiche-feed .pallino {
	width: 7px; height: 7px; border-radius: 50%;
	background: transparent; align-self: center;
}
.notifiche-feed li.non-letto .pallino { background: var(--blu); }
.notifiche-feed .testo { font-size: 13.5px; }
.notifiche-feed .quando { font-size: 12px; color: var(--debole); white-space: nowrap; }
.notifiche-feed li.non-letto .testo { color: var(--testo); font-weight: 600; }

.corpo-messaggio { padding: 16px; overflow-x: auto; }
.testo-semplice {
	margin: 0; font-family: inherit; font-size: 13.5px; line-height: 1.6;
	white-space: pre-wrap; word-break: break-word;
}
.html-messaggio { font-size: 13.5px; line-height: 1.6; }
.html-messaggio table { max-width: 100%; }
.html-messaggio a { color: var(--blu); }
.immagine-tolta {
	display: inline-block; padding: 1px 7px; border-radius: 5px;
	background: var(--fondale); color: var(--debole); font-size: 11.5px;
}

.allegati { list-style: none; margin: 0; padding: 0; }
.allegati li {
	display: flex; align-items: center; gap: 10px;
	padding: 11px 16px; font-size: 13.5px;
}
.allegati li + li { border-top: 1px solid var(--bordo); }
.allegati svg { width: 16px; height: 16px; color: var(--debole); flex-shrink: 0; }
.allegati .nome { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.allegati .dettaglio { font-size: 12px; color: var(--debole); margin-left: auto; white-space: nowrap; }

/* ==========================================================================
   ACCESSO: pagina di login, senza barra laterale ne' testata
   ========================================================================== */

.corpo-accesso {
	display: flex; align-items: center; justify-content: center;
	min-height: 100vh; padding: 24px;
	background: var(--fondale);
}
.scheda-accesso {
	width: 100%; max-width: 380px;
	background: var(--sfondo); border: 1px solid var(--bordo); border-radius: var(--raggio);
	box-shadow: 0 4px 24px rgba(15,23,42,.08);
	padding: 32px 28px;
}
.marchio-accesso { text-align: center; margin-bottom: 24px; }
.marchio-accesso img { max-width: 300px; width: 100%; height: auto; }
.marchio-licenza img { max-width: 460px; }

/* ============ pagina pubblica generica (es. licenza d'uso) ============ */

.scheda-pubblica {
	width: 100%; max-width: 720px;
	background: var(--sfondo); border: 1px solid var(--bordo); border-radius: var(--raggio);
	box-shadow: 0 4px 24px rgba(15,23,42,.08);
	padding: 32px 40px;
}
.torna-pubblica { margin: 24px 0 0; font-size: 13px; }
.torna-pubblica a { color: var(--blu); text-decoration: none; }
.torna-pubblica a:hover { text-decoration: underline; }

.testo-licenza h1 { font-size: 20px; margin: 0 0 4px; }
.testo-licenza .aggiornato-il { font-size: 12.5px; color: var(--debole); margin: 0 0 20px; }
.testo-licenza h2 { font-size: 15px; margin: 22px 0 8px; }
.testo-licenza p { font-size: 13.5px; line-height: 1.65; margin: 0 0 12px; color: var(--tenue); }
.testo-licenza ul { margin: 0 0 12px; padding-left: 20px; }
.testo-licenza li { font-size: 13.5px; line-height: 1.65; color: var(--tenue); margin-bottom: 6px; }
.testo-licenza strong { color: var(--testo); }
.testo-licenza a { color: var(--blu); }

@media (max-width: 560px) {
	.scheda-pubblica { padding: 26px 22px; }
}

.modulo-accesso { display: flex; flex-direction: column; gap: 16px; }
.modulo-accesso .campo { display: flex; flex-direction: column; gap: 5px; }
.modulo-accesso label { font-size: 12.5px; color: var(--tenue); font-weight: 500; }
.modulo-accesso input {
	padding: 11px 13px; border: 1px solid var(--bordo); border-radius: 9px;
	background: var(--sfondo); color: var(--testo);
	font-size: 15px; font-family: inherit; width: 100%;
	-webkit-appearance: none;
}
.modulo-accesso input:focus {
	outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(37,99,235,.13);
}
.modulo-accesso .pulsante.primario { width: 100%; padding: 11px; font-size: 14.5px; }

/* la foto profilo prende il posto delle iniziali nella stessa pastiglia tonda */
.utente img.iniziali { object-fit: cover; }
/* il logout e' un <button> dentro un form, non un <a>: si toglie lo stile
   di default del bottone per farlo combaciare con le altre icone in testata */
button.icona-testata {
	border: none; background: none; padding: 0; font: inherit; cursor: pointer;
}

/* ==========================================================================
   PROFILO: colonna laterale, anteprima della foto, elenco accessi
   ========================================================================== */

.colonna-laterale { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* la foto profilo e' tonda, non un rettangolo come il logo: stessa cornice
   .anteprima-logo, dimensione diversa data dalla classe piu' specifica */
.anteprima-foto-profilo {
	width: 64px; height: 64px; border-radius: 50%;
	object-fit: cover; max-height: none !important; max-width: none !important;
}

.elenco-accessi { list-style: none; margin: 0; padding: 0; }
.elenco-accessi li {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 10px 16px; font-size: 13px;
}
.elenco-accessi li + li { border-top: 1px solid var(--bordo); }
.elenco-accessi .secondario { color: var(--debole); font-size: 12px; font-variant-numeric: tabular-nums; }