/**
 * Estilos de las Herramientas de vinilo.
 * Hereda tokens y componentes (theme-agnostic) de iat-core.css.
 * El preview del SVG va sobre fondo blanco (representa el papel impreso).
 */

.iat-vinyl__svg {
	background: #fff;
	border: 1px solid var(--iat-line);
	border-radius: var(--iat-radius-sm);
	padding: 1rem;
	margin: 1rem 0;
	text-align: center;
	overflow: auto;
}
.iat-vinyl__svg svg { max-width: 100%; height: auto; max-height: 540px; width: auto; display: block; margin: 0 auto; }

/* Fila «Puntos nulos» (reutiliza la clase de la app de sala, cuyo CSS no se
   carga aquí: definimos el estilo para que etiqueta y valor no queden pegados). */
.iat-vinyl .iat-room__metric {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: .8rem 0;
	padding: .7rem 1rem;
	background: var(--iat-surface);
	border-left: 3px solid var(--iat-accent);
	border-radius: 10px;
}

.iat-vinyl__verdict {
	font-size: 1.4rem;
	font-weight: 800;
	text-align: center;
	min-height: 1.6em;
	margin: .5rem 0;
}
.iat-vinyl__dev { font-weight: 800; }

/* Nivel de burbuja (acelerómetro) */
.iat-vinyl__level { display: flex; justify-content: center; margin: 1rem 0; }
.iat-vinyl__levelring {
	position: relative;
	width: 120px; height: 120px;
	border: 2px solid var(--iat-line);
	border-radius: 50%;
	background: var(--iat-surface);
	display: flex; align-items: center; justify-content: center;
}
.iat-vinyl__levelcross::before,
.iat-vinyl__levelcross::after {
	content: ""; position: absolute; background: var(--iat-line);
}
.iat-vinyl__levelcross::before { left: 50%; top: 8%; width: 1px; height: 84%; transform: translateX(-50%); }
.iat-vinyl__levelcross::after { top: 50%; left: 8%; height: 1px; width: 84%; transform: translateY(-50%); }
.iat-vinyl__leveldot {
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--iat-accent);
	transition: transform .06s linear, background .15s ease;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--iat-accent) 30%, transparent);
}
.iat-vinyl__leveldot.is-level { background: var(--iat-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--iat-ok) 35%, transparent); }
.iat-vinyl__levelread-wrap { text-align: center; }
.iat-vinyl__levelread { font-size: 1.6rem; font-variant-numeric: tabular-nums; }

/* Fuerza de apoyo */
.iat-vinyl__forceout { margin: 1rem 0; }