/* ==========================================
   CSS Variables - Design System
   ========================================== */
:root {
	/* Colors - Paleta San Diego */
	--color-primary: #1F4889;
	--color-primary-light: #3385ff;
	--color-primary-dark: #10275c;
	--color-background: #ffffff;
	--color-text: #1f2937;
	--color-text-light: #6b7280;
	--color-accent: #66a3ff;

	/* Spacing */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;
	--spacing-2xl: 4rem;

	/* Typography */
	--font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-size-base: 16px;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.5rem;
	--font-size-2xl: 2rem;
	--font-size-3xl: 2.5rem;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

	/* Animation */
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;
}

/* ==========================================
   Reset & Base Styles
   ========================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: var(--font-size-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--font-base);
	color: var(--color-text);
	background: linear-gradient(135deg, #1F4889 0%, #3385ff 100%);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-md);
	line-height: 1.6;
}

/* ==========================================
   Main Container
   ========================================== */
.container {
	background-color: var(--color-background);
	border-radius: 1rem;
	box-shadow: var(--shadow-lg);
	padding: var(--spacing-xl);
	max-width: 900px;
	width: 100%;
	text-align: center;
	animation: fadeInUp 0.8s ease-out;
}

/* ==========================================
   Header & Logo
   ========================================== */
.header {
	margin-bottom: var(--spacing-lg);
}

.logo {
	width: 280px;
	height: auto;
	animation: fadeIn 1s ease-out;
	filter: drop-shadow(var(--shadow-md));
}

/* ==========================================
   Content Section
   ========================================== */
.content {
	margin-bottom: var(--spacing-xl);
}

.title {
	font-size: var(--font-size-2xl);
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: var(--spacing-md);
	line-height: 1.2;
}

.description {
	font-size: var(--font-size-lg);
	color: var(--color-text-light);
	margin-bottom: var(--spacing-lg);
	line-height: 1.7;
}

/* ==========================================
   Extranet Button
   ========================================== */
.extranet-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-sm) var(--spacing-lg);
	background-color: var(--color-primary);
	color: #ffffff;
	font-size: 1.125rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0.5rem;
	transition: background-color var(--transition-base);
	box-shadow: var(--shadow-md);
}

.extranet-button:hover {
	background-color: var(--color-primary-dark);
}

.extranet-button:active {
	background-color: var(--color-primary-dark);
}

/* ==========================================
   Footer
   ========================================== */
.footer {
	padding-top: var(--spacing-lg);
	border-top: 1px solid #e5e7eb;
}

.footer-text {
	font-size: 0.875rem;
	color: var(--color-text-light);
}

/* ==========================================
   Animations
   ========================================== */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

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

@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}


/* ==========================================
   Responsive Design - Mobile First
   ========================================== */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.container {
		padding: var(--spacing-2xl);
	}

	.title {
		font-size: var(--font-size-3xl);
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.logo {
		width: 350px;
	}

	.title {
		font-size: 3rem;
	}

	.description {
		font-size: 1.25rem;
	}
}

/* ==========================================
   Accessibility - Reduced Motion
   ========================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================
   Print Styles
   ========================================== */
@media print {
	body {
		background: white;
	}

	.container {
		box-shadow: none;
	}

	.pulse {
		animation: none;
	}
}

/* ==========================================
   Dark Mode Support (Optional)
   ========================================== */
@media (prefers-color-scheme: dark) {
	:root {
		--color-background: #1f2937;
		--color-text: #f9fafb;
		--color-text-light: #d1d5db;
	}

	body {
		background: linear-gradient(135deg, #15326b 0%, #0b1c4d 100%);
	}

	.status {
		background-color: #10275c;
		border-color: #15326b;
	}

	.footer {
		border-top-color: #374151;
	}
}