/*
 * ar-access: seccion de descargas del panel (instaladores y packs).
 *
 * Salio de account.css el 11/09/2026 por el limite de 600 lineas. Trae su
 * propia media query de 540px, que ya vivia al final del fichero original.
 *
 * Depende de account.css (tokens y .ar-account__card): se encola DESPUES.
 */

/* ============ Downloads ============ */

.ar-account__downloads {
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 0.75rem);
	margin: var(--space-4, 1rem) 0;
}

.ar-account__dl-card {
	display: flex;
	align-items: center;
	gap: var(--space-4, 1rem);
	padding: var(--space-4, 1rem);
	border: 1px solid var(--border-default, rgba(255, 255, 255, 0.12));
	border-radius: var(--radius-md, 8px);
	background: var(--bg-secondary, rgba(255, 255, 255, 0.03));
}

.ar-account__dl-card.is-recommended {
	border-color: var(--accent, #FFD60A);
	box-shadow: inset 0 0 0 1px var(--accent, #FFD60A);
}

.ar-account__dl-icon {
	font-size: 2rem;
	line-height: 1;
	flex-shrink: 0;
}

.ar-account__dl-body {
	flex: 1;
	min-width: 0;
}

.ar-account__dl-body .ar-account__h2 {
	margin: 0 0 2px 0;
}

.ar-account__dl-meta {
	margin: 0;
	font-size: var(--text-sm, 0.875rem);
	color: var(--text-muted, rgba(255, 255, 255, 0.6));
}

.ar-account__dl-card .btn {
	flex-shrink: 0;
}

.ar-account__dl-hint {
	font-size: var(--text-sm, 0.875rem);
	color: var(--text-muted, rgba(255, 255, 255, 0.6));
}

/* Aviso de sistema sin binario (macOS / iPhone). Va antes de las tarjetas, con
   el amarillo de la marca, para que no parezca un error sino una aclaracion. */
.ar-account__dl-note {
	margin: 0 0 var(--space-md, 1rem);
	padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
	border-left: 3px solid var(--brand-yellow, #FFD60A);
	border-radius: var(--radius-sm, 6px);
	background: rgba(255, 214, 10, 0.08);
	font-size: var(--text-sm, 0.875rem);
	line-height: 1.5;
	color: var(--text-primary, rgba(255, 255, 255, 0.92));
}

@media (max-width: 540px) {
	.ar-account__dl-card {
		flex-wrap: wrap;
	}
	.ar-account__dl-card .btn {
		width: 100%;
	}
}
