/* ==========================================================================
   MUN Delegate Hub - componentes compartidos
   Reproducen los componentes shadcn/ui del original (button.tsx, card.tsx,
   LanguageSwitcher.tsx, CountdownTimer.tsx) con los mismos valores de
   Tailwind. Prefijo mun- para no chocar con las clases de Bootstrap.
   ========================================================================== */

/* ---- Iconos Lucide (sprite assets/img/lucide.svg) ---- */

.icon {
	display: block;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- Boton (button.tsx: pildora por defecto; sm y lg con radio "md") ---- */

.mun-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 2.5rem;
	padding: 0.5rem 1rem;
	border: 0 solid transparent;
	border-radius: 9999px;
	background-color: transparent;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mun-btn:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.mun-btn .icon {
	width: 1rem;
	height: 1rem;
	pointer-events: none;
}

.mun-btn--sm {
	height: 2.25rem;
	padding: 0 0.75rem;
	border-radius: calc(var(--radius) - 2px);
}

.mun-btn--lg {
	height: 2.75rem;
	padding: 0 2rem;
	border-radius: calc(var(--radius) - 2px);
}

/* variante "default": dorado, texto marron oscuro semibold */
.mun-btn--default {
	background-color: hsl(var(--primary));
	color: hsl(30, 40%, 12%);
	font-weight: 600;
}

.mun-btn--default:hover {
	background-color: hsl(var(--primary) / 0.9);
	color: hsl(30, 40%, 12%);
}

/* variante "ghost" */
.mun-btn--ghost:hover {
	background-color: hsl(var(--accent));
	color: hsl(var(--accent-foreground));
}

/* variante "outline" usada sobre la imagen del hero (bg-white/10 border-2 border-white/60) */
.mun-btn--hero-outline {
	border: 2px solid hsl(0 0% 100% / 0.6);
	background-color: hsl(0 0% 100% / 0.1);
	color: hsl(var(--primary-foreground));
}

.mun-btn--hero-outline:hover {
	background-color: hsl(0 0% 100% / 0.2);
	color: hsl(var(--accent-foreground));
}

/* ancho completo en movil y automatico desde "sm" (w-full sm:w-auto) */
.mun-btn--block-mobile {
	width: 100%;
}

/* visibilidad con los breakpoints de Tailwind (sm = 640px; en Bootstrap seria 576px) */
.mun-hide-mobile { display: none; }
.mun-show-mobile { display: inline-flex; }

@media (min-width: 640px) {
	.mun-hide-mobile { display: inline-flex; }
	.mun-show-mobile { display: none; }
	.mun-btn--block-mobile { width: auto; }
}

/* ---- Tarjeta (card.tsx) ---- */

.mun-card {
	border: 1px solid hsl(var(--border));
	border-radius: 0.75rem;
	background-color: hsl(var(--card));
	color: hsl(var(--card-foreground));
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* ---- Selector de idioma (LanguageSwitcher.tsx) ---- */

.mun-lang {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
	padding: 0.125rem;
	border-radius: 9999px;
	background-color: hsl(var(--muted));
}

.mun-lang__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	height: 1.75rem;
	padding: 0 0.625rem;
	border: 0 solid transparent;
	border-radius: 9999px;
	background-color: transparent;
	color: hsl(var(--muted-foreground));
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mun-lang__btn:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.mun-lang__btn[aria-current="true"] {
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* igual que el original: al pasar el raton el fondo se vuelve transparente y el texto toma el color de acento */
.mun-lang__btn:hover {
	background-color: transparent;
	color: hsl(var(--accent-foreground));
}

/* ---- Cuenta regresiva (CountdownTimer.tsx) ---- */

.mun-countdown {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.mun-countdown__unit {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.mun-countdown__col {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mun-countdown__box {
	min-width: 50px;
	padding: 0.5rem 0.75rem;
	border: 1px solid hsl(var(--primary-foreground) / 0.2);
	border-radius: var(--radius);
	background-color: hsl(var(--primary-foreground) / 0.1);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.mun-countdown__value {
	display: block;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	color: hsl(var(--primary-foreground));
	font-variant-numeric: tabular-nums;
}

.mun-countdown__label {
	margin-top: 0.25rem;
	font-size: 0.75rem;
	line-height: 1rem;
	color: hsl(var(--primary-foreground) / 0.7);
}

.mun-countdown__sep {
	margin-bottom: 1rem;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	color: hsl(var(--secondary));
}

@media (min-width: 640px) {
	.mun-countdown { gap: 1rem; }
	.mun-countdown__unit { gap: 1rem; }
	.mun-countdown__box { min-width: 70px; padding: 0.75rem 1rem; }
	.mun-countdown__value { font-size: 1.875rem; line-height: 2.25rem; }
	.mun-countdown__label { font-size: 0.875rem; line-height: 1.25rem; }
	.mun-countdown__sep { font-size: 1.5rem; line-height: 2rem; }
}

/* ---- Pagina 404 (NotFound.tsx) y pagina de error ---- */

.mun-notfound {
	display: flex;
	min-height: 100vh;
	align-items: center;
	justify-content: center;
	background-color: hsl(var(--muted));
}

.mun-notfound__inner {
	text-align: center;
}

.mun-notfound__code {
	margin-bottom: 1rem;
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 700;
}

.mun-notfound__text {
	margin-bottom: 1rem;
	font-size: 1.25rem;
	line-height: 1.75rem;
	color: hsl(var(--muted-foreground));
}

.mun-notfound__link {
	color: hsl(var(--primary));
	text-decoration: underline;
}

.mun-notfound__link:hover {
	color: hsl(var(--primary) / 0.9);
	text-decoration: underline;
}