/* ==========================================================================
   MUN Delegate Hub - tema base
   Tokens y base tomados de src/index.css y tailwind.config.ts del proyecto
   original de Lovable (paleta dorado y marron calido). Se carga DESPUES de
   Bootstrap 5.3.3: aqui se neutraliza el "reboot" de Bootstrap para que la
   tipografia, los margenes y los breakpoints coincidan con Tailwind (el
   diseno original), que es la prioridad sobre AdminKit.
   ========================================================================== */

:root {
	/* Paleta MKMUN (triplete HSL, igual que Lovable: se usa como hsl(var(--x))) */
	--background: 0 0% 100%;
	--foreground: 30 40% 20%;

	--card: 0 0% 100%;
	--card-foreground: 30 40% 20%;

	--popover: 0 0% 100%;
	--popover-foreground: 30 40% 20%;

	--primary: 45 95% 50%;
	--primary-foreground: 0 0% 100%;

	--secondary: 30 35% 35%;
	--secondary-foreground: 0 0% 100%;

	--muted: 45 30% 90%;
	--muted-foreground: 30 20% 40%;

	--accent: 45 90% 55%;
	--accent-foreground: 30 40% 20%;

	--destructive: 0 72% 51%;
	--destructive-foreground: 0 0% 100%;

	--border: 45 20% 85%;
	--input: 45 20% 85%;
	--ring: 45 95% 50%;

	--radius: 0.5rem;

	/* Tokens propios */
	--gold: 45 95% 50%;
	--gold-light: 45 70% 85%;
	--navy: 30 35% 35%;
	--navy-light: 30 25% 50%;
	--success: 142 71% 45%;
	--warning: 38 92% 50%;
	--matrix-available-bg: 152 81% 96%;
	--matrix-available-text: 163 88% 20%;
	--matrix-pending-bg: 48 96% 89%;
	--matrix-pending-text: 32 81% 29%;

	/* Degradados */
	--gradient-hero: linear-gradient(135deg, hsl(30 35% 25%) 0%, hsl(30 30% 40%) 100%);
	--gradient-gold: linear-gradient(135deg, hsl(45 95% 50%) 0%, hsl(40 90% 45%) 100%);
	--gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(45 30% 97%) 100%);

	/* Sombras */
	--shadow-sm: 0 1px 2px 0 hsl(30 20% 15% / 0.05);
	--shadow-md: 0 4px 6px -1px hsl(30 20% 15% / 0.1), 0 2px 4px -2px hsl(30 20% 15% / 0.1);
	--shadow-lg: 0 10px 15px -3px hsl(30 20% 15% / 0.1), 0 4px 6px -4px hsl(30 20% 15% / 0.1);
	--shadow-xl: 0 20px 25px -5px hsl(30 20% 15% / 0.1), 0 8px 10px -6px hsl(30 20% 15% / 0.1);
	--shadow-gold: 0 4px 14px 0 hsl(45 95% 50% / 0.35);

	/* Barra lateral del portal (se usa en las paginas internas) */
	--sidebar-background: 30 35% 22%;
	--sidebar-foreground: 45 30% 96%;
	--sidebar-primary: 45 95% 50%;
	--sidebar-primary-foreground: 30 35% 15%;
	--sidebar-accent: 30 30% 30%;
	--sidebar-accent-foreground: 45 30% 96%;
	--sidebar-border: 30 25% 35%;
	--sidebar-ring: 45 95% 50%;

	/* Tipografia (misma pila que tailwind.config.ts: Inter y, si no esta instalada, la del sistema) */
	--font-sans: Inter, system-ui, sans-serif;
	--font-display: Brockmann, "SF Pro Display", Inter, system-ui, sans-serif;
	--font-serif: "Playfair Display", Georgia, serif;

	/* Puente hacia Bootstrap 5.3 (variables CSS) para los componentes que se usen mas adelante */
	--bs-body-font-family: var(--font-sans);
	--bs-body-color: hsl(var(--foreground));
	--bs-body-bg: hsl(var(--background));
	--bs-border-color: hsl(var(--border));
	--bs-border-radius: var(--radius);
}

/* ---- Base (equivale al "preflight" de Tailwind + @layer base de Lovable) ---- */

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	font-family: var(--font-sans);
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: inherit;
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "rlig" 1, "calt" 1;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-display);
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	letter-spacing: -0.025em;
}

p {
	margin: 0;
}

a,
a:hover {
	color: inherit;
	text-decoration: inherit;
}

img,
svg {
	display: block;
	vertical-align: middle;
}

img {
	max-width: 100%;
	height: auto;
}

button {
	font-family: inherit;
}

/* ---- Contenedor (Tailwind "container mx-auto px-4"; 2xl = 1400px) ---- */

.mun-container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 640px)  { .mun-container { max-width: 640px; } }
@media (min-width: 768px)  { .mun-container { max-width: 768px; } }
@media (min-width: 1024px) { .mun-container { max-width: 1024px; } }
@media (min-width: 1280px) { .mun-container { max-width: 1280px; } }
@media (min-width: 1536px) { .mun-container { max-width: 1400px; } }

/* ---- Utilidades propias del diseno ---- */

.mun-gradient-hero {
	background: var(--gradient-hero);
}

.mun-gradient-gold {
	background: var(--gradient-gold);
}

.mun-shadow-elegant {
	box-shadow: var(--shadow-lg);
}

.mun-shadow-gold {
	box-shadow: var(--shadow-gold);
}

/* ---- Animaciones (identicas a las de Lovable) ---- */

@keyframes munFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes munSlideUp {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.mun-animate-fade-in  { animation: munFadeIn 0.7s ease-out forwards; }
.mun-animate-slide-up { animation: munSlideUp 0.7s ease-out forwards; }

.mun-delay-1 { animation-delay: 0.1s; }
.mun-delay-2 { animation-delay: 0.2s; }
.mun-delay-3 { animation-delay: 0.3s; }