/* netDesk.IT - pagina Tools: layout a flusso a tutte le larghezze, stesso stile delle altre pagine */

body.tools-page { margin: 0; background: #fff; }
/* nei font incorporati le legature fi/ff sono vuote: le disattivo */
.tb--page, .tb--page .ndf { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; }
.tb.tb--page { display: block; }
.tb--page .tb-wrap { max-width: 1100px; }
.tb--page .tb-head .tb-wrap { max-width: none; }

/* ---------- Header desktop (da 880px): stesse immagini e posizioni delle altre pagine, rimpicciolito sotto 1280px ---------- */
.nd-dh { display: none; }
@media screen and (min-width: 880px) {
	.nd-dh { display: block; position: sticky; top: 0; z-index: 60; height: calc(59px * var(--nd-s, 1)); background: #232323 url(335.webp) center / cover no-repeat; overflow: hidden; }
	.tb--page .tb-head { display: none; }
}
.nd-dh-in { position: relative; width: 1280px; height: 59px; margin-left: calc((100% - 1280px * var(--nd-s, 1)) / 2); transform: scale(var(--nd-s, 1)); transform-origin: 0 0; }
.nd-dh-logo { position: absolute; left: 5px; top: 5px; display: block; }
.nd-dh-logo img { display: block; width: 144px; height: 50px; }
.nd-dh-nav { position: absolute; left: 522px; top: 1px; width: 664px; height: 58px; }
.nd-dn { position: absolute; top: 0; height: 58px; display: block; }
.nd-dn img { position: absolute; left: 0; top: 0; display: block; max-width: none; height: 58px; }
.nd-dn .nd-dn-h { opacity: 0; filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, .11)); transition: opacity .3s ease; }
.nd-dn:hover .nd-dn-h, .nd-dn:focus-visible .nd-dn-h, .nd-dn-cur .nd-dn-h { opacity: 1; }
.nd-dh-chat { position: absolute; left: 1213px; top: 10px; width: 40px; height: 40px; }

/* ---------- Hero ---------- */
.tl-hero { padding: 70px 0; }
.tl-hero p { max-width: 560px; margin-top: 14px; font-size: 17px; color: #f0f0f0; padding-left: 20px; border-left: 2px solid rgba(255, 255, 255, .6); }

/* ---------- Sezioni ---------- */
.tl-sec { padding: 56px 0; }
.tl-sec--alt { background: #f7f7f7; }
.tl-title { font-size: 28px; margin-bottom: 8px; }
.tl-sub { max-width: 640px; margin-bottom: 32px; }


/* ---------- Strumenti di rete ---------- */
.tl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.tl-stat { display: grid; gap: 2px; }
.tl-stat .tl-big { font-size: 24px; }
.tl-ok { color: #2e8b57; font-weight: bold; }
.tl-bad { color: #b3261e; font-weight: bold; }
.tl-scroll { overflow-x: auto; }
.tl-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.tl-tab th { text-align: left; white-space: nowrap; font-weight: normal; color: #555; padding: 6px 10px 6px 0; border-bottom: 1px solid #e0e0e0; }
.tl-tab td { padding: 7px 10px 7px 0; border-bottom: 1px solid #f0f0f0; vertical-align: top; color: var(--tb-ink); overflow-wrap: anywhere; }
.tl-tab td:first-child { color: var(--tb-orange); font-weight: bold; white-space: nowrap; }
.tl-tab td:last-child { white-space: nowrap; }

/* ---------- Download ---------- */
.tl-dls { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.tl-dl { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 26px 22px; background: #fff; border: 1px solid #e4e4e4; border-top: 3px solid var(--tb-orange); border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.tl-dl > svg { width: 34px; height: 34px; fill: none; stroke: var(--tb-orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tl-dl h3 { font-size: 20px; }
.tl-meta { font-size: 14px; color: #666; }
.tl-dl-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 6px; text-decoration: none; }
.tb .tl-dl-btn { color: #fff; }
.tl-note { max-width: 760px; margin-top: 22px; font-size: 14px; color: #666; }
.tl-note.tl-just { max-width: none; text-align: justify; hyphens: auto; }

/* ---------- Strumenti interattivi ---------- */
.tl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.tl-tool { background: #fff; border: 1px solid #e4e4e4; border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); overflow: hidden; }
.tl-tool > h3 { display: flex; align-items: center; gap: 12px; padding: 16px 22px; font-size: 19px; color: #fff; background: linear-gradient(#3b3b3b, #232323); border-bottom: 3px solid var(--tb-orange); }
.tl-tool > h3 svg { flex: 0 0 24px; width: 24px; height: 24px; fill: none; stroke: var(--tb-orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tl-body { padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tl-body p.tl-hint { font-size: 14px; color: #666; }

.tl-field { display: grid; gap: 6px; }
.tl-field > label, .tl-label { font-size: 14px; color: #555; } /* niente maiuscolo/grassetto: nei font incorporati mancano le lettere accentate maiuscole */
.tl-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tl-row > * { flex: 1 1 120px; }
.tl-in, .tl-sel {
	width: 100%; min-height: 44px; padding: 9px 12px; font: inherit; font-size: 16px; color: var(--tb-ink);
	background: #fff; border: 1px solid #c9c9c9; border-radius: 4px;
}
.tl-in:focus, .tl-sel:focus, .tl-btn:focus-visible, .tl-range:focus-visible { outline: 2px solid var(--tb-orange); outline-offset: 1px; }
.tl-mono { font-family: Consolas, 'Courier New', monospace; font-size: 15px; word-break: break-all; }
.tl-btn {
	min-height: 44px; padding: 0 20px; font: inherit; font-size: 15px; font-weight: bold; letter-spacing: .03em; cursor: pointer;
	color: #fff; background: var(--tb-orange); border: 0; border-radius: 4px; transition: background-color .2s ease;
}
.tl-btn:hover { background: #f2a73c; }
.tl-btn--ghost { color: var(--tb-ink); background: #ececec; }
.tl-btn--ghost:hover { background: #dedede; }
.tl-range { width: 100%; accent-color: var(--tb-orange); }
.tl-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tl-checks label { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.tl-checks input { width: 18px; height: 18px; accent-color: var(--tb-orange); }

.tl-out { display: flex; gap: 10px; align-items: stretch; }
.tl-out output { flex: 1; display: block; min-width: 0; padding: 10px 12px; background: #f4f4f4; border: 1px solid #e0e0e0; border-radius: 4px; }
.tl-out .tl-btn { flex: 0 0 auto; }

.tl-meter { height: 6px; background: #e4e4e4; border-radius: 3px; overflow: hidden; }
.tl-meter i { display: block; height: 100%; width: 0; background: #c0392b; transition: width .25s ease, background-color .25s ease; }

.tl-res { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 15px; }
.tl-res dt { color: #666; }
.tl-res dd { margin: 0; color: var(--tb-ink); font-family: Consolas, 'Courier New', monospace; overflow-wrap: anywhere; }
.tl-err { color: #b3261e; font-size: 14px; min-height: 1.2em; }
.tl-big { font-family: 'xr2_Open Sans1', 'Open Sans', Arial, sans-serif; font-weight: bold; font-size: 26px; color: var(--tb-ink); }

@media screen and (max-width: 879px) {
	.tl-grid { grid-template-columns: 1fr; }
	.tl-body.tl-qr { grid-template-columns: minmax(0, 1fr); }
	.tl-qr .tl-qr-out { justify-items: start; }
	.tl-hero { padding: 54px 0; }
}
@media screen and (max-width: 599px) {
	.tl-hero { padding: 40px 0; }
	.tl-sec { padding: 40px 0; }
	.tl-title { font-size: 24px; }
	.tl-sub { margin-bottom: 24px; }
	.tl-body { padding: 18px 16px; }
	.tl-tool > h3 { padding: 14px 16px; font-size: 18px; }
	.tl-out { flex-direction: column; }
	.tl-body }
.tl-err:empty { display: none; }
.tb [hidden] { display: none !important; }
.tl-wide { grid-column: 1 / -1; }
#pc-in { font-family: Arial, Helvetica, sans-serif; } /* il font del sito non ha il simbolo dei caratteri nascosti */
textarea.tl-in { resize: vertical; min-height: 88px; }
.tl-qr { grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }
.tl-qr-form { display: grid; gap: 16px; }
.tl-qr-out { display: grid; gap: 14px; justify-items: center; }
.tl-qr-box { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 280px; aspect-ratio: 1; padding: 10px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; text-align: center; }
.tl-qr-box svg { display: block; width: 100%; height: 100%; }
.tl-qr-out .tl-row { width: 100%; max-width: 280px; }