/* Wlad Quiz — estilos frontend (responsive móvil/escritorio) */
.wq-app { max-width: 760px; margin: 0 auto; font-size: 16px; line-height: 1.5; }
.wq-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.wq-title { margin-top: 0; }
.wq-note { color: #64748b; font-size: .95em; }

/* Formulario inicial (obsoleto: el registro ahora es opcional y se pide al
   final, ver .wq-personalize-form más abajo, que reutiliza estos mismos
   estilos de campo). Se conserva el selector por compatibilidad. */
.wq-start-form label, .wq-personalize-form label { display: block; margin-bottom: 14px; font-weight: 600; }
.wq-start-form input, .wq-personalize-form input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 16px; }
.wq-hp { position: absolute !important; left: -9999px !important; height: 1px; width: 1px; opacity: 0; }
.wq-error { color: #dc2626; font-weight: 600; }
.wq-toast {
	position: fixed;
	top: 20px;
	left: 50%;
	max-width: min(90vw, 420px);
	background: #0f172a;
	color: #fff;
	padding: 14px 22px;
	border-radius: 10px;
	font-size: 1.05em;
	font-weight: 700;
	text-align: center;
	line-height: 1.4;
	box-shadow: 0 6px 20px rgba(0,0,0,.18);
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -12px);
	transition: opacity .3s ease, transform .3s ease;
}
.wq-toast.wq-toast-show { opacity: 1; transform: translate(-50%, 0); }

/* Botones */
.wq-btn { padding: 12px 20px; border-radius: 8px; border: 1px solid #cbd5e1; background: #f8fafc; font-size: 16px; cursor: pointer; }
.wq-btn:disabled { opacity: .5; cursor: not-allowed; }
.wq-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.wq-btn-submit { background: #16a34a; border-color: #16a34a; color: #fff; }
.wq-btn-download { background: #0f172a; border-color: #0f172a; color: #fff; }
.wq-download-wrap { margin: -8px 0 20px; }

/* Barra superior y progreso */
.wq-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wq-progress-text { font-weight: 700; color: #334155; }
.wq-timer { font-variant-numeric: tabular-nums; background: #0f172a; color: #fff; padding: 4px 10px; border-radius: 6px; font-weight: 700; }
.wq-progress { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-bottom: 16px; }
.wq-progress-bar { height: 100%; background: #2563eb; transition: width .3s; }
.wq-tabwarn { color: #b45309; background: #fef3c7; padding: 8px 12px; border-radius: 8px; font-size: .9em; }

/* Pregunta y opciones */
.wq-question { font-size: 1.15em; font-weight: 600; margin-bottom: 12px; }
.wq-qimage { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0 16px; }
.wq-hint { color: #64748b; font-size: .9em; }
.wq-options { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.wq-option { display: flex; align-items: center; gap: 12px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s; }
.wq-option:hover { border-color: #2563eb; background: #eff6ff; }
.wq-option input { width: 20px; height: 20px; flex-shrink: 0; }
.wq-letter { font-weight: 800; color: #2563eb; width: 22px; flex-shrink: 0; }
.wq-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }

/* Anticopia */
.wq-noselect { -webkit-user-select: none; -moz-user-select: none; user-select: none; }

/* Reporte — degradé de marca (igual al hero de docsfun.com) + marca de agua
   diagonal anclada a la tarjeta. Objetivo: que si alguien pega un rectángulo
   encima del nombre/fecha para falsificarlos, se note el corte en el degradé
   y el desalineado del patrón de la marca de agua. */
.wq-report {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #001f3f 0%, #003366 60%, #005599 100%);
	border-color: rgba(255,255,255,.15);
}
.wq-report::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-repeat: repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Ctext x='-10' y='120' font-family='Arial, sans-serif' font-size='20' font-weight='700' fill='rgba(255,255,255,0.07)' transform='rotate(-30 110 110)'%3EDOCSFUN.COM%3C/text%3E%3C/svg%3E");
}
.wq-report h2, .wq-report .wq-quiz-name, .wq-report .wq-score-badge, .wq-report .wq-report-table, .wq-report .wq-result-logo { position: relative; z-index: 1; }
.wq-report h2 { margin-top: 0; font-size: 30px; color: #ffffff; }
.wq-quiz-name { font-weight: 700; color: #ffc107; font-size: 1.15em; margin: -8px 0 18px; }
.wq-result-logo { position: absolute; top: 16px; right: 16px; width: 110px; height: 110px; opacity: 1; pointer-events: none; user-select: none; }
.wq-score-badge { display: inline-flex; flex-direction: column; align-items: center; font-size: 37px; font-weight: 800; padding: 18px 28px; border-radius: 14px; margin-bottom: 16px; }
.wq-score-badge span { font-size: .38em; letter-spacing: 2px; }
.wq-pass { background: #dcfce7; color: #15803d; }
.wq-fail { background: #fee2e2; color: #b91c1c; }
.wq-report-table { width: 100%; border-collapse: collapse; }
.wq-report-table th { text-align: left; padding: 8px 12px 8px 0; color: #b8cbe0; font-weight: 600; width: 40%; font-size: 18px; }
.wq-report-table td { padding: 8px 0; font-weight: 600; color: #ffffff; font-size: 18px; }
.wq-report-table tr { border-bottom: 1px solid rgba(255,255,255,.18); }
@media (max-width: 480px) {
	.wq-result-logo { width: 70px; height: 70px; top: 10px; right: 10px; }
}

/* "Personalize your result": bloque que aparece justo después del resultado
   en vivo (sin datos) cuando el estudiante NO se ha registrado todavía. Al
   enviarse, guarda nombre/correo en el intento ya terminado y se vuelve a
   pintar el resultado con esos datos + botón de descarga. */
.wq-personalize { text-align: center; }
.wq-personalize-title { margin: 4px 0 6px; font-size: 26px; font-weight: 800; color: #001f3f; }
.wq-personalize .wq-note { margin-bottom: 18px; }
.wq-personalize-form { max-width: 420px; margin: 0 auto; text-align: left; }

/* Resumen por categoría (tarjeta clara, no la oscura de wq-report) */
.wq-categories .wq-category-table th { color: #334155; font-size: 16px; width: 55%; }
.wq-categories .wq-category-table td { color: #0f172a; font-size: 16px; }
.wq-categories .wq-category-table tr { border-bottom: 1px solid #e2e8f0; }
.wq-cat-percent { color: #64748b; font-weight: 600; }

/* Revisión */
.wq-review-title { margin: 24px 0 12px; }
.wq-review-item { border-left: 6px solid #cbd5e1; }
.wq-review-item.wq-ok { border-left-color: #16a34a; }
.wq-review-item.wq-partial { border-left-color: #f59e0b; }
.wq-review-item.wq-wrong { border-left-color: #dc2626; }
.wq-review-head { font-weight: 600; margin-bottom: 8px; }
.wq-pts { float: right; font-size: .85em; color: #64748b; }
.wq-review-opts { list-style: none; padding: 0; margin: 0; }
.wq-review-opts li { padding: 6px 10px; border-radius: 6px; margin-bottom: 4px; }
.wq-review-opts li.wq-correct { background: #dcfce7; color: #15803d; font-weight: 600; }
.wq-review-opts li.wq-given:not(.wq-correct) { background: #fee2e2; color: #b91c1c; }

@media (max-width: 600px) {
	.wq-card { padding: 16px; }
	.wq-nav { flex-direction: column-reverse; }
	.wq-nav .wq-btn { width: 100%; }
}