/* ============================================
   Social Cards — Admin UI (#94)
   ============================================ */

/* --- Controls panel --- */
.ne-sc-controls {
	display: flex;
	flex-direction: column;
	gap: var(--ne-space-4);
	margin-bottom: var(--ne-space-5);
}

.ne-sc-controls__row {
	display: flex;
	align-items: center;
	gap: var(--ne-space-3);
	flex-wrap: wrap;
}

.ne-sc-controls__row > .ne-label {
	min-width: 120px;
	flex-shrink: 0;
}

/* --- Type selector --- */
.ne-sc-type-selector {
	display: flex;
	gap: var(--ne-space-2);
	flex-wrap: wrap;
}

.ne-sc-type-btn.active {
	background: var(--ne-accent);
	color: white;
	border-color: var(--ne-accent);
}
.ne-sc-type-btn:focus-visible {
	outline: 2px solid var(--ne-accent);
	outline-offset: 2px;
}

/* --- Race selector --- */
.ne-sc-race-row {
	transition: opacity 0.2s;
}

.ne-sc-race-row .ne-select,
#ne-sc-race-select {
	min-width: 260px;
	max-width: 400px;
	padding: var(--ne-space-2) var(--ne-space-3);
	background: var(--ne-bg);
	border: 1px solid var(--ne-border-s);
	border-radius: var(--ne-radius-md);
	color: var(--ne-text);
	font-size: 0.875rem;
}

/* --- Size selector --- */
.ne-sc-size-selector {
	display: flex;
	gap: var(--ne-space-3);
	flex-wrap: wrap;
}

.ne-sc-size-option {
	display: flex;
	align-items: center;
	gap: var(--ne-space-2);
	cursor: pointer;
	padding: var(--ne-space-1) var(--ne-space-3);
	border-radius: var(--ne-radius-md);
	border: 1px solid var(--ne-border);
	transition: border-color 0.15s, background 0.15s;
	font-size: 0.8125rem;
}

.ne-sc-size-option:hover {
	border-color: var(--ne-border-s);
	background: var(--ne-elevated);
}

.ne-sc-size-option:has(input:checked) {
	border-color: var(--ne-accent);
	background: rgba(139, 127, 232, 0.08);
}

.ne-sc-size-option input[type="radio"] {
	accent-color: var(--ne-accent);
}

/* --- Action buttons --- */
.ne-sc-actions {
	padding-top: var(--ne-space-2);
}

/* --- Preview wrapper --- */
.ne-sc-preview-wrapper {
	position: relative;
	z-index: 1;
	border: 1px solid var(--ne-border);
	border-radius: var(--ne-radius-lg);
	background: var(--ne-surface);
	padding: var(--ne-space-4);
	min-height: 200px;
	overflow: hidden;
	transition: height 0.3s ease;
}

.ne-sc-preview-label {
	position: absolute;
	top: var(--ne-space-2);
	right: var(--ne-space-3);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 600;
	pointer-events: none;
}

.ne-sc-preview-scroll {
	overflow: auto;
	max-width: 100%;
}

#ne-sc-preview {
	position: relative;
}

#ne-sc-preview:empty::before {
	content: 'Selecciona una fecha y genera el preview';
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	color: var(--ne-text-subtle);
	font-size: 0.875rem;
	text-align: center;
}

/* --- Responsive --- */
@media (max-width: 768px) {
	.ne-sc-controls__row {
		flex-direction: column;
		align-items: flex-start;
	}

	.ne-sc-controls__row > .ne-label {
		min-width: auto;
	}

	.ne-sc-type-selector {
		width: 100%;
	}

	.ne-sc-type-btn {
		flex: 1;
		min-width: 0;
		text-align: center;
		font-size: 0.75rem;
		padding: 6px 8px;
	}

	.ne-sc-size-selector {
		flex-direction: column;
		width: 100%;
	}

	.ne-sc-size-option {
		width: 100%;
	}

	#ne-sc-race-select {
		min-width: 100%;
		max-width: 100%;
	}
}