/**
 * Formulario de Escalas Funcionales — Dr. Paul Terán
 *
 * Tarjetas, opciones, errores y botón vienen de admision.css (pt-admision__*);
 * la rejilla y la escala de 0 a 10, de seguimiento.css (pt-seg__*). Aquí, el
 * selector de escalas, la cabecera del cuestionario y los bloques de texto.
 * Comportamiento: assets/js/escalas.js · Servidor: inc/escalas.php
 */

.pt-esc:not(.is-activa) .pt-esc__form { display: none; }

/* --- Selector -------------------------------------------------------------- */

.pt-esc__elegir { margin: 0 0 var(--pt-space-6); }

.pt-esc__elegir-lbl {
	display: block;
	margin: 0 0 var(--pt-space-2);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pt-cyan);
}

.pt-esc__elegir-fila {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pt-space-3);
	align-items: center;
}

.pt-escalas .pt-select {
	flex: 1 1 320px;
	min-width: 0;
	max-width: 100%;
}

/* El botón sólo se ve sin JavaScript (con él, la escala se abre al elegirla). */
.pt-escalas .pt-esc__abrir {
	flex: 0 0 auto;
	margin: 0;
	padding: var(--pt-space-3) var(--pt-space-6);
	border: 1px solid transparent;
	border-radius: var(--pt-radius-pill);
	background: linear-gradient(135deg, var(--pt-cyan), var(--pt-blue));
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	color: #04121f;
	cursor: pointer;
}
.pt-escalas [hidden] { display: none !important; }

/* --- Cabecera del cuestionario ------------------------------------------- */

.pt-esc__cabecera { margin: 0 0 var(--pt-space-5); }

.pt-escalas .pt-esc__titulo {
	margin: 0 0 var(--pt-space-2);
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	line-height: 1.2;
}

.pt-esc__nombre {
	margin: 0 0 var(--pt-space-4);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--pt-muted);
}

.pt-esc__ind {
	margin: 0 0 var(--pt-space-2);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--pt-cyan);
}

.pt-esc__ind-lista {
	margin: 0;
	padding-left: 1.2em;
	color: var(--pt-text);
}

.pt-esc__ind-lista li { margin: 0 0 6px; line-height: 1.55; }

/* --- Preguntas ------------------------------------------------------------- */

/* El correo va en un campo de correo: mismo aspecto que los de texto. */
.pt-admision input[type="email"] {
	display: block;
	width: 100%;
	padding: var(--pt-space-3) var(--pt-space-4);
	background: rgba(255, 255, 255, 0.04);
	border: var(--pt-glass-border);
	border-radius: 12px;
	color: var(--pt-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

.pt-admision input[type="email"]:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--pt-line-strong);
	box-shadow: 0 0 0 3px rgba(119, 236, 255, 0.14);
}

.pt-admision__q.is-error input[type="email"],
.pt-admision__q.is-error input[type="date"] { border-color: rgba(255, 120, 120, 0.55); }

.pt-esc__ayuda {
	margin: var(--pt-space-1) 0 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--pt-muted);
}

/* Las filas de una rejilla son preguntas largas: más aire que en la de exámenes. */
.pt-esc__grid tbody th { min-width: 220px; line-height: 1.45; }

.pt-esc__blanco {
	margin-top: var(--pt-space-3);
	padding: 6px 12px;
	border: 1px solid var(--pt-line);
	border-radius: 999px;
	background: none;
	font: inherit;
	font-size: 0.8rem;
	color: var(--pt-muted);
	cursor: pointer;
}

.pt-esc__blanco:hover { border-color: var(--pt-line-strong); color: var(--pt-text); }

/* Encabezados de sección y aviso de privacidad. */
.pt-escalas .pt-esc__header-titulo {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pt-cyan);
}

.pt-esc__info {
	margin-top: var(--pt-space-3);
	padding: var(--pt-space-4);
	border-radius: 12px;
	background: rgba(119, 236, 255, 0.05);
	font-size: 0.8rem;
	line-height: 1.55;
	white-space: pre-wrap;
	color: var(--pt-text);
}

/* Los extremos de una escala de 0 a 10 son frases largas: que no se toquen. */
.pt-esc .pt-seg__extremos { gap: var(--pt-space-4); }
.pt-esc .pt-seg__extremos span:last-child { text-align: right; }

@media (max-width: 680px) {
	.pt-esc__grid tbody th { min-width: 0; }
}