/* Votazioni Quesiti – stili frontend (tutto sotto .vq-app, nessuna interferenza col tema) */

.vq-app {
	--vq-colore: #1d4ed8;
	--vq-testo: #111827;
	--vq-tenue: #6b7280;
	--vq-bordo: #e5e7eb;
	--vq-sfondo: #ffffff;
	--vq-sfondo-2: #f9fafb;
	--vq-fav: #15803d;
	--vq-con: #b91c1c;
	--vq-ast: #6b7280;
	--vq-raggio: 10px;
	color: var(--vq-testo);
	font-size: 16px;
	line-height: 1.55;
	max-width: 960px;
	margin: 0 auto;
	box-sizing: border-box;
}
.vq-app *, .vq-app *::before, .vq-app *::after { box-sizing: border-box; }
.vq-app [hidden] { display: none !important; }

/* Navigazione */
.vq-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 20px; padding: 6px; background: var(--vq-sfondo-2); border: 1px solid var(--vq-bordo); border-radius: var(--vq-raggio); }
.vq-nav__voce { padding: 8px 14px; border-radius: 8px; text-decoration: none !important; color: var(--vq-testo) !important; font-weight: 600; font-size: 15px; }
.vq-nav__voce:hover { background: #fff; }
.vq-nav__voce.is-attiva { background: var(--vq-colore); color: #fff !important; }
.vq-nav__voce--admin { color: var(--vq-tenue) !important; font-weight: 500; }
.vq-nav__spazio { flex: 1; }

.vq-schede-filtro { display: flex; gap: 4px; border-bottom: 2px solid var(--vq-bordo); margin: 0 0 18px; flex-wrap: wrap; }
.vq-schede-filtro a { padding: 8px 14px; text-decoration: none !important; color: var(--vq-tenue) !important; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.vq-schede-filtro a.is-attiva { color: var(--vq-colore) !important; border-bottom-color: var(--vq-colore); }

/* Avvisi */
.vq-avviso { padding: 12px 16px; border-radius: var(--vq-raggio); margin: 0 0 16px; border-left: 4px solid; background: var(--vq-sfondo-2); }
.vq-avviso ul { margin: 6px 0 0 18px; padding: 0; }
.vq-avviso--ok { border-color: var(--vq-fav); background: #f0fdf4; }
.vq-avviso--info { border-color: var(--vq-colore); background: #eff6ff; }
.vq-avviso--errore { border-color: var(--vq-con); background: #fef2f2; }

/* Bottoni */
.vq-btn { display: inline-block; padding: 11px 20px; border-radius: 8px; background: var(--vq-colore); color: #fff !important; border: 2px solid var(--vq-colore); font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none !important; cursor: pointer; transition: filter .15s; }
.vq-btn:hover { filter: brightness(1.08); }
.vq-btn--secondario { background: #fff; color: var(--vq-colore) !important; }
.vq-btn--piccolo { padding: 7px 14px; font-size: 14px; }
.vq-btn.is-attesa, .vq-btn:disabled { opacity: .6; cursor: progress; }
.vq-link-btn { background: none; border: 0; padding: 0; color: var(--vq-colore); cursor: pointer; font: inherit; font-size: 14px; text-decoration: underline; }
.vq-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

/* Elenco */
.vq-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.vq-scheda { border: 1px solid var(--vq-bordo); border-radius: var(--vq-raggio); padding: 16px; background: var(--vq-sfondo); display: flex; flex-direction: column; gap: 6px; }
.vq-scheda__titolo { margin: 4px 0 0; font-size: 18px; line-height: 1.3; }
.vq-scheda__titolo a { text-decoration: none; color: inherit; }
.vq-scheda__estratto { margin: 0; color: #374151; font-size: 15px; flex: 1; }
.vq-scheda .vq-btn { align-self: flex-start; margin-top: 6px; }
.vq-etichetta-votato { font-size: 13px; color: var(--vq-fav); font-weight: 600; }
.vq-meta { color: var(--vq-tenue); font-size: 14px; margin: 0 0 4px; }
.vq-paginazione { display: flex; gap: 16px; justify-content: center; align-items: center; margin: 22px 0; }

/* Badge */
.vq-badge, .vq-stato, .vq-esito-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.vq-badge--favorevole { background: #dcfce7; color: var(--vq-fav); }
.vq-badge--contrario { background: #fee2e2; color: var(--vq-con); }
.vq-badge--astenuto { background: #f3f4f6; color: #374151; }
.vq-stato--aperto { background: #dbeafe; color: #1e40af; }
.vq-stato--chiuso { background: #f3f4f6; color: #374151; }
.vq-stato--nascosto { background: #fef3c7; color: #92400e; }
.vq-stato--bozza { background: #ede9fe; color: #5b21b6; }
.vq-esito-badge--approvato { background: #dcfce7; color: var(--vq-fav); }
.vq-esito-badge--respinto { background: #fee2e2; color: var(--vq-con); }
.vq-esito-badge--parita, .vq-esito-badge--nessun_voto { background: #f3f4f6; color: #374151; }

/* Scheda quesito */
.vq-quesito__testata { margin-bottom: 18px; }
.vq-quesito__titolo { margin: 8px 0 6px; font-size: 26px; line-height: 1.25; }
.vq-chip { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }
.vq-chip li { background: var(--vq-sfondo-2); border: 1px solid var(--vq-bordo); border-radius: 999px; padding: 3px 12px; font-size: 13px; color: #374151; margin: 0; }
.vq-contenuto { margin: 0 0 20px; }
.vq-contenuto img { max-width: 100%; height: auto; }
.vq-box { border: 1px solid var(--vq-bordo); border-radius: var(--vq-raggio); padding: 18px 20px; margin: 0 0 18px; background: var(--vq-sfondo); }
.vq-box h3 { margin: 0 0 12px; font-size: 19px; }
.vq-box--voto { border-color: var(--vq-colore); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vq-colore) 12%, transparent); }
.vq-box--proponente { background: #fffbeb; border-color: #fcd34d; }
.vq-box--tenue { background: var(--vq-sfondo-2); }
.vq-sottotitolo { margin: 16px 0 8px; font-size: 16px; }
.vq-sottotitolo small { font-weight: 400; color: var(--vq-tenue); }
.vq-voto-attuale { background: var(--vq-sfondo-2); padding: 10px 14px; border-radius: 8px; }

/* Form */
.vq-form label { display: block; font-weight: 600; margin: 0 0 4px; }
.vq-form input[type="text"], .vq-form input[type="email"], .vq-form input[type="datetime-local"], .vq-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font: inherit; background: #fff; color: var(--vq-testo); }
.vq-form input:focus, .vq-form textarea:focus { outline: 2px solid var(--vq-colore); outline-offset: 1px; border-color: var(--vq-colore); }
.vq-form input[type="file"] { display: block; margin: 4px 0; max-width: 100%; }
.vq-form p { margin: 0 0 16px; }
.vq-form-quesito h2 { margin-top: 0; }
.vq-campo { margin: 0 0 18px; }
.vq-etichetta { display: block; font-weight: 600; margin: 0 0 6px; }
.vq-aiuto { display: block; color: var(--vq-tenue); font-size: 13px; font-weight: 400; margin-top: 4px; }
.vq-gruppo { border: 1px solid var(--vq-bordo); border-radius: var(--vq-raggio); padding: 14px 16px; margin: 0 0 18px; }
.vq-gruppo legend { font-weight: 700; padding: 0 6px; }
.vq-form .vq-radio, .vq-form .vq-check { font-weight: 400; display: block; margin: 6px 0; cursor: pointer; }
.vq-form .vq-check--inline { display: inline-block; margin-right: 16px; }
.vq-ruoli, .vq-sottogruppo { margin: 8px 0 8px 24px; padding: 8px 12px; background: var(--vq-sfondo-2); border-radius: 8px; }
.vq-griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.vq-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.vq-invio { margin-top: 8px; }
.vq-form--riga { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 12px; }
.vq-form--riga label { font-weight: 400; }
.vq-form--riga input[type="datetime-local"] { width: auto; }
.vq-form-inline { margin: 0; }
.vq-rimuovi { display: inline !important; font-weight: 400 !important; color: var(--vq-con); font-size: 13px; }

.vq-dettagli { margin: 0 0 16px; border: 1px solid var(--vq-bordo); border-radius: var(--vq-raggio); padding: 10px 14px; }
.vq-dettagli summary { cursor: pointer; font-weight: 600; }
.vq-dettagli .vq-contenuto { margin: 10px 0 0; }

/* Login social */
.vq-social { margin: 14px 0 6px; padding: 14px 16px; border: 1px dashed var(--vq-bordo); border-radius: var(--vq-raggio); background: var(--vq-sfondo-2); text-align: center; }
.vq-social__testo { margin: 0 0 10px; font-size: 14px; color: #374151; }
.vq-separatore { display: flex; align-items: center; gap: 10px; color: var(--vq-tenue); font-size: 13px; margin: 14px 0; }
.vq-separatore::before, .vq-separatore::after { content: ""; flex: 1; border-top: 1px solid var(--vq-bordo); }
.vq-gruppo--invito { border-color: #c7d2fe; background: #f8faff; }

/* Opzioni di voto */
.vq-opzioni { border: 0; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vq-opzione { position: relative; margin: 0 !important; cursor: pointer; }
.vq-opzione input { position: absolute; opacity: 0; inset: 0; }
.vq-opzione span { display: block; text-align: center; padding: 16px 8px; border: 2px solid var(--vq-bordo); border-radius: var(--vq-raggio); font-weight: 700; font-size: 17px; background: #fff; transition: all .15s; }
.vq-opzione:hover span { border-color: #9ca3af; }
.vq-opzione input:focus-visible + span { outline: 3px solid var(--vq-colore); outline-offset: 2px; }
.vq-opzione--favorevole input:checked + span { background: var(--vq-fav); border-color: var(--vq-fav); color: #fff; }
.vq-opzione--contrario input:checked + span { background: var(--vq-con); border-color: var(--vq-con); color: #fff; }
.vq-opzione--astenuto input:checked + span { background: var(--vq-ast); border-color: var(--vq-ast); color: #fff; }

/* Risultati */
.vq-esito { font-size: 20px; margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; background: var(--vq-sfondo-2); }
.vq-esito--approvato { background: #f0fdf4; color: var(--vq-fav); }
.vq-esito--respinto { background: #fef2f2; color: var(--vq-con); }
.vq-parziali { color: var(--vq-tenue); font-size: 14px; }
.vq-barra { margin: 0 0 10px; }
.vq-barra__testa { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 3px; }
.vq-barra__traccia { height: 12px; background: #f3f4f6; border-radius: 999px; overflow: hidden; }
.vq-barra__valore { height: 100%; border-radius: 999px; min-width: 2px; }
.vq-barra__valore--favorevole { background: var(--vq-fav); }
.vq-barra__valore--contrario { background: var(--vq-con); }
.vq-barra__valore--astenuto { background: #9ca3af; }
.vq-totale { margin: 6px 0 0; font-size: 14px; }
.vq-voti { list-style: none; margin: 0; padding: 0; }
.vq-voto { border-top: 1px solid var(--vq-bordo); padding: 10px 0; margin: 0; }
.vq-voto__testa { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vq-voto__chi { font-weight: 600; }
.vq-voto__chi--anonimo { font-weight: 400; color: var(--vq-tenue); font-style: italic; }
.vq-voto__data { color: var(--vq-tenue); font-size: 13px; }
.vq-voto__nota { margin: 6px 0 0; padding: 8px 12px; background: var(--vq-sfondo-2); border-radius: 8px; font-size: 15px; }
.vq-allegati { list-style: none; margin: 6px 0 0; padding: 0; }
.vq-allegati li { margin: 3px 0; font-size: 14px; }
.vq-vuoto, .vq-nota-piccola { color: var(--vq-tenue); font-size: 14px; }
.vq-vuoto-grande { text-align: center; padding: 32px 16px; border: 2px dashed var(--vq-bordo); border-radius: var(--vq-raggio); color: var(--vq-tenue); margin-bottom: 16px; }

/* Tabelle area personale */
.vq-tabella-wrap { overflow-x: auto; }
.vq-tabella { width: 100%; border-collapse: collapse; font-size: 15px; }
.vq-tabella th, .vq-tabella td { padding: 10px 8px; border-bottom: 1px solid var(--vq-bordo); text-align: left; vertical-align: top; }
.vq-tabella th { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--vq-tenue); }
.vq-azioni-cella { white-space: nowrap; }

/* Pagine autonome (link email) */
body.vq-standalone { margin: 0; background: #f3f4f6; font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
.vq-app--standalone { max-width: 680px; margin: 32px auto; background: #fff; border-radius: 14px; padding: 0 28px 28px; box-shadow: 0 10px 30px rgba(0,0,0,.06); overflow: hidden; }
.vq-standalone__testata { margin: 0 -28px 20px; padding: 14px 28px; background: var(--vq-colore); color: #fff; font-weight: 600; font-size: 14px; }
.vq-standalone__testata a { color: #fff; text-decoration: none; }
.vq-standalone__titolo { font-size: 24px; margin: 0 0 14px; }

@media (max-width: 640px) {
	.vq-opzioni { grid-template-columns: 1fr; }
	.vq-griglia-2 { grid-template-columns: 1fr; }
	.vq-quesito__titolo { font-size: 22px; }
	.vq-box { padding: 14px; }
	.vq-tabella thead { display: none; }
	.vq-tabella tr { display: block; border: 1px solid var(--vq-bordo); border-radius: 8px; margin: 0 0 10px; padding: 6px 10px; }
	.vq-tabella td { display: block; border: 0; padding: 4px 0; }
	.vq-tabella td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--vq-tenue); font-size: 13px; }
	.vq-app--standalone { margin: 0; border-radius: 0; padding: 0 16px 20px; }
	.vq-standalone__testata { margin: 0 -16px 16px; padding: 12px 16px; }
}

/* Anteprima prima dell'avvio (v1.2) */
.vq-passi { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; counter-reset: none; }
.vq-passi li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--vq-sfondo-2); border: 1px solid var(--vq-bordo); font-size: 14px; color: var(--vq-tenue); }
.vq-passi li span { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; background: #e5e7eb; color: #374151; font-weight: 700; font-size: 13px; }
.vq-passi li.is-attivo { border-color: var(--vq-colore); color: var(--vq-testo); font-weight: 600; }
.vq-passi li.is-attivo span { background: var(--vq-colore); color: #fff; }
.vq-passi li.is-fatto span { background: var(--vq-fav); color: #fff; }
.vq-avviso--attenzione { border-color: #d97706; background: #fffbeb; }
.vq-riepilogo { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 8px 16px; margin: 0 0 12px; }
.vq-riepilogo dt { font-weight: 600; color: #374151; margin: 0; }
.vq-riepilogo dd { margin: 0; }
.vq-cornice { border: 2px dashed var(--vq-bordo); border-radius: var(--vq-raggio); padding: 16px; background: #fff; }
.vq-opzioni--finte .vq-opzione span { cursor: default; opacity: .75; }
.vq-anteprima-email { width: 100%; height: 640px; border: 1px solid var(--vq-bordo); border-radius: var(--vq-raggio); background: #f3f4f6; }
.vq-link-btn--pericolo { color: var(--vq-con); }
.vq-riga-bozza td { background: #fffbeb; }
@media (max-width: 640px) {
	.vq-riepilogo { grid-template-columns: 1fr; gap: 2px; }
	.vq-riepilogo dd { margin-bottom: 10px; }
	.vq-anteprima-email { height: 520px; }
}
