/**
 * Estilos del Test ABX a ciegas.
 * Hereda tokens y componentes (theme-agnostic) de iat-core.css.
 */

/* Slots de carga de archivos */
.iat-abx__slots {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 1rem 0;
}
@media (max-width: 560px) { .iat-abx__slots { grid-template-columns: 1fr; } }

.iat-abx__slot {
	background: var(--iat-surface);
	border: 1px solid var(--iat-line);
	border-radius: var(--iat-radius-sm);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}
.iat-abx__slotlabel { font-weight: 800; color: inherit; font-size: 1.1rem; }
.iat-abx__file { font: inherit; font-size: .85rem; color: var(--iat-muted); width: 100%; }
.iat-abx__file::file-selector-button {
	font: inherit;
	font-weight: 600;
	color: inherit;
	background: var(--iat-surface-2);
	border: 0;
	border-radius: 999px;
	padding: .5em 1em;
	margin-right: .6rem;
	cursor: pointer;
}
.iat-abx__status { font-size: .85rem; color: var(--iat-muted); min-height: 1.2em; word-break: break-word; }
.iat-abx__status.is-loading { color: var(--iat-accent); }
.iat-abx__status.is-ok { color: var(--iat-ok); }
.iat-abx__status.is-err { color: var(--iat-danger); }

/* Modo entrenamiento (generar B desde A) */
.iat-abx__train {
	border-top: 1px solid var(--iat-line);
	margin-top: 1rem;
	padding-top: 1rem;
}
.iat-abx__trainrow { display: flex; gap: .6rem; flex-wrap: wrap; }
.iat-abx__trainrow .iat-select { flex: 1 1 220px; }

/* Histórico de sesiones */
.iat-abx__hist {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	background: var(--iat-surface);
	border: 1px solid var(--iat-line);
	border-radius: var(--iat-radius-sm);
	padding: .8rem 1rem;
	margin: 1rem 0;
	font-size: .92rem;
}
.iat-abx__hist ul { margin: .25rem 0; padding-left: 1.2rem; }
.iat-abx__hist li { margin: .15rem 0; font-variant-numeric: tabular-nums; }

/* Configuración */
.iat-abx__config {
	border-top: 1px solid var(--iat-line);
	margin-top: 1rem;
	padding-top: 1rem;
}
.iat-abx__h3 { color: inherit; font-size: 1.1rem; margin: 0 0 .75rem; }
/* .iat-check vive en iat-core.css (compartido con la suite de sala). */

/* Conmutador A / X / B */
.iat-abx__switch {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
	margin: .5rem 0 1rem;
}
.iat-abx__btn {
	font: inherit;
	font-size: 1.5rem;
	font-weight: 800;
	color: inherit;
	background: var(--iat-surface);
	border: 2px solid var(--iat-line);
	border-radius: var(--iat-radius-sm);
	padding: 1rem 0;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.iat-abx__btn:hover { background: var(--iat-surface-2); }
.iat-abx__btn:active { transform: translateY(1px); }
.iat-abx__btn.is-active { background: var(--iat-accent); border-color: var(--iat-accent); color: #fff; }
.iat-abx__btn:focus-visible { outline: 3px solid var(--iat-accent-2); outline-offset: 2px; }

.iat-abx__hint { text-align: center; color: var(--iat-muted); font-size: .9rem; margin: 1rem 0; }

/* Blindaje frente al theme (el conmutador A/X/B son <button>) */
.iat .iat-abx__btn,
.iat .iat-abx__btn:hover,
.iat .iat-abx__btn:focus { color: inherit !important; }
.iat .iat-abx__btn { background-color: var(--iat-surface) !important; }
.iat .iat-abx__btn:hover { background-color: var(--iat-surface-2) !important; }
.iat .iat-abx__btn.is-active { color: #fff !important; background-color: var(--iat-accent) !important; }