/* Colores oficiales MRE Paraguay - Actualizado 19/09/2025 13:21 */
:root {
	--primary-burgundy: #800020;
	--secondary-burgundy: #9d4357;
	--light-mauve: #c8a2c8;
	--dark-mauve: #9370db;
	--text-dark: #2c2c2c;
	--text-light: #ffffff;
	--background-light: #f8f9fa;
	--border-light: #e9ecef;
	--success-green: #28a745;
	--error-red: #dc3545;
}

/* Override Bootstrap styles with higher specificity */
.modern-card .card-header,
.card .card-header,
.card-header {
	background: linear-gradient(135deg, var(--primary-burgundy), var(--secondary-burgundy)) !important;
	color: var(--text-light) !important;
	border: none !important;
	padding: 1.5rem !important;
}

/* Específicamente para el header de información */
.bg-info {
	background: linear-gradient(135deg, var(--primary-burgundy), var(--secondary-burgundy)) !important;
	background-color: var(--primary-burgundy) !important;
}

/* Override para cualquier elemento con estas clases de Bootstrap */
.bg-primary {
	background: linear-gradient(135deg, var(--primary-burgundy), var(--secondary-burgundy)) !important;
	background-color: var(--primary-burgundy) !important;
}

.bg-success {
	background: linear-gradient(135deg, var(--success-green), #1e7e34) !important;
	background-color: var(--success-green) !important;
}

/* Forzar el estilo burgundy en headers */
.card-header h4,
.card-header h3,
.card-header h2,
.card-header h1 {
	color: var(--text-light) !important;
}

/* Override para elementos que tengan bg-info aplicado directamente */
[class*="bg-info"] {
	background: linear-gradient(135deg, var(--primary-burgundy), var(--secondary-burgundy)) !important;
}

* {
	box-sizing: border-box;
}

html,
body {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	background-color: var(--background-light);
	color: var(--text-dark);
}

/* Fondo sutil con patrón */
.bg-pattern {
	background: radial-gradient(circle at 25% 25%, rgba(128, 0, 32, 0.05), transparent 60%),
		radial-gradient(circle at 75% 75%, rgba(157, 67, 87, 0.05), transparent 60%),
		linear-gradient(120deg, #ffffff, #f8f9fa 60%, #ffffff);
}

/* Header simplificado - solo imágenes CENTRADAS */
.navbar {
	background: var(--text-light);
	box-shadow: 0 2px 15px rgba(128, 0, 32, 0.15);
	padding: 1.5rem 0;
	border: none;
	border-bottom: 4px solid var(--primary-burgundy);
	min-height: 90px;
	width: 100%;
}

.navbar .container-fluid {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 2rem;
}

/* Contenedor de imágenes perfectamente centrado */
.navbar-images-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3rem;
	width: auto;
}

/* Estilos optimizados para las imágenes del header */
.government-seal {
	max-height: 70px;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 2px 6px rgba(128, 0, 32, 0.1));
	transition: all 0.3s ease;
}

.government-seal:hover {
	transform: scale(1.05);
	filter: drop-shadow(0 4px 10px rgba(128, 0, 32, 0.2));
}

/* Container principal con ancho máximo de 1440px */
.container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 2rem 1rem;
}

/* Header moderno */
.modern-header {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(128, 0, 32, 0.9), rgba(157, 67, 87, 0.85));
	color: var(--text-light);
}

.modern-header .header-background {
	position: absolute;
	inset: 0;
	opacity: 0.15;
}

.modern-header .header-pattern {
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-content {
	position: relative;
	z-index: 2;
}

.header-title {
	font-size: 2rem;
	font-weight: 700;
	margin: 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header-icon-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.header-icon {
	font-size: 3rem;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.icon-glow {
	position: absolute;
	inset: -10px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 70%);
	border-radius: 50%;
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 0.5;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.1);
	}
}

.animated-title {
	animation: slideInRight 1s ease-out;
}

.animated-icon {
	animation: bounceIn 1s ease-out;
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Tarjetas modernas */
.modern-card {
	border: none;
	border-radius: 15px;
	box-shadow: 0 8px 25px rgba(128, 0, 32, 0.1);
	overflow: hidden;
	transition: all 0.3s ease;
}

.modern-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(128, 0, 32, 0.15);
}

.modern-card .card-header {
	background: linear-gradient(135deg, var(--primary-burgundy), var(--secondary-burgundy));
	color: var(--text-light);
	border: none;
	padding: 1.5rem;
}

/* Bootstrap overrides */
.btn-primary {
	background: linear-gradient(135deg, var(--primary-burgundy), var(--secondary-burgundy));
	border: none;
	border-radius: 8px;
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	transition: all 0.3s ease;
}

.btn-primary:hover {
	background: linear-gradient(135deg, var(--secondary-burgundy), var(--primary-burgundy));
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(128, 0, 32, 0.3);
}

.form-control:focus {
	border-color: var(--primary-burgundy);
	box-shadow: 0 0 0 0.2rem rgba(128, 0, 32, 0.25);
}

.form-label.required::after {
	content: " *";
	color: var(--error-red);
}

/* Validación */
.text-danger {
	color: var(--error-red) !important;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

.is-invalid {
	border-color: var(--error-red);
}

.is-invalid:focus {
	border-color: var(--error-red);
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Footer */
.footer {
	background: var(--primary-burgundy) !important;
	border-top: 3px solid var(--secondary-burgundy);
}

/* Mejoras de UX */
.input-group-text {
	background-color: var(--background-light);
	border-color: #ced4da;
	color: var(--primary-burgundy);
}

.alert {
	border: none;
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.badge {
	font-size: 0.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
}

/* Estados específicos */
.badge.bg-warning {
	background-color: #ffc107 !important;
	color: #000 !important;
}

.badge.bg-info {
	background-color: #17a2b8 !important;
}

.badge.bg-success {
	background-color: #28a745 !important;
}

.badge.bg-secondary {
	background-color: #6c757d !important;
}

/* Tabla responsive */
.table-hover tbody tr:hover {
	background-color: rgba(128, 0, 32, 0.05);
}

/* Animaciones de entrada */
.main-content {
	animation: fadeIn 0.5s ease-in;
}

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

/* Media queries */
@media (max-width: 768px) {
	.header-title {
		font-size: 1.5rem;
		text-align: center;
	}

	.header-icon {
		font-size: 2rem;
	}

	.navbar-images-container {
		gap: 1.5rem;
	}

	.government-seal {
		max-height: 50px;
	}

	.container {
		padding: 1rem;
	}
}

/* Impresión */
@media print {
	.navbar,
	.footer,
	.btn,
	.alert {
		display: none !important;
	}

	.modern-card {
		box-shadow: none !important;
		border: 1px solid #000 !important;
	}

	.bg-pattern {
		background: white !important;
	}
}