/* ================================================================
   Cuenta Regresiva CyberDay — estilos del contador (frontend)
   ================================================================ */

.cyberday-cd {
	--cd-primary: #00f0ff;
	--cd-secondary: #ff2d95;
	position: relative;
	margin: 22px 0;
	padding: 22px 18px 20px;
	border-radius: 16px;
	background:
		radial-gradient(circle at 18% -10%, rgba(0, 240, 255, 0.16), transparent 55%),
		radial-gradient(circle at 110% 120%, rgba(255, 45, 149, 0.18), transparent 55%),
		linear-gradient(135deg, #0b0220 0%, #120a2e 55%, #1a0b2e 100%);
	border: 1px solid var(--cd-primary);
	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.45),
		0 0 26px rgba(0, 240, 255, 0.22),
		inset 0 0 36px rgba(0, 0, 0, 0.55);
	overflow: hidden;
	text-align: center;
	font-family: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Rejilla tipo HUD */
.cyberday-cd::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
	background-size: 28px 28px;
	opacity: 0.7;
	pointer-events: none;
}

/* Línea de escaneo */
.cyberday-cd__scan {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--cd-primary), transparent);
	box-shadow: 0 0 14px var(--cd-primary);
	opacity: 0.55;
	pointer-events: none;
	animation: cyberday-cd-scan 4.5s ease-in-out infinite;
}

@keyframes cyberday-cd-scan {
	0%, 100% { top: 0; }
	50% { top: calc(100% - 2px); }
}

.cyberday-cd__inner {
	position: relative;
	z-index: 1;
}

.cyberday-cd__title {
	font-size: clamp(0.85rem, 2.4vw, 1.05rem);
	font-weight: 900;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cd-secondary);
	text-shadow: 0 0 10px var(--cd-secondary), 0 0 22px var(--cd-secondary);
	margin: 0 0 16px;
}

.cyberday-cd__grid {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
}

.cyberday-cd__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 70px;
}

.cyberday-cd__num {
	display: block;
	width: 100%;
	padding: 12px 6px;
	font-size: clamp(1.7rem, 6vw, 2.6rem);
	font-weight: 900;
	line-height: 1;
	color: #ffffff;
	font-variant-numeric: tabular-nums;
	background: linear-gradient(180deg, rgba(0, 240, 255, 0.14), rgba(0, 0, 0, 0.35));
	border: 1px solid var(--cd-primary);
	border-radius: 10px;
	text-shadow: 0 0 10px var(--cd-primary), 0 0 20px var(--cd-primary);
	box-shadow: 0 0 16px rgba(0, 240, 255, 0.28), inset 0 0 14px rgba(0, 240, 255, 0.12);
}

.cyberday-cd__label {
	margin-top: 7px;
	font-size: clamp(0.55rem, 1.6vw, 0.66rem);
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cd-primary);
	opacity: 0.85;
}

.cyberday-cd__sep {
	font-size: clamp(1.4rem, 5vw, 2.2rem);
	font-weight: 900;
	line-height: 1;
	color: var(--cd-secondary);
	text-shadow: 0 0 10px var(--cd-secondary);
	margin-top: 10px;
	animation: cyberday-cd-blink 1s steps(1, end) infinite;
}

@keyframes cyberday-cd-blink {
	50% { opacity: 0.2; }
}

.cyberday-cd__subtitle {
	margin-top: 16px;
	font-size: clamp(0.72rem, 2vw, 0.82rem);
	letter-spacing: 0.5px;
	color: rgba(255, 255, 255, 0.72);
	font-family: 'Segoe UI', system-ui, sans-serif;
}

.cyberday-cd__expired-msg {
	font-size: clamp(1.1rem, 4vw, 1.5rem);
	font-weight: 900;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cd-secondary);
	text-shadow: 0 0 12px var(--cd-secondary);
	padding: 14px 6px;
}

@media (max-width: 380px) {
	.cyberday-cd__unit { min-width: 56px; }
	.cyberday-cd__num { padding: 10px 4px; }
	.cyberday-cd__grid { gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
	.cyberday-cd__scan,
	.cyberday-cd__sep { animation: none; }
}