/*
 * Listado público de marcas ([awin_marcas]) — paleta corporativa cálida
 * (--color-*, ya global vía frontend.css), no el tema oscuro de la ficha.
 * Deliberadamente NO se toca el marcado .awin-card-row/.awin-main-row/
 * .awin-col-* que emite Awin_Glass_Ajax::render_brands_page(): ya tiene
 * estilo completo y correcto en assets/css/frontend.css (líneas ~192-213,
 * la misma base que usa la home hoy), así que solo se aporta el "chrome" de
 * página (título, buscador, spinner, vacío) y se apila en columna, como en
 * la home actual — nada de grid de tarjetas.
 */
.awin-marcas-page {
	background: var(--color-bg, #fff9f2);
	color: var(--color-text-primary, #2d1810);
	border-radius: 18px;
	padding: 32px clamp(16px, 4vw, 40px) 48px;
	width: 100%;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.awin-marcas-page * { box-sizing: border-box; }

.awin-marcas-title {
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
	color: var(--color-text-primary, #2d1810);
}
.awin-marcas-subtitle {
	color: var(--color-text-secondary, #a07060);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 24px;
	max-width: 60ch;
}

.awin-marcas-search-wrap { position: relative; margin-bottom: 20px; }
.awin-marcas-search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-text-tertiary, #c49888);
	pointer-events: none;
}
.awin-marcas-search-input {
	width: 100%;
	padding: 12px 14px 12px 40px;
	border-radius: 10px;
	border: 1px solid var(--color-border, rgba(160,100,60,0.22));
	background: var(--color-surface, #ffffff);
	color: var(--color-text-primary, #2d1810);
	font-size: 14px;
	outline: none;
	transition: border-color .15s;
}
.awin-marcas-search-input::placeholder { color: var(--color-text-tertiary, #c49888); }
.awin-marcas-search-input:focus { border-color: var(--color-primary-600, #FFA07A); }

.awin-marcas-grid { display: flex; flex-direction: column; }

.awin-marcas-loading { display: flex; justify-content: center; padding: 24px 0; }
.awin-marcas-spinner {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 3px solid rgba(255, 160, 122, 0.25);
	border-top-color: var(--color-primary-600, #FFA07A);
	animation: awin-marcas-spin .7s linear infinite;
}
@keyframes awin-marcas-spin { to { transform: rotate(360deg); } }

.awin-marcas-empty { text-align: center; color: var(--color-text-secondary, #a07060); padding: 32px 0; }
.awin-marcas-sentinel { height: 1px; }

/* Popup "¿qué quieres hacer con esta marca?" al hacer clic en una fila —
   copiado tal cual de assets/css/messages.css (.awin-brand-cta-popup y
   compañía), que no está scopeado al panel, así que es seguro reutilizarlo
   aquí sin arrastrar el resto de ese archivo. */
.awin-brand-cta-popup { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.awin-brand-cta-popup-overlay { position: absolute; inset: 0; background: rgba(30, 20, 15, 0.55); backdrop-filter: blur(2px); }
.awin-brand-cta-popup-content { position: relative; width: 90%; max-width: 380px; background: #fff; border-radius: 18px; padding: 32px 28px 28px; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); animation: awinBrandCtaPopIn 0.25s ease; }
@keyframes awinBrandCtaPopIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.awin-brand-cta-popup-close { position: absolute; top: 10px; right: 12px; border: none; background: transparent; font-size: 22px; line-height: 1; color: #999; cursor: pointer; padding: 4px; }
.awin-brand-cta-popup-close:hover { color: #555; }
.awin-brand-cta-popup-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; display: block; margin: 0 auto; background: #f7f5f3; padding: 6px; }
.awin-brand-cta-popup-title { font-size: 19px; font-weight: 700; color: #2a2a2a; margin: 14px 0 20px; }
.awin-brand-cta-popup-cta { width: 100%; border: none; border-radius: 12px; padding: 13px 18px; font-size: 15px; font-weight: 600; color: #fff; background: var(--color-primary-600, #FFA07A); cursor: pointer; transition: background 0.2s, transform 0.15s; }
.awin-brand-cta-popup-cta:hover { background: var(--color-primary-700, #e07858); transform: translateY(-1px); }
.awin-brand-select-popup-actions { display: flex; flex-direction: column; gap: 10px; }
.awin-brand-select-popup-ficha { width: 100%; border: 1px solid #e2ddd8; border-radius: 12px; padding: 12px 18px; font-size: 14px; font-weight: 600; color: #555; background: #fff; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.awin-brand-select-popup-ficha:hover { background: #f7f5f3; border-color: #d5cfc9; }

@media (max-width: 640px) {
	.awin-marcas-page { padding: 24px 12px 36px; border-radius: 0; }
	.awin-marcas-title { font-size: 1.6rem; }
}