/* Pagina di controllo — leggibile sul telefono, comoda sullo schermo grande */

.tb-ctrl {
	max-width: 1180px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.5;
	color: #1d2327;
}

.tb-ctrl * { box-sizing: border-box; }

.tb-ctrl-testa {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .6rem 0;
	border-bottom: 1px solid #e2e4e7;
}
.tb-ctrl-titolo { font-weight: 700; font-size: 1.1em; margin-right: .6rem; }
.tb-ctrl-utente { color: #646970; font-size: .9em; }

.tb-ctrl-tab { display: flex; flex-wrap: wrap; gap: .3rem; margin: .9rem 0 1.2rem; }
.tb-ctrl-tab a {
	padding: .6rem 1rem;
	background: #f0f0f1;
	border-radius: 8px;
	text-decoration: none;
	color: #2c3338;
	font-size: .95em;
}
.tb-ctrl-tab a.attivo { background: #1d4ed8; color: #fff; font-weight: 600; }
.tb-pallino {
	display: inline-block;
	min-width: 1.4em;
	padding: 0 .35em;
	margin-left: .3em;
	background: #d63638;
	color: #fff;
	border-radius: 999px;
	font-size: .78em;
	text-align: center;
}

.tb-h2 { font-size: 1.35em; margin: .4rem 0 .2rem; }
.tb-h3 { font-size: 1.05em; margin: 1.6rem 0 .5rem; }
.tb-sottotitolo { color: #646970; margin: 0 0 1rem; font-size: .94em; }
.tb-briciole { margin: .6rem 0; }
.tb-conta { color: #646970; font-weight: 400; font-size: .85em; }

.tb-kpi { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0 1.2rem; }
.tb-kpi-box {
	flex: 1 1 150px;
	padding: .8rem .9rem;
	background: #fff;
	border: 1px solid #dcdcde;
	border-left: 4px solid #1d4ed8;
	border-radius: 8px;
}
.tb-kpi-eti { display: block; font-size: .76em; text-transform: uppercase; letter-spacing: .05em; color: #646970; }
.tb-kpi-val { display: block; font-size: 1.45em; font-weight: 700; line-height: 1.3; }
.tb-kpi-sub { display: block; font-size: .8em; color: #646970; }
.tb-kpi-box.tb-verde { border-left-color: #00a32a; }
.tb-kpi-box.tb-rosso { border-left-color: #d63638; }

.tb-scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tb-griglia { width: 100%; border-collapse: collapse; font-size: .92em; min-width: 520px; }
.tb-griglia th, .tb-griglia td { padding: .55rem .5rem; border-bottom: 1px solid #ececee; text-align: left; vertical-align: top; }
.tb-griglia thead th { background: #f6f7f7; font-size: .82em; text-transform: uppercase; letter-spacing: .03em; color: #50575e; white-space: nowrap; }
.tb-griglia tfoot th { background: #f6f7f7; border-top: 2px solid #dcdcde; }
.tb-griglia .tb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-griglia-budget { min-width: 420px; }
.tb-griglia-budget input { width: 8rem; padding: .45rem; text-align: right; border: 1px solid #8c8f94; border-radius: 6px; font-size: 16px; }

.tb-sotto { display: block; font-size: .85em; color: #646970; }
.tb-grigio { color: #8c8f94; }
.tb-allerta { display: block; color: #b32d2e; font-size: .84em; font-weight: 600; }
.tb-piccolo { font-size: .85em; color: #646970; }
td.tb-rosso, th.tb-rosso, .tb-rosso strong { color: #b32d2e; }
td.tb-verde, th.tb-verde { color: #007017; }
td.tb-giallo { color: #8a6116; }

.tb-stato { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8em; background: #f0f0f1; white-space: nowrap; }
.tb-stato-in_corso { background: #fcf9e8; color: #8a6116; }
.tb-stato-preventivo { background: #f0f0f1; color: #50575e; }
.tb-stato-sospesa { background: #fdf3e7; color: #8a4116; }
.tb-stato-chiusa, .tb-stato-fatturata { background: #edfaef; color: #007017; }

.tb-msg-avviso { background: #fcf9e8; border-left: 4px solid #dba617; }

.tb-ctrl-filtri { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .8rem 0; }
.tb-ctrl-filtri input, .tb-ctrl-filtri select {
	padding: .55rem .6rem; font-size: 16px; border: 1px solid #8c8f94; border-radius: 8px; background: #fff;
}
.tb-ctrl-filtri label { font-size: .88em; color: #50575e; }

.tb-riga-azioni { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: space-between; }

.tb-schede { list-style: none; margin: .5rem 0; padding: 0; }
.tb-scheda { border: 1px solid #dcdcde; border-radius: 10px; margin-bottom: .7rem; background: #fff; overflow: hidden; }
.tb-scheda-testa {
	display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center;
	padding: .7rem .9rem; background: #fafafa; cursor: pointer;
}
.tb-scheda-testa input { width: 1.15rem; height: 1.15rem; }
.tb-scheda-chi { font-weight: 600; }
.tb-scheda-quando { color: #646970; font-size: .9em; }
.tb-scheda-ore { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.tb-scheda-corpo { padding: .6rem .9rem .8rem; }
.tb-voce { padding: .35rem 0; border-bottom: 1px dotted #ececee; font-size: .93em; }
.tb-voce:last-child { border-bottom: 0; }
.tb-voce strong { display: block; }
.tb-voce span, .tb-voce em { margin-right: .6rem; }

.tb-seleziona-tutti { display: inline-block; margin: .3rem 0 .6rem; font-size: .9em; color: #50575e; }
.tb-decisione { padding: .9rem; background: #f6f7f7; border-radius: 10px; margin-bottom: 1.5rem; }
.tb-decisione label { display: block; font-size: .9em; color: #50575e; }
.tb-decisione textarea { width: 100%; padding: .6rem; font-size: 16px; border: 1px solid #8c8f94; border-radius: 8px; margin-top: .25rem; }
.tb-decisione .tb-bottoni { margin-top: .7rem; }

.tb-persone { list-style: none; margin: .3rem 0; padding: 0; }
.tb-persone li { display: flex; gap: .8rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid #f0f0f1; font-size: .95em; }
.tb-persona-nome { flex: 1; }
.tb-persona-ore { font-weight: 600; font-variant-numeric: tabular-nums; }
.tb-persona-gg { color: #646970; font-size: .88em; min-width: 6rem; text-align: right; }

.tb-caselle { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; padding: .8rem; background: #fafafa; border: 1px solid #dcdcde; border-radius: 8px; }

.tb-form-commessa .tb-campo { margin-bottom: .8rem; }
.tb-form-commessa input[type=text], .tb-form-commessa input[type=date], .tb-form-commessa select {
	width: 100%; padding: .6rem; font-size: 16px; border: 1px solid #8c8f94; border-radius: 8px; background: #fff;
}

/*
 * I riquadri dei conteggi (sopralluoghi, banco prove).
 *
 * Le classi c'erano dalla 1.12.0 ma il foglio di stile no: uscivano come una
 * fila di link sottolineati in mezzo al testo, e nessuno li leggeva come
 * filtri. Sono due viste diverse a usarli, quindi il difetto era doppio.
 */
.tb-riquadri {
	display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.2rem;
}
.tb-riquadro {
	flex: 1 1 8rem; min-width: 7rem;
	display: block; padding: .7rem .9rem;
	background: #fff; border: 1px solid #dcdcde; border-radius: 8px;
	text-decoration: none; color: inherit;
}
.tb-riquadro:hover { border-color: #2271b1; }
.tb-riquadro.attivo { border-color: #2271b1; box-shadow: inset 0 0 0 1px #2271b1; background: #f0f6fc; }
.tb-riquadro-numero { display: block; font-size: 1.5em; font-weight: 700; line-height: 1.1; }
.tb-riquadro-eti { display: block; font-size: .82em; color: #50575e; margin-top: .15rem; }

/* --------------------------------------------- documenti della commessa

   In cima quello che vale adesso. E' la domanda con cui si apre questa pagina
   prima di andare in cantiere: qual e' il file che mi porto dietro. */

.tb-documenti { list-style: none; margin: .5rem 0 1rem; padding: 0; }
.tb-documenti li { padding: .7rem .9rem; margin-bottom: .5rem; border: 1px solid #dcdcde; border-left: 4px solid #2271b1; border-radius: 8px; background: #fff; }
.tb-documenti a { text-decoration: none; }
.tb-documenti a strong { display: block; }
.tb-doc-nome { display: block; font-size: .9em; word-break: break-all; }
.tb-doc-riga { display: block; margin-top: .25rem; font-size: .82em; color: #646970; }
.tb-doc-nota { display: block; margin-top: .2rem; font-size: .88em; color: #1d2327; font-style: italic; }

/* Le versioni vecchie non sono la risposta alla domanda: restano, ma di lato. */
.tb-documenti-vecchi li { border-left-color: #c3c4c7; background: #fbfbfc; }
.tb-doc-storia { margin: -.4rem 0 1.4rem; font-size: .9em; }
.tb-doc-storia summary { cursor: pointer; color: #50575e; }

.tb-form-doc { max-width: 820px; margin: .4rem 0 1.8rem; padding: .9rem 1rem; border: 1px dashed #c3c4c7; border-radius: 8px; }

/* Le foto raccolte nella scheda della commessa: qui si guardano davvero, quindi
   piu' grandi, e ognuna dice di che giorno e' e chi l'ha fatta. */
.tb-foto-commessa { list-style: none; display: grid; grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) ); gap: .9rem; margin: .6rem 0 1.5rem; padding: 0; }
.tb-foto-commessa img { display: block; width: 100%; height: 130px; object-fit: cover; border-radius: 6px; border: 1px solid #dcdcde; background: #f0f0f1; }
.tb-foto-quando { display: block; margin-top: .3rem; font-size: .82em; color: #50575e; }

/* Le foto di prova nelle schede di approvazione. Piccole: servono a vedere se
   c'e' qualcosa e ad aprirla, non a essere guardate da qui. */
.tb-foto-prova { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 0; padding: 0; }
.tb-foto-prova img { display: block; width: 76px; height: 76px; object-fit: cover; border-radius: 5px; border: 1px solid #dcdcde; background: #f0f0f1; }

/* Il buco si dice. Grigio, non rosso: la foto non e' obbligatoria, e allarmare
   per una cosa che non lo e' insegna solo a non guardare piu' gli allarmi. */
.tb-senza-foto { display: inline-block; margin-top: .3rem; font-size: .82em; color: #8c8f94; font-style: italic; }

/* L'unica uscita di una pagina a scopo unico: discreta, ma c'e'. */
.tb-ctrl-uscita { margin: 2.5rem 0 0; font-size: .92em; }
.tb-ctrl-uscita a { color: #50575e; text-decoration: none; }
.tb-ctrl-uscita a:hover { color: #2271b1; text-decoration: underline; }

.tb-ctrl-piede { margin-top: 2.5rem; padding-top: .8rem; border-top: 1px solid #e2e4e7; font-size: .85em; color: #646970; }

@media (max-width: 600px) {
	.tb-kpi-box { flex-basis: 45%; }
	.tb-scheda-ore { margin-left: 0; width: 100%; }
}

/* Home del gestionale */

.tb-benvenuto { color: #646970; margin: .2rem 0 1.2rem; }

.tb-schede-home {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(238px, 1fr) );
	gap: .75rem;
	margin-bottom: 1.5rem;
}
/*
 * Le tessere della pagina iniziale.
 *
 * Erano ventuno rettangoli tutti uguali con un filetto colorato a sinistra:
 * si leggevano una per una, e la riga di stato in fondo — quella che
 * dice «2 rapportini», «1 in scadenza» — era piccola e maiuscola come
 * tutto il resto, cioe' invisibile.
 *
 * Tre cose la cambiano, e nessuna sposta niente di posto:
 *
 * 1. **Un'icona in un bollo tondo**, che da' alla tessera una faccia
 *    riconoscibile da lontano: si torna su «Mezzi» cercando il furgone, non
 *    rileggendo ventuno titoli.
 * 2. **Il numero grosso.** La cifra e' il motivo per cui si guarda una
 *    tessera; le parole intorno spiegano, ma vengono dopo.
 * 3. **Il rosso solo dove serve.** Il filetto blu a sinistra c'era su tutte e
 *    non voleva dire piu' niente. Adesso la tessera tranquilla e' bianca e
 *    quieta, e quella che chiede qualcosa si accende: bollo rosso, cifra
 *    rossa, un filo di colore sul bordo. Su ventuno tessere se ne accendono
 *    tre o quattro, e quelle sono le tre o quattro che contano.
 */
.tb-scheda-home {
	/* Colonna, non blocco: cosi' la riga di stato si appoggia in fondo alla
	   tessera e i filetti di separazione di una stessa fila risultano
	   incolonnati anche quando le descrizioni sono lunghe una riga di piu'. */
	display: flex;
	flex-direction: column;
	position: relative;
	padding: .95rem 1rem 1rem;
	background: #fff;
	border: 1px solid #e3e4e6;
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tb-scheda-home:hover {
	border-color: #c3c9d4;
	box-shadow: 0 6px 18px rgba(15,23,42,.08);
	transform: translateY(-1px);
}
.tb-scheda-home:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }

/* Il bollo con l'icona. Il colore lo prende l'SVG da qui, con currentColor. */
.tb-scheda-bollo {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.1rem; height: 2.1rem; margin-bottom: .55rem;
	border-radius: 9px;
	background: #eef2fb; color: #1d4ed8;
}
.tb-ico { width: 1.15rem; height: 1.15rem; display: block; }

.tb-scheda-nome { display: block; font-weight: 700; font-size: 1.04em; margin-bottom: .15rem; letter-spacing: -.005em; }
.tb-scheda-testo { display: block; font-size: .875em; color: #5b6270; line-height: 1.45; margin-bottom: .6rem; }
/*
 * La riga di stato si appoggia in fondo alla tessera (`margin-top: auto`), non
 * subito sotto la descrizione: cosi' in una fila le righe si leggono
 * scorrendo, invece di ballare a mezz'aria ognuna alla sua altezza.
 *
 * Ed e' una riga a base comune (`baseline`), non due pezzi impilati: il numero
 * grosso e le parole piccole appoggiano sulla stessa linea, come una cifra
 * scritta a mano seguita da cosa conta.
 */
.tb-scheda-nota {
	display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap;
	margin-top: auto; padding-top: .55rem;
	border-top: 1px solid #f0f1f3;
	font-size: .82em; color: #6b7280; line-height: 1.35;
}
/* La cifra: grossa, allineata come i numeri di una tabella, cosi' due tessere
   vicine hanno le unita' incolonnate invece che a caso. */
/* `line-height: 1` sulla cifra: senza, il numero grosso alza da solo la riga
   di un paio di pixel e in una fila i filetti non tornano piu' pari. */
.tb-scheda-cifra {
	font-size: 1.5em; font-weight: 700; color: #1f2937;
	font-variant-numeric: tabular-nums; letter-spacing: -.02em;
	line-height: 1;
}

/* Quella che chiede qualcosa. */
.tb-scheda-home.tb-urgente { border-color: #f3c9ca; background: #fffdfd; }
.tb-scheda-home.tb-urgente:hover { border-color: #d63638; box-shadow: 0 6px 18px rgba(214,54,56,.14); }
.tb-urgente .tb-scheda-bollo { background: #fdecec; color: #c0292b; }
.tb-urgente .tb-scheda-nota { color: #a02224; }
.tb-urgente .tb-scheda-cifra { color: #b32d2e; }

/* La tessera che porta fuori dal gestionale: sobria, non spenta. */
.tb-scheda-home.tb-scheda-fuori { background: #fafafa; }
.tb-scheda-fuori .tb-scheda-bollo { background: #ececef; color: #5b6270; }

/* Collaboratori e costi orari */
.tb-storico-lista { margin: 0 0 .5rem; padding-left: 1.1rem; font-size: .88em; color: #50575e; }
.tb-storico-lista li { margin: .1rem 0; }
.tb-togli-costo { color: #b32d2e; font-size: .9em; margin-left: .4rem; }
.tb-costo-nuovo { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tb-costo-nuovo input {
	padding: .45rem; font-size: 15px; border: 1px solid #8c8f94; border-radius: 6px; background: #fff;
}
.tb-costo-nuovo button { padding: .45rem .8rem; font-size: 15px; }

/* Le due caselle del costo erano nude, una accanto all'altra: la prima chiede
   quanto ci costa l'ora, la seconda di quanto si moltiplica lo straordinario.
   Senza un'etichetta sopra sembrano due costi, e nel modulo e' finito il costo
   in tutte e due. Ora ognuna dice cosa vuole. */
.tb-eti-costo { display: flex; flex-direction: column; gap: .1rem; }
.tb-eti-costo > span { font-size: 10.5px; color: #50575e; letter-spacing: .02em; }
.tb-magg-strana { display: inline-block; margin-top: .15rem; color: #8a2b2b; line-height: 1.4; }

/* Trascrizione dei fogli di carta */
.tb-tre { display: flex; flex-wrap: wrap; gap: .6rem; }
.tb-tre .tb-campo { flex: 1 1 180px; margin-bottom: .6rem; }
.tb-tre .tb-campo.tb-stretto { flex: 0 0 88px; }
.tb-riga-trascritta {
	border: 1px solid #dcdcde; border-radius: 10px;
	padding: .8rem .9rem .3rem; margin-bottom: .7rem; background: #fbfbfc;
}
.tb-riga-trascritta select, .tb-riga-trascritta input {
	width: 100%; padding: .5rem; font-size: 16px;
	border: 1px solid #8c8f94; border-radius: 6px; background: #fff;
}

/* Il foglio da stampare */
.tb-foglio {
	border: 1px solid #1d2327;
	border-radius: 4px;
	padding: .7rem .8rem;
	margin-bottom: 1.2rem;
	background: #fff;
	page-break-inside: avoid;
	font-size: 12px;
	color: #000;
}
.tb-foglio-testa { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: .6rem; }
.tb-foglio-testa strong { display: block; font-size: 14px; letter-spacing: .06em; }
.tb-foglio-testa span { font-size: 11px; color: #333; }

/* La carta intestata: una riga per cosa, e niente buco sotto il nome.
   Il <strong> e' gia' a blocco, quindi va a capo da solo: il <br> che c'era
   dopo aggiungeva una seconda andata a capo e lasciava una riga vuota fra la
   ragione sociale e la via. Qui il nome respira di un pelo, non di una riga. */
.tb-foglio-mittente { line-height: 1.45; }
.tb-foglio-testa .tb-foglio-mittente strong { margin-bottom: .12rem; }
.tb-mitt-riga { display: block; }
/* Telefono ed email staccati dall'indirizzo: sono un'altra cosa, e su carta si
   cercano da soli. */
.tb-mitt-rec { margin-top: .22rem; }
.tb-foglio-righe-testa { display: flex; gap: 1.2rem; }
.tb-foglio-righe-testa label { font-size: 11px; white-space: nowrap; }
.tb-linea { display: inline-block; width: 220px; border-bottom: 1px solid #555; height: 1em; vertical-align: bottom; }
.tb-linea.tb-corta { width: 110px; }

.tb-foglio-tabella { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.tb-foglio-tabella th {
	border: 1px solid #555; padding: .25rem .3rem;
	font-size: 10px; text-transform: uppercase; letter-spacing: .03em;
	background: #f0f0f0; text-align: left; font-weight: 600;
}
.tb-foglio-tabella td { border: 1px solid #555; height: 1.85rem; padding: .1rem .3rem; }
.tb-foglio-spese th { background: #fafafa; }
.tb-foglio-piede { display: flex; justify-content: space-between; font-size: 10px; color: #333; margin-top: .2rem; }
.tb-foglio-commesse { margin-top: .5rem; padding-top: .35rem; border-top: 1px dotted #999; font-size: 9.5px; color: #333; line-height: 1.4; }

@media print {
	/*
	 * ATTENZIONE: qui c'era `header, footer, nav` senza limiti.
	 *
	 * Serviva a togliere di mezzo il menu del tema in stampa, e ci riusciva —
	 * ma la carta intestata dei nostri documenti e' anche lei un <header>, e
	 * spariva insieme al resto. Su carta uscivano preventivi, ordini, relazioni
	 * e note spese **senza intestazione ne' logo**, mentre a schermo si vedevano
	 * benissimo: il difetto si notava solo dopo aver stampato.
	 *
	 * Ora si nomina solo la roba del tema, e i fogli hanno un `div` invece di un
	 * `header` — due protezioni, perche' questa e' costata una figura con un
	 * cliente vero.
	 */
	.tb-non-stampare, .tb-ctrl-testa, .tb-ctrl-tab, .tb-ctrl-piede,
	body > header, body > footer, body > nav,
	.wp-site-blocks > header, .wp-site-blocks > footer, .wp-site-blocks > nav,
	.wp-block-template-part, #wpadminbar { display: none !important; }

	/* E comunque: quello che sta dentro il foglio si stampa, punto. */
	.tb-foglio, .tb-foglio * { display: revert !important; visibility: visible !important; }
	/*
	 * `display: revert` di sopra rimette **ogni** figlio al suo valore
	 * predefinito, e per un <div> quel valore e' `block`: le poche cose che qui
	 * dentro sono in riga vanno riaffermate una per una, o in stampa si
	 * impilano. E' successo con l'intestazione e poi di nuovo con le firme —
	 * che sullo schermo erano affiancate e sul foglio uscivano in colonna.
	 */
	.tb-foglio .tb-foglio-testa,
	.tb-foglio .tb-foglio-firme,
	.tb-foglio .tb-foglio-righe-testa { display: flex !important; }
	/*
	 * E la riga su cui si firma e' uno <span>: rimesso a `inline` non prende
	 * ne' il margine sopra ne' il bordo sotto, e sul foglio stampato spariva —
	 * restavano le scritte «Il trasportatore» e «Il cliente» sospese sul nulla.
	 * Sullo schermo si vedeva benissimo, ed e' il motivo per cui non se n'era
	 * accorto nessuno.
	 */
	.tb-foglio .tb-foglio-linea { display: block !important; }
	/* Stessa storia per le righe corte in mezzo al testo — «Data e ora fine
	   trasporto ______» — che sono span in linea con un bordo sotto. */
	.tb-foglio .tb-linea { display: inline-block !important; }
	/*
	 * E la carta intestata cade nella stessa trappola: `display: revert` rimette
	 * il <strong> della ragione sociale in linea e gli span delle righe pure.
	 * Sullo schermo l'intestazione e' impeccabile, su carta esce tutta
	 * appiccicata su una riga sola — nome, via, partita IVA e telefono di
	 * seguito. Vale la pena ripeterlo: **ogni blocco dentro `.tb-foglio` va
	 * riaffermato qui**, o in stampa non esiste.
	 */
	.tb-foglio .tb-foglio-mittente strong,
	.tb-foglio .tb-mitt-riga { display: block !important; }
	.tb-ctrl { max-width: none; margin: 0; }
	.tb-foglio { border-color: #000; margin-bottom: .6rem; }
	@page { margin: 10mm; }
}

/* ---------------------------------------------------------------- magazzino */

/* Il sotto-menu del magazzino. La barra in alto era già piena: sei voci in più
   la rendevano illeggibile sul telefono. */
.tb-sottotab {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin: 0 0 1.1rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid #ececee;
}
.tb-sottotab a {
	padding: .35rem .75rem;
	border-radius: 999px;
	text-decoration: none;
	color: #50575e;
	font-size: .9em;
}
.tb-sottotab a:hover { background: #f0f0f1; }
.tb-sottotab a.attivo { background: #1d4ed8; color: #fff; font-weight: 600; }

.tb-griglia td.tb-rosso   { color: #b32d2e; font-weight: 700; }
.tb-griglia td.tb-arancio { color: #b26200; font-weight: 600; }
.tb-griglia td.tb-verde   { color: #007017; }

.tb-blocco {
	margin: 1.6rem 0;
	padding: 1rem 1rem .6rem;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 10px;
}
.tb-blocco > .tb-h3 { margin-top: 0; }

/* Un bottone che deve sembrare un link: sta dentro una frase e non deve pesare
   quanto un pulsante vero. */
.tb-link-bottone {
	background: none;
	border: 0;
	padding: 0;
	color: #1d4ed8;
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
}

.tb-campo-riga { flex-direction: row; align-items: center; gap: .5rem; }
.tb-campo-riga input[type="checkbox"] { width: auto; margin: 0; }

/* Le righe della bolla: campi stretti dentro la tabella, senza bordi che
   raddoppiano quelli delle celle. */
.tb-righe-carico input, .tb-righe-carico select {
	width: 100%;
	padding: .35rem .4rem;
	font-size: .95em;
}
.tb-righe-carico input.tb-num { text-align: right; }
.tb-righe-carico td { padding: .25rem .3rem; }

/* La scelta dei pezzi con il numero di serie. */
.tb-seriali-scelta {
	max-height: 15rem;
	overflow-y: auto;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: .4rem .6rem;
	background: #fff;
}
.tb-seriale { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; font-size: .95em; }
.tb-seriale input { width: auto; margin: 0; }
.tb-stato-pezzo { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .78em; }
.tb-stato-magazzino  { background: #edfaef; color: #007017; }
.tb-stato-installato { background: #eaf1ff; color: #1d4ed8; }
.tb-stato-guasto     { background: #fdeaea; color: #b32d2e; }
.tb-stato-reso       { background: #f0f0f1; color: #50575e; }

/* Il campo che ha fatto fallire l'invio: si deve vedere da lontano. */
.tb-campo-manca {
	border-color: #d63638 !important;
	box-shadow: 0 0 0 2px rgba( 214, 54, 56, .15 );
}
.tb-msg-manca { margin-bottom: 1rem; }

/* --------------------------------------------------------------- preventivi */

.tb-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
@media (max-width: 700px) { .tb-tre { grid-template-columns: 1fr; } }

.tb-righe-preventivo td { padding: .2rem .25rem; vertical-align: middle; }
.tb-righe-preventivo input, .tb-righe-preventivo select, .tb-righe-preventivo textarea {
	width: 100%;
	padding: .3rem .35rem;
	font-size: .93em;
}
.tb-righe-preventivo textarea { resize: vertical; min-height: 2.1rem; line-height: 1.35; }
.tb-righe-preventivo input.tb-num { text-align: right; }
.tb-righe-preventivo .tb-importo { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Le righe che non fanno totale si devono distinguere a colpo d'occhio, o si
   finisce per cercare l'errore nella somma. */
.tb-righe-preventivo tr.tb-riga-sezione textarea { font-weight: 700; text-transform: uppercase; background: #f6f7f7; }
.tb-righe-preventivo tr.tb-riga-descrizione textarea { font-style: italic; color: #50575e; }
.tb-righe-preventivo tr.tb-riga-sezione .tb-q,
.tb-righe-preventivo tr.tb-riga-sezione .tb-p,
.tb-righe-preventivo tr.tb-riga-sezione .tb-s,
.tb-righe-preventivo tr.tb-riga-descrizione .tb-q,
.tb-righe-preventivo tr.tb-riga-descrizione .tb-p,
.tb-righe-preventivo tr.tb-riga-descrizione .tb-s { visibility: hidden; }

.tb-maniglie { white-space: nowrap; width: 4.6em; }
.tb-maniglie button {
	background: none; border: 0; cursor: pointer;
	color: #787c82; padding: 0 .1rem; font-size: .95em; line-height: 1;
}
.tb-maniglie button:hover { color: #1d4ed8; }

.tb-totali { font-size: 1.05em; line-height: 1.9; }
.tb-totali strong { font-variant-numeric: tabular-nums; }

.tb-stato-prev-bozza     { background: #f0f0f1; color: #50575e; }
.tb-stato-prev-inviato   { background: #eaf1ff; color: #1d4ed8; }
.tb-stato-prev-accettato { background: #edfaef; color: #007017; }
.tb-stato-prev-rifiutato { background: #fdeaea; color: #b32d2e; }
.tb-stato-prev-scaduto   { background: #fff4e5; color: #b26200; }

/* ------------------------------------------------- il foglio del preventivo */

.tb-foglio {
	background: #fff;
	color: #1d2327;
	padding: 2.2rem 2rem;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	max-width: 780px;
	margin: 1rem auto;
	font-size: .95em;
}
.tb-foglio-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.tb-foglio-mittente { line-height: 1.5; }
.tb-foglio-destinatario { line-height: 1.5; text-align: right; min-width: 15rem; }
.tb-foglio-eti { display: block; font-size: .8em; color: #646970; }
.tb-foglio-titolo { font-size: 1.5em; margin: 2rem 0 .2rem; }
.tb-foglio-riga { color: #646970; margin: 0 0 1.2rem; }
.tb-foglio-oggetto { margin: 0 0 1.4rem; }

.tb-foglio-voci { width: 100%; border-collapse: collapse; }
.tb-foglio-voci th {
	text-align: left; font-size: .78em; text-transform: uppercase; letter-spacing: .04em;
	color: #50575e; border-bottom: 2px solid #1d2327; padding: .35rem .4rem;
}
.tb-foglio-voci td { padding: .45rem .4rem; border-bottom: 1px solid #ececee; vertical-align: top; }
.tb-foglio-voci .tb-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-foglio-sezione td { font-weight: 700; background: #f6f7f7; letter-spacing: .04em; }
.tb-foglio-testo td { color: #50575e; font-size: .93em; }

.tb-foglio-totali { margin-left: auto; margin-top: 1.2rem; border-collapse: collapse; min-width: 16rem; }
.tb-foglio-totali td { padding: .3rem .5rem; }
.tb-foglio-totali .tb-num { text-align: right; font-variant-numeric: tabular-nums; }
.tb-foglio-totale td { border-top: 2px solid #1d2327; font-weight: 700; font-size: 1.1em; }

.tb-foglio-scadenza { margin-top: 1rem; font-size: .9em; color: #1d2327; }

.tb-foglio-acorpo { margin: .8rem 0 0; font-size: .88em; color: #50575e; font-style: italic; }

.tb-foglio-condizioni { margin-top: 2rem; font-size: .9em; color: #50575e; line-height: 1.6; }
.tb-foglio-condizioni strong { display: block; color: #1d2327; margin-bottom: .3rem; }
.tb-foglio-firme { display: flex; justify-content: space-between; gap: 3rem; margin-top: 3.5rem; font-size: .9em; }
.tb-foglio-linea { display: block; margin-top: 2.2rem; border-bottom: 1px solid #8c8f94; width: 13rem; }

/* I riquadri delle firme, quando un documento le porta, non si allargano
   oltre il necessario. */
.tb-foglio-firme > div { flex: 0 1 auto; }

/* ------------------------------------------------- sopralluoghi: la scheda */

/* Le foto sono la parte che conta e vanno guardate, non elencate: griglia
   larga, miniature grandi abbastanza da capire cosa hai fotografato. */
.tb-foto-sop { list-style: none; margin: 0 0 1rem; padding: 0;
	display: grid; grid-template-columns: repeat( auto-fill, minmax( 190px, 1fr ) ); gap: 1rem; }
.tb-foto-sop li { border: 1px solid #dcdcde; border-radius: 6px; padding: .5rem; background: #fff; }
.tb-foto-sop img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 4px; background: #f0f0f1; }
.tb-foto-sop input[type="text"] { width: 100%; margin-top: .45rem; font-size: .9em; }

/* «Resta fra noi» deve saltare all'occhio: e' l'unica cosa che decide se una
   riga finisce sotto gli occhi del cliente o no. */
.tb-sop-interna { display: block; margin-top: .35rem; font-size: .82em; color: #b26200; }
.tb-sop-interna input { margin-right: .3rem; }

/* La casella «resta fra noi» decide se una riga finisce sotto gli occhi del
   cliente: dev'essere grande abbastanza da centrarla col pollice al primo colpo,
   e cliccabile anche sulla scritta. */
.tb-cella-spunta label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.tb-cella-spunta input { width: 22px; height: 22px; margin: 0; }
.tb-cella-spunta span { display: none; font-size: .85em; color: #b26200; }

/* --------------------------------- il sopralluogo si compila dal telefono ---

   Le due tabelle — misure e domande — a schermo stretto non si scorrono di
   lato: ogni riga diventa un blocchetto con l'etichetta davanti al campo.
   Una tabella che scorre orizzontalmente e' gia' scomoda col mouse; in piedi
   in un cantiere, con una mano sola, e' il motivo per cui non la compili. */
@media ( max-width: 700px ) {
	.tb-sop-tabella thead { display: none; }
	/* `.tb-griglia` ha min-width 520px per far scorrere le tabelle di lato:
	   qui si scorre in verticale, quindi va tolta o i campi escono dal bordo. */
	.tb-sop-tabella, .tb-sop-tabella tbody, .tb-sop-tabella tr, .tb-sop-tabella td { display: block; width: auto; min-width: 0; }
	.tb-sop-tabella tr {
		margin-bottom: .8rem; padding: .7rem .8rem;
		border: 1px solid #dcdcde; border-radius: 8px; background: #fff;
	}
	.tb-sop-tabella td { border: 0; padding: .25rem 0; }
	.tb-sop-tabella td::before {
		content: attr( data-eti ); display: block;
		font-size: .78em; text-transform: uppercase; letter-spacing: .04em; color: #646970;
		margin-bottom: .15rem;
	}
	/* Sotto i 16px iOS ingrandisce la pagina da solo a ogni tocco. */
	/* Senza border-box il padding si somma al 100% e il campo esce dallo schermo:
	   il valore, allineato a destra, finisce fuori dal bordo e sembra vuoto. */
	.tb-sop-tabella input, .tb-sop-tabella select { box-sizing: border-box; width: 100%; font-size: 17px; padding: .55rem; }
	.tb-sop-tabella .tb-cella-spunta { text-align: left !important; padding-top: .5rem; }
	.tb-sop-tabella .tb-cella-spunta::before { content: none; }
	.tb-sop-tabella .tb-cella-spunta input { width: 24px; height: 24px; }
	.tb-sop-tabella .tb-cella-spunta span { display: inline; }


	/* Anche la scheda foto: didascalia leggibile e casella da pollice. */
	.tb-foto-sop { grid-template-columns: 1fr; }
	.tb-foto-sop img { height: 210px; }
	.tb-foto-sop input[type="text"] { box-sizing: border-box; font-size: 17px; padding: .55rem; }
	.tb-sop-interna { font-size: .95em; }
	.tb-sop-interna input { width: 22px; height: 22px; vertical-align: -.35em; margin-right: .45rem; }

	/* In relazione, una foto per riga: due su 390px non si guardano. */
	.tb-foglio-foto { grid-template-columns: 1fr; }
}

/* --------------------------------------------- sopralluoghi: la relazione */

.tb-foglio-h { font-size: 1.05em; text-transform: uppercase; letter-spacing: .04em;
	margin: 1.8rem 0 .5rem; padding-bottom: .25rem; border-bottom: 1px solid #dcdcde; }
.tb-foglio-testo-libero { font-size: .95em; line-height: 1.65; }
.tb-foglio-domande { margin: .5rem 0 0; padding-left: 1.4rem; font-size: .95em; line-height: 1.7; }

.tb-foglio-foto { list-style: none; margin: .6rem 0 0; padding: 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.tb-foglio-foto img { display: block; width: 100%; border: 1px solid #dcdcde; border-radius: 4px; }
.tb-foglio-didascalia { display: block; margin-top: .3rem; font-size: .85em; color: #50575e; }

/* In stampa resta solo il foglio: niente barre, niente menu, niente tema. */
@media print {
	body * { visibility: hidden !important; }
	.tb-foglio, .tb-foglio * { visibility: visible !important; }
	.tb-foglio {
		position: absolute; left: 0; top: 0; width: 100%;
		margin: 0; padding: 0; border: 0; border-radius: 0; max-width: none;
	}
	.tb-non-stampare { display: none !important; }
	.tb-foglio-voci tr, .tb-foglio-firme { page-break-inside: avoid; }
	/* I totali sono un blocco solo: spezzarli fra due pagine — l'imponibile in
	   fondo alla prima e l'IVA in cima alla seconda — fa sembrare il conto
	   sbagliato a chi lo legge, ed e' successo su un preventivo vero. */
	.tb-foglio-totali { page-break-inside: avoid; }
	/* Una foto tagliata a meta' fra due pagine non documenta niente. */
	.tb-foglio-foto li { page-break-inside: avoid; }
	.tb-foglio-foto img { max-height: 90mm; object-fit: contain; }
	.tb-foglio-h { page-break-after: avoid; }
	.tb-foglio-voci thead { display: table-header-group; }
	@page { margin: 18mm 15mm; }
}

.tb-azioni-utente { display: block; margin-top: .25rem; font-size: .85em; }
.tb-azioni-utente form { display: inline; }

.tb-logo-prova { display: flex; align-items: center; gap: 1.2rem; margin: -.4rem 0 1rem; }
.tb-logo-prova img { max-height: 4.5rem; max-width: 14rem; }

.tb-foglio-logo { text-align: right; }
.tb-foglio-logo img { max-height: 4.5rem; max-width: 15rem; }
.tb-foglio-a { display: flex; justify-content: flex-end; margin-top: 1.6rem; }

/* La barra delle ore incluse: si legge in un colpo d'occhio da tre metri. */
.tb-barra { height: .5rem; background: #ececee; border-radius: 999px; overflow: hidden; min-width: 6rem; }
.tb-barra span { display: block; height: 100%; background: #00a32a; }
.tb-barra span.tb-avviso { background: #dba617; }
.tb-barra span.tb-piena  { background: #d63638; }

.tb-elenco-avvisi { margin: .5rem 0 0; padding-left: 1.1rem; }
.tb-elenco-avvisi li { margin-bottom: .3rem; }

.tb-stato-contr-attivo  { background: #edfaef; color: #007017; }
.tb-stato-contr-sospeso { background: #fff4e5; color: #b26200; }
.tb-stato-contr-cessato { background: #f0f0f1; color: #50575e; }

.tb-link-copia {
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .82em;
	padding: .5rem;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	background: #fff;
	word-break: break-all;
}

.tb-recupero { margin-top: 1.2rem; border-top: 1px solid #ececee; padding-top: .8rem; }
.tb-recupero summary { cursor: pointer; color: #1d4ed8; font-size: .93em; }
.tb-recupero[open] summary { margin-bottom: .8rem; font-weight: 600; }

/* ------------------------------------------------ lettura di una bolla incollata */
.tb-incolla-bolla { margin: 1.2rem 0; padding: 1rem 1.1rem; border: 1px solid #dcdcde;
	border-left: 3px solid #2271b1; border-radius: 4px; background: #fbfbfc; max-width: 900px; }
.tb-incolla-bolla textarea { width: 100%; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: .86rem; line-height: 1.4; }
.tb-incolla-bolla code { background: #f0f0f1; padding: 0 .25em; border-radius: 2px; }
.tb-esito-ok { color: #0a6b2e; }
.tb-esito-ko { color: #b32d2e; }

/* --------------------------------------------- casella di ricerca sulle tendine */
.tb-cerca-tendina { width: 100%; margin-bottom: .3rem; padding: .4rem .55rem; font-size: .88rem;
	border: 1px solid #dcdcde; border-radius: 3px; background: #fff; }
.tb-cerca-tendina:focus { border-color: #2271b1; outline: 2px solid transparent; box-shadow: 0 0 0 1px #2271b1; }
.tb-cerca-tendina.tb-cerca-vuota { border-color: #d63638; }

/* --------------------------------------------------------- chi ha pagato */
.tb-carta, .tb-tasca { display: inline-block; font-size: .78rem; padding: .1rem .45rem; border-radius: 2px; }
.tb-carta { background: #f0f0f1; color: #50575e; }
.tb-tasca { background: #edf6ed; color: #0a6b2e; }

/* ------------------------------------------------------------- banco prove */
.tb-foto-prova, .tb-note-prova { list-style: none; margin: .4rem 0 1rem; padding: 0; }
.tb-foto-prova li { padding: .35rem 0; border-bottom: 1px dotted #dcdcde; }
.tb-note-prova li { padding: .7rem .9rem; margin-bottom: .6rem; border-left: 3px solid #dcdcde;
	background: #fbfbfc; border-radius: 0 3px 3px 0; }
.tb-note-prova li p { margin: 0 0 .3rem; }
.tb-note-prova li p:last-of-type { margin-bottom: 0; }
.tb-righe-misure input, .tb-righe-misure select { width: 100%; }

/* ------------------------------------------------------- togli riga preventivo */
.tb-togli { color: #b32d2e; font-weight: bold; line-height: 1; }
.tb-togli:hover { color: #fff; background: #b32d2e; border-color: #b32d2e; }

/* ------------------------------------------------- calcolatrice del prezzo */
.tb-calc { margin: 1.2rem 0; padding: .9rem 1.1rem; border: 1px solid #dcdcde;
	border-left: 3px solid #0a6b2e; border-radius: 4px; background: #fbfbfc; }
.tb-calc > summary { cursor: pointer; font-size: 1rem; padding: .2rem 0; }
.tb-calc-griglia { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin: .8rem 0; }
.tb-calc fieldset { border: 1px solid #dcdcde; border-radius: 3px; padding: .5rem .7rem .7rem; margin: 0; background: #fff; }
.tb-calc legend { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #50575e; padding: 0 .3rem; }
.tb-calc label { display: block; font-size: .84rem; margin-bottom: .45rem; color: #1d2327; }
.tb-calc label input { width: 100%; margin-top: .12rem; padding: .3rem .4rem; font-size: .9rem; }
.tb-calc label small { display: block; font-size: .74rem; color: #646970; line-height: 1.3; margin-top: .12rem; }
.tb-calc-esito { margin: .8rem 0; padding: .7rem .9rem; background: #fff; border: 1px solid #dcdcde; border-radius: 3px; }
.tb-calc-riga { display: flex; justify-content: space-between; gap: 1rem; padding: .22rem 0;
	border-bottom: 1px dotted #e0e0e0; font-size: .9rem; }
.tb-calc-riga:last-of-type { border-bottom: 0; }
.tb-calc-riga span { color: #50575e; }
.tb-calc-prezzo { border-top: 2px solid #1d2327; border-bottom: 0 !important; margin-top: .35rem; padding-top: .45rem; font-size: 1.1rem; }
.tb-calc-prezzo b { color: #0a6b2e; }
.tb-calc-allarme b { color: #b32d2e; }
.tb-calc-nota { margin: .5rem 0 0; font-size: .82rem; color: #b32d2e; line-height: 1.4; }
.tb-calc-azioni { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; font-size: .88rem; }
.tb-calc-mappa { margin: 0 0 .5rem; font-size: .82rem; }
.tb-calc-ar { font-size: .84rem; margin-bottom: .5rem; }
.tb-calc-ar input { width: auto !important; margin-right: .35rem; }
.tb-calc-ricordo { margin: -.2rem 0 .5rem; font-size: .78rem; color: #0a6b2e; line-height: 1.35; }
.tb-calc-ricordo:empty { display: none; }
.tb-pdf-scegli { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .6rem 0; }
.tb-link-bottone.tb-forte { font-weight: 600; color: #0a6b2e; }
.tb-link-bottone.tb-debole { color: #8c8f94; }

/* --------------------------------------------------- foglio presenze

   Trentun colonne su uno schermo: si scorre di lato ed e' giusto cosi', ma il
   nome deve restare visibile o non si sa piu' di chi e' la riga. */
.tb-presenze { min-width: 900px; }
.tb-presenze th, .tb-presenze td { padding: .35rem .3rem; text-align: center; font-size: .85em; }
.tb-presenze th:first-child, .tb-presenze td:first-child {
	position: sticky; left: 0; background: #fff; text-align: left; min-width: 11rem; z-index: 1;
}
.tb-presenze thead th:first-child { background: #f6f7f7; }
.tb-presenze .tb-fest { background: #f6f7f7; color: #8c8f94; }
.tb-presenze .tb-assenza { background: #fcf9e8; color: #b26200; font-weight: 700; }
.tb-presenze .tb-sotto { display: block; font-weight: 400; }

.tb-scontrini { list-style: none; margin: .4rem 0; padding: 0; }
.tb-scontrini li { margin-bottom: .3rem; }

/* L'avviso delle scadenze mezzi: si legge, non si conta. */
.tb-avvisi-mezzi { list-style: none; margin: .5rem 0 0; padding: 0; }
.tb-avvisi-mezzi li { padding: .2rem 0; font-size: .95em; }

/* L'elenco da copiare dentro MrDico: a larghezza fissa, cosi' le colonne
   restano allineate e si rilegge mentre si digita. */
.tb-elenco-dico { width: 100%; max-width: 820px; font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: .88em; line-height: 1.5; padding: .7rem; border: 1px solid #dcdcde; border-radius: 8px; background: #fbfbfc; }

/* La barretta sopra il riquadro della relazione: due scorciatoie, non un editor. */
.tb-scrittura { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .2rem 0 .35rem; }
.tb-scrittura .tb-mk { width: auto; padding: .3rem .7rem; font-size: .85em; }
.tb-scrittura .tb-piccolo { margin: 0 0 0 .3rem; }

/* Come si vedono elenchi e titoletti sul foglio stampato. */
.tb-foglio-punti { margin: .4rem 0 .6rem 1.2rem; padding: 0; font-size: .95em; line-height: 1.7; }
.tb-foglio-punti li { margin-bottom: .2rem; }
.tb-foglio-sotto { font-size: 1em; font-weight: 700; margin: 1rem 0 .3rem; }

/* ---------------------------------------- materiale preso e richieste (1.26.0) */

/* Un bottone che non sembra un bottone: per le azioni secondarie dentro una
   riga, dove un pulsante vero ruberebbe l'occhio a quello che conta. */
.tb-btn-testo {
	background: none; border: 0; padding: .2rem 0; margin: 0;
	color: #2271b1; font: inherit; font-size: .9em; cursor: pointer; text-decoration: underline;
}
.tb-btn-testo:hover { color: #135e96; }

.tb-lista-semplice { list-style: none; margin: .4rem 0 1rem; padding: 0; }
.tb-lista-semplice li { padding: .3rem 0; border-bottom: 1px solid #f0f0f1; }

.tb-riga-azione { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.tb-riga-azione .tb-campo { flex: 1 1 260px; margin-bottom: 0; }

/* Una richiesta urgente si vede prima di leggerla. */
.tb-allerta-riga td { background: #fcf3f3; }

/* Il materiale scritto in cantiere, sotto le ore, in approvazione. */
.tb-materiale-preso { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .9em; }
.tb-materiale-preso li {
	display: flex; flex-wrap: wrap; gap: .4rem .7rem;
	padding: .25rem .5rem; border-left: 3px solid #dcdcde; margin-bottom: .2rem; background: #fafafa;
}
.tb-materiale-preso .tb-mat-q { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 4.5em; }
.tb-mat-ok { color: #1d6b3a; }

/* Una riga che non si e' saputo agganciare e' un buco in giacenza: si vede. */
.tb-mat-orfano { color: #b32d2e; }
.tb-materiale-preso li:has(.tb-mat-orfano) { border-left-color: #b32d2e; background: #fcf3f3; }

.tb-scelta-prezzo { max-width: 100%; font-size: .9em; }

/* La mansione, nella riga del collaboratore. */
.tb-cambia-mansione { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.tb-cambia-mansione select { max-width: 15em; font-size: .9em; }
.tb-spunta-prove { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.tb-spunta-prove input { width: auto; margin: 0; }

/* L'elenco di cosa e' fermo in capannone, quando si prepara una consegna. */
.tb-ferma-elenco { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 20rem; overflow-y: auto; }
.tb-ferma-elenco li { border-bottom: 1px solid #ececee; }
.tb-ferma-elenco label { display: flex; align-items: flex-start; gap: .5rem; padding: .4rem .2rem; cursor: pointer; }
.tb-ferma-elenco input { width: auto; margin: .2rem 0 0; }
.tb-ferma-elenco strong { margin-left: .4rem; font-variant-numeric: tabular-nums; }
.tb-ferma-elenco .tb-grigio { margin-left: .4rem; font-size: .9em; }

/* La quantita' in custodia sta in due cifre: i pezzi con matricola sono
   sempre uno, e il resto sono moduli contati a mano. */
.tb-qta-stretta { max-width: 4em; }

/* Larghezze fissate a mano, e non e' pignoleria: in automatico il browser
   divideva lo spazio in parti quasi uguali, e «Stato» — che porta sempre la
   stessa parola — si prendeva quanto la descrizione, che e' l'unica colonna
   che ha davvero bisogno di posto. */
/* La tabella ha una larghezza minima sua e, se non ci sta, il contenitore
   scorre. Senza, le colonne fisse si prendevano tutto e alla descrizione —
   l'unica che ha davvero bisogno di posto — restavano due dita. */
.tb-righe-custodia { table-layout: fixed; min-width: 1040px; }
/* Il codice del cliente e' lungo: `BGT_EPSON/TM-T88V-US`, `AB_ISIVIEWER/RASPBER`
   sono venti caratteri, e in nove em se ne vedevano quattordici. La larghezza
   qui e' quella del codice piu' lungo che passa da questi documenti. */
/* Gli `em` qui valgono meno di quanto sembra: l'intestazione ha un carattere
   piu' piccolo del resto, e un em ne misura dodici di pixel, non sedici. I
   numeri sono presi sui codici veri — `BGT_EPSON/TM-T88V-US` e
   `AMX96X30000400050` devono starci per intero, non quasi. */
.tb-righe-custodia th:nth-child(1) { width: 17em; }   /* codice */
.tb-righe-custodia th:nth-child(2) { width: 13em; }   /* matricola */
.tb-righe-custodia th:nth-child(4) { width: 7em; }    /* stato */
.tb-righe-custodia th:nth-child(5) { width: 4em; }    /* quantita' */
.tb-righe-custodia th:nth-child(6) { width: 9em; }    /* nota */
.tb-righe-custodia td input, .tb-righe-custodia td select { width: 100%; max-width: 100%; }
.tb-righe-custodia .tb-qta-stretta { text-align: right; }

/* Il piede del documento di trasporto: le stesse caselle del DDT che Tecno Bet
   manda gia' oggi. In tabella e non in flex perche' qui servono i bordi fra una
   casella e l'altra — e' la griglia che si vede su ogni bolla. */
.tb-foglio-piede { width: 100%; border-collapse: collapse; margin-top: 2.5rem; font-size: .82em; }
.tb-foglio-piede th, .tb-foglio-piede td { border: 1px solid #8c8f94; padding: .3rem .4rem; text-align: left; vertical-align: top; }
.tb-foglio-piede th { font-weight: 600; color: #333; font-size: .95em; }
.tb-foglio-piede .tb-firma { height: 3.2rem; }
p.tb-foglio-dataora { margin: .8rem 0 .6rem; font-size: .82em; width: auto; border: 0; }


/* ------------------------------------- la pagina larga quanto lo schermo

   Il tema del sito tiene il contenuto dentro una colonna stretta — sul sito
   di prova 645 pixel — ed e' giusto cosi' per un articolo, che si legge meglio
   se le righe non sono lunghissime. Ma questa non e' una pagina da leggere: e'
   una pagina piena di tabelle a sei colonne, e in 645 pixel la descrizione di
   un pezzo diventa larga due dita.

   Qui la pagina di controllo esce dalla colonna del tema e si prende la
   larghezza dello schermo, fino a un massimo. Solo da mille pixel in su: sul
   telefono la colonna stretta e' quella giusta e non si tocca. E solo a
   schermo — in stampa comanda il blocco di stampa, che viene prima. */
@media screen and (min-width: 1000px) {
	/* Gli `!important` non sono pigrizia: la regola del tema che stringe il
	   contenuto — `.is-layout-constrained > *` — ha la stessa forza di questa e
	   arriva dopo, quindi senza vincerebbe lei. */
	.tb-ctrl {
		width: min( 1240px, calc( 100vw - 3rem ) ) !important;
		max-width: none !important;
		margin-left: calc( 50% - min( 1240px, calc( 100vw - 3rem ) ) / 2 ) !important;
		margin-right: 0 !important;
	}
}

/* --------------------------------------------- preventivo: luogo dei lavori */

/* Quattro campi su una riga, ognuno largo quanto serve: la via e' quella che ha
   bisogno di posto, il CAP sono cinque cifre e basta. */
.tb-riga-luogo { display: grid; grid-template-columns: 2.2fr .8fr 1.4fr 1.4fr; gap: .8rem; }
@media (max-width: 780px) { .tb-riga-luogo { grid-template-columns: 1fr 1fr; } }

/* Il campo che conta piu' degli altri lo dice anche l'etichetta. */
.tb-campo-grosso > span { font-size: 1.05em; font-weight: 600; color: #1d2327; }

/*
 * Il recapito del cliente, sotto la tendina del preventivo.
 *
 * Sta appiccicato al campo, non staccato come un avviso: e' un'etichetta di
 * quel campo li'. I due recapiti sono a capo sul telefono e in riga sul
 * computer, e il numero e' grande abbastanza da centrarlo col pollice.
 */
.tb-contatti-cliente {
	display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
	margin: -.5rem 0 .9rem; padding: 0;
	color: #50575e;
}
.tb-contatti-cliente a { color: #1d5c8f; text-decoration: none; font-weight: 600; }
.tb-contatti-cliente a:hover { text-decoration: underline; }
.tb-contatti-tel::before  { content: "tel "; color: #8c8f94; font-weight: 400; }
.tb-contatti-mail::before { content: "mail "; color: #8c8f94; font-weight: 400; }
.tb-contatti-vuoto { color: #8c8f94; }
@media ( max-width: 640px ) {
	.tb-contatti-cliente { gap: .2rem; }
	.tb-contatti-cliente > span { flex: 1 1 100%; }
	.tb-contatti-cliente a { font-size: 1.05em; }
}

/* L'avviso del CAP mancante nelle impostazioni. Non blocca niente: dice solo
   che l'indirizzo che finisce sui documenti e' incompleto, e come si scrive. */
.tb-manca-cap { color: #8a4b00; }

/* ------------------------------------------- allegati del sopralluogo */

/* Un elenco, non riquadri: qui i file sono pochi (una pianta, un progetto) e
   quello che conta e' il nome del file — che si legge meglio in fila. */
.tb-lista-allegati { list-style: none; margin: 0 0 1rem; padding: 0; max-width: 700px; }
.tb-lista-allegati li {
	display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
	padding: .5rem .1rem; border-bottom: 1px solid #ececee;
}
.tb-all-nome { font-weight: 600; text-decoration: none; }
.tb-all-nome:hover { text-decoration: underline; }
.tb-all-sotto { font-size: .84em; color: #6b7280; flex: 1; }
.tb-all-togli { margin: 0; }

/* ============================================================ DiCo (DM 37/08)
   La dichiarazione di conformita' e' un modulo di legge, e si vede: sul foglio
   non c'e' niente di decorativo, solo caselle, righe e spazi per firmare.

   La casella `.tb-cx` e' l'unico pezzo un po' delicato di tutto il file. Sul
   modello di carta e' un quadratino da segnare, e deve restare un quadratino
   **anche in stampa**: quelle spuntate escono con la croce, quelle vuote
   restano vuote e si segnano a penna. Non e' un carattere unicode (☐/☒) di
   proposito — quelli cambiano faccia da un font all'altro e su qualche
   stampante non escono affatto. E' un bordo, che esce sempre. */

.tb-h4 { font-size: .98em; margin: 1.4rem 0 .5rem; }
.tb-sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

.tb-cx {
	display: inline-block;
	width: .85em; height: .85em; line-height: .8em;
	border: 1px solid #1d2327;
	text-align: center; font-size: 1em;
	vertical-align: -.08em; margin-right: .35em;
}
.tb-cx-si { font-weight: 700; }

.tb-gruppo {
	border: 1px solid #dcdcde; border-radius: 8px;
	padding: .8rem 1rem; margin: 1rem 0;
}
.tb-gruppo legend { font-weight: 600; padding: 0 .4rem; font-size: .92em; }
.tb-riga-spunta { display: flex; gap: .55rem; align-items: flex-start; margin: .45rem 0; line-height: 1.4; }
.tb-riga-spunta input { margin-top: .25rem; flex: 0 0 auto; }
.tb-riga-radio { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: .6rem; }
.tb-riga-radio label { display: flex; align-items: center; gap: .35rem; }

.tb-avviso-dico {
	background: #fcf9e8; border-left: 4px solid #dba617;
	padding: .8rem 1rem; border-radius: 0 8px 8px 0;
	max-width: 900px; line-height: 1.5;
}
.tb-allerta-riquadro {
	background: #fcf0f1; border-left: 4px solid #b32d2e;
	padding: .8rem 1rem; border-radius: 0 8px 8px 0; margin: 1rem 0;
}
.tb-allerta-riquadro ul { margin: .5rem 0 0; padding-left: 1.2rem; }

.tb-dico-elenco { list-style: none; margin: .8rem 0; padding: 0; max-width: 900px; }
.tb-dico-elenco li {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem;
	border: 1px solid #dcdcde; border-radius: 8px;
	padding: .6rem .8rem; margin-bottom: .5rem;
}
.tb-dico-n { font-weight: 700; }
.tb-dico-quando, .tb-dico-cosa { color: #646970; font-size: .9em; }
.tb-dico-cosa { flex: 1 1 12rem; }
.tb-dico-pronta { color: #007017; font-size: .85em; }
.tb-dico-buchi  { color: #b26200; font-size: .85em; }
.tb-dico-azioni { display: flex; gap: .8rem; font-size: .9em; }

/* Il foglio. Testo piu' fitto del solito: il modello sta in una pagina, e
   spezzarlo in due fa perdere la parte che si firma. */
.tb-foglio-dico { font-size: 12.5px; line-height: 1.45; }
.tb-foglio-dico .tb-foglio-titolo { font-size: 1.25em; margin: 1.4rem 0 .1rem; text-align: center; }
.tb-dico-rif { text-align: center; color: #50575e; font-size: .9em; margin: 0 0 1.2rem; }
.tb-dico-p { margin: .55rem 0; text-align: justify; }
.tb-dico-riga-cx { margin: .3rem 0; padding-left: .2rem; }
.tb-dico-scelte { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; }
.tb-dico-scelta { white-space: nowrap; }
.tb-dico-h { font-size: 1.05em; text-align: center; letter-spacing: .12em; margin: 1.3rem 0 .4rem; }
.tb-dico-h3 { font-size: .95em; margin: 1rem 0 .3rem; font-weight: 700; }
.tb-dico-avvertenza { font-size: .88em; color: #50575e; margin: 1.4rem 0 0; }
.tb-dico-numero { margin-top: 1.6rem; font-size: .9em; }
.tb-dico-firme { margin-top: 2rem; }
.tb-dico-materiali {
	white-space: pre-wrap; font-family: inherit; font-size: .95em;
	border: 1px solid #8c8f94; padding: .6rem .7rem; margin: .8rem 0;
	line-height: 1.55;
}

@media print {
	/* `display: revert` sui figli del foglio rimette ogni <span> a `inline`, e
	   una casella `inline` perde larghezza, altezza e bordi: sul foglio
	   stampato sparivano tutte, spuntate comprese, e restavano le frasi senza
	   il quadratino davanti. E' lo stesso inciampo gia' costato le righe delle
	   firme sulla bolla: qui e' peggio, perche' un modulo di legge senza le sue
	   caselle non e' un modulo. */
	.tb-foglio .tb-cx { display: inline-block !important; }
	.tb-foglio .tb-dico-scelte { display: flex !important; }
	.tb-foglio .tb-dico-materiali { display: block !important; white-space: pre-wrap !important; }

	/*
	 * **Due fogli sulla stessa pagina si sovrapponevano.**
	 *
	 * La stampa nasconde tutto (`body * { visibility: hidden }`) e poi tira
	 * fuori il foglio mettendolo in `position: absolute` a 0,0 — e' l'unico
	 * modo di non lasciare in pagina lo spazio vuoto di quello che e' stato
	 * nascosto. Con un foglio solo funziona; con due, tutti e due finiscono a
	 * 0,0 e si stampano **uno sopra l'altro**: la relazione dei materiali
	 * sopra la dichiarazione, illeggibili entrambe.
	 *
	 * Quindi ad andare in assoluto e' il contenitore, e i fogli dentro tornano
	 * a scorrere normalmente uno dopo l'altro.
	 */
	.tb-fogli { position: absolute !important; left: 0; top: 0; width: 100%; visibility: visible !important; }
	.tb-fogli .tb-foglio {
		position: static !important;
		visibility: visible !important;
		margin: 0; padding: 0; border: 0;
	}

	/* I due fogli sono due documenti: la relazione dei materiali comincia da
	   pagina nuova, con la sua carta intestata. Attaccata in fondo alla prima
	   sembrerebbe una coda della dichiarazione, e da sola non varrebbe niente. */
	.tb-foglio-secondo { page-break-before: always; }

	/* Quello che si firma non si spezza fra due pagine. */
	.tb-dico-firme { page-break-inside: avoid; }
	.tb-dico-riga-cx { page-break-inside: avoid; }

	/*
	 * **La dichiarazione deve stare in una pagina.**
	 *
	 * A schermo respirava bene e sembrava a posto; stampata sbordava di un
	 * centimetro e mezzo, e su carta finivano su una seconda pagina quasi
	 * vuota proprio le due righe che contano: la firma del committente e il
	 * numero della dichiarazione. Un modulo di legge che si presenta cosi' fa
	 * una figura, e il difetto si vede solo dopo aver premuto stampa.
	 *
	 * Quindi la stampa stringe tutto di un filo — interlinea, margini fra i
	 * blocchi, spazio sopra le firme — e lo fa **solo qui**: a schermo il
	 * foglio resta comodo da rileggere.
	 */
	.tb-foglio-dico { font-size: 11.5px; line-height: 1.36; }
	.tb-foglio-dico .tb-dico-p { margin: .38rem 0; }
	.tb-foglio-dico .tb-dico-riga-cx { margin: .16rem 0; }
	.tb-foglio-dico .tb-dico-h { margin: .8rem 0 .25rem; }
	.tb-foglio-dico .tb-dico-h3 { margin: .6rem 0 .2rem; }
	.tb-foglio-dico .tb-foglio-titolo { margin: .6rem 0 .1rem; }
	.tb-foglio-dico .tb-dico-rif { margin-bottom: .7rem; }
	.tb-foglio-dico .tb-dico-firme { margin-top: .9rem !important; }
	.tb-foglio-dico .tb-foglio-linea { margin-top: 1.5rem; }
	.tb-foglio-dico .tb-dico-avvertenza { margin-top: .9rem; }
	.tb-foglio-dico .tb-dico-numero { margin-top: .9rem; }
}

/* ================================================ interventi a chiamata
   Nati dal 31 agosto: quattro ore da fatturare finite su una commessa interna
   e sparite. Questa pagina esiste perche' non risucceda. */

.tb-intervento {
	border: 1px solid #dcdcde; border-radius: 10px;
	padding: .8rem 1rem; margin-bottom: .8rem; background: #fff;
	max-width: 980px;
}
.tb-int-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.tb-int-codice { font-weight: 700; text-decoration: none; }
.tb-int-cosa { flex: 1 1 14rem; }
.tb-int-chi, .tb-int-quando { color: #646970; font-size: .9em; }

.tb-int-conto {
	display: flex; flex-wrap: wrap; gap: .3rem 1.2rem;
	margin: .6rem 0; padding: .5rem .7rem;
	background: #f6f7f7; border-radius: 8px;
	font-size: .92em; color: #3c434a;
}
.tb-int-proposto { margin-left: auto; }

.tb-int-azioni { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.tb-int-azioni .tb-btn, .tb-int-azioni .tb-btn-secondario { flex: 0 0 auto; width: auto; }
.tb-int-importo { display: flex; flex-direction: column; gap: .2rem; font-size: .85em; color: #646970; }
.tb-int-importo input { width: 9rem; text-align: right; font-variant-numeric: tabular-nums; }

.tb-int-attesa { list-style: none; margin: .6rem 0; padding: 0; max-width: 980px; }
.tb-int-attesa li {
	display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline;
	padding: .45rem .2rem; border-bottom: 1px solid #f0f0f1;
}

/* L'avviso in approvazione: giallo, non rosso. Non e' un errore — a volte una
   sirena la si ripara davvero in laboratorio — e' una cosa da guardare. */
.tb-voce-avviso {
	display: block; margin-top: .4rem;
	background: #fcf9e8; border-left: 3px solid #dba617;
	padding: .45rem .7rem; border-radius: 0 6px 6px 0;
	font-size: .9em; line-height: 1.45;
}

.tb-foglio-materiali { margin: .4rem 0 0; padding-left: 1.2rem; }
.tb-foglio-materiali li { margin-bottom: .2rem; }
.tb-int-nota { margin-top: 1.4rem; font-size: .9em; color: #50575e; }

/* La dichiarazione di conformita' e' chiusa finche' non serve: sotto nove
   commesse su dieci quel modulo non c'entra niente, e trenta campi aperti per
   nulla allungano la pagina fino a farla smettere di leggere. Il riquadro
   pero' si vede: e' una cosa che serve due volte l'anno, e nascosta del tutto
   la seconda volta non si ritrova. */
.tb-blocco-dico { margin: 1.6rem 0; }
.tb-somm-dico {
	cursor: pointer; list-style: none;
	display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
	padding: .55rem .8rem; margin: 0;
	border: 1px solid #dcdcde; border-radius: 10px; background: #f6f7f7;
}
.tb-somm-dico::-webkit-details-marker { display: none; }
.tb-somm-dico::before { content: '▸'; color: #646970; font-size: .9em; }
.tb-blocco-dico[open] > .tb-somm-dico::before { content: '▾'; }
.tb-blocco-dico[open] > .tb-somm-dico { border-radius: 10px 10px 0 0; margin-bottom: .8rem; }
.tb-somm-nota { color: #646970; font-weight: 400; font-size: .82rem; }

/* ================================================== la bacheca della home
   Promemoria in cima, collegamenti in fondo. La cosa che decide se servono
   e' la posizione, non lo stile: un promemoria sotto venti tessere si legge
   il giorno dopo, e i link fra le tessere sarebbero un secondo menu. */

.tb-promemoria {
	margin: 0 0 1.6rem;
	padding: .9rem 1rem;
	border: 1px solid #dcdcde; border-radius: 12px;
	background: #fbfbfc;
}
/* Quando c'e' qualcosa di scaduto il riquadro cambia faccia: e' l'unico
   momento in cui deve prendersi l'attenzione invece di stare in disparte. */
.tb-promemoria-urgente { border-color: #dba617; background: #fcf9e8; }

.tb-prom-titolo {
	font-size: 1.02em; margin: 0 0 .6rem;
	display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
}
.tb-prom-scaduti {
	font-size: .8rem; font-weight: 600; color: #b26200;
	background: #fff3d6; border-radius: 999px; padding: .1rem .55rem;
}

.tb-prom-elenco { list-style: none; margin: 0; padding: 0; }
.tb-prom-elenco li {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem;
	padding: .5rem 0; border-top: 1px solid #ececef;
}
.tb-prom-elenco li:first-child { border-top: 0; }
.tb-prom-testo { flex: 1 1 16rem; line-height: 1.45; }
.tb-prom-rosso .tb-prom-testo { font-weight: 600; }
.tb-prom-righino { display: flex; gap: .6rem; flex-wrap: wrap; font-size: .85em; }
.tb-prom-quando { color: #50575e; }
.tb-prom-rosso .tb-prom-quando { color: #b32d2e; font-weight: 600; }
.tb-prom-tutti { color: #007017; }
.tb-prom-chi { color: #646970; }
.tb-prom-azioni { display: flex; gap: .8rem; font-size: .88em; }

.tb-prom-scrivi { margin-top: .7rem; }
.tb-prom-scrivi > summary { cursor: pointer; font-size: .9em; color: #1d4ed8; }
/* Quando non c'e' nessun promemoria questa riga e' tutto il riquadro: senza
   il margine di sopra resterebbe appiccicata al benvenuto. */
.tb-prom-vuoto { margin-top: 0; }
.tb-prom-form { margin-top: .6rem; }
.tb-prom-form textarea { width: 100%; }
.tb-prom-sotto {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
	margin: .5rem 0 .3rem; font-size: .9em;
}
.tb-prom-sotto label { display: flex; align-items: center; gap: .35rem; }
.tb-prom-sotto button { flex: 0 0 auto; }

.tb-prom-fatti { margin-top: .8rem; }
.tb-prom-fatti > summary { cursor: pointer; font-size: .88em; color: #646970; }
.tb-prom-spenti { opacity: .6; margin-top: .4rem; }
.tb-prom-spenti .tb-prom-testo { text-decoration: line-through; }

/* --------------------------------------------------------- collegamenti */
.tb-collegamenti { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid #dcdcde; }
.tb-link-elenco {
	list-style: none; margin: .6rem 0; padding: 0;
	display: grid; gap: .6rem;
	grid-template-columns: repeat( auto-fill, minmax( 15rem, 1fr ) );
}
.tb-link-elenco li {
	border: 1px solid #dcdcde; border-radius: 10px;
	padding: .6rem .8rem; background: #fff;
}
.tb-link-vai { display: block; text-decoration: none; color: inherit; }
.tb-link-nome { display: block; font-weight: 600; color: #1d4ed8; }
/* Il dominio sotto al titolo non e' decorazione: e' l'unica cosa che dice
   dove si sta andando prima di premere, il giorno che un titolo non
   corrisponde piu' all'indirizzo. */
.tb-link-dove { display: block; font-size: .82em; color: #646970; }
.tb-link-nota { display: block; font-size: .85em; color: #50575e; margin-top: .2rem; }
.tb-link-azioni { display: flex; gap: .8rem; font-size: .85em; margin-top: .45rem; }
.tb-link-scrivi > summary { cursor: pointer; font-size: .9em; color: #1d4ed8; margin-bottom: .5rem; }

/* ============================ la ricerca delle voci di preventivo
   La tendina esce sotto la descrizione della riga su cui si sta scrivendo.
   Ogni voce dice **da dove viene il prezzo**: «tuo prezzo» sono offerte che
   hai gia' fatto, «costo + ricarico» e' un costo d'acquisto su cui il server
   ha gia' messo il ricarico materiali. Confonderli vorrebbe dire preventivare
   a costo senza accorgersene, ed e' la ragione per cui l'etichetta non e'
   decorazione. */

.tb-cella-desc { position: relative; }
.tb-riga-codice {
	display: block; margin-top: .15rem;
	font-size: .78em; color: #646970; font-variant-numeric: tabular-nums;
}

.tb-voci-trova {
	position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
	max-height: 19rem; overflow-y: auto;
	background: #fff; border: 1px solid #8c8f94; border-radius: 8px;
	box-shadow: 0 8px 22px rgba( 0, 0, 0, .14 );
	min-width: 26rem;
}
.tb-voce-riga {
	display: grid; width: 100%; text-align: left; cursor: pointer;
	grid-template-columns: 1fr auto;
	gap: .1rem .8rem; padding: .42rem .7rem;
	background: none; border: 0; border-top: 1px solid #ececef;
	font: inherit; line-height: 1.35;
}
.tb-voce-riga:first-child { border-top: 0; }
.tb-voce-riga:hover { background: #f0f6fc; }
.tb-voce-desc { font-weight: 600; }
.tb-voce-prezzo { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.tb-voce-eti {
	grid-column: 2; justify-self: end;
	font-size: .76em; padding: .05rem .45rem; border-radius: 999px;
}
.tb-voce-nota { grid-column: 1; font-size: .82em; color: #646970; }
.tb-voce-eti { align-self: start; }

/* Verde: e' un prezzo che hai gia' fatto tu. Arancio: e' un costo, e il
   ricarico ce l'ho messo io — guardalo prima di mandarlo al cliente. */
.tb-voce-mia .tb-voce-eti       { background: #edfaef; color: #007017; }
.tb-voce-mia .tb-voce-prezzo    { color: #007017; }
.tb-voce-magazzino .tb-voce-eti,
.tb-voce-listino .tb-voce-eti   { background: #fcf9e8; color: #b26200; }

/*
 * Il riquadro di conferma prima di cancellare una giornata.
 *
 * Grosso e staccato di proposito: e' l'unico punto del gestionale da cui si
 * tolgono delle ore, e chi ci arriva deve accorgersi di essere arrivato da
 * qualche parte di diverso — non trovarsi davanti un bottone rosso come un
 * altro in mezzo a una tabella.
 */
.tb-conferma-grossa {
	border: 2px solid #d63638; border-radius: 8px;
	background: #fff; padding: 1rem 1.1rem; margin: 1rem 0 1.4rem;
	max-width: 900px;
}
.tb-conferma-grossa .tb-griglia { margin: .4rem 0 .6rem; }

.tb-elenco-secco { margin: .4rem 0 1rem; padding-left: 1.1rem; color: #50575e; }
.tb-elenco-secco li { margin: .2rem 0; }

/* La colonna con cui si programma: e' quella che si cerca a colpo d'occhio. */
.tb-saldi .tb-programmare strong { font-size: 1.08em; }
.tb-saldi .tb-stima { white-space: normal; }

/* Il riquadro da cui si carica il cedolino: staccato, perché è un punto di partenza. */
.tb-leggi-cedolino {
	border: 1px solid #dcdcde; border-left: 4px solid #2271b1; border-radius: 6px;
	background: #fff; padding: .9rem 1.1rem; margin: 0 0 1.4rem; max-width: 1000px;
}
.tb-leggi-cedolino input[type="file"] { margin: .4rem 0 .2rem; }
.tb-leggi-cedolino table { margin-top: .6rem; }

/*
 * Il quaderno del banco prove.
 *
 * Le note si leggono, non si scorrono in tabella: una colonna sola, larga
 * quanto una riga di testo comoda, e il testo con gli a capo che uno ha scritto.
 */
.tb-appunti { list-style: none; margin: 1rem 0; padding: 0; max-width: 820px; }
.tb-appunti > li {
	border: 1px solid #dcdcde; border-left: 4px solid #dba617; border-radius: 6px;
	background: #fff; padding: .8rem 1rem; margin: 0 0 .8rem;
}
.tb-appunti h3 { margin: 0 0 .3rem; font-size: 1.05em; }
.tb-appunto-testo { color: #1d2327; line-height: 1.5; }
.tb-appunto-piede { margin: .6rem 0 0; color: #8c8f94; }
.tb-appunto-piede a { color: #2271b1; }
.tb-form-appunto { max-width: 820px; margin: 0 0 1.4rem; }
.tb-form-appunto textarea { font-size: 16px; line-height: 1.5; }

/* ------------------------------------------------------------------ il cassetto
   Il modulo di carico sta in cima e resta stretto: è un gesto da tre campi, e
   allargarlo su tutta la pagina lo farebbe sembrare una scheda da compilare.
   L'elenco invece prende tutto, perché lì la nota è la parte che conta e va
   letta a colpo d'occhio. */
.tb-form-cassetto { max-width: 620px; margin: 0 0 1.6rem; padding: 1rem 1.1rem;
	background: #f6f7f7; border: 1px solid #dcdcde; border-radius: 6px; }
.tb-form-cassetto textarea { font-size: 16px; line-height: 1.5; }
.tb-form-rinomina { background: #fcf9e8; border-color: #dba617; }
.tb-tab-cassetto td { vertical-align: top; }
.tb-tab-cassetto td:first-child { max-width: 34rem; }
.tb-tab-cassetto .tb-azioni-riga { white-space: nowrap; }

/* ------------------------------------------------- il cassetto: una cartella
   Il riquadro di carico è un riquadro e non un modulo in mezzo alla pagina,
   perché ci si trascina sopra roba: deve avere un bordo, cioè un dentro e un
   fuori. Le due scelte — file o cartella — stanno affiancate e non una sotto
   l'altra: sono due strade per la stessa cosa, non due passaggi in sequenza. */
.tb-cassetto-carica { max-width: 720px; margin: 0 0 1.6rem; padding: 1rem 1.1rem;
	background: #f6f7f7; border: 1px solid #dcdcde; border-radius: 6px; transition: background .15s, border-color .15s; }
.tb-cassetto-carica.tb-sopra { background: #eef6fc; border-color: #2271b1; border-style: dashed; }
.tb-cassetto-carica.tb-sta-caricando { opacity: .75; pointer-events: none; }
.tb-cassetto-carica .tb-h3 { margin: 0 0 .8rem; }
.tb-cassetto-scelte { display: flex; flex-wrap: wrap; gap: 1rem; }
.tb-cassetto-scelte .tb-campo { flex: 1 1 240px; }
.tb-cassetto-carica textarea { font-size: 16px; line-height: 1.5; }

/* La barra dice a che punto siamo. Il tempo che passa dà fastidio
   soprattutto quando non si sa quanto ne manca. */
.tb-cassetto-avanza { margin: .9rem 0 0; }
.tb-cassetto-barra { height: 8px; background: #dcdcde; border-radius: 4px; overflow: hidden; }
.tb-cassetto-barra i { display: block; height: 100%; width: 0; background: #2271b1; transition: width .2s; }
.tb-cassetto-scritta { margin: .4rem 0 0; color: #50575e; }
.tb-cassetto-resoconto { margin: .9rem 0 0; }
.tb-cassetto-resoconto ul { margin: .4rem 0 0 1.1rem; color: #50575e; }

/* Una cartella è un blocco che si apre, non una pagina in cui si entra: da una
   pagina in cui sei entrato per sbaglio si esce sempre con un clic di troppo. */
.tb-cartella { margin: 0 0 .9rem; border: 1px solid #dcdcde; border-radius: 6px; background: #fff; }
.tb-cartella > summary { cursor: pointer; padding: .7rem .9rem; display: flex; flex-wrap: wrap;
	gap: .2rem .7rem; align-items: baseline; }
.tb-cartella > summary:hover { background: #f6f7f7; }
.tb-cartella-nome { font-weight: 600; }
.tb-cartella-nome::before { content: '📁 '; }
.tb-cartella .tb-tab { margin: 0; }
.tb-cartella-piede { padding: .5rem .9rem .7rem; border-top: 1px solid #f0f0f1; }
/* Il percorso, accanto al nome, quando la ricerca pesca dentro le cartelle. */
.tb-cartella-tag { display: inline-block; margin-left: .4rem; padding: .05rem .4rem;
	font-size: .78em; color: #50575e; background: #f0f0f1; border-radius: 3px; }

/* -------------------------------------------- da dove arriva il materiale
   Quattro schede affiancate invece di una tendina: la scelta decide quali
   campi compaiono sotto, e una scelta che cambia la pagina deve vedersi
   prima di averla fatta, non dopo. */
.tb-generi-carico { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.2rem; }
.tb-generi-carico .tb-genere { flex: 1 1 210px; display: block; padding: .7rem .8rem;
	border: 1px solid #dcdcde; border-radius: 6px; background: #fff; color: #1d2327;
	text-decoration: none; line-height: 1.35; }
.tb-generi-carico .tb-genere:hover { border-color: #8c8f94; }
.tb-generi-carico .tb-genere strong { display: block; margin-bottom: .2rem; }
.tb-generi-carico .tb-genere span { display: block; color: #50575e; }
.tb-generi-carico .tb-genere.attivo { border-color: #2271b1; box-shadow: inset 0 0 0 1px #2271b1; background: #f0f6fc; }

/* Il carico che aspetta ancora la bolla. Si vede, e resta visibile finché
   non arriva: un documento in sospeso dimenticato è una fattura che arriverà
   senza niente a cui agganciarsi. */
.tb-in-sospeso > td { background: #fcf9e8; }
.tb-bollino-sospeso { display: inline-block; margin-left: .35rem; padding: .05rem .4rem;
	font-size: .78em; color: #8a6d00; background: #fcf0cd; border: 1px solid #dba617; border-radius: 3px; }
.tb-form-bolla-arrivata { background: #fcf9e8; border: 1px solid #dba617; border-radius: 6px;
	padding: 1rem 1.1rem; margin: 0 0 1.4rem; }

/* Da dove viene il costo di un articolo. Una stima presa dal listino e un
   costo pagato davvero non possono avere la stessa faccia: il primo è quello
   che probabilmente spenderai, il secondo quello che hai speso. */
.tb-kpi-nota { display: block; margin-top: .15rem; font-size: .78em; color: #8c8f94; line-height: 1.3; }
.tb-da-listino { color: #8a6d00; }
td .tb-sotto.tb-da-listino { display: block; font-size: .78em; }

/* Le lavorazioni della relazione, sul foglio che va al cliente. Una riga di
   titolo separa i blocchi senza portarsi dietro colonne vuote. */
.tb-foglio-lavori td:first-child, .tb-foglio-lavori th:first-child { text-align: left; }
.tb-foglio-lavori .tb-foglio-sezione th { text-align: left; padding-top: .7rem;
	border-bottom: 1px solid #1d2327; font-weight: 700; }
/*
 * ## La griglia delle lavorazioni, e perche' l'unita' di misura non si leggeva
 *
 * Senza queste regole i campi della griglia ereditavano quelle del modulo
 * (`.tb-form-commessa select`): **16px di carattere e 9,6px di imbottitura**,
 * pensati per un campo larga tutta la pagina. Dentro una colonna da cinque
 * caratteri restavano quarantaquattro pixel in tutto, freccetta compresa: si
 * vedeva mezza lettera. Le righe del preventivo avevano la loro regola
 * compatta dal primo giorno; questa griglia, nata dopo, non l'ha mai avuta.
 */
/*
 * Le larghezze stanno qui e sono in `rem`, non in `em` sul `<th>`.
 *
 * In `em` erano relative al carattere dell'intestazione, che in queste tabelle
 * e' piu' piccolo del resto: «5.5em» diventava sessantaquattro pixel invece dei
 * novanta che sembravano. E' il motivo per cui la colonna U.M. era stretta
 * anche quando le avevo dato una misura.
 */
.tb-righe-relazione th:nth-child(1), .tb-righe-relazione td:nth-child(1) { width: 7.5rem; }
.tb-righe-relazione th:nth-child(3), .tb-righe-relazione td:nth-child(3) { width: 4.6rem; }
.tb-righe-relazione th:nth-child(4), .tb-righe-relazione td:nth-child(4) { width: 5.5rem; }
.tb-righe-relazione th:nth-child(5), .tb-righe-relazione td:nth-child(5) { width: 6rem; }
.tb-righe-relazione td { padding: .2rem .25rem; vertical-align: middle; }
.tb-righe-relazione input, .tb-righe-relazione select, .tb-righe-relazione textarea {
	width: 100%;
	padding: .3rem .35rem;
	font-size: .93em;
	box-sizing: border-box;
}
.tb-righe-relazione textarea.tb-desc { min-height: 2.1rem; resize: vertical; line-height: 1.35; }
.tb-righe-relazione input.tb-num { text-align: right; }

/* Un titolo si deve riconoscere senza rileggere la tendina, e una riga che non
   fa totale non deve avere le caselle che lo farebbero. */
.tb-righe-relazione tr.tb-riga-sezione textarea { font-weight: 700; text-transform: uppercase; background: #f6f7f7; }
.tb-righe-relazione tr.tb-riga-descrizione textarea { font-style: italic; color: #50575e; }
.tb-righe-relazione tr.tb-riga-sezione .tb-um,
.tb-righe-relazione tr.tb-riga-sezione .tb-q,
.tb-righe-relazione tr.tb-riga-sezione .tb-p,
.tb-righe-relazione tr.tb-riga-descrizione .tb-um,
.tb-righe-relazione tr.tb-riga-descrizione .tb-q,
.tb-righe-relazione tr.tb-riga-descrizione .tb-p { visibility: hidden; }