/* Modo oscuro base y botón de alternancia */

/* Botón flotante de alternancia */
.mode-toggle {
	position: fixed;
	top: 7px;
	right: 15px;
	background: #333;
	color: #fff;
	border: none;
	font-size: 1.2rem;
	padding: 9px;
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
	z-index: 1000;
}

.mode-toggle:hover {
	transform: scale(1.05);
}

/* Colores globales en modo oscuro */
.dark-mode {
	background: linear-gradient(to bottom, #333, #555);
	color: #f0f2f5;
}

.dark-mode .container {
	background-color: rgba(68, 68, 68, 0.9);
}

.dark-mode .left-side {
	background-color: #555;
}

.dark-mode .label,
.dark-mode .checkbox-label,
.dark-mode .welcome-text {
	color: #fff;
}

.dark-mode .mode-toggle {
	background: #fff;
	color: #333;
}

/* Enlaces en modo oscuro */
.dark-mode a {
	color: #ff8080;
}

/* Botones comunes */
.dark-mode button,
.dark-mode .button,
.dark-mode #form1 button {
	background-color: #4CAF50;
	color: #fff;
}

.dark-mode button:hover,
.dark-mode .button:hover,
.dark-mode #form1 button:hover {
	background-color: #45a049;
}

/* Inputs y campos */
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
	background-color: #444;
	color: #fff;
	border: none;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
	color: #ccc;
}

/* Notificaciones (si existen) */
.dark-mode .notification.info {
	background-color: #01579b;
	color: #e1f5fe;
}

.dark-mode .notification.warning {
	background-color: #e65100;
	color: #fff3e0;
}

.dark-mode .notification.error {
	background-color: #c62828;
	color: #ffebee;
}

.dark-mode .notification.success {
	background-color: #2e7d32;
	color: #e8f5e9;
}