/**
 * CENEPASS — estilos del frontend (E0)
 *
 * Todo cuelga de variables CSS: el panel de identidad visual (E12) sólo tendrá
 * que reescribir estas variables, sin generar CSS por componente.
 * Ver PLAN-ARQUITECTURA.md §D5.
 */

.cnp-app {
	--cnp-color-primary: #1f3864;
	--cnp-color-primary-contrast: #ffffff;
	--cnp-color-accent: #2e5b9a;
	--cnp-color-text: #1d2327;
	--cnp-color-muted: #646970;
	--cnp-color-surface: #ffffff;
	--cnp-color-border: #d8dce0;
	--cnp-color-selected-bg: #eef3fb;
	--cnp-color-warning: #b32d2e;
	--cnp-color-success: #1e7b34;

	--cnp-radius: 8px;
	--cnp-gap: 16px;
	--cnp-font: inherit;

	font-family: var( --cnp-font );
	color: var( --cnp-color-text );
	max-width: 780px;
	margin: 0 auto;
}

.cnp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.cnp-title {
	font-size: 1.4rem;
	margin: 0 0 var( --cnp-gap );
}

/* ------------------------------------------------------------------ botones */

.cnp-btn {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var( --cnp-color-border );
	border-radius: var( --cnp-radius );
	background: var( --cnp-color-surface );
	color: var( --cnp-color-text );
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.cnp-btn:hover:not( :disabled ) {
	border-color: var( --cnp-color-accent );
}

.cnp-btn:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.cnp-btn:focus-visible {
	outline: 3px solid var( --cnp-color-accent );
	outline-offset: 2px;
}

.cnp-btn--primary {
	background: var( --cnp-color-primary );
	border-color: var( --cnp-color-primary );
	color: var( --cnp-color-primary-contrast );
}

/* -------------------------------------------------------------------- lista */

.cnp-exam-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.cnp-exam-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --cnp-gap );
	flex-wrap: wrap;
	padding: var( --cnp-gap );
	border: 1px solid var( --cnp-color-border );
	border-radius: var( --cnp-radius );
	background: var( --cnp-color-surface );
}

.cnp-exam-card__name {
	margin: 0 0 4px;
	font-size: 1.05rem;
}

.cnp-exam-card__meta {
	margin: 0;
	color: var( --cnp-color-muted );
	font-size: .9rem;
}

/* ------------------------------------------------------------------- examen */

.cnp-exam-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --cnp-gap );
	padding-bottom: 12px;
	margin-bottom: var( --cnp-gap );
	border-bottom: 1px solid var( --cnp-color-border );
}

.cnp-progress {
	color: var( --cnp-color-muted );
	font-size: .9rem;
}

.cnp-timer {
	font-variant-numeric: tabular-nums;
	font-size: 1.25rem;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: var( --cnp-radius );
	background: var( --cnp-color-selected-bg );
	color: var( --cnp-color-primary );
}

.cnp-timer--warning {
	background: #fbeaea;
	color: var( --cnp-color-warning );
}

.cnp-btn--small { padding: 6px 12px; font-size: .85rem; }

/* ------------------------------------------------- rejilla de navegación */

.cnp-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: var( --cnp-gap );
}

.cnp-grid__item {
	width: 34px;
	height: 34px;
	border: 1px solid var( --cnp-color-border );
	border-radius: 6px;
	background: var( --cnp-color-surface );
	color: var( --cnp-color-muted );
	font: inherit;
	font-size: .82rem;
	cursor: pointer;
	padding: 0;
}

/* Respondida y pendiente se distinguen por relleno y peso, no sólo por color:
   con daltonismo el matiz no basta. */
.cnp-grid__item.is-answered {
	background: var( --cnp-color-selected-bg );
	border-color: var( --cnp-color-accent );
	color: var( --cnp-color-primary );
	font-weight: 700;
}

.cnp-grid__item.is-current {
	outline: 2px solid var( --cnp-color-primary );
	outline-offset: 1px;
}

.cnp-grid__item:focus-visible {
	outline: 3px solid var( --cnp-color-accent );
	outline-offset: 2px;
}

.cnp-warning {
	margin: 0 0 var( --cnp-gap );
	padding: 10px 14px;
	border-left: 4px solid var( --cnp-color-warning );
	background: #fbeaea;
	border-radius: 4px;
	font-size: .92rem;
}

/* ------------------------------------------------------------- pausa */

.cnp-paused {
	text-align: center;
	padding: 40px 20px;
	border: 1px solid var( --cnp-color-border );
	border-radius: var( --cnp-radius );
	background: var( --cnp-color-surface );
}

/* --------------------------------------- protección del banco (§10.1) */

.cnp-noselect {
	-webkit-user-select: none;
	user-select: none;
}

/* El input sigue siendo enfocable y el texto sigue en el DOM para los lectores
   de pantalla: sólo se impide seleccionarlo con el ratón. */
.cnp-noselect input { user-select: auto; }

.cnp-screen--exam[data-watermark] {
	position: relative;
	isolation: isolate;
}

.cnp-screen--exam[data-watermark]::after {
	content: attr( data-watermark );
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	color: rgba( 0, 0, 0, .06 );
	transform: rotate( -24deg );
	white-space: nowrap;
	overflow: hidden;
}

.cnp-question {
	font-size: 1.1rem;
	line-height: 1.6;
	margin-bottom: var( --cnp-gap );
	position: relative;
	z-index: 2;
}

.cnp-options-group {
	border: 0;
	margin: 0 0 var( --cnp-gap );
	padding: 0;
	min-width: 0; /* sin esto, un fieldset no se encoge en flex/grid */
}

.cnp-options {
	display: grid;
	gap: 10px;
}

.cnp-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var( --cnp-color-border );
	border-radius: var( --cnp-radius );
	background: var( --cnp-color-surface );
	cursor: pointer;
	line-height: 1.5;
}

.cnp-option:hover {
	border-color: var( --cnp-color-accent );
}

.cnp-option.is-selected {
	border-color: var( --cnp-color-primary );
	background: var( --cnp-color-selected-bg );
}

/* El input real se mantiene en el DOM y enfocable: ocultarlo con display:none
   lo sacaría del orden de tabulación y de los lectores de pantalla. */
.cnp-option__input {
	margin: 4px 0 0;
	flex: 0 0 auto;
}

.cnp-option:focus-within {
	outline: 3px solid var( --cnp-color-accent );
	outline-offset: 2px;
}

.cnp-option__letter {
	font-weight: 700;
	color: var( --cnp-color-primary );
	flex: 0 0 auto;
}

.cnp-exam-footer {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.cnp-exam-footer [data-submit] {
	margin-left: auto;
}

.cnp-status {
	min-height: 1.4em;
	margin: 12px 0 0;
	color: var( --cnp-color-muted );
	font-size: .875rem;
}

/* ---------------------------------------------------------------- resultado */

.cnp-score {
	text-align: center;
	padding: 28px 16px;
	border: 1px solid var( --cnp-color-border );
	border-radius: var( --cnp-radius );
	background: var( --cnp-color-surface );
}

.cnp-score__index {
	display: block;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1;
	color: var( --cnp-color-primary );
	font-variant-numeric: tabular-nums;
}

.cnp-score__scale {
	display: block;
	margin-top: 8px;
	color: var( --cnp-color-muted );
	font-size: .875rem;
}

.cnp-testimonio {
	text-align: center;
	font-size: 1.15rem;
	font-weight: 700;
	margin: var( --cnp-gap ) 0 4px;
}

.cnp-testimonio--sobresaliente { color: var( --cnp-color-success ); }
.cnp-testimonio--satisfactorio { color: var( --cnp-color-accent ); }
.cnp-testimonio--no_satisfactorio { color: var( --cnp-color-warning ); }

.cnp-result-detail {
	text-align: center;
	color: var( --cnp-color-muted );
	margin: 0 0 var( --cnp-gap );
}

.cnp-result-reason {
	padding: 12px 16px;
	margin: 0 0 var( --cnp-gap );
	border-left: 4px solid var( --cnp-color-warning );
	background: #fbeaea;
	border-radius: 4px;
}

.cnp-empty {
	padding: 32px 16px;
	text-align: center;
	color: var( --cnp-color-muted );
	border: 1px dashed var( --cnp-color-border );
	border-radius: var( --cnp-radius );
}

.cnp-subtitle {
	font-size: 1.1rem;
	margin: 28px 0 4px;
}

/* ------------------------------------------------------------ formularios */

.cnp-form { max-width: 460px; }

.cnp-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: var( --cnp-gap );
}

.cnp-field label { font-weight: 600; font-size: .92rem; }

.cnp-field input,
.cnp-field select {
	padding: 10px 12px;
	border: 1px solid var( --cnp-color-border );
	border-radius: var( --cnp-radius );
	font: inherit;
	background: var( --cnp-color-surface );
	color: var( --cnp-color-text );
	width: 100%;
}

.cnp-field input:focus-visible,
.cnp-field select:focus-visible {
	outline: 3px solid var( --cnp-color-accent );
	outline-offset: 1px;
}

.cnp-hint { color: var( --cnp-color-muted ); font-size: .82rem; }

.cnp-errors {
	border-left: 4px solid var( --cnp-color-warning );
	background: #fbeaea;
	padding: 12px 16px;
	border-radius: 4px;
	margin-bottom: var( --cnp-gap );
}

.cnp-errors ul { margin: 0; padding-left: 18px; }

/* Honeypot: fuera de la vista pero sin display:none, que algunos bots detectan. */
.cnp-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cnp-lede {
	color: var( --cnp-color-muted );
	margin: 0 0 var( --cnp-gap );
	font-size: .95rem;
}

.cnp-result-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 24px;
}

/* ------------------------------------------------------- barras de desglose */

.cnp-bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 20px;
	background: #eef0f3;
	border-radius: 10px;
	overflow: hidden;
	margin-top: 6px;
}

.cnp-bar__fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 10px;
	transition: width .3s ease;
}

/* Los tres niveles se distinguen además por luminosidad, no sólo por matiz:
   así siguen siendo legibles con daltonismo y en blanco y negro. */
.cnp-bar__fill--good { background: #1e7b34; }
.cnp-bar__fill--mid  { background: #b8860b; }
.cnp-bar__fill--low  { background: #b32d2e; }

.cnp-bar__value {
	position: relative;
	margin-left: auto;
	padding-right: 10px;
	font-size: .78rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var( --cnp-color-text );
}

.cnp-topic {
	padding: 14px 0;
	border-bottom: 1px solid var( --cnp-color-border );
}

.cnp-topic:last-child { border-bottom: 0; }

.cnp-topic__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.cnp-topic__name { font-size: 1rem; }

.cnp-topic__meta {
	color: var( --cnp-color-muted );
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.cnp-subtopic {
	margin: 10px 0 0 18px;
	padding-left: 12px;
	border-left: 2px solid var( --cnp-color-border );
}

.cnp-subtopic__name { font-size: .9rem; }

/* ------------------------------------------------------- plan de estudio */

.cnp-plan {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: cnp-plan;
}

.cnp-plan__item {
	display: flex;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var( --cnp-color-border );
}

.cnp-plan__item:last-child { border-bottom: 0; }

.cnp-plan__rank {
	flex: 0 0 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var( --cnp-color-primary );
	color: var( --cnp-color-primary-contrast );
	font-weight: 700;
	font-size: .85rem;
}

.cnp-plan__body { flex: 1 1 auto; min-width: 0; }

.cnp-plan__name { display: block; }

.cnp-plan__topic {
	display: block;
	color: var( --cnp-color-muted );
	font-size: .82rem;
}

.cnp-plan__meta {
	display: block;
	margin-top: 4px;
	color: var( --cnp-color-muted );
	font-size: .8rem;
}

/* ------------------------------------------------------------- revisión */

.cnp-review {
	border: 1px solid var( --cnp-color-border );
	border-left-width: 4px;
	border-radius: var( --cnp-radius );
	padding: 16px;
	margin-bottom: 14px;
	background: var( --cnp-color-surface );
}

.cnp-review.is-correct { border-left-color: var( --cnp-color-success ); }
.cnp-review.is-wrong   { border-left-color: var( --cnp-color-warning ); }

.cnp-review__head {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: var( --cnp-color-muted );
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 8px;
}

.cnp-review__tag {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var( --cnp-color-warning );
}

.cnp-review__question { margin-bottom: 12px; line-height: 1.55; }

.cnp-review__option {
	padding: 10px 12px;
	border: 1px solid var( --cnp-color-border );
	border-radius: 6px;
	margin-bottom: 8px;
}

.cnp-review__option.is-correct {
	border-color: var( --cnp-color-success );
	background: #f2f9f4;
}

.cnp-review__option.is-selected:not( .is-correct ) {
	border-color: var( --cnp-color-warning );
	background: #fdf3f3;
}

.cnp-review__label {
	display: inline-block;
	margin-left: 8px;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var( --cnp-color-muted );
}

.cnp-review__why {
	margin: 8px 0 0;
	font-size: .88rem;
	line-height: 1.5;
	color: var( --cnp-color-muted );
}

.cnp-review__general {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px dashed var( --cnp-color-border );
	font-size: .88rem;
	color: var( --cnp-color-muted );
}

/* --------------------------------------------------- historial y gráfica */

.cnp-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var( --cnp-gap );
}

.cnp-table th,
.cnp-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var( --cnp-color-border );
}

.cnp-table th {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var( --cnp-color-muted );
}

.cnp-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 700;
	background: #eef0f3;
}

.cnp-badge--sobresaliente { background: #e3f4e8; color: var( --cnp-color-success ); }
.cnp-badge--satisfactorio { background: #e8eefb; color: var( --cnp-color-accent ); }
.cnp-badge--no_satisfactorio { background: #fbeaea; color: var( --cnp-color-warning ); }

.cnp-spark {
	margin: 0 0 var( --cnp-gap );
	padding: 12px;
	border: 1px solid var( --cnp-color-border );
	border-radius: var( --cnp-radius );
	background: var( --cnp-color-surface );
}

.cnp-spark svg { width: 100%; height: 160px; display: block; }
.cnp-spark__line { fill: none; stroke: var( --cnp-color-primary ); stroke-width: 2.5; }
.cnp-spark__dot { fill: var( --cnp-color-primary ); }
.cnp-spark__axis { stroke: var( --cnp-color-border ); stroke-width: 1; }

/* ------------------------------------------------- panel institucional */

.cnp-filter {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var( --cnp-gap );
	flex-wrap: wrap;
}

.cnp-filter select {
	padding: 8px 10px;
	border: 1px solid var( --cnp-color-border );
	border-radius: var( --cnp-radius );
	font: inherit;
	background: var( --cnp-color-surface );
	color: var( --cnp-color-text );
}

.cnp-kpis {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: var( --cnp-gap );
}

.cnp-kpi {
	flex: 1 1 130px;
	padding: 16px;
	border: 1px solid var( --cnp-color-border );
	border-radius: var( --cnp-radius );
	background: var( --cnp-color-surface );
}

.cnp-kpi__value {
	display: block;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.1;
	color: var( --cnp-color-primary );
	font-variant-numeric: tabular-nums;
}

.cnp-kpi__label {
	display: block;
	margin-top: 4px;
	color: var( --cnp-color-muted );
	font-size: .82rem;
}

.cnp-testimonio-row {
	display: grid;
	grid-template-columns: 190px 1fr;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.cnp-testimonio-row__label { font-size: .9rem; }

@media ( max-width: 600px ) {
	.cnp-testimonio-row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

.cnp-spark__caption {
	margin-top: 8px;
	text-align: center;
	color: var( --cnp-color-muted );
	font-size: .82rem;
}

/* --------------------------------------------------------------------- móvil */

@media ( max-width: 600px ) {
	.cnp-exam-card {
		flex-direction: column;
		align-items: stretch;
	}

	.cnp-exam-card .cnp-btn {
		width: 100%;
	}

	.cnp-exam-footer {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.cnp-exam-footer [data-submit] {
		margin-left: 0;
	}

	.cnp-score__index {
		font-size: 2.6rem;
	}

	/* La tabla del historial se convierte en tarjetas: seis columnas no caben en
	   un teléfono, y el desplazamiento lateral hace ilegible una tabla. */
	.cnp-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
	}

	.cnp-table tr {
		display: block;
		margin-bottom: 12px;
		border: 1px solid var( --cnp-color-border );
		border-radius: var( --cnp-radius );
		padding: 6px 12px;
	}

	.cnp-table td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		border-bottom: 0;
		padding: 5px 0;
	}

	.cnp-table td::before {
		content: attr( data-label );
		font-size: .78rem;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: var( --cnp-color-muted );
	}

	.cnp-plan__item { gap: 10px; }
}