/**
 * Formulario de seguimiento después de la consulta — Dr. Paul Terán
 *
 * Tarjetas, opciones, errores y botón vienen de admision.css (clases
 * pt-admision__*). Aquí, lo propio del artefacto original
 * (_fuentes/artifact-seguimiento): la rejilla de exámenes, la escala de dolor
 * de 0 a 10 y el bloque del texto legal, con los colores del sitio.
 * Comportamiento: assets/js/seguimiento.js · Servidor: inc/seguimiento.php
 */

.pt-seguimiento:not(.is-activa) .pt-seg__form { display: none; }

.pt-seg__hint {
	margin: var(--pt-space-2) 0 0 31px;
	font-size: 0.85rem;
	color: var(--pt-muted);
}

/* --- Rejilla de exámenes -------------------------------------------------- */

/* Como en el original: con la respuesta «No me pidieron…» queda atenuada. */
.pt-seg__gridset { transition: opacity var(--pt-transition-base); }
.pt-seg__gridset.is-atenuada { opacity: 0.45; }

.pt-seg__gridwrap {
	margin-top: var(--pt-space-3);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.pt-seg__gridwrap:focus-visible { outline: 2px solid var(--pt-cyan); outline-offset: 2px; border-radius: 8px; }

.pt-seg__grid {
	width: 100%;
	min-width: 640px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.pt-seg__grid th,
.pt-seg__grid td {
	padding: 9px 6px;
	border: 0;
	border-bottom: 1px solid var(--pt-line);
	background: none;
	text-align: center;
	font-size: 0.78rem;
	line-height: 1.3;
}

/* Sin las bandas alternas que el tema padre pone a toda tabla. */
.pt-seguimiento .pt-seg__grid tr > * { background: none; }

.pt-seg__grid thead th {
	font-weight: 500;
	vertical-align: bottom;
	color: var(--pt-muted);
}

.pt-seg__grid tbody th {
	text-align: left;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--pt-text);
}

.pt-seg__grid tbody tr:last-child > * { border-bottom: 0; }

.pt-seg__grid td label { display: block; margin: 0; cursor: pointer; }
.pt-seg__grid-lbl { display: none; }

/*
 * En móvil la tabla de 640 px obligaba a desplazarse de lado y escondía
 * cuatro de las cinco columnas: cada examen pasa a ser una ficha con sus
 * cinco estados como opciones con rótulo.
 */
@media (max-width: 680px) {
	.pt-seg__gridwrap { overflow: visible; }
	.pt-seg__grid,
	.pt-seg__grid tbody,
	.pt-seg__grid tr,
	.pt-seg__grid th,
	.pt-seg__grid td { display: block; width: auto; min-width: 0; }
	.pt-seg__grid thead { display: none; }
	.pt-seg__grid tbody tr { padding: var(--pt-space-3) 0; border-bottom: 1px solid var(--pt-line); }
	.pt-seg__grid tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
	.pt-seg__grid tbody th,
	.pt-seg__grid td { padding: 0; border: 0; text-align: left; }
	.pt-seg__grid tbody th { margin-bottom: 6px; }
	.pt-seg__grid td label {
		display: flex;
		align-items: center;
		gap: var(--pt-space-3);
		padding: 7px 10px;
		border-radius: 10px;
		font-size: 0.9rem;
		color: var(--pt-text);
	}
	.pt-seg__grid td label:has(input:checked) { background: rgba(119, 236, 255, 0.1); }
	.pt-seg__grid td input { flex: 0 0 auto; margin: 0; }
	.pt-seg__grid-lbl { display: inline; }
}

/* --- Círculos de la rejilla y de la escala, dibujados por el tema ---------- */

.pt-seg__grid input,
.pt-seg__escala input {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 19px;
	height: 19px;
	margin: 0 auto;
	border: 1px solid var(--pt-line-strong);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	cursor: pointer;
	transition: background var(--pt-transition-base), border-color var(--pt-transition-base);
}

.pt-seg__grid input:checked,
.pt-seg__escala input:checked {
	border-color: var(--pt-cyan);
	background: linear-gradient(135deg, var(--pt-cyan), var(--pt-blue));
}

.pt-seg__grid input:checked::after,
.pt-seg__escala input:checked::after {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	margin: 5px auto 0;
	border-radius: 50%;
	background: #04121f;
}

.pt-seg__grid input:focus-visible,
.pt-seg__escala input:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(119, 236, 255, 0.3);
}

.pt-admision__q.is-error .pt-seg__escala input { border-color: rgba(255, 120, 120, 0.6); }

/* --- Escala de dolor ------------------------------------------------------ */

.pt-seg__escala {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--pt-space-3);
}

.pt-seg__escala label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 38px;
	margin: 0;
	padding: 8px 4px 6px;
	border: 1px solid var(--pt-line);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	color: var(--pt-muted);
	cursor: pointer;
	transition: border-color var(--pt-transition-base), background var(--pt-transition-base);
}

.pt-seg__escala label:hover { border-color: var(--pt-line-strong); }

.pt-seg__escala label:has(input:checked) {
	border-color: rgba(119, 236, 255, 0.7);
	background: rgba(119, 236, 255, 0.1);
	color: var(--pt-text);
}

.pt-seg__extremos {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 0.8rem;
	color: var(--pt-muted);
}

/* --- Texto legal ---------------------------------------------------------- */

fieldset.pt-admision__q > legend.pt-seg__legal-titulo {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--pt-muted);
}

.pt-seg__legal {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: var(--pt-space-2);
	padding: var(--pt-space-4);
	border-radius: 12px;
	background: rgba(119, 236, 255, 0.05);
}

.pt-seguimiento .pt-seg__lg h3 {
	margin: 0 0 4px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--pt-cyan);
}

.pt-seg__lg p {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.5;
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
	color: var(--pt-text);
}

/* --- Envío ---------------------------------------------------------------- */

.pt-seg__nav { justify-content: flex-end; }

@media (max-width: 480px) {
	.pt-seg__nav .pt-admision__seguir { flex: 1 1 auto; }
}