/*--------------------------------------------------------------
# form ver
--------------------------------------------------------------*/

.grupo { text-align: center; margin-bottom: 20px; }

.titulo {
	font-weight: bold;
	margin-bottom: 10px;
	font-size: 16px;
}

/* selector de encuestas */
.radio-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
}

/* Ocultar radio real */
.radio-group input[type="radio"] {
	display: none;
}

/* Botón visual */
.radio-group label {
	min-width: 40px;
	padding: 6px;
	border-radius: 8px;
	border: 1px solid #bbb;
	background: #f2f2f2;
	color: #333;
	cursor: pointer;
	transition: all 0.2s ease;
	font-weight: normal;
	font-size: 14px;
}

/* Hover */
.radio-group label:hover {
	background: #e6e6e6;
}

/* Seleccionado */
.radio-group input[type="radio"]:checked + label {
	background: #0073aa;
	color: #fff;
	border-color: #0073aa;
}

/* ENCUESTA INCOMPLETA */
.radio-group label.encuesta-incompleta {
	border-color: #c62828;
	color: #c62828;
	background: rgba(198,40,40,.08);
}



/*--------------------------------------------------------------
# encuesta
--------------------------------------------------------------*/

.encuesta-wrapper.tres-hojas {
  display: grid;
  grid-template-columns: repeat(auto-fit, 650px);
  gap: 24px;
  justify-content: center;
  max-width: 2000px;
  width: 100%;
  margin: auto;
  font-family: system-ui, sans-serif;
}

.hoja {
  position: relative;

  width: 650px;               /* ANCHO FIJO */
  aspect-ratio: 8.5 / 11;     /* PROPORCIÓN CARTA */

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: local;

  border: 1px solid #ddd;
  padding: 0;
  overflow-y: auto;
}

.cargo {
	display: block;
	float: right;
	width: 100%;
	margin: 127px 0 95px 0;
	padding: 3px 0 0 4px;
}

.cargo-opciones {
	display: grid;
	grid-template-columns: 318px 93px 57px 73px 40px;
	gap: 0px;
}

/* FILA = UNA SOLA LÍNEA */
.fila {
	display: grid;
	grid-template-columns: 4.65fr 2fr;
	align-items: center;
	gap: 0px;
	margin: 0 62px 0 46px;
	padding: 0 0 0 22px;
	height: 47.29px;
}

/* PREGUNTA */
.pregunta {
	font-weight: 500;
	font-size: 14px;
	text-align: right;
	margin-left: 15px;
	padding: 8px 2px;
	color: var(--negro);
}

/* OPCIONES */
.opciones {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	margin: 2px 0 0 2px;
	text-align: center;
}

/* oculto el input real */
.cargo-opciones input[type="radio"],
.opciones input[type="radio"] {
	display: none;
}

/* botón visual */
.cargo-opciones label,
.opciones label {
	width: 20px;
	height: 20px;
	border: 3px solid rgba(0,0,0,.5);
	border-radius: 50%;
	cursor: pointer;
	opacity: .2;
	transition: all .2s ease;
}

/* hover */
.cargo-opciones label:hover,
.opciones label:hover {
	opacity: .5;
}

/* seleccionado */
.cargo-opciones input[type="radio"]:checked + label,
.opciones input[type="radio"]:checked + label {
	border-color: var(--cielo);
	opacity: 1;
}

/* sin respuesta */
.cargo-opciones.sin-respuesta label,
.opciones.sin-respuesta label {
	border-color: var(--naranja);
	opacity: .8;
}

.cargo-opciones.sin-respuesta label:hover,
.opciones.sin-respuesta label:hover {
	border-color: var(--rojo);
	opacity: .8;
}