/* Inventario de Intereses de Karl Hereford — estilos de la página.
 *
 * La plantilla del tema envolvía el marcado en .main-content /
 * .default-template-page / .wrap y heredaba esas reglas de la hoja del tema
 * (thecs/style.css). Al servirse como página del plugin ese CSS ya no llega,
 * así que aquí está lo poco que de verdad aportaba:
 *
 *   .default-template-page → el contenedor centrado de 880 px. ES LA ÚNICA
 *                            regla del tema que hacía trabajo real.
 *   .main-content          → en el tema solo tenía reglas contextuales
 *                            (body.v-roll, .m-mode, header.style-05). Aquí se
 *                            deja como bloque neutro.
 *   .wrap                  → NO existía en el CSS del tema. Marcado muerto.
 *
 * El resto del aspecto viaja en los ~248 atributos style= del propio marcado,
 * que no se han tocado. Esto solo repone el contenedor y una base tipográfica,
 * que sí se perdía al no cargar el style.css del tema.
 */

html {
	-webkit-text-size-adjust: 100%;
}

body.pst-body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background-color: #fff;
	color: #333;
	/* Raleway la cargaba el tema desde Google Fonts. Aquí no entra wp_head(), así
	   que pedirla significaría una petición a Google desde una página con datos
	   personales y consentimiento. Se usa la pila del sistema, como el TDAH. */
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.main-content {
	display: block;
	width: 100%;
}

.default-template-page {
	position: relative;
	max-width: 880px;
	padding: 0 20px;
	margin: 15vh auto;
	box-sizing: border-box;
}

/* En movil, 15vh de margen superior es media pantalla en blanco. */
@media (max-width: 782px) {
	.default-template-page {
		margin: 40px auto;
	}
}

.default-template-page .text-area {
	font-size: 1.35rem;
}

.wrap {
	display: block;
}

/* El <h1 class="title"> es el unico titulo del marcado sin style= inline: lo
   estilaba la hoja del tema. El resto de titulos de la pagina van centrados, asi
   que se le da lo mismo. */
.default-template-page h1.title {
	text-align: center;
	/* El color lo pone el core en --pst-titulo (PST_COLOR_TITULO). */
	color: var(--pst-titulo);
	font-size: 2rem;
	line-height: 1.25;
	margin-bottom: 0.4em;
}

/* El marcado usa <p>/<h2>/<h3> con estilos propios; solo se neutraliza el
   margen superior heredado del navegador en el primer bloque. */
.default-template-page > *:first-child {
	margin-top: 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* =========================================================================
   Escala de caras (1.17)
   Cinco caras SVG en lugar del <select> que habia por item. Por debajo son
   <input type="radio"> reales, visualmente ocultos, con su <label>: el
   formulario se envia igual que siempre (name="valor{i}", valores 1-5), va con
   teclado, lo anuncia el lector de pantalla y NO hace falta una linea de JS
   para encender la cara elegida — lo hace :checked.
   Las caras no se dibujan con emoji del sistema a proposito: cada plataforma
   los pinta distinto y no se puede controlar su color ni apagarlos a gris.
   ========================================================================= */

.pst-sprite {
	display: none;
}

/* --- El color de cada escalon. Lo hereda el circulo de la cara, que va con
       fill="currentColor"; los rasgos llevan su propio negro translucido. --- */
.pst-c1 { --pst-c: #e0574c; }
.pst-c2 { --pst-c: #ee8b3c; }
.pst-c3 { --pst-c: #e3c13c; }
.pst-c4 { --pst-c: #8bc34a; }
.pst-c5 { --pst-c: #35a06a; }

/* --- Leyenda de la explicacion: las caras van SIEMPRE encendidas, que es de
       donde se aprende que significa cada una. --- */
ul.pst-leyenda {
	list-style: none;
	margin: 0 0 10px 5%;
	padding: 0;
}

ul.pst-leyenda li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

ul.pst-leyenda .pst-svg {
	color: var(--pst-c);
	flex: 0 0 auto;
}

/* --- Un item --- */
.pst-items {
	width: 100%;
}

.pst-item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	margin-bottom: 10px;
	padding: 14px 20px;
	border: 2px solid #ccc;
	border-radius: 10px;
	background-color: #eee;
	box-sizing: border-box;
}

.pst-enunciado {
	margin: 0;
	text-align: left;
	font-size: 120%;
	line-height: 1.25;
}

.pst-escala {
	display: flex;
	width: 100%;
	gap: 2px;
}

.pst-op {
	flex: 1 1 0;
	min-width: 0;
}

/* El radio no se oculta con display:none ni visibility:hidden: dejaria de
   recibir el foco del teclado. Se saca de la vista pero sigue siendo enfocable. */
.pst-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.pst-cara {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 4px 1px 6px;
	border-radius: 8px;
	cursor: pointer;
	/* Apagada: gris claro. El color de la opcion solo aparece al elegirla. */
	color: #dcdcdc;
	transition: color .12s ease, transform .12s ease;
}

.pst-svg {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
}

.pst-txt {
	font-size: 11px;
	line-height: 1.15;
	text-align: center;
	color: #999;
	hyphens: auto;
	/* Altura reservada: sin esto la tarjeta CRECE al elegir una cara -la negrita puede
	   anadir una linea- y las caras dan un salto justo cuando acabas de pulsar. A todo
	   lo ancho basta una linea; en movil, donde cada cara tiene ~70 px, hacen falta tres
	   (ver el bloque de movil). */
	min-height: 1.15em;
}

/* Vista previa al pasar por encima: se enciende a medias, para que se entienda
   que esa cara es pulsable sin llegar a parecer elegida. */
.pst-cara:hover {
	color: #bdbdbd;
}

.pst-radio:checked + .pst-cara {
	color: var(--pst-c);
	transform: scale(1.06);
}

.pst-radio:checked + .pst-cara .pst-txt {
	color: #444;
	font-weight: 700;
}

/* El foco del teclado tiene que verse: sin esto, tabular por los 90 items seria
   moverse a ciegas. */
.pst-radio:focus-visible + .pst-cara {
	outline: 2px solid #269f94;
	outline-offset: 2px;
}

/* --- Movil: la tarjeta ya esta apilada; aqui solo se aprieta lo justo para que las
       cinco caras quepan en 360 px sin bajar del objetivo tactil. --- */
@media (max-width: 782px) {
	.pst-item {
		padding: 14px 12px;
	}

	.pst-enunciado {
		font-size: 110%;
	}

	.pst-svg {
		width: 40px;
		height: 40px;
	}

	.pst-txt {
		font-size: 10px;
		/* Aqui cada cara tiene ~70 px: "Me desagrada mucho" ocupa tres lineas. */
		min-height: 3.45em;
	}
}