/* Bloque de preguntas/encuesta: articulos del blog y final de pedido.
   Extraido de class/vvq_bloque.php el 2026-09-23 para que viaje en el compilado comun
   en vez de reenviarse en linea (9,2 KB) en cada articulo.
   Doc: docs/rendimiento/AUDITORIA_HTML_DOM_2026-09-23.md §5.3
   Lo sigue emitiendo vvq_estilos() donde no hay compilado (ajax, arneses de QA). */
/* Bloque de preguntas del final de pedido */
.vvq_card { background:#fff; border:1px solid #f0f0f3; border-radius:22px; box-shadow:0 6px 28px rgba(41,44,57,.07); padding:26px 22px; margin-bottom:30px; }
.vvq_head { display:flex; align-items:flex-start; gap:22px; flex-wrap:wrap; }
.vvq_autor { text-align:center; flex:0 0 132px; max-width:132px; }
.vvq_avatar { width:104px; height:104px; border-radius:50%; object-fit:cover; background:#f4f4f7; display:block; margin:0 auto 10px; }
.vvq_autor_nombre { display:block; font-weight:700; color:var(--color-negro,#292c39); font-size:14px; line-height:1.3; }
.vvq_autor_rol { display:block; color:var(--color-sub,#707070); font-size:13px; line-height:1.4; }
.vvq_autor_rol b { color:var(--color-fucsia,#f04d98); font-weight:600; }
.vvq_head_txt { flex:1 1 260px; min-width:230px; padding-left:22px; border-left:1px solid #ececf1; }
.vvq_titulo { font-size:26px; line-height:1.25; font-weight:600; color:var(--color-negro,#292c39); margin:0 0 12px; }
.vvq_titulo em { font-style:normal; color:var(--color-fucsia,#f04d98); }
.vvq_sub { color:var(--color-sub,#707070); font-size:15px; margin:0 0 12px; }
.vvq_shield { display:flex; align-items:center; gap:9px; color:var(--color-sub,#707070); font-size:15px; margin:0; }
.vvq_shield svg { flex:0 0 auto; color:var(--color-fucsia,#f04d98); }

.vvq_q { display:flex; align-items:center; gap:14px; margin:26px 0 16px; }
.vvq_num { flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--color-fucsia,#f04d98); color:#fff; font-weight:600; font-size:15px; display:flex; align-items:center; justify-content:center; }
.vvq_preg { font-weight:600; font-size:16px; color:var(--color-negro,#292c39); line-height:1.35; }
.vvq_ayuda { display:block; margin-top:3px; font-weight:400; font-size:13px; color:var(--color-sub,#707070); }

.vvq_opts { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.vvq_opt { position:relative; min-height:62px; margin:0; padding:14px 16px; display:flex; align-items:center; justify-content:center; text-align:center; gap:10px; background:#fff; border:1px solid #e9e9ef; border-radius:14px; box-shadow:0 2px 6px rgba(41,44,57,.05); color:var(--color-negro,#292c39); font-size:15px; font-weight:600; line-height:1.3; cursor:pointer; transition:all .15s ease; }
.vvq_opt:hover { border-color:var(--color-fucsia,#f04d98); box-shadow:0 4px 12px rgba(240,77,152,.16); }
.vvq_opt.is-on { background:var(--color-fucsia,#f04d98); border-color:var(--color-fucsia,#f04d98); color:#fff; box-shadow:0 6px 16px rgba(240,77,152,.28); }
.vvq_opt.is-on:after { content:''; position:absolute; top:-9px; right:-9px; width:26px; height:26px; border-radius:50%; background:#fff; border:1px solid #f2d3e2; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f04d98' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size:15px 15px; background-repeat:no-repeat; background-position:center; }
.vvq_opts_lock .vvq_opt { cursor:default; pointer-events:none; opacity:.7; }
.vvq_opts_lock .vvq_opt.is-on { opacity:1; }
/* Opciones con texto largo o con casilla: columna mas ancha y texto a la izquierda */
.vvq_opts_txt { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.vvq_opts_txt .vvq_opt { justify-content:flex-start; text-align:left; }
/* Emoji del principio del texto: columna propia a la izquierda, para que la
   segunda linea del texto no se meta por debajo del icono */
.vvq_ico { flex:0 0 23px; width:20px; text-align:center; font-size:18px; line-height:1.2; }
.vvq_ico ~ .vvq_opt_txt { flex:1 1 auto; text-align:left; }
/* La casilla no se ve: la tarjeta marcada en fucsia ya dice que esta elegida,
   igual que en las preguntas de respuesta unica */
.vvq_opt_chk input { position:absolute; opacity:0; width:0; height:0; }
.vvq_sel_oculto { position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }

.vvq_sep { height:1px; background:#f4e4ec; margin:26px 0 0; }
/* box-sizing explicito: sin el, el padding y el borde se suman al 100% y el
   textarea se sale de la tarjeta. resize vertical, para que no lo saquen
   arrastrando la esquina */
.vvq_txt { box-sizing:border-box; width:100%; max-width:100%; resize:vertical; padding:14px 16px; border:1px solid #e9e9ef; border-radius:14px; background:#fff; font-size:15px; line-height:1.5; color:var(--color-negro,#292c39); box-shadow:0 2px 6px rgba(41,44,57,.05); font-family:inherit; }
.vvq_txt:focus { outline:none; border-color:var(--color-fucsia,#f04d98); box-shadow:0 4px 12px rgba(240,77,152,.16); }
.vvq_acciones { display:flex; align-items:center; justify-content:flex-end; gap:14px; flex-wrap:wrap; margin-top:16px; }
.vvq_card .comop { display:none; color:var(--color-fucsia,#f04d98); font-size:15px; }
.vvq_card .comop b { display:inline-block; margin-top:14px; }
.vvq_card .btn-uno { float:none !important; }

.vvq_foot { margin-top:26px; }
.vvq_foot_ayuda { display:flex; align-items:flex-start; gap:10px; color:var(--color-sub,#707070); font-size:13px; line-height:1.45; margin:0 0 16px; }
.vvq_foot_ayuda svg { flex:0 0 auto; margin-top:2px; color:var(--color-fucsia,#f04d98); }

@media (max-width: 575px) {
	/* La cabecera NO se apila: el texto encoge y conserva su linea divisoria */
	.vvq_card { padding:20px 16px; border-radius:18px; margin-left:-10px; margin-right:-10px; }
	.vvq_head { gap:0; }
	.vvq_autor { flex:0 0 86px; max-width:86px; }
	.vvq_avatar { width:74px; height:74px; }
	.vvq_autor_nombre { font-weight:600; font-size:12px; }
	.vvq_autor_rol { font-size:12px; }
	.vvq_head_txt { flex:2 1 190px; min-width:190px; padding-left:11px; margin-left:7px; }
	.vvq_titulo { font-size:21px; }
	.vvq_sub { font-size:14px; }
	.vvq_shield { font-size:13px; }
	/* Dos por fila: con menos aire dentro para que el texto respire */
	.vvq_opts, .vvq_opts_txt { grid-template-columns:repeat(2,1fr); gap:10px; }
	.vvq_opt { padding:12px 10px; gap:8px; font-size:13px; }
}

/* ── La septima pregunta: los nueve tramos de edad y el cierre ────────────────── */
/* Cinco columnas fijas: son nueve tramos, y con auto-fill caian siete arriba y dos
   sueltos debajo. Asi salen 5 + 4 */
.vvq_opts_edad { grid-template-columns:repeat(5,1fr); }
.vvq_opts_edad .vvq_opt { min-height:52px; padding:12px 8px; }
/* El cierre: cuando ya ha contestado no queda nada mas que esto, asi que va centrado y
   no arrinconado a la derecha como el «Gracias» de las preguntas que siguen en pantalla */
.vvq_id_fin { text-align:center; color:var(--color-fucsia,#f04d98); font-weight:600; font-size:18px; padding:20px 0 6px; }

/* ── Las encuestas del blog ───────────────────────────────────────────────────── */
/* La tarjeta va dentro del cuerpo del articulo, que ya tiene sus margenes: por eso
   respira mas por arriba y por abajo que la del final del pedido */
.vvq_card_blog { margin:40px 0; }
.vvq_card_blog .vvq_q { margin-top:6px; }
/* El sello de anonimato: en el pedido es una linea con escudo, aqui una etiqueta
   pequeña encima de la pregunta, que es donde estaba antes */
.vvq_sello { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; color:var(--color-fucsia,#f04d98); background:#fdeef5; border-radius:999px; padding:5px 12px; margin-bottom:14px; }
.vvq_pregunta { font-size:20px; line-height:1.3; font-weight:600; color:var(--color-negro,#292c39); margin:0 0 18px; }
/* Resultados: la misma barra fucsia del panel, no el azul de antes */
.vvq_res { margin:0 0 14px; }
.vvq_res_txt { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:15px; font-weight:600; color:var(--color-negro,#292c39); margin-bottom:6px; }
.vvq_res_pct { color:var(--color-fucsia,#f04d98); font-variant-numeric:tabular-nums; }
.vvq_res_barra { height:12px; border-radius:999px; background:#f2f2f6; overflow:hidden; }
.vvq_res_barra i { display:block; height:100%; border-radius:999px; background:var(--color-fucsia,#f04d98); }
/* La opcion que votó esta persona, marcada dentro de sus resultados */
.vvq_res.is-mia .vvq_res_txt { color:var(--color-fucsia,#f04d98); }
.vvq_total { font-size:13px; color:var(--color-sub,#707070); margin-top:16px; }
.vvq_total b { color:var(--color-negro,#292c39); }
/* El desglose (sexo, edad, provincia) sale despues de votar */
.vvq_extra { margin-top:26px; padding-top:22px; border-top:1px solid #f4e4ec; }
.vvq_extra_intro { font-size:14px; color:var(--color-sub,#707070); margin:0 0 18px; }
.vvq_prov { box-sizing:border-box; width:100%; max-width:420px; padding:13px 14px; border:1px solid #e9e9ef; border-radius:14px; background:#fff; font-size:15px; font-family:inherit; color:var(--color-negro,#292c39); }

@media (max-width: 575px) {
	.vvq_opts_edad { grid-template-columns:repeat(3,1fr); }
	.vvq_card_blog { margin:26px 0; }
	.vvq_pregunta { font-size:17px; }
}