/* Tienda de Avatar con Créditos - Estilos frontend */

.atc-wrapper {
	max-width: 960px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* [mi_avatar]: widget compacto, de solo lectura, sin pestañas ni listas.
   El tamaño máximo real lo resuelve .atc-avatar-canvas (ver más abajo). */
.atc-wrapper-avatar-only {
	max-width: 100%;
}

.atc-wrapper,
.atc-wrapper *,
.atc-wrapper *::before,
.atc-wrapper *::after {
	box-sizing: border-box;
}

.atc-balances {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}

.atc-balance {
	font-size: 0.95em;
	background: #f0f6fb;
	border: 1px solid #d6e6f2;
	border-radius: 20px;
	padding: 6px 14px;
}

.atc-balance-amount {
	color: #2271b1;
	font-weight: 700;
}

.atc-currency-icon {
	width: 18px;
	height: 18px;
	object-fit: cover;
	border-radius: 50%;
	vertical-align: -4px;
	margin-right: 4px;
}

.atc-currency-icon-inline {
	width: 16px;
	height: 16px;
	object-fit: cover;
	border-radius: 50%;
	vertical-align: -3px;
	margin-right: 3px;
}

.atc-feedback {
	display: none;
	padding: 10px 14px;
	border-radius: 6px;
	margin-bottom: 14px;
	font-size: 0.95em;
}

.atc-feedback-success {
	background: #d4f4dd;
	color: #1a7431;
}

.atc-feedback-error {
	background: #fbe1e1;
	color: #a52b2b;
}

.atc-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	border-bottom: 2px solid #eee;
}

.atc-tab-btn {
	padding: 10px 20px;
	cursor: pointer;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	font-size: 1em;
	font-weight: 500;
	color: #555;
}

.atc-tab-btn.active {
	font-weight: 700;
	color: #2271b1;
	border-bottom-color: #2271b1;
}

.atc-empty-msg {
	color: #666;
	font-style: italic;
}

/* ---------------------- TIENDA ---------------------- */

.atc-shop-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 20px;
}

.atc-filter-btn {
	padding: 6px 14px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background: #fff;
	cursor: pointer;
	font-size: 0.85em;
	color: #444;
}

.atc-filter-btn.active {
	background: #2271b1;
	border-color: #2271b1;
	color: #fff;
}

.atc-shop-category-section {
	margin-bottom: 32px;
}

.atc-character-group-heading {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 10px;
	font-size: 0.9em;
	color: #555;
	font-weight: 600;
}

.atc-character-group-thumb {
	width: 22px;
	height: 22px;
	object-fit: contain;
	background: #f0f0f1;
	border-radius: 50%;
	padding: 2px;
}

.atc-shop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 18px;
}

.atc-shop-card {
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 14px;
	text-align: center;
	background: #fff;
	transition: box-shadow 0.15s ease;
}

.atc-shop-card:hover {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.atc-shop-card img {
	width: 100%;
	height: 120px;
	object-fit: contain;
	background: #f7f7f7;
	border-radius: 6px;
	margin-bottom: 8px;
}

.atc-shop-title {
	font-weight: 600;
	margin: 4px 0 0;
}

.atc-shop-cost {
	font-weight: 600;
	color: #2271b1;
	margin: 4px 0 10px;
}

.atc-buy-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---------------------- ARMARIO ---------------------- */

/* Mobile-first: una sola columna y SIN "sticky" por defecto. El "sticky"
   solo tiene sentido en pantallas anchas donde el avatar va al lado de la
   lista de ítems; en una sola columna, "sticky" hace que el avatar se
   quede fijo mientras el resto del contenido se desliza detrás/encima de
   él, amontonando todo visualmente. */
.atc-armario-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

.atc-avatar-preview {
	text-align: center;
	position: static;
}

@media (min-width: 701px) {
	.atc-armario-layout {
		grid-template-columns: minmax(220px, 320px) 1fr;
		gap: 32px;
	}

	.atc-avatar-preview {
		position: sticky;
		top: 20px;
	}
}

.atc-armario-hint {
	font-size: 0.8em;
	color: #888;
}

.atc-avatar-canvas {
	position: relative;
	width: min(100%, var(--atc-canvas-size, 500px));
	aspect-ratio: 1 / 1;
	margin: 0 auto 16px;
	background: repeating-conic-gradient(#f0f0f1 0% 25%, #fff 0% 50%) 50% / 20px 20px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #e0e0e0;
}

.atc-avatar-canvas .atc-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Orden de apilado (atrás → adelante): fondo, personaje, ropa,
   accesorio (cara), mascota / objeto de mano. Debe coincidir con
   ATC_Shortcode::get_layer_order() en PHP. */
.atc-layer[data-layer="fondo"]      { z-index: 1; }
.atc-layer[data-layer="personaje"]  { z-index: 2; }
.atc-layer[data-layer="ropa"]       { z-index: 3; }
.atc-layer[data-layer="accesorio"]  { z-index: 4; }
.atc-layer[data-layer="mascota"]    { z-index: 5; }

.atc-canvas-placeholder {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	color: #999;
	font-size: 0.9em;
	width: 80%;
	text-align: center;
	margin: 0;
}

.atc-owned-items {
	min-width: 0;
}

.atc-category-heading {
	margin: 20px 0 10px;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #444;
}

.atc-category-heading:first-child {
	margin-top: 0;
}

.atc-owned-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 12px;
}

.atc-owned-item {
	position: relative;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	padding: 8px;
	background: #fff;
	cursor: pointer;
	text-align: center;
	font-size: 0.8em;
}

.atc-owned-item img {
	width: 100%;
	height: 70px;
	object-fit: contain;
	background: #f7f7f7;
	border-radius: 4px;
	margin-bottom: 4px;
}

.atc-owned-item-title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.atc-equipped-badge,
.atc-incompatible-badge {
	display: none;
	position: absolute;
	top: 4px;
	right: 4px;
	font-size: 0.65em;
	padding: 2px 6px;
	border-radius: 10px;
	color: #fff;
}

.atc-equipped-badge {
	background: #2271b1;
}

.atc-incompatible-badge {
	background: #a52b2b;
}

.atc-owned-item.is-equipped {
	border-color: #2271b1;
	background: #eef6fc;
}

.atc-owned-item.is-equipped .atc-equipped-badge {
	display: inline-block;
}

.atc-owned-item.is-incompatible {
	opacity: 0.45;
	cursor: not-allowed;
	filter: grayscale(60%);
}

.atc-owned-item.is-incompatible .atc-incompatible-badge {
	display: inline-block;
}

/* ---------------------- MÓVIL ANGOSTO ---------------------- */

@media (max-width: 480px) {
	.atc-shop-grid,
	.atc-owned-grid {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: 10px;
	}

	.atc-shop-filters {
		gap: 4px;
	}

	.atc-filter-btn {
		padding: 5px 10px;
		font-size: 0.8em;
	}

	.atc-balances {
		gap: 6px;
	}

	.atc-balance {
		padding: 4px 10px;
		font-size: 0.85em;
	}
}