/* VoceUmana — stile front-end integrato con il sito (palette reale: accento #009fe3,
   fondo navy #001536, testo chiaro, font Inter). Variabili in testa per ritoccarlo. */
.voceumana {
	--vu-accent: #009fe3;
	--vu-accent-hover: #0089c4;
	--vu-link: #6ec1e4;
	--vu-text: #eaf1fb;
	--vu-muted: #9fb3d1;
	--vu-panel: rgba(255, 255, 255, .05);
	--vu-border: rgba(255, 255, 255, .14);
	--vu-field: rgba(255, 255, 255, .07);

	max-width: 1000px;
	margin: 2rem auto;
	padding: 1.75rem 2rem;
	background: var(--vu-panel);
	border: 1px solid var(--vu-border);
	border-radius: 14px;
	color: var(--vu-text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.55;
	backdrop-filter: blur(6px);
}
.voceumana h1, .voceumana h2, .voceumana h3 { color: #fff; margin: .2rem 0 1rem; font-weight: 700; }
.voceumana h2 { font-size: 1.6rem; }
.voceumana p { color: var(--vu-text); }
.voceumana small, .voceumana .vu-muted { color: var(--vu-muted); }
.voceumana a { color: var(--vu-link); text-decoration: none; }
.voceumana a:hover { text-decoration: underline; }

.voceumana .button, .voceumana button, .voceumana #wp-submit {
	display: inline-block;
	background: var(--vu-accent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: .6rem 1.3rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease;
}
.voceumana .button:hover, .voceumana button:hover, .voceumana #wp-submit:hover { background: var(--vu-accent-hover); }
.voceumana .button[disabled], .voceumana button[disabled] { opacity: .45; cursor: not-allowed; }
/* L'attributo hidden deve vincere sulle regole display di bottoni/campi. */
.voceumana [hidden] { display: none !important; }
.voceumana .vu-btn-ghost {
	background: transparent;
	border: 1px solid var(--vu-border);
	color: var(--vu-text);
	font-weight: 500;
}
.voceumana .vu-btn-ghost:hover { background: rgba(255, 255, 255, .06); }

.voceumana label { display: block; margin: .1rem 0 .3rem; font-weight: 600; color: var(--vu-text); }
.voceumana input[type="text"], .voceumana input[type="email"], .voceumana input[type="password"],
.voceumana input[type="number"], .voceumana input[type="url"], .voceumana textarea, .voceumana select {
	box-sizing: border-box;
	width: 100%;
	padding: .6rem .75rem;
	background: var(--vu-field);
	border: 1px solid var(--vu-border);
	border-radius: 8px;
	color: #fff;
	font: inherit;
}
.voceumana select { width: auto; min-width: 12rem; }
.voceumana input::placeholder, .voceumana textarea::placeholder { color: var(--vu-muted); }
.voceumana input:focus, .voceumana textarea:focus, .voceumana select:focus {
	outline: none;
	border-color: var(--vu-accent);
	box-shadow: 0 0 0 3px rgba(0, 159, 227, .25);
}

/* ---- Editor "a documento" ---- */
.vu-editor .vu-topfields { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.vu-editor .vu-topfields > div { flex: 1 1 220px; }
.vu-editor .vu-lbl { display: flex; align-items: center; gap: .4rem; margin: .1rem 0 .3rem; }
.vu-editor .vu-lbl label { margin: 0; }
.vu-chapter {
	border: 1px solid var(--vu-border);
	border-radius: 12px;
	margin: 1rem 0;
	background: rgba(255, 255, 255, .03);
	overflow: hidden;
}
.vu-chapter .vu-ch-head {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .85rem 1rem;
	background: rgba(255, 255, 255, .04);
}
.vu-chapter .vu-ch-head input { flex: 1; }
.vu-chapter .vu-ch-actions { display: inline-flex; gap: .25rem; flex: 0 0 auto; }
.vu-chapter .vu-ch-body { padding: 1rem; }
.vu-chapter .vu-chtext { min-height: 150px; resize: none; overflow: hidden; }
.vu-chapters .vu-ch-gap { text-align: center; margin: .1rem 0; }
.vu-ch-insert-btn { color: var(--vu-link); font-size: .85rem; }
.vu-ch-insert-btn:hover { color: var(--vu-accent); border-color: var(--vu-accent); }
.vu-addrow { text-align: center; margin-top: .6rem; }
.vu-paras { margin-top: 1rem; }
.vu-paras .vu-paras-title { font-weight: 600; color: var(--vu-muted); text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; margin: .5rem 0; }
.vu-paragraph {
	border: 1px solid var(--vu-border);
	border-radius: 10px;
	padding: .85rem;
	margin: .6rem 0;
	background: rgba(0, 0, 0, .12);
}
.vu-chapter .vu-ch-voice { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.vu-chapter .vu-ch-voice label { font-weight: 600; color: var(--vu-muted); margin: 0; }
/* I due punti stanno dopo l'iconcina e le restano attaccati. */
.vu-chapter .vu-ch-voice .vu-colon { margin-left: -.3rem; font-weight: 600; color: var(--vu-muted); }
.vu-chapter .vu-ch-voice .vu-voice { margin: 0; }
.vu-paragraph .vu-p-top { display: flex; gap: .7rem; align-items: flex-start; }
.vu-paragraph .vu-p-top .vu-ptext { flex: 1; }
.vu-paragraph .vu-p-actions { flex: 0 0 auto; display: inline-flex; gap: .25rem; }
.vu-paragraph .vu-p-idx {
	flex: 0 0 auto;
	width: 1.7rem; height: 1.7rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--vu-accent);
	color: #fff; font-size: .8rem; font-weight: 700;
	margin-top: .2rem;
}
.vu-paragraph .vu-ptext { min-height: 140px; resize: none; overflow: hidden; }
.vu-paragraph .vu-p-ctrl { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .55rem; padding-left: 2.4rem; }
.vu-paragraph .vu-p-ctrl label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-weight: 500; color: var(--vu-muted); }
.vu-paragraph .vu-p-ctrl .vu-voice { margin: 0; }
.vu-paragraph .vu-p-ctrl > * { vertical-align: middle; }
.vu-paragraph .vu-count { margin-left: auto; color: var(--vu-muted); font-size: .85rem; }
.vu-paragraph .vu-audio-slot:empty, .vu-paragraph .vu-error-slot:empty { display: none; }

/* Clone di "Salva e genera" limitato al paragrafo: stile identico agli altri ghost,
   con l'iconcina di aiuto dentro al pulsante. */
.vu-paragraph .vu-p-gen { display: inline-flex; align-items: center; gap: .5rem; }
.vu-paragraph .vu-p-gen:disabled { opacity: .45; cursor: not-allowed; }
/* Il tooltip dell'iconcina interna non deve essere tagliato dal pulsante. */
.vu-paragraph .vu-p-gen .vu-help { cursor: help; }

/* Tooltip: hover, focus da tastiera e tap su mobile (.is-open). */
.voceumana [data-vu-tip] { position: relative; }
.voceumana .vu-help {
	flex: 0 0 auto;
	width: 1.15rem; height: 1.15rem; padding: 0;
	display: inline-grid; place-items: center;
	border: 1px solid var(--vu-border); border-radius: 50%;
	background: transparent; color: var(--vu-muted);
	font-size: .72rem; font-weight: 700; line-height: 1;
}
.voceumana .vu-help:hover { background: transparent; color: var(--vu-accent); border-color: var(--vu-accent); }
.voceumana [data-vu-tip]::after {
	content: attr(data-vu-tip);
	position: absolute; bottom: calc(100% + .45rem); left: 50%;
	transform: translateX(-50%);
	width: max-content; max-width: 17rem;
	padding: .45rem .6rem;
	border: 1px solid var(--vu-border); border-radius: 8px;
	background: #10233c; color: var(--vu-text);
	font-size: .78rem; font-weight: 400; line-height: 1.35; text-align: left;
	white-space: normal;
	opacity: 0; visibility: hidden;
	transition: opacity .12s ease;
	z-index: 5;
}
.voceumana [data-vu-tip]:hover::after,
.voceumana [data-vu-tip]:focus-visible::after,
.voceumana [data-vu-tip].is-open::after { opacity: 1; visibility: visible; }
.voceumana .vu-preview {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 auto;
	width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 50%;
	background: var(--vu-accent); color: #fff;
}
.voceumana .vu-preview:hover { background: var(--vu-accent-hover); }
.voceumana .vu-preview.is-playing { background: #e0765a; }
.voceumana .vu-preview.is-playing:hover { background: #cf6349; }
.voceumana .vu-ico { width: 1.05rem; height: 1.05rem; display: block; flex: 0 0 auto; }
.vu-params { margin: .7rem 0 .2rem 2.4rem; padding: .75rem; border: 1px dashed var(--vu-border); border-radius: 8px; }
.vu-slider { display: grid; grid-template-columns: 8rem 1fr 3rem; align-items: center; gap: .6rem; margin: .35rem 0; }
.vu-slider label { display: inline; margin: 0; font-weight: 500; }
.vu-slider input[type="range"] { width: 100%; accent-color: var(--vu-accent); }
.vu-slider .vu-val { text-align: right; color: var(--vu-muted); font-variant-numeric: tabular-nums; }
.vu-params .vu-boost { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; }
.vu-params .vu-boost input { width: auto; }

/* Barra riepilogo sticky */
.vu-bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.25rem -2rem -1.75rem;
	padding: 1rem 2rem;
	background: rgba(0, 21, 54, .92);
	border-top: 1px solid var(--vu-border);
	backdrop-filter: blur(6px);
	border-radius: 0 0 14px 14px;
}
.vu-bar .vu-total { color: var(--vu-text); font-weight: 600; }
.vu-bar .vu-total.vu-over { color: #ff8a8a; }
.vu-bar .vu-spacer { margin-left: auto; }
.vu-msg { color: var(--vu-muted); margin-top: .5rem; }

/* ---- Lista progetti ---- */
.vu-projects-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.vu-projects-head h2 { margin: 0; }
.vu-head-actions { display: flex; align-items: center; gap: 1.1rem; }
.vu-logout, .vu-navlink { color: var(--vu-muted); font-size: .9rem; text-decoration: none; white-space: nowrap; }
.vu-logout:hover, .vu-navlink:hover { color: var(--vu-accent); text-decoration: underline; }

.voceumana-project-list { list-style: none; padding: 0; margin: 1rem 0; }
.voceumana-project-list li { padding: .85rem 0; border-bottom: 1px solid var(--vu-border); display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.voceumana-project-list li a { font-weight: 600; font-size: 1.05rem; }
.vu-status, .vu-progress, .vu-pstatus { color: var(--vu-muted); font-size: .85rem; }
.vu-status { padding: .1rem .55rem; border: 1px solid var(--vu-border); border-radius: 999px; }

/* ---- Dettaglio progetto ---- */
.voceumana-detail .vu-chapter .vu-ch-head { justify-content: space-between; }
.voceumana-detail .vu-p-top .vu-edit { flex: 1; min-height: 60px; resize: vertical; }
.voceumana-detail .vu-p-ctrl { padding-left: 0; }
.voceumana-detail .vu-sel { font-weight: 500; color: var(--vu-muted); }
.voceumana-detail .vu-audio-row { margin-top: .5rem; }
.voceumana-detail audio { width: 100%; max-width: 360px; margin: .2rem 0; }
.vu-status.is-done { border-color: rgba(90, 200, 140, .5); color: #83d8a6; }
.vu-status.is-failed { border-color: rgba(230, 120, 120, .55); color: #f0a5a5; }
.vu-status.is-partial { border-color: rgba(220, 180, 90, .5); color: #e3c778; }
.vu-status.is-processing, .vu-status.is-pending { color: var(--vu-muted); }
.vu-status.is-draft { color: var(--vu-muted); }
.vu-status.is-modified { border-color: rgba(220, 180, 90, .5); color: #e3c778; }
/* Player audio compatto (tematizzato) + tasti download coerenti */
.voceumana .vu-audio-row { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.voceumana .vu-audio-row audio { display: none; }
.voceumana .vu-ap {
	display: flex; align-items: center; gap: .7rem;
	flex: 1 1 300px; min-width: 240px; max-width: 480px;
	padding: .3rem .8rem .3rem .35rem;
	background: var(--vu-field); border: 1px solid var(--vu-border); border-radius: 999px;
}
.voceumana .vu-ap-play {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 auto;
	width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 50%;
	background: var(--vu-accent); color: #fff;
}
.voceumana .vu-ap-play:hover { background: var(--vu-accent-hover); }
.voceumana .vu-ap-time { color: var(--vu-muted); font-size: .8rem; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.voceumana .vu-ap-seek {
	-webkit-appearance: none; appearance: none;
	flex: 1 1 auto; width: auto; height: 5px; padding: 0; margin: 0; border: 0; border-radius: 999px; cursor: pointer;
	background: rgba(255, 255, 255, .18);
	background-image: linear-gradient(var(--vu-accent), var(--vu-accent));
	background-repeat: no-repeat; background-size: var(--vu-ap-fill, 0%) 100%;
	box-shadow: none;
}
.voceumana .vu-ap-seek:focus { outline: none; box-shadow: none; }
.voceumana .vu-ap-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--vu-accent); }
.voceumana .vu-ap-seek::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--vu-accent); }
/* Tasti download: stessa classe .button .vu-btn-ghost degli altri ghost + icona */
.voceumana .vu-dl { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.voceumana .vu-dl:hover { text-decoration: none; }
.voceumana .vu-ch-dl, .voceumana .vu-dl-project { flex: 0 0 auto; }

/* Login: pannello più stretto */
/* Pannello API/webhook */
.voceumana-apikey .vu-section { margin: 1.3rem 0; padding-top: 1.1rem; border-top: 1px solid var(--vu-border); }
.voceumana-apikey .vu-section:first-of-type { border-top: 0; padding-top: 0; }
.voceumana-apikey h3 { margin: 0 0 .35rem; }
.voceumana-apikey .vu-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .9rem; }
.voceumana-apikey code { word-break: break-all; }
.voceumana-apikey .vu-key-plain-row { margin: .6rem 0; }

.voceumana.voceumana-login { max-width: 420px; }
.voceumana .login-remember { font-weight: 400; color: var(--vu-muted); }

@media (max-width: 640px) {
	.voceumana { padding: 1.25rem; }
	.vu-slider { grid-template-columns: 6rem 1fr 2.5rem; }
	.vu-paragraph .vu-p-ctrl, .vu-params { padding-left: 0; margin-left: 0; }
}