/* ===== THEME SYSTEM ===== */

/* Default (Light) Theme - mantiene los estilos actuales */
:root {
	/* No necesitamos variables para el tema claro, usamos los estilos existentes */
}

/* Dark Theme Variables */
[data-theme="dark"] {
	/* Backgrounds */
	--bg-gradient: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
	--card-bg: #2d3748;
	--card-header-bg: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
	--input-bg: #4a5568;
	--alert-bg: #2d3748;

	/* Text Colors */
	--text-primary: #ffffff;
	--text-secondary: #cbd5e0;
	--text-muted: #a0aec0;

	/* Borders and Shadows */
	--border-color: #4a5568;
	--shadow: rgba(0, 0, 0, 0.4);

	/* Button Colors */
	--btn-primary-bg: linear-gradient(135deg, #4299e1 0%, #667eea 100%);
	--btn-primary-hover: linear-gradient(135deg, #3182ce 0%, #5a6fd8 100%);
	--btn-success-bg: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
	--btn-success-hover: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
	--btn-outline-color: #718096;
	--btn-outline-hover-bg: #4a5568;
}

/* Dark Theme Styles */
[data-theme="dark"] body {
	background: var(--bg-gradient) !important;
	color: var(--text-primary);
}

[data-theme="dark"] .card,
[data-theme="dark"] .login-card {
	background-color: var(--card-bg) !important;
	border-color: var(--border-color);
	box-shadow: 0 0.5rem 1rem var(--shadow) !important;
}

[data-theme="dark"] .login-header,
[data-theme="dark"] .card-header {
	background: var(--card-header-bg) !important;
	border-bottom-color: var(--border-color);
}

[data-theme="dark"] .form-control {
	background-color: var(--input-bg) !important;
	border-color: var(--border-color) !important;
	color: var(--text-primary) !important;
}

[data-theme="dark"] .form-control:focus {
	background-color: var(--input-bg) !important;
	border-color: #667eea !important;
	color: var(--text-primary) !important;
	box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

[data-theme="dark"] .form-control::placeholder {
	color: var(--text-muted) !important;
}

[data-theme="dark"] .btn-login {
	background: var(--btn-primary-bg) !important;
}

[data-theme="dark"] .btn-login:hover {
	background: var(--btn-primary-hover) !important;
}

[data-theme="dark"] .btn-success.btn-login {
	background: var(--btn-success-bg) !important;
}

[data-theme="dark"] .btn-success.btn-login:hover {
	background: var(--btn-success-hover) !important;
}

[data-theme="dark"] .btn-outline-secondary {
	color: var(--btn-outline-color) !important;
	border-color: var(--border-color) !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
	background-color: var(--btn-outline-hover-bg) !important;
	border-color: var(--border-color) !important;
	color: var(--text-primary) !important;
}

[data-theme="dark"] .text-muted {
	color: var(--text-muted) !important;
}

[data-theme="dark"] .text-secondary {
	color: var(--text-secondary) !important;
}

[data-theme="dark"] .alert {
	background-color: var(--alert-bg) !important;
	border-color: var(--border-color) !important;
	color: var(--text-primary) !important;
}

[data-theme="dark"] .alert-info {
	background-color: #1e3a5f !important;
	border-color: #2e5984 !important;
	color: #9fdbf0 !important;
}

[data-theme="dark"] .alert-warning {
	background-color: #5d4e37 !important;
	border-color: #7d6e47 !important;
	color: #f0d090 !important;
}

[data-theme="dark"] .alert-danger {
	background-color: #5d2a2a !important;
	border-color: #7d3a3a !important;
	color: #f0a0a0 !important;
}

[data-theme="dark"] .alert-success {
	background-color: #2a5d2a !important;
	border-color: #3a7d3a !important;
	color: #a0f0a0 !important;
}

[data-theme="dark"] .method-card {
	background-color: var(--card-bg) !important;
	border-color: var(--border-color) !important;
}

[data-theme="dark"] .method-card:hover {
	box-shadow: 0 4px 8px var(--shadow) !important;
}

[data-theme="dark"] .method-card.selected {
	background-color: #4a5568 !important;
}

[data-theme="dark"] .qr-container {
	background: var(--card-bg) !important;
	border-color: var(--border-color) !important;
}

[data-theme="dark"] .card-footer {
	background-color: #4a5568 !important;
	border-color: var(--border-color) !important;
	color: var(--text-muted) !important;
}

[data-theme="dark"] .email-icon,
[data-theme="dark"] .phone-icon {
	background: var(--btn-primary-bg) !important;
}

[data-theme="dark"] .step-number {
	background: var(--btn-primary-bg) !important;
}

[data-theme="dark"] .dos-fa-input:focus {
	border-color: #667eea !important;
	box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

/* Table styles for dark mode */
[data-theme="dark"] .table {
	color: var(--text-primary) !important;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
	color: #e2e8f0 !important;
	border-color: #4a5568 !important;
}

[data-theme="dark"] .table thead th {
	color: #f7fafc !important;
	border-bottom-color: #4a5568 !important;
}

[data-theme="dark"] .table-responsive {
	background-color: var(--card-bg) !important;
}

/* Table hover effects in dark mode */
[data-theme="dark"] .table-hover tbody tr:hover {
	background-color: rgba(255, 255, 255, 0.05) !important;
	color: #ffffff !important;
}

/* Badge styles for dark mode */
[data-theme="dark"] .badge {
	color: #ffffff !important;
}

[data-theme="dark"] .badge.bg-success {
	background-color: #38a169 !important;
}

[data-theme="dark"] .badge.bg-warning {
	background-color: #d69e2e !important;
}

[data-theme="dark"] .badge.bg-danger {
	background-color: #e53e3e !important;
}

/* Modal styles for both themes */
.modal-content {
	background-color: var(--bg-primary, #ffffff);
	color: var(--text-primary, #212529);
}

.modal-header {
	background-color: var(--bg-secondary, #f8f9fa);
	border-bottom-color: var(--border-color, #dee2e6);
}

.modal-title {
	color: var(--text-primary, #212529) !important;
}

.modal-body {
	background-color: var(--bg-primary, #ffffff);
}

.modal-footer {
	background-color: var(--bg-secondary, #f8f9fa);
	border-top-color: var(--border-color, #dee2e6);
}

/* Form labels in modals */
.modal .form-label {
	color: var(--text-primary, #212529) !important;
}

.modal .form-check-label {
	color: var(--text-primary, #212529) !important;
}

/* Dark mode specific modal styles */
[data-theme="dark"] .modal-content {
	background-color: var(--card-bg) !important;
	color: var(--text-primary) !important;
	border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-header {
	background-color: var(--bg-secondary) !important;
	border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-title {
	color: var(--text-primary) !important;
}

[data-theme="dark"] .modal-body {
	background-color: var(--card-bg) !important;
}

[data-theme="dark"] .modal-footer {
	background-color: var(--bg-secondary) !important;
	border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .modal .form-label {
	color: var(--text-primary) !important;
}

[data-theme="dark"] .modal .form-check-label {
	color: var(--text-primary) !important;
}

[data-theme="dark"] .modal .form-control {
	background-color: var(--input-bg) !important;
	border-color: var(--input-border) !important;
	color: var(--text-primary) !important;
}

[data-theme="dark"] .modal .form-control:focus {
	background-color: var(--input-bg) !important;
	border-color: #667eea !important;
	color: var(--text-primary) !important;
	box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

[data-theme="dark"] .modal .btn-close {
	filter: invert(1);
}

/* Theme Toggle Button */
.theme-toggle {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid #dee2e6;
	color: #495057;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(10px);
	animation: fadeInBounce 0.6s ease-out;
}

.theme-toggle:hover {
	background: rgba(255, 255, 255, 1);
	transform: scale(1.15) rotate(10deg);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.theme-toggle:active {
	transform: scale(0.95);
	transition: transform 0.1s ease;
}

.theme-toggle i {
	font-size: 1.2rem;
	transition: all 0.3s ease;
}

.theme-toggle:hover i {
	transform: rotate(15deg);
}

/* Theme switching animation */
.theme-toggle.switching {
	animation: switchTheme 0.6s ease-in-out;
}

.theme-toggle.switching i {
	animation: iconSpin 0.6s ease-in-out;
}

[data-theme="dark"] .theme-toggle {
	background: rgba(45, 55, 72, 0.95);
	border-color: #4a5568;
	color: #ffd700;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .theme-toggle:hover {
	background: rgba(45, 55, 72, 1);
	transform: scale(1.15) rotate(-10deg);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Keyframe Animations */
@keyframes fadeInBounce {
	0% {
		opacity: 0;
		transform: scale(0.3) rotate(180deg);
	}
	50% {
		opacity: 1;
		transform: scale(1.1) rotate(-10deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

@keyframes switchTheme {
	0% {
		transform: scale(1) rotate(0deg);
	}
	25% {
		transform: scale(1.2) rotate(90deg);
	}
	50% {
		transform: scale(0.8) rotate(180deg);
	}
	75% {
		transform: scale(1.1) rotate(270deg);
	}
	100% {
		transform: scale(1) rotate(360deg);
	}
}

@keyframes iconSpin {
	0% {
		transform: rotate(0deg) scale(1);
		opacity: 1;
	}
	50% {
		transform: rotate(180deg) scale(0.8);
		opacity: 0.7;
	}
	100% {
		transform: rotate(360deg) scale(1);
		opacity: 1;
	}
}

/* Pulse effect for first-time users */
.theme-toggle.pulse {
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(102, 126, 234, 0.7);
	}
	70% {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
			0 0 0 10px rgba(102, 126, 234, 0);
	}
	100% {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(102, 126, 234, 0);
	}
}

/* Smooth transitions */
* {
	transition: background-color 0.3s ease, color 0.3s ease,
		border-color 0.3s ease;
}

/* Theme Toggle Menu Item */
.theme-toggle-menu {
	transition: all 0.3s ease;
}

.theme-toggle-menu:hover {
	background-color: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="dark"] .theme-toggle-menu:hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-toggle-menu i {
	transition: transform 0.3s ease;
}

.theme-toggle-menu:hover i {
	transform: rotate(15deg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.theme-toggle {
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
	}
}