/*
 * Estilos del módulo Storefront (hcp-web): calendario, árbol Pixels,
 * banner de cookies, aviso de cierre estival, widgets de ranking.
 * El PHP que genera este markup vive en src/Storefront/ y
 * src/Support/Ranking/ — aquí solo el CSS, nada de lógica.
 */

/* ---------- Calendario ([hcp_calendario]) ---------- */

.hcp-calendario {
	display: flex;
	flex-direction: column;
	gap: 1em;
	width: 100%;
	box-sizing: border-box;
}
.hcp-cal-revista {
	display: flex;
	gap: 1em;
	align-items: stretch;
	border: 1px solid var(--hcp-line, #e0e0e0);
	border-radius: 8px;
	overflow: hidden;
	background: var(--hcp-paper, #fff);
	box-sizing: border-box;
}
.hcp-cal-foto { flex: 0 0 120px; }
.hcp-cal-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hcp-cal-datos { flex: 1; min-width: 0; padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; }
.hcp-cal-titulo { font-weight: 700; font-size: 1.1em; margin-bottom: 4px; }
.hcp-cal-fila { display: flex; justify-content: space-between; gap: .5em; padding: 3px 0; border-top: 1px solid #eee; }
.hcp-cal-fila:first-child { border-top: none; }
.hcp-cal-etiqueta { text-transform: uppercase; font-weight: 700; color: var(--hcp-red, #cf2e2e); font-size: .7em; letter-spacing: .02em; }
.hcp-cal-fecha { font-weight: 600; font-size: .85em; white-space: nowrap; }
.hcp-cal-fila.pasada { opacity: .45; }
.hcp-cal-fila.pasada .hcp-cal-etiqueta { color: #999; }
.hcp-cal-vacio { color: #999; margin: 0; }
.hcp-cal-foto a, .hcp-cal-titulo a { color: inherit; text-decoration: none; }
.hcp-cal-titulo a:hover { text-decoration: underline; }

/* ---------- Banner de cookies ---------- */

.hcp-cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	background: #1f1f1f;
	color: #fff;
	padding: 16px 20px;
	padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	font-size: 14px;
	line-height: 1.5;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, .2);
}
.hcp-cookie-banner__inner {
	max-width: var(--hcp-wrap, 1200px);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	justify-content: space-between;
}
.hcp-cookie-banner__text { flex: 1; min-width: 220px; }
.hcp-cookie-banner__link { color: var(--hcp-red, #cf2e2e); text-decoration: underline; }
.hcp-cookie-banner__actions { display: flex; gap: 10px; }
.hcp-cookie-banner__btn {
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	border: 1px solid #fff;
}
.hcp-cookie-banner__btn--ghost { background: transparent; color: #fff; }
.hcp-cookie-banner__btn--solid { background: var(--hcp-red, #cf2e2e); color: #fff; border-color: var(--hcp-red, #cf2e2e); }

.hcp-politica-cookies h2 { margin-top: 1.5em; }
.hcp-politica-cookies ul { padding-left: 1.2em; }

/* ---------- Aviso de cierre estival ---------- */

.hcp-summer-banner {
	background: var(--hcp-warning, #e65100);
	color: #fff;
	text-align: center;
	padding: 10px 20px;
	font-size: .9em;
}
.hcp-summer-banner__inner { max-width: var(--hcp-wrap, 1200px); margin: 0 auto; }
.hcp-summer-banner__inner p { margin: 0; }

/* ---------- Ranking (avatares, consolas, insignias) ---------- */
/* Los shortcodes de Support\Ranking emiten HTML "sin estilos, el tema los
   pone" — este es ese CSS. */

.hcp-avatar-ranking .avatars,
.hcp-avatar-ranking .numbers,
.hcp-console-wars,
.hcp-badge-ranking {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hcp-avatar-ranking li,
.hcp-console-wars li,
.hcp-badge-ranking li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--hcp-line, #e0e0e0);
}
.hcp-avatar-ranking img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.hcp-avatar-ranking .name,
.hcp-console-wars .name,
.hcp-badge-ranking .name { font-weight: 700; }
.hcp-console-wars .pct { margin-left: auto; color: var(--hcp-muted, #6b6b6b); }
.hcp-badge-ranking .description { color: var(--hcp-muted, #6b6b6b); font-size: .85em; }
.hcp-badge-ranking .total { margin-left: auto; color: var(--hcp-muted, #6b6b6b); font-size: .8em; }
.hcp-ranking-empty { color: var(--hcp-muted, #6b6b6b); }

/* ---------- Árbol Pixels ([hcp_arbol_pixels]) ---------- */

.hcp-ap-wrap {
	background: #17151a;
	color: #f5f5f5;
	padding: 24px 0 28px;
	overflow: hidden;
}
.hcp-ap-intro {
	width: 100%;
	margin: 0 0 20px;
	padding: 0 24px;
	text-align: center;
}
.hcp-ap-intro h2 {
	font-size: 1.4rem;
	letter-spacing: 0.04em;
	margin: 0 0 8px;
	background: linear-gradient(90deg, #57c2ff, #84bc33, #f5f929, #e83d23);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hcp-ap-intro p {
	color: #c9c9c9;
	line-height: 1.45;
	margin: 0;
	font-size: 0.85rem;
}

.hcp-ap-track {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 8px 8vw 16px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #57c2ff #262329;
	cursor: grab;
}
.hcp-ap-track:active { cursor: grabbing; }
.hcp-ap-track::-webkit-scrollbar { height: 6px; }
.hcp-ap-track::-webkit-scrollbar-track { background: #262329; }
.hcp-ap-track::-webkit-scrollbar-thumb { background: #57c2ff; border-radius: 4px; }

.hcp-ap-content {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 26px;
	width: max-content;
}

.hcp-ap-linea {
	position: absolute;
	left: 0;
	right: 0;
	top: 29px;
	height: 3px;
	background: linear-gradient(90deg, #57c2ff, #84bc33, #f5f929, #e83d23);
	z-index: 0;
}
.hcp-ap-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	overflow: visible;
}

.hcp-ap-stop {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.hcp-ap-grupo-personas {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: repeat(var(--hcp-ap-cols, 1), 150px);
	grid-auto-rows: min-content;
	gap: 8px;
}
.hcp-ap-grupo-personas .hcp-ap-card {
	width: 150px;
}
.hcp-ap-columna-revista {
	font-size: 0.62rem;
	font-weight: 700;
	color: #84bc33;
	text-align: center;
	margin: -4px 0 8px;
}

/* Cabecera (año + punto) con altura fija: así el punto queda siempre
   en la misma fila horizontal, sin importar cuántas tarjetas cuelguen
   debajo, y las líneas de conexión nunca cruzan por encima de ellas. */
.hcp-ap-header,
.hcp-ap-header-spacer {
	height: 34px;
	flex: none;
}
.hcp-ap-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 10px;
}
.hcp-ap-stop-year {
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: #f5f929;
	margin-bottom: 4px;
}
.hcp-ap-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #17151a;
	border: 2px solid #f5f929;
	flex: none;
}
.hcp-ap-dot.hcp-ap-hub {
	width: 12px;
	height: 12px;
	border-color: #fff;
}

/* Tarjeta horizontal de persona: foto izquierda, nombre+rol derecha */
.hcp-ap-card {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 168px;
	background: #221f26;
	border: 1px solid #3a3640;
	border-radius: 8px;
	padding: 6px 8px 6px 6px;
	text-align: left;
	opacity: 0;
	transform: translateY(14px) scale(0.96);
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.hcp-ap-card.hcp-ap-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.hcp-ap-card.hcp-ap-repetido {
	border-color: var(--hcp-ap-color, #57c2ff);
}
.hcp-ap-foto {
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: #33303a;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	border: 2px solid #57c2ff;
}
.hcp-ap-card.hcp-ap-repetido .hcp-ap-foto {
	border-color: var(--hcp-ap-color, #57c2ff);
}
.hcp-ap-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hcp-ap-info {
	min-width: 0;
}
.hcp-ap-nombre {
	font-weight: 700;
	font-size: 0.68rem;
	line-height: 1.15;
}
.hcp-ap-card.hcp-ap-repetido .hcp-ap-nombre {
	color: var(--hcp-ap-color, #57c2ff);
}
.hcp-ap-rol {
	font-size: 0.58rem;
	color: #9d9d9d;
	margin-top: 1px;
	line-height: 1.2;
}

/* Tarjetas de portada (Hobby Consolas nº1, Pixels, MicroHobby, Micromanía) */
.hcp-ap-card-portada {
	display: block;
	width: 132px;
	padding: 10px 8px;
	text-align: center;
}
.hcp-ap-portada-img {
	width: 88px;
	aspect-ratio: 5 / 7;
	margin: 0 auto;
	background: linear-gradient(135deg, #2a1f33, #221f26);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	overflow: hidden;
}
.hcp-ap-portada-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 4px;
}
.hcp-ap-portada-placeholder {
	font-size: 0.62rem;
	color: #9d9d9d;
	text-align: center;
	line-height: 1.4;
	padding: 4px;
}
.hcp-ap-portada-revista {
	font-weight: 700;
	font-size: 0.68rem;
	color: #f5f929;
	margin-top: 8px;
	line-height: 1.25;
}
.hcp-ap-portada-editorial {
	font-size: 0.58rem;
	color: #9d9d9d;
	margin-top: 2px;
}
.hcp-ap-portada-personas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.hcp-ap-portada-personas li {
	border-top: 1px solid #3a3640;
	padding-top: 4px;
}
.hcp-ap-portada-personas li.hcp-ap-repetido {
	border-top-color: var(--hcp-ap-color, #57c2ff);
}
.hcp-ap-portada-nombre {
	display: block;
	font-weight: 700;
	font-size: 0.62rem;
	line-height: 1.2;
}
.hcp-ap-portada-personas li.hcp-ap-repetido .hcp-ap-portada-nombre {
	color: var(--hcp-ap-color, #57c2ff);
}
.hcp-ap-portada-rol {
	display: block;
	font-size: 0.56rem;
	color: #9d9d9d;
}

@media (max-width: 640px) {
	.hcp-ap-content { gap: 16px; }
	.hcp-ap-card { width: 148px; }
	.hcp-ap-grupo-personas { grid-template-columns: repeat(var(--hcp-ap-cols, 1), 138px); }
	.hcp-ap-grupo-personas .hcp-ap-card { width: 138px; }
	.hcp-ap-card-portada { width: 116px; }
	.hcp-ap-portada-img { width: 76px; }
}